Akadálymentesítés tervezők számára: Befogadó vizuális és interakciós tervezés

Az akadálymentes weboldal akadálymentes tervezéssel kezdődik. A leggyakoribb akadálymentesítési hibák közül sok — elégtelen színkontraszt, nem egyértelmű navigáció, zavaros elrendezés, hiányzó fókuszjelzők — a tervezési fázisban hozott döntésekből ered. Mire a kód megíródik, ezek a problémák beépülnek, és javításuk újratervezést igényel, nem csak kódigazítást.

Tervezőként Ön gyakorlatilag bárkinél több befolyással bír az akadálymentesítésre a csapatban. A színekkel, tipográfiával, térközökkel, navigációs mintákkal és interakciós modellekkel kapcsolatos döntései határozzák meg, hogy milliók tudják-e hatékonyan használni a terméket.

Színkontraszt

Az elégtelen színkontraszt az egyik legelterjedtebb akadálymentesítési probléma a weben. A WCAG minimum 4,5:1 kontrasztarányt ír elő a szöveg és háttere között normál méretű szöveg esetén, és 3:1 arányt nagy szöveg esetén (18pt normál vagy 14pt félkövér). AAA szinten a követelmény 7:1-re emelkedik normál szövegnél és 4,5:1-re nagy szövegnél.

Ezek az arányok azért léteznek, mert a gyengénlátó, öregedő szemű vagy színlátási zavarral rendelkező embereknek elegendő kontrasztra van szükségük ahhoz, hogy megkülönböztessék a szöveget a hátterétől. A világosszürke szöveg fehér háttéren elegánsnak tűnhet egy tervben, de a felhasználók jelentős százaléka számára olvashatatlan.

A nem szöveges elemekre is vonatkoznak kontrasztkövetelmények. A felhasználói felület összetevőinek — gombok, űrlapmezők, ikonok, fókuszjelzők — és az információt hordozó grafikus objektumoknak legalább 3:1 kontrasztarányt kell fenntartaniuk a szomszédos színekkel szemben.

Használjon kontrasztellenőrző eszközöket a tervezési folyamat során, ne csak a végén. Olyan eszközök, mint a WebAIM Contrast Checker vagy a Colour Contrast Analyser, lehetővé teszik az arányok ellenőrzését, mielőtt véglegesítené a színpalettát.

Szín mint információhordozó

A szín soha nem lehet az egyetlen vizuális módja az információ közvetítésének. Ha pirosas használ a hibák jelzésére és zöldet a sikeresség jelzésére, a színvak felhasználók nem feltétlenül tudják megkülönböztetni a két állapotot. Mindig egészítse ki a színt további jelzőkkel — ikonokkal, szövegcímkékkel, mintákkal vagy aláhúzásokkal.

Ez vonatkozik a linkekre is. Ha a szövegblokkban lévő linkek csak színükkel különböznek, a környező szöveghez képest 3:1 kontrasztarányt kell teljesíteniük, vagy más vizuális jelzővel, például aláhúzással kell kiegészülniük.

Tipográfia és szövegméret

A weboldalon lévő minden szövegnek 200%-ig átméretezhetőnek kell lennie a tartalom vagy funkcionalitás elvesztése nélkül. Ez azt jelenti, hogy rugalmas, relatív egységekkel kell tervezni, nem pedig fix pixelméretekkel, és biztosítani kell, hogy az elrendezések elegánsan alkalmazkodjanak a szöveg nagyításakor.

A WCAG 2.2 szövegközökre vonatkozó követelményeket is tartalmaz. A felhasználóknak lehetőséget kell kapniuk a sormagasság legalább a betűméret 1,5-szeresére, a bekezdéstávolság legalább a betűméret kétszeresére, a betűköz legalább a betűméret 0,12-szeresére és a szóköz legalább a betűméret 0,16-szorosára való módosítására — a tartalom vagy funkcionalitás elvesztése nélkül.

Linktervezés

A linkeknek vizuálisan különbözniük kell a környező szövegtől. Leírónak és tömörnek kell lenniük, elmondva a felhasználóknak, mit fognak találni a link követésekor. Soha ne használja a „kattintson ide" vagy „további információ" szöveget linkszövegként további kontextus nélkül, mivel ezek a kifejezések értelmetlenek azon képernyőolvasó-felhasználók számára, akik linklistán keresztül navigálnak.

Navigáció és következetesség

