Zákon o přístupnosti: Jaký je rozdíl mezi aria-label, aria-labelledby a aria-describedby? (22/24)

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.

Radek Pavlíček

1 komentář u „Zákon o přístupnosti: Jaký je rozdíl mezi aria-label, aria-labelledby a aria-describedby? (22/24)

  1. 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.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Tato stránka používá Akismet k omezení spamu. Podívejte se, jak vaše data z komentářů zpracováváme..