Archiv štítku: Zákon o přístupnosti

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.

Zákon o přístupnosti: Je vhodné používat odkazy “více” a “zde”? (21/24)

Otázka č. 21: Je vhodné používat odkazy “více” a “zde”?

Není.

Jedno ze základních pravidel přístupnosti říká, že z textu (označení) každého odkazu by měl uživatel poznat, kam odkaz vede a co může uživatel na cílové stránce očekávat. Nevýstižné texty odkazů dokáží frustrovat uživatele stejně jako chodba plná dveří, na kterých jsou sice cedulky, ale jejich obsah nám nic neříká o tom, co nebo kdo se za dveřmi nachází.

Výstižné označování odkazů tak může uživatelům práci se stránkou významně zjednodušit. Jednou ze skupin uživatelů, která z dobře a výstižně popsaných odkazů profituje, protože jim významně zefektivňuje práci s webem, jsou uživatelé screen readerů (odečítačů obrazovky) – tedy uživatelé nevidomí či prakticky nevidomí. Práce se stránkou prostřednictvím hlasového výstupu je totiž pomalejší už sama o sobě, a není ji proto třeba uživatelům navíc komplikovat nevhodným označením odkazů.

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.

Zákon o přístupnosti: Proč je důležitá přístupnost mobilního menu z klávesnice? (20/24)

Otázka č. 20: Proč je důležitá přístupnost mobilního menu z klávesnice?

Hlavní důvody jsou tři:

  • není vyloučeno, že i na desktopovém zařízení s klávesnicí se zobrazí mobilní verze webu (při menších velikostech okna, rozlišení displeje apod.);
  • i mobilní zařízení se mohou ovládat pomocí klávesnice – u nevidomých uživatelů (obzvlášť při systematičtější práci) je to poměrně časté;
  • korektnost rozhraní v tomto směru je nepřímou podmínkou k tomu, aby mobilní menu bylo možné na mobilních zařízeních používat pomocí asistivních technologií (typicky odečítače obrazovky) i v případech, kdy uživatel zařízení ovládá dotykovými gesty.

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.