aria-labelledby

Hvornår bruges den

Når et synligt stykke tekst på siden allerede beskriver elementet — en overskrift over en dialog, en kolonneoverskrift over en celle, et afsnit, der introducerer en region. aria-labelledby peger på den tekst, så skærmlæseren annoncerer den som elementets tilgængelige navn. Brugeren hører præcis det, en seende bruger læser.

Det native HTML-ækvivalent er <label for="…"> på formularinputfelter. aria-labelledby udvider den samme idé til alle roller, der understøtter et navn.

Sådan fungerer den

Værdien er en mellemrumssepareret liste af element-id’er. Hjælpeteknologien indsamler tekstindholdet fra hvert refereret element i rækkefølge, sammenkæder dem med mellemrum og bruger resultatet som det tilgængelige navn. Referencer til skjulte elementer (display: none, hidden) bidrager stadig med deres tekst — elementet skal blot være i DOM’en.

aria-labelledby har prioritet over aria-label, som igen har prioritet over synlig indre tekst. Hvis du peger på den synlige overskrift, behøver du ikke tilføje en aria-label.

For at holde relationen gyldig: de refererede id’er skal eksistere på siden, være unikke, og teksten i dem skal forblive meningsfuld. Hvis du gengiver et fanepanel og genbruger id’er, skal du dobbelttjekke, at det nye indhold stadig beskriver det labelede element.

Hyppige fejl

• Pege på et id, der ikke eksisterer (stavefejl, element fjernet, komponent afmonteret). Relationen fejler lydløst, og elementet ender uden navn.
• Genbruge det samme id to gange på siden — kun det første match tæller.
• Referere til et element, hvis tekst er tom eller kun indeholder mellemrum.
• Sammenkædning i forkert rækkefølge: aria-labelledby="efternavn fornavn" producerer “Jensen Lars”, når du ville have “Lars Jensen”.
• Pege på en generisk <div> med et langt afsnit — hele afsnittet bliver navnet. Navne skal være korte; langt kontekstindhold hører hjemme i aria-describedby.
• Glemsel af at opdatere den refererede tekst ved lokalisering — navne mister synkronisering med den synlige brugerflade.

Eksempel

<h2 id="billing-heading">Faktureringsadresse</h2>
<div role="group" aria-labelledby="billing-heading">
  <label>
    Gade
    <input type="text" autocomplete="street-address">
  </label>
  <!-- … -->
</div>

<!-- To id'er sammenkædet til mønsteret "fornavn + efternavn" -->
<span id="first">Fornavn</span>
<span id="last">(påkrævet)</span>
<input type="text" aria-labelledby="first last">