Tíz egyszerű tanács, hogy weboldalad akadálymentesebb lehessen

Pár hónapja aktívan foglalkozom weboldalak akadálymentesítésével. A tapasztalataim és ennek a cikknek elolvasása után összeszedtem az általam 10 legfontosabbnak tartott apróságot. Ha ezeket mind követed, a weboldalad (ha nem is teljes egészében), de közelít a képernyőolvasó kompatibilis formához.

A képernyőolvasó egy olyan szoftver, mely felolvassa a képernyőn megjelenő információkat. Ahhoz viszont hogy ezek az információk helyesek legyenek, jól meg kell neki „mondani” hogy milyen esetben mit mondjon el a felhasználónak.

1. Képek feliratozása

Írsz egy olyan blogot, mint én, csak mondjuk képeket is bele teszel, hogy demonstráld a mondandódat. Ha itt nem töltöd ki az alt attribútumot, a képernyőolvasóm a képfájl nevéből próbál valamit kitalálni (pl. img-1234.jpg). Ez roppant sokat mondó, kreatív elnevezés. Ha adsz neki egy rövid leírást, akkor tudni fogom hogy „Barátnőm a lovon” felirat azt takarja, hogy a képen egy ló van, és rajta a barátnőd.
Alább egy példa:
<img src="img-1234.jpg" alt="Barátnőm a lovon">
Ugyanez vonatkozik a linkekre is, tehát ha a link megnevezését egy képpel jeleníted meg, akkor ne felejtsd az alt tagot itt is kitölteni!

2. Az oldal alapértelmezett nyelvének megadása

A képernyőolvasó abból építkezik amije van. A weblapok esetén a html attribútumokból próbálja meg kitalálni, hogy mit hogyan olvasson fel.
A modernebbek már tudnak több nyelven is beszélni, így ha talál egy mondjuk angol nyelvűnek megjelölt szövegrészt, akkor angol kiejtéssel mondja el. Ha valaki tud egy kicsit angolul, akkor nem feltétlen a magyar kiejtéssel („This is a dog”) szeretne meghallgatni egy hosszabb szöveget.
Ez nagyon sokszor jól jön, kivéve ha a web-fejlesztő nem figyel oda, és valamilyen oknál fogva a weboldalának alapértelmezetten az angol nyelvet adja meg. Ilyenkor az a kellemetlen helyzet áll elő, hogy a vak felhasználó (amíg ezt ki nem kapcsolja) angol kiejtéssel hallja a magyar szöveget is. Ami néha persze vicces, bár mondjuk egy banki utalás lebonyolításakor szerintem senki nem élvezné.

A legjobb példa a fentiekre talán ez a többnyelvű szöveg, ahol látható a forráskódban hogy az oldal alapértelmezett nyelve a magyar, de van angol nyelvűnek megjelölt szövegrész is.

3. ARIA jelzőpontok (szakaszjelzők) használata

Az ARIA jelzőpontok segítségével megjelölhetjük oldalaink különböző részeit. Így pl. azt, hogy hol kezdődik a menü, hol található a főtartalom, stb. A képernyőolvasó programmal lépkedhet a felhasználó ezeken, így nagyon egyszerűen ráugorhat valamelyik pontra (ez nagyon hasznos, ha a menü és a keresősáv nem érdekli, csak a főtartalom).
Ha a html 5-öt használod, nem kell kicserélned a nav, main és footer elemeket erre, végeredményben ugyanazt eredményezik mit az aria nav, main és footer attribútumai.
Egy ARIA jelzőpontot a role tag definiálásával lehet megadni, pl. így:

(ha kifejezetten az oldalon lehet keresni)

(ha az űrlap nem keresés, hanem bármi egyéb)

4. Űrlapmezők címkézése

Az NVDA képernyőolvasó használata esetén ha a tab billentyűvel lépkedek az űrlap mezőkön (amikhez nincs html címkével hozzárendelve annak megnevezése), akkor csak a mezőtípusát mondja be (szerkesztő mező, stb). Ez roppant idegesítő, viszont a megoldás nagyon egyszerű.
A html-nek létezik egy label tag-e, amivel ez megadható, többféle módon is:
<label>Név: <input type="text" name="nev"></label><br> <label for="nev">Név:</label><input id="nev" type="text" name="nev">
Az első talán a legegyszerűbb, ezt nem is magyarázom. Viszont előállhat olyan helyzet, amikor ez nem jó. Pl. képzeljünk el egy táblázatot. Az egyik oszlopban a mező megnevezések, a másikban pedig maguk a mezők találhatóak. Ekkor (a helyes működéshez) a második példát érdemes használnod.

5. Kötelezően kitöltendő űrlapmezők megjelölése

Ha az ürlapodon van néhány olyan mező amit kötelezően ki szeretnél töltetni a felhasználóval, ezeket jelöld meg az ARIA-required használatával. Ekkor a képernyőolvasó erre külön figyelmezteti a felhasználót.
<input type="text" name="username" aria-required="true">

