Mit jelent a WCAG 2.1 AA egy céges weboldalon?

A WCAG (Web Content Accessibility Guidelines) a weboldalak akadálymentességének nemzetközi szabványa. Az „AA” a középső megfelelési szint: ezt várják el a legtöbb jogszabályban és közbeszerzésben, és ez az a szint, amelyet egy céges oldalnak érdemes célul kitűznie. Elsőre hosszú és száraz szabványnak tűnik, de a lényege négy egyszerű elvben összefoglalható.

A négy alapelv

• Észlelhető: mindenki hozzáfér a tartalomhoz. A képeknek van szöveges leírása, a szöveg elég kontrasztos, a videónak van felirata.
• Kezelhető: az oldal egér nélkül, billentyűzettel is használható, és semmi nem tűnik el vagy mozog úgy, hogy a látogató ne tudná megállítani.
• Érthető: a szöveg világos, a menü minden oldalon ugyanott van, az űrlap érthetően jelzi a hibát.
• Robusztus: a kód szabványos, így a képernyőolvasók és más segédeszközök helyesen értelmezik.

Kinek fontos ez?

Nem csak a látássérült látogatóknak. Akadálymentes oldalt használ az is, aki billentyűzettel navigál, aki idősebb és nagyít, akinek remeg a keze, vagy aki napfényben, telefonon olvas. Az akadálymentes oldal jellemzően a keresőknek is érthetőbb, mert a szerkezete tisztább.

Jogi oldalról: 2025. június 28-tól az európai akadálymentesítési irányelv (European Accessibility Act) alapján bizonyos szolgáltatásoknál, például a webáruházaknál, kötelező az akadálymentesség. A mikrovállalkozások szolgáltatásai bizonyos feltételekkel mentesülhetnek. Hogy a te cégedre pontosan mi vonatkozik, azt jogásszal érdemes tisztázni; ez a cikk nem jogi tanács. Szakmai szempontból viszont egyértelmű: az akadálymentes oldal több embert ér el, és kevesebb ügyfelet veszít el.

Hét ellenőrzés, amelyet magad is elvégezhetsz

1. Billentyűzetes navigáció

Kattints a címsorba, majd nyomd a Tab billentyűt újra és újra. Végig tudsz menni a menün, a gombokon és az űrlapon? Le tudod nyitni a menüt, és be tudod zárni Esc-kel? El tudod küldeni az ajánlatkérést egér nélkül?

2. Látható fókusz

Tabolás közben mindig látod, hol jársz? Ha a fókuszjelzés (a keret az aktív elem körül) eltűnik, a billentyűzetes látogató elveszik az oldalon.

3. Kontraszt

A normál szövegnél legalább 4,5:1 kontrasztarány kell a szöveg és a háttér között, a nagy szövegnél és a gombok kereténél 3:1. A halványszürke szöveg fehér alapon a leggyakoribb hiba. Ingyenes kontrasztmérővel (például a WebAIM Contrast Checker nevű eszközzel) pár perc alatt ellenőrizheted.

4. Képek alternatív szövege

A tartalmi képeknek legyen rövid, értelmes leírása („Csapatunk az irodában”), a díszítő képeknek pedig üres, hogy a képernyőolvasó átugorja őket.

5. Címsorok

Oldalanként egy főcím (H1) legyen, alatta logikus H2, H3 szerkezet, szintugrás nélkül. A címsor nem formázási eszköz: ha valami csak nagy betűs, de nem cím, ne legyen címsor.

6. Űrlapmezők felirata

Minden mezőnek legyen látható felirata, ne csak a mezőben megjelenő mintaszöveg. Az a szöveg gépelés közben eltűnik, és a képernyőolvasók sem mindig olvassák fel.

7. Nagyítás 200%-ra

Nagyítsd fel a böngészőt 200%-ra (Ctrl és +). Olvasható marad minden, nem lóg ki semmi, és nem kell vízszintesen görgetni?

Akadálymentességi nyilatkozat

Érdemes az oldalon közzétenni egy rövid akadálymentességi nyilatkozatot: milyen szintet céloztál meg, hol tart az oldal, mik az ismert korlátok, és hová írhat a látogató, ha akadályba ütközik. Ez átláthatóságot mutat, és a megfelelés része is lehet.

Hogyan csinálom én?

Az általam fejlesztett témákban az akadálymentesség a komponensekbe van építve: a gombok valódi gombok, a menük billentyűzettel kezelhetők, a fókusz mindig látszik, a színeket kontrasztra ellenőrzöm, és minden oldalt automatikus akadálymentességi teszttel is átnézek. Így nem oldalanként kell kiharcolni, hanem alapból megvan.

Kíváncsi vagy, hol tart a mostani oldalad? Kérj ingyenes állapotfelmérést, vagy nézd meg, mit tartalmaz egy új, akadálymentes weboldal.