💡 TL;DR
Od 28. júna 2025 musíš riešiť digitálnu prístupnosť podľa EU zákona. Ak robíš web, e-shop, SaaS pre zákazníkov, appku alebo niečo, čo používa verejnosť v EÚ, tento zákon sa týka aj teba– spĺňaj WCAG 2.1 AA. V tomto článku ti ukážem:
- Čo konkrétne musíš splniť
- Ako na ARIA atribúty
- Kedy použiť
aria-live - Príklady v HTML/JS
- Checklist pre tvoj tím
Tvoj web alebo aplikácia bude musieť byť dostupná aj pre ľudí so zdravotným znevýhodnením – či už ide o nevidiacich, slabozrakých, alebo ľudí, čo ovládajú web klávesnicou. Nie je to len o “WCAG” – je to povinnosť.
✅ Na čo sa zákon vzťahuje
- E-shopy
- Bankové appky a weby
- Booking systémy (letenky, hotely, doprava)
- Čítacie zariadenia (e-readery)
- Mobilné appky
- Softvér ako služba (SaaS)
- Elektronické dokumenty (PDF!)
Deadline: jún 2025
Ak si firma (aj malá) a predávaš alebo ponúkaš službu verejnosti, musíš byť ready.
Výnimky: Malé firmy (do 10 zamestnancov a obrat do 2 mil. EUR ročne) majú výnimku, ale ak používajú štandardizované knižnice alebo predpripravené riešenia, aj tie musia byť prístupné.
🧠 Prečo ťa to má zaujímať
Pretože ak ignoruješ prístupnosť, riskuješ:
- pokutu (áno, aj ako freelancer alebo agentúra),
- nefunkčný web pre 10–15 % ľudí (zrak, pohyb, kognitívne poruchy),
- zlé SEO a UX.
A hlavne – accessibility = dobrý vývoj. Bodka.
✅ Základ: WCAG 2.1 AA
Musíš dodržať tieto štyri princípy (skratka POUR):
| Princíp | Čo to znamená |
|---|---|
| Perceivable | Obsah sa dá vnímať – vidieť, počuť, čítať |
| Operable | Dá sa ovládať aj klávesnicou |
| Understandable | Je zrozumiteľný, logický |
| Robust | Funguje s čítačkami a asistenčnými technológiami |
📋 Čo to znamená pre vývojára?
Musíš dodržať pravidlá WCAG 2.1 AA (Web Content Accessibility Guidelines).
Nejde o nič zložité – väčšinu vieš pokryť dobrým HTML a trochu JS.
Tu sú hlavné oblasti, ktoré treba riešiť:
🎨 Farby: kontrast nie je len dizajn
Text musí mať minimálny kontrast 4.5:1 oproti pozadiu (okrem veľkého textu – ten stačí 3:1).
Overíš to jednoducho cez:
/* zlé */
color: #888;
background: #fff;
/* dobré */
color: #222;
background: #fff;🧭 Headings: kostra tvojho webu
Screenreadery používajú headingy ako mapu stránky.
Správna hierarchia = spokojný používateľ aj tester.
| HTML tag | Použitie |
|---|---|
<h1> | Hlavný nadpis stránky (iba jeden!) |
<h2> | Sekcie v rámci stránky |
<h3> | Podsekcie |
| <h4><h5><h6> | Podľa potreby |
🔥 Pravidlá:
- Nevynechávaj úrovne (
<h1>→<h3>= ❌) - Nepoužívaj headingy na dizajn, ale na obsah
- Nepoužívaj viackrát
<h1>na stránke (ani pre logo!)
✅ Dobrá štruktúra
<h1>Internetový obchod</h1>
<h2>Produkty</h2>
<h3>Elektronika</h3>
<h3>Domácnosť</h3>
<h2>O nás</h2>❌ Zlé príklady (čo sa deje v praxi)
<h1>Logo</h1> <!-- nikdy -->
<h3>Domov</h3> <!-- zbytočný heading -->
<h1>Produkty</h1>
<h4>Niečo</h4> <!-- chýba H2 a H3 -->Overenie: Použi napr. axe DevTools, alebo stlač H v screenreaderi a sleduj, či to dáva zmysel.
♿ ARIA: keď HTML nestačí
ARIA (Accessible Rich Internet Applications) ti pomôže doplniť význam tam, kde HTML nestačí.
Ale nepreháňaj to – ak môžeš použiť čisté HTML (<button>, <nav>, <section>, …), použi ho!
Čo sa často používa:
| Atribút | Použitie |
|---|---|
role="alert" | Automaticky oznámi zmenu |
aria-label="..." | Popisuje element |
aria-labelledby="el-id" | Odkazuje na element, ktorý popisuje element |
aria-describedby="el-one el-two" | Odkazuje na element(y), ktoré popisujú element |
aria-hidden="true" | Skryje element pre čítačky |
aria-live="polite" | Oznámi zmeny, keď bude čas |
aria-live="assertive" | Oznámi hneď (urgentné veci) |
📢 ARIA live v praxi
Chceš oznámiť používateľovi, že sa niečo zmenilo (napr. “Produkt bol pridaný do košíka”)?
<div aria-live="polite" id="live-region"></div>
<button onclick="addToCart()">Pridať do košíka</button>
<script>
function addToCart() {
document.getElementById("live-region").textContent = "Produkt bol pridaný do košíka";
}
</script>Tip: aria-live oblasti by mali byť viditeľné v DOMe od začiatku, aj keď sú prázdne.
⌨️ Ovládanie klávesnicou
Všetko, čo robíš myšou, musí byť dostupné aj cez klávesnicu:
- Tlačidlá =
tab→enter/space - Formuláre =
tab→shift+tab - Žiadne
onclickna<div>, ktoré nie sútabindex="0"a nemajúrole="button"
❌ Zlé:
<div onclick="doSomething()">Klikni ma</div>✅ Dobré:
<button onclick="doSomething()">Klikni ma</button>🧪 Ako testovať accessibility?
Minimálne:
- Keyboard only: Všetko sa dá ovládať bez myši
- Screenreader (napr. NVDA, VoiceOver)
- Automatizované testy:
🛠 Užitočné nástroje na testovanie accessibility
| Názov | Popis |
|---|---|
| HeadingsMap | Nástroj na kontrolu správnej štruktúry nadpisov. Funguje ako plugin do prehliadača Chrome. |
| Contrast Checker Chrome rozšírenie | Kontrola kontrastu medzi textom a pozadím podľa WCAG štandardov. |
| Editor rozloženia textu | Nástroj na vizuálnu kontrolu výšky riadkov, medzier a rozloženia textu – užitočný na testovanie čitateľnosti. |
| NVDA Reader(Windows ) | Open-source čítačka obrazovky pre Windows. Pomáha testovať alternatívne texty, klávesnicové ovládanie a ARIA atribúty. |
| Narrator (Windows) | Natívna čítačka obrazovky pre Windows. Aktivuje sa pomocou Ctrl + Win + Enter. |
| VoiceOver (macOS) | Natívna čítačka obrazovky pre používateľov Macu. Spustíte ju pomocou Command + F5. |
🔚 Záver: čo musíš splniť ako vývojár?
✅ Dodrž hierarchiu nadpisov
✅ Používaj dostatočný farebný kontrast
✅ Ovládanie cez klávesnicu
✅ Označuj dynamické zmeny cez aria-live
✅ Nepoužívaj zbytočne ARIA – keď stačí HTML
✅ Otestuj web aj bez myši a bez zraku