WCAG — co to je, Web Content Accessibility Guidelines a úrovně AA

Co je WCAG?

WCAG (Web Content Accessibility Guidelines) — soubor doporučení pro zajištění přístupnosti webového obsahu pro osoby se zdravotním postižením. Standard je vyvíjen iniciativou W3C Web Accessibility Initiative (WAI) od roku 1999. WCAG pokrývá nevidomé a slabozraké, hluché a nedoslýchavé, osoby s omezením pohybu, řeči a kognitivními poruchami, stejně jako starší uživatele s věkovými změnami.

První verze WCAG 1.0 byla vydána v roce 1999 a obsahovala 14 hlavních zásad. WCAG 2.0 (2008) se stala technologicky neutrální, použitelná pro HTML, PDF, multimédia a mobilní aplikace. WCAG 2.1 (2018) přidala kritéria pro mobilní zařízení a dotykový vstup. WCAG 2.2 (2023) — aktuální verze s novými kritérii pro animace a fokus. WCAG není zákon, ale mnoho zemí na něj odkazuje ve své legislativě.

GOST R 52872-2019 v Rusku, European Accessibility Act v EU a Section 508 v USA — všechny vyžadují shodu s WCAG AA. Pro firemní a vládní weby je WCAG AA povinným standardem, jehož nedodržení vede k soudním sporům. Podle údajů UsableNet (2024) bylo v USA podáno více než 12 000 žalob o nepřístupnosti webových stránek.

Verze WCAG: srovnání

Právní důsledky nesouladu

Nedodržování WCAG s sebou nese vážná rizika. V roce 2025 vstoupil v platnost European Accessibility Act (EAA), který vyžaduje WCAG 2.1 AA pro všechny veřejné webové stránky a mobilní aplikace v EU. Pokuty dosahují až 5% ročního obratu společnosti. Průměrná částka urovnání sporů v USA je 25 000–50 000 USD. Audit přístupnosti by měl být prováděn v každé fázi vývoje, nejen před vydáním.

Čtyři principy WCAG: POUR

POUR — akronym čtyř principů WCAG: Perceivable (vnímatelnost), Operable (ovladatelnost), Understandable (srozumitelnost), Robust (robustnost). Každý princip obsahuje pokyny a pokyny obsahují testovatelná kritéria úspěchu. Celkem WCAG 2.2 obsahuje 13 pokynů a 86 kritérií úspěchu. Každé kritérium má úroveň A, AA nebo AAA.

Perceivable — Vnímatelnost

Princip Perceivable vyžaduje, aby obsah byl prezentován ve formě, kterou uživatel může vnímat. Pokyny: 1.1 Text Alternatives (textové alternativy), 1.2 Time-based Media (titulky, přepisy), 1.3 Adaptable (obsah beze ztrát při změně formátu), 1.4 Distinguishable (kontrast 4.5:1, barva, zvuk). Klíčové kritérium 1.4.3 Contrast Minimum (AA) — nejčastěji porušované: 86% stránek mu nevyhovuje podle údajů WebAIM.

Operable — Ovladatelnost

Princip Operable vyžaduje ovladatelnost rozhraní. Pokyny: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Kritérium 2.1.1 Keyboard (A) — jedno z nejkritičtějších: všechny funkce musí být přístupné z klávesnice bez myši. Modální okna zavírající se pouze kliknutím, rozbalovací nabídky bez navigace klávesnicí — typická porušení.

Understandable — Srozumitelnost

Princip Understandable vyžaduje srozumitelnost obsahu a rozhraní. Pokyny: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Zvláště důležité je kritérium 3.3.4 Error Prevention pro finanční a lékařské aplikace: prevence vážných následků chyb vstupu. Kritérium 3.2.6 Consistent Help (nové ve WCAG 2.2) vyžaduje, aby tlačítka nápovědy byla na stejných místech.

Robust — Robustnost

Princip Robust vyžaduje kompatibilitu s asistenčními technologiemi. Pokyn 4.1 Compatible s klíčovým kritériem 4.1.2 Name, Role, Value (A): každá komponenta UI musí mít programově určitelný název, roli a stav. Atributy ARIA (role, aria-label, aria-expanded) — hlavní nástroj. Bez nich čtečky obrazovky nemohou určit, zda je prvek tlačítko, odkaz nebo karta.

Tabulka principů WCAG

Úrovně shody WCAG: A, AA, AAA

WCAG definuje tři úrovně: A (minimální), AA (standardní) a AAA (maximální). Úroveň A — povinné minimum: bez ní je obsah pro některé kategorie uživatelů nepřístupný. AA odstraňuje hlavní bariéry přístupnosti. AAA — nejvyšší standard, ale nelze jej dosáhnout pro veškerý obsah (například některé znakové jazyky nebo přepisy zvuku nejsou vždy proveditelné).

Úroveň A (30 kritérií): textové alternativy, ovládání klávesnicí, dostatečný čas, absence blikání nad 3 Hz. Úroveň AA (+24 kritérií): kontrastní poměr 4.5:1, titulky pro video, změna velikosti textu na 200%, jasný fokus klávesnice. Úroveň AAA (+32 kritérií): kontrastní poměr 7:1, znakový jazyk, vypnutí animace (2.3.3), přepis zvuku. Pro vládní weby stačí AA.

Proces auditu WCAG

Audit přístupnosti podle WCAG zahrnuje: automatické testování (axe DevTools, WAVE, Lighthouse — nachází 30–40% chyb), ruční testování klávesnicí a čtečkami obrazovky (VoiceOver, TalkBack, NVDA), odborný audit pro složitá kritéria a uživatelské testování s osobami se zdravotním postižením. Zpráva o auditu by měla obsahovat úroveň shody a seznam nesouladů pro každé kritérium.

Co je nového ve WCAG 2.2

WCAG 2.2 přidal 9 nových kritérií. Klíčová: 2.4.11 Focus Appearance (AA) — indikátor fokusu >= 2px s kontrastem 3:1, 2.5.8 Target Size Minimum (AA) — dotykový cíl minimálně 24x24 pixelů, 3.3.7 Accessible Authentication (AA) — autentizace bez CAPTCHA. Kritérium 2.3.3 Animation from Interactions (AAA) — vypnutelná animace nebo ne více než 5 sekund.

Focus Appearance — nejdůležitější změna. Dříve bylo outline: none bez náhrady porušením, ale neexistovaly jasné požadavky. WCAG 2.2 stanovil: tloušťka >= 2px, kontrast 3:1 s pozadím, plocha indikátoru alespoň jako plocha prvku. Pro vlastní tlačítka s border-radius použijte box-shadow místo outline.

Focus Appearance v CSS

/* 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; }
}

Stylování :focus-visible zajišťuje shodu s kritériem Focus Appearance. Alternativa přes box-shadow je vhodná pro prvky s border-radius. Tmavý režim a High Contrast přizpůsobí barvy fokusu.

Accessible Authentication

Kritérium 3.3.7 Accessible Authentication (AA) — jedna z nejdiskutovanějších novinek. CAPTCHA s rozpoznáváním objektů, hádanky, přetahování posuvníků — nyní je porušením, pokud neexistuje alternativa. Povolené způsoby: OTP e-mailem/SMS, biometrie (Face ID, Touch ID), QR kódy, Magic link. To usnadňuje život nejen lidem s kognitivními poruchami, ale všem uživatelům.

WCAG pro mobilní aplikace

WCAG se vztahuje na nativní iOS a Android aplikace. Čtyři principy POUR plně pokrývají mobilní rozhraní. Specifická kritéria: 2.5.1 Pointer Gestures (gesta bez vysoké přesnosti), 2.5.2 Pointer Cancellation (zrušení náhodného dotyku), 2.5.3 Label in Name (text tlačítka odpovídá štítku přístupnosti). Pro iOS se používá UIKit/UIAccessibility, pro Android — AccessibilityService a ContentDescription.

Nejčastější porušení v mobilních aplikacích: 1.1.1 Non-text Content — ikony bez contentDescription, 2.4.3 Focus Order — nesprávné pořadí navigace, 2.5.8 Target Size — tlačítka menší než 24x24dp, 1.4.3 Contrast — text na obrázcích na pozadí. iOS poskytuje Accessibility Inspector v Xcode, Android — Accessibility Scanner pro automatický audit.

Kód SwiftUI vyhovující WCAG

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("Klikněte pro akci")
        .accessibilityAddTraits(.isButton)
    }
}

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

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("Email")
                TextField("Zadejte email", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("Pole pro zadání emailu")
                    .accessibilityHint("Zadejte emailovou adresu")
            }
            AccessibleButton(
                action: { },
                title: "Odeslat",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

Komponenty SwiftUI s accessibilityLabel, accessibilityHint a minWidth/minHeight >= 48pt zajišťují shodu s WCAG 2.5.8 (Target Size) a 2.5.3 (Label in Name). Použijte Xcode Accessibility Inspector pro kontrolu VoiceOver fokusu, pořadí navigace a velikostí touch target. Podobné požadavky platí pro Jetpack Compose přes Modifier.semantics.