A leggyakoribb akadálymentességi hibák webáruházakban és hogyan javíthatók

Hiányzó alt szövegek, alacsony színkontraszt, nem akadálymentes űrlapok — ezek a hibák, amelyeket az automatikus ellenőrzések leggyakrabban feltárnak. Áttekintés és javítási útmutató.

Közzétéve:

Példa webáruház négy kiemelt akadálymentességi hibával: hiányzó alt szöveg, alacsony kontraszt, felirat nélküli űrlapmező és hiányzó fókuszjelző

Miért tárnak fel az automatikus ellenőrzések a vártnál többet

A legtöbb webáruház-tulajdonos azt feltételezi, hogy weboldaluk akadálymentes. A valóság sokszor más. Egy automatikus ellenőrzés jellemzően tucatnyi vagy akár száznyi megállapítást tár fel még egy látszólag normális webáruházon is.

Az automatizálás a WCAG 2.1 AA szabályok körülbelül 30–50%-át fedi le. Melyek a leggyakoribb problémák?

Hiányzó alt szövegek

A legelterjedtebb megállapítás. A szöveges leírás (alt attribútum) nélküli képek teljesen elérhetetlenek a képernyőolvasókat használó felhasználók számára.

Hogyan javítható:

  • Funkcionális képek (termékek, illusztrációk, logók): tartalmas leírás arról, mit mutat a kép vagy mit csinál a gomb
  • Dekoratív képek (hátterek, díszítések): üres alt attribútum, hogy a képernyőolvasók helyesen átugorják
  • Szöveget tartalmazó képek: a szövegnek az alt attribútumban kell szerepelnie

Alacsony színkontraszt

A második leggyakoribb probléma. A WCAG 2.1 AA minimális 4,5:1 kontrasztarányt ír elő a normál szövegnél és 3:1-et a nagy szövegnél (18 pt vagy 14 pt félkövér). A gyenge kontraszt a gyengénlátókat érinti.

Tipikusan problémás elemek: egy világos 'Kosárba' gomb fehér háttéren, szürke leíró szöveg, halvány színű hibaüzenetek, szöveg képes bannereken.

Hogyan javítható: olyan eszközök, mint a Colour Contrast Analyser vagy egy automatikus szkennelés azonnal megmutatják, mely területek nem felelnek meg a szabványnak.

Nem akadálymentes űrlapok

Az űrlapok minden webáruház kritikus pontja. A leggyakoribb problémák:

  • Hiányzó label egy mezőhöz: egy programozottan hozzárendelt label nélküli E-mail mező felismerhetetlen egy képernyőolvasó számára
  • ARIA-n keresztül nem bejelentett hibaüzenetek: a képernyőolvasót használó felhasználó nem látja, hogy hiba történt
  • Kötelező mezők jelölés nélkül: egy csillag (*) szöveges magyarázat nélkül nem elegendő
  • Értelmező szöveg nélküli gombok: a 'Megerősítés' jobb, mint egy egyszerű ikon leírás nélkül

Billentyűzetes navigáció problémái

Az EAA-t átültető nemzeti törvény megköveteli, hogy a teljes webáruház egér nélkül is használható legyen. A leggyakoribb problémák:

  • Hiányzó látható focus ring: amikor egy felhasználó Tab-bal navigál az oldalon, mindig látnia kell, hol jár
  • Keyboard trap: a felhasználó egy modális ablakban vagy menüben ragad, és nem tud kilépni a billentyűzettel
  • Rossz fókuszsorrend: a Tab természetellenes módon ugrik az oldalon

Nem akadálymentes interaktív elemek

A gomboknak és hivatkozásoknak hozzáférhető névvel kell rendelkezniük, hogy a segítő technológiák helyesen bejelentsék őket. Problémás minták:

  • Gomb csak ikonnal, szöveg vagy aria-label nélkül
  • Hivatkozás 'Kattintson ide' vagy 'Tovább' szövege kontextus nélkül
  • Interaktív div vagy span role='button' és billentyűzettámogatás nélkül

Hogyan kezdjen a javításhoz

Ajánlott megközelítés:

  1. Futtasson automatikus szkennelést — gyorsan és ingyen azonosítsa a legjobb hatású problémákat
  2. Priorizáljon súlyosság szerint: először a kritikus (critical) és súlyos (serious) megállapításokat oldja meg
  3. Javítsa a technikai hibákat: az alt szövegek, a kontraszt és az űrlap-labelek viszonylag egyszerű javítások
  4. Rendeljen kézi auditot: a fennmaradó szabályok (érthetőség, képernyőolvasós viselkedés) emberi ítéletet igényelnek

Ne feledje: az automatikus ellenőrzések a WCAG-szabályok körülbelül 30–50%-át fedezik fel. Az automatikusan észlelt hibák kijavítása szükséges, de nem elegendő lépés az EAA-t átültető nemzeti törvénynek való megfeleléshez.

Az automatikus akadálymentességi ellenőrzés (mint az Inkluzon) a WCAG 2.1 AA szabályok körülbelül 30–50%-át fedi le. Gépileg észlelhető hibákat ellenőriz — szöveges alternatívákat, kontrasztot, fejléc- és űrlapstruktúrát, ARIA-attribútumokat. A fennmaradó 50–70% kézi értékelést igényel: a szöveg érthetőségét, a logikus fókusz-sorrendet, a szöveges alternatívák értelmességét, a tényleges billentyűzetes kezelhetőséget.

Az útmutató további cikkei

Gyakran ismételt kérdések

Mennyi hiba a normális?
A legtöbb webáruházban tucatnyi vagy száznyi automatikusan felderíthető megállapítás található. A számnál fontosabb a súlyosság — a kritikus és súlyos hibákat javítsa először.
Honnan tudom, mit javítsak először?
Összpontosítson a kritikusnak (critical) és súlyosnak (serious) jelölt megállapításokra — ezeknek van a legnagyobb hatásuk a fogyatékossággal élő felhasználókra.
Elegendő az automatikusan észlelt hibák javítása?
Nem. Az automatizálás a WCAG 2.1 AA-szabályok körülbelül 30–50%-át észleli. Teljes áttekintéshez — és az EAA-t átültető nemzeti törvénynek való megfeleléshez — kézi audit szükséges.

Szeretné most ellenőrizni webhelye akadálymentességét?

Akadálymentességi ellenőrzés indítása