Weboldal akadálymentességének tesztelése: ingyenes eszközök

Gyakran halljuk ezt a történetet. Valaki lefuttatja a Lighthouse-t, zöld 100-ast kap akadálymentességre, és továbblép. Egy héttel később ír egy vásárló, hogy nem tudott fizetni, mert a kártyás űrlap billentyűzettel nem érhető el. Mindkettő igaz. Az automatikus ellenőrzés átment, a webhely mégis cserben hagyott egy valódi embert.

Ez az útmutató megmutatja, hogyan tesztelhet rendesen kis költségvetéssel: milyen ingyenes eszközöket futtasson, milyen 15 perces kézi rutint kövessen, hogyan próbáljon ki először egy képernyőolvasót, és mikor érdemes fizetni egy auditért.

Megmondja egy automatikus ellenőrző, hogy akadálymentes-e a weboldalam?

Nem. Az automatikus ellenőrzők gyorsan megtalálnak bizonyos problémákat, de sok akadálymentességi kérdést csak ember tud megválaszolni. Amikor a brit Government Digital Service (GDS) 10 eszközt tesztelt egy 143 ismert hibát tartalmazó oldalon, a legjobb a hibák 41%-át találta meg. A W3C egyértelműen fogalmaz: az értékelőeszközök „nem tudják megállapítani az akadálymentességet, csak segíthetnek benne”.

A GDS tesztje (új lapon nyílik meg) 2017 februárjából származik, és a 41% (az Asqatasun eredménye) az eszköz kézi ellenőrzésre vonatkozó figyelmeztetéseit is tartalmazta. Az eszközök azóta fejlődtek, de a lemaradásnak ugyanaz az oka. Egy szoftver megállapíthatja, hogy egy képnek nincs helyettesítő szövege. Azt viszont nem, hogy a „piros ruha” rossz leírás egy kék öltönyről készült fotóhoz, vagy hogy logikus-e a fókusz sorrendje.

Tekintse tehát az ellenőrzőt füstjelzőnek, ne épületszakértői vizsgálatnak. Lefuttatni azért megéri: a WebAIM Million 2026 (új lapon nyílik meg) az egymillió legnépszerűbb kezdőlap 95,9%-án talált kimutatható hibát, vagyis a legtöbb webhelyen akad gyorsan javítható hiba. Ahogy a W3C eszközválasztási útmutatója (új lapon nyílik meg) mondja: „Emberi ítélőképességre van szükség.”

Milyen ingyenes akadálymentességi tesztelőeszközöket használjak?

Használjon egy-két automatikus ellenőrzőt, egy kontrasztellenőrzőt és egy képernyőolvasót. Az eszközök eltérő szabályokat alkalmaznak, és eltérően jelentik az eredményeket, így két ellenőrző általában többet talál, mint egy. Az alábbi eszközök mindegyikének van ingyenes változata. Mielőtt valamelyikre hagyatkozna, nézze meg az aktuális feltételeit, mert a nevek, a funkciók és az árak változnak.

Mit ellenőrizhetek kézzel 15 perc alatt?

Elég sok mindent. A W3C Easy Checks (új lapon nyílik meg) (egyszerű ellenőrzések) gyűjteménye az oldalcímeket, a helyettesítő szöveget, a címsorokat, a kontrasztot, az átugró linkeket, a látható billentyűzetfókuszt, az oldal nyelvét, a nagyítást, a feliratokat és az űrlapcímkéket fedi le. Válasszon ki egy fontos oldalt, például egy termékoldalt vagy a foglalási űrlapot, és szánjon minden ellenőrzésre egy-két percet. Olyan dolgokat fog találni, amelyeket egyetlen ellenőrző sem jelez.

A W3C szerint ezek az ellenőrzések „csak néhány akadálymentességi problémát fednek le”, így nem jelentenek teljes értékelést. Mégis ez a legjobb negyedóra, amit erre fordíthat:

1. Oldalcím (1 perc). A böngészőfül megmondja, milyen oldalon van, például „Asztalfoglalás | Rózsa Bisztró”, és nem mindenhol csak annyit, hogy „Kezdőlap”?
2. Képek (2 perc). Jelenítse meg a helyettesítő szövegeket a WAVE-vel vagy hasonló eszközzel. Pontosak? A díszítő képeket átugorja a képernyőolvasó?
3. Címsorok (2 perc). Listázza ki a címsorokat, és olvassa el őket önmagukban. Működnek tartalomjegyzékként?
4. Kontraszt (2 perc). Ellenőrizze a folyószöveget, a kis szürke szövegeket, a gombok szövegét és a képeken lévő szöveget.
5. Billentyűzet (4 perc). Tegye félre az egeret, és lépkedjen végig Tab billentyűvel az oldalon (lásd a következő részt).
6. Nagyítás (2 perc). 200%-on, majd 400%-on is el tud olvasni mindent, és oldalirányú görgetés nélkül tudja használni a menüt?
7. Űrlapok és nyelv (2 perc). Kattintson az egyes mezők címkéjére; egy jól megépített űrlapon ettől a kurzor a mezőbe kerül. Nézze meg az eszköz jelentésében, hiányzik-e az oldal nyelve.

Hogyan teszteljek billentyűzettel?

Tegye el az egeret. A Tab billentyűvel léphet előre, a Shift+Tabbal vissza, az Enterrel követheti a linkeket, a szóközzel vagy az Enterrel nyomhatja meg a gombokat, a menükben és a választógombok között pedig a nyílbillentyűkkel mozoghat. Minden interaktív elemnek elérhetőnek kell lennie, mindig látnia kell, hol tart, és sehol sem szabad elakadnia.

Macen a Safari a Tab lenyomásakor kihagyja a linkeket, amíg a Haladó beállításokban be nem kapcsolja, hogy a Tab a weboldal minden elemét kiemelje (angolul: „Press Tab to highlight each item on a webpage”). Ezután ellenőrizze:

• Mindig látja, hol tart? Ha a fókuszkeret eltűnik, a billentyűzethasználó eltéved.
• Logikus a sorrend? A fókusznak az olvasási sorrendet kell követnie.
• Eltakarja valami a fókuszt? Ha egy rögzített fejléc vagy sütisáv eltakarja a fókuszban lévő elemet, az sérti a WCAG 2.2 Nem takart fókusz kritériumát.
• Ki tud jutni? Nyisson meg minden menüt, felugró ablakot és dátumválasztót, majd próbáljon kilépni. Az Escape-nek be kell zárnia a párbeszédablakokat.
• Működik a teljes folyamat? Tegyen kosárba egy terméket, módosítsa a mennyiséget, váltson be egy kupont, és jusson el a fizetésig egér nélkül.

Minden hibát pontosan írjon le: „A termékoldal méretválasztója nem nyitható meg Enterrel vagy szóközzel” sokkal hamarabb kijavítják, mint azt, hogy „nem működik a billentyűzet”.

Hogyan teszteljek először képernyőolvasóval?

Kezdje azzal a képernyőolvasóval, amely az eszközén már megvan, vagy Windowson az NVDA-val, és hallgasson meg egyetlen oldalt. Nem kell szakértőként használnia. Azt ellenőrzi, hogy a címsorokat, linkeket, gombokat, képeket és űrlapmezőket értelmes névvel olvassa-e fel, és hogy semmi fontos nem marad-e néma.

• Mac: a Command+F5 be- és kikapcsolja a VoiceOvert; a Control+Option+U megnyitja a rotort, a címsorok, linkek és űrlapvezérlők listáját.
• Windows: az NVDA-ban a H billentyűvel ugorhat a címsorok között, az Insert+F7 pedig kilistázza a linkeket és a címsorokat.
• Telefon: kapcsolja be a VoiceOvert (iPhone) vagy a TalkBacket (Android), és jobbra húzással lépkedjen elemről elemre. Előbb tanulja meg, hogyan kell kikapcsolni.

Arra figyeljen, ami a legfontosabb. A WebAIM 2024-es képernyőolvasós felmérésében (új lapon nyílik meg) a válaszadók 71,6%-a mondta, hogy egy hosszú oldalon először a címsorok mentén navigál, ezért kezdje ott. Ezután hívja elő a linkek listáját: öt „Tovább” nevű link senkinek sem mond semmit. A „Kosárba, sötétkék pulóver” hasznos gomb; a „gomb” nem az. Végül töltsön ki egy űrlapot, és ellenőrizze, hogy minden mezőt és hibát felolvas-e.

