WCAG-ellenőrzőlista weboldalhoz és webshophoz
Kézi ellenőrzés a WCAG 2.2 A és AA szintjének leggyakoribb pontjaihoz. Egy-egy teljes folyamatra töltsd ki, például a vásárlásra a kezdőlaptól a fizetésig. Jelszót, kártyaadatot vagy személyes adatot ne írj bele.
Kattints a fehér mezőkre és írd át őket. Mentés: böngésző Nyomtatás → Mentés PDF-ként (Ctrl+P). A szerkesztés bezáráskor elveszik, ezért előtte ments PDF-et. Nincs adatküldés.
Weboldal / vizsgált oldalak és folyamat / dátum / ki töltötte ki:
Fontos: ez válogatás, nem a teljes szabvány. A kipipált lista nem jelent teljes megfelelést, de megmutatja a legsúlyosabb akadályokat. A pontos követelményekhez a W3C WCAG 2.2 szövege az irányadó.
1. Billentyűzet és fókusz
Húzd ki az egeret, és használd a Tab, Shift+Tab, Enter, szóköz és nyíl billentyűket.
| Ellenőrzés | WCAG | Eredmény | Hol, mi a hiba? |
|---|---|---|---|
| Minden link, gomb, menü és űrlapmező elérhető és kezelhető billentyűzettel. | 2.1.1 | ||
| A felugró ablakból és a beágyazott elemből ki lehet lépni, a fókusz nem ragad be. | 2.1.2 | ||
| A fókusz sorrendje logikus, felugró ablak nyitásakor is. | 2.4.3 | ||
| Mindig látszik, melyik elemen áll a fókusz. | 2.4.7 | ||
| A fókuszált elemet nem takarja el teljesen a rögzített fejléc, a süti-sáv vagy a csevegőablak. | 2.4.11 | ||
| Az oldal elején van „Ugrás a tartalomra” link, vagy szabályos oldalszerkezet segíti az ugrást. | 2.4.1 |
2. Szöveg, szín és nagyítás
A színekhez használható a kontrasztellenőrző.
| Ellenőrzés | WCAG | Eredmény | Hol, mi a hiba? |
|---|---|---|---|
| A normál szöveg kontrasztja legalább 4,5:1, a nagy szövegé legalább 3:1. | 1.4.3 | ||
| Az ikonok, a mezőkeretek és a gombok széle legalább 3:1 kontrasztú. | 1.4.11 | ||
| Az információt nem csak a szín jelzi, például a hibát vagy az elfogyott méretet. | 1.4.1 | ||
| 200 százalékos nagyításnál minden olvasható és használható. | 1.4.4 | ||
| 400 százalékos nagyításnál (320 képpont szélesség) nem kell vízszintesen görgetni. | 1.4.10 | ||
| Ha a látogató növeli a sor- és betűközt, nem csúszik szét és nem tűnik el a szöveg. | 1.4.12 |
3. Képek, média, felépítés
| Ellenőrzés | WCAG | Eredmény | Hol, mi a hiba? |
|---|---|---|---|
| A tartalmi képnek van leíró alt szövege, a díszítő képé üres. | 1.1.1 | ||
| A videónak van felirata, a hanganyagnak átirata. | 1.2.1, 1.2.2 | ||
| A címsorok valódi címsorok, és nem ugrálnak a szintek között. | 1.3.1 | ||
| Az oldal címe egyedi és leíró, a kód megadja az oldal nyelvét. | 2.4.2, 3.1.1 | ||
| A link szövegéből kiderül a cél, nem csak „Tovább” a felirat. | 2.4.4 | ||
| A villogó, mozgó vagy automatikusan frissülő tartalom megállítható. | 2.2.2 |
4. Űrlapok
| Ellenőrzés | WCAG | Eredmény | Hol, mi a hiba? |
|---|---|---|---|
| Minden mezőnek van látható felirata, nem csak a mezőn belüli minta. | 3.3.2, 1.3.1 | ||
| A név-, cím- és e-mail-mezőket a böngésző automatikusan ki tudja tölteni. | 1.3.5 | ||
| A hibaüzenet szövegesen megnevezi a hibás mezőt. | 3.3.1 | ||
| A hibaüzenet megmondja, hogyan kell javítani. | 3.3.3 | ||
| Az állapotváltozást a képernyőolvasó is jelzi (siker, hiba, találatok száma). | 4.1.3 | ||
| Az egyedi vezérlőknek van nevük és állapotuk (lenyíló, csúszka, fülek). | 4.1.2 |
5. Webshop: kosár, pénztár, fizetés
A törvény 1. melléklet 4.7. pontja külön kiemeli az azonosítási és fizetési funkciókat.
| Ellenőrzés | WCAG | Eredmény | Hol, mi a hiba? |
|---|---|---|---|
| A szűrők és a termékváltozatok billentyűzettel kezelhetők, a találatok változását jelzi a rendszer. | 2.1.1, 4.1.3 | ||
| Ami húzással működik, például az ártartomány, az kattintással vagy gépeléssel is beállítható. | 2.5.7 | ||
| A kosár frissülését, a termék hozzáadását a képernyőolvasó is bejelenti. | 4.1.3 | ||
| A mennyiségváltó, a törlés és a többi kis gomb legalább 24 × 24 képpont, vagy elég a térköz. | 2.5.8 | ||
| Nem kell újra begépelni a már megadott adatot, például a számlázási címet. | 3.3.7 | ||
| Elküldés előtt ellenőrizhető és javítható a rendelés, vagy visszavonható. | 3.3.4 | ||
| A belépéshez nem kell fejben megjegyezni vagy feladványt megoldani alternatíva nélkül, a jelszó beilleszthető. | 3.3.8 | ||
| A fizetési oldal is kezelhető billentyűzettel, a hibái érthetők, és visszavezet a webshopba. | 2.1.1, 3.3.1 | ||
| A kosárfoglalás vagy más időkorlát előtt figyelmeztet a rendszer, és meghosszabbítható. | 2.2.1 | ||
| A segítségkérés (telefon, e-mail, csevegés) minden oldalon ugyanott van. | 3.2.6 |
6. Képernyőolvasós próba
Windowson az NVDA ingyenes, a Narrátor beépített, macOS-en a VoiceOver. Csukd be a szemed, és próbáld ki a fő folyamatot.
| Ellenőrzés | WCAG | Eredmény | Hol, mi a hiba? |
|---|---|---|---|
| A címsorok és az oldalszerkezet alapján megérthető, hol vagy. | 1.3.1, 2.4.6 | ||
| A gombok és az ikonok nevét érthetően felolvassa. | 4.1.2 | ||
| A teljes folyamat végigvihető látás nélkül. | több pont |
Összegzés és következő lépések
A három legsúlyosabb akadály:
Ki javítja, és mikorra:
Következő ellenőrzés dátuma: