aria-labelledby

Milloin käyttää

Kun sivun näkyvä teksti jo kuvaa elementtiä — dialogin yläpuolella oleva otsikko, solun yläpuolella oleva sarakkeen otsikko, alueen esittelevä kappale. aria-labelledby-attribuutti osoittaa kyseiseen tekstiin, jotta ruudunlukuohjelma ilmoittaa sen elementin saavutettavana nimenä. Käyttäjä kuulee täsmälleen sen, mitä näkevä käyttäjä lukee.

Natiivi HTML-vastine on <label for="…"> lomakesyötteissä. aria-labelledby laajentaa saman idean kaikkiin rooleihin, jotka tukevat nimeä.

Miten se toimii

Arvo on välilyönnein eroteltu lista elementti-ID:istä. AT kerää jokaisen viitatun elementin tekstisisällön järjestyksessä, yhdistää ne välilyönneillä ja käyttää tulosta saavutettavana nimenä. Viittaukset piilotettuihin elementteihin (display: none, hidden) osallistuvat silti tekstiin — elementin tarvitsee vain olla DOM:ssa.

aria-labelledby ohittaa aria-label-attribuutin, joka puolestaan ohittaa näkyvän sisäisen tekstin. Joten jos osoitat näkyvään otsikkoon, et tarvitse myös aria-label-attribuuttia.

Suhteen pitämiseksi voimassa: viitattujen ID:iden täytyy olla olemassa sivulla, niiden on oltava yksilöllisiä, ja niiden sisällä olevan tekstin tulee pysyä merkityksellisenä. Jos uudelleenrenderöit välilehtipalkin ja käytät ID:itä uudelleen, tarkista, että uusi sisältö edelleen kuvaa merkittyä elementtiä.

Yleisiä virheitä

• Osoittaminen ID:hen, jota ei ole olemassa (kirjoitusvirhe, elementti poistettu, komponentti unmounted). Suhde epäonnistuu hiljaisesti ja elementti jää nimeämättä.
• Saman ID:n käyttäminen kahdesti sivulla — vain ensimmäinen osuma lasketaan.
• Viittaaminen elementtiin, jonka teksti on tyhjä tai vain välilyöntejä.
• Yhdistäminen väärässä järjestyksessä: aria-labelledby="surname firstname" tuottaa “Smith John”, kun halusit “John Smith”.
• Osoittaminen geneeriseen <div>-elementtiin, joka sisältää pitkän kappaleen — koko kappaleesta tulee nimi. Nimien tulee olla lyhyitä; pitkä konteksti kuuluu aria-describedby-attribuuttiin.
• Viitatun tekstin päivittäminen unohtaminen lokalisoinnin yhteydessä — nimet erkaantuvat näkyvästä käyttöliittymästä.

Esimerkki

<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">