1. Motivácia
2. Pre koho robíme web prístupný
3. Ako ľudia s hendikepom používajú web
4. Špecifikácie a štandardy
b. WCAG - Web Content Accessibility Guidelines
a. WAI-ARIA - Web Accessibility Initiative - Accessible Rich Internet
Applications
5. Ako testovať prístupnosť
6. Legislatíva
Ak vytvoríte prístupný web budú z toho benefitovať všetci:
• Ľudom s hendikepom odstránite bariéry na webe.
• Sémantický web pomáha prístupnosti a tiež zlepšuje SEO a vyhľadateľnosť webu.
• Pravidlá pre prístupnosť tiež zlepšujú použiteľnosť (UX).
• Benefity prístupného webu využívajú aj bežní používatelia napr.:
Okrem toho musia byť webové stránky verejnej správy prístupné zo zákona a od roku 2025 sa zákon bude vzťahovať aj na niektoré ďalšie typy webových stránok, ako sú napríklad e-shopy.
%20web%20je%20prospes%CC%8Cny%CC%81%20pre%20vs%CC%8Cetky%CC%81ch..png)
Existuje mnoho rôznych hendikepov, ktoré ľuďom znemožňujú používať web plnohodnotne. Podľa štatistík je len na Slovensku oficiálne evidovaných 337 147 osôb so zdravotným postihnutím (údaj z roku 2020). V USA je to viac ako 60 miliónov a vo svete celkovo viac ako 1 miliarda.
Okrem nevidiacich sem patria aj ľudia s oslabeným videním alebo farboslepí. Takíto ľudia zvyčajne používajú čítačku obrazovky alebo si zväčšujú obsah stránky. Ukážka toho, ako nevidiaci používatelia používajú čítačku obrazovky na webe. Prípadne si môžeš pozrieť, ako vidia web farboslepí používatelia.
Títo ľudia vyžadujú, aby web poskytoval textovú alternatívu pre akýkoľvek hlasový obsah, napríklad titulky pre video a podobne.
Takíto ľudia nemôžu naplno využívať myš alebo touchpad, preto je pre nich dôležité, aby mohli pristupovať na web len pomocou klávesnice. Môže ísť aj o ľudí, ktorí utrpeli úraz, napríklad majú zlomenú ruku (alebo len o ľudí, ktorí nepoužívajú myš).
Ide o najpočetnejšiu skupinu ľudí, do ktorej patria ľudia s:
Títo ľudia potrebujú, aby bol obsah stránky zrozumiteľný, konzistentný a aby minimalizoval rušivý obsah. Ak tieto požiadavky zapracujeme, zlepšíme aj celkovú UX nášho webu.
Ak ťa zaujíma, aké môže byť čítanie, ak by ste mali dyslexiu, pozrite si ukážku.
V závislosti od individuálnych požiadaviek ľudia používajú:
Viac o tom, ako ľudia s hendikepom používajú web nájdeš na webe: How People with Disabilities Use the Web.
Na vytváranie a overovanie prístupnosti webu vznikli špecifikácie a štandardy:
WCAG špecifikácia obsahuje širokú škálu odporúčaní a kritérií na zvýšenie prístupnosti webového obsahu. Jednotlivé odporúčania sa skladajú z kritérií, ktoré je potrebné splniť.
📄 Príklad WCAG odporúčania:
Odporúčanie 1.4 – Rozlíšiteľný
Uľahčite používateľom vidieť a počuť obsah vrátane oddelenia popredia od pozadia.
Kritérium úspešnosti – 1.4.3 Minimálny kontrast (Úroveň AA)
Vizuálne zobrazenie textu a textu vo forme obrázkov má kontrastný pomer najmenej 4,5:1, okrem nasledujúcich prípadov:
• text písaný veľkým písmom – obrázky takéhoto textu majú kontrastný pomer najmenej 3:1,
• vedľajší nepodstatný text – požiadavky na kontrast nemusí spĺňať text alebo text vo forme obrázku, ktorý je súčasťou neaktívneho prvku používateľského rozhrania, ktorý má výlučne dekoračnú funkciu, ktorý nie je viditeľný pre žiadneho používateľa alebo je súčasťou obrázka, v ktorom je dôležitý iný vizuálny obsah,
• logotypy – text, ktorý je súčasťou loga alebo obchodnej značky, nemusí spĺňať požiadavky na kontrast.
Jednotlivé odporúčania (kritéria) sa rozdeľujú do troch úrovní:
WCAG špecifikácia je pomerne rozsiahla a detailne popísaná, čo môže veľa developerov odradiť. Preto odporúčam začať preštudovaním WebAIM's WCAG 2 Checklist. Je to skrátená a zjednodušenú verzia kompletnej WCAG špecifikácie. Nájdeš v nej konkrétne tipy, ktoré môžeš hneď používať pri vývoji. Existujú aj ďalšie checklisty, napríklad:
Avšak ak chceš rozumieť tejto téme naozaj do detailu, tak si prečítaj aj kompletnú WCAG špecifikáciu Web Content Accessibility Guidelines (WCAG) 2.1 (dostupný je aj slovenský preklad). Táto verzia sa mi však zdala dosť neprehľadná. Odporúčam radšej verziu: How to Meet WCAG (Quickref Reference), ktorá je prehladnešia a vieš si jednotlivé kritéria filtrovať.
WAI-ARIA je špecifikácia od W3C, ktorá pridáva do HTML dodatočné atribúty pre zlepšenie sémantickosti a prístupnosti obsahu webovej stránky. Moderné webové aplikácie často obsahujú pokročilejšiu funkcionalitu, ktorú nevieme opísať štandardnými HTML elementami alebo atribútmi. Prípadne im ešte chýba podpora v prehliadačoch.
Takéto elementy často nahrádzame elementami ako napr. div alebo span, ktorým môžeme pomocou CSS a JavaScriptu priradiť ľubovoľnú funkcionalitu, napr. datepicker, dialog atď. Bežní požívatelia, ktorí používajú myš, nevidia žiadny rozdiel, avšak pre nevidiacich používateľov, ktorí používajú čítačku obrazovky je takýto element nepoužiteľný.
⚠️ Vždy sa snaž používať natívne HTML elementy na vytvorenie sémantického obsahu. WAI-ARIA použi len v prípade, že neexistuje vhodná HTML alternatíva. Zvyčajne ak vytvárame komplexnejšie komponenty stránky ako sú napríklad slider, datepicker atď.
Napríklad HTML element <dialog>, ktorý momentálne ešte nie je dostatočne podporovaný vieme nahradiť klasickým div elementom, ktorému pridáme sémantickosť pomocou ARIA role="dialog", aria-labelledby a aria-describedby.
ℹ WAI–ARIA pridáva dodatočné informácie o elementoch stránky a nijako neovplyvňuje renderovanie DOM-u stránky.
⚠️ Nepoužívať ARIA je lepšie ako používať ARIA nesprávne!
Nevhodným použitím WAI–ARIA vieme prístupnosť výrazne zhoršiť. Napr. ak nastavíme <div> elementu rolu button, avšak nezabezpečíme aj jeho funkcionalitu napr. cez JavaScript, tak čítačka obrazovky bude nesprávne interpretovať tento element používateľovi.
<div role="button">Place Order</div>
Ďalšie zdroje, ktoré odporúčam pozrieť:
👋 Chceš nám pomôcť budovať zmysluplný a zodpovedný digitálny svet? Máme otvorené pozície!
Pri testovaní môžeme zvoliť tri prístupy:
Ideálne je kombinovať všetky prístupy, keďže automatizované testovanie ti ušetrí veľa času a tiež odhalí chyby, ktoré môžeme pri manuálnom testovaní prehliadnuť. Avšak zároveň platí, že automatizované testovanie nedokáže odhaliť všetky chyby.
Nástrojov na automatizované testovanie existuje veľmi veľa – Zoznam nástrojov na hodnotenie prístupnosti webu. Preto som vybral len tieto najpoužívanejšie (+ niektoré pre React developerov):
Komplexnejší nástroj na automatické generovanie reportu o prístupnosti webu. Lighthouse nájdeš priamo v Chrome DevTools a okrem prístupnosti ním vieš testovať aj výkonnosť webu, SEO atď…
Tento nástroj od WebAIM vie odhaliť chyby podľa WCAG špecifikácie. Je dostupný ako doplnok v prehliadači alebo aj online verzia na webe.
Sada nástrojov na testovanie prístupnosti, postavených na celosvetovo najpopulárnejšej testovacej knižnici pre prístupnosť: axe-core. Pokročilejšie nástroje a funkcionalita je už platená, avšak veľa užitočných nástrojov je dostupných zadarmo. Ponuka nástrojov a funkcionalít je široká (projekty, ktoré používajú axe-core) napr:
Podľa informácií na ich webe vieš pomocou týchto nástrojov odhaliť 80 % chýb už počas vývoja webu. Chvália sa aj 100 % spoľahlivosťou, čo znamená, že nástroj nereportuje falošné chyby.
@axe-core/react – nástroj postavený na axe-core knižnici. Automaticky testuje React aplikáciu a reportuje chyby prístupnosti priamo do konzoly.
eslint/eslint-plugin-jsx-a11y - staticky analyzuje kód na bežné chyby v JSX kóde (užitočný najmä v React projektoch). Ideálna kombinácia s nástrojom @axe-core/react, ktorý testuje vyrenderovaný DOM.
.png)
Automatizované nástroje nikdy nedokážu spoľahlivo overiť prístupnosť webu. Preto je vhodné overiť prístupnosť aj manuálne, ideálne testerom, ktorý má dobré znalosti v tejto oblasti. Ešte viac pokročilé je testovanie prístupnosti priamo osobami s hendikepom. Pri manuálnom testovaní si vieme pomôcť napr. checklistom: Checklist - The A11Y Project alebo Web Accessibility Checklist.
Ďalšou možnosťou je nechať vypracovať audit externú inštitúciu. Na Slovensku vykonáva audit napríklad Únia nevidiacich a slabozrakých Slovenska: Audit prístupnosti webových stránok a mobilných aplikácií.
Na Slovensku musia byť webové stránky a mobilné aplikácie verejnej správy prístupné zo zákona. Vyžaduje to Zákon č. 95/2019 Z. z. o informačných technológiách vo verejnej správe, konkrétne Vyhláška č. 78/2020 Z. z. o štandardoch pre informačné technológie vo verejnej správe.
Štandardom pre prístupnosť, ktorý musia webové stránky spĺňať, je WCAG vo verzii 2.1. Aby bol web prístupný, musí:
Parlament schválil európsky akt prístupnosti, ktorý upravuje aj pravidlá pre prístupnosť na webe. Aktuálne prebieha schvaľovanie v členských krajinách EÚ (vrátane Slovenska), pričom zákon by mal platiť od júna 2025. Nový zákon by mal definovať požiadavky na prístupnosť určitých služieb a povinnosti pre poskytovateľov týchto služieb. Ide najmä o elektronické komunikačné služby, služby poskytujúce prístup k mediálnym službám, služby v oblasti dopravy, bankové služby, či služby elektronického obchodu.
Nové pravidlá budú platiť napríklad pre:
Viac informácií nájdeš na:
Dobré intro do témy nájdeš na portáli MDN: Accessibility - Learn web development | MDN a tiež na web.dev od Googlu. Veľa užitočného materiálu je aj na webe WebAIM. Následne sa môžeš pustiť do študovania materiálu podľa zdrojov, ktoré sme spomínali v článku. Zaujímavý prehľad zdrojov od kníh až po video kurzy nájdeš aj na Resources - The A11Y Project.
