Co je ARIA? Role, orientační body a živé oblasti

Co ARIA je — a co není

ARIA je zkratka pro Accessible Rich Internet Applications. Jde o sadu atributů definovaných iniciativou Web Accessibility Initiative (WAI) konsorcia W3C, která vývojářům umožňuje sdělovat význam a stav prvků uživatelského rozhraní asistivním technologiím, jako jsou čtečky obrazovky.

Nejdůležitější pravidlo o ARIA je zároveň tím, které se nejčastěji ignoruje: nepoužívejte ARIA tam, kde práci zvládne nativní HTML. Prvek <button> se sám ohlásí jako tlačítko a reaguje na události klávesnice. Prvek <nav> už čtečkám obrazovky sděluje navigační orientační bod. Přidat role="button" k prvku <div> a pak jeho chování naskriptovat je náročnější na údržbu, snáze se to rozbije a pro přístupnost to bývá horší než rovnou použít správný prvek.

ARIA nedělá toto:

Nezviditelňuje obsah ani jej nečiní interaktivním — mění pouze to, co ohlašuje asistivní technologie
Neopravuje rozbitý přístup z klávesnice — stále potřebujete tabindex a posluchače událostí
Nenahrazuje dobře strukturované sémantické HTML

Kde ARIA skutečně pomáhá, je situace, kdy nativní HTML nemá pro to, co stavíte, žádný prvek: výběr data, banner živých oznámení, vlastní combobox, stromové zobrazení. V takových případech vám ARIA umožní sdělit sémantiku, kterou HTML sdělit neumí.

ARIA role

Role říká asistivní technologii, s jakým druhem prvku má co do činění. Každý interaktivní prvek má implicitní roli odvozenou ze své HTML značky. Prvek <a> má roli link. Prvek <input type="checkbox"> má roli checkbox. Prvek <h2> má roli heading.

Když stavíte vlastní prvek, který nemá HTML ekvivalent, přiřadíte mu explicitní roli:

<!-- Vlastní přepínač postavený z divu -->
<div
  role="switch"
  aria-checked="false"
  tabindex="0"
>
  Tmavý režim
</div>

Čtečka obrazovky nyní tento prvek ohlásí jako přepínač a vysloví jeho stav zaškrtnutí. Bez role by byl ohlášen jako obyčejný text a uživatel by vůbec netušil, že je interaktivní.

Běžné role a kdy je použít

Role widgetů popisují interaktivní ovládací prvky:

Role	Použijte, když
`button`	Vlastní klikatelný prvek, pro který neexistuje vhodnější HTML značka
`checkbox`	Vlastní přepínač s vícenásobným výběrem
`combobox`	Textový vstup kombinovaný s rozbalovacím seznamem
`dialog`	Modální překryv (pouze pokud nepoužíváte nativní prvek `<dialog>`)
`listbox`	Vlastní rozbalovací seznam
`slider`	Vlastní posuvník rozsahu
`switch`	Přepínač zapnuto/vypnuto
`tab`, `tablist`, `tabpanel`	Rozhraní se záložkami
`tooltip`	Krátký popis zobrazený při najetí myší nebo při fokusu

Role struktury dokumentu popisují neinteraktivní obsah:

article — samostatný kus obsahu
figure — obrázek s popiskem
list, listitem — když je potřeba sémantika seznamu na prvcích, které seznamem nejsou
presentation / none — odstraní implicitní roli prvku (používejte zřídka a opatrně)

Zásadní chyba: přidat roli bez chování

Každá role s sebou nese závazek, o kterém uživatelé čteček obrazovky a klávesnice očekávají, že bude dodržen. Prvek s role="button" musí reagovat na Enter i na mezerník. Prvek s role="checkbox" musí přepínat stav mezerníkem. Prvek s role="link" musí na Enter přejít na cíl.

Pokud přidáte roli, ale ne odpovídající chování, aktivně uvádíte uživatele asistivních technologií v omyl. Slyší ohlášený ovládací prvek, zkusí s ním pracovat očekávanou klávesovou zkratkou — a nic se nestane. To je horší než žádná ARIA.

Orientační body ARIA

Orientační body jsou navigační kostrou stránky. Umožňují uživatelům čteček obrazovky přeskakovat mezi hlavními oblastmi, aniž by museli číst vše mezi nimi — obdoba toho, jak vidoucí uživatel jedním pohledem přeletí rozvržení stránky.

HTML5 zavedlo sémantické prvky, které se přímo mapují na role orientačních bodů. Používejte je a orientační body dostanete zdarma:

HTML prvek	Role orientačního bodu	Účel
`<header>`	`banner`	Hlavička celého webu (pouze pokud jde o hlavičku nejvyšší úrovně, nikoli uvnitř `<article>`)
`<nav>`	`navigation`	Navigační nabídka
`<main>`	`main`	Hlavní obsah stránky
`<aside>`	`complementary`	Doplňkový obsah související s hlavním obsahem
`<footer>`	`contentinfo`	Patička celého webu
`<form>`	`form`	Formulář (pouze pokud má přístupný název)
`<section>`	`region`	Pojmenovaná sekce (pouze pokud má přístupný název přes `aria-label` nebo `aria-labelledby`)

K prvku <main> nemusíte přidávat role="main" — je to nadbytečné. Role orientačních bodů ARIA jsou potřeba jen tehdy, když sémantický HTML prvek použít nemůžete, například ve starší kódové základně generující <div class="sidebar">:

<div class="sidebar" role="complementary" aria-label="Související články">
  <!-- obsah postranního panelu -->
</div>

Označování orientačních bodů, když jich máte více

Když má stránka více instancí téhož orientačního bodu — dva prvky <nav>, dva prvky <section> s role="region" — každá z nich musí mít jedinečný přístupný název, aby je uživatelé od sebe odlišili:

<nav aria-label="Hlavní navigace">...</nav>
<nav aria-label="Navigace v patičce">...</nav>

Bez popisků čtečka obrazovky ohlásí obě prostě jako „navigace“. S popisky uživatelé slyší „Hlavní navigace, navigační orientační bod“ a „Navigace v patičce, navigační orientační bod“ a mohou si ze seznamu orientačních bodů vybrat ten správný.

Živé oblasti ARIA

Živá oblast je část stránky, jejíž obsah se dynamicky aktualizuje a jejíž aktualizace by měly být uživatelům čteček obrazovky automaticky ohlášeny, aniž by museli přesouvat fokus.

Základním atributem je aria-live. Přijímá tři hodnoty:

off — aktualizace se neohlašují (výchozí hodnota pro všechny prvky)
polite — aktualizace se ohlásí poté, co uživatel dokončí svou aktuální činnost
assertive — aktualizace okamžitě přeruší cokoli, co čtečka obrazovky právě říká

<!-- Oblast se stavovou zprávou naplněná po odeslání formuláře -->
<div aria-live="polite" id="status-message"></div>

<script>
  document.getElementById('status-message').textContent =
    'Vaše zpráva byla odeslána.';
</script>

Když se textový obsah změní, čtečka obrazovky s aria-live="polite" počká na pauzu v řeči a poté nový obsah ohlásí. Pro drtivou většinu dynamických aktualizací používejte polite. Hodnotu assertive si rezervujte jen pro kritická selhání — chybu platby, upozornění na vypršení relace — kde je informace natolik naléhavá, že ospravedlní přerušení uživatele.

Zkratky rolí pro živé oblasti

Dvě role slučují sémantiku aria-live do jediného atributu:

role="status" — odpovídá aria-live="polite". Používejte pro zprávy o úspěchu, stavy načítání a nenaléhavé aktualizace.
role="alert" — odpovídá aria-live="assertive" a navíc implikuje aria-atomic="true". Používejte pro chybové zprávy a kritická selhání.

<!-- Chyba ohlášená okamžitě, s přerušením aktuální řeči -->
<div role="alert" id="payment-error"></div>

<!-- Aktualizace stavu ohlášená zdvořile po dokončení aktuální řeči -->
<div role="status" id="cart-count">3 položky v košíku</div>

Časté chyby u živých oblastí

Přidání obsahu dřív, než je prvek v DOM. Prohlížeč zaregistruje živou oblast při prvním zpracování prvku. Pokud prvek vložíte a zároveň nastavíte jeho textový obsah, některé čtečky obrazovky ohlášení zcela minou. Kontejner živé oblasti vždy zahrňte do výchozího HTML a jeho obsah aktualizujte až později pomocí JavaScriptu.

Používání assertive na všechno. Asertivní živé oblasti přeruší cokoli, co uživatel právě dělá, včetně jiných ohlášení. Počet výsledků vyhledávání aktualizovaný během psaní si role="alert" nezaslouží. Nadužívání assertive vytváří pro uživatele čteček obrazovky nepřátelský zážitek.

Příliš častá aktualizace živé oblasti. Pokud indikátor průběhu aktualizuje svou živou oblast každých 100 milisekund, fronta řeči přeteče a uživatelé neuslyší nic užitečného. Živý text aktualizujte jen ve smysluplných milnících — 25 %, 50 %, 75 %, hotovo — nebo aktualizace omezte časovačem.

