Akadálymentesítés fejlesztők számára: Befogadó kód írása
A fejlesztők az akadálymentesítés építészei a megvalósítás szintjén. Míg a tervezők meghatározzák a vizuális és interakciós alapokat, végső soron a kód határozza meg, hogy egy weboldal működik-e a billentyűzet-navigációval, helyesen kommunikál-e a képernyőolvasókkal, és fenntartja-e az akadálymentesítést a különböző böngészőkben és eszközökön.
A jó hír az, hogy a legtöbb akadálymentesítési legjobb gyakorlat egybeesik a tiszta, szemantikus, szabványnak megfelelő kód általános legjobb gyakorlataival. Az akadálymentes kód írása nem a bonyolultság növeléséről szól — hanem arról, hogy eleve helyesen írjuk a kódot.
Elsősorban szemantikus HTML
Az akadálymentesítésért tehető leghatásosabb dolog a szemantikus HTML elemek helyes használata. A HTML5 gazdag szókincset biztosít olyan elemekkel, amelyek inherens jelentéssel és akadálymentesítési funkciókkal rendelkeznek. Egy <button> elem automatikusan fókuszálható, billentyűzettel aktiválható, és a képernyőolvasók gombként jelentik be. Egy <div> onclick kezelővel ezek közül egyikkel sem rendelkezik jelentős többletmunka nélkül.
Használja a <nav> elemet navigációs területekhez, a <main> elemet az elsődleges tartalomhoz, a <header> és <footer> elemeket a megfelelő szakaszokhoz, a <section> és <article> elemeket tartalmi területekhez, az <h1>-től <h6>-ig terjedő elemeket címsorokhoz helyes hierarchikus sorrendben, az <ul> és <ol> elemeket listákhoz, a <table> elemet <th> elemmel táblázatos adatokhoz, a <label> elemet for attribútummal űrlapelemekhez, és a natív <button> és <a> elemeket interaktív vezérlőelemekhez.
Ezek az elemek olyan akadálymentesítési fát hoznak létre, amelyet a segítő technológiák használnak a tartalom bemutatásához. Ha helyesen használja őket, az akadálymentesítés nagy része automatikusan kezelődik.
Címsorstruktúra
A címsorok az oldal szerkezeti vázát adják. A képernyőolvasó-felhasználók gyakran címsorok szerint navigálnak, hogy megértsék a tartalom szervezését és megtaláljanak bizonyos szakaszokat. Minden oldalnak pontosan egy <h1> elemmel kell rendelkeznie, és a címsoroknak logikus hierarchiát kell követniük szintek kihagyása nélkül — egy <h3> nem követhet egy <h1> elemet anélkül, hogy közben <h2> lenne.
Soha ne használjon címsorelemeket vizuális stílushoz. Ha nagy félkövér szövegre van szüksége, amely nem címsor, használjon CSS-t egy másik elemen. Fordítva, ha a tartalom címsorként funkcionál, jelölje meg úgy, függetlenül a vizuális megjelenésétől.
Billentyűzet-akadálymentesítés
Minden funkcionalitásnak kezelhetőnek kell lennie kizárólag billentyűzetes felületen keresztül. Ez azt jelenti, hogy minden interaktív elemnek — linkek, gombok, űrlapelemek, menük, modális ablakok, csúszkák, fülek — elérhetőnek kell lennie a Tab billentyűvel (vagy Shift+Tab a visszafelé navigáláshoz), aktiválhatónak kell lennie Enter vagy Szóköz billentyűvel, és szükség esetén kiléphetőnek kell lennie.
Soha ne hozzon létre billentyűzet-csapdákat, ahol a felhasználók be tudnak lépni egy elembe, de nem tudnak kilépni belőle. A modális párbeszédablakoknak fogniuk kell a fókuszt a párbeszédablakon belül, amíg nyitva van, és vissza kell adniuk a fókuszt a kiváltó elemre, amikor bezáródik, de az Escape billentyűnek mindig be kell zárnia a párbeszédablakot.
Győződjön meg arról, hogy a fókuszsorrend logikus sorozatot követ, amely megegyezik a vizuális elrendezéssel. A DOM-sorrendnek általában meg kell egyeznie a vizuális megjelenítéssel. Kerülje a pozitív tabindex értékek használatát, amelyek felülírják a természetes fókuszsorrendet és zavart okoznak. Használja a tabindex="0" értéket nem interaktív elemek fókuszálhatóvá tételéhez, ha szükséges, és a tabindex="-1" értéket olyan elemekhez, amelyek csak programozottan fókuszálhatók.
Oldal nyelve
Állítsa be minden oldal alapértelmezett nyelvét a lang attribútummal a <html> elemen. Ez megmondja a képernyőolvasóknak, melyik kiejtési szabályokat használják. Ha a nyelv a tartalmon belül változik — például egy francia mondat egy angol oldalon belül —, jelölje a változást lang attribútummal a befoglaló elemen.
Űrlap-akadálymentesítés
Az űrlapok azok, ahol a felhasználók adatokat adnak meg, és gyakori forrásai az akadálymentesítési hibáknak. Minden űrlapelemnek programozottan társított címkével kell rendelkeznie, jellemzően a <label> elem használatával, amelynek for attribútuma megegyezik a vezérlőelem id-jával. Csoportosítsa az összetartozó elemeket <fieldset> és <legend> elemekkel.
Amikor bemeneti hibákat észlel, azonosítsa a hibás mezőt és írja le a hibát szövegben. Lehetőség szerint adjon javítási javaslatokat. Olyan mezőknél, amelyek meghatározott formátumot fogadnak el, adjon egyértelmű utasításokat az elvárt formátumról. Használja az autocomplete attribútumot a böngésző automatikus kitöltésének engedélyezéséhez gyakori mezőknél, mint a név, e-mail, cím és telefonszám.
A fókuszt nem kapó állapotüzeneteket — mint „termék hozzáadva a kosárhoz" vagy „3 találat" — a képernyőolvasó-felhasználóknak ARIA élő régiókon vagy állapot-szerepkörökön keresztül kell bejelenteni.
Alternatív szöveg
Minden nem dekoratív képnek értelmes alternatív szöveggel kell rendelkeznie, amely leírja a tartalmát vagy funkcióját. Informatív képeknél írja le, mit közvetít a kép. Funkcionális képeknél (mint egy logó, amely a főoldalra mutat) írja le a funkciót. Dekoratív képeknél, amelyek nem adnak információt, használjon üres alt attribútumot (alt=""), hogy a képernyőolvasók átugorják őket.
Összetett képek, mint diagramok, grafikonok vagy ábrák, hosszabb leírást igényelhetnek, amelyet felirattal, szomszédos szöveggel vagy linkelt részletes leírással biztosíthat.
WAI-ARIA
Az Accessible Rich Internet Applications specifikáció további szemantikát biztosít azokra az esetekre, amikor a natív HTML nem elegendő. Az ARIA lehetővé teszi szerepkörök, állapotok és tulajdonságok közlését a segítő technológiáknak egyedi widgetekhez és dinamikus tartalomhoz.
Az ARIA-t azonban megfontoltan kell használni. Az ARIA első szabálya: ha használhat natív HTML elemet, amely rendelkezik a szükséges szemantikával és viselkedéssel, tegye azt. Az ARIA nem ad hozzá funkcionalitást — csak szemantikát. Egy <div role="button"> elemnek továbbra is szüksége van JavaScript billentyűzet-kezelésre, míg egy natív <button> elem ezt automatikusan kezeli.
Használjon ARIA jelölő szerepköröket (vagy HTML5 megfelelőiket) az oldal régiók meghatározásához. Használja az aria-label és aria-labelledby attribútumokat akadálymentes nevek biztosításához, ahol a látható szöveg nem elegendő. Használja az aria-expanded, aria-selected, aria-checked és más állapot-attribútumokat az interaktív widgetek aktuális állapotának közléséhez. Használja az aria-live régiókat a dinamikus tartalom-frissítések bejelentéséhez.
Reszponzív tervezés és átfolyás
A tartalmat információveszteség nélkül kell megjeleníteni 320 CSS pixel szélességnél, vízszintes görgetés nélkül. Ez biztosítja, hogy a standard asztali képernyőn 400%-ra nagyító felhasználók is hozzáférhessenek az összes tartalomhoz. Tervezze elrendezéseit úgy, hogy a tartalom egyetlen oszlopba folyjon szűk szélességeknél, ahelyett hogy két irányú görgetést igényelne.
Skip linkek
Biztosítson mechanizmust a billentyűzet-felhasználóknak az ismétlődő tartalomblokkok — mint a navigációs menük — megkerülésére és a főtartalomra való közvetlen ugrásra. A leggyakoribb megvalósítás egy „Ugrás a főtartalomra" link, amely az oldal első fókuszálható eleme, és fókuszra láthatóvá válik.
Fejlesztői tesztelési ellenőrzőlista
Bármilyen funkció telepítése előtt ellenőrizze: minden funkcionalitás működik-e kizárólag billentyűzettel; a fókuszsorrend logikus-e; a fókusz látható-e minden interaktív elemen; minden kép rendelkezik-e megfelelő alt-szöveggel; minden űrlapelem rendelkezik-e címkével; az oldal nyelve be van-e állítva; a címsorhierarchia helyes-e; az ARIA helyesen és csak szükség esetén van-e használva; a tartalom átfolyik-e 320px szélességnél; és a dinamikus tartalom-frissítések bejelentésre kerülnek-e a képernyőolvasóknak.
Ebben a szekcióban
Akadálymentes a weboldala?
Vizsgálja meg weboldalát ingyen, és kapja meg WCAG-pontszámát percek alatt.
Vizsgálja meg weboldalát ingyen