A navigációnak következetesnek kell lennie a weboldal összes oldalán. Azok a felhasználók, akik billentyűzet-navigációra vagy képernyőolvasóra támaszkodnak, mentális modellt építenek a weboldal felépítéséről, és a váratlan változások megzavarják ezt a modellt. A WCAG megköveteli, hogy a több oldalon megjelenő navigációs mechanizmusok minden alkalommal ugyanabban a relatív sorrendben jelenjenek meg, és az azonos funkciójú komponensek következetesen legyenek azonosítva.

Fókuszjelzők

Amikor egy felhasználó billentyűzettel navigál a weboldalán, egy látható jelzőnek kell mutatnia, melyik elem van éppen fókuszban. Ennek a fókuszjelzőnek jól láthatónak kell lennie — a WCAG 2.2 megköveteli, hogy ne legyen eltakarva más tartalom által (SC 2.4.11), és AAA szinten a teljes fókuszjelző és a fókuszban lévő komponens teljesen látható legyen (SC 2.4.12).

Tervezze meg a fókuszjelzőket tudatosan. A böngésző alapértelmezett körvonala gyakran elégtelen, vagy a CSS-visszaállítások eltávolítják. Tervezzen egyedi fókuszstílust, amely megfelelő kontraszttal rendelkezik és vizuálisan kiemelkedő.

Érintési célméretek

Az interaktív elemeknek elég nagynak kell lenniük ahhoz, hogy nehézség nélkül aktiválhatók legyenek. A WCAG 2.2 megköveteli, hogy az interaktív célok legalább 24×24 CSS pixel méretűek legyenek (SC 2.5.8), beleértve a célt körülvevő üres teret. AAA szinten ez 44×44 pixelre nő (SC 2.5.5). Ez segíti a mozgáskorlátozott, remegéssel küzdő vagy korlátozott ügyességű felhasználókat, valamint mindenkit, aki mobileszközt használ rázós környezetben.

Űrlaptervezés

Az űrlapok az akadálymentes tervezés egyik legkritikusabb területei. Minden űrlapelemhez jól látható címkére van szükség, amely megmondja a felhasználónak, milyen információt kell megadnia. A hibaüzeneteknek konkrétaknak, láthatóknak kell lenniük, és az érintett mező közelében kell elhelyezkedniük. Szükség esetén adjon utasításokat, és kerülje a helyőrző szöveg kizárólagos használatát címkeként — a helyőrző szöveg eltűnik, amikor a felhasználó elkezd gépelni, és gyakran elégtelen kontraszttal rendelkezik.

Tervezzen a hibaelkerülésre. Tegye lehetővé a felhasználók számára a bevitel áttekintését és javítását a beküldés előtt, különösen jelentős következményekkel járó műveletek, például pénzügyi tranzakciók vagy jogi megállapodások esetén. Ha hibákat észlel, adjon egyértelmű javaslatokat a javításra.

Mozgás és animáció

Egyes felhasználók rohamokat, migrént vagy szédülést tapasztalnak az animált vagy villogó tartalomtól. A weboldalán semmi sem villoghat másodpercenként háromnál többször. Biztosítson vezérlőket a mozgó, villogó vagy görgető tartalom szüneteltetésére, leállítására vagy elrejtésére, ha az több mint öt másodpercig tart. Tartsa tiszteletben az operációs rendszer „prefers-reduced-motion" beállítását, és biztosítson csökkentett mozgású alternatívákat az animációkhoz.

Képek szöveggel

Kerülje a szöveget tartalmazó képek használatát a weboldalán. A valódi szöveg átméretezhető, újraformázható és a segítő technológiák el tudják olvasni. A szöveget tartalmazó képek nem. Az egyetlen kivételek a logók és azok az esetek, amikor a szöveg adott vizuális megjelenítése alapvető fontosságú az információ közvetítéséhez.

Tervezői akadálymentesítési ellenőrzőlista

Mielőtt bármilyen tervet átad a fejlesztésnek, ellenőrizze: a kontrasztarányok megfelelnek a követelményeknek minden szöveg és interaktív elem esetén; a szín soha nem az egyetlen információjelző; a fókuszállapotok meg vannak tervezve minden interaktív elemhez; az érintési célok teljesítik a minimum méretkövetelményeket; a navigáció következetes minden oldalon; a hibaállapotok és üzenetek egyértelműen meg vannak tervezve; a szöveg átméretezhető az elrendezés törése nélkül; az animációk tiszteletben tartják a felhasználói beállításokat; és minden nem szöveges tartalomhoz szöveges alternatíva van tervezve.