Č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

• Dev.Opera: UX accessibility with aria-label
• W3C: Accessible Rich Internet Applications