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

Prístupnosť webu nie je jedno tlačidlo, overlay ani skóre z auditu. Je to vlastnosť celého systému, ktorá zahŕňa obsah, HTML, vizuálny dizajn, klávesové ovládanie, formuláre, pohyb aj spôsob testovania.

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 do sémantiky, jazykov, názvov ovládania, stavových hlásení a focus trapov. Pri implementácii na Rise.sk sme tieto odporúčania porovnali s normatívnym textom WCAG 2.2, metodikou WCAG-EM a WAI-ARIA APG.

Výsledok opisujeme presne. Verejný web je navrhnutý a interne overený voči WCAG 2.2 AA. Nejde o certifikáciu ani náhradu testovania s ľuďmi, ktorí používajú asistívne technológie.

Č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ý a robustný. Úroveň AA je náš verejný cieľ. Navyše sme si vybrali dve AAA vlastnosti z WCAG 2.2. Focus má zostať úplne viditeľný bez prekrytia a 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 a prístupnejšiu autentifikáciu. Na Rise.sk ponechávame primárne dotykové ovládanie spravidla na 44 až 48 px. Kompaktné akcie, napríklad share tlačidlá, môžu byť menšie, ale neprekročia smerom nadol 24 px a majú dostatočný rozostup.

Naša stránka o prístupnosti drží dátum kontroly, rozsah, spôsob testovania, známe obmedzenia a kontakt na jednom verejnom mieste.

Sémantické HTML pred ARIA

Tlačidlo píšeme ako <button>, odkaz ako <a>, formulárové pole spájame s <label> a obsah delíme cez správne landmarks a nadpisy. Natívny prvok už obsahuje klávesové správanie, rolu a stav, ktoré by sme pri všeobecnom <div> museli nanovo a bezchybne implementovať.

WAI-ARIA APG upozorňuje, že rola je sľub. role="button" nepridá aktiváciu klávesom Enter alebo Space. Preto ARIA používame iba na doplnenie informácie, ktorú natívne HTML nevie vyjadriť. Patrí sem napríklad názov ikonového tlačidla, aktuálny stav karuselu alebo väzba chyby na pole.

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 významu v konkrétnom kontexte. Ak vizualizácia nesie dáta, nestačí opísať jej vzhľad. 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 je skip link. Zobrazí sa pri fokuse a presunie používateľa na hlavný obsah.

Focus indikátor má dve kontrastné vrstvy. Tmavá vrstva zostáva viditeľná na svetlom a zlatom povrchu, zlatá vrstva na tmavom. V režime forced-colors sa nepokúšame prebiť farby používateľa a používame systémovú farbu.

Pri modalnom 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 na pôvodnú miniatúru. 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 na 3 : 1 a dôležité hranice či ikony rozhrania na 3 : 1 voči susednej farbe. Tieto pomery kontrolujeme nad reálnymi tokenmi, nie odhadom z názvu farby.

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. Aktuálny bod karuselu má programový stav, nielen iný odtieň.

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í zobrazí súhrn s odkazmi na chybné polia, presunie focus na prvú chybu a na každom poli nastaví aria-invalid a aria-describedby.

Úspech a chyba odoslania sa oznamujú v bezpečnom live regióne. Používateľ tak dostane spätnú väzbu aj bez toho, aby sledoval konkrétnu časť obrazovky. 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. 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á má vlastný klávesnicou dostupný scroll kontajner a textové upozornenie. Celá stránka sa kvôli nej nesmie posúvať nabok.

Samostatne aplikujeme WCAG text-spacing override. Zahŕňa väčšiu výšku riadku, odstup odsekov a rozostupy znakov a slov. Komponent nesmie predpokladať pevnú výšku, do ktorej sa text „musí zmestiť“.

Reduced motion nie je iba kratšia animácia

Pri prefers-reduced-motion: reduce vypíname automatické intro, parallax, plynulé posúvanie a nepotrebné prechody. Zmena stavu zostane zrozumiteľná, ale nevyžaduje pohyb. Obsah, ktorý by sa automaticky menil dlhšie než päť sekúnd, musí byť možné zastaviť. Na Rise.sk takýto nekontrolovaný obsah nepoužívame.

Rovnaké pravidlo platí pre karusely. Swipe nie je jediný spôsob ovládania, zmena sa oznamuje a prechod môže mať 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 alebo veľkosť cieľa. Nedokáže však spoľahlivo rozhodnúť, či je alt užitočný, poradie fokusu logické, formulárová chyba zrozumiteľná alebo tok použiteľný.

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 všetkých šesť homepage lokalít, statické šablóny, varianty portfólia, auditné moduly, kontakt a profil, kalkulačky, viaceré typy blogov, právne stránky, 404 a 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, pretože 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, názvy, roly a poradie v accessibility tree. 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., ktorý má vlastný rozsah, výnimky a povinnosti hospodárskych subjektov.

Z týchto predpisov nerobíme všeobecné tvrdenie, že každý web má rovnakú právnu povinnosť alebo že interný WCAG audit preukazuje právny súlad konkrétnej služby. To závisí od typu služby, subjektu a ďalších okolností a patrí to právnemu posúdeniu.

Pre Rise.sk je prístupnosť vlastný štandard kvality. Pomáha ľuďom, znižuje počet slepých miest v rozhraní a robí systém odolnejší aj pri klávesnici, zoomovaní, preklade či pomalšom zariadení.

Č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í denne používajú čítačku obrazovky, hlasové ovládanie, zväčšovanie alebo iné asistívne technológie. Tieto kroky sú prirodzené pokračovanie, nie niečo, čo by sme predstierali automatickým skóre.

Ak na Rise.sk nájdete bariéru, napíšte na rise@rise.sk alebo použite kontaktný formulár. Uveďte URL, čo ste chceli urobiť a aký prehliadač alebo asistívnu technológiu používate. Každé konkrétne hlásenie preveríme.