A következtetéseiben legyen szerény. Ha Önnek hibásnak hangzik, valószínűleg az; ha rendben lévőnek, az nem bizonyíték. Arról, hogyan dolgoznak valójában a tapasztalt felhasználók, a fogyatékossággal élők webhasználatáról szóló cikkünkben olvashat.

Hogyan ellenőrizzem a nagyítást, az újrarendeződést és a szövegtérközt?

Nagyítson a böngészőben 200%-ra, és ellenőrizze, hogy a szöveg levágás és egymásra csúszás nélkül nő-e. Ezután tesztelje az újrarendeződést: 400%-os nagyításnál egy 1280 képpont széles ablakban a tartalomnak oldalirányú görgetés nélkül kell elférnie. Végül növelje a betűk, a szavak, a sorok és a bekezdések közötti távolságot, és ellenőrizze, hogy semmi sem esik szét, és semmi sem tűnik el.

Ezek a WCAG Szöveg átméretezése (1.4.4), Újrarendeződés (1.4.10) (új lapon nyílik meg) és Szövegtérköz (1.4.12) (új lapon nyílik meg) kritériumainak felelnek meg. Az újrarendeződés 320 CSS-képpontos szélességgel számol, amely a W3C megjegyzése szerint „egyenértékű egy 1280 CSS-képpont széles kiindulási nézetablakkal 400%-os nagyításnál”. A szövegtérköz azt kéri, hogy semmi se vesszen el, ha az olvasó a sormagasságot a betűméret 1,5-szeresére, a bekezdések közötti térközt 2-szeresére, a betűközt 0,12-szeresére, a szóközt pedig 0,16-szorosára állítja.

Egy szövegtérköz-könyvjelzőskript (bookmarklet), vagyis könyvjelzőként elmentett kis szkript, egyetlen kattintással alkalmazza mind a négy értéket. Figyelje, kilóg-e a szöveg a gombokból, és levágódnak-e a címkék a széleken. 400%-os nagyításnál egy laptop nagyjából azt mutatja, amit egy kis telefon, így egy jól megépített reszponzív webhely ennek nagy részén már eleve átmegy.

Hogyan ellenőrizzem az űrlapokat, a hibaüzeneteket és a pénztárat?

Minden fontos űrlapot töltsön ki háromszor: egyszer helyesen, egyszer minden mezőt üresen hagyva, és egyszer szándékos hibákkal. Minden mezőhöz látható címke kell, minden hibát szavakkal kell elmagyarázni a mezője mellett, a jelszó- és ellenőrzőkód-mezőkbe pedig be kell tudni illeszteni.

• Hibák. A piros „Érvénytelen bevitel” nem elég. A mező melletti „Adja meg a lejárati dátumot HH/ÉÉ formátumban” igen. Beküldés után a fókusznak a hibaösszesítőre vagy az első hibás mezőre kell kerülnie.
• Bejelentkezés és kódok. A WCAG 2.2 akadálymentes hitelesítésről szóló kritériuma (új lapon nyílik meg) szerint a beillesztés vagy a jelszókezelők letiltása nem felel meg, hacsak nincs más belépési mód.
• CAPTCHA és időkorlátok. A WebAIM felmérésében a képernyőolvasót használók a CAPTCHA-t tartották a web legproblémásabb elemének. Ellenőrizze, van-e akadálymentes alternatíva, és meghosszabbíthatók-e az időkorlátok.

Az akadálymentességi ellenőrzőlistánk bővebb listát ad webáruházaknak, a sütisávokkal és a felugró ablakokkal együtt.

Mit tartalmaz egy szakmai akadálymentességi audit, és mikor van rá szükségem?

