Standarder · ARIA

Egenskab Relation

aria-label

Giver et tilgængeligt navn som en streng, når der ikke er nogen synlig tekst. Brug kun, når der ikke er nogen synlig etiket — hvis der er synlig tekst, foretræk aria-labelledby, så det talte navn svarer til det, brugeren ser.

Hvornår bruges den

Når et element ikke har synlig tekst — ikonknapper, søgefelter med kun et forstørrelsesglassymbol, luk (×)-knapper, ikoner til sociale medier. Den streng, du angiver i aria-label, bliver elementets tilgængelige navn, og skærmlæsere annoncerer det i stedet for eventuel indre tekst.

Det native HTML-ækvivalent er <label>-elementet til formularinputfelter eller synlig knapetikst. Brug kun aria-label, når ingen af disse muligheder er tilgængelige.

Sådan fungerer den

Tager en enkelt streng. Hvad du end angiver i aria-label, tilsidesætter al synlig tekst inde i elementet — det tilgængelige navn er det, hjælpeteknologibrugere hører, men det er usynligt for seende brugere. Den asymmetri er kilden til de fleste fejl med denne attribut.

Strengen oversættes ikke automatisk. Understøtter dit site flere sprog, skal aria-label-værdien lokaliseres som enhver anden UI-streng. Skærmlæsere behandler desuden værdien som ren tekst — ingen HTML, ingen linjeskift, ingen markup.

Hvis elementet har synlig tekst, bør du foretrække aria-labelledby, der peger på den tekst, så den synlige etiket og det tilgængelige navn forbliver synkroniserede.

Hyppige fejl

  • Angivelse af aria-label="Klik her" på en knap, der allerede viser “Send ordre” — den synlige tekst skjules for hjælpeteknologi, og brugeren hører noget forkert.
  • Overtrædelse af WCAG 2.5.3 Label in Name: aria-label="Send" på en knap, hvis synlige tekst lyder “Send ordre” — en stemmestyringbruger kan ikke sige “klik Send ordre” for at aktivere den.
  • Tilføjelse af aria-label på et ikke-interaktivt element som en <div> eller <span> — de fleste browsere ignorerer det, fordi elementet ikke har en rolle, der understøtter et navn.
  • Lade værdien være uoversat, når resten af siden er på et andet sprog.
  • Brug af aria-label i stedet for et rigtigt <label>-element på et formularfelt, hvilket ødelægger affordancen “klik på etiketten for at fokusere feltet”.
  • Fyld vejledninger ind i aria-label i stedet for aria-describedby. Navnet skal være kort; hjælpetekst hører hjemme i beskrivelsen.

Eksempel

<!-- Ikonknap: ingen synlig tekst, aria-label er påkrævet -->
<button type="button" aria-label="Luk dialog">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Synlig tekst + ikon: brug IKKE aria-label her -->
<button type="button">
  <svg aria-hidden="true" focusable="false">…</svg>
  Luk dialog
</button>