Ako zprístupniť web: štartovací sprievodca WCAG 2.2

Aby bol web prístupný, postavte ho tak, aby ho ľudia mohli používať klávesnicou, čítačkou obrazovky, zoomom alebo spínacím zariadením, nielen myšou: používajte skutočné HTML prvky pre tlačidlá, odkazy, nadpisy a popisky formulárov, dajte obrázkom zmysluplný alt text, udržte vysoký kontrast textu a zviditeľnite fokus. Cieľovým štandardom je WCAG 2.2 úroveň AA. Automatické kontroly odhalia len časť problému; desaťminútový test klávesnicou a čítačkou obrazovky odhalí veľa z ostatného.

Čo „prístupný“ znamená v praxi

Prístupnosť je o ľuďoch: niekom, kto je nevidiaci a používa čítačku obrazovky, niekom s trasením, kto sa pohybuje klávesnicou, niekom so slabým zrakom, ktorý zväčšuje na 200 %, niekom, kto číta na slnku, alebo niekom s dočasne zlomeným zápästím. Dobrá prístupnosť väčšinou urobí web lepším pre všetkých — jasnejšiu štruktúru, čitateľný text, formuláre, ktoré vysvetľujú svoje chyby.

Referenčným štandardom sú Pokyny W3C pre prístupnosť webového obsahu (WCAG). Od septembra 2026 je aktuálnou verziou WCAG 2.2 (publikovaná v októbri 2023, aktualizovaná v decembri 2024); WCAG 3 je skorý návrh. WCAG je postavená na štyroch princípoch — obsah musí byť vnímateľný, ovládateľný, zrozumiteľný a robustný — a má tri úrovne súladu:

Zákony na viacerých miestach odkazujú na WCAG — napríklad Európsky akt o prístupnosti, ktorý sa od júna 2025 vzťahuje na mnohé digitálne služby pre spotrebiteľov v EÚ. Ktoré pravidlá sa na vás vzťahujú, závisí od toho, kde pôsobíte a čo predávate; ak si nie ste istí, poraďte sa s odborníkom. Tento článok pokrýva praktickú prácu.

Možnosti: ako sa tam dostať

Pre väčšinu malých webov stačí prvé dva: požiadajte AI, aby stavala prístupne od začiatku, a pred spustením urobte audit.

Opravy, na ktorých najviac záleží

Používajte správne HTML prvky

Väčšina prístupnosti je zadarmo so správnym HTML. Prvok <button> je zaostriteľný, funguje s Enter a Medzerník a čítačka ho oznámi ako tlačidlo. <div> s obsluhou kliknutia nie je nič z toho. Kód generovaný AI niekedy používa štylizované div pre všetko; požiadajte o sémantické prvky:

• <button> pre akcie, <a href> pre navigáciu
• Jeden <h1> na stránku, potom <h2>, <h3> v poradí — používatelia čítačiek skáču medzi nadpismi
• Orientačné body: <header>, <nav>, <main>, <footer>
• <label> prepojený s každým poľom formulára
• Jazyk stránky v <html lang="sk">

Atribúty ARIA používajte len vtedy, keď sa hodí žiadny natívny prvok — napríklad pre vlastnú sadu kariet alebo combobox. Nesprávne ARIA je horšie než žiadne.

Prístup klávesnicou a viditeľný fokus

Všetko, čo viete urobiť myšou, musí fungovať iba s klávesnicou (WCAG 2.1.1). Prechádzajte stránku klávesom Tab: každý odkaz, tlačidlo a pole musí byť dosiahnuteľné v logickom poradí a vždy musíte vidieť, kde je fokus (2.4.7 Viditeľný fokus). WCAG 2.2 pridalo, že zaostrený prvok nesmie byť úplne skrytý za lepiacimi hlavičkami alebo banermi o cookies (2.4.11, úroveň AA).

Bežné chyby: menu, ktoré sa otvára len pri prejdení myšou, modálne okná, ktoré zachytávajú fokus alebo sa nedajú zavrieť klávesom Escape, a outline: none v CSS bez náhrady.

Textové alternatívy

Každý zmysluplný obrázok potrebuje alt text, ktorý v kontexte hovorí, čo zobrazuje („Kuchár podáva degustačné menu“, nie „image1.jpg“). Dekoratívne obrázky dostanú prázdny alt="", aby ich čítačky preskočili. Tlačidlá iba s ikonou potrebujú prístupný názov („Zavrieť“, „Hľadať“). Videá potrebujú titulky; zvuk prepis.

Farba a kontrast

WCAG 2.2 AA vyžaduje kontrastný pomer aspoň 4,5:1 pre normálny text a 3:1 pre veľký text (1.4.3), a 3:1 pre časti rozhrania, ako sú okraje vstupných polí a významné ikony (1.4.11). Typickými zlyhaniami sú svetlosivý text zástupného znaku v poli a bledé tlačidlá. Taktiež nikdy nepoužívajte samotnú farbu na prenos významu — červený okraj neplatného poľa potrebuje aj chybovú správu.

Zmena veľkosti a prispôsobenie

Text musí zostať použiteľný pri zväčšení na 200 % (1.4.4) a obsah musí fungovať pri šírke 320 CSS pixelov bez posúvania do strán (1.4.10). Dobre responzívne rozloženie rieši väčšinu z toho.

Cieľové plochy, formuláre a chyby

