Čo je ARIA role?
ARIA role je atribút v HTML, ktorý definuje úlohu prvku pre asistenčné technológie ako čítačky obrazovky. Umožňuje sprístupniť dynamický webový obsah aj používateľom so zrakovým postihnutím.
Definícia ARIA role
Čo sú ARIA role
ARIA (Accessible Rich Internet Applications) je sada atribútov definovaná organizáciou W3C, ktorá rozširuje HTML o informácie pre asistenčné technológie. ARIA role definujú, akú funkciu má konkrétny prvok na stránke — napríklad navigácia, tlačidlo, dialóg alebo upozornenie.
Moderné webové aplikácie často používajú prvky ako <div> a <span>, ktoré nemajú sémantický význam. Pridaním ARIA rolí (napr. role="button", role="navigation") sa tieto prvky stanú zrozumiteľnými pre čítačky obrazovky.
Typy ARIA rolí
- Landmark role — definujú hlavné oblasti stránky (
banner,main,navigation,contentinfo) - Widget role — interaktívne prvky (
button,tab,dialog,slider) - Document structure role — štruktúra obsahu (
article,heading,list) - Live region role — dynamicky sa meniaci obsah (
alert,status,log)
Kedy používať ARIA role
Zlaté pravidlo znie: ak existuje natívny HTML prvok s danou sémantikou (napr. <button>, <nav>), použite ho namiesto ARIA. ARIA role sú určené pre situácie, keď natívny HTML nestačí — napríklad pri vytváraní vlastných komponentov ako záložky, karuzely alebo modálne okná.
Nesprávne použitie ARIA môže prístupnosť dokonca zhoršiť, preto je dôležité poznať špecifikáciu a testovať s reálnymi čítačkami obrazovky.
Praktický príklad
Príklad: Vlastný rozbaľovací zoznam na e-shope.
Vývojár vytvorí filter produktov pomocou <div> prvkov. Bez ARIA role čítačka obrazovky nerozpozná, že ide o rozbaľovací zoznam. Po pridaní role="listbox" na kontajner a role="option" na jednotlivé položky sa filter stane plne prístupným.
Zároveň sa pridá aria-expanded="true/false" na indikáciu, či je zoznam otvorený alebo zatvorený.
Často kladené otázky
Čo je ARIA role v HTML?
ARIA role je špeciálny atribút, ktorý definuje funkciu HTML prvku pre asistenčné technológie. Napríklad role="navigation" hovorí čítačke obrazovky, že daný prvok obsahuje navigačné odkazy.
Kedy by som mal použiť ARIA role?
ARIA role by ste mali použiť vtedy, keď natívny HTML prvok neposkytuje dostatočnú sémantiku — napríklad pri vlastných widgetoch ako záložky, karuzely alebo modálne dialógy.
Môže ARIA role zhoršiť prístupnosť?
Áno, nesprávne použitie ARIA role môže zmätiť asistenčné technológie. Preto sa odporúča najskôr využiť natívne HTML prvky a ARIA pridávať iba tam, kde je to nevyhnutné.
Aký je rozdiel medzi ARIA role a sémantickým HTML?
Sémantické HTML prvky ako <nav>, <button> alebo <main> majú implicitné role. ARIA role sa používajú na doplnenie sémantiky tam, kde natívne HTML nestačí, napríklad pri vlastných interaktívnych komponentoch.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.