Prístupnosť webu nie je len o splnení zákonných požiadaviek – je to o tom, aby každý, bez ohľadu na svoje schopnosti, mohol digitálny obsah používať bez prekážok. Vytvorenie takéhoto webu je výzva, ale aj príležitosť ukázať, že nám na používateľoch záleží.
V tomto článku vám krok za krokom ukážem, ako sme vylepšili prístupnosť jedného z našich portálov, aké nástroje sme pri tom využili a ktoré postupy môžete aplikovať aj na svoje projekty, aby boli zrozumiteľné a funkčné pre všetkých.
Prečo je prístupnosť témou, ktorá vás musí zaujímať?
Prístupný web je taký, ktorý môžu bez problémov používať aj ľudia so zrakovým, sluchovým, fyzickým či kognitívnym postihnutím. Od júna 2025 bude prístupnosť webu povinná aj zo zákona vďaka Európskemu zákonu o prístupnosti (EAA). Viac o tejto téme sa dočítate aj na našom blogu.
My sme sa na prístupnosť pozreli v praxi a zlepšili ju tam, kde na nej naozaj záleží – na portáli drmaxnapredpis.sk. Práve weby spojené so zdravím totiž musia byť skutočne dostupné pre každého. Veď ich denne využívajú aj starší ľudia či osoby so zdravotným znevýhodnením, pre ktoré je online prístup k informáciám nevyhnutný.
Prístupnosť v praxi
Celé to začalo auditom dostupnosti. Ten nám ukázal, kde máme rezervy, a nasmeroval nás k prvým konkrétnym zmenám. Zamerali sme sa na štyri kľúčové oblasti: sémantickú štruktúru, navigáciu klávesnicou, ARIA atribúty a farebný kontrast.
1. Sémantická štruktúra HTML
Prvým krokom bola úprava HTML štruktúry, aby dávala zmysel nielen pre ľudí, ale aj pre technológie ako sú čítačky obrazovky. Použili sme správne sémantické značky, ktoré zlepšujú kontext pre vyhľadávacie nástroje aj pomocné technológie a uľahčujú tak používanie webu.
Ako na to?
- Vymeňte všeobecné <div> a <span> za HTML5 značky ako <header>, <nav>, <main>, <article> či <footer>podľa obsahu.
- Dbajte na to, aby mala každá stránka jediný <h1> nadpis, za ktorým logicky nasledujú <h2>, <h3> a ďalšie.
- Pre formuláre vždy používajte <label> s atribútom for, aby bolo jasné, čo kam patrí.
Tieto zmeny robia štruktúru prehľadnejšou a zlepšujú zážitok pre používateľov s asistenčnými technológiami.
Príklad v praxi:
❌ Predtým:
✅ Potom:
2. ARIA atribúty
Dynamické prvky, ako sú modálne okná či rozbaľovacie zoznamy, môžu byť pre čítačky obrazovky ťažko interpretovateľné. ARIA atribúty tu pomáhajú tým, že dodávajú štruktúre obsahu ďalšie informácie, ktoré štandardné HTML samo osebe neposkytuje.
Ako na to?
- Použite role=“navigation“ alebo značku <nav> na označenie hlavnej navigácie.
- S aria-live=“polite“ upozorníte na dynamické zmeny – napríklad v košíku.
- Atribúty aria-expanded a aria-hidden jasne ukazujú, či je obsah rozbalený alebo skrytý.
- Ak niečo nie je jednoznačné, pridajte aria-label pre lepší popis.
Príklad v praxi:
❌ Predtým:
✅ Potom:
3. Použiteľnosť klávesnice
Navigácia klávesnicou je nevyhnutná pre používateľov, ktorí sa po webe pohybujú bez myši, napríklad kvôli motorickým obmedzeniam. Zabezpečenie, aby boli všetky interaktívne prvky dostupné cez klávesnicu, zlepšuje použiteľnosť pre túto skupinu.
Ako na to?
- Skontrolujte, či sú všetky interaktívne prvky (tlačidlá, odkazy, formuláre) dostupné cez TAB. Ak nie, použite správne značky alebo atribút tabindex.
- Pri modálnych oknách presuňte fokus na okno pri otvorení a späť na stránku pri zatvorení. S JavaScriptom zabezpečte, aby fokus ostal v okne.
4. Farebný kontrast
Vysoký farebný kontrast je kľúčový pre používateľov so slabým zrakom alebo farbosleposťou, aby mohli obsah stránky dobre vnímať. Ak je kontrast slabý, text či prvky rozhrania sú ťažko čitateľné, čo obmedzuje dostupnosť webu.
Ako na to?
- Dodržte minimálny kontrastný pomer 4,5:1 (WCAG 2.2 AA) – tmavý text na svetlom pozadí je viditeľný najlepšie.
- Vyhnite sa kombináciám pastelových farieb alebo farieb nízkej sýtosti.
- Odkazy a tlačidlá odlíšte vizuálne pri prechode myšou.
- Text držte v rozumných veľkostiach – minimálne medzi 9px a 12px.
5. Testovanie
Aby sme vedeli, že naše úpravy fungujú, otestovali sme ich viacerými nástrojmi. Tu sú tie, ktoré nám pomohli najviac:
- Firefox Accessibility Inspector: Rýchly spôsob, ako skontrolovať prístupnosť priamo v prehliadači.
- ARIA DevTools: Ukáže vám štruktúru stránky z pohľadu ARIA atribútov.
- Silktide: Komplexný nástroj na všetko od kontrastu po prehľad sekcií.
Prístupnosť je cesta, nie cieľ
Úprava webu drmaxnapredpis.sk nám ukázala, že prístupnosť nie je jednorazová úloha, ale kontinuálny proces. S každým krokom – od sémantiky až po testovanie – sme sa posunuli bližšie k webu, ktorý slúži všetkým. Prístupnosť vnímame ako neoddeliteľnú súčasť kvalitného digitálneho produktu a budeme ju integrovať aj do ďalších projektov, aby boli dostupné a použiteľné pre každého.
Zdroje:
- Prístupnosť webu ako nová norma
- Čo je WCAG a prečo by ho mal poznať každý developer
- Accessibility Tips for Web Developers
- Accessibility Checklist for Product Teams
FAQ: Prístupnosť webu v praxi
Čo znamená, že web je prístupný?
Prístupný web je taký, ktorý môžu bez problémov používať všetci ľudia – vrátane tých so zrakovým, sluchovým, motorickým alebo kognitívnym znevýhodnením. Znamená to dobre štruktúrovaný HTML, ovládanie klávesnicou, čitateľný kontrast a správne použitie ARIA atribútov.
Prečo sa prístupnosť týka aj mňa, ak nepracujem v štátnej sfére?
Od júna 2025 nadobúda účinnosť Európsky zákon o prístupnosti (EAA), ktorý sa vzťahuje aj na mnohé komerčné weby – vrátane eshopov, bankových a zdravotných portálov. Navyše, prístupnosť je aj o lepšom UX a širšej dosiahnuteľnosti vášho obsahu.
Aké sú prvé kroky, keď chcem zlepšiť prístupnosť svojho webu?
Začnite auditom – zistíte, kde sú najväčšie problémy. Následne odporúčame upraviť sémantiku HTML, zabezpečiť ovládanie cez klávesnicu, zlepšiť farebný kontrast a doplniť ARIA atribúty pre dynamické prvky.
Aké nástroje môžem použiť na testovanie prístupnosti?
Medzi najčastejšie odporúčané nástroje patria Firefox Accessibility Inspector, ARIA DevTools, Silktide či axe DevTools. Každý z nich vám pomôže identifikovať iný typ problému – od kontrastu až po logickú štruktúru.
Čo ak nemám v tíme špecialistu na prístupnosť?
Začnite jednoduchými zmenami – zrozumiteľná HTML štruktúra, klávesnicová navigácia a viditeľný kontrast spravia veľký rozdiel. V prípade potreby môžete využiť aj externý audit alebo konzultáciu, aby ste nastavili správny smer.
