Ominaisuus Suhde

`aria-label`

Tarjoaa saavutettavan nimen merkkijonona, kun näkyvää tekstiä ei ole saatavilla. Käytä vain, kun näytöllä ei ole selitettä — jos näkyvä teksti on olemassa, suosi aria-labelledby-attribuuttia, jotta puhuttu nimi vastaa näkyvää.

Milloin käyttää

Kun ohjauselementillä ei ole näkyvää tekstiä — vain kuvakepainikkeet, hakukentät, joissa on vain suurennuslasikuvake, sulje (×) -painikkeet, sosiaalisen median linkkikuvakkeet. aria-label-attribuuttiin asettamasi merkkijono tulee elementin saavutettavaksi nimeksi, ja ruudunlukuohjelmat ilmoittavat sen sisäisen tekstin sijaan.

Natiivi HTML-vastine on <label>-elementti lomakesyötteille tai painikkeen näkyvä teksti. Turvaudu aria-label-attribuuttiin vain, kun kumpikaan ei ole mahdollinen.

Miten se toimii

Ottaa yksittäisen merkkijonon. aria-label-attribuuttiin asettamasi arvo korvaa elementin sisällä olevan näkyvän tekstin — saavutettava nimi on se, minkä AT-käyttäjät kuulevat, mutta se on näkymätön näkeville käyttäjille. Tämä epäsymmetria on useimpien tämän attribuutin virheiden lähde.

Merkkijonoa ei käännetä automaattisesti. Jos sivustosi tukee useita kieliä, aria-label-attribuutin arvo täytyy lokalisoida kuten mikä tahansa muu käyttöliittymämerkkijono. Ruudunlukuohjelmat käsittelevät arvon myös pelkkänä tekstinä — ei HTML:ää, ei rivinvaihtoja, ei muotoilua.

Jos elementillä on näkyvää tekstiä, suosi aria-labelledby-attribuuttia, joka osoittaa kyseiseen tekstiin, jotta näkyvä selite ja saavutettava nimi pysyvät synkronoituina.

Yleisiä virheitä

aria-label="Click here" asettaminen painikkeeseen, jossa jo lukee “Submit order” — näkyvä teksti on nyt piilotettu AT:lta, ja käyttäjä kuulee väärän asian.
WCAG 2.5.3 Nimi tunnisteessa -vaatimuksen rikkominen: aria-label="Submit" painikkeessa, jonka näkyvä teksti on “Send order”, tarkoittaa, että ääniohjauksen käyttäjä ei voi sanoa “click Send order” käyttääkseen sitä.
aria-label-attribuutin lisääminen ei-interaktiiviseen elementtiin kuten <div> tai <span> — useimmat selaimet sivuuttavat sen, koska elementillä ei ole roolia, joka tukee nimeä.
Arvon jättäminen kääntämättä, kun muu sivu on toisella kielellä.
aria-label-attribuutin käyttäminen oikean <label>-elementin sijaan lomakekentässä, mikä rikkoo “napsauta selitettä kohdistaa kenttä” -toiminnallisuuden.
Ohjeiden täyttäminen aria-label-attribuuttiin aria-describedby-attribuutin sijaan. Nimen tulee olla lyhyt; ohjeteksti kuuluu kuvaukseen.

Esimerkki

<!-- Icon-only button: no visible text, aria-label is required -->
<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Visible text + icon: do NOT use aria-label here -->
<button type="button">
  <svg aria-hidden="true" focusable="false">…</svg>
  Close dialog
</button>