ARIA role a atributy

Doba čtení: cca 4 min

Co je ARIA?

ARIA je zkratka z anglického Accessible Rich Internet Applications. Je to sada atributů, které přidáváš přímo do HTML tagů a které říkají odečítačům obrazovky něco navíc – informace, které by ze samotného HTML nebyly zřejmé.

Důležité je pochopit jedno základní pravidlo, které celou ARIA filozofii vystihuje: nepoužívej ARIA tam, kde stačí správný HTML tag. Pokud použiješ <nav>, <button> nebo <h1>, nepotřebuješ k nim ARIA přidávat – prohlížeč jejich roli zná. ARIA nastupuje tehdy, kdy nativní HTML nestačí nebo kdy používáš obecný tag jako <div> pro interaktivní prvek.

ARIA role

Atribut role říká odečítači, jakou funkci prvek plní. Nejčastěji se používá tehdy, kdy vizuálně vypadá prvek jako tlačítko nebo navigace, ale v HTML je to jen <div> nebo <a>.

Nejpoužívanější hodnoty atributu role:

  • role="button" – prvek funguje jako tlačítko. VoiceOver ho oznámí jako tlačítko a uživatel ví, že ho může aktivovat.
  • role="navigation" – oblast s navigačními odkazy. Stejný efekt jako tag <nav>.
  • role="main" – hlavní obsah stránky. Stejný efekt jako tag <main>.
  • role="banner" – záhlaví stránky. Stejný efekt jako tag <header> na úrovni stránky.
  • role="contentinfo" – zápatí stránky. Stejný efekt jako tag <footer> na úrovni stránky.
  • role="search" – oblast vyhledávání.
  • role="alert" – důležitá zpráva, kterou má VoiceOver přečíst okamžitě, i bez interakce uživatele.
  • role="dialog" – modální okno nebo dialogové okno.
  • role="status" – stavová zpráva, například „Soubor byl uložen.“ VoiceOver ji přečte, až dokončí aktuální čtení.

Příklad použití na odkazu, který vizuálně funguje jako tlačítko:

<a href="kontakt.html" class="btn-gold" role="button">Napsat zprávu</a>

Nejdůležitější ARIA atributy

aria-label

Přidá prvku textový popisek, který VoiceOver přečte místo obsahu tagu. Hodí se pro tlačítka s ikonou nebo emoji, kde samotný obsah nestačí k pochopení funkce.

<button aria-label="Přepnout tmavý režim">🌙</button>

aria-labelledby

Propojí prvek s jiným elementem na stránce, jehož text slouží jako popisek. Používá se nejčastěji pro sekce a oblasti, které mají vlastní nadpis.

<section aria-labelledby="nadpis-kontakt">
			  <h2 id="nadpis-kontakt">Kontakt</h2>
			  ...
			</section>

VoiceOver při vstupu do sekce přečte: „Oblast: Kontakt.“ Uživatel okamžitě ví, kde je.

aria-describedby

Podobné jako aria-labelledby, ale slouží pro delší doplňující popis – například nápovědu k formulářovému políčku.

<input type="text" aria-describedby="napoveda-jmeno">
			<p id="napoveda-jmeno">Zadej své celé jméno včetně příjmení.</p>

aria-hidden

Hodnota aria-hidden="true" skryje prvek před odečítačem obrazovky – prvek zůstane vizuálně viditelný, ale VoiceOver ho přeskočí. Používá se pro dekorativní ikony, emoji nebo duplicitní obsah.

<span aria-hidden="true">🏠</span> Domů

aria-expanded

Říká, zda je rozbalovací prvek otevřený nebo zavřený. Hodnota se mění JavaScriptem podle aktuálního stavu.

<button aria-expanded="false" aria-controls="menu">Otevřít menu</button>
			<ul id="menu">...</ul>

aria-controls

Propojí ovládací prvek s oblastí, kterou ovládá. VoiceOver díky tomu ví, co tlačítko nebo odkaz ovlivňuje.

aria-live

Označí oblast, jejíž obsah se dynamicky mění, a řekne VoiceOveru, jak na změny reagovat:

  • aria-live="polite" – VoiceOver přečte změnu, až dokončí aktuální čtení. Vhodné pro statusové zprávy.
  • aria-live="assertive" – VoiceOver přeruší aktuální čtení a oznámí změnu okamžitě. Pouze pro kritické informace.
  • aria-live="off" – změny se neoznamují. Vhodné pro hodiny nebo jiné prvky, které se mění nepřetržitě.
<div aria-live="polite" role="status">Zpráva byla odeslána.</div>

aria-required

Označí povinné pole ve formuláři. VoiceOver uživatele upozorní, že pole musí vyplnit.

<input type="email" aria-required="true">

aria-disabled

Označí prvek jako neaktivní. Na rozdíl od HTML atributu disabled prvek zůstane dostupný pro odečítač – uživatel se na něj dostane, ale VoiceOver oznámí, že je neaktivní.

Pět zlatých pravidel použití ARIA

  • Nejlepší ARIA je žádná ARIA. Pokud situaci řeší správný HTML tag, nepoužívej ARIA.
  • Nepřepisuj sémantiku nativních prvků. Nepřidávej role="button" na skutečný <button> – ten roli má automaticky.
  • Všechny interaktivní prvky musí být ovladatelné klávesnicí. ARIA roli nestačí – prvek musí reagovat i na stisk klávesy Enter nebo mezerníku.
  • Nepoužívej aria-hidden="true" na prvky, které jsou aktivní. Skrytý, ale funkční prvek je pro uživatele odečítače záhadou.
  • Všechny interaktivní prvky musí mít popisek. Tlačítko bez textu a bez aria-label VoiceOver přečte jen jako „tlačítko“ – bez kontextu.

Tip od Zdeňka

Zdeněk radí: ARIA je mocný nástroj, ale snadno se s ním přestřelí. Viděl jsem weby, kde vývojáři přidali ARIA atributy na vše možné – a výsledek byl horší než bez nich, protože VoiceOver četl každý prvek dvakrát nebo oznamoval nesmyslné role. Začni vždy od správného HTML. ARIA přidej jen tam, kde HTML nestačí – a pak to poctivě otestuj. Nejlepší test je jednoduše vypnout monitor, zapnout VoiceOver a zkusit stránku používat.