Zapomenutý aria-atomic. Ve výchozím nastavení se ohlásí pouze změněný textový uzel uvnitř živé oblasti. Pokud chcete, aby se přečetla celá oblast (nikoli jen změněný fragment), přidejte aria-atomic="true":

<div aria-live="polite" aria-atomic="true">
  Zbývá <span id="count">2</span> položky
</div>

Bez aria-atomic může čtečka obrazovky při změně počtu ze 3 na 2 ohlásit pouze „2“. S ním zazní celá fráze „Zbývají 2 položky“, což je téměř vždy to, co chcete.

Další zásadní atributy ARIA

aria-label — poskytuje přístupný název tam, kde není vhodný žádný viditelný text:

<button aria-label="Zavřít dialog">✕</button>

aria-labelledby — odkazuje na jiný prvek, jehož text slouží jako přístupný název. Před aria-label mu dejte přednost, když je text popisku na stránce už viditelný:

<h2 id="billing-heading">Fakturační adresa</h2>
<form aria-labelledby="billing-heading">...</form>

aria-describedby — odkazuje na doplňkový text, který prvek popisuje nad rámec jeho názvu:

<input type="password" aria-describedby="pwd-hint">
<p id="pwd-hint">Musí mít alespoň 12 znaků a obsahovat jeden symbol.</p>

aria-expanded — udává, zda je rozbalovací prvek (rozbalovací nabídka, akordeon, menu) otevřený nebo zavřený. Aktualizujte jej v JavaScriptu při každé změně stavu:

<button aria-expanded="false" aria-controls="nav-menu">Menu</button>
<ul id="nav-menu" hidden>...</ul>

aria-hidden="true" — odebere prvek ze stromu přístupnosti. Používejte pro dekorativní ikony, duplicitní text nebo vizuální prvky, které by uživatelům čteček obrazovky přidávaly jen šum:

<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 hvězdičky z 5</span>

aria-disabled="true" — označí ovládací prvek jako zakázaný, aniž by jej odebral z pořadí fokusu. Hodí se, když chcete, aby uživatelé zjistili, že prvek existuje, a pochopili, proč je nedostupný, místo aby byl tiše přeskočen:

<button aria-disabled="true">Odeslat (nejprve vyplňte všechna pole)</button>

Testování ARIA v praxi

Napsat atributy ARIA je jednoduché. Napsat je správně vyžaduje testování. Automatizované skenery zachytí zjevně rozbité vzory — role="button" bez přístupného názvu, aria-labelledby odkazující na neexistující ID, živou oblast s neplatnou hodnotou aria-live. Nedokážou vám ale říci, zda ohlášený text dává v kontextu smysl, ani zda se složitý vlastní widget chová správně, když se v něm naviguje pouze klávesnicí.

Pro testování v reálných podmínkách zkombinujte alespoň dvě dvojice čtečky obrazovky a prohlížeče:

NVDA + Chrome ve Windows — zdarma, široce používaná, blízká reálnému rozložení uživatelů čteček obrazovky
VoiceOver + Safari v macOS nebo iOS — vestavěná, nezbytná pro testování přístupnosti na mobilech
JAWS + Chrome nebo Edge ve Windows — placená, ale nejrozšířenější čtečka obrazovky ve firemním prostředí

Procházejte své interaktivní komponenty pouze klávesnicí. Pozorně poslouchejte, co se ohlásí při otevření nabídky, při odeslání formuláře s chybou validace nebo při aktualizaci živé oblasti. Pokud je ohlášení nejednoznačné nebo zavádějící, je implementace ARIA špatně — bez ohledu na to, co hlásí jakýkoli automatizovaný nástroj.

Pravidlo, které pokrývá všechno

Specifikace ARIA obsahuje pět pravidel pro autory. To první je nejdůležitější:

Pokud můžete použít nativní HTML prvek nebo atribut, který již má vestavěnou sémantiku a chování, jež potřebujete, namísto toho, abyste prvek účelově přepoužili a přidali mu ARIA roli, stav nebo vlastnost, aby byl přístupný, pak to tak udělejte.

Stavějte na sémantickém HTML. Po ARIA sáhněte, teprve když HTML dojde. Testujte se skutečnou čtečkou obrazovky. To pokryje téměř každou situaci, se kterou se setkáte.

Pro praktickou kontrolu toho, jak jsou atributy ARIA implementovány napříč vaším webem, naše manuální audity přístupnosti zahrnují testování čtečkami obrazovky lidmi, kteří asistivní technologie používají každý den a dokážou odhalit jemné problémy s ARIA, jež automatizované nástroje přehlédnou.