Přejít k navigační liště

Zdroják » Webdesign » Co to jsou ARIA atributy

Co to jsou ARIA atributy

Články Webdesign

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.

Nálepky:

Č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

Komentáře

Subscribe
Upozornit na
guest
16 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
peci1
<span aria-hidden="true">

Vazne ARIA zapisuje boolean atributy touhle nestandardni HTML syntaxi?

Anonym

Tohle opravdu někdo kromě různých státních webů, který to musí mít dle zákona používá? Já myslím že ne, protože zbytečně plýtvat časem a prodlužovat si kód věcma, který jsou stejně k ničemu (kdo slepý bude číst web? lol) snad žádná soukromá firma nemůže zaplatit, ne?

Martin Hassman

No opravdu, mí všichni nevidomí kamarádi web čtou a je to pro ně snad i nejhlavnější zdroj informací. K ničemu to rozhodně není.

satai

Když ho očividně mohou číst i blbí…

ic

Já tady u tlačítek

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

jsem byl zvyklý raději na konstrukci

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

s tím, že pokud je potřeba místo textu Zavřít nějaká ikonka, tak to už doladím přes CSSka (skrýt text a do ::before dát content=“x“… třeba) je to trošku více textu v css stylech, ale zase lepší zobrazení bez css a lepší pochopení textu vyhledávači (né že by se zrovna tlačítko Zavřít muselo indexovat Googlem :) , to je přímo případ pro rel=“nofollow“ ale obecně se občas hodí si tlačítko a jeho odkaz nechat zaindexovat)

Je v tom z pohledu přístupnosti nějaký rozdíl? Případně je některé z těchto řešení lepší?

Aleš Roubíček

Screen readery nejsou vyhledávače a CSS interpretují. Takže když popisek schováš pomocí display: none tak ho AFAIK ani screen reader nepřečte. Dřív se kvůli tomu dělaly kejkle typu: přepozicovat popisek 10000px doleva… Aria atributy jsou v tomto ohledu mnohem čistším řešením.

Deficek

Popisek může schovat pomocí text-indent a má mnohem čistší řešení než prázdný element jehož obsah je nacpaný do ARIA atributu. Ještě by mohl použít

<a href="" class="tlacitko"><img src="obrazek.gif" alt="Zavřít"></a>

Záleží ovšem na situaci, ale vše je lepší než prázdný element.

ic

Právě zrovna display: none to byt nemůže, to už bych dovnitř nedostal tu ikonku pomocí toho ::before a content. Takže to je plno jiných fíglů, font-size, opacity, text-ident a dalších spousty. Ale zajímalo by mě, co z toho je pro čtečku k přečtení a co z toho bude ignorovat, to by byl zajímavý článek.

Radek Pavlíček

Pokud bys měl čas ujmout se přípravy těch různých řešení, rád je všechny vyzkouším s různými screen readery a pak o tom můžeme společně ten článek napsat. Šel bys do toho?

MichalKleiner

Co lze určitě doporučit je si nějakou softwarovou čtečku pro nevidomé vyzkoušet. Alespoň na klíčových stránkách/prvcích na webu. Kolikrát by se člověk divil, jak matoucí web může být bez správné podpory. Třeba právě když chybí popisek tlačítka.

Jan Prachař

Myslel jsem, že už se neříká „postižení“, ale „osoby s omezenou schopností pohybu a orientace“.

Jaroslav Horák

Jako ARIA furt nechápu. Proč se tahá něco nového když se podle mě dá vystačit s prvkama co už jsou?

  • aria-label=“Zavřít“ proč nebrat title?
  • taky mě to přijde zbytečné, to čtečka neinterpretuje required? To mu neřekne když se na ten input dostane?
  • aria-describedby=“popisek“ na tohle je placeholder případně label
  • aria-hidden=“true“ ok tohle jediné z příkladu beru, když čtečky neinterpretují css

Co mě z mého pohledu asi vadí je že se zodpovědnost přehazuje na x developerů místo toho aby to správně uměli ty čtečky. „Obtěžovat“ s tím někoho kdo má „postižené“ zákazníky v desetinách % místo toho aby to pořádně řešil někdo kdo má 100% postižených zákazníků (výrobci čteček).
Můj postoj se prostě skeptický, přijde mi že chce jen někdo plnit nějakou agendu. Možná jestli by nebyli lepší příklady? To co bylo v tomhle článku je z mého pohledu zbytečné.

Martin Hassman

ARIA byla vytvořena hlavně pro případy, které stávajícími prvky řešit nešly. Doporučuji přečíst starší seriál, který to třeba objasní podrobněji: http://www.zdrojak.cz/serialy/pristupnost-dynamickych-webovych-aplikaci/

Radek Pavlíček

Ale ono to vůbec není o přehazování zodpovědnosti. Screen readery (respektive asistivní technologie obecně) umí vytáhnout z kódu ohromnou spoustu informací a zprostředkovat je svým uživatelům. Je ale třeba, aby v kódu tyto informace byly. Pokud tam nejsou a vývojář dělá všechno (nadpisy, tlačítka, atp.) pomocí nastylovaných divů, neřeší přístupnost z klávesnice atp., pak není kde brát a je potřeba tyto situace nějakým způsobem ošetřit.

A právě zde je možné použít techniky z WAI-ARIA. Ty mohou buď přístupnost vylepšovat nad dnes běžně používané vývojářské postupy (zde bych zařadil třeba definování rolí jednotlivých částí stránek), nebo „hasit požáry“ tam, kde buď selhal developer, nebo neexistuje jiná technika.

Osvěta směrem k developerům je tedy potřeba právě proto, aby kód byl napsaný přátelsky pro asistivní technologie. Bez toho to nikdy fungovat nebude.

Obecně samozřejmě platí, že, když to jde, je lepší použít nativní HTML elementy.

Jaroslav Horák

Můžu tedy říct že pokud budu psát sémantické html tak by s tím neměli mít čtečky problém?

Martin Hassman

ARIA byla vytvořena hlavně pro webové aplikace. A psát dostatečně sémanticky webové aplikace nejde, samotné HTML k tomu prostředky nemá. ARIA se to snaží doplnit.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.