Prístupnosť webu pre firmy: čo je WCAG, koho sa týka zákon a čo opraviť ako prvé
Čo je prístupnosť webu, WCAG 2.2 AA v bežnej reči, koho sa týka slovenský zákon, tabuľka najčastejších chýb, 12 otázok na vlastnú kontrolu a čo opraviť za jeden večer. Nejde o právne poradenstvo.
Tento článek je zatím dostupný jen ve slovenštině.
- Prístupnosť webu znamená, že ho dokážu používať aj ľudia so zrakovým, sluchovým alebo pohybovým obmedzením, starší ľudia a ľudia v zlých podmienkach (slnko na displeji, jedna ruka), pričom bežným cieľom sú pravidlá WCAG 2.2 úrovne AA.
- Zákon č. 351/2022 Z. z. platí v praxi od 28. júna 2025, týka sa aj e-shopov a online služieb a nevzťahuje sa na služby poskytované mikropodnikom, nejde však o právne poradenstvo, takže si vlastnú situáciu overte.
- Najčastejšie chyby sú slabý kontrast, chýbajúce alt texty, web neovládateľný klávesnicou, formuláre bez popisov, chaotické nadpisy a tlačidlá s nejasným názvom, pričom časť z nich sa dá opraviť za jeden večer.
Prístupnosť webu znamená, že web dokážu používať aj ľudia so zrakovým, sluchovým, pohybovým alebo poznávacím obmedzením, a v praxi sa meria podľa pravidiel WCAG (Web Content Accessibility Guidelines, medzinárodné pravidlá prístupného webu), najčastejšie na úrovni AA. Na Slovensku platí zákon o prístupnosti výrobkov a služieb, ktorý sa týka aj e-shopov a online služieb, ale nevzťahuje sa na služby poskytované mikropodnikom. Väčšina opráv je drobná a zlepší web pre všetkých návštevníkov. Tento článok nie je právne poradenstvo, preto si vlastnú situáciu overte.
Čo je prístupnosť webu a komu pomáha
Prístupnosť webu je vlastnosť, vďaka ktorej web dokáže použiť čo najviac ľudí vrátane tých, ktorí nevidia, nepočujú, nevedia ovládať myš alebo potrebujú viac času na pochopenie. Nejde len o trvalé postihnutie. Pomáha aj v týchto situáciách:
- Trvalé obmedzenie: slabozraký človek si zväčšuje písmo, nevidiaci používa čítačku obrazovky (program, ktorý číta obsah webu nahlas), nepočujúci potrebuje titulky k videu, človek s trasom rúk ovláda web klávesnicou.
- Dočasné obmedzenie: zlomená ruka, operácia oka, zranený prst.
- Vek: starší zákazníci často potrebujú väčšie písmo, výraznejší kontrast a väčšie tlačidlá.
- Situácia: slnko na displeji telefónu, jedna ruka voľná (v druhej je dieťa alebo nákup), hlučné prostredie bez zvuku, slabý signál.
Príklad: kaderníctvo má rezervačný formulár so svetlosivým textom na bielom pozadí. V kancelárii vyzerá elegantne. Na terase na slnku ho nikto neprečíta a staršia zákazníčka ho neprečíta ani doma. Oprava je zmena jednej farby.
WCAG 2.2 AA v bežnej reči
WCAG vydáva W3C (organizácia, ktorá určuje štandardy webu). Pravidlá stoja na štyroch zásadách: web má byť vnímateľný (dá sa vidieť alebo počuť), ovládateľný (dá sa použiť myšou, dotykom aj klávesnicou), zrozumiteľný (jasný text a predvídateľné správanie) a odolný (funguje v rôznych prehliadačoch a s pomôckami). Pravidlá majú tri úrovne: A (základ), AA (bežný cieľ webov) a AAA (najvyššia). Úroveň AA teda znamená splnené kritériá úrovní A aj AA.
Čísla, ktoré sa oplatí poznať:
- kontrast bežného textu voči pozadiu aspoň 4,5 : 1 (číslo vyjadruje rozdiel svetlosti dvoch farieb, čierna na bielom má 21 : 1),
- kontrast veľkého textu (cca 24 px alebo 19 px tučne a viac) a prvkov rozhrania, ako sú okraje polí alebo ikony, aspoň 3 : 1,
- WCAG 2.2 pridáva minimálnu veľkosť cieľa kliknutia 24 × 24 CSS pixelov (CSS pixel je jednotka, v ktorej web počíta rozmery),
- platformy pre dotykové ovládanie odporúčajú okolo 44 × 44 bodov (Apple) a 48 × 48 dp (Android Material).
AA nie je záruka, že web pohodlne použije každý. Je to uznávaná a overiteľná úroveň, ktorá je pre bežný firemný web realistický cieľ.
Chcete to mať hotové bez starostí? Pošlite nám pár viet o zadaní a cenovú ponuku dostanete do 48 hodín, zadarmo a bez záväzkov.
Koho sa týka zákon
Nejde o právne poradenstvo. Nasledujúce body sú stručné zhrnutie a vlastnú situáciu si overte.
- Zákon č. 351/2022 Z. z. o prístupnosti výrobkov a služieb pre osoby so zdravotným postihnutím platí v praxi od 28. júna 2025.
- Týka sa aj e-shopov a online služieb.
- Nevzťahuje sa na služby poskytované mikropodnikom, teda firmou s menej ako 10 zamestnancami a ročným obratom alebo bilančnou hodnotou do 2 miliónov eur.
- Technické požiadavky upravuje nariadenie vlády č. 283/2023 Z. z.; v praxi sa odkazuje na WCAG 2.2 a normu EN 301 549.
Z toho vyplýva rozdiel medzi firmami. Malá firma, ktorá spĺňa uvedenú hranicu mikropodniku, má v zákone výnimku pre svoje služby. Väčšia firma, ktorá predáva online alebo ponúka online službu, sa ním môže riadiť. Rozhoduje druh služby, počet zamestnancov a obrat, a to posúdite vy alebo právnik, nie tento článok.
Aj keď sa vás zákon netýka, pravidlá sa oplatí brať ako zoznam dobrých zvykov: prístupný web je prehľadnejší pre všetkých.
Najčastejšie chyby a ich oprava
| Chyba | Prečo vadí | Oprava |
|---|---|---|
| Slabý kontrast (sivý text na bielom) | Text sa nedá prečítať na slnku ani pri slabšom zraku. | Bežný text aspoň 4,5 : 1, veľký text a prvky rozhrania aspoň 3 : 1. |
| Obrázky bez alt textu | Nevidiaci nevie, čo je na obrázku. Ak sa obrázok nenačíta, nevidí to nikto. | Krátky popis toho, čo obrázok ukazuje. Čisto ozdobné obrázky dostanú prázdny popis. |
| Web sa nedá ovládať klávesnicou | Človek, ktorý nemôže používať myš, sa nedostane k menu ani k formuláru. | Klávesom Tab sa dá prejsť všetko, vybraný prvok je vidieť, menu a okná sa dajú zatvoriť klávesom Esc. |
| Formuláre bez popisov a bez zrozumiteľných chýb | Čítačka obrazovky nevie pole pomenovať. Sivý text v poli zmizne a človek zabudne, čo malo byť. | Viditeľný popis pri každom poli, chyba napísaná slovami pri poli. |
| Chaotické nadpisy | Čítačky obrazovky aj rýchli čitatelia používajú nadpisy ako obsah stránky. | Jeden hlavný nadpis (H1), potom H2 a H3 v logickom poradí. Nadpis nepoužívať len na zväčšenie písma. |
| Tlačidlá a odkazy s nejasným názvom („Viac“, „Kliknite sem“, ikona bez textu) | Čítačka obrazovky vie vypísať zoznam odkazov bez okolitého textu a „Viac“ v ňom nepovie nič. | Názov hovorí cieľ: „Cenník služieb“, „Objednať termín“. Ikona dostane textový názov. |
Kontrast zmeriate v nástroji kalkulačka kontrastu dvoch farieb, ktorý vypočíta pomer a ukáže, či farby spĺňajú hranice. Vysvetlenie pojmu nájdete v slovníku pod heslom kontrast farieb. Ako písať popisy obrázkov, vysvetľuje pojem alt text, a ako poskladať nadpisy, pojem nadpisy H1 a H2.
12 otázok na vlastnú kontrolu
Odpovedajte áno alebo nie. „Áno“ je dobrá odpoveď a každé „nie“ je jedna konkrétna oprava. Potrebujete prehliadač, klávesnicu a cca 20 minút. Klávesnicu otestujete tak, že myš odložíte a prejdete web klávesom Tab (späť Shift + Tab). Zväčšenie na 200 % overíte klávesmi Ctrl a plus (na Macu Cmd a plus) alebo v nastavení prehliadača. Alt texty zistíte v editore obrázka v poli pre alternatívny text alebo sa opýtajte správcu webu.
- Má bežný text kontrast aspoň 4,5 : 1 voči pozadiu?
- Majú veľký text a prvky rozhrania (okraje polí, ikony) kontrast aspoň 3 : 1?
- Majú obrázky, ktoré nesú informáciu, krátky alt text?
- Dá sa web celý ovládať klávesnicou (kláves Tab)?
- Je pri ovládaní klávesnicou vždy vidieť, ktorý prvok je práve vybraný?
- Má každé pole formulára viditeľný popis?
- Píšu chybové hlásenia slovami, čo je zle a ako to opraviť?
- Má každá stránka jeden hlavný nadpis (H1) a ďalšie nadpisy v logickom poradí?
- Je z textu každého odkazu a tlačidla jasné, kam vedie alebo čo urobí?
- Je dôležitá informácia označená aj inak ako len farbou?
- Majú tlačidlá a odkazy na dotykovom displeji aspoň 24 × 24 CSS pixelov?
- Dá sa text zväčšiť na 200 % bez straty obsahu alebo funkcií?
Rovnakých 12 otázok nájdete aj v nástroji Kontrola prístupnosti webu. Kontrolu po jednotlivých oblastiach rozoberá myšlienková mapa Prístupný web: kontrola. Zoznam je orientačný a nenahrádza plný audit podľa WCAG, ktorý má desiatky kritérií. Automatické nástroje zachytia len časť chýb (napríklad chýbajúci alt text alebo slabý kontrast), nie to, či je popis zmysluplný alebo či sa web pohodlne ovláda klávesnicou. Ručná kontrola je preto nevyhnutná.
Kto čo robí: firma, dizajnér, programátor
| Rola | Čo robí pre prístupnosť | Príklad |
|---|---|---|
| Firma (zadávateľ) | Rozhodne, že prístupnosť je požiadavka, píše jasné texty a názvy odkazov, dodáva obrázky s popisom a videá s titulkami, kontroluje web po každej zmene. | Alt text k novej fotke produktu, odkaz „Cenník služieb“ namiesto „Viac“. |
| Dizajnér | Navrhne farby s dostatočným kontrastom, čitateľné písmo, dostatočne veľké ciele kliknutia, viditeľný výber prvku a chyby označené aj textom. | Tlačidlo s kontrastom aspoň 3 : 1 voči pozadiu a výrazným rámom pri výbere klávesnicou. |
| Programátor | Správne označí nadpisy, zoznamy a polia formulára, zabezpečí ovládanie klávesnicou a správne poradie prvkov a otestuje web s čítačkou obrazovky. | Popis priradený ku každému poľu formulára, menu zatvárateľné klávesom Esc. |
Čítačka obrazovky je program, ktorý obsah webu číta nahlas. Zdarma sa dá vyskúšať napríklad NVDA na počítači s Windows alebo VoiceOver, ktorý je súčasťou iPhonu. Prvé počúvanie vlastného webu je často poučné.
Čo sa dá urobiť za jeden večer
Bez programátora a bez prerábania webu zvládnete väčšinu týchto krokov v editore alebo s malou pomocou:
- Prejdite web klávesom Tab a zapíšte si, kde sa stratíte alebo kde nevidno výber (cca 15 minút).
- Zväčšite stránku na 200 % a pozrite, či sa niečo neprekrýva alebo nezmizne.
- Overte kontrast hlavných farieb: text, tlačidlá, odkazy a okraje polí.
- Doplňte alt texty k najdôležitejším obrázkom: úvod, produkty, kontakt.
- Premenujte odkazy „Viac“ a „Kliknite sem“ na konkrétne názvy.
- Doplňte viditeľné popisy k poliam formulára a skontrolujte, že každá stránka má jeden hlavný nadpis.
Čo neopravíte za večer: celkový kontrast v šablóne, ovládanie klávesnicou v menu a vo formulároch, označenie prvkov pre čítačky obrazovky. To patrí dizajnérovi a programátorovi. Ak je web starý a oprava by znamenala zásah do celej šablóny, oplatí sa riešiť prístupnosť v rámci redizajnu webu. Pri novom návrhu ju do zadania napíšte hneď: požiadavka „WCAG 2.2 úroveň AA“ je jasná a overiteľná.
Časté otázky
Musí mať môj web prístupnosť podľa zákona?
Záleží na druhu služby a veľkosti firmy. Zákon č. 351/2022 Z. z. sa týka aj e-shopov a online služieb a nevzťahuje sa na služby poskytované mikropodnikom (menej ako 10 zamestnancov a ročný obrat alebo bilančná hodnota do 2 miliónov eur). Nejde o právne poradenstvo, vlastnú situáciu si overte.
Čo znamená WCAG 2.2 AA?
WCAG 2.2 je verzia medzinárodných pravidiel prístupného webu a AA je ich bežný cieľ pre weby. Zahŕňa napríklad kontrast textu aspoň 4,5 : 1, ovládanie klávesnicou, popisy obrázkov a formulárov a minimálnu veľkosť cieľa kliknutia 24 × 24 CSS pixelov.
Ako zistím, či je môj web prístupný?
Prejdite 12 otázok z tohto článku, doplňte ich klávesom Tab a zväčšením na 200 % a skúste web raz vypočuť čítačkou obrazovky. Pri e-shope alebo službe, ktorá by sa mohla riadiť zákonom, zvážte kontrolu odborníkom.
Čo je alt text a čo doň napísať?
Je to krátky popis obrázka pre ľudí, ktorí ho nevidia. Napíšte, čo obrázok ukazuje a prečo tam je (napríklad „Kaderníčka strihá klientke vlasy“, nie „foto123“). Čisto ozdobný obrázok dostane prázdny popis.
Chcete web, na ktorom prístupnosť záleží od začiatku?
Napíšte nám, aký web potrebujete a že na prístupnosti vám záleží. Ponuku pošleme do 48 hodín. Stačí kontaktný formulár. Ešte raz: tento článok nie je právne poradenstvo a vlastnú situáciu si treba overiť.
Chcete totéž pro svou značku?
Napište nám pár vět o svém záměru a do pár hodin v pracovní den se ozveme s návrhem postupu.