aria-describedby

När används det

För kompletterande information som sitter intill en kontroll: en formatanvisning under ett datumfält (“MM/DD/ÅÅÅÅ”), en lista med lösenordsregler, ett inline-felmeddelande, instruktionerna ovanför en komplex widget. Etiketten svarar på vad är det här?; beskrivningen svarar på finns det något annat jag behöver veta?.

Använd det på formulärinmatningar, knappar, dialoger och valfri custom-widget där extra kontext hör hemma efter namnet.

Hur det beter sig

Värdet är en blankstegsavgränsad lista med element-ID, samma form som aria-labelledby. Skärmläsare annonserar beskrivningen efter det tillgängliga namnet och rollen, vanligtvis efter en kort paus — “E-post, redigera, Vi kontaktar dig bara angående den här beställningen.” Flera ID:n sammanfogas i den ordning de listas.

Beskrivningen är inte namnet. Den visas inte i tillgänglighetsträdet som namnfält, så axe-core räknar den inte som en etikett för kontrollen. Om kontrollen saknar namn kan aria-describedby inte rädda den.

Om beskrivningen ändras (t.ex. ett fel dyker upp), uppdatera det refererade elementets textinnehåll i stället för att byta ut aria-describedby-värdet — många hjälpmedel annonserar inte om när attributet självt ändras, men de annonserar om när den refererade texten är del av en live-region eller när fokus enters fältet igen.

Vanliga fel

• Att använda aria-describedby för det som borde vara namnet. Kontrollen saknar fortfarande etikett; användaren hör beskrivningen men aldrig namnet.
• Att peka på ett ID som inte finns eller som har tagits bort från DOM:en vid en render.
• Att lägga till aria-describedby på ett icke-fokuserbart element. De flesta webbläsare exponerar beskrivningen bara när elementet får fokus eller tillfrågas direkt.
• Lång marknadsföringskopia som beskrivning — omfattande annonseringar driver användare att inaktivera beskrivningar globalt.
• Att glömma att koppla inline-formulärfel. aria-describedby="email-error" plus aria-invalid="true" är det kanoniska mönstret; utan referensen är felet synligt men tyst.
• Att återanvända samma beskrivnings-ID för många fält med aria-describedby="hint" — fungerar, men kontrollera att samma text faktiskt gäller varje fält.

Exempel

<label for="password">Lösenord</label>
<input
  id="password"
  type="password"
  aria-describedby="pw-rules pw-error"
  aria-invalid="true"
>
<p id="pw-rules">Minst 12 tecken, inklusive en siffra.</p>
<p id="pw-error">Lösenordet är för kort.</p>