Mérei Tamás webdesigner

Helló!Mérei Tamás vagyok, webdesigner

20 éve foglalkozom weboldalak, felhasználói felületek tervezésével, kódolásával és WordPress sablonok készítésével. Dolgozom magánszemélyeknek, fejlesztő cégeknek, multiknak, állami szervezeteknek és reklámügynökségeknek is.

Akadálymentes weboldalak

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!

Videó

Akadálymentes weboldalak