# Akadálymentes webáruház

> Tippek ahhoz, hogy a boltod tartalma, kinézete és egyedi beállításai mindenkinek használhatók legyenek.

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.