Koristeellisten kuvakkeiden piilottaminen aria-hidden-arvolla
Pitäkää koristeet poissa saavutettavuuspuusta.
Koristeellisten kuvakkeiden piilottaminen aria-hidden-arvolla on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Web Accessibility Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Jotkin kuvakkeet eivät kerro mitään
Pieni koriste kuvakkeen vieressä ei lisää ruudunlukijan käyttäjälle mitään. Sen ilmoittaminen lisää vain hälyä, jonka läpi heidän täytyy kulkea. 🔇
Koristeellinen
Kuvake on koristeellinen, jos sen poistaminen ei muuttaisi sitä, mitä käyttäjä ymmärtää. Vieressä oleva teksti sisältää merkityksen jo valmiiksi.
Piilottakaa se saavutettavuuspuusta
Asettakaa koristeelliselle kuvakkeelle aria-hidden="true", jotta se poistuu saavutettavuuspuusta ja ruudunlukijat ohittavat sen kokonaan.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>Se piilottaa myös alielementit
Yksi aria-hidden="true" sisältävä kääre piilottaa sekä elementin että kaiken sen sisällön, joten määrite lisätään säilöön eikä jokaiseen polkuun.
Tyhjä alt tekee saman img-elementille
Jos koristeellinen kuvake on <img>, antakaa sille sen sijaan tyhjä alt-arvo. Tyhjä alt kertoo ruudunlukijalle, että kuva ohitetaan.
<img src="sparkle.png" alt="" />Älkää koskaan piilottako näkyvää sisältöä
Kultainen sääntö: älkää lisätkö aria-hidden-määrettä mihinkään, johon näkevä käyttäjä luottaa. Muuten poistaisitte todellista sisältöä joidenkin käyttäjien ulottuvilta.
Älkää koskaan piilottako kohdistettavia elementtejä
aria-hidden-määritteen lisääminen kohdistettavaan elementtiin luo haamun: näppäimistön käyttäjä päätyy ohjausobjektiin, jota ruudunlukija kieltäytyy ilmoittamasta.
Käyttäkää rinnalla focusable-arvoa false
Lisätkää koristeellisille sisäkkäisille SVG:ille focusable="false" aria-hidden-määritteen rinnalle, jotta mikään selain ei siirrä niitä sarkainjärjestykseen.
<svg aria-hidden="true" focusable="false">
<path d="..." />
</svg>Toistuvat kuvakkeet ovat koristeellisia
Roskakorikuvake sanan Delete vieressä on toistuva. Piilottakaa kuvake ja antakaa näkyvän tekstin kertoa asia kaikille.
Varokaa yksittäistä kuvaketta
Varoitus: kuvake, jonka lähellä ei ole tekstiä, ei yleensä ole koristeellinen. Sen piilottaminen jättäisi ohjausobjektin ilman sisältöä ja nimeä.
Varmistakaa, että se on poissa
Saavutettavuuden tarkastelutyökalussa oikein piilotettu kuvake yksinkertaisesti katoaa puusta. Tyhjä kohta on juuri se, mitä haluatte.
Pikatarkistus
Valintamerkkikuvake on aivan näkyvän sanan Complete vieressä. Mitä kuvakkeelle pitäisi tehdä?
Kertaus: piilottakaa häly
Koristeellisille kuvakkeille lisätään aria-hidden="true" (tai tyhjä alt) ja focusable false, mutta ei koskaan kohdistettaviin elementteihin tai ainutlaatuiseen sisältöön. Vähemmän hälyä, selkeämmät sivut. 🎯
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Koristeellisten kuvakkeiden piilottaminen aria-hidden-arvolla” ilmainen?
Kyllä – oppitunnin ”Koristeellisten kuvakkeiden piilottaminen aria-hidden-arvolla” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Web Accessibility Academy-kurssin, päivitä CoddyKit PROhon. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Koristeellisten kuvakkeiden piilottaminen aria-hidden-arvolla”?
Pitäkää koristeet poissa saavutettavuuspuusta. Harjoittelet Web Accessibility Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Web Accessibility Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Web Accessibility Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Koristeellisten kuvakkeiden piilottaminen aria-hidden-arvolla”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Web Accessibility Academy-oppitunnilla?
Kyllä. Jokainen Web Accessibility Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tekstinsisäinen SVG: role img ja title
- Koristeellisten kuvakkeiden piilottaminen aria-hidden-arvolla
- Kuvakepainikkeella on edelleen oltava nimi
- Kuvakefontit ja niiden saavutettavuusongelmat