ARIA atributy
HTML atributy aria-*
slouží k sémantickému vyznačení informací pro postižené uživatele.
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).
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í.
- Supported States and Properties – seznam všech 35
aria-*
atributů
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.
- Text v obrázku – přístupné řešení obrázkového textu
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>
Komentáře