Dohodnime si stretnutie
Napíšme si

Č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.
Prístupný Web cover obrázok - WCAG

Č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í.

Kontrastný pomer ukážka, minimálny a dostatočný kontrast

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.

Tooly na overenie kontrastu:

2. Čitateľné písmo a možnosť zväčšenia

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ú.

Znázornenie malej a dostatočnej veľkosti písma, dôležitej pre prístupnosť webovej stránky

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.

Ukážka prístupnej navigácie pomocou klávesnice.

Odporúčania:

  • Každý interaktívny prvok musí mať viditeľný :focus stav
  • Klikateľné prvky typu <div>, musia mať role="button"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.

  1. Stlač TAB, prepínaj sa medzi prvkami (tlačidlá, odkazy, formuláre)
    Vidíš focus stav (obrys)?
  2. Stlač ENTER, aktivuj tlačidlo alebo odkaz
    Funguje očakávaná akcia?
  3. Otvor modálne okno a stlač ESC
    Zavrie sa správne?
  4. Použi SHIFT + TAB na pohyb späť
  5. 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.

Ukážka formuláru so spatnou väzbou teda chybovou hláškou

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.

Vysvetlenie alternatívnych popisov na príkladoch

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.

Príklad nezrozumiteľného a zrozumiteľného obsahu na webe

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.

Ak si chceš overiť, ako na tom tvoj web je, sme tu.
Stačí sa ozvať pomôžeme ti s auditom.

O projekte

Č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í.

Kontrastný pomer ukážka, minimálny a dostatočný kontrast

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.

Tooly na overenie kontrastu:

2. Čitateľné písmo a možnosť zväčšenia

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ú.

Znázornenie malej a dostatočnej veľkosti písma, dôležitej pre prístupnosť webovej stránky

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.

Ukážka prístupnej navigácie pomocou klávesnice.

Odporúčania:

  • Každý interaktívny prvok musí mať viditeľný :focus stav
  • Klikateľné prvky typu <div>, musia mať role="button"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.

  1. Stlač TAB, prepínaj sa medzi prvkami (tlačidlá, odkazy, formuláre)
    Vidíš focus stav (obrys)?
  2. Stlač ENTER, aktivuj tlačidlo alebo odkaz
    Funguje očakávaná akcia?
  3. Otvor modálne okno a stlač ESC
    Zavrie sa správne?
  4. Použi SHIFT + TAB na pohyb späť
  5. 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.

Ukážka formuláru so spatnou väzbou teda chybovou hláškou

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.

Vysvetlenie alternatívnych popisov na príkladoch

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.

Príklad nezrozumiteľného a zrozumiteľného obsahu na webe

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.

Ak si chceš overiť, ako na tom tvoj web je, sme tu.
Stačí sa ozvať pomôžeme ti s auditom.

ČO NA TO KLIENT?

"

#rozumiemeklientomAj vďaka tomu naše značky fungujú v reálnom svete.

Poďme sa porozprávať o vašej značkeNapíšte nám e-mail alebo si zarezervujte online konzultáciu zdarma.
Adam HrádelaProjektový manažér