Přístupný web v Rise.sk a naše uplatnění WCAG 2.2 AA

Přístupný web musí zůstat čitelný a ovladatelný v různých podmínkách. Na Rise.sk proto kontrolujeme obsah, HTML, klávesnici i formuláře a pohyb. Automatické skóre pokrývá jen část této práce.

Při práci na Rise.sk jsme vyšli z článků GoodRequest o přístupnosti pro vývojáře a z jejich praktického checklistu. Doporučení jsme porovnali s normativním zněním WCAG 2.2. Když stručný checklist nepokrýval konkrétní situaci, pomohly nám metodika WCAG-EM a příručka WAI-ARIA APG.

Veřejný web je navržený a interně ověřený vůči WCAG 2.2 na úrovni AA. Nejde o certifikaci. Interní kontrola také nenahrazuje testování s lidmi, kteří asistivní technologie používají každý den. Kód může projít auditem, a přesto se s rozhraním může pracovat špatně.

Co pro nás znamená WCAG 2.2 AA

WCAG vychází ze čtyř principů. Obsah musí být vnímatelný, ovladatelný, srozumitelný a robustní. Naším veřejným cílem je úroveň AA. Nad její rámec jsme si vybrali dvě pravidla úrovně AAA týkající se fokusu. Při ovládání klávesnicí má být aktivní prvek celý vidět a jeho označení musí být snadno rozpoznatelné.

WCAG 2.2 mimo jiné přidalo požadavek na minimální viditelnost fokusu, alternativu k přetahování a minimální velikost cíle 24 × 24 CSS pixelů s výjimkami uvedenými v pravidle. Věnuje se také konzistentní pomoci a přístupnější autentizaci. Naše hlavní dotykové ovládací prvky navrhujeme větší než toto minimum. U kompaktních akcí, například tlačítka pro sdílení, kontrolujeme velikost i rozestupy.

Datum kontroly, rozsah, postup, známá omezení a kontakt uvádíme na stránce o přístupnosti. Tyto informace patří na veřejný web, ne do zapomenutého PDF.

Sémantické HTML před ARIA

Tlačítko vytváříme jako <button>, odkaz jako <a> a pole formuláře spojujeme s <label>. Strukturu stránky nesou nadpisy a odpovídající oblasti dokumentu. Nativní prvek už má roli, stav i chování při stisku kláves. U obecného <div> bychom to všechno museli naprogramovat a dlouhodobě udržovat sami.

Příručka WAI-ARIA APG připomíná, že role je příslib. Samotné role="button" nezařídí ovládání klávesami Enter a Space. ARIA používáme tam, kde samotné HTML informaci nevyjádří. Takto pojmenováváme ikonová tlačítka, propojujeme chybu s polem a oznamujeme aktuální stav karuselu.

Dekorativní ikony a vrstvy skrýváme před čtečkou obrazovky. Dekorativní obrázek má prázdný alt. Významový obrázek dostane krátký popis podle role v daném místě. Graf může být jednou ilustrací a jindy hlavním zdrojem informace. Pokud obsahuje data, musí být jeho zjištění dostupné také v textu.

Klávesnice, přeskočení obsahu a fokus

Hlavní průchod webem musí fungovat bez myši. Odkaz pro přeskočení navigace je prvním ovladatelným prvkem. Zobrazí se při prvním stisku Tab a přesune uživatele přímo k hlavnímu obsahu.

Indikátor fokusu má dvě kontrastní vrstvy. Tmavá zůstává viditelná na světlém a zlatém pozadí, zlatá na tmavém. V režimu forced-colors používáme systémovou barvu a respektujeme nastavení uživatele.

Dialog s náhledem obrázku musí zvládnout více než klávesu Escape. Po otevření se fokus přesune dovnitř, zbytek stránky není aktivní a Tab zůstává v dialogu. Po zavření se fokus vrátí právě na obrázek, který dialog otevřel. Posouvání gestem je doplňkové. Předchozí a další obrázek mají vlastní tlačítka.

Kontrast a informace nezávislé na barvě

U běžného textu cílíme na poměr kontrastu alespoň 4,5 : 1. Velký text může mít poměr 3 : 1; důležité hranice a ikony rozhraní potřebují stejný poměr vůči sousední barvě. Poměry měříme nad skutečnými barvami v rozhraní. Název designového tokenu totiž nevypovídá o pozadí, na kterém se nakonec použije.

Samotná barva informaci nenese. Odkazy v článku jsou podtržené i bez najetí myší. Chyba formuláře má text a programové propojení s polem, ne pouze červený rámeček. Aktuální bod karuselu má stav, který může oznámit čtečka obrazovky.

Formulářové chyby, které lze najít a pochopit

Kontaktní formulář má viditelné popisky a smysluplné hodnoty autocomplete. Po neúspěšném odeslání zobrazí souhrn chyb s odkazy na pole a přesune fokus na první chybu. Neplatná pole mají aria-invalid a aria-describedby.

