aria-describedby

Wanneer gebruiken

Voor aanvullende informatie die naast een besturingselement staat: een opmaakaanwijzing onder een datumveld (“DD/MM/JJJJ”), een lijst met wachtwoordvereisten, een inline foutmelding, de instructies boven een complex widget. Het label beantwoordt de vraag wat is dit?; de beschrijving beantwoordt wat moet ik verder weten?.

Gebruik het op formulierinvulvelden, knoppen, dialoogvensters en elk aangepast widget waarbij extra context na de naam thuishoort.

Hoe het werkt

De waarde is een door spaties gescheiden lijst van element-ID’s, dezelfde vorm als aria-labelledby. Schermlesers kondigen de beschrijving aan na de toegankelijke naam en rol, gewoonlijk na een korte pauze — “E-mail, tekstveld, Wij nemen alleen contact op over uw bestelling.” Meerdere ID’s worden samengevoegd in de volgorde waarin ze worden vermeld.

De beschrijving is niet de naam. Hij verschijnt niet in het naamveld van de toegankelijkheidsstructuur, dus axe-core telt hem niet als labeling van het besturingselement. Als het besturingselement geen naam heeft, kan aria-describedby dit niet herstellen.

Als de beschrijving verandert (bijvoorbeeld wanneer een fout verschijnt), past men de tekstinhoud van het verwezen element aan in plaats van de waarde van aria-describedby te verwisselen — veel hulptechnologie kondigt niet opnieuw aan wanneer het attribuut zelf verandert, maar wel wanneer de verwezen tekst deel uitmaakt van een live-regio of wanneer de focus het veld opnieuw betreedt.

Veelvoorkomende fouten

• aria-describedby gebruiken voor wat de naam zou moeten zijn. Het besturingselement heeft nog steeds geen label; de gebruiker hoort de beschrijving maar nooit de naam.
• Verwijzen naar een ID die niet bestaat of die door een render uit de DOM is verwijderd.
• aria-describedby toevoegen aan een element dat geen focus kan ontvangen. De meeste browsers tonen de beschrijving alleen wanneer het element focus krijgt of direct wordt bevraagd.
• Lange marketingtekst als beschrijving — uitvoerige aankondigingen brengen gebruikers ertoe beschrijvingen wereldwijd uit te schakelen.
• Vergeten inline formulierfouten te koppelen. aria-describedby="email-error" gecombineerd met aria-invalid="true" is het canonieke patroon; zonder de verwijzing is de fout zichtbaar maar stil.
• Hetzelfde beschrijvings-ID voor meerdere velden hergebruiken via aria-describedby="hint" — werkt, maar controleer of de tekst daadwerkelijk op elk veld van toepassing is.

Voorbeeld

<label for="password">Wachtwoord</label>
<input
  id="password"
  type="password"
  aria-describedby="pw-rules pw-error"
  aria-invalid="true"
>
<p id="pw-rules">Minimaal 12 tekens, inclusief een cijfer.</p>
<p id="pw-error">Wachtwoord is te kort.</p>