6. Táblázat fejlécek használata

Ha a weboldaladon fejléccel rendelkező táblázat található, jelöld meg az első sort a

használatával. Ekkor ha mondjuk a 3. sor 4 oszlopára lépek a képernyőolvasó beépített táblázat navigációs billentyűparancsával, bemondathatom a 4. oszlop fejlécét egy pillanat alatt, így nem veszek el olyan könnyen az oszlopok rengetegében.

A scope attribútummal az is megadható, hogy az adott fejléc az oszlop, vagy sorfejléc-e.

7. Táblázat feliratok használata

Ha van egy táblázatod, készíthetsz hozzá feliratot (pl. féléves tárgyaim). Ezt a táblázat elé is beteheted, de szebb ha megjelölöd hogy ez a táblázat felirata:

….

8. Legyenek egyértelműek az oldalad fejlécében elhelyezett információk

Amikor egy oldal betöltődik, a képernyőolvasó első körben a title rész közötti információt mondja el. Ugyanez történik ha a már megnyitott oldal a fókuszba kerül (pl. egy másik ablakról váltunk rá az alt+tab használatával). Mind SEO (keresőoptimalizálás), mind a vak felhasználók szempontjából az a jó, ha beszédesek az oldalak címei.
Ami rossz: „Olcsó, masszázs, Érd, Budapest, …” Tehát ha az oldalad kulcsszavait jeleníted itt meg. Ezt a Google is kiszűri (vagyis nem kerülsz előrébb a találati listán), és zavaró is.
Az se jó, ha nincs az oldal címe kitöltve, ebben az esetben a képernyőolvasó az oldal pontos webcímét mondja el (pl. http://enoldalam.hu/index.php?id=45&xid=21).

9. Tabindex használatának kerülése

Eddig a személyes tapasztalatok alapján írtam le ötleteimet, ez az amit a bejegyzés elején már belinkelt listából szedtem. Itt ugyanis azt írják, hogy a tabindex többet árt mint használ, vagyis ha a tabindex száma 1 vagy annál nagyobb, és nem tudod miért szerepel ez a kódban, inkább ne használd.
A tabindex használatával szabályozható, hogy a tab megnyomása esetén milyen elemre kerüljön rá a fókusz. Van hogy hasznos, de érdemes inkább az oldal struktúráját úgy felépíteni, hogy erre ne legyen szükség.

10. Akadálymentesítési validátor

A wave egy könnyen használható akadálymentesítési validátor. Vagyis, megpróbálja megállapítani, hogy egy weboldalon milyen akadálymentesítési hibák találhatóak. Azért (ahogy a készítői is írják), ez csak egy hasznos alkalmazás, ha valaki akadálymentes weblapot szeretne készíteni, mindenképpen teszteltesse le valakii hozzáértővel.
Itt mondjuk a látássérült webfejlesztők (bármilyen meglepő, azért vannak ilyenek is) elég nagy hátrányból indulnak, ugyanis a webalkalmazás különböző szinekkel jelzi a fellépő hibákat.

10+1. Vizuális captcha elkerülése

Ez nem feltétlen tartozik az „egyszerű tippek” listájába, de azért érdemes vele foglalkozni. Ha egy űrlapon tiltani szeretnéd a spam kitöltéseket, valószínűleg elhelyezel egy képet amiről be kell írni a rajta látható karaktereket. Lehet hogy meglepő, de ez vakon (még a hiper-szuper képernyőolvasóval) sem megoldható. Így ennek elkerülésére a szöveges ellenőrzést ajánlom (pl: „Írja be számokkal az eredményt: öt plusz kettő”). ha szeretnél még egy kicsit nehezíteni a dolgon, a karakterek közé betehetsz random szóközöket (hogy ne lehessen olyan egyszerűen megfejteni), pl így: „ö t p lu sz k e tt ő”). Természetesen az fontos hogy ne beégetett adatokkal dolgozz (vagyis a művelet valamilyen algoritmus alapján generálódjon le), bár azért egy egyszerűbb robot a beégetett adatokkal sem igazán boldogul.

Összegezve

A fenti tippek alkalmazása nem vonja magával azt, hogy az oldal teljes mértékben akadálymentes. Pl. nem beszéltünk a gyengénlátókat vagy a siketeket érintő akadálymentesítési megoldásokról, ez lehet egy másik cikk témája is akár. Viszont ha csak ezekre figyelsz, biztos lehetsz abban, hogy megkönnyíted a látássérültek életét miközben oldaladat böngészik.
Törekedj arra hogy az oldalad legyen akadálymentes, ne egy „lebutított” oldalt készíts a vak felhasználóknak. Ne te mondd ki a végső szót a használhatóságról, hanem keress egy olyan felhasználót aki ebben meg tud erősíteni.