Úvod >Www >Ostatní >Vylepšení přístupnosti webu přes sémantiku.

Vylepšení přístupnosti webu přes sémantiku.

WAI ARIA

WAI ARIA je nástroj, který pomáhá zlepšit sémantiku webu a tím poskytnout asistivním technologiím (čtečky, hlasové výstupy, klávesnice pro orientaci hmatem atd..) informace, které jim HTML dát nemůže. Pomáhá tedy vylepšit přístupnost webu.

Poznámka (stav k září 2026): Pro hlavní bloky webu dnes existují přímo HTML značky <main>, <nav>, <header> a <footer>, které svou roli nesou samy – atribut role je u nich zbytečný. Obecně platí, že ARIA se použije jen tam, kde odpovídající HTML chybí. Popisek formulářového pole patří do značky <label for="…"> a role="tooltip" je určená jen pro vyskakovací nápovědu, ne pro trvale zobrazený popisek.

WAI ARIA je již brána jako doporučení W3C již od roku 2014. Podpora v prohlížečích i asistivních technologiích je velmi dobrá, tudíž není důvod ji nepoužívat. Jediná situace kdy se nedoporučuje použít WAI ARIA je, když máte tak jednoduchý web, že vše potřebné uživateli dodá "pouze" dobře napsané HTML.

Osobně WAI ARIA používám ve formulářích a k označení hlavních bloků webu. Lze ale použít i k tomu, že označíme v jakém stavu se dané bloky vyskytují (například zda je záložka zobrazena/skryta či menu vysunuté/zasunuté)
//hlavni HTML bloky
<div class="obsah" role="main">
blok s hlavním obsahem webu má roli "main"
</div>
<div class="menu" role="navigation">
navigace/menu má roli "navigation"
</div>

//ve formulari
<input id="checkbox_4" class="form_check_def" type="checkbox" name="test_check" aria-describedby="test_check_4_wai-aria" value="4" />
<span class="form_popisek_check_radio" role="tooltip" id="test_check_4_wai-aria">Test checkbox 4 (musí být vybrán alespoň 1)</span>

<span class="form_popisek" role="tooltip" id="jmeno_wai-aria">Jméno: <span class="znacka_povinne_polozky">*</span></span>
<input class="form_input_def" type="text" name="jmeno_fd" aria-describedby="jmeno_wai-aria" aria-required="true" value="" />

/*
- "aria-describedby" urci, ktery prvek popisuje dany input => aria-describedby="username-tip" znamena, ze popis inputu je v prvku s id "username-tip"
- "aria-required" oznacuje povinne polozky formulare
*/

//CSS cast
input:focus + [role="tooltip"] {
  display: block;
  position: absolute;
  top: 100%;
}



Stěžejním zdrojem co jak nastavit je přímo web W3C, kde bude vše nejaktuálnější. Web: https://www.w3.org/TR/wai-aria/
Další praktické příklady jsou k vidění například v příručce ARIA Authoring Practices Guide (W3C, anglicky; původní odkaz na příklady Heydona Pickeringa už nefunguje).