WCAG — mi ez, Web Content Accessibility Guidelines és AA szintek

Mi az a WCAG?

WCAG (Web Content Accessibility Guidelines) — ajánlások gyűjteménye a webes tartalom akadálymentesítésének biztosítására a fogyatékkal élő emberek számára. A szabványt a W3C Web Accessibility Initiative (WAI) fejleszti 1999 óta. A WCAG lefedi a vakokat és gyengénlátókat, siketeket és nagyothallókat, a mozgás-, beszéd- és kognitív korlátozásokkal élő embereket, valamint az idősebb felhasználókat életkorral összefüggő változásokkal.

Az első verzió WCAG 1.0 1999-ben jelent meg, és 14 irányadó elvet tartalmazott. A WCAG 2.0 (2008) technológiailag semlegessé vált, alkalmazható HTML-re, PDF-re, multimédiára és mobilalkalmazásokra. A WCAG 2.1 (2018) kritériumokat adott hozzá mobileszközökhöz és érintőképernyős bevitelhez. A WCAG 2.2 (2023) — a jelenlegi verzió új kritériumokkal az animációhoz és a fókuszhoz. A WCAG nem törvény, de sok ország hivatkozik rá jogszabályaiban.

GOST R 52872-2019 Oroszországban, European Accessibility Act az EU-ban és Section 508 az USA-ban — mindegyik WCAG AA megfelelést követel meg. Vállalati és kormányzati weboldalak számára a WCAG AA kötelező szabvány, amelynek be nem tartása perekhez vezet. Az UsableNet (2024) adatai szerint az USA-ban több mint 12 000 pert indítottak weboldalak akadálymentesítésének hiánya miatt.

WCAG verziók: összehasonlítás

A meg nem felelés jogi következményei

A WCAG be nem tartása súlyos kockázatokkal jár. 2025-ben hatályba lépett az European Accessibility Act (EAA), amely WCAG 2.1 AA-t követel meg az összes nyilvános weboldalra és mobilalkalmazásra az EU-ban. A bírságok elérhetik a vállalat éves forgalmának 5%-át. Az USA-ban a perek átlagos rendezési összege $25 000–$50 000. Az akadálymentesítési auditot a fejlesztés minden szakaszában el kell végezni, nem csak a kiadás előtt.

A WCAG négy elve: POUR

POUR — a WCAG négy elvének mozaikszava: Perceivable (észlelhető), Operable (működtethető), Understandable (érthető), Robust (robusztus). Minden elv iránymutatásokat tartalmaz, az iránymutatások pedig tesztelhető sikerkritériumokat. Összesen a WCAG 2.2 13 iránymutatást és 86 sikerkritériumot tartalmaz. Minden kritérium A, AA vagy AAA szintű.

Perceivable — Észlelhető

A Perceivable elv megköveteli, hogy a tartalom olyan formában jelenjen meg, amelyet a felhasználó érzékelni tud. Iránymutatások: 1.1 Text Alternatives (szöveges alternatívák), 1.2 Time-based Media (feliratok, átiratok), 1.3 Adaptable (tartalom formátumváltozásnál veszteség nélkül), 1.4 Distinguishable (kontraszt 4.5:1, szín, hang). Kulcskritérium 1.4.3 Contrast Minimum (AA) — a leggyakrabban megsértett: a WebAIM adatai szerint az oldalak 86%-a nem felel meg neki.

Operable — Működtethető

A Operable elv megköveteli a felület működtethetőségét. Iránymutatások: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. A 2.1.1 Keyboard (A) kritérium — az egyik legkritikusabb: minden funkciónak elérhetőnek kell lennie billentyűzetről egér nélkül. A csak kattintással záródó modális ablakok, billentyűzet-navigáció nélküli legördülő menük — tipikus jogsértések.

Understandable — Érthető

A Understandable elv megköveteli a tartalom és a felület érthetőségét. Iránymutatások: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Különösen fontos a 3.3.4 Error Prevention kritérium pénzügyi és orvosi alkalmazásoknál: a beviteli hibák súlyos következményeinek megelőzése. A 3.2.6 Consistent Help kritérium (új a WCAG 2.2-ben) megköveteli, hogy a súgógombok ugyanazokon a helyeken legyenek.

Robust — Robusztus

A Robust elv megköveteli a kompatibilitást a segítő technológiákkal. A 4.1 Compatible iránymutatás a kulcskritériummal 4.1.2 Name, Role, Value (A): minden UI-komponensnek programozottan meghatározható névvel, szerepkörrel és állapottal kell rendelkeznie. ARIA attribútumok (role, aria-label, aria-expanded) — az alapvető eszköz. Nélkülük a képernyőolvasók nem tudják meghatározni, hogy egy elem gomb, hivatkozás vagy fül.

WCAG elvek táblázata

WCAG megfelelőségi szintek: A, AA, AAA

WCAG három szintet határoz meg: A (minimális), AA (szabványos) és AAA (maximális). Az A szint — kötelező minimum: nélküle a tartalom nem hozzáférhető a felhasználók egyes kategóriái számára. Az AA eltávolítja a fő akadálymentesítési akadályokat. Az AAA — a legmagasabb szabvány, de nem minden tartalomra érhető el (például egyes jelnyelvek vagy audioátiratok nem mindig megvalósíthatók).

A szint (30 kritérium): text alternatives, billentyűzetes működtetés, elegendő idő, nincs 3 Hz feletti villogás. AA szint (+24 kritérium): contrast ratio 4.5:1, feliratok videóhoz, szöveg méretezése 200%-ig, tiszta billentyűzetfókusz. AAA szint (+32 kritérium): contrast ratio 7:1, jelnyelv, animáció kikapcsolása (2.3.3), audioátirat. Kormányzati weboldalakhoz az AA elegendő.

WCAG audit folyamata

Az akadálymentesítési audit a WCAG szerint magában foglalja: automatikus tesztelés (axe DevTools, WAVE, Lighthouse — a hibák 30–40%-át találja meg), kézi tesztelés billentyűzettel és képernyőolvasókkal (VoiceOver, TalkBack, NVDA), szakértői audit összetett kritériumokhoz és felhasználói tesztelés fogyatékkal élő emberekkel. Az auditjelentésnek tartalmaznia kell a megfelelőségi szintet és a meg nem felelések listáját minden kritériumhoz.

Újdonságok a WCAG 2.2-ben

WCAG 2.2 9 új kritériumot adott hozzá. A legfontosabbak: 2.4.11 Focus Appearance (AA) — fókuszjelző >= 2px 3:1 kontraszttal, 2.5.8 Target Size Minimum (AA) — érintési cél minimum 24x24 pixel, 3.3.7 Accessible Authentication (AA) — hitelesítés CAPTCHA nélkül. A 2.3.3 Animation from Interactions (AAA) kritérium — kikapcsolható animáció vagy legfeljebb 5 másodperc.

Focus Appearance — a legfontosabb változás. Korábban az outline: none csere nélkül jogsértés volt, de nem voltak egyértelmű követelmények. A WCAG 2.2 meghatározta: vastagság >= 2px, kontraszt 3:1 a háttérrel, a jelző felülete legalább akkora, mint az elem felülete. Egyéni border-radius gombokhoz használjon box-shadow-t outline helyett.

Focus Appearance CSS-ben

/* WCAG 2.2 Focus Appearance (2.4.11 AA) */
:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

.button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px #FFFFFF,
        0 0 0 6px #0066CC;
}

@media (prefers-color-scheme: dark) {
    :focus-visible { outline-color: #66B2FF; }
}

@media (prefers-contrast: more) {
    :focus-visible { outline: 4px solid #000; outline-offset: 3px; }
}

A :focus-visible stílusozása biztosítja a Focus Appearance kritériumnak való megfelelést. A box-shadow alternatíva border-radius-szal rendelkező elemekhez alkalmas. A sötét téma és a High Contrast hozzáigazítja a fókusz színeit.

Accessible Authentication

A 3.3.7 Accessible Authentication (AA) kritérium — az egyik legvitatottabb újítás. CAPTCHA objektumfelismeréssel, rejtvények, csúszkák húzása — most jogsértés, ha nincs alternatíva. Megengedett módszerek: OTP e-mailben/SMS-ben, biometria (Face ID, Touch ID), QR-kódok, Magic link. Ez nemcsak a kognitív zavarokkal élők, hanem az összes felhasználó életét megkönnyíti.

WCAG mobilalkalmazásokhoz

WCAG alkalmazható natív iOS és Android alkalmazásokra. A négy POUR elv teljes mértékben lefedi a mobil felületeket. Specifikus kritériumok: 2.5.1 Pointer Gestures (gesztusok nagy pontosság nélkül), 2.5.2 Pointer Cancellation (véletlen érintés megszakítása), 2.5.3 Label in Name (gomb szövege megegyezik az accessibility címkével). iOS-hez UIKit/UIAccessibility, Androidhoz AccessibilityService és ContentDescription használatos.

A mobilalkalmazásokban leggyakrabban megsértettek: 1.1.1 Non-text Content — ikonok contentDescription nélkül, 2.4.3 Focus Order — helytelen navigációs sorrend, 2.5.8 Target Size — 24x24dp-nél kisebb gombok, 1.4.3 Contrast — szöveg háttérképeken. iOS Accessibility Inspector-t biztosít Xcode-ban, Android Accessibility Scanner-t automatikus auditáláshoz.

WCAG-konform SwiftUI kód

import SwiftUI

struct AccessibleButton: View {
    let action: () -> Void
    let title: String
    let icon: String

    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: icon)
                Text(title)
            }
            .padding(16)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(12)
            .frame(minWidth: 48, minHeight: 48)
        }
        .accessibilityLabel(title)
        .accessibilityHint("Kattintson a művelethez")
        .accessibilityAddTraits(.isButton)
    }
}

struct AccessibleForm: View {
    @State private var email = ""

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("Email")
                TextField("Adja meg az emailt", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("Email beviteli mező")
                    .accessibilityHint("Adja meg az email címet")
            }
            AccessibleButton(
                action: { },
                title: "Küldés",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

Az accessibilityLabel, accessibilityHint és minWidth/minHeight >= 48pt tulajdonságokkal rendelkező SwiftUI komponensek biztosítják a WCAG 2.5.8 (Target Size) és 2.5.3 (Label in Name) megfelelést. Használja az Xcode Accessibility Inspector-t a VoiceOver fókusz, navigációs sorrend és touch target méretek ellenőrzéséhez. Hasonló követelmények vonatkoznak a Jetpack Compose-ra a Modifier.semantics segítségével.