# Akadálymentesség

> Milyen akadálymentességi megoldásokat tartalmaz a WooCommerce, és mire kell figyelned a sablonnal és a bővítményekkel.

A WooCommerce a WordPressre épül, amely szigorú akadálymentességi kódolási szabványokat követ. A bővítmény ezeket átveszi, és saját megoldásokkal egészíti ki, hogy működjön képernyőolvasóval és csak billentyűzettel is.

Sok országban jogszabály írja elő, hogy a webáruházak akadálymentesek legyenek. Ilyen például az Egyesült Államok ADA törvénye és az Európai Unió európai akadálymentességi irányelve (EAA), amely az összes uniós tagállamra vonatkozik. Más országoknak is lehetnek saját szabályai, ezért nézd meg, mi vonatkozik rád.

## Billentyűzetes használat

Akadálymentességre kész sablonnal a WooCommerce teljes billentyűzetes navigációt támogat:

- logikus tabulátorsorrend a pénztárban, a kosárban és az űrlapokon,
- jól látható fókuszjelzés a kiválasztott elemen,
- minden gomb, legördülő lista és kapcsoló egér nélkül is használható,
- a gombokat a szóköz és az Enter, a hivatkozásokat az Enter működteti, a párbeszédablakok megnyitva megtartják a billentyűzetfókuszt.

A sablon stílusai felülírhatják a WooCommerce beállításait, ezért mindig ellenőrizd, hogy a használt sablon is támogatja-e az akadálymentességet.

## Képernyőolvasók

A WooCommerce szemantikus HTML-t és ARIA-szerepköröket használ, hogy a képernyőolvasót használók eligazodjanak az oldalon:

- az űrlapok, gombok és kezelőelemek egyértelműen fel vannak címkézve,
- a dinamikus változásokat (például a kosár összegének frissülését vagy a hibaüzeneteket) ARIA élő régiók jelentik be,
- az oldalak felépítése címsorokkal, listákkal és tájékozódási pontokkal követi a tartalom hierarchiáját,
- az elemek a megfelelő szerepkörrel rendelkeznek: a gomb gombként, a hivatkozás hivatkozásként szólal meg, az űrlapmezők pedig címkével és állapottal (például „lenyomva” vagy „kibontva”) rendelkeznek,
- a bővítmény által vezérelt elrendezési területek szerepkört kapnak (például fő tartalom, navigáció, régió), egyedi névvel,
- a lenyíló menük és párbeszédablakok ARIA-állapotokat használnak.

## Űrlapok és hibaüzenetek

Az űrlapokat, főleg a pénztárat, hozzáférhetőségi szempontból tervezték:

- minden beviteli mezőhöz tartozik leíró címke,
- a kötelező mezők jól láthatóan jelöltek, a hibák vizuálisan és programozottan is jelezve vannak (ellenőrizd, hogy a sablonod ezt is támogatja-e),
- az útmutatások és a mezőcsoportok képernyőolvasóbarátak.

A hibaüzenetek a vonatkozó mező közelében jelennek meg, ARIA-attribútumok kötik őket a beviteli mezőhöz, a valós idejű ellenőrzés segít kijavítani a hibát az űrlap újraküldése nélkül, a sikeres és hibás eredményeket pedig a képernyőolvasók is bemondják.

A pénztárat módosító sablonok és harmadik féltől származó bővítmények elronthatják az akadálymentességet. Ha a pénztáradat módosították, nézd meg, hogy a látható címkék, a kötelezőséget jelző jelölések és a hibaüzenetek még megvannak-e.

## Blokkok

A terméklistákban, a kosárban és a pénztárban használt WooCommerce-blokkok akadálymentességi szempontok szerint készültek: HTML5 szemantikus elemeket használnak, teljesen használhatók billentyűzettel és képernyőolvasóval, és igazodnak a WordPress akadálymentességi irányelveihez. Egyes régebbi, elavult blokkok korlátozottan akadálymentesek lehetnek, ezért új blokkok megjelenésekor érdemes áttérni rájuk, és kerüld az elavult blokkokat.

## Egyéb

- **Nagyítás:** a WooCommerce 400%-os böngészőnagyításig kompatibilis: a tartalom olvasható és használható marad.
- **Mozgásérzékenység:** az animációk, ahol alkalmazható, követik az operációs rendszer csökkentett mozgásra vonatkozó beállítását.
- **Akadálymentes alapértékek:** a gyári beállítások a WCAG AA szintű színkontrasztot és használhatósági követelményeket célozzák.
- **Képernyőolvasós tesztelés:** a WooCommerce-t olyan képernyőolvasókkal tesztelik, mint a VoiceOver (macOS), a JAWS és az NVDA (Windows).

Ha akadálymentességi hibát találsz, vagy javaslatod van, a WooCommerce támogatásán vagy az `accessibility@woocommerce.com` címen jelezheted.