Akadálymentes webáruház

A WooCommerce alapja akadálymentes, de a bolt végső használhatóságát te alakítod: a tartalommal, a témával és a kiegészítőkkel. Sok országban törvény is előírja, hogy a webáruházak megfeleljenek az akadálymentességi szabványoknak (például az amerikai ADA vagy az európai akadálymentesítési irányelv). A szabályozások többnyire a WCAG 2.2 AA szintjére hivatkoznak, ami mérhető követelményeket ad.

Képek alternatív szövege

• Adj leíró alternatív szöveget a termékképekhez és minden más képhez. A képernyőolvasót használó vásárló így megérti, mit ábrázol a kép.
• Üresen csak a puszta díszítőelemek alternatív szövegét hagyd, hogy a képernyőolvasó átugorhassa őket.
• A termékképek és a hivatkozásként használt képek sosem díszítők, ezeknél mindig kell szöveg.

Űrlapok

Ha egyéni űrlapot adsz a bolthoz (például egy kiegészítővel), ügyelj ezekre:

• Minden mezőnek legyen látható és a programok számára is értelmezhető címkéje.
• Ne csak a mezőben látható helyőrző szövegre hagyatkozz, mert az eltűnik, amint a vásárló gépelni kezd.
• A címke írja le egyértelműen a mező célját, a kapcsolódó útmutatás pedig legyen a mező közelében.
• A hibaüzenet kapcsolódjon a megfelelő mezőhöz ARIA-attribútumokkal, hogy a képernyőolvasó felolvassa.

A téma

A téma nagyban befolyásolja az akadálymentességet. Válassz olyan témát, amelyet a WordPress tárolójában az „accessibility-ready” címke jelöl. Az ilyen témák átmentek a WordPress akadálymentességi felülvizsgálatán, amely a billentyűzetes kezelést, a színkontrasztot és más WCAG-szempontokat ellenőrzi.

Ha WordPress.org-on kívüli témát választasz, kérd el a fejlesztőtől az akadálymentességi megfelelőségi jelentést vagy más dokumentációt.

Mozgás és animáció

• Ne használj automatikusan lejátszódó csúszkát, videót vagy animációt, ha a látogató nem tudja megállítani vagy kikapcsolni. Ezek gondot okozhatnak a vesztibuláris vagy kognitív nehézséggel élőknek.
• Az animációknak figyelembe kell venniük az operációs rendszer „Mozgás csökkentése” beállítását. Tesztelésnél kapcsold be a gépeden, és nézd meg, hogy a nem lényeges mozgás eltűnik-e az oldalról:
  • Windows 11: Beállítások → Kisegítő lehetőségek → Vizuális effektusok → Animációs effektusok.
  • macOS: Rendszerbeállítások → Kisegítő lehetőségek → Megjelenítés → Mozgás csökkentése.

Tesztelés

1. Járd végig a boltot csak billentyűzettel: a Tab billentyűvel lépkedj a gombokon, hivatkozásokon és mezőkön, az Enterrel indítsd őket. Egér nélkül is menjen a termékkeresés, a kosárba tétel és a teljes pénztár.
2. Használj képernyőolvasót vagy böngészőbővítményt (például WAVE, axe DevTools), esetleg WordPress-bővítményt (például az Accessibility Checker), hogy megtaláld a hibákat.
3. Nagyíts 200%-ra, majd 400%-ra: minden tartalomnak olvashatónak kell maradnia, és nem szabad elemeknek egymásra csúszniuk vagy eltűnniük.
4. Próbáld ki az ingyenes képernyőolvasókkal (NVDA Windowson, VoiceOver Macen), hogy lásd, hogyan tapasztalja a boltodat egy látássérült vásárló.

Gyakori buktatók

• Külső bővítmények: nem mind egyformán akadálymentes. Bevezetés előtt nézd meg a leírásukat, vagy próbáld ki őket.
• Egyedi blokkok: ha használsz vagy készíttetsz ilyet, kövesse a szemantikus HTML-t és az akadálymentességi jó gyakorlatokat.
• Egyedi kód (JS/CSS): akaratlanul ronthatja az akadálymentességet. Minden módosítás után teszteld újra az érintett folyamatokat.
• Színbeállítások: ha a kinézetnél színeket választhatsz, ellenőrizd a kontrasztot online kontrasztvizsgálóval. Például a gomb szövege legyen jól olvasható a gomb hátterén.

Hasznos eszközök

• WordPress Accessibility Handbook
• WAVE akadálymentességi vizsgáló
• axe DevTools böngészőbővítmény
• NVDA képernyőolvasó
• VoiceOver (macOS és iOS)
• Accessibility Checker bővítmény WordPresshez

Ha akadálymentességi hibát találsz a WooCommerce-ben, vagy javaslatod van, jelezd a WooCommerce ügyfélszolgálatának.