Akadálymentes weboldalak

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 ő 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
  • A villanyszerelés örömei panelben

    Gratulálok! Szép leírás! Azt szeretném kérdezni, hogy nálam 3×32 amper lessz, bővítés után. Laikusként kérdem, így három Fi-relé kell? És mekkorát, é...

  • A villanyszerelés örömei panelben

    @Utolsó hozzászóló: Szia, olyan nincs, hogy 3 fázis érkezik be 3 külön vezetéken. Vagy 1 fázis 1, vagy 3 fázis 3 vezetéken. (+ a nulla) Ha az óráná...

  • A Pico CMS

    pico-release-v2.1.0, nincs benne content-samle, a content üres, nincs benne php nincs sub mappa és fájl sem, mégis ott van a subindex a menunuben...

  • CSS transition

    Köszönöm a válaszod! Igen ezzel már, próbálkoztam, de amint sikrül térben elhelyezni a megfelelő helyre a köröket, megszűnik működni rajtuk az effek...

  • CSS transition

    z-index-et állíts be a menüre, és arra is ami most fölé kerül. Értelemszerűen a menün legyen a magasabb érték....

  • CSS transition

    Kedves Tamás! Remélem még aktív a blog és tudsz nekem segíteni. Nagyon tetszett a videód, ki is próbáltam. A videód alapján beépitettem ezeket az ...

  • A villanyszerelés örömei panelben

    Egy fázis jön be három vezetéken keresztül. Az óránál egy darab megszakító van csak. Ezért kérdeztem, hogy milyen fi relét javasoltok?...

  • A villanyszerelés örömei panelben

    Ez nem igaz, mert az óránál ott a 3 biztosító darabja 20 A...

  • A shape-outside CSS property

    Olyasmit találtam hogy a szöveg részt 2 részre osztjuk bal és jobb......

  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....