Akadálymentes weboldalak

Szerző:   |   2019-02-14

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ítés 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 ő soha 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 a fejlesztéshez

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!

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Az Axure használata

    A munkáltató biztosítja számodra a munkavégzéshez szükséges hardvereket és szoftvereket. Ha nem így van, akkor annál a cégnél nem szabad dolgozni....

  • Az Axure használata

    Köszi a választ! Annyit szeretnék még kérdezni, hogy ha olyan a munkahely hogy adobe szoftverekkel kell dolgozni mondjuk a saját gépemröl, akkor nekem...

  • Az Axure használata

    Próbafeladatot szoktak adni amit meg kell oldanod. Jobb esetben otthon, de nem egy olyan interjún voltam már, ahol leültettek egy géphez aztán ott hel...

  • Az Axure használata

    Hali. Azt szeretném kérdezni, hogy te mit tanácsolsz egy pályakezdö webdesignernek, ha el akar helyezkedni? Még nem dolgoztam korábban sosem webdesign...

  • A Bootstrap 4 grid használata

    Azt használsz ami tetszik. A CSS reset cuccok többsége lassan 10 éves, ma már nem nagyon van rájuk szükség. Bootstrap akkor kell, ha az adott projekth...

  • A Bootstrap 4 grid használata

    Szia! Nem rég kezdtem tanulni, kis segítséggel õssze tudok rakni egy oldalt Html+css a többivel még most ismerkednek. Nem nagyon vagyok vele tisztába ...

  • A villanyszerelés örömei panelben

    Nem, én B-t raktam mindenhova és most már ötödik éve nincs vele gondom....

  • A villanyszerelés örömei panelben

    Szia Jövő héten kezdek bele, egy ugyan ilyen projectbe. Még mindig tartod azt az állítást, hogy jó a C karakterisztikájú kismegszakító? És mé...

  • ActionScript 3 eseménykezelés

    Sima CSS animációt....

  • ActionScript 3 eseménykezelés

    Helló! Kiváló a "Banner mutációk" -ról szóló videód. A legnagyobb erénye számomra, hogy a hatékony munkavégzést is bemutattad. Amiért a flash témakor...

  • Egyszerű tükröződés készítése Photoshopban

    Koszi:)...

  • Bootstrap carousel

    Nem találkoztam még ilyennel, ezt a két linket találtam hozzá: https://stackoverflow.com/questions/16244306/single-picture-displaying-upside-down-in-b...