“A web ereje az univerzalitásában rejlik.”
Tim Berners-Lee, a Világháló (World Wide Web), pontosabban a HTML nyelv, a HTTP protokoll és más technológiák kifejlesztője.
A világhálót alapvetően úgy tervezték, hogy hardvertől, szoftvertől, nyelvtől, tartózkodási helytől és képességtől függetlenül minden ember számára elérhető legyen. A web akkor érné el ezt a célját, ha nem számítana, valaki milyen hallási, mozgási, látási vagy kognitív képességekkel rendelkezik, minden weboldal hozzáférhető lenne számára.
Az akadálymentes weboldalkészítés ezért alapvető mindazon fejlesztők és szervezetek számára, amelyek magas minőségű honlapokat és webes eszköztárat készítenének, és senkit nem szeretnének elzárni a termékük vagy szolgáltatásuk használatától.
Hogy segítsünk ebben, bemutatjuk a 12 legfontosabb szempontot, melyeket figyelembe véve akadálymentessé teheted a weboldaladat minden hallás-, vagy látáskárosultsággal, fizikai, kognitív vagy neurológiai rendellenességgel élő ember számára.
1. Szöveges alternatívák
Mit jelent ez?
Minden nem-szöveges tartalomhoz (pl. képekhez, táblázatokhoz, diagramokhoz) készíts szöveges alternatívát. Előfordulhat olyan, hogy bizonyos tartalom esetén ez nem megoldható (pl. CAPTCHA, vagy nem szöveges kitöltendő teszt), ilyenkor mindenképpen írj olyan szöveget, amellyel legalább azonosítható a nem-szöveges tartalom, illetve írd le a nem-szöveges tartalom célját is. Próbálj meg különféle típusú érzékszervi észleléshez, fogyatékosságokhoz alkalmazkodó alternatívákat elkészíteni (szintén példa a CAPTCHA különböző alternatívái). Fontos viszont, hogy a csak dekoráció céljából szereplő tartalmak, formázások figyelmen kívül hagyhatóak legyenek a kisegítő programok (pl. képernyőolvasók) számára.
Miért fontos?
Ha az irányelv nem teljesül, azok a felhasználók, akik nem látnak elég jól, hogy elolvassák a szövegeket, diagramokat, nem lesznek képesek begyűjteni a bennük szereplő információt.
2. Befogadható hanganyagok és videók
Mit jelent ez?
Bár kapcsolódik az előző ponthoz, fontos kiemelni: az akadálymentes weboldalhoz szükséges, hogy az audio-vizuális tartalmakhoz mindig tartozzon felirat, átirat.
Miért fontos?
Ha nem teljesül ez az irányelv, a látás-, vagy hallássérült emberek nem lesznek képesek a hang- és/vagy videoanyagok információtartalmának befogadására. Azok a figyelmeztetések, melyek hang- vagy vizuális hatáson alapulnak, nem fognak eljutni az ilyen felhasználókhoz, akik így nem értesülnek egy adott esemény bekövetkeztéről.
3. Adaptálható struktúra, elrendezés és megjelenés
Mit jelent ez?
Olyan tartalmat kell előállítani, amely információ-vesztés nélkül adaptálható és elérhető a akadályoztatott embereket kisegítő technológiák, alkalmazások (ún. asszisztív technológiák, mozaikszóval AT-k, ide tartozik pl. egy képernyőolvasó) számára. A felhasználók hozzáférhetnek az operációs rendszer akadálymentesítési eszközeihez anélkül, hogy hatással lennének a webes alkalmazások funkcionalitására, és az oldalcímek, címkék, űrlapok és táblák egyértelműen kommunikáltak az AT-n keresztül. Azaz figyelned kell arra, hogy a megjelenítésen, sorrendiségen, szerkezeten keresztül közölt információ algoritmikusan meghatározható, vagy szöveges formátumban elérhető legyen. Ez általában egyszerű, letisztult elrendezést igényel. Nem szabad, hogy a tartalom csak forma, méret, vizuális elhelyezkedés, irány vagy hang alapján legyen értelmezhető, kezelhető.
Miért fontos ez?
Ha az irányelv nem teljesül, a struktúra és az információ felismerhetetlen lesz az AT-k számára, így nem lehet azt más formátumban megjeleníteni a felhasználó igényeinek (érzékelési képességeinek) megfelelően.
4. Megkülönböztethető információ
Mit jelent ez?
Legyen a tartalom érzékelése a felhasználó számára könnyű, megkülönböztethetőek legyenek egymástól a tartalmak. Ez a gyakorlatban azt jelenti, hogy használj kellően kontrasztos színeket, legyenek az automatikus hanghatások megállíthatóak, hangerejük rendszertől függetlenül szabályozható. Legyen a szöveg átméretezhető AT nélkül, és anélkül, hogy vízszintesen emiatt görgetni kelljen egy sor elolvasásához. Használj elegendően nagy sor- és betűközt. A háttér és előtér legyen megkülönböztethető, használj ehhez megfelelő színeket (vagy legyenek a színek megválaszthatóak). Ne a szín vagy hanganyag legyen az egyetlen információhordozó pl. egy tevékenység jelzésekor, válaszadásra ösztönzéskor, vagy vizuális elemek megkülönböztetésekor.
Miért fontos ez?
Ha nem teljesül, akkor a színtévesztéssel vagy egyéb színérzékelési zavarral élő felhasználó számára a színeltérés által hordozott információ nem hozzáférhető. Az audio képernyőolvasók számára pedig nehézséget okozhat a beszédkimenet felismerése és dekódolása, ha túl nagy a háttérzaj.
5. Billentyűzettel/alternatív metódussal való működtetés
Mit jelent ez?
Egy akadálymentes weboldalon minden tartalomnak elérhetőnek kell lennie mutatóeszköz (pl. egér) használata nélkül, csupán billentyűzettel (kivétel az útvonalfüggő bevitel, pl. ha egy helikopterrel kell akadályokat kerülgetni). Legyenek gyorsbillentyűk, amelyekkel könnyebb a navigáció az oldalon. Mindig látszódjon a szövegkurzor és a billentyűzet fókusza (ez mutatja, hol tartunk a TAB billentyűvel vagy a nyilakkal történő navigáció közben).
Miért fontos ez?
Ha nem teljesül ez az elv, egyes felhasználók nem fogják tudni használni a weboldal, alkalmazás bizonyos funkcióit. Számos mozgásszervi rendellenességgel vagy kézremegéssel élő ember nem tudja kellő pontossággal kezelni a mutatóeszközöket ahhoz, hogy kis célpontokat könnyen kattintsanak le. Néhányan pedig különböző sérülésből adódóan csak kétállású kapcsolóval tudnak számítógépet kezelni.
6. Elegendő idő
Mit jelent ez?
Biztosíts elegendő időt a felhasználóknak a tartalom elolvasására és használatára! Legyen az időzítés, időkorlát kikapcsolható, kiterjeszthető (értesítést kap, hogy az időkorlátot meg kell hosszabbítani), vagy beállítható hosszabbra (kivételes eset előfordulhat, amikor nincs alternatíva a megadott időkorlátra, pl. egy aukció esetén. A mozgó, villogó, gördülő tartalmak szüneteltethetők, megállíthatók vagy elrejthetők legyenek. Automatikusan frissülő tartalomnál legyen állítható a frissítés gyakorisága (vagy legyen kikapcsolható). Ha újraazonosítás szükséges, akkor lehessen folytatni a félbehagyott munkamenetet adatvesztés nélkül.
Miért fontos ez?
Ha nincs betartva ez az elv, akkor a vak, gyengénlátó, fizikai vagy kognitív korlátozottsággal (pl. szorongással) élők, akiknek több időre van szükségük hogy elolvassák a tartalmat, vagy kitöltsenek egy kérdőívet, nem lesznek képesek megtenni.
7. Villongás-mentesség
Mit jelent ez?
Meg kell előzni, hogy epilepsziás rohamot váltson ki a weboldal. Ezért ne tervezz olyan tartalmat, amiről ismert, hogy okozhat rohamot, ne legyenek villogó, egy másodpercen belül többször felvillanó, vagy rendszeresen villódzó tartalmak.
Miért fontos ez?
A mozgó, folyton változó tartalmak egyeseknek teljesen lehetetlenné teszik a fontos információk kiszűrését. Az arra érzékenyeknél pedig a villódzó, felvillanó, ki-be kapcsolódó tartalmak rohamokat válthatnak ki.
8. Navigálhatóság
Mit jelent ez?
Segíts az akadályozott embereknek is abban, hogy könnyen megtalálják és pozicionálják a tartalmakat. A design és a navigáció legyen letisztult és következetes. Minden oldalnak legyen egyértelmű címe, mely leírja az adott weblap témáját. Legyen egy mechanizmus, amellyel az ismétlődő tartalmi blokkok (hirdetési blokk, oldalsáv, keresési lehetőség, fejléc, stb.) elkerülhetők (ezzel megspórolsz rengeteg TAB leütést, vagy a szövegolvasónak sok száz szó újbóli felolvasását minden oldalon). A szekvenciális navigálhatóság esetén olyan sorrendben kerüljenek fókuszba az elemek, hogy megőrizzék az eredeti sorrendből fakadó jelentést (pl. ha egy űrlapot kell kitölteni, ne ugráljon véletlenszerűen a kitöltendő mezők és checkboxok között, hanem a szemmel is látható sorrendet adja a TAB nyomogatása). Minden egyes link, hivatkozás szövege (vagy szövegkörnyezete) egyértelműen utaljon a link céljára. Egy adott oldalt több módon is el lehessen érni. Legyen egyértelmű, hogy a weboldalak halmazán belül éppen hol tartózkodik a felhasználó. A gombok, űrlap mezők, érinthető felületek és linkek legyenek elég nagyok, hogy ne lehessen akadályozottságból fakadóan véletlenül a szomszédos vezérlőket választani.
Miért fontos ez?
A csökkent motorikus képességekkel rendelkező felhasználók számára sokkal nehezebb az oldal kezelése, ha csak kis gombok, linkek vannak, amelyeket nehéz eltalálniuk. Egyes kognitív zavarral élőket a nehézkes, inkonzisztens navigáció összezavarhatja, mert folyton újra meg kell tanulniuk, jegyezniük az új oldalak kezelésének módját. Az AT-ket használó látogatóknak a nem egyértelmű, vagy állandóan ismétlődő tartalmak okozhatnak gondot.
9. Olvashatóság
Mit jelent ez?
Legyen érthető és elolvasható a szöveges tartalom. Legyen algoritmikusan meghatározható az oldal nyelve. Az utasításokhoz, kimenetekhez, információkhoz a lehető legegyszerűbben érthető nyelvezetet használd. Használj talp nélküli, letisztult betűtípust, egyszerű háttérrel.
Miért fontos ez?
Az olvasási zavarral (diszlexia), vagy látáskárosultsággal élő emberek nem lesznek képesek minden információ befogadására, ha ez nem teljesül. A diszlexiások bonyolult szövegezés esetén képtelenek lesznek megérteni az olvasottakat.
10. Kiszámíthatóság
Mit jelent ez?
Az akadálymentes honlap működése és a tartalmak megjelenése legyen kiszámítható. Ha valami fókuszba kerül, ne történjen változás a kontextusban (pl. nem jó az olya legördülő menü, melynek egyik elemére rakva a fókuszt, azonnal megváltozik az oldal; vagy hibás az olyan űrlap, ahol az egyik mezőbe lépve felugrik egy súgó párbeszédablak, és ezzel elmozdul a fókusz a vezérlésről, amikor a mezőn TAB-bal áthaladna a felhasználó). A felhasználó tudta vagy kezdeményezése nélkül ne induljanak be médiatartalmak, plug-inek, egyéb programok, ne változzon a fókusz, ne változzon meg az oldal tartalma, ne kerüljön át új lapra vagy oldalra
Miért fontos ez?
Sok felhasználónak jelent gondot a weboldalak áttekintése. A képernyőolvasó pl. egy dimenziós hangot közvetít, nehéz ilyenkor a térbeli hatásokat érzékelni. Aki képernyőnagyítót használ, csak egy részletét látja egyszerre a honlapoknak. A billentyűzettel lépkedőknek nehézkesebb a navigáció. Számukra a váratlan kontextusváltások lehetetlenné tehetik, hogy bármely elemről a képernyőn eldöntsék, hogy mi az, mire való, milyen állapotban van, vagy hogyan kell kezelni.
11. Beviteltámogatás
Mit jelent ez?
Mindig segítsd a felhasználót, hogy input esetén elkerüljék vagy könnyen javítsák a hibákat. Bevitelkor mindig egyértelmű címkéket és utasításokat használj, ha pontos formátumú bevitelre van szükség. Ha automatikusan észrevehető a hiba, figyelmeztesd a felhasználót, ajánlj fel javítási lehetőséget (autokorrekt). Ha jogi vagy pénzügyi természetű az adatbevitel, ha lehetséges, adj esélyt a bevitt adatok ellenőrzésére, a megbízás visszafordítására, a tranzakció megerősítésére. Még jobb, ha ezt nem csak ilyen fontos űrlapoknál engeded meg, hanem akár egy regisztrációnál is felajánlod a lehetőséget.
Miért fontos ez?
Bizonyos fogyatékossággyal élőknek sokkal nehezebb hibamentes inputokat bevinni és a hibáikat felismerni.
12. Robosztusság
Mit jelent ez?
A tartalomnak elég robusztusnak kell lennie ahhoz, hogy értelmezhető legyen a különböző technológiákkal. Vagyis kompatibilisnek kell lennie a jelenlegi és jövőbeli programokkal, különös tekintettel az AT-kre. Szintatkitkai szempontból figyelj arra, hogy a jelölőnyelveket használó tartalomban az elemek teljes kezdő és befejező címkékkel rendelkezzenek, a specifikációjuknak megfelelően kerüljenek beágyazásra, ismétlődő attribútumokat ne tartalmazzanak, és az azonosítók legyenek egyediek (kivéve abban az esetben, ha a specifikációk lehetővé teszik ezeknek a tulajdonságoknak a használatát). Az összes felhasználói elemnek legyen a neve és a szerepe algoritmikusan meghatározható, a felhasználó által beállítható állapotok, tulajdonságok és értékek program által is változtathatóak.
Miért fontos ez?
Ha az irányelv nem teljesül, akkor a honlap az AT-t használó látogatók számára nem fog kiszámíthatóan viselkedni. Fontos, hogy a tartalom kövesse a konvenciókat, és kompatibilis legyen az API-kkal, így az AT-k továbbra is jól működhetnek, ahogy a technológiák fejlődnek.
Ez a 12 irányelv az, amelynek részletesen meg kell felelnie egy honlapnak, hogy akadálymentes jelzőt kapjon. További példákat, technikai részleteket és az akadálymentességi szintekről többet megtudhatsz (sokkal szárazabb formában és angolul) itt!
Úgy érzed, hogy szakmai tudásoddal Te is elősegíthetnéd a látássérültek mindennapjait, akár csak egy probléma megoldásával is támogatnád az akadálymentes weboldalak készítését? Akkor ismerd meg az IT Összefogást, ahova céges csapatok jelentkezését várjuk!
Akadálymentes honlapot szeretnél magadnak, de úgy érzed, hogy a fenti irányelvek betartásával egyedül nem boldogulsz? Keresd fel bátran akadálymentesítési szakértőnket:
Szántai Károly
Certified Web Accessibility Specialist (WAS)
www.akadalymentesweb.hu
Források:
http://w3c.hu/forditasok/WCAG20/
https://www.barclayscorporate.com/content/dam/corppublic/corporate/Documents/Accessibility/Guiding-Principles.pdf
