Az akadálymentes webdizájn követelményei
Bizonyos web-akadálymentességi előírásoknak való megfelelésről a webdizájnereknek kell gondoskodniuk – vagy olyan dizájnsablont kell választani, amely eleget tesz az akadálymentesség követelményeinek.
A törvényileg kötelezően akadálymentes weboldalaknak a WCAG szabvány A és AA szintjén kell megfelelniük minden követelménynek.
Az alábbiakban a webdizájnra vonatkozó, A és AA szintű követelményeket vesszük sorra, hivatkozva a WCAG 2.1 szabvány megfelelő pontjára.
A dizájn mellett a webfejlesztés és a tartalomfeltöltés módjára vonatkozó követelményeknek is eleget kell tenniük az akadálymentes weboldalaknak!
Színek
Az akadálymentes weboldalakon nincs olyan, hogy csak színekkel közvetítünk valamilyen információt, vagy csak különböző színek jelzik egyes elemek között a különbséget (1.4.1 Use of Color).
Egy űrlapon például nem elég csupán piros színnel jelölni a kötelező mezőket vagy épp a hibákat. Ehelyett az űrlap tetején kiírhatjuk, hogy a kötelező mezők pirosak, és ikon jelöli őket, vagy a mezőcímkékbe a tervezés során beleszámíthatjuk, hogy ki lesz írva betűkkel, hogy „kötelező”. A hibaüzenetek vizuális megjelenítését a tervezett akadálymentes működési szisztémának megfelelően szintén meg lehet tervezni.
A linkeket sem elég csupán eltérő színnel jelölni. Mivel az aláhúzás jelentése az interneten: „link”, aláhúzással nemigen jelölünk mást a neten, ez a mindenki számára – a többség számára is – teljesen egyértelmű és egyben a legbiztosabban akadálymentes linkjelölés.
Ha mindenképpen valamilyen más linkjelölést szeretnénk alkalmazni, megfelelő lehet a nagyobb kontraszt, a félkövér betű vagy egyéb formázás is.
Kontrasztok
Érdekes, hogy csak AA szinttől követelmény a webhelyeken a megfelelő kontraszt a szöveg és a háttér között (1.4.3 Contrast), pedig a túl alacsony kontraszt a többség számára is megnehezíti a befogadást.
Gyakran látni pl. bannerképen vizuálisan zavarosnak ható szöveget, vagy szürke-fehér, sárga-fehér, pasztell-fehér háttérszín-szövegszín párosítást, ami az egyébként jól látó felhasználóknak sem könnyíti meg a dolgát.
A kontraszt ellenőrzésére több online eszköz is a rendelkezésre áll, például a WebAIM Contrast Checker alkalmazása.
A nem szöveges funkcionális weboldalelemeknél, például gomboknál, űrlapmezőknél, jelölőnégyzeteknél, ikonoknál, kördiagramok szeleteinél is van színkontrasztbeli minimum követelmény a környezethez képest: legalább 3:1 arány (1.4.11 Non-text Contrast).
Szövegformázás
AA szinten az is előírás, hogy ha a felhasználó bizonyos mértékig megnöveli a térközöket a bekezdések, a sorok, a szavak és a betűk között, akkor sem szabad, hogy a módosítás miatt olvashatatlanná vagy használhatatlanná váljon az adott weboldal (1.4.12 Text Spacing). A sormagasságot legalább a betűk méretének másfélszereséig, a bekezdések közötti térközöket legalább a betűméret duplájáig, a szavak közti térközöket a betűméret 0,16-szorosáig, a betűközöket pedig legalább a betűméret 0,12-szereséig kell tudni növelni anélkül, hogy az az értelmezhetőség vagy az olvashatóság rovására menne.
Navigálás
Az akadálymentes weboldal grafikai tervezője megtervezheti az interaktív komponensekhez a billentyűfókusz (2.4.7 Focus Visible) megfelelően kontrasztos és feltűnő jelzését (kiemelését, színét, bekeretezésének módját, háttérszínét stb.), amely mégis egységes a brand vagy a weboldal arculatával.
Ha egy funkciót egy bizonyos útvonalú egérmozgatással vagy ujjmozdulattal lehet használni, tervezni kell az oldalelemre egyéb működtetési lehetőséget is (2.5.1 Pointer Gestures).
Például térképen, ahol két ujjal lehet ráközelíteni vagy távolodni, általában hozzáadnak egy + és egy - gombot is, amelyekkel ugyanez végrehajtható egyszerű gombok nyomkodásával. A húzással lapozható slideshow-k, carouselek szintén kapnak egy vissza és egy előre gombot a dizájnban.
A készülék mozgatásával (pl. megdöntésével, rázásával) aktiválható funkciókhoz is fel kell kínálni, és így a webdizájnban is tervezni kell egy hagyományosabb működtetési módot (pl. megrázással bezárás mellé felkínálni egy bezárás gombot is) (2.5.4 Motion Actuation).
Animációk
Az automatikusan lejátszódó, 5 másodpercesnél hosszabb animációkhoz és az automatikusan frissülő oldalelemekhez kell tervezni olyan komponenst a felhasználói felületre, amellyel a látogató leállíthatja az animációt vagy a frissítést, illetve szabályozhatja a frissítés gyakoriságát (2.2.2 Pause, Stop, Hide).
Vannak, akiknél bizonyos frekvenciájú villanások, gyors képváltakozások, ha hosszabbak néhány villanásnál, epilepsziás rohamot okozhatnak. Ezért egy akadálymentes weblapon csak olyan villódzó-vibráló elem lehet, amely egy egy másodperces időtartamon belül nem villan háromnál többet, vagy az egyszerre villódzó terület nem nagyobb, mint 10 foknyi látószögnek a 25%-a (2.3.1 Three Flashes or Below Threshold).
Az akadálymentes webdizájn szempontjairól a KIFÜ Web-akadálymentességi kisokosának is van egy összefoglaló videója: