Jak zpřístupnit web: startovací průvodce WCAG 2.2

Web zpřístupníte tak, že ho postavíte tak, aby ho lidé mohli používat klávesnicí, čtečkou obrazovky, zoomem nebo spínacím zařízením stejně jako myší: používejte skutečné HTML prvky pro tlačítka, odkazy, nadpisy a popisky formulářů, dejte obrázkům smysluplný alt text, udržujte kontrast textu vysoký a fokus viditelný. Cílovým standardem je WCAG 2.2 na úrovni AA. Automatické kontroly odhalí část problémů; desetiminutový test klávesnicí a čtečkou obrazovky odhalí velkou část zbytku.

Co „přístupné“ znamená v praxi

Přístupnost se týká lidí: někoho, kdo je nevidomý a používá čtečku obrazovky, někoho s třesem, kdo se pohybuje klávesnicí, někoho se slabým zrakem, kdo zvětšuje na 200 %, někoho, kdo čte na přímém slunci, nebo někoho s dočasně zlomeným zápěstím. Dobrá přístupnost obvykle zlepší web pro všechny: jasnější strukturu, čitelný text, formuláře, které vysvětlují své chyby.

Referenčním standardem jsou Pokyny pro přístupnost webového obsahu (WCAG) od W3C. Od září 2026 je aktuální verze WCAG 2.2 (publikovaná v říjnu 2023, aktualizovaná v prosinci 2024); WCAG 3 je raný návrh. WCAG je postaveno na čtyřech principech (obsah musí být vnímatelný, ovladatelný, srozumitelný a robustní) a má tři úrovně shody:

Zákony na několika místech odkazují na WCAG, například Evropský akt o přístupnosti, který se od června 2025 vztahuje na mnoho digitálních služeb pro spotřebitele v EU. Která pravidla se na vás vztahují, závisí na tom, kde působíte a co prodáváte; pokud si nejste jisti, zeptejte se poradce. Tento průvodce pokrývá praktickou práci.

Možnosti, jak se tam dostat

U většiny malých webů stačí první dva: řekněte AI, ať staví přístupně od začátku, a před spuštěním proveďte audit.

Opravy, na kterých nejvíc záleží

Používejte správné HTML prvky

Většina přístupnosti přijde zdarma se správným HTML. <button> je zaměřitelné, funguje s Enterem a mezerníkem a je ohlášeno jako tlačítko. <div> s obsluhou kliknutí nic z toho nemá. Kód generovaný AI někdy používá stylované div pro všechno; vyžádejte si sémantické prvky:

• <button> pro akce, <a href> pro navigaci
• Jeden <h1> na stránku, pak <h2>, <h3> v pořadí; uživatelé čteček obrazovky přeskakují mezi nadpisy
• Orientační body: <header>, <nav>, <main>, <footer>
• <label> propojený s každým polem formuláře
• Jazyk stránky v <html lang="cs">

ARIA atributy používejte jen tehdy, když se žádný nativní prvek nehodí, například pro vlastní sadu karet nebo combobox. Špatné ARIA je horší než žádné.

Přístup z klávesnice a viditelný fokus

Vše, co lze dělat myší, musí fungovat jen s klávesnicí (WCAG 2.1.1). Procházejte stránku klávesou Tab: každý odkaz, tlačítko a pole musí být dosažitelné v logickém pořadí a vždy musíte vidět, kde je fokus (2.4.7 Viditelný fokus). WCAG 2.2 přidalo, že zaměřený prvek nesmí být zcela skryt za lepivými hlavičkami nebo lištami cookies (2.4.11, úroveň AA).

Časté chyby: menu, která se otevírají jen najetím myší, modální okna, která nezachytí fokus nebo nelze zavřít klávesou Escape, a outline: none v CSS bez náhrady.

Textové alternativy

Každý smysluplný obrázek potřebuje alt text, který říká, co zobrazuje v kontextu („Kuchař servíruje degustační menu“, ne „image1.jpg“). Dekorativní obrázky dostanou prázdné alt="", aby je čtečky přeskočily. Tlačítka jen s ikonou potřebují přístupný název („Zavřít“, „Hledat“). Videa potřebují titulky; zvuk přepis.

Barvy a kontrast

WCAG 2.2 AA vyžaduje kontrastní poměr alespoň 4,5:1 pro běžný text a 3:1 pro velký text (1.4.3), a 3:1 pro části rozhraní, jako jsou okraje polí a významné ikony (1.4.11). Nejčastějším selháním je světle šedý text v poli a bledá tlačítka. Také nikdy nepoužívejte samotnou barvu k předání významu: červený okraj u neplatného pole potřebuje i chybovou zprávu.

Změna velikosti a reflow

Text musí zůstat použitelný při zvětšení na 200 % (1.4.4) a obsah musí fungovat při šířce 320 CSS pixelů bez vodorovného posouvání (1.4.10). Responzivní rozvržení většinu z toho zvládne.

Cíle, formuláře a chyby

• Velikost cíle: WCAG 2.2 AA vyžaduje cíle pro ukazovátko alespoň 24 × 24 CSS pixelů, nebo dostatečný rozestup u menších (2.5.8). Větší je na telefonech příjemnější.
• Formuláře: viditelné popisky (ne jen zástupný text), jasné pokyny a chybové zprávy, které řeknou, co je špatně a jak to opravit, vedle pole.
• Přihlášení: nenuťte lidi luštit hádanku nebo přepisovat kód bez alternativy; povolte správce hesel a vkládání (3.3.8 Přístupná autentizace).

Prompty, které fungují

Postav tento web tak, aby splňoval WCAG 2.2 na úrovni AA: sémantické orientační body HTML, jeden h1 na stránku s nadpisy v pořadí, skutečné prvky tlačítek a odkazů, popisky u každého pole formuláře, viditelné styly fokusu, kontrast textu alespoň 4,5:1, alt text u smysluplných obrázků a alt="" u dekorativních, a nastavený html lang.

Proveď audit přístupnosti stránek /signup a /checkout. Zkontroluj použití jen klávesnicí, pořadí fokusu, viditelný fokus, popisky, chybové zprávy, kontrast a přístupné názvy u tlačítek jen s ikonou. Vypiš každý problém s kritériem WCAG a pak je oprav, aniž bys změnil vizuální design víc, než je nutné.

Mobilní menu nejde ovládat klávesnicí. Udělej z něj tlačítko s aria-expanded, při otevření přesuň fokus do menu, zavři ho klávesou Escape a vrať fokus na tlačítko.

Krok za krokem

1. Spusťte automatickou kontrolu. Sekce Accessibility v Lighthouse v Chrome DevTools nebo rozšíření axe pro prohlížeč na každé hlavní stránce. Opravte vše, co nahlásí.
2. Odpojte myš. Procházejte každou stránku klávesou Tab a dokončete každou klíčovou úlohu: registraci, hledání, pokladnu. Poznamenejte si vše, k čemu se nedostanete, u čeho nevidíte fokus nebo z čeho nemůžete uniknout.
3. Zvětšete na 200 % a zúžte okno na šířku telefonu. Nic nesmí být useknuté nebo vyžadovat vodorovné posouvání.
4. Vyzkoušejte čtečku obrazovky alespoň deset minut: VoiceOver na Macu a iPhonu, TalkBack na Androidu nebo NVDA na Windows (zdarma). Poslouchejte nadpisy, odkazy a pole formulářů. „Tlačítko“ bez názvu nebo „odkaz, klikněte sem“ znamená práci k udělání.
5. Zkontrolujte kontrast textu, tlačítek a polí nástrojem pro kontrast.
6. Opravte a znovu otestujte stejné úlohy.
7. Publikujte prohlášení o přístupnosti, které říká, jaký standard cílíte a jak nahlásit problémy, a na hlášení odpovídejte.

Časté chyby

• Spoléhání na překryvný widget místo opravy kódu.
• Odstraňování obrysů fokusu, protože vypadají neuspořádaně, bez náhrady.
• Zástupný text jako jediný popisek. Zmizí, jakmile někdo začne psát, a bývá nízký kontrast.
• Odkazy „Klikněte sem“ a „Číst dál“. Mimo kontext uživatelé čteček slyší seznam stejných odkazů.
• Alt text nacpaný klíčovými slovy. Alt text je pro lidi; popište obrázek.
• Testování jednou. Každá nová funkce může rozbít přístup z klávesnice. Přidejte průchod klávesnicí do testování před spuštěním.

Kontrolní seznam přístupnosti

• Automatická kontrola (Lighthouse nebo axe) bez chyb na hlavních stránkách
• Každý úkol lze dokončit jen klávesnicí
• Fokus je vždy viditelný a nikdy skrytý za lepivými prvky
• Sémantické nadpisy, orientační body, tlačítka a odkazy; nastaven lang
• Smysluplný alt text; dekorativní obrázky alt=""; titulky u videa
• Kontrast textu ≥ 4,5:1 (velký text ≥ 3:1); části rozhraní ≥ 3:1
• Funguje při zoomu 200 % a šířce 320 px
• Každé pole formuláře má viditelný popisek a jasné chybové zprávy
• Prohlášení o přístupnosti s možností nahlásit problémy

Pojmy za tím vysvětluje co je webová přístupnost. Přístupný a dobrý design se hodně překrývají; jak navrhnout dobře vypadající aplikaci s AI pokrývá vizuální stránku.

Přístupnost na Mythexu

Mythex staví podle standardu, který si vyžádáte, takže do prvního promptu i do dalších požadavků napište „WCAG 2.2 AA“. Pro kontrolu malých obrazovek můžete použít rámeček velikosti telefonu v Náhledu (Náhled a kód), ale testy klávesnicí, zoomem a čtečkou obrazovky nejlépe fungují na publikované URL nebo v náhledu otevřeném ve vlastní záložce. Požádejte agenta, aby stránku zauditoval a opravil, co najde, a pak opravy otestujte sami. Automatický průchod je začátek, ne závěrečné schválení.

Otázky