Akadálymentes weboldalak

Szerző: Mérei Tamás   |   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
  • 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....

  • A villanyszerelés örömei panelben

    Panelban ugyan az a három fázis jön be három MCU-n és nem 3fázis... Keresztmetszet növelés miatt csinálták anno......

  • A shape-outside CSS property

    Szia Jó lett a videó. De mi van akkor ha a képet a szöveg közepére szeretném tenni, és azt akarom hogy így fusson körbe a szöveg....

  • Bootstrap űrlapok

    Jó lett :) Már kezdtem aggódni hogy eltűntél vagy valami hogy ilyen sokáig nem volt videó. 2 naponta néztem az oldaladat hogy hátha.... :)...

  • A villanyszerelés örömei panelben

    Ha három fázisod van, akkor három fázisú Fi relét kell venni....

  • A villanyszerelés örömei panelben

    Szia, ha panellakásba három vezetéken jön be az egy fázis, akkor három fi relét kellene berakni?...

  • A villanyszerelés örömei panelben

    "3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezetéken jön az N és...

  • Dia szkennelés házilag

    Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....

  • Bootstrap carousel

    Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...

  • Adobe XD VS. Lunacy

    Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....