Az Accessibility Inspector automatizált WCAG 2.1 AA szintű ellenőrzéseket futtat bármely weboldalon, és kategorizált jelentést készít az akadálymentességi problémákról. Fedezze fel az elégtelen színkontraszt-arányokat, a hiányzó kép alt szövegeket, a nem megfelelő ARIA szerepeket és attribútumokat, a hiányzó űrlapcímkéket, a billentyűzetes navigációs problémákat és a hiányzó tájékozódási pontokat (landmark) – minden talált problémánál egykattintásos elem-kiemeléssel.
A webes akadálymentesség nem opcionális – sok joghatóságban jogi követelmény, és elengedhetetlen a globális népesség 15%-a számára, akik fogyatékossággal élnek. Az akadálymentességi problémák azonban a normál fejlesztés és tesztelés során láthatatlanok. Egy gomb rendben nézhet ki, de teljesen elérhetetlen lehet képernyőolvasók számára, mert egy stílusozott div role attribútum nélkül. A szöveg Önnek olvashatónak tűnhet, de nem felel meg a kontrasztkövetelményeknek gyengénlátó felhasználók számára. Az Accessibility Inspector automatikusan felszínre hozza ezeket a láthatatlan problémákat. Tucatnyi WCAG 2.1 AA szintű kritériumot ellenőriz, beleértve a színkontraszt-arányokat (minimum 4,5:1 normál szöveghez, 3:1 nagy szöveghez), a hiányzó alt szöveget képeken, a hiányzó címkéket űrlapmezőkön, a nem megfelelő ARIA szerepeket és attribútumokat, a hiányzó dokumentum-tájékozódási pontokat (nav, main, footer) és a billentyűzetfókusz-jelzőket. Minden probléma tartalmazza az érintett elemet, a megsértett konkrét WCAG kritériumot és egy javaslatot a javítás módjára. Kattintson bármelyik problémára az elem kiemeléséhez az oldalon.
Automatizált ellenőrzéseket futtat a WCAG 2.1 AA szintű sikerkritériumok alapján, beleértve az érzékelhetőség, működtethetőség, érthetőség és robusztusság kategóriáit. Minden ellenőrzés megmutatja a konkrét kritériumot (pl. 1.4.3 Kontraszt, 1.1.1 Nem szöveges tartalom) és a megfelelt/nem felelt meg állapotot.
Kiszámítja a szöveg és a háttérszín közötti kontrasztarányt az oldal minden szövegelemére. Jelöli a 4,5:1 alatti elemeket normál szöveg esetén, illetve a 3:1 alattiakat nagy szöveg esetén (18px+ vagy 14px+ félkövér). Megmutatja a tényleges és a minimálisan szükséges arányt.
Átvizsgálja az összes img, svg és image role elemet. Jelöli a hiányzó alt attribútumokat, az üres alt szöveget nem dekoratív képeken, és a túl általános alt szövegeket („kép”, „fotó”). Javasolja, hogy egy adott kép leíró alt szöveget, üres alt-ot (dekoratív), vagy role="presentation" attribútumot igényel-e.
Ellenőrzi a nem megfelelő ARIA szerephasználatot (szerepek rossz elemeken), a hiányzó kötelező ARIA attribútumokat (pl. aria-label ikon gombokon), az aria-labelledby által hivatkozott duplikált ID-kat, és a hiányzó tájékozódási pontokat (nincs main, nincs nav). Szemantikus HTML alternatívákat javasol.
Biztosítja, hogy minden űrlapmező (szöveg, e-mail, jelszó, jelölőnégyzet, legördülő lista) rendelkezzen kapcsolódó címkével – akár egy megfelelő for/id párú label elemen, akár aria-label vagy aria-labelledby attribútumon keresztül. A címke nélküli mezők elérhetetlenek képernyőolvasók számára.
A problémák Hibákra (javítandó – akadályozzák a hozzáférést), Figyelmeztetésekre (érdemes javítani – potenciális akadályok) és Megfelelt (megerősítetten elérhető) kategóriákba vannak sorolva. A hibaszám kiemelten jelenik meg. Kattintson bármelyik problémára az érintett elem kiemeléséhez az oldalon.
Egy új oldal vagy funkció elindítása előtt futtassa az Accessibility Inspectort, hogy korán elkapja a problémákat. A hiányzó alt szöveg, a címke nélküli űrlapmezők és a kontrasztsértések könnyen javíthatók fejlesztés közben, de költséges felfedezni őket éles környezetben.
Sok joghatóság megköveteli a WCAG 2.1 AA szintű megfelelőséget (ADA az USA-ban, EAA az EU-ban). Futtassa az ellenőrzőt a nyilvános oldalain, hogy azonosítsa a megfelelőségi hiányosságokat, mielőtt azok jogi kockázattá válnának.
Építse be az akadálymentességi ellenőrzést a QA-folyamatába. A vizuális QA és a funkcionális tesztelés után futtassa az Accessibility Inspectort, hogy ellenőrizze, az implementáció nem vezet-e be akadálymentességi regressziókat.
Futtassa az ellenőrzőt az aktuális oldalán egy csapatmegbeszélés során, hogy valódi akadálymentességi problémákat mutasson be. A vizuális kiemelés és az egyértelmű magyarázatok segítenek a fejlesztőknek megérteni, milyen az akadálymentes jelölés, és miért fontos.
Vizsgálja át azokat az oldalakat, amelyek külső widgeteket, beágyazott tartalmat vagy felhasználó által generált HTML-t tartalmaznak. Ezek a források gyakran akadálymentességi problémákat (hiányzó alt szöveg, kontrasztsértés) vezetnek be, amelyekért oldal-tulajdonosként Ön továbbra is felelős.
Nyissa meg a DevSuite Pro lebegő dokkját, és kattintson az Accessibility Inspector ikonra. Az eszköz átvizsgálja az oldal DOM-ját akadálymentességi problémák után kutatva.
Egy kategorizált jelentés jelenik meg Hibákkal (piros), Figyelmeztetésekkel (sárga) és Megfelelt elemekkel (zöld). Minden szekció konkrét problémákat sorol fel az érintett elemekkel és WCAG kritérium-hivatkozásokkal.
Kattintson bármelyik problémára, hogy színes kerettel kiemelje az érintett elemet az oldalon, és odagörgessen. A jelentés és a DOM-elem közötti kapcsolat azonnali.
Minden probléma konkrét javaslatot tartalmaz: „Adjon hozzá alt szöveget, amely leírja a kép tartalmát”, „Növelje a betűszín kontrasztját legalább 4,5:1-re”, „Adjon hozzá egy for='email' attribútumú label elemet”.
Végezze el a módosításokat a kódjában, töltse újra az oldalt, és futtassa újra az auditot. A hibaszámnak csökkennie kell, ahogy a problémák megoldódnak. Törekedjen a nulla hibára.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 64+ fejlesztői eszközt böngészőjéhez.
