Čo je to WCAG ? A ako na weby, ktoré sú použiteľné pre všetkých ?
Prístupnosť je o ľuďoch, nie len o nariadeniach z ÉU. Web, ktorý myslí na znevýhodnených používateľov, robí život jednoduchší pre každého. A práve to rieši WCAG.
Denis Miglierini·10. June 2025·
7 min.
Čo je WCAG?
WCAG znamená Web Content Accessibility Guidelines. Je to súbor pravidiel, ako navrhovať a programovať weby, aby boli prístupné pre všetkých a teda aj pre ľudí:
so zrakovým znevýhodnením,
ktorí nemôžu používať myš,
s poruchami pozornosti, čítania alebo farbocitu.
s poruchou sluchu
Od 28. Júna 2025 bude väčšina digitálnych služieb v EÚ povinne prístupná, podľa zákona EAA (European Accessibility Act). WCAG 2.1 AA je jeho základom.
6 hlavných princípov prístupného dizajnu
Dôležité: Nasledujúce tipy slúžia len na informačné účely a nemali by sa považovať za právne poradenstvo.
1. Dostatočný kontrast farieb
Slabý kontrast medzi textom a pozadím výrazne znižuje čitateľnosť. Problém nastáva najmä pri slabšom zraku, zhoršených svetelných podmienkach alebo na mobiloch na priamom slnku kedy text splýva a používateľ ho jednoducho nevidí.
Odporúčania:
Text musí mať minimálne 4.5:1 (AA) alebo 7:1 (AAA) kontrast voči pozadiu
Nepoužívajte iba farbu na vyjadrenie významu, doplňte ju o ikonu, tvar alebo vzor.
Príliš malé písmo komplikuje čítanie a zvyšuje únavu očí. Malý text môže byť bariérou, kvôli ktorej sa k obsahu užívatelia ani nedostanú.
Odporúčania:
Bežný text: min. 16 px (1rem)
Používaj rem, rešpektuje systémové nastavenia
Nepoužívaj user-scalable=no, zakazuje priblíženie obsahu na mobile.Používateľ si tak nemôže zväčšiť text
Stránka musí zvládnuť 200 % priblíženie bez rozbitia rozhrania.Texty sa musia zalomiť, nič nesmie pretekať mimo obrazovku.
Ako to otestovať ? :
Priblíž vo svojom prehliadači stránku na 200% a sleduj či sa nerozbije jej layout
V Chrome otvor DevTools → panel Lighthouse a spusti audit na „Accessibility“ → Ak texty sú príliš malé alebo zoom nefunguje, uvidíš to medzi chybami
Na mobile si v nastaveniach zvačši systémovú veľkosť písma, otvor stránku a sleduj či sa texty prispôsobili
3. Ovládanie klávesnicou
Nie každý používa myš, stránka musí byť plne ovládateľná aj pomocou klávesnice (najmä cez TAB). Ak chýba vizuálny focus stav, používateľ netuší, kde sa na stránke nachádza.
Odporúčania:
Každý interaktívny prvok musí mať viditeľný :focus stav
Klikateľné prvky typu <div>, musia mať role="button" a tabindex="0", bez nich ich ovládanie cez TAB nebude vedieť identifikovať.
Modálne okná musia byť focusovateľné a zatvárateľné aj klávesnicou (napr. ESC)
Neodstraňuj :focus bez náhrady! Ani na mobiloch, externé klávesnice, čítačky obrazovky a hlasové ovládanie ho stále využívajú
Ako to otestovať ?
Vyskúšaj, či dokážeš prejsť stránkou bez použitia myši. Stačí obyčajná klávesnica, žiadne špeciálne nástroje.
Stlač TAB, prepínaj sa medzi prvkami (tlačidlá, odkazy, formuláre) → Vidíš focus stav (obrys)?
Stlač ENTER, aktivuj tlačidlo alebo odkaz → Funguje očakávaná akcia?
Otvor modálne okno a stlač ESC → Zavrie sa správne?
Použi SHIFT + TAB na pohyb späť
Skús sa vrátiť na predchádzajúcu stránku (Backspace alebo ALT + ←, Na Macu CMD + ← )
4. Zrozumiteľné formuláre
Formuláre sú najkritickejším bodom konverzie na webe. Pokiaľ nefungujú správne a nevedú používateľa dostatočne k akcii, môže to viesť k frustrácii alebo k predčasnému opusteniu stránky. Chýbajúce popisy polí, nejasné alebo neviditeľné hlásenia chýb a nedostatočná spätná väzba spôsobujú, že používateľ netuší, čo má zadať, kde spravil chybu alebo prečo sa formulár neodoslal.
Odporúčania:
Každé pole musí mať vlastný <label> element, aj keď je vizuálne skrytý
Nepoužívaj len placeholder ako jediný popis poľa, po začatí písania zmizne
Chyby komunikuj jasne a kombinovane
Použi text („Zadajte platný email“), vizuálne zvýraznenie (napr. červený rámik) a ikonu. Vyhni sa nejasným technickým kódom ako „Chyba 102“.
Formulár musí byť ovládateľný aj klávesnicou, každý vstup má mať focus stav
Poradie vstupov (tabindex) musí byť logické, tak ako očakáva používateľ
Interaktívna plocha (napr. input, checkbox, tlačidlo) má mať min. 44 × 44 px, ideálne 48 × 48 px pre pohodlné ovládanie na mobile
Ako to otestovať?
Skús odoslať formulár prázdny → Zobrazia sa jasné hlášky pri každom poli?
Skús napísať nesprávny formát emailu alebo hesla → Vidíš chybu bez červeného chaosu?
Skús prejsť formulár pomocou TAB → Je poradie logické a zreteľné?
Každé pole musí mať správne prepojený popis (<label> alebo aria-label), aby mu rozumel aj používateľ s čítačkou obrazovky.
5. Alternatívne texty pre obrázky
Používatelia, ktorí nevidia obrázky (napr. nevidiaci alebo užívateľ so slabým internetovým pripojením), prichádzajú o dôležité informácie. Bez alternatívneho textu (alt text) im čítačka obrazovky nedokáže sprostredkovať význam obrázku, čím sa vytráca kontext aj funkcia obrázkov.
Odporúčania:
Každý informačný obrázok musí mať výstižný alt text, čo by si povedal človeku, ktorý obrázok nevidí?
Dekoratívne obrázky (napr. ikonky v pozadí, oddeľovacie čiary) nech majú alt="" alebo role="presentation", čítačka ich preskočí
Obrázkové tlačidlá a odkazy musia mať aria-label alebo výstižný alt, používateľ musí vedieť, kam sa dostane
Ako to otestovať:
Zakáž načítavanie obrázkov (napr. v DevTools), chápeš, čo tam malo byť z popisu obrázka ?
6. Zrozumiteľný a čitateľný obsah
Používatelia nerozumejú zložitému alebo technickému textu. Odborný žargon, dlhé súvetia alebo nejasné inštrukcie spôsobujú zmätok. A to sa netýka len ľudí so znevýhodnením ale každého, kto číta rýchlo, v strese alebo na mobile. Ak nerozumieš neklikáš. A to je smrť konverzie.
Odporúčania:
Píškrátko, jasne a aktívne, ako keby si to vysvetľoval človeku pri stole
Nepoužívaj „odborný slang“, alebo ho vysvetli jednoducho
Dávaj si pozor na:
príliš formálne alebo úradnícke formulácie
nadmerné používanie pasív
celovelké slová (VŠETKO VEĽKÝM = ťažšie čitateľné)
Rozdeľuj obsah na krátke odseky a podnadpisy
Pri zložitých častiach použi ikonu, príklad alebo zvýraznenie
Ako otestovať:
Prečítaj text nahlas, znie to prirodzene, alebo ako by si písal diplomovku?
Daj text niekomu mimo tvojho odboru, pochopí, o čom hovoríš?
Znie to ako tvoj otravný kamoš, čo do každej druhej vety dáva random anglické slová?
Ak áno, prepíš to. Tvoj web nie je TED talk.
Zhrnutie
Ak si sa dostal až sem a tvoj web spĺňa všetko, čo by mal, tak klobúk dole. Robíš to poriadne. A ak nie úplne? Je to taktiež poriadku. Úprimne ani náš nie je dokonalý. Priebežne ladíme, čo sa dá… Najmä tie alt popisy. Na tie stále zabúdame. Asi si to napíšeme niekde nad stôl. 🙂
Dôležité je, že na to myslíš. Pretože prístupný web nie je len o príkazoch zo strany EÚ, ale o rešpekte voči všetkým, ktorí ho používajú. Zlepšíš tým nielen UX, ale aj SEO, dôveru v značku… a úprimne, aj pocit z dobre odvedenej práce.
Čo je to WCAG ? A ako na weby, ktoré sú použiteľné pre všetkých ?
Warning: Undefined array key 0 in /data/6/c/6c1270e7-b217-4b77-b561-e30f1214834f/pomasle.studio/web/wp-content/plugins/nextbricks/elements/bc_image_reveal.php on line 267
Čo je WCAG?
WCAG znamená Web Content Accessibility Guidelines. Je to súbor pravidiel, ako navrhovať a programovať weby, aby boli prístupné pre všetkých a teda aj pre ľudí:
so zrakovým znevýhodnením,
ktorí nemôžu používať myš,
s poruchami pozornosti, čítania alebo farbocitu.
s poruchou sluchu
Od 28. Júna 2025 bude väčšina digitálnych služieb v EÚ povinne prístupná, podľa zákona EAA (European Accessibility Act). WCAG 2.1 AA je jeho základom.
6 hlavných princípov prístupného dizajnu
Dôležité: Nasledujúce tipy slúžia len na informačné účely a nemali by sa považovať za právne poradenstvo.
1. Dostatočný kontrast farieb
Slabý kontrast medzi textom a pozadím výrazne znižuje čitateľnosť. Problém nastáva najmä pri slabšom zraku, zhoršených svetelných podmienkach alebo na mobiloch na priamom slnku kedy text splýva a používateľ ho jednoducho nevidí.
Odporúčania:
Text musí mať minimálne 4.5:1 (AA) alebo 7:1 (AAA) kontrast voči pozadiu
Nepoužívajte iba farbu na vyjadrenie významu, doplňte ju o ikonu, tvar alebo vzor.
Príliš malé písmo komplikuje čítanie a zvyšuje únavu očí. Malý text môže byť bariérou, kvôli ktorej sa k obsahu užívatelia ani nedostanú.
Odporúčania:
Bežný text: min. 16 px (1rem)
Používaj rem, rešpektuje systémové nastavenia
Nepoužívaj user-scalable=no, zakazuje priblíženie obsahu na mobile.Používateľ si tak nemôže zväčšiť text
Stránka musí zvládnuť 200 % priblíženie bez rozbitia rozhrania.Texty sa musia zalomiť, nič nesmie pretekať mimo obrazovku.
Ako to otestovať ? :
Priblíž vo svojom prehliadači stránku na 200% a sleduj či sa nerozbije jej layout
V Chrome otvor DevTools → panel Lighthouse a spusti audit na „Accessibility“ → Ak texty sú príliš malé alebo zoom nefunguje, uvidíš to medzi chybami
Na mobile si v nastaveniach zvačši systémovú veľkosť písma, otvor stránku a sleduj či sa texty prispôsobili
3. Ovládanie klávesnicou
Nie každý používa myš, stránka musí byť plne ovládateľná aj pomocou klávesnice (najmä cez TAB). Ak chýba vizuálny focus stav, používateľ netuší, kde sa na stránke nachádza.
Odporúčania:
Každý interaktívny prvok musí mať viditeľný :focus stav
Klikateľné prvky typu <div>, musia mať role="button" a tabindex="0", bez nich ich ovládanie cez TAB nebude vedieť identifikovať.
Modálne okná musia byť focusovateľné a zatvárateľné aj klávesnicou (napr. ESC)
Neodstraňuj :focus bez náhrady! Ani na mobiloch, externé klávesnice, čítačky obrazovky a hlasové ovládanie ho stále využívajú
Ako to otestovať ?
Vyskúšaj, či dokážeš prejsť stránkou bez použitia myši. Stačí obyčajná klávesnica, žiadne špeciálne nástroje.
Stlač TAB, prepínaj sa medzi prvkami (tlačidlá, odkazy, formuláre) → Vidíš focus stav (obrys)?
Stlač ENTER, aktivuj tlačidlo alebo odkaz → Funguje očakávaná akcia?
Otvor modálne okno a stlač ESC → Zavrie sa správne?
Použi SHIFT + TAB na pohyb späť
Skús sa vrátiť na predchádzajúcu stránku (Backspace alebo ALT + ←, Na Macu CMD + ← )
4. Zrozumiteľné formuláre
Formuláre sú najkritickejším bodom konverzie na webe. Pokiaľ nefungujú správne a nevedú používateľa dostatočne k akcii, môže to viesť k frustrácii alebo k predčasnému opusteniu stránky. Chýbajúce popisy polí, nejasné alebo neviditeľné hlásenia chýb a nedostatočná spätná väzba spôsobujú, že používateľ netuší, čo má zadať, kde spravil chybu alebo prečo sa formulár neodoslal.
Odporúčania:
Každé pole musí mať vlastný <label> element, aj keď je vizuálne skrytý
Nepoužívaj len placeholder ako jediný popis poľa, po začatí písania zmizne
Chyby komunikuj jasne a kombinovane
Použi text („Zadajte platný email“), vizuálne zvýraznenie (napr. červený rámik) a ikonu. Vyhni sa nejasným technickým kódom ako „Chyba 102“.
Formulár musí byť ovládateľný aj klávesnicou, každý vstup má mať focus stav
Poradie vstupov (tabindex) musí byť logické, tak ako očakáva používateľ
Interaktívna plocha (napr. input, checkbox, tlačidlo) má mať min. 44 × 44 px, ideálne 48 × 48 px pre pohodlné ovládanie na mobile
Ako to otestovať?
Skús odoslať formulár prázdny → Zobrazia sa jasné hlášky pri každom poli?
Skús napísať nesprávny formát emailu alebo hesla → Vidíš chybu bez červeného chaosu?
Skús prejsť formulár pomocou TAB → Je poradie logické a zreteľné?
Každé pole musí mať správne prepojený popis (<label> alebo aria-label), aby mu rozumel aj používateľ s čítačkou obrazovky.
5. Alternatívne texty pre obrázky
Používatelia, ktorí nevidia obrázky (napr. nevidiaci alebo užívateľ so slabým internetovým pripojením), prichádzajú o dôležité informácie. Bez alternatívneho textu (alt text) im čítačka obrazovky nedokáže sprostredkovať význam obrázku, čím sa vytráca kontext aj funkcia obrázkov.
Odporúčania:
Každý informačný obrázok musí mať výstižný alt text, čo by si povedal človeku, ktorý obrázok nevidí?
Dekoratívne obrázky (napr. ikonky v pozadí, oddeľovacie čiary) nech majú alt="" alebo role="presentation", čítačka ich preskočí
Obrázkové tlačidlá a odkazy musia mať aria-label alebo výstižný alt, používateľ musí vedieť, kam sa dostane
Ako to otestovať:
Zakáž načítavanie obrázkov (napr. v DevTools), chápeš, čo tam malo byť z popisu obrázka ?
6. Zrozumiteľný a čitateľný obsah
Používatelia nerozumejú zložitému alebo technickému textu. Odborný žargon, dlhé súvetia alebo nejasné inštrukcie spôsobujú zmätok. A to sa netýka len ľudí so znevýhodnením ale každého, kto číta rýchlo, v strese alebo na mobile. Ak nerozumieš neklikáš. A to je smrť konverzie.
Odporúčania:
Píškrátko, jasne a aktívne, ako keby si to vysvetľoval človeku pri stole
Nepoužívaj „odborný slang“, alebo ho vysvetli jednoducho
Dávaj si pozor na:
príliš formálne alebo úradnícke formulácie
nadmerné používanie pasív
celovelké slová (VŠETKO VEĽKÝM = ťažšie čitateľné)
Rozdeľuj obsah na krátke odseky a podnadpisy
Pri zložitých častiach použi ikonu, príklad alebo zvýraznenie
Ako otestovať:
Prečítaj text nahlas, znie to prirodzene, alebo ako by si písal diplomovku?
Daj text niekomu mimo tvojho odboru, pochopí, o čom hovoríš?
Znie to ako tvoj otravný kamoš, čo do každej druhej vety dáva random anglické slová?
Ak áno, prepíš to. Tvoj web nie je TED talk.
Zhrnutie
Ak si sa dostal až sem a tvoj web spĺňa všetko, čo by mal, tak klobúk dole. Robíš to poriadne. A ak nie úplne? Je to taktiež poriadku. Úprimne ani náš nie je dokonalý. Priebežne ladíme, čo sa dá… Najmä tie alt popisy. Na tie stále zabúdame. Asi si to napíšeme niekde nad stôl. 🙂
Dôležité je, že na to myslíš. Pretože prístupný web nie je len o príkazoch zo strany EÚ, ale o rešpekte voči všetkým, ktorí ho používajú. Zlepšíš tým nielen UX, ale aj SEO, dôveru v značku… a úprimne, aj pocit z dobre odvedenej práce.