Prístupný web v Rise.sk a naše uplatnenie WCAG 2.2 AA

Prístupný web sa musí dať čítať a ovládať v rôznych podmienkach. Pri Rise.sk preto kontrolujeme obsah, HTML, klávesnicu aj formuláre a zmeny pohybu. Automatické skóre pokrýva iba časť tejto práce.

Pôvodný článok GoodRequest o prístupnosti pre vývojárov nám pomohol pomenovať praktický základ. Ich novší checklist z roku 2025 ide ďalej. Pridáva sémantiku, jazyky, názvy ovládania, stavové hlásenia aj focus trapy. Pri implementácii na Rise.sk sme tieto odporúčania položili vedľa normatívneho textu WCAG 2.2, a metodika WCAG-EM spolu s príručkou WAI-ARIA APG boli zdroje, ku ktorým sme sa vracali vždy, keď sa odporúčanie s normou rozchádzalo.

Výsledok opisujeme presne. Verejný web je navrhnutý a interne overený voči WCAG 2.2 AA. To nie je certifikácia. A nie je to ani náhrada za testovanie s ľuďmi, ktorí asistívne technológie používajú denne, pretože interné overenie ukáže chyby v kóde, nie to, ako sa rozhranie ovláda v praxi.

Čo pre nás znamená WCAG 2.2 AA

WCAG organizuje požiadavky pod štyri princípy. Obsah musí byť vnímateľný, ovládateľný, zrozumiteľný aj robustný. Úroveň AA je náš verejný cieľ. Nad rámec nej sme si z WCAG 2.2 vybrali ešte dve vlastnosti úrovne AAA a obe sa týkajú fokusu, teda toho, čo vidí človek, ktorý sa po stránke pohybuje klávesom Tab. Focus má zostať úplne viditeľný bez prekrytia. Jeho vzhľad má zostať jednoznačne rozpoznateľný.

WCAG 2.2 pridalo okrem iného minimálnu viditeľnosť fokusu, alternatívu k ťahaniu, minimálnu veľkosť cieľa 24 × 24 CSS px, konzistentnú pomoc aj prístupnejšiu autentifikáciu. Nás z toho najviac zaujímala veľkosť cieľa. Primárne dotykové ovládanie na Rise.sk preto spravidla ponechávame na 44 až 48 px, čo je citeľne nad normou, a kompaktné akcie typu share tlačidiel môžu byť menšie. Pod 24 px však nejdeme a rozostup medzi nimi zostáva dostatočný.

Dátum kontroly, rozsah, spôsob testovania, známe obmedzenia aj kontakt držíme na jednom verejnom mieste, na stránke o prístupnosti.

Sémantické HTML pred ARIA

Tlačidlo píšeme ako <button> a odkaz ako <a>. Formulárové pole spájame s <label> a obsah delíme cez správne landmarks a nadpisy. Natívny prvok už vie, akú má rolu a v akom je stave, a vie aj to, čo má urobiť pri stlačení klávesu, kým pri všeobecnom <div> by sme to museli napísať nanovo a bezchybne, a potom to roky udržiavať.

WAI-ARIA APG upozorňuje, že rola je sľub. role="button" nepridá aktiváciu klávesom Enter alebo Space. ARIA preto používame iba tam, kde natívne HTML nemá ako danú informáciu vyjadriť, čiže pri ikonovom tlačidle bez textu, pri chybovej hláške, ktorá sa musí naviazať na konkrétne pole, a pri aktuálnom stave karuselu.

Dekoratívne ikony a ambientné vrstvy majú aria-hidden. Dekoratívny obrázok má prázdny alt. Obsahový obrázok dostane stručný alt podľa toho, čo v danom kontexte znamená, lebo ten istý graf je v jednom článku ilustrácia, v druhom hlavný nositeľ informácie. Pri vizualizácii, ktorá nesie dáta, nestačí opísať, ako vyzerá. Rovnaké zistenie musí byť dostupné aj textom.

