První ARIA parametry prakticky: aria-label a aria-labelledby

Tato série bude hlavně čerpat z článků na MDN, protože je to velmi pěkný a ucelený zdroj informací, a bude to spíše jejich překlad. Budu se ale snažit i prakticky vysvětlovat, jaké mají tyto parametry přínosy a proč jsou důležité a jak se podle nich chová odečítač obrazovky.

aria-label

Přístupný název prvku lze zapsat i bez viditelného textu. Přesně k tomu slouží aria-label, který je součástí WAI-ARIA od verze 1.0, platí i v 1.1–1.3.

Co dělá

Poskytuje přístupný název, když prvek nemá vhodný viditelný text, typicky to bývá výhradně grafické tlačítko:

<button aria-label="Zavřít">×</button>

Čtečka ohlásí „Zavřít“, i když se text nikde nezobrazuje.

Na co se aplikuje

Lze použít na téměř všech prvcích HTML kromě rolí, které pojmenování zakazují. Běžně to jsou tlačítka, odkazy, formulářové prvky, přepínače/checkboxy/radio buttony, záložky, landmarky, dialogy a strukturální prvky potřebující vlastní název:

<nav aria-label="Hlavní navigace">...</nav>

Omezení

• Existuje-li viditelný text, který lze použít jako název, doporučuje se aria-labelledby místo aria-label, protože ten odkazuje na skutečný text v DOM:

  <h2 id="settings-heading">Nastavení</h2>
  <section aria-labelledby="settings-heading">...</section>

  Ne <section aria-label="Nastavení">, když stejnojmenný nadpis už existuje.

• Nesmí se použít u rolí bez pojmenování: buď čistě textové/formátovací role, které samy o sobě nejsou pojmenovatelným objektem (code, emphasis, strong, subscript, superscript, deletion, insertion, paragraph, caption, mark, term, time, suggestion, definition, tooltip), nebo role, které se přístupnostní sémantiky výslovně vzdávají (generic, presentation/none). Přidat tam aria-label přesto markupu nevadí, ale čtečka ho ignoruje. Jméno se nikam nepropíše, i když to v kódu vypadá v pořádku.
• Neslouží jako náhrada popisu — pro delší instrukce slouží aria-describedby nebo aria-description, ne aria-label.

Hodnota a vztah k jiným atributům

Hodnota je libovolný textový řetězec (aria-label="Zavřít"), a ne žádná pevná množina klíčových slov.

Jsou-li přítomny oba, aria-labelledby má přednost před aria-label:

<button aria-label="Zavřít okno" aria-labelledby="close-label">×</button>
<span id="close-label">Zavřít dialog</span>

(Použije se „Zavřít dialog“.) Existuje-li nativní HTML mechanismus pojmenování, má přednost před aria-label: <label> pro formulářový prvek, alt pro obrázek.

Proč to takhle je

• aria-label se vizuálně nezobrazuje. Vidící uživatel, který čte jen viditelný obsah, ho neuvidí. <button aria-label="Uložit">...</button> je přístupný pro čtečku, ale vizuálně je to stále ikona.
• Duplicitní aria-label na tlačítku, které už viditelný text má (<button aria-label="Uložit dokument">Uložit</button>), je zbytečný. Přístupný název ať radši vzniká z obsahu tlačítka samotného.

Příklad správného použití

<button type="button" aria-label="Zavřít">
    <svg aria-hidden="true">...</svg>
</button>

Čtečka ohlásí „Zavřít, tlačítko“. Jméno vezme z aria-label, protože viditelný text k dispozici není, což je zde vhodný způsob, jak právě název poskytnout.

aria-labelledby

Přístupný název prvku lze poskládat i z textu, který na stránce už existuje. Přesně k tomu slouží aria-labelledby, který je součástí WAI-ARIA od verze 1.0, platí i v 1.1–1.3.

Co dělá

Určuje přístupný název prvku odkazem na id jiného prvku (nebo víc prvků). Místo aby název obsahoval přímo jako text, přebírá ho z obsahu odkazovaného prvku:

<h2 id="nastaveni-nadpis">Nastavení</h2>
<section aria-labelledby="nastaveni-nadpis">...</section>

Čtečka ohlásí oblast jako „Nastavení“, přestože se to v section samotné nikde nepojmenovává.

Na co se aplikuje

Lze použít na téměř všech prvcích HTML kromě rolí, které pojmenování zakazují, stejně jako u aria-label. Typicky landmarky, dialogy, formulářové prvky, tabulky, skupiny a další prvky, které potřebují vlastní název a mají ho odkud vzít z existujícího textu na stránce.

Více odkazovaných ID

Hodnota může obsahovat víc id oddělených mezerou. Jejich texty se spojí v pořadí, v jakém jsou v aria-labelledby vypsané, ne v pořadí, v jakém jsou v DOM:

<span id="billing">Fakturační adresa</span>
<span id="name">Jméno</span>
<input type="text" aria-labelledby="billing name">

Výsledný přístupný název pole je „Fakturační adresa Jméno“.

Omezení

• Neexistuje-li odkazované id na stránce, aria-labelledby se prostě neuplatní a přístupný název se dopočítá jiným mechanismem (např. z aria-label, pokud je taky nastavený).
• Nesmí se použít u rolí bez pojmenování: stejný důvod i seznam jako u aria-label výše (textové/formátovací role bez vlastní identity, plus role vzdávající se sémantiky jako generic/presentation).
• Na rozdíl od <label for="..."> funguje i mimo formulářové prvky. Lze jím pojmenovat třeba <section>, <table> nebo <div role="dialog">.

Hodnota a vztah k jiným atributům

Hodnota je seznam jednoho nebo víc id oddělených mezerou, žádný přímý text. Jsou-li přítomny oba, aria-labelledby má přednost před aria-label:

<button aria-label="Zavřít okno" aria-labelledby="close-label">×</button>
<span id="close-label">Zavřít dialog</span>

(Použije se „Zavřít dialog“.)

Proč to takhle je

• Odkazování na existující text místo jeho duplikace v aria-label znamená, že text existuje jen na jednom místě. Když se viditelný text nadpisu změní, přístupný název se změní s ním automaticky.
• Odkazovaný prvek se použije i tehdy, když je sám vizuálně skrytý (aria-hidden="true" a podobně). Vazba se vyhodnotí bez ohledu na viditelnost cíle.
• Kombinace víc id umožňuje poskládat název z kousků textu, které jsou jinak v DOM samostatné (typicky štítek + kategorie).

Příklad správného použití

<nav aria-labelledby="produkty-nadpis">
<h2 id="produkty-nadpis">Naše produkty</h2>
...
</nav>

Čtečka ohlásí „Naše produkty, navigace“. <nav> se tak pojmenuje vlastním viditelným nadpisem, aniž by musel název obsahovat znovu jako vlastní text.