• Veľkosť cieľa: WCAG 2.2 AA vyžaduje pre ukazovacie cieľe aspoň 24 × 24 CSS pixelov alebo dostatočný rozostup okolo menších (2.5.8). Väčšie je príjemnejšie na telefónoch.
• Formuláre: viditeľné popisky (nie len zástupný text), jasné pokyny a chybové správy, ktoré hovoria, čo je zle a ako to opraviť, pri poli.
• Prihlásenie: neobťažujte ľudí riešením hádanky ani prepisovaním kódu bez alternatívy; povoľte správcov hesiel a vkladanie (3.3.8 Prístupné overenie).

Prompty, ktoré fungujú

Postav tento web tak, aby spĺňal WCAG 2.2 úroveň AA: sémantické orientačné body HTML, jeden h1 na stránku s nadpismi v poradí, skutočné prvky button a odkaz, popisky pri každom poli formulára, viditeľné štýly fokusu, kontrast textu aspoň 4,5:1, alt text pri zmysluplných obrázkoch a alt="" pri dekoratívnych, a nastavený html lang.

Auditujte stránky /signup a /checkout z hľadiska prístupnosti. Skontrolujte použitie len klávesnicou, poradie fokusu, viditeľný fokus, popisky, chybové správy, kontrast a názvy pre čítačky pri tlačidlách iba s ikonou. Vypíšte každý problém s kritériom WCAG a potom ho opravte bez väčšej zmeny vizuálneho dizajnu, než je nutné.

Mobilné menu sa nedá používať klávesnicou. Urobte z neho tlačidlo s aria-expanded, pri otvorení presuňte fokus do menu, zatvárajte ho klávesom Escape a vráťte fokus na tlačidlo.

Krok za krokom

1. Spustite automatickú kontrolu. Sekciu Prístupnosť v Lighthouse v nástrojoch pre vývojárov v Chrome alebo rozšírenie axe na každej hlavnej stránke. Opravte všetko, čo nahlási.
2. Odpojte myš. Prechádzajte každú stránku klávesom Tab a dokončite každú kľúčovú úlohu — registrácia, vyhľadávanie, pokladňa. Poznačte si, čo nedosiahnete, kde nevidíte fokus alebo odkiaľ sa nedostanete.
3. Zväčšite na 200 % a zúžte okno na šírku telefónu. Nič nesmie byť odrezané alebo vyžadovať posúvanie do strán.
4. Vyskúšajte čítačku obrazovky aspoň desať minút: VoiceOver na Macu a iPhone, TalkBack na Androide alebo NVDA vo Windows (zadarmo). Počúvajte nadpisy, odkazy a polia formulárov. „Tlačidlo“ bez názvu alebo „odkaz, kliknite sem“ znamená prácu na opravu.
5. Skontrolujte kontrast textu, tlačidiel a vstupov nástrojom na kontrolu kontrastu.
6. Opravte a znova otestujte rovnaké úlohy.
7. Zverejnite vyhlásenie o prístupnosti s uvedením štandardu, ktorý cielite, a spôsobom, ako nahlásiť problémy — a na tieto hlásenia odpovedajte.

Časté chyby

• Spoliehanie sa na prekryvný widget namiesto opravy kódu.
• Odstraňovanie obrysov fokusu, lebo vyzerajú neupravene, bez náhrady.
• Zástupný text ako jediný popisok. Zmizne, keď niekto začne písať, a často má nízky kontrast.
• Odkazy „kliknite sem“ a „čítať viac“. Mimo kontextu používatelia čítačiek počujú zoznam rovnakých odkazov.
• Alt text nacpaný kľúčovými slovami. Alt text je pre ľudí; opíšte obrázok.
• Testovanie raz. Každá nová funkcia môže rozbiť prístup klávesnicou. Pridajte prechod klávesnicou do svojho testovania pred spustením.

Kontrolný zoznam prístupnosti

• Automatická kontrola (Lighthouse alebo axe) je čistá na hlavných stránkach
• Každá úloha sa dá dokončiť iba klávesnicou
• Fokus je vždy viditeľný a nikdy skrytý za lepiacimi prvkami
• Sémantické nadpisy, orientačné body, tlačidlá a odkazy; nastavený lang
• Zmysluplný alt text; dekoratívne obrázky alt=""; titulky pri videu
• Kontrast textu ≥ 4,5:1 (veľký text ≥ 3:1); časti rozhrania ≥ 3:1
• Funguje pri 200 % zoome a šírke 320 px
• Každé pole formulára má viditeľný popisok a jasné chybové správy
• Vyhlásenie o prístupnosti so spôsobom nahlásenia problémov

K pojmom za tým si prečítajte čo je prístupnosť webu. Prístupný a dobrý dizajn sa veľmi prekrývajú; ako navrhnúť pekne vyzerajúcu aplikáciu s AI rieši vizuálnu stránku.

Prístupnosť na Mythex

Mythex stavia podľa štandardu, o ktorý požiadate, preto do prvého promptu aj do ďalších úprav napíšte „WCAG 2.2 AA“. Na kontrolu malých obrazoviek môžete použiť rámček náhľadu pre telefón (Náhľad a kód), no testy klávesnicou, zoomom a čítačkou obrazovky najlepšie fungujú na zverejnenej URL alebo na náhľade otvorenom na vlastnej karte. Požiadajte agenta, aby auditoval stránku, opravil, čo nájde, a potom opravy otestujte sami — automatický prechod je štart, nie záverečné schválenie.

Otázky