Tila Yleinen tila

`aria-hidden`

Poistaa elementin ja kaikki sen jälkeläiset saavutettavuuspuusta. Näkevät käyttäjät näkevät elementin edelleen; avustava teknologia ei koskaan tavoita sitä. Varaa koristeelliselle sisällölle; älä koskaan sovella kohdistettavaan ohjauselementtiin.

Milloin käyttää

Koristeelliselle sisällölle, joka ei lisää mitään ruudunlukuohjelmien käyttäjille — tavallisesti kuvakkeet, joiden vieressä on jo tekstiselite, erottimet, taustakuvat tai duplikoitu teksti, joka on olemassa vain asettelua varten. Näiden elementtien merkitseminen aria-hidden="true" pitää saavutettavuuspuun fokuksessa merkityksellisessä sisällössä.

Vertailu vastaaviin mekanismeihin:

aria-hidden="true" — näkyvä näkeville käyttäjille, näkymätön avustavalle teknologialle. Elementti varaa edelleen tilaa asettelussa.
CSS display: none ja HTML:n hidden-attribuutti — näkymätön kaikille (näkeville käyttäjille ja avustavalle teknologialle). Elementtiä ei renderöidä lainkaan.
CSS visibility: hidden — näkymätön kaikille, mutta elementti varaa edelleen tilaa asettelussa.
inert-attribuutti — elementti ja sen jälkeläiset eivät ole kohdistettavia, klikkitapahtumat estetään, mutta ne pysyvät saavutettavuuspuussa (toisin kuin aria-hidden). Oikea työkalu modaalin taustakerroksen ja pois reititettyjen näkymien käsittelyyn.

Tärkeää: älä koskaan sovella aria-hidden="true" elementtiin, joka on tai sisältää kohdistettavan ohjauselementin. Näppäimistökäyttäjät voivat edelleen siirtyä siihen tabilla, mutta heidän ruudunlukuohjelmansa ei ilmoita sitä. Käyttäjä päätyy ohjauselementtiin, joka on heille näkymätön. Tämä on yksi axe-coren yleisimmistä virheistä.

Synkronoinnissa pysyminen

Kelvolliset arvot ovat "true", "false" ja "undefined". Hyödyllinen on "true"; "false" on olemassa ylikirjoittamaan edeltäjän aria-hidden-attribuutti, mitä tarvitaan käytännössä harvoin.

Tila voi olla staattinen (kuvake, joka on aina koristeellinen) tai dynaaminen. Jos vaihdat aria-hidden-attribuuttia alueelle — esimerkiksi piilottaessasi pääsovelluksen modaalin ollessa auki — synkronoi se todellisen visuaalisen tilan kanssa ja yhdistä inert-attribuuttiin niin, että alue on myös ei-kohdistettava.

Yleisiä virheitä

aria-hidden="true" kohdistettavassa elementissä — eniten raportoitu axe-core-ongelma.
aria-hidden-attribuutin käyttäminen piilottamaan näkyvää tekstiä, jonka ei halua luettavan ruudunlukuohjelmalla. Joko poista teksti tai siirrä se pois DOM:sta.
aria-hidden="true" unohtaminen puhtaan koristeellisen kuvakkeen kohdalla nimetyn painikkeen vieressä — ruudunlukuohjelma ilmoittaa kuvakkeen nimen painikkeen nimen lisäksi.
aria-hidden="true" asettaminen <body>- tai <main>-elementtiin lukitakseen taustan sisällön modaalin taakse ilman inert-attribuuttia — näppäimistöfokus voi silti karata.
aria-hidden="false" käyttäminen CSS:llä piilotetun sisällön “näyttämiseen”. CSS piilottaa sen edelleen.

Esimerkki

<button type="button">
  <svg aria-hidden="true" focusable="false" width="16" height="16">…</svg>
  Save
</button>