Klávesnica, skip link a focus

Hlavný tok webu musí fungovať bez myši. Prvým ovládateľným prvkom na stránke je skip link, ktorý do prvého stlačenia klávesu Tab nikto nevidí, a ktorý používateľa presunie rovno na hlavný obsah namiesto toho, aby ho prehnal celou navigáciou.

Focus indikátor má dve kontrastné vrstvy. Tmavá zostáva viditeľná na svetlom a zlatom povrchu, zlatá na tmavom, takže nech používateľ pristane kdekoľvek na stránke, jedna z nich je vždy dostatočne odlíšená od pozadia. V režime forced-colors farby používateľa neprebíjame a berieme systémovú.

Pri modálnom lightboxe nestačí kláves Escape. Po otvorení presunieme focus dovnútra, zvyšok stránky označíme ako inertný, Tab zostane v dialógu a zatvorenie vráti focus presne na tú miniatúru, z ktorej sa lightbox otvoril. Swipe je iba ďalšia možnosť. Predchádzajúci a nasledujúci obrázok sú vždy dostupné jedným tlačidlom.

Kontrast a informácia, ktorá nestojí iba na farbe

Bežný text cieli minimálne na pomer 4,5 : 1. Veľký text aj dôležité hranice či ikony rozhrania stačia na 3 : 1 voči susednej farbe. Pomery kontrolujeme nad reálnymi tokenmi, nie odhadom z názvu farby, pretože názov farby nepovie nič o tom, na akom pozadí ten text nakoniec pristane.

Farba však sama nestačí. Inline odkazy v článkoch sú podčiarknuté aj bez hoveru. Chyba formulára má text a programové prepojenie, nie iba červený rám, a aktuálny bod karuselu nesie programový stav, aby ho čítačka obrazovky ohlásila aj vtedy, keď sa odtieň nedá rozlíšiť.

Nájditeľné a pochopiteľné formulárové chyby

Kontaktný formulár používa viditeľné labely a zmysluplné autocomplete tokeny.

Po neúspešnom odoslaní sa zobrazí súhrn s odkazmi na chybné polia. Focus skočí na prvú chybu. Každé neplatné pole dostane aria-invalid aj aria-describedby. Úspech aj chyba odoslania sa oznamujú v bezpečnom live regióne, takže používateľ dostane spätnú väzbu aj vtedy, keď práve nesleduje tú časť obrazovky, na ktorej sa hláška objaví. Chyba je vždy pomenovaná textom.

Reflow, zväčšenie textu a rozostupy

Pri 200 % zväčšení textu nesmie zmiznúť obsah ani ovládanie. Reflow test pri šírke 320 CSS px je praktickým ekvivalentom 400 % zoomu na 1280-pixelovej ploche a je to najrýchlejší spôsob, ako zistiť, či sa rozloženie pri zväčšení rozpadne. Stránka sa zmení na jeden stĺpec bez horizontálneho posúvania celého dokumentu.

Výnimkou môžu byť pomenované dvojrozmerné oblasti, napríklad široká dátová tabuľka. Tá dostane vlastný scroll kontajner dostupný z klávesnice a textové upozornenie, aby človek, ktorý na obrazovke vidí len jej výrez, vedel, že vpravo obsah pokračuje. Nabok sa posúva tabuľka, nie stránka.

Samostatne aplikujeme WCAG text-spacing override. Zväčší výšku riadku, odstup odsekov a rozostupy znakov aj slov, takže každý komponent, ktorý staval na pevnej výške, sa v tom momente prezradí. Text sa nemá kam zmestiť, tak pretečie.

Reduced motion nie je iba kratšia animácia

Pri prefers-reduced-motion: reduce vypíname automatické intro, parallax, plynulé posúvanie aj prechody, ktoré nič neoznamujú. Zmena stavu zostane zrozumiteľná, len ju už neoznamuje pohyb. Obsah, ktorý by sa automaticky menil dlhšie než päť sekúnd, musí byť možné zastaviť, a to je dôvod, prečo na Rise.sk žiadny takýto nekontrolovaný obsah nemáme.

Rovnaké pravidlo platí pre karusely, kde swipe nikdy nie je jediný spôsob ovládania. Zmena sa oznámi aj bez animácie a prechod môže mať pokojne nulové trvanie.

Ako testujeme a prečo axe nestačí

Automatický audit je výborný na opakovateľné chyby. Zachytí chýbajúce názvy, nesprávne ARIA, niektoré kontrasty, landmarks aj veľkosť cieľa. Nedokáže však rozhodnúť, či je alt užitočný. Nepovie, či je poradie fokusu logické, či formulárovej chybe človek porozumie, ani či sa dá celý tok prejsť do konca, čo je presne to, kvôli čomu audit robíme.

Preto používame reprezentatívny postup WCAG-EM:

1. určíme rozsah, cieľ a úroveň,
2. identifikujeme šablóny, kľúčové funkcie a technológie,
3. vyberieme reprezentatívnu vzorku vrátane všetkých významných variantov,
4. vyhodnotíme automatické aj manuálne kritériá,
5. zaznamenáme výsledky a konkrétne obmedzenia.

Auditná matica Rise.sk zahŕňa podporované jazykové verzie domovskej stránky, statické šablóny, varianty portfólia, auditné moduly, kontakt a profil, kalkulačky, viaceré typy blogov, právne stránky, 404 aj stránku o prístupnosti. V axe vyžadujeme nula nálezov pre WCAG 2/2.1/2.2 A a AA bez filtrovania podľa závažnosti. Best-practice odporúčania sledujeme oddelene. Nie každé z nich je conformance chyba.

Manuálne overujeme klávesnicu, dialógy, návrat fokusu, 200 % text, 320px reflow, text spacing, orientáciu, reduced motion a v accessibility tree ešte názvy, roly aj poradie. Automatická zelená teda nie je koniec auditu, iba jeden dôkaz.

Právny kontext formulujeme opatrne

Európska smernica 2019/882 sa od 28. júna 2025 uplatňuje na vymedzené výrobky a spotrebiteľské služby. Slovensko ju transponovalo zákonom č. 351/2022 Z. z. Ten má vlastný rozsah, vlastné výnimky a vlastný okruh povinností hospodárskych subjektov, takže odpoveď na otázku, čo presne musí konkrétna firma splniť, sa z názvu predpisu prečítať nedá.

Ani z jedného, ani z druhého predpisu nerobíme všeobecné tvrdenie, že každý web má rovnakú právnu povinnosť, ani tvrdenie, že interný WCAG audit preukazuje právny súlad konkrétnej služby. Závisí to od typu služby aj od subjektu a od ďalších okolností. Posúdiť to má právnik.

Pre Rise.sk je prístupnosť vlastný štandard kvality. Pomáha ľuďom a zároveň znižuje počet slepých miest v rozhraní. Systém je vďaka nej odolnejší pri klávesnici, pri zoomovaní, pri preklade aj na pomalšom zariadení, teda presne v situáciách, na ktoré sa pri návrhu obvykle nemyslí.

Čo zostáva mimo tohto tvrdenia

Interné overenie nie je nezávislá certifikácia. Nenahrádza audit treťou stranou ani výskum s ľuďmi, ktorí čítačku obrazovky, hlasové ovládanie, zväčšovanie alebo inú asistívnu technológiu používajú denne, a preto ich plánujeme ako ďalšie kroky overovania.

Našli ste na Rise.sk bariéru? Napíšte na rise@rise.sk alebo použite kontaktný formulár. Najviac nám pomôže URL, popis toho, čo ste na stránke chceli urobiť, a názov prehliadača alebo asistívnej technológie, v ktorej sa bariéra objavila, aj keby to bolo len jednou vetou. Každé konkrétne hlásenie preveríme.