Az akadálymentességi audit egy szakember strukturált felülvizsgálata egy megnevezett szabvány, általában a WCAG 2.1 vagy 2.2 AA szintje szerint. Automatikus vizsgálatokat kombinál a legfontosabb sablonok és folyamatok kézi és segítő technológiás tesztelésével, és egy rangsorolt jelentéssel zárul. Akkor van rá szüksége, ha a jogszabály vonatkozik Önre, egy nagyobb indulás előtt, vagy ha az ügyfelei bizonyítékot kérnek.

Mielőtt megállapodna az árban, kérdezze meg:

• Melyik szabvány, verzió és szint szerint tesztelnek?
• Mely sablonok és folyamatok tartoznak bele? Egy webáruháznál: kezdőlap, kategória, termékoldal, kosár, pénztár, fiókoldalak és űrlapok.
• Tesztelnek kézzel, képernyőolvasóval, billentyűzettel és nagyítással, és ha igen, mely böngészőkön és eszközökön?
• A jelentés súlyosság szerint rangsorolja a problémákat, megadja a helyüket, és javítást javasol?
• Benne van az újratesztelés?

Az árak szolgáltatótól, országtól és terjedelemtől függően nagyon eltérnek, ezért azt hasonlítsa össze, mi van benne. Ha az európai akadálymentesítési irányelv vonatkozik Önre, az audit a nyilvános nyilatkozatát is alátámasztja; az EAA-ról szóló útmutatónk elmagyarázza, kire vonatkozik.

Miért teszteljen fogyatékossággal élő felhasználókkal?

Mert egy szabványnak megfelelni és könnyen használhatónak lenni nem ugyanaz. Egy pénztár minden WCAG-kritériumon átmehet, és egy képernyőolvasót használónak mégis húsz percbe telhet végigmenni rajta. A W3C szerint a fogyatékossággal élő felhasználókkal végzett értékelés „olyan használhatósági problémákat azonosít, amelyeket önmagában a megfelelőségi értékelés nem tár fel”, és megmutatja a csapatának, hogyan használják az emberek valójában a webhelyet.

Ehhez nem kell labor. Néhány alkalom a legfontosabb feladaton, például egy termék megtalálásán és kifizetésén, többet tanít, mint egy újabb kör automatikus vizsgálat. Toborozzon fogyatékosügyi szervezeteken, kutatócégeken vagy a saját vásárlói körén keresztül, és fizessen a résztvevőknek az idejükért. Hagyja, hogy a saját eszközeiket és beállításaikat használják. A W3C a felhasználók értékelésbe való bevonásáról (új lapon nyílik meg) szóló útmutatója a gyakorlati oldalt is bemutatja.

Mit kezdjek az eredményekkel?

Rendezze a problémákat aszerint, mennyire akadályozzák az embereket, és hol fordulnak elő, javítsa őket a webhely saját kódjában és tartalmában, teszteljen újra, és rögzítse, mi van még hátra. Egy címke nélküli mező a pénztárban fontosabb, mint egy kisebb kontraszthiba a láblécben, egy közös sablonban végzett javítás pedig minden oldalt rendbe tesz, amely azt használja.

1. Rangsoroljon. Először a kulcsfolyamatok (pénztár, foglalás, regisztráció) akadályai, aztán a közös sablonok, végül az egyedi oldalak.
2. Javítson a forrásnál. A témát, a komponenst vagy a tartalmat módosítsa, ne csak a tünetet kezelje.
3. Teszteljen újra. Ismételje meg ugyanazokat az ellenőrzéseket, kézzel is, nem csak eszközökkel.
4. Dokumentáljon. Sorolja fel dátummal az ismert problémákat az akadálymentesítési nyilatkozatában. A WCAG 2.2-ről szóló útmutatónk az újabb kritériumokat magyarázza el.
5. Ismételje. Minden kiadáshoz adjon hozzá egy billentyűzetes ellenőrzést és egy automatikus vizsgálatot.

Ha akadálymentesítési widgetet használ, a miénket is beleértve, bezárt widgettel teszteljen. Egy olyan panel, mint a SiteAccessible, további lehetőségeket ad a látogatóknak az oldal módosítására, a WCAG viszont azt vizsgálja, működik-e az oldal az alapállapotában. Egyes auditrendszerek nem értékelnek overlay-szkriptet futtató oldalakat, ezért előbb egyeztessen az auditorával.