Aki szeret tájékozódni e témában, már bizonyára olvasta Szántai Károly: Hogyan lesz a YouTube ikonból edzőcipő c. írását. Jelen írásomban az általam használt, alaposan tesztelt, képernyőolvasókkal tökéletesen használható megoldást írom le.
aria-hidden="true" attribútum használata. Magyarországon ezt a párosítást tudtommal senki nem használja, ezért ezen attribútum nélkül sincs nagy gond.Ez pedig nem más, mint a Font Awesome ikonkészlete. A titok nyitja, hogy olyan kódokat használ, ahol szinte biztosan kizárt, hogy a képernyőolvasók mást olvassanak, mint amit az ikon ábrázol. Elterjedt, könnyen adaptálható.
Annyit tennék hozzá, hogy a honlapok akadálymentesebbé tételéhez fejlesztett WAI-ARIA eszköztárból az aria-label attribútum a linkekhez és a gombokhoz egyaránt használható. Ebben a megadott értéket a képernyőolvasó felolvassa a látássérültek számára. A keresők számára is egyértelművé teszi a link vagy a gomb célját.
A WordPress alapsablonokhoz nem ezt az ikonkészletet használják, de annyira egyszerű a használata, annyira akadálymentes, hogy a saját honlapjaimba ezt építem be.
Font Awesome akadálymentes használata
A FontAwesome GitHub oldalán saját magáról állítja, hogy akadálymentes. A párbeszédekből azonban kiderül, milyen akadálymentességi problémák merülhetnek fel a helytelen használatukból, és hogy mi a megoldásuk.
Mindig szöveggel használjuk.
Az ikont nem lehet önmagában használni, hanem szöveget kell megadni hozzá. Ennek sokféle módszere létezik. Az én általam használt egyik tesztelt módszer a következő: Ezen kívül azonban rendkívül sok módszer létezik. Előnye, hogy sohasem az Teszteltük azonban minden Magyarországon használatos képernyőolvasóval és böngészővel és ezen WAI-ARIA elem nélküli honlapjaimat, és egyik sem olvasta fel az ikont. A fórumon javasolják a szintén képernyőolvasókkal tesztelt Aki ért a web akadálymentesítéséhez tudja, hogy most nem a magas kontrasztú, gyengénlátó változatnak, vakbarát változatnak, akadálymentes változatnak is nevezett weboldalról beszélek. (Ennek az eredetéről épp most jelent meg egy cikk Szántai Károly szakértő weboldalán) A Windows-ban Több mint valószínű, hogy más ikonok is megfelelhetnek az akadálymentesség ISO/EC-40500:2012 (WEB akadálymentességi irányelvek, azaz WCAG 2.0) követelményeinek, de mivel én mindig ezt használom, ezt teszteltem, és ebben minden olyan ikon megtalálható, amelyre szükségem lehet, ezért nem foglalkoztam vele. Mint a sprite-master megoldásokkal is idejétmúltak, bár azok is alkalmazhatók akadálymentesen és alkalmazhatók rosszul is. Utánanéztem és teszteltem, és mégsem mondanám idejétmúltnak. Két okból:
elembe kell beletenni a szöveget, hanem egy másikba. Javasolják, hogy az elembe tegyük bele a
megoldást is. Én nem használtam még, mert az aria-label elemet a képernyőolvasók bizonyos, számomra még nem tisztázott körülmények között nem olvassák fel, és jobban szeretem a tiszta HTML megoldásokat.Windows magas kontrasztú változat
ALT+SHIFT+PrtScr billentyűkombinációval bekapcsolható a magas kontrasztú üzemmód. Ez ugyan csak az Internet Explorert (rövidítve: IE) böngésző tartalmát alakítja magas kontrasztúvá. A Font Awesome ikonkészlet pedig szépen megjelenik minden magas kontrasztú változaton is.Más ikon gyűjtemények
Kiegészítés a sprite-master-ről 2016.február 25:
