ARIA atribúty

Čo je WAI-ARIA a prečo patrí medzi základy moderného webu

WAI-ARIA (Accessible Rich Internet Applications) je súbor atribútov HTML definovaný konzorciom W3C, ktorý dopĺňa sémantiku a interakcie webových komponentov tak, aby boli prístupné používateľom asistenčných technológií (čítačky obrazovky, alternatívne vstupy). ARIA nevytvára vizuálne prvky, ale „rozpráva“ strojom, čo prvky sú a čo práve robia. V dobe aplikácií spa, vlastných komponentov a AI/LLM indexácie je ARIA kľúčová pre prístupnosť (a11y), SEO aj AIO/AEO – vyhľadávačom a modelom pomáha pochopiť štruktúru a stavy UI.

Zásady: kedy ARIA používať a kedy nie

• Prednosť má natívne HTML. Ak existuje semantický prvok (button, nav, header, ul/li, table, form), použite ho. ARIA je doplnok, nie náhrada.
• ARIA by nemala meniť vizuálne správanie. Ovládanie klávesnicou a fokus riešte v JS/CSS, ARIA len opisuje rolu a stav.
• „No ARIA is better than bad ARIA“. Zlé stavy, zlé referencie alebo nesúlad rolí škodia viac než žiadna ARIA.
• Konzistentnosť stavu. Atribúty ako aria-expanded, aria-selected, aria-checked musia odrážať skutočný stav komponentu.

Stavebnice ARIA: role, properties, states

ARIA sa delí na tri hlavné skupiny:

• Role (napr. role="button", role="dialog", role="navigation") – definujú typ widgetu alebo landmark.
• Properties (napr. aria-labelledby, aria-describedby, aria-owns) – stabilné vlastnosti a vzťahy.
• States (napr. aria-expanded, aria-checked, aria-busy) – meniace sa stavy počas interakcií.

Landmark role: kostra stránky pre rýchlu navigáciu

Landmarky umožňujú skokovú navigáciu čítačkami obrazovky a zároveň pomáhajú vyhľadávačom a LLM pochopiť layout:

• role="banner" – hlavička webu (spravidla na <header>).
• role="navigation" – hlavná navigácia (často <nav>).
• role="main" – hlavný obsah (zvyčajne <main>).
• role="complementary" – doplnkové panely (sidebar).
• role="contentinfo" – pätička (na <footer>).
• role="search" – vyhľadávací formulár.

Používajte natívne prvky (header, nav, main, aside, footer), ktoré už landmark rolu implicitne nesú. ARIA rolu pridávajte len vtedy, keď nepoužívate natívny element alebo potrebujete spresniť význam.

Názvy a popisy: aria-label, aria-labelledby, aria-describedby

• Viditeľný názov > aria-label. Ak prvok už má viditeľný text (napr. obsah tlačidla), ten je jeho accessible name. aria-label používajte na ikony bez textu.
• aria-labelledby viaže názov na iný element podľa id a má vyššiu prioritu než aria-label.
• aria-describedby poskytuje doplnkový opis (tooltip, nápoveda), ktorý sa číta po názve.

Príklad ikonického tlačidla bez textu:

<button aria-label="Otvoriť menu"></button>

Interaktívne widgety: správanie, stavy a klávesnica

Pri vlastných komponentoch je nutné zosúladiť rolu, stav aj ovládateľnosť klávesnicou:

• Button: role="button", aktivácia Enter aj Space, fokus cez tabindex="0" (ak to nie je natívne <button>).
• Disclosure/Accordion: ovládací prvok s aria-expanded="true|false" a cieľ s aria-hidden alebo riadeným zobrazením; prepojenie cez aria-controls.
• Tabs: role="tablist" obsahuje role="tab" s aria-selected, panely majú role="tabpanel" a sú naviazané cez aria-controls/aria-labelledby. Šípky menia fokus medzi tabmi.
• Menu/menubar a listbox: rešpektujte definované klávesové vzory (šípky, Home/End, Enter/Escape).

Živé oblasti a dynamický obsah: aria-live, aria-busy

Pri asynchrónnych akciách oznámte zmeny:

• aria-live="polite|assertive" – čítačky oznámia novinky v oblasti; polite čaká na vhodný moment, assertive prerušuje čítanie.
• aria-busy="true" – signalizuje načítavanie; nastavte späť na false, keď je obsah pripravený.
• role="status" alebo role="alert" – krátke správy o úspechu/chybe.

Skrytie a prezentácia: aria-hidden, inert a focus management

• aria-hidden="true" odstráni prvok zo stromu prístupnosti, no neblokuje fokus. Pri modaloch preferujte inert na okolí, aby sa zablokovala interakcia a fokus.
• Pri otvorení dialógu presuňte fokus dovnútra a po zatvorení vráťte na spúšťač.
• Skryté dekorácie (SVG, ikonfonty) označte aria-hidden="true" alebo role="img" aria-label="..." s významom.

Obrázky a grafika: role=“img“, alt a komplexné vizualizácie

• Pre <img> používajte alt. Pri dekoratívnej grafike zvoľte prázdny alt="" a zvážte aria-hidden="true".
• Pre neštandardné grafiky (SVG, canvas) použite role="img" a názov cez aria-label alebo aria-labelledby.
• Komplexné grafy sprístupnite krátkym názvom a dlhším opisom viazaným cez aria-describedby, prípadne ponúknite dátovú tabuľku.

Formuláre: chyby, nápovedy a povinné polia

• Prepojte label s poľom cez <label for="id"> a id. Ak label chýba, použite aria-label.
• Nápovedu viažte cez aria-describedby="id-popisu".
• Chyby signalizujte aria-invalid="true" a dynamickú chybovú hlášku v oblasti s role="alert" alebo aria-live.
• Povinnosť poľa indikujte vizuálne a programovo cez aria-required="true" (pri vlastných widgetoch).

Dialógy a upozornenia: role=“dialog“ a role=“alertdialog“

• Kontajner má role="dialog" a názov cez aria-labelledby (alebo aria-label).
• Pri kritických potvrdeniach použite role="alertdialog" (silnejšia pozornosť).
• Lockujte pozadie (inert alebo „focus trap“) a zabezpečte kláves Escape pre zatvorenie.

Navigačné prvky: breadcrumbs, pagination, skip links

• Označte omrvinkovú navigáciu nav s aria-label="Odtrojenie navigácie" alebo "Drobečková navigácia" podľa jazyka; odkazy v zozname.
• Pagináciu označte nav s aria-label="Stránkovanie"; aktuálna strana má aria-current="page".
• „Skip to content“ odkaz umiestnite na začiatok a cielený prvok označte id; hlavný obsah nech má role="main" alebo <main>.

Tabuľky, zoznamy a štruktúry: rešpektujte natívnu sémantiku

Pre dátové tabuľky používajte <table> s <thead>, <tbody>, <th scope="col|row">. Vyhýbajte sa ručnému skladaniu tabuliek z div s ARIA rolami, pokiaľ to nie je nevyhnutné.

ARIA a výkon LLM/SEO: prečo to prospieva AIO/AEO

• Jednoznačná štruktúra. Landmarky a správne mená prvkov zlepšujú pochopenie informačnej architektúry modelmi a crawlermi.
• Presné vzťahy. Vzťahy aria-labelledby/aria-describedby dopĺňajú kontext (napr. k tlačidlám, panelom, kartám), čo pomáha extrahovať zmysluplné odpovede.
• Bohaté stavy UI. Správne aktualizované stavy (aria-expanded, aria-selected) vedú k lepšiemu pochopeniu interaktivity a obsahovej viditeľnosti.
• Nižšia chybovosť parsovania. Konzistentná ARIA redukuje šum a anomálie v dátach používaných pre indexáciu a tréning.

Antivzory: čomu sa vyhnúť

• Falošné tlačidlo z div s role="button" bez podpory Enter/Space a bez tabindex.
• Konflikt roly a elementu. Napr. <button role="link"> mätie čítačky; použite správny element.
• Nesprávne živé oblasti. Zbytočné aria-live="assertive" ruší používateľa.
• Skrytie obsahu iba vizuálne. display:none bez ohľadu na stav ARIA môže vyviesť čítačku z rovnováhy; zosúlaďte vizuálny a accessibility stav.
• Neplatné referencie. aria-labelledby="neexistuje" alebo duplicity id.

Testovanie a validácia: praktický postup

1. Rýchly audit klávesnicou. Preklikajte celé UI len s Tab/Shift+Tab, Enter, Space, šípkami. Fokus musí byť viditeľný.
2. Semantická kontrola. Overte landmarky (banner, navigation, main, complementary, contentinfo, search).
3. Stavy v akcii. Sledujte, či sa aria-expanded, aria-selected, aria-busy pri interakcii menia.
4. Automatizované nástroje. Spustite linterny a audity (napr. axe, Lighthouse, HTML validator) a opravte chyby s vysokou prioritou.
5. Čítačka obrazovky. Otestujte aspoň v jednom prostredí (NVDA/JAWS/VoiceOver) základné scenáre.

Mini-vzory: zhutnené príklady

Rozbaľovacie menu (disclosure):

<button aria-expanded="false" aria-controls="sekcia-menu" id="tlacitko-menu">Menu</button>

<div id="sekcia-menu" role="region" aria-labelledby="tlacitko-menu" hidden>...navigácia...</div>

Pri otvorení odstráňte hidden a nastavte aria-expanded="true".

Záložky (tabs):

<div role="tablist" aria-label="Sekcie">
  <button role="tab" id="tab-1" aria-controls="panel-1" aria-selected="true">Prehľad</button>
  <button role="tab" id="tab-2" aria-controls="panel-2" aria-selected="false">Detaily</button>
</div>

<section role="tabpanel" id="panel-1" aria-labelledby="tab-1">...</section>
<section role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>...</section>

Medzijazyčnosť a lokalizácia

• Jazyk dokumentu nastavte cez <html lang="sk">; čítačky podľa toho volia syntézu reči.
• Aria štítky píšte v jazyku obsahu. Pri viacjazyčných sekciách používajte lang na vnorených prvkoch.

ARIA a dizajn systém: udržateľná implementácia

• Zaveďte knižnicu komponentov s jednotnou sémantikou (role, stavy, názvy, klávesnica).
• Každý komponent dokumentujte: aké ARIA atribúty používa, kedy a ako sa menia, aké má klávesové skratky.
• Pridajte unit/e2e testy na stavy a dostupnosť (fokus, tab order, live regions).

Checklist pre release

• Natívne HTML tam, kde sa dá; ARIA iba dopĺňa.
• Viditeľný fokus a plná ovládateľnosť klávesnicou.
• Správne landmarky a hierarchia nadpisov.
• Jednoznačné názvy prvkov (aria-label vs. aria-labelledby), popisy cez aria-describedby.
• Aktualizované stavy (aria-expanded, aria-selected, aria-checked, aria-busy).
• Živé oblasti len tam, kde dávajú zmysel; bez zbytočného assertive.
• Bez neplatných referencií a duplicitných id.
• Automatizovaný audit prešiel bez kritických chýb.

ARIA ako spoločný jazyk ľudí, strojov a modelov

Správne použitie ARIA zjednocuje sémantiku a interakcie naprieč prehliadačmi, čítačkami, crawlermi a LLM. Je to nízkonákladová investícia s vysokou návratnosťou: zlepšuje prístupnosť, použiteľnosť, konverzie aj pochopenie obsahu pre SEO/AIO/AEO. Držte sa zásady „najprv HTML, potom ARIA“ a budujte komponenty, ktoré sú prístupné od návrhu.