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.
