Vylepšení přístupnosti webu přez 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.

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 š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

blok s hlavním obsahem webu má roli "main"



//ve formulari

Test checkbox 4 (musí být vybrán alespoň 1)

Jméno: *


/*
- "aria-describedby" urci co popisuje napriklad dany input => aria-describedby="username-tip" znamena, ze input s timto atributem popisuje prvek 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 zdroj 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 zde

<< zpět