aria-describedby

Käyttötilanteet

Täydentävälle tiedolle, joka sijoittuu ohjauselementin viereen: muotovihje päivämääräkentän alla (“PP/KK/VVVV”), salasanan vahvuusvaatimukset, lomakevirhe tekstinä tai monimutkaiselle widgetille tarkoitetut ohjeet. Nimiö vastaa kysymykseen mikä tämä on?; kuvaus vastaa mitä muuta minun täytyy tietää?

Käytetään lomakekentissä, painikkeissa, dialogeissa ja muissa mukautetuissa widgeteissä, joissa lisäkonteksti kuuluu nimen jälkeen.

Toimintaperiaate

Arvo on välilyönneillä erotettu lista elementtien ID-tunnuksista, samassa muodossa kuin aria-labelledby. Ruudunlukuohjelmat lukevat kuvauksen saavutettavan nimen ja roolin jälkeen, yleensä lyhyen tauon jälkeen — “Sähköposti, muokkaa, Otamme yhteyttä vain tätä tilausta koskevissa asioissa.” Useita ID-tunnuksia yhdistetään niiden luettelojärjestyksessä.

Kuvaus ei ole nimi. Se ei näy saavutettavuuspuun nimeämiskentässä, joten axe-core ei laske sitä ohjauselementin nimiöinnin osaksi. Jos ohjauselementillä ei ole nimeä, aria-describedby ei pysty korjaamaan tilannetta.

Jos kuvaus muuttuu (esim. virhe ilmestyy), päivitetään viitatun elementin tekstisisältö sen sijaan, että vaihdetaan itse aria-describedby-attribuutin arvo — monet apuvälineteknologiat eivät toista ilmoitusta attribuutin muuttuessa, mutta toistavat, kun viitattu teksti on osa live-aluetta tai kun kohdistus siirtyy kenttään uudelleen.

Yleisimmät virheet

• aria-describedby-attribuutin käyttö siellä, missä tarvitaan nimi. Ohjauselementillä ei edelleenkään ole nimiötä; käyttäjä kuulee kuvauksen mutta ei koskaan nimeä.
• Viittaus ID-tunnukseen, jota ei ole olemassa tai joka on poistettu DOM:sta renderöinnin yhteydessä.
• aria-describedby-attribuutin lisääminen ei-tarkennettavaan elementtiin. Useimmat selaimet paljastavat kuvauksen vain, kun elementti saa kohdistuksen tai sitä kysytään suoraan.
• Pitkät markkinointitekstit kuvauksena — pitkät ilmoitukset saavat käyttäjät poistamaan kuvaukset käytöstä globaalisti.
• Lomakevirheiden yhdistämisen unohtaminen. aria-describedby="email-error" yhdistettynä aria-invalid="true"-attribuuttiin on vakiorakenne; ilman viittausta virhe on näkyvissä mutta hiljainen.
• Saman kuvaus-ID:n toistokäyttö useilla kentillä aria-describedby="hint"-muodossa — toimii, mutta varmistetaan, että teksti todella soveltuu jokaiselle kentälle.

Esimerkki

<label for="password">Salasana</label>
<input
  id="password"
  type="password"
  aria-describedby="pw-rules pw-error"
  aria-invalid="true"
>
<p id="pw-rules">Vähintään 12 merkkiä, mukana numero.</p>
<p id="pw-error">Salasana on liian lyhyt.</p>