Akadálymentes weboldalak

2020.01.13.

Az akadálymentes weboldalak célközönsége

Kik az akadálymentes weboldalak elsődleges felhasználói?

Pár évvel ezelőtt jártam a Láthatatlan kiállításon, ahol egy vak srác bemutatta, hogyan használja a számítógépet. Leesett az állam amikor megláttam milyen sebességgel navigál a menüpontok között. Szövegfelolvasó programot használt, a felolvasás sebessége tízszeresére volt állítva a normál beszédhez képest. Én egy szót sem értettem belőle, neki viszont a másodperc töredéke elég volt ahhoz, hogy felfogja az adott elem jelentését ahol épp áll a kurzor.

Megkértem, hogy nézzen meg pár weboldalt amit mondok. Volt amit akkor nyitott meg életében először és tökéletesen tudta használni, de szép számmal akadt olyan is ahol a navigációig sem jutott el, mert az oldal rosszul volt felépítve.

Nekem ez a 20 perc sokkal többet ért, mint az a sok óra amit mostanában a WCAG ajánlásainak böngészésével töltök. Egyértelművé tette számomra, hogy a fogyatékkal élők is használnak számítógépet, ugyanúgy interneteznek, és ugyanúgy szeretnének hozzáférni a tartalomhoz, mint látó embertársaik, de erre csak akkor van lehetőségük, ha ezt megteremtjük nekik.

A slusszpoén egyébként az volt amikor a srác a végén futólag megjegyezte, hogy amúgy programozóként dolgozik.

Tévhitek

Sárga, pöttyös ikon

Az akadálymentes weboldalak lényege, hogy látássérült és hallássérült emberek számára is át tudjuk adni a weboldal tartalmát. A legrosszabb bevett gyakorlat, hogy kitesszük a mindenki által rosszul értelmezett „akadálymentesített verzió” ikont (), és erre kattintva betöltjük az oldal magas kontrasztú nézetét.

A magas kontrasztú nézet valóban hasznos lehet egy rosszul látó embernek, de ő nem fog rákattintani, mert eleve úgy állítja be a böngészőjét és az operációs rendszerét, hogy magas kontraszttal jelenjenek meg a betűk. Ehhez létezik bővítmény a Chrome Store-ban is, ami sokkal jobban kezeli ezt a problémát, mintha mi magunk írnánk rá megoldást, ezért felesleges ezzel időt tölteni.

Szintén nem szükséges a betűméret növelésére külön funkciót készíteni, mert ezt ma már az összes böngésző tudja alapból.

Kell e külön akadálymentesített verziót készíteni?

A jó hír az, hogy a legtöbb weboldal alapból akadálymentes, egészen addig, amíg el nem kezdünk akadályokat gördíteni a felhasználó útjába. A modern webes technológiákkal látványos megoldásokat tudunk implementálni ami növeli a felhasználói élményt jól látó emberek számára, viszont egy vak felhasználót könnyen összezavarhat. Ilyenek például a különböző slider-ek, accordion-ok, többszintű menürendszerek, stb. Ha ilyenek vannak a weboldalunkon, akkor biztosítani kell, hogy ezek billentyűzettel is használhatóak legyenek. Ehhez találunk működő példákat a W3C oldalán, de az is jó megoldás, ha rábízzuk magunkat valamelyik keretrendszerre ami már eleve a WCAG ajánlások alapján készült. A Bootstrap például megfelel ennek.

Összegezve tehát, ha betartjuk a WCAG ajánlásait akkor nincs szükség külön akadálymentesített változatra.

Tanácsok akadálymentes weboldalak fejlesztéséhez

Nem akarom a hivatalos ajánlásokat idemásolni, ezt mindenki megtalálja itt. Helyette inkább pár hasznos tanácsot szeretnék adni amivel már a fejlesztés során csökkenthetjük az utólagos teendőket az akadálymentesítéssel kapcsolatban:

Folyamatosan ellenőrizd képernyő felolvasó szoftverrel is a weboldalt! Ez különösen vonatkozik a nem szöveges tartalmakra, mert ezzel ki tudod próbálni, hogy hangzik a képek helyett felolvasott ALT szöveg. Az NVDA nevű felolvasó program nyílt forrású és ingyenesen használható.
Tedd félre az egeret és próbáld meg csak billentyűzettel használni az oldalt! A teljes menürendszer bejárható TAB-bal és a nyíl billentyűkkel?
A képek ALT attribútuma legyen kitöltve, de, ha egy kép kizárólag dizájn célokat szolgál, akkor hagyd üresen (alt=””). Mindig legyen ALT, mert a HTML5 szabványa szerint kötelező kiírni, akkor is, ha üres.
Törekedj a beszédes markup-ra! Használd a HTML5 szemantikus elemeit, pontosan erre lettek kitalálva: <header>, <footer>, <figure>, <figcaption>, <nav>, <time>, stb. Ezek a tag-ek már önmagukban is beszédesek.
Ha olyan elemet hozol létre amin nem a funkciója felirata szerepel, adj mellé szöveges leírást is a felolvasó szoftvereknek! Erre használható az aria-label attribútum. Nézzünk egy konkrét példát: <button>X</button> – itt azt fogja felolvasni a program, hogy „iksz”, vagy „tíz” (beállítástól függ). <button aria-label=”bezárás”>X</button> – itt azt fogja felolvasni a program, hogy „bezárás”.
A navigáció felépítése legyen hierarchikus és billentyűzettel is könnyen használható. Ha lehet, akkor kerüld el a tabindex használatát!