WCAG 2.2 AA: előzetes hibakereső lista magyar KKV-knak

Egy kapcsolatfelvételi űrlap lehet látványos, mégis használhatatlan annak, aki billentyűzettel navigál. Egy webshop kezdőoldala kaphat jó automatikus értékelést, miközben a pénztárban nem olvasható fel a hibajelzés. Az akadálymentességet ezért konkrét feladatokon kell vizsgálni, nem a kezdőoldal benyomása alapján.

Az alábbi lista előzetes hibakeresésre szolgál, nem teljes WCAG-audit. Nincs értelmes „8 ponttól megfelel” küszöb: egyetlen elérhetetlen fizetési gomb is megakadályozhatja a vásárlást. A WCAG 2.2 A és AA sikerkritériumaihoz adunk ellenőrzési kapaszkodókat; az EAA jogi hatályát és a mentességeket a külön jogi útmutató tárgyalja. A kettő nem azonos minősítés.

A vizsgálat előkészítése

Válassz ki egy teljes felhasználói utat: szolgáltatás megértése és ajánlatkérés, vagy termékkeresés és rendelés. Tartozzon bele a sütipanel, a mobilmenü, a felugró ablak, az üres találati lista és a hibás beküldés állapota is. Külső foglaló vagy fizetési felület esetén jelöld, hol lépsz át más szolgáltató rendszerébe.

A jegyzőkönyvben minden hibához kerüljön URL, dátum, böngésző, operációs rendszer, használt segítő technológia, reprodukciós lépés, várt és tapasztalt működés. A „mobilon rossz” megjegyzés helyett például: „A kosárból a címűrlapra lépve a fókusz nem jut el az irányítószám mezőhöz.” Ez már javítható feladat.

1. Szöveg és vezérlők kontrasztja

A normál szöveg minimális kontrasztaránya 4,5:1, a nagy szövegé 3:1. Nagynak legalább 18 pontos, illetve félkövér esetben 14 pontos szöveg számít; ez nem azonos 18 vagy 14 CSS-pixellel. Logókra, inaktív elemekre és bizonyos járulékos szövegekre kivételek vonatkoznak. Mérd meg a gombfeliratot, helyőrzőt és hibaüzenetet is. Forrás: 1.4.3 Kontraszt.

A felület megértéséhez szükséges vezérlőhatároknál és állapotjelzéseknél külön, nem szöveges kontrasztkövetelmény is releváns: 1.4.11. A hiba jelentését ne csak piros szín közölje: 1.4.1. A vizsgálat tehát nem áll meg a törzsszövegnél. Forrás: WCAG 2.2.

2. Billentyűzet és látható fókusz

Egér nélkül járd be az oldalt Tab, Shift+Tab, Enter, Space és a vezérlőhöz illő nyílbillentyűk használatával. A funkciók legyenek billentyűzettel működtethetők; a bemeneti mozgás útvonalát lényegileg igénylő funkcióknál a kritérium kivételt tartalmaz. Forrás: 2.1.1 Billentyűzet.

Nem ragadhatsz bent egy komponensben: 2.1.2. A fókusz legyen látható: 2.4.7. Az ismétlődő blokkok átugrására szolgáló link hasznos megoldás a 2.4.1 teljesítésére, de nem az egyetlen lehetséges technika. Forrás: WCAG 2.2.

A 2.2 új AA-kritériuma szerint a fókuszban lévő komponenst nem takarhatja el teljesen a szerző által létrehozott tartalom. Próbáld ki rögzített fejléc és sütipanel mellett. A teljes láthatóság szigorúbb követelmény; ne keverd össze a minimumszinttel. Forrás: 2.4.11 Fókusz eltakarásának elkerülése.

3. Címsorok, képek és nyelv

A vizuálisan címsornak látszó szöveg programozottan is legyen az. A hierarchia fejezze ki a tartalom kapcsolatát; az „egyetlen H1 kötelező” állítás nem önálló WCAG-követelmény. Egy címsorszint kihagyását a tényleges szerkezettel együtt értékeld. Forrás: 1.3.1 Információ és kapcsolatok.

A tartalmi kép szöveges alternatívája az adott helyen betöltött szerepet írja le. Egy képként megjelenő gombnál a művelet számít, a pusztán dekoratív kép pedig kihagyható a segítő technológiák számára, például üres alt attribútummal. Forrás: 1.1.1 Nem szöveges tartalom.

Ellenőrizd az oldal nyelvének programozott megadását, magyar oldalnál például a lang="hu" értéket: 3.1.1. Az eltérő nyelvű szakaszoknál a 3.1.2 és annak kivételei relevánsak. Forrás: WCAG 2.2.

4. Linkek és űrlaphibák

A link célja a szövegéből vagy programozottan meghatározható környezetéből legyen megállapítható. AA szinten nem kötelező minden linknek a teljes környezet nélkül is egyértelműnek lennie. Szerkesztői gyakorlatként mégis jobb az „Árlista letöltése” a sokszor ismételt „Tovább” helyett. Forrás: 2.4.4 Link célja összefüggésben.

Küldj be üres, majd hibás űrlapot. Az automatikusan észlelt hibát szövegesen azonosítani kell. Javítási példa: a piros keret mellé kerüljön „Adj meg érvényes e-mail-címet”, a fejlesztő pedig kapcsolja a szöveget az érintett mezőhöz. Ellenőrizd képernyőolvasóval is, ne csak a képernyőképen. Forrás: 3.3.1 Hibaazonosítás.

A címkék és utasítások, a javítási javaslatok, valamint a pénzügyi és jogi következményű beküldések hibamegelőzése külön vizsgálatot igényel: 3.3.2–3.3.4. Forrás: WCAG 2.2.

5. Nagyítás és újratördelés külön próbában

Növeld a szöveget 200%-ra, és figyeld, elveszik-e tartalom vagy működés. A szövegnagyítás követelményének vannak kivételei, például a feliratokra és szöveget ábrázoló képekre. Forrás: 1.4.4 Szöveg átméretezése.

Ezután vizsgáld az újratördelést 320 CSS-pixel széles nézetben, vagy az ennek megfelelő asztali nagyításnál. A szokásos, függőlegesen olvasott tartalom ne igényeljen kétirányú görgetést. A jelentésükhöz kétdimenziós elrendezést igénylő részek, például egyes táblázatok és térképek kivételt képezhetnek. A teljes oldal ettől még nem válik kivétellé. Forrás: 1.4.10 Újratördelés.

6. Kattintási célterület és húzás

A 2.5.8 AA minimuma 24 × 24 CSS-pixeles célterület, meghatározott kivételekkel. Kisebb célpont is megfelelhet például megfelelő térközzel; külön kivétel vonatkozik a szövegbe ágyazott linkekre. Ne minden apró ikonra automatikus hibát írj, hanem a tényleges kattintható területet és környezetét mérd. Forrás: 2.5.8 Célterületméret.

Ha sorrendet vagy értéket csak húzással lehet módosítani, biztosíts húzás nélküli, egyetlen mutatóval használható alternatívát, kivéve a kritérium szerinti lényegi eseteket. A billentyűzetes alternatíva önmagában nem teljesíti ezt a külön követelményt. Például a húzható lista mellett legyenek kattintható mozgatógombok. Forrás: 2.5.7 Húzó mozdulatok.

7. Belépés, ismételt adatok és segítség

A hitelesítés ne kényszerítsen támogatás nélkül emlékezeti vagy más kognitív tesztre. A jelszókezelő és beillesztés támogatása fontos ellenőrzési pont. A kritérium alternatívát, segítő mechanizmust, valamint tárgyfelismerési és személyes tartalomhoz kötött kivételeket is megenged; nem általános jelszótilalom. Forrás: 3.3.8 Hozzáférhető hitelesítés.

Ugyanabban a folyamatban a korábban megadott információt automatikusan töltsd ki vagy tedd kiválaszthatóvá. Példa a szállítási cím átvétele számlázási címként. Lényegi szükséglet, biztonság vagy az adat érvénytelenné válása kivételt jelenthet. Forrás: 3.3.7 Ismételt adatbevitel.

Ha több oldalon van segítségnyújtási lehetőség, annak relatív helye legyen következetes, a kritérium feltételei szerint. Ez nem kötelező ügyfélszolgálati chatet jelent. Forrás: 3.2.6 Következetes segítség.

8. Dinamikus állapotüzenetek

A „Kosár frissítve” vagy „Nincs találat” üzenet legyen programozottan felismerhető úgy, hogy a segítő technológia fókuszváltás nélkül közölhesse. Nem kell minden dinamikus tartalmat aria-live régióvá tenni. A státuszhoz role="status", sürgős figyelmeztetéshez indokolt esetben más szerep használható; a felugró párbeszédablak külön fókuszkezelési feladat. Forrás: 4.1.3 Állapotüzenetek.

Próbáld ki képernyőolvasóval a termékváltozat módosítását és az űrlapbeküldést. A javítás akkor jó, ha a szükséges információ hallható, de a rendszer nem olvassa újra indokolatlanul az egész oldalt minden változáskor.

9. Videó, mozgás és villogás

Az előre rögzített szinkronizált média hangjához felirat szükséges, kivéve a szöveg egyértelműen jelölt médiaalternatíváját. A beszéd mellett a megértéshez fontos hangokat is közvetíteni kell. Forrás: 1.2.2 Előre rögzített feliratok. Az élő felirat és az előre rögzített videó hangos leírása külön AA-kritérium: 1.2.4 és 1.2.5. Forrás: WCAG 2.2.

Az automatikusan induló, más tartalom mellett több mint öt másodpercig mozgó vagy görgetett tartalomnál legyen megállítási, szüneteltetési vagy elrejtési lehetőség, a lényegi működés kivételével. Forrás: 2.2.2 Szüneteltetés, megállítás, elrejtés.

A villogás követelménye nem pusztán egy gyakorisági tilalom: másodpercenként legfeljebb három villanás, vagy az általános és vörös villogási küszöb alatti működés szükséges. Bizonytalan esetben szüntesd meg a villogást, ne szemre minősítsd. Forrás: 2.3.1 Villogási küszöb.

A hibajegyzéktől a javításig

Saját munkaszervezési kategóriaként nevezd blokkolónak, ami megakadályozza a feladat befejezését; súlyosnak, ami jelentős akadályt okoz; és egyéb javítandónak a kisebb hibákat. Ez nem WCAG-pontozás, és az utolsó kategória sem jelent megfelelést. Mindegyikhez rendelj felelőst, sikerkritériumot, határidőt és újratesztelési lépést.

A képernyőolvasós próba során ellenőrizd a címsorokat, vezérlőneveket, állapotokat és a teljes folyamatot. Kezdő tesztelő tapasztalata hasznos jelzés, de nem helyettesíti a gyakorlott vizsgálatot. Az automatizált eszközök további hibákat találhatnak, ám a tartalom értelmét és a feladat tényleges elvégezhetőségét kézzel is vizsgálni kell.

A javított hiba csak sikeres újrateszt után zárható le. Őrizd meg a bizonyítékot, és ismételd meg az érintett próbákat új sablon, fizetési modul vagy tartalmi szerkezet bevezetésekor. Így a lista egy egyszeri ellenőrzésből használható minőségbiztosítási gyakorlattá válik.