3 végtelenül egyszerű módja annak, hogyan teszteld a honlapod akadálymentességét

Akadálymentes webdesign oldal magas kontrasztú változata

Nekünk akadálymentesítési szakembereknek nagyjából benne van a WCAG 2.0 és a hozzá kapcsoló irodalom a fejünkben. Ez több mint 800 oldal. A gyakorlatban a legtöbb akadályt azonban végtelenül egyszerű felismerni. Vizsgáld meg a weboldaladat az alábbi 6 sajátos módon, és azonnal rájösz, hogy mit lehetne még akadálymentesíteni rajta.

1. Kapcsold ki az egeret vagy a touchpadot

(A touchpad a szómagyarító szerint tapipad, érintőfelület, similap vagy tapizda lehetne a magyar megfelelője. A lapgépek egerének a helyettesítőjéről van szó.).

A TAB és SHIFT+TAB billentyűkkel végig kellene tudnod járni az összes linket az oldalon, és ENTER-t nyomva el kellene jutnod a linkelt oldalra. A WCAG 2.0 “AA” szinten elvárás, hogy lásd is,  hol tart éppen a fókusz. Az sem árt, ha könnyen követhető honnan hová érkezik a fókusz. Erre szolgál több program is. A saját sablonomban a focus snail-t használom.

Miért fontos a billentyűzet-vezérlés?

Nagyon sok ember csak egér nélkül használja a számítógépet. Nemcsak a vakok és gyengénlátók, de azok is, akik valamilyen oknál fogva nem tudják a kezüket jól használni. Jó magam is szeretek a billentyűzeten dolgozni, és örülök, ha minél kevesebbet kell az egeret használnom.

2. Kapcsold be a magas kontrasztú üzemmódot!

A Windows-nak is van (ALT+SHIFT+PrtScr), a böngészőknek pedig találhatsz magas kontrasztot beállító kiterjesztést.  A Chrome esetében így kell telepíteni: beállítások->speciális beállítások->kisegítő lehetőségekben azonnal behozza a High contrast bővítményt. Kattintással telepítjük, majd SHIFT+F11-el be és ki lehet kapcsolni.

A többi böngészőhöz valószínű találhattok hasonló bővítményt, de tesztelni elég ezen is. (Ezen bővítmények teljesen értelmetlenné teszik, hogy olyan magas kontrasztú felületet hozzunk létre, amint ezt rengeteg magyar honlapon látunk akadálymentes felület, vakbarát verzió stb. néven.)

Miért fontos a magas kontrasztú felület? A látássérültek harmada használja a magas kontrasztú felületet

3. Kapcsoljuk ki a képeket!

Ha a Chrome-ot vettem eddig alapul, akkor most is ezt mutatom be: beállítások->speciális beállítások->tartalombeállítások. Mondjuk, hogy ne mutassa a képeket. Ha a weboldaladat megnézed, akkor két dolgot ellenőrizz:

  1. Minden funkcionalitás elérhető maradt? Sokszor képekre kattintva érhető el egy másik oldal. Ez rendben is van, ha nem a képen van a link maga. Elképesztő sok esetben például a Facebook képre kattintva a Facebook oldalra jutunk. Ha azonban kikapcsoljuk a képek megjelenítését, láthatjuk, hogy semmilyen szöveges tartalom nem jelzi ezt. Ez nagyon sok embernek problémát okoz. Képernyőolvasót használók nem látják a képet, a tanulási részképesség-zavarral küszködők pedig nem biztos, hogy összekapcsolják a képet a vezérlőelemmel.
  2. Érthető az oldal tartalma? Hogyha a képek olyan információt hordoznak, amelyek szükségesek a tartalom megértéséhez, a helyettesítő szövegekben kell megmagyarázni. Például: egy utazási iroda hirdeti a szállodát. A látók rengeteg információt kapnak a képről, a képernyőolvasót használók azonban csak akkor, ha a helyettesítő szövegben bemutatják a kép tartalmát.

A folytatásban újabb 3 egyszerű tesztet mutatok be. Jelen cikkemet Karl Groves: The 6 Simplest web accessibility test anyone can do bejegyzése inspirálta.