aria-labelledby

När ska det användas

När ett synligt textstycke på sidan redan beskriver elementet — en rubrik ovanför en dialog, en kolumnrubrik ovanför en cell, ett stycke som introducerar en region. aria-labelledby pekar på den texten så att skärmläsaren meddelar den som elementets tillgängliga namn. Användaren hör exakt det en seende användare läser.

Det inbyggda HTML-alternativet är <label for="…"> på formulärfält. aria-labelledby utvidgar samma idé till vilken roll som helst som stöder ett namn.

Hur det fungerar

Värdet är en blankstegsavgränsad lista med element-ID:n. AT samlar in textinnehållet från alla refererade element i ordning, fogar samman dem med blanksteg och använder resultatet som det tillgängliga namnet. Referenser till dolda element (display: none, hidden) bidrar fortfarande med sin text — elementet behöver bara finnas i DOM:en.

aria-labelledby har företräde framför aria-label, som i sin tur har företräde framför synlig inre text. Om du pekar på den synliga rubriken behöver du därför inte också ange ett aria-label.

För att hålla relationen giltig: de refererade ID:na måste finnas på sidan, vara unika och texten i dem måste förbli meningsfull. Om du återskapar en flikpanel och återanvänder ID:n, dubbelkolla att det nya innehållet fortfarande beskriver det etiketterade elementet.

Vanliga fel

• Att peka på ett ID som inte finns (stavfel, element borttaget, komponent avmonterad). Relationen misslyckas tyst och elementet saknar namn.
• Att återanvända samma ID två gånger på sidan — enbart den första träffen räknas.
• Att referera till ett element vars text är tom eller enbart består av blanksteg.
• Sammansättning i fel ordning: aria-labelledby="surname firstname" ger “Svensson Johan” när du ville ha “Johan Svensson”.
• Att peka på en generisk <div> som innehåller ett långt stycke — hela stycket blir namnet. Namnet ska vara kort; längre sammanhang hör hemma i aria-describedby.
• Att glömma att uppdatera den refererade texten vid lokalisering — namnen hamnar ur synk med det synliga gränssnittet.

Exempel

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

<!-- Two IDs concatenated for a "first + last name" pattern -->
<span id="first">First name</span>
<span id="last">(required)</span>
<input type="text" aria-labelledby="first last">