+36 70/362-9115
A négy WCAG alapelv gyakorlatban
Utoljára frissítve: 2025. augusztus
A négy WCAG alapelv gyakorlatban: Érzékelhető, Működtethető, Érthető, Robosztus
Manapság egy modern, keresőbarát weboldal nemcsak szép és gyors kell legyen, hanem mindenki számára használható is. Ez nem csak etikai kérdés, hanem üzleti előny is: jobb felhasználói élmény = több látogató, nagyobb esély a vásárlásra vagy kapcsolatfelvételre.
Ebben segítenek a WCAG alapelvek, melyek a webes akadálymentesítés nemzetközi szabványai. Négy kulcsszóból állnak össze:
Érzékelhető – Működtethető – Érthető – Robosztus, vagy angolul: POUR (Perceivable, Operable, Understandable, Robust).
Most bemutatom neked ezt a négy elvet közérthetően, sallangmentesen, vállalkozói szemmel.
1. Érzékelhető – amit mindenki "láthat", hallhat, olvashat
Az oldalad legyen érzékelhető mindenki számára, akkor is, ha valaki nem lát, nem hall, vagy nehezebben értelmez képeket, színeket.
Mit jelent ez a gyakorlatban?
- Képekhez ALT szöveg – leírás arról, mit ábrázol a kép.
- Videóhoz felirat – legalább magyar nyelvű, de ha van angol is, az plusz pont.
- Megfelelő színkontraszt – a szöveg jól olvasható legyen háttéren, még színtévesztőknek is.
Miért jó ez neked?
Mert a Google is jobban megérti a képeidet, a videóid pedig több emberhez jutnak el. Ráadásul segíthetsz vele vak vagy gyengénlátó látogatóknak is – és ez bizony konverziót is hozhat.
2. Működtethető – amit nem csak egérrel lehet használni
Nem mindenki használ egeret vagy érintőképernyőt. Gondolj a billentyűzettel navigáló felhasználókra, idősekre vagy akár mobilos látogatókra.
Így lehet működtethető a weboldalad:
- Gombok, linkek jól elérhetők legyenek Tab-bal is
- Nagy, könnyen megnyomható érintési felületek (pl. min. 44px x 44px méretű gombok)
- A fókusz (az éppen aktív elem) mindig jól látszódjon, ne legyen takarásban
Miért fontos ez?
Az emberek kb. 15–20%-a valamilyen szinten akadállyal él, és sokan csak billentyűzettel vagy képernyőolvasóval tudnak navigálni. Emellett ez segít mobilon is, ahol sok a félrekattintás, ha túl kicsik a gombok.
3. Érthető – világos, egyszerű, kiszámítható
Nem mindenki informatikus. Egy jó weboldal érthető, átlátható és kiszámítható. A felhasználónak tudnia kell, mire számíthat.
Mire figyelj?
- Egyszerű szöveg – ne szakmázd túl, ne legyen bonyolult.
- Hibajelzések egyértelműek legyenek (pl. „Kérlek, add meg az e-mail címed”)
- A dolgok működése legyen kiszámítható – ha valahol segítséget adsz (pl. űrlapnál), az mindig ugyanott legyen.
Extra tipp:
Ha valaki már egyszer megadta az adatait (pl. lakcím), ne kelljen újra beírnia. Ez a Redundant Entry nevű szabály a WCAG 2.2-ben – és egyszerűen: ne idegesítsük az embereket feleslegesen.
4. Robosztus – működjön ma, holnap, minden eszközön
Ez talán a legtechnikásabb rész, de ne ijedj meg: robosztus akkor az oldalad, ha minden böngészőn, minden eszközön, minden segédeszközzel működik.
Például:
- Használj értelmes HTML-t:
<button>gomb helyett ne<div>-et használsz kattinthatónak. - Ha ARIA-hoz nyúlsz (pl.
role="dialog"), használd jól – ne csak "dísznek". - Tesztelj képernyőolvasóval is – pl. NVDA, ha PC-n vagy.
Miért számít ez?
A Google is szereti az átlátható, jól felépített HTML-t. Ez segíti a keresőrobotokat, hogy jobban megértsék az oldalad – tehát SEO szempontból is előnyös.
Összefoglalás
A WCAG alapelvek nem bonyolult szabályrendszerek – inkább egy józan észre épülő útmutató, hogy weboldalad mindenki számára használható legyen.
| Alapelv | Mit jelent neked? |
|---|---|
| Érzékelhető | Képhez ALT, jó kontraszt, videóhoz felirat |
| Működtethető | Gomb elérhető legyen Tab-bal, jól látszódjon a fókusz |
| Érthető | Világos, egyszerű szöveg, jó hibakezelés |
| Robosztus | Jól kódolt HTML, működik olvasóval is |
Ha ezekre figyelsz, nemcsak WCAG 2.2 kompatibilis leszel, hanem keresőbarát, mobilbarát, és felhasználóbarát is.
Segítség kell?
Ha szeretnél egy gyors felmérést a saját weboldalad akadálymentességéről, vagy most indulsz, és szeretnél már az elején jót csinálni, segítek szívesen!
🔗 Főoldal – webd.hu
📬 Lépj kapcsolatba velem »
