Mi a webes akadálymentesítés? WCAG és inkluzív dizájn

A webes akadálymentesség azt jelenti, hogy a weboldalakat és appokat úgy építik, hogy a fogyatékkal élő emberek is használhassák őket — akár vakok, akik képernyőolvasót használnak, akik nem tudnak egérrel dolgozni, gyengén látók vagy színvakok, siketek, vagy kognitív vagy tanulási nehézséggel élők. A gyakorlatban olyan dolgokról van szó, mint a képek szöveges alternatívái, a megfelelő színkontraszt, a helyesen felcímkézett űrlapok, és hogy minden működjön pusztán billentyűzettel. Ennek nemzetközi szabványa a WCAG, a W3C Webes Tartalom Akadálymentességi Irányelvei.

Az akadálymentességet gyakran a11y-ként rövidítik: „a”, utána 11 betű, majd „y”.

Miért fontos az akadálymentesség, ha AI-val építesz

Az AI-építők jók abban, hogy olyan appokat készítsenek, amelyek jól néznek ki. Az akadálymentesség többnyire arról szól, amit egy képernyőkép nem mutat: hogy egy gomb valóban gomb-e, hogy egy beviteli mezőnek van-e olyan címkéje, amelyet a képernyőolvasó be tud mondani, és hogy eléred-e a menüt a Tab billentyűvel.

Ezért érdemes rákérdezni:

• Könnyű elnézni. Egy egyedi stílusú legördülő menü tökéletesen nézhet ki, és egérrel nem használható. Nem veszed észre, hacsak nem tesztelsz rá.
• Korán olcsóbb jól csinálni. Ha már az első promptban akadálymentes komponenseket kérsz, szinte semmibe nem kerül. Egy kész appot utólag javítani azt jelenti, hogy minden képernyőhöz hozzá kell nyúlni.
• Mindenkinek segít. A feliratok zajos helyen segítenek, a jó kontraszt a napsütésben telefonozóknak, az egyértelmű címkék pedig mindenkinek gyorsabbá teszik az űrlap kitöltését.
• Átfedésben van a SEO-val. A megfelelő címsorok, a leíró linkek és az alt szöveg a keresőmotoroknak is segítenek megérteni az oldalaidat — lásd: SEO AI-val épített weboldalakhoz.
• Előírás lehet. Attól függően, hol működsz és kinek szolgáltatsz, az akadálymentesség jogi kötelezettség lehet.

Mindennapi hasonlat

Gondolj egy épület bejáratára.

A lépcső sok embernek megfelel. A rámpa a kerekesszékeseknek működik — és a babakocsis szülőknek, a bevásárlókocsival dolgozó futároknak és a bőröndös utazóknak is. Az automata ajtók, az egyértelmű táblák, a liftgombokon lévő Braille-írás és a jó világítás mind egy-egy akadályt szüntetnek meg valakinek.

A webes akadálymentesség ugyanez az elv a digitális térben: az appod rámpái, táblái és kapaszkodói. És akárcsak egy épületnél, sokkal könnyebb a rámpát a tervekbe belevenni, mint miután a beton megszilárdult.

A WCAG röviden

A WCAG-ot a W3C Webes Akadálymentesség Kezdeményezése (WAI) adja ki. A jelenlegi verzió a WCAG 2.2, amelyet először 2023 októberében tettek közzé. Visszafelé kompatibilis: ami megfelel a WCAG 2.2-nek, az megfelel a 2.1-nek és a 2.0-nak is, a W3C pedig a legújabb verzió használatát javasolja. A WCAG 2.2 nemzetközi szabványként is jóvá van hagyva, ISO/IEC 40500:2025 néven. A jóval más felépítésű WCAG 3 fejlesztés alatt áll, korai tervezetként, nem befejezett szabványként.

A WCAG négy alapelv köré szerveződik, amelyeket gyakran POUR-ként jegyeznek meg:

Minden irányelvnek vannak ellenőrizhető sikerkritériumai három szinten:

• A szint — a minimum. Ezek megszegése egyes embereket teljesen kizár.
• AA szint — a szokásos célszint, és ez az a szint, amelyre a legtöbb törvény és szabályzat hivatkozik.
• AAA szint — a legmagasabb szint. Helyenként érdemes célul tűzni, de a W3C nem javasolja egész oldalakra kötelezővé tenni, mert egyes tartalmak nem tudják teljesíteni.

A WCAG 2.2 kilenc új sikerkritériumot adott a 2.1-hez, köztük az AA szintű Célméret (minimum) kritériumot — a kattintható célok általában legalább 24 × 24 CSS-pixel méretűek legyenek, kivételekkel —, és az Akadálymentes hitelesítés (minimum) kritériumot, amely korlátozza a memórián vagy rejtvényen alapuló bejelentkezési lépéseket, például azt, hogy a jelszót úgy kell újragépelni, hogy beillesztni nem lehet. Eltávolította a régi „Feldolgozás” (Parsing) kritériumot is, mert elavulttá vált.

Példa: egy regisztrációs űrlap

Íme egy regisztrációs űrlap, amelyet egy AI készíthet, és amit egy akadálymentességi ellenőrzés talál benne:

Ezek a javítások közül egyik sem változtatja sokat az űrlap kinézetén. Mindegyik azon változtat, hogy egyesek egyáltalán használni tudják-e.

Fontos fogalmak

Gyakori tévhitek

• „Az akadálymentesség csak a vakoknak fontos.” Lefedi a látási, mozgási, hallási, beszédbeli és kognitív fogyatékosságokat, valamint az átmeneti helyzeteket, például a eltört kart.
• „Az akadálymentes oldalak unalmasak.” Az akadálymentesség néhány dologra szabályt ad — kontraszt, fókuszstílus, szövegméret —, de a jól kinéző, akadálymentes oldalak a szokásosak, nem a kivételek.
• „Az automatikus ellenőrző 100-at mutat, tehát készen vagyunk.” Az automatikus eszközök csak egyes problémákat fognak meg. Hogy az alt szöveg valóban értelmes-e, vagy hogy egy folyamat képernyőolvasóval logikus-e, azt embernek kell ellenőriznie.
• „Egy overlay widget megfelelővé tesz minket.” A rárakott eszköztárak nem javítják a hiányzó címkéket vagy a törött billentyűzetes hozzáférést a kódodban. A forrást javítsd.
• „Nincsenek fogyatékkal élő felhasználóink.” Lehet, hogy egyszerűen nem tudsz róluk. Sok fogyatékosság nem látszik, és akik akadályba ütköznek, általában egyszerűen elmennek.

Mit kérj az AI-építődtől

• „Úgy építsd meg, hogy megfeleljen a WCAG 2.2 AA szintjének.”
• „Használj szemantikus HTML-t: valódi gombokat, linkeket, sorrendben lévő címsorokat, és címkét minden űrlapmezőhöz.”
• „Győződj meg róla, hogy minden interaktív elem csak billentyűzettel működik, és látható fókuszstílusa van.”
• „Ellenőrizd az összes szöveg- és ikonszínt kontraszt szempontjából — 4,5:1 a normál szövegre, 3:1 a nagy szövegre és ikonokra.”
• „Adj értelmes alt szöveget az informatív képekhez, és üres alt szöveget a dekoratívakhoz.”
• „Az űrlaphibákat szövegként jelenítsd meg, a mezőhöz kötve, ne csak színnel.”
• „Tartsd tiszteletben a felhasználó csökkentett mozgás beállítását az animációknál.”
• „Futtass automatikus akadálymentességi ellenőrzést, és sorold fel, mit nem tud tesztelni, hogy azt kézzel ellenőrizhessem.”

Ezután teszteld magad: tedd félre az egeret, és próbáld meg a fő folyamatot csak Tab, Shift+Tab, Enter és szóköz használatával végigvinni. Próbáld ki a telefonod beépített képernyőolvasóját a főoldalon. Nagyítsd a böngészőt 200%-ra, és nézd meg, nem törik-e el valami.

Akadálymentesség a Mythexben

A Mythexnek nincs dedikált akadálymentességi ellenőrzője, ezért kezeld az akadálymentességet a promptjaid és a teszteléseid részeként. Kérd a WCAG 2.2 AA szintet már az első promptban, nézd meg az eredményt az Előnézetben billentyűzettel, és a publikálás előtt a /test paranccsal kattintgasson végig az ügynök a fő folyamataidon — lásd: App Testing. A SEO recept is kér szemantikus címsorokat és értelmes alt szöveget, ami mindkét célt szolgálja.

Gyakorlati ellenőrző listáért lásd: hogyan tedd akadálymentessé a weboldalad. A tervezéshez olvasd el a hogyan tervezz jól kinéző appot AI-val útmutatót, indulás előtt pedig a hogyan teszteld az appodat indulás előtt oldalt. A W3C saját WCAG-áttekintése a mérvadó forrás.

Kérdések