Prístupnosť webu WCAG 2.1 AA pre verejný sektor

Stručne: Prístupný web vie používať každý: človek s čítačkou obrazovky, bez myši aj so slabším zrakom. Weby verejného sektora musia spĺňať úroveň WCAG 2.1 AA. V praxi to znamená dostatočný kontrast, ovládanie klávesnicou, popisy obrázkov, zrozumiteľné formuláre, správnu štruktúru nadpisov a ohľaduplné animácie.

Prístupnosť (anglicky accessibility, skrátene a11y) znamená, že web vie používať každý: človek, ktorý nevidí a používa čítačku obrazovky, človek, ktorý nemôže používať myš, starší človek s horším zrakom, ale aj vy s telefónom na priamom slnku.

Pri webe verejného sektora to nie je dobrovoľné. A pri ostatných je to prejav slušnosti — a zvyčajne aj lepší web pre všetkých.

Čo hovorí legislatíva (stručne)

Smernica EÚ 2016/2102 ukladá, aby weby a mobilné aplikácie subjektov verejného sektora boli prístupné. Technický základ je európska norma EN 301 549, ktorá pre web odkazuje na WCAG 2.1 úrovne AA.
Na Slovensku je smernica prenesená do predpisov o štandardoch pre informačné technológie verejnej správy. Presné aktuálne znenie si vždy overte na slov-lex.sk — predpisy sa menia.
Verejný web má mať aj vyhlásenie o prístupnosti — čo je splnené, čo nie a kam sa dá nahlásiť problém.
Pre súkromný sektor pribudol Európsky akt o prístupnosti (smernica EÚ 2019/882), ktorý sa od júna 2025 týka vybraných produktov a služieb (napríklad e-shopov a bankových služieb).

Toto nie je právna rada. Ak robíte web pre úrad alebo nemocnicu, požiadavky si overte v zadaní a v aktuálnych predpisoch.

Čo znamená WCAG 2.1 AA v praxi

WCAG stojí na štyroch princípoch: web má byť vnímateľný, ovládateľný, zrozumiteľný a robustný. Konkrétne veci, ktoré najčastejšie vidím pokazené:

Kontrast textu

Bežný text musí mať kontrast voči pozadiu aspoň 4,5 : 1, veľký text aspoň 3 : 1. Svetlošedý text na bielom pozadí „lebo to vyzerá elegantne“ je najčastejší hriech.

Ovládanie klávesnicou

Všetko, čo sa dá kliknúť, sa musí dať ovládať aj klávesom Tab a Enter. A musí byť vidieť, kde práve fokus je. Ak ste niekde v CSS napísali outline: none bez náhrady, práve ste to pokazili.

Obrázky a ikony

Obrázok, ktorý nesie informáciu, potrebuje alternatívny text (alt). Čisto dekoratívny obrázok má alt="", aby ho čítačka preskočila. Tlačidlo, ktoré má len ikonu, potrebuje názov:

<button type="button" aria-label="Zavrieť okno">
  <svg aria-hidden="true">…</svg>
</button>

Formuláre

Každé pole potrebuje popis (<label>), nie len šedý text vo vnútri (placeholder), ktorý zmizne pri písaní. Chybové hlásenie musí povedať, čo je zle a ako to opraviť — nie len zafarbiť pole načerveno.

Štruktúra

Nadpisy v správnom poradí (h1, potom h2, …), zoznamy ako zoznamy, tabuľky ako tabuľky. Čítačka podľa toho človeka navádza. Div so zväčšeným písmom nie je nadpis.

Pohyb a animácie

Ak na webe niečo samo beží dlhšie ako pár sekúnd (karusel, animácia), musí sa to dať zastaviť. A je slušné rešpektovať nastavenie systému „obmedziť pohyb“:

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Jazyk

<html lang="sk"> — aby čítačka čítala po slovensky, nie s anglickou výslovnosťou.

Ako to otestovať bez drahých nástrojov

Odložte myš. Prejdite celý web len klávesnicou. Dostanete sa všade? Vidíte, kde ste?
Zapnite čítačku. Na Macu VoiceOver (Cmd + F5), na Windows NVDA (zadarmo). Stačí pár minút a pochopíte viac než z hodiny čítania.
Automatická kontrola. Nástroj axe (rozšírenie do prehliadača alebo knižnica do testov) alebo Lighthouse v Chrome nájdu veľkú časť technických chýb. Nenájdu všetko — len to, čo sa dá zmerať strojom.
Zväčšite písmo na 200 %. Web sa nesmie rozpadnúť ani schovať obsah.
Kontrast merajte v prehliadači, nie v dizajnovom nástroji. Prečo, o tom je samostatný článok.

Úloha na precvičenie: päťminútový audit

Vyberte si ľubovoľný web (pokojne vlastný) a skúste:

Stlačte Tab desaťkrát. Viete po celý čas, kde ste?
Zapnite čítačku a nechajte si prečítať hlavnú navigáciu. Dáva zmysel bez toho, aby ste videli obrazovku?
Pozrite sa na formulár: majú všetky polia popis aj vtedy, keď do nich začnete písať?
Zväčšite stránku na 200 %. Dá sa ešte používať?
Spustite Lighthouse a pozrite sa na časť Accessibility.

Za päť minút budete o webe vedieť viac než z hodiny rozprávania o ňom.

Časté otázky

Stačí mať „prístupnostný“ plugin, ktorý zväčší písmo? Nie. Také doplnky zvyčajne neopravia základné chyby v HTML a niekedy prístupnosť dokonca zhoršia. Prístupnosť sa robí v samotnom webe.

Musí byť prístupné aj PDF na webe? Dokumenty, ktoré zverejňujete, by mali byť čitateľné — ideálne ako text, nie sken. Pri verejnom sektore je to súčasť požiadaviek, detaily si overte v predpisoch.

Koľko to stojí navyše? Keď sa na prístupnosť myslí od začiatku, veľmi málo. Drahé je dorábať ju do hotového webu.

Prečo sa to oplatí aj mimo zákona

Prístupný web je zvyčajne aj rýchlejší, prehľadnejší a lepšie ho chápu vyhľadávače aj AI asistenti. Čistá štruktúra, zrozumiteľné texty a funkčné ovládanie pomáhajú každému.

A ešte jedna vec: raz budeme starší všetci. Web, ktorý robíte dnes, možno o dvadsať rokov budete používať s horším zrakom vy.

Zdroje: W3C, Web Content Accessibility Guidelines (WCAG) 2.1, w3.org/TR/WCAG21; Smernica (EÚ) 2016/2102 a Smernica (EÚ) 2019/882, eur-lex.europa.eu.