Otázka č. 22: Jaký je rozdíl mezi aria-label, aria-labelledby a aria-describedby?
HTML atributy aria-* ze specifikace WAI-ARIA obecně slouží k sémantickému vyznačení informací. Využívají je především asistivní technologie (například odečítací či zvětšovací programy), které jsou díky nim schopny tento druh informací zprostředkovat svým uživatelům.
Jednou z věcí, které specifikace WAI-ARIA nabízí, je i možnost přístupným způsobem přiřadit textové popisky prvkům, u kterých takové popisky chybí. K popisování slouží atributy aria-label, aria-labelledby a aria-describedby. V čem se liší?
aria-label
Atribut aria-label slouží k přidání popisku (názvu) k prvku, jehož význam vyplývá z vizuální podoby stránky či umístění prvku, ale tento význam není nikde prezentován v textové podobě.
Velkou výhodou tohoto atributu je to, že jej můžeme použít prakticky s každým HTML elementem. A protože jeho podpora napříč asistivními technologiemi je na vysoké úrovni, jedná se o univerzální řešení k popisování prvků na webové stránce.
Příklad použití
<button aria-label="Zavřít"> × </button>
aria-labelledby
Pokud už vhodný textový popisek prvku někde na stránce existuje, lze jeho obsah využít místo kopírování stejného obsahu do atributu aria-label (Význam to má hlavně z hlediska programátorské zásady DRY [Don’t repeat yourself – neopakujte se]).
V takové případě použijeme atribut aria-labelledby, kterému se předá id prvku s textovým popiskem.
Příklad použití
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>
(Příklad je převzat z článku ARIA atributy na webu jecas.cz.)
aria-describedby
Pokud potřebujeme poskytnout uživateli detailnější popis (vysvětlení) k danému prvku, které už se někde na stránce nachází, použijeme k tomu atribut aria-describedby, kterému opět předáme id prvku s detainějším textovým popiskem.
Příklad použití
Atribut aria-describedby můžeme použít například k poskytnutí detailnějšího popisu grafu, který už se nachází v textu stránky (a můžeme se tedy na něj odkázat).
<figure> <img src=”graf.jpg” alt=”Stručný popis grafu.” aria-describedby=”detailni-popis-grafu”> <figcaption>Titulek obrázku.</figcaption> </figure> … <p id=”detailni-popis-grafu”>Text, detailněji popisující obrázek.</p>
Další čtení
Adventní kalendář o přístupnosti připravuji ve spolupráci s webstudiem IBA LF MU a ÚZIS ČR, které se tématice přístupnosti dlouhodobě a koncepčně věnuje.
Více k tématu na POSLEPU
Zákon o přístupnosti: Musíme mít přístupný i obsah, který publikujeme například na Facebooku či YouTube? (24/24)- Zákon o přístupnosti: Je PDF strojově čitelný formát z pohledu zákona o přístupnosti? (23/24)
- Zákon o přístupnosti: Je vhodné používat odkazy „více“ a „zde“? (21/24)
- Zákon o přístupnosti: Proč je důležitá přístupnost mobilního menu z klávesnice? (20/24)
- Zákon o přístupnosti: Slyšel jsem, že existuje vládní nařízení, bránící použití WordPressu, Joomly či Drupalu pro weby českých škol. Je to pravda? (19/24)
Ahoj. Narazil jsem na zajímavou situaci a rád bych se zeptal, zda se jedná o špatně implementované řešení z mé strany nebo ne:
Nadpis
Nějaký další text
Když si podobnou situaci zkusím přečíst pomocí VoiceOver na Macu, tak VoiceOver úplně ignoruje, že by byl přiřazený nějaký nadpis k elementu . Jakmile ale přepíšu na obyčejný , tak vše funguje. Může být chyba v tom, že odkazuju na prvek uvnitř a měl bych odkazovat jen na prvky mimo daný element? Nebo je zakopaný pes někde jinde? Díky moc za reakci.