Synlig tekst må matche det tilgjengelige navnet (WCAG 2.5.3)

En bruker ser en knapp med teksten «Send melding» på skjermen og sier til stemmestyringsverktøyet sitt: «Klikk Send melding.» Men ingenting skjer. Hvorfor? Fordi utvikleren har lagt til et aria-label="Kontakt oss via e-post" på knappen. Det brukeren ser og det hjelpemiddelet hører er to helt forskjellige ting. Denne typen misforhold er akkurat det WCAG 2.5.3 skal forhindre.

Hva sier kravet?

WCAG 2.5.3 «Ledetekst i navn» er et nivå A-krav som sier at for brukergrensesnittkomponenter med en synlig tekst-ledetekst (label), skal den synlige teksten finnes igjen i komponentens tilgjengelige navn. Det betyr at det brukeren ser på skjermen, også må være det som hjelpemidlene oppfatter.

Mer presist: den synlige teksten bør enten være hele det tilgjengelige navnet, eller en sammenhengende del av det. Ideelt sett bør det tilgjengelige navnet starte med den synlige teksten.

«Tilgjengelig navn» er det navnet som assisterende teknologier (skjermlesere, stemmestyringsverktøy) bruker for å identifisere et element. Det kan komme fra elementets tekstinnhold, et <label>-element, aria-label, aria-labelledby, alt-tekst eller title-attributtet.

Hvorfor er dette viktig?

Stemmestyring

Brukere av stemmestyringsverktøy (som Dragon NaturallySpeaking, Voice Access eller innebygd stemmekontroll) identifiserer elementer de vil interagere med ved å si den synlige teksten. «Klikk Søk», «Klikk Send», «Klikk Logg inn». Hvis det tilgjengelige navnet ikke stemmer med den synlige teksten, kan ikke stemmestyringsverktøyet finne riktig element.

Resultatet er at brukeren blir frustrert og kanskje må bytte til et langsommere alternativ - som å si «Klikk element nummer 15» etter å ha bedt verktøyet om å nummerere alle klikkbare elementer på siden.

Skjermlesere

Skjermleserbrukere som også kan se skjermen (for eksempel brukere med dysleksi eller lesevansker som bruker skjermleser som støtte) opplever forvirring når det de hører ikke stemmer med det de ser. Hvis knappen sier «Kontakt oss» visuelt, men skjermleseren leser opp «Send forespørsel», mister brukeren tillit til at de fokuserer på riktig element.

Kognitiv belastning

Når synlig tekst og tilgjengelig navn er forskjellige, øker den kognitive belastningen. Brukeren må forholde seg til to forskjellige beskrivelser av samme element, noe som er spesielt utfordrende for brukere med kognitive funksjonsnedsettelser.

Slik oppfyller du kravet

La det synlige innholdet være det tilgjengelige navnet

Den enkleste regelen er: bruk elementets synlige tekst som det tilgjengelige navnet. Ikke overskriv det med noe annet:

<!-- RIKTIG: Synlig tekst er det tilgjengelige navnet -->
<button>Send melding</button>

<!-- RIKTIG: Label-teksten er det tilgjengelige navnet for inputfeltet -->
<label for="epost">E-postadresse</label>
<input type="email" id="epost">

Unngå aria-label som overstyrer synlig tekst

aria-label erstatter det synlige innholdet fullstendig for hjelpemidler. Hvis den synlige teksten og aria-label er forskjellige, oppstår misforholdet:

<!-- FEIL: Synlig tekst er "Søk", men tilgjengelig navn er "Finn produkter i katalogen" -->
<button aria-label="Finn produkter i katalogen">Søk</button>

<!-- RIKTIG: Synlig tekst og tilgjengelig navn er det samme -->
<button>Søk</button>

<!-- OGSÅ RIKTIG: aria-label starter med den synlige teksten -->
<button aria-label="Søk i produktkatalogen">Søk</button>

Legg merke til det siste eksempelet - det er greit å utvide det tilgjengelige navnet med ekstra kontekst, så lenge den synlige teksten er inkludert og helst kommer først.

Vær forsiktig med aria-labelledby

aria-labelledby refererer til ett eller flere elementer som utgjør det tilgjengelige navnet. Sørg for at den synlige teksten er inkludert:

<!-- FEIL: Tilgjengelig navn er bare "Handleliste" - synlig knapptekst "Legg til" er ikke inkludert -->
<h2 id="liste-tittel">Handleliste</h2>
<button aria-labelledby="liste-tittel">Legg til</button>

<!-- RIKTIG: Tilgjengelig navn inkluderer synlig tekst -->
<h2 id="liste-tittel">Handleliste</h2>
<button id="legg-til-knapp" aria-labelledby="legg-til-knapp liste-tittel">Legg til</button>
<!-- Tilgjengelig navn: "Legg til Handleliste" -->

Ikon-knapper med tekst

Hvis en knapp har både ikon og tekst, sørg for at det tilgjengelige navnet inkluderer den synlige teksten:

<!-- RIKTIG: Synlig tekst "Lagre" er en del av det tilgjengelige navnet -->
<button>
  <svg aria-hidden="true"><!-- lagre-ikon --></svg>
  Lagre
</button>

<!-- FEIL: aria-label overstyrer synlig tekst "Lagre" med noe annet -->
<button aria-label="Arkiver dokumentet">
  <svg aria-hidden="true"><!-- lagre-ikon --></svg>
  Lagre
</button>

Bilder med tekst

Hvis en knapp eller lenke inneholder et bilde med tekst, bør alt-teksten reflektere den synlige teksten i bildet:

<!-- FEIL: Bildet viser teksten "Bli medlem", men alt-teksten er noe helt annet -->
<a href="/registrer">
  <img src="banner.jpg" alt="Opprett en gratis konto hos oss i dag">
</a>

<!-- RIKTIG: Alt-teksten matcher den synlige teksten i bildet -->
<a href="/registrer">
  <img src="banner.jpg" alt="Bli medlem">
</a>

Skjema-labels

For skjemaelementer er det viktig at <label>-elementet er korrekt koblet og at teksten i labelen er det som vises visuelt:

<!-- FEIL: Visuell plassholdertekst "Ditt navn" matcher ikke label-teksten -->
<label for="navn" class="visually-hidden">Skriv inn fullt navn her</label>
<input type="text" id="navn" placeholder="Ditt navn">

<!-- RIKTIG: Label-tekst matcher visuell plassholdertekst -->
<label for="navn">Ditt navn</label>
<input type="text" id="navn">

Vanlige feil

• aria-label som er helt forskjellig fra synlig tekst - den vanligste og mest direkte feilen
• Bildknapper med alt-tekst som ikke matcher synlig tekst i bildet - brukeren ser én ting, hjelpemiddelet leser noe annet
• Visuelt skjulte labels som er forskjellige fra plassholdertekst - brukeren ser plassholderteksten, men skjermleseren leser labelen
• Ikon-knapper der aria-label ikke samsvarer med eventuell synlig tekst - spesielt vanlig i verktøylinjer og navigasjonsmenyer
• Dynamisk innhold der synlig tekst endres men aria-label forblir statisk - for eksempel en favoritt-knapp som visuelt bytter mellom «Legg til i favoritter» og «Fjern fra favoritter», men der aria-label ikke oppdateres
• Tredjepartskomponenter med hard-kodet aria-label som ikke matcher den norske oversettelsen av synlig tekst

Hovedregelen er enkel: det brukeren ser, skal også være det hjelpemiddelet hører. Unngå å «forbedre» det tilgjengelige navnet med et helt annet ord eller uttrykk enn det som vises på skjermen.