aria-describedby

Hvornår skal den bruges

Til supplerende information ved siden af et kontrolelement: et formathint under et datofelt (“MM/DD/ÅÅÅÅ”), en liste med adgangskoderegler, en inline-fejlmeddelelse, vejledningen over et komplekst widget. Etiketten svarer på hvad er dette?; beskrivelsen svarer på hvad er ellers vigtigt at vide?.

Brug den på formularinput, knapper, dialoger og ethvert brugerdefineret widget, hvor ekstra kontekst hører hjemme efter navnet.

Hvordan den opfører sig

Værdien er en mellemrumsadskilt liste af element-id’er, samme form som aria-labelledby. Skærmlæsere annoncerer beskrivelsen efter det tilgængelige navn og rollen, typisk efter en kort pause — “E-mail, redigeringsfelt, Vi kontakter dig kun vedrørende denne ordre.” Flere id’er sammenkædes i den rækkefølge, de er angivet.

Beskrivelsen er ikke navnet. Den optræder ikke i tilgængelighedstræets navnefelt, så axe-core tæller den ikke som etikettering af kontrolelementet. Har kontrolelementet intet navn, kan aria-describedby ikke redde det.

Ændres beskrivelsen (f.eks. vises en fejl), skal det refererede elements tekstindhold opdateres frem for at bytte selve aria-describedby-værdien — mange hjælpeteknologier genannoncerer ikke, når attributten selv ændres, men de genannoncerer, når den refererede tekst er en del af en live-region, eller når fokus flyttes til feltet igen.

Typiske fejl

• Brug af aria-describedby til det, der burde være navnet. Kontrolelementet har stadig ingen etiket; brugeren hører beskrivelsen men aldrig navnet.
• Henvisning til et id, der ikke eksisterer, eller som er fjernet fra DOM’en under rendering.
• Tilføjelse af aria-describedby til et ikke-fokuserbart element. De fleste browsere eksponerer kun beskrivelsen, når elementet modtager fokus eller forespørges direkte.
• Lang markedringstekst som beskrivelse — omfangsrige annonceringer får brugere til at slå beskrivelser fra globalt.
• Glemme at knytte inline-formularfejl. aria-describedby="email-error" kombineret med aria-invalid="true" er kanonmønstret; uden referencen er fejlen synlig men tavs.
• Genbrug af samme beskrivelses-id på mange felter med aria-describedby="hint" — virker, men kontroller at den samme tekst faktisk gælder for hvert felt.

Eksempel

<label for="password">Adgangskode</label>
<input
  id="password"
  type="password"
  aria-describedby="pw-rules pw-error"
  aria-invalid="true"
>
<p id="pw-rules">Mindst 12 tegn, inklusiv et tal.</p>
<p id="pw-error">Adgangskoden er for kort.</p>