Úspěch i selhání formulář oznamuje v přístupné živé oblasti. Uživatel tak nemusí sledovat jediné místo na obrazovce. Každá chyba je pojmenovaná slovy.

Zvětšení textu, přelamování a rozestupy

Při zvětšení textu na 200 % nesmí zmizet obsah ani ovládání. Zkouška přelamování při šířce 320 CSS pixelů odpovídá přibližně 400% zoomu na obrazovce široké 1280 pixelů. Stránka přejde do jednoho sloupce a dokument se neposouvá vodorovně.

Pojmenované dvourozměrné oblasti mohou být výjimkou. Široká datová tabulka dostane vlastní oblast pro posouvání, dostupnou z klávesnice, a textové upozornění, že obsah pokračuje vpravo. Posouvá se tabulka, nikoli celá stránka.

Samostatně zkoušíme změny řádkování a rozestupů textu podle WCAG. Větší výška řádku, odstup odstavců i mezery mezi znaky a slovy odhalí komponenty s pevnou výškou. Text z nich začne přetékat.

Omezení pohybu není jen kratší animace

Při prefers-reduced-motion: reduce vypínáme automatické intro, parallax, plynulé posouvání a přechody, které nepředávají potřebnou informaci. Změna stavu zůstává srozumitelná i bez pohybu. Automatický pohyb trvající déle než pět sekund musí jít za podmínek uvedených ve WCAG zastavit. Na Rise.sk proto žádný takový neovládaný obsah nepoužíváme.

Stejné pravidlo platí pro karusely. Gesto nikdy není jedinou možností ovládání, změnu lze poznat i bez animace a přechod může trvat nulový čas.

Jak testujeme a proč axe nestačí

Automatická kontrola dobře zachytí opakující se chyby. Najde chybějící názvy, nesprávné ARIA, některé potíže s kontrastem, oblasti dokumentu a velikost ovládacích cílů. Nerozhodne však, zda je alt užitečný, jestli pořadí fokusu dává smysl ani zda člověk rozumí chybě formuláře. Nedokáže ověřit celý úkol tak, jak jej projde uživatel.

Proto používáme reprezentativní postup podle WCAG-EM:

1. Určíme rozsah, cíl a úroveň.
2. Identifikujeme šablony, důležité funkce a technologie.
3. Vybereme vzorek včetně významných variant.
4. Provedeme automatické i manuální ověření.
5. Zaznamenáme výsledky a konkrétní omezení.

Testovací matice Rise.sk zahrnuje jazykové varianty domovské stránky, statické šablony, portfolio, auditní moduly, kontakt a profily, kalkulačky, různé typy článků, právní stránky, stránku 404 i informace o přístupnosti. V axe požadujeme nula porušení WCAG 2, 2.1 a 2.2 na úrovních A a AA bez filtrování podle závažnosti. Doporučení z oblasti best practices sledujeme zvlášť. Ne každé je chybou souladu.

Ručně kontrolujeme ovládání klávesnicí, dialogy, návrat fokusu, zvětšený text, přelamování při 320 pixelech, rozestupy textu, orientaci a omezení pohybu. Ve stromu přístupnosti ověřujeme názvy, role i pořadí. Zelený automatický audit je jeden důkaz, ne konec testování.

Právní souvislosti popisujeme opatrně

Směrnice EU 2019/882 se od 28. června 2025 vztahuje na vymezené výrobky a spotřebitelské služby. Slovensko ji promítlo do zákona č. 351/2022 Z. z.. Ten má vlastní rozsah, výjimky a povinnosti hospodářských subjektů. Z názvu předpisu proto nelze určit, co musí splnit konkrétní firma.

Z těchto předpisů nevyvozujeme, že každý web má stejnou právní povinnost. Interní kontrola WCAG také neprokazuje právní soulad konkrétní služby. Záleží na službě, subjektu i dalších okolnostech. Posouzení patří právníkovi.

Přístupnost je pro Rise.sk vlastní standard kvality. Pomáhá lidem a odhaluje slepá místa rozhraní při ovládání klávesnicí, zvětšení, překladu i na pomalejším zařízení.

Co naše tvrzení nepokrývá

Interní ověření není nezávislá certifikace. Nenahrazuje audit třetí stranou ani výzkum s lidmi, kteří denně používají čtečku obrazovky, hlasové ovládání, zvětšování nebo jinou asistivní technologii. Tyto kroky zůstávají důležitou součástí dalšího ověřování.

Našli jste na Rise.sk překážku? Napište na rise@rise.sk nebo použijte kontaktní formulář. Pomůže nám URL, popis zamýšlené činnosti a název prohlížeče či asistivní technologie. I jednověté konkrétní hlášení prověříme.