Co to jsou ARIA atributy

Zkratka ARIA ukrývá spojení Accessible Rich Internet Applications – v češtině to znamená něco jako „přístupné pokročilé internetové aplikace“ (doslovný překlad: přístupné bohaté internetové aplikace). HTML atributy aria-* slouží k sémantickému vyznačení informací pro postižené uživatele.

Článek původně vyšel na autorově webu Je čas.

Někteří uživatelé webových stránek mohou mít nějaké postižení, které jim komplikuje používání webů. Pro snazší prohlížení stránek proto využívají různých asistivních technologií (například hlasové čtečky) – ty se snaží ze zdrojového kódu připravit něco, co bude pro handicapovaného návštěvníka lépe použitelné.

Ideální je vytvořit web rovnou tak, aby se automaticky dobře používal postiženým lidem. Bohužel čím složitější aplikace, tím obtížnější to je. K zlepšení použitelnosti „hodně bohatých aplikací“ se hodí právě aria-* atributy.

Všechny ARIA atributy

Celkem je aria-* atributů velké množství. Seznam všech 35 aria-* atributů najdete na Supported States and Properties. Následující 4 mají nejčastější využití.

Název aria-label

Hodí se pro přidání textového popisu/názvu k obsahu, jehož význam vyplývá z visuálního stylu, ale čistě v textu není.

Prvním případem jsou obrázková tlačítka a ikony.

Pro ilustraci může posloužit následující tlačítko.

.tlacitko {
  background: url(zavrit.png);
  width: 50px;
  width: 50px;
}
<a href="" class="tlacitko"></a>

Pomocí HTML atributu aria-label mu půjde nastavit popisek na Zavřít.

<a href="" class="tlacitko" aria-label="Zavřít"></a>

Podobný postup se hodí i u použití symbolů jako ikony:

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

Pokud by tlačítko pro zavření obsahovalo samotný znak křížku × – na české klávesnici jde zapsat klávesovou zkratkou Pravý Alt + ) – byl by jeho význam po přečtení hlasovou čtečkou nejasný.

Obsah atributu aria-label nahradí původní textový obsah značky.

Název z jiného elementu aria-labelledby

Jako název (label) elementu jde použít i obsah elementu jiného, k tomu slouží atribut aria-labelledby, kterému se předá id zdroje.

Význam to má hlavně z hlediska programátorské zásady DRY (Don’t repeat yourself – neopakujte se). Pokud už je vhodný popisek na stránce, jde jeho obsah využít místo kopírování téhož do aria-label.

Jako příklad užití se nabízí třeba označení povinných položek ve formuláři hvězdičkou.

<p>
  Položka označená * <span id="povinne">je povinná</span>
</p>
<label for="policko>
  Políčko <span aria-labelledby="povinne">*</span>
</label>
<input id="policko" required>

Popis aria-describedby

Z jednoho elementu se odkazuje na ID elementu druhého, který ten první popisuje. Využití se dá najít u vysvětlujícího popisu formulářového políčka:

<label for="policko>
  Název pole
</label>
<input id="policko" aria-describedby="popisek">
<i id="popisek>Popisek políčka</i>

Skrytý obsah aria-hidden

Je-li nějaký obsah hlavně ilustračního významu a nemá smysl, aby ho hlasová čtečka četla nebo není potřeba mu nastavovat jiný obsahu přes aria-label, atribut aria-hidden slouží k jeho skrytí.

Případ užití může být u ikon tvořených symboly, které jsou doplněny popisem.

<button>
  <span aria-hidden="true">×</span>
  Zavřít
</button>

Odkazy

Autor se webdesignu intensivněji věnuje od roku 2005. V poslední době se zabývá hlavně tvorbou responsivních webů a frontendem. Od roku 2013 o tom píše na webu jecas.cz.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 16

Přehled komentářů

peci1
Anonym Opravdu?
Martin Hassman Re: Opravdu?
satai Re: Opravdu?
ic
Aleš Roubíček Re:
Deficek Re:
ic Re:
Radek Pavlíček Re:
MichalKleiner Testovani
Jan Prachař Postižení
Jaroslav Horák Nevim no
Martin Hassman Re: Nevim no
Radek Pavlíček Re: Nevim no
Jaroslav Horák Re: Nevim no
Martin Hassman Re: Nevim no
Zdroj: https://www.zdrojak.cz/?p=14853