Vedlejší ARIA atributy: aria-details, aria-roledescription a aria-description

aria-details

aria-details je bohatší varianta aria-describedby pro obsah, který se nedá zploštit do jedné věty, aniž by ztratil smysl. Je součástí WAI-ARIA od verze 1.1, platí i v 1.2–1.3 (na rozdíl od trojice z minulého dílu je tedy o verzi mladší).

Co dělá

Odkazuje na prvek (nebo víc prvků), který nese podrobnější, strukturovaný obsah. Na rozdíl od aria-describedby se ale tenhle obsah nepřevádí na plochý text a nestává se součástí přístupného popisu. Čtečka dá uživateli vědět, že podrobnosti existují, a nechá ho do nich přejít samostatně:

<span role="term" aria-details="bezier-vysvetleni">Bézierova křivka</span>
...
<div id="bezier-vysvetleni" role="definition">
    <h2>Bézierova křivka</h2>
    <p>Matematicky popsaná křivka používaná v počítačové grafice a animaci...</p>
</div>

Přesná podoba se liší podle kombinace prohlížeče a čtečky. JAWS na fokusovaném prvku ohlásí „Has details“, NVDA (od verze 2021.2) umí přečíst shrnutí podrobností, ale jen přes příkaz, který si musí uživatel sám navázat na klávesu ve Vstupních gestech. Bez tohoto nastavení se aria-details samo o sobě nijak neohlásí.

Na co se aplikuje

Podobně jako aria-describedby, tedy na téměř libovolný prvek. Hodí se tam, kde by zploštění do jedné věty ztratilo strukturu: definice s vlastním nadpisem, chybová hláška s odrážkovým seznamem, obrázek s delším popisem.

Omezení

Odkazovaný obsah se nepřevádí na text a nestává se součástí přístupného popisu prvku. aria-details proto nenahrazuje aria-describedby, který řeší jiný případ.
Podpora u čteček je nerovnoměrná. Před nasazením na klíčové místo si ověřte, jak si s ním poradí cílová kombinace prohlížeče a čtečky.
Na rozdíl od aria-label/aria-labelledby, které nejdou použít u rolí bez pojmenování (caption, code, generic a další, viz předchozí díl), se aria-details touhle výjimkou neřídí. Zákaz „nepojmenovatelných“ rolí platí jen pro přístupné jméno, ne pro popis. aria-details (stejně jako aria-describedby) proto funguje na libovolné roli bez omezení.

Hodnota a vztah k jiným atributům

Hodnota je jedno nebo víc id oddělených mezerou, stejně jako u aria-describedby. Lze ho kombinovat s aria-describedby na stejném prvku: jedno nese krátký plochý popis, druhé odkaz na podrobnosti.

Proč to takhle je

Ne každý doplňující obsah má smysl zploštit do jedné věty. Tabulka má řádky a sloupce, seznam kroků svoje pořadí, obrázek vlastní popisek: převod na plochý text (jako u aria-describedby) by tuhle strukturu smazal.
aria-details proto nechává obsah tak, jak je, a jen řekne čtečce, že tam něco podrobnějšího existuje a dá se do toho přejít.

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

<button aria-details="chyba-detail">Odeslat</button>
...
<div id="chyba-detail" role="alert">
    <h2>Formulář se nepodařilo odeslat</h2>
    <ul>
        <li>E-mail není v platném formátu</li>
        <li>Chybí telefonní číslo</li>
    </ul>
</div>

Chybová hláška má vlastní nadpis a seznam bodů. Zploštit ji do jedné věty přes aria-describedby by strukturu ztratilo, aria-details ji ale nechá tak, jak je. Na fokusovaném tlačítku JAWS ohlásí „Odeslat, tlačítko, Has details“. Teprve po přechodu do odkazovaného obsahu čtečka přečte nadpis „Formulář se nepodařilo odeslat“ a oba body seznamu zvlášť.

aria-roledescription

Čtečka oznamuje roli prvku (tlačítko, odkaz, karusel...) automaticky, podle toho, jaká role nebo element to je. aria-roledescription ale dovolí tohle oznámení přepsat vlastním, výstižnějším názvem. Je součástí WAI-ARIA od verze 1.1, platí i v 1.2–1.3.

Co dělá

Přepíše výchozí ohlášení role vlastním textem. Čtečka pak místo obecného názvu role řekne to, co autor napsal:

<section role="region" aria-roledescription="karusel" aria-label="Doporučené produkty">...</section>

Čtečka ohlásí „Doporučené produkty, karusel“ místo obecného „Doporučené produkty, oblast“.

Na co se aplikuje

Typicky na vlastní nebo složené komponenty, kde standardní role (group, region, article...) sama o sobě neříká, co to vlastně je: karusely, snímky prezentace, posuvníky s vlastním chováním.

Omezení

aria-roledescription nepřebíjí samotnou roli, jen její ohlášení. Mění jen to, jak se řekne nahlas, ne jak se s prvkem zachází. Funkčnost a klávesová obsluha musí pořád odpovídat skutečné roli.
Mělo by se používat střídmě. MDN k tomu výslovně radí, ať se přidává hlavně u neinteraktivních kontejnerových rolí (group, region) nebo pro upřesnění konkrétního widgetu, jinak přepisování známých názvů rolí spíš uškodí, než pomůže.
Musí být napsaný u prvku s platnou rolí (nefunguje u role="generic") a nesmí být prázdný ani vytvořený jen z mezer.
Při překladu stránky do jiného jazyka je potřeba přeložit i tenhle text. Jinak čtečka v cizojazyčné verzi ohlásí název role v jiném jazyce, než ve kterém je zbytek stránky.

Hodnota a vztah k jiným atributům

Hodnota je libovolný text, žádná pevná množina klíčových slov. Na rozdíl od role samotné, která musí být z definované sady. aria-roledescription se čte navíc k přístupnému jménu (aria-label nebo aria-labelledby), ne místo něj.

Proč to takhle je

Standardní role jako group nebo region jsou obecné. U složitější komponenty (karusel, prezentace) proto čtečka bez aria-roledescription ohlásí jen tenhle obecný název, ne co to doopravdy je.
Přepisuje se jen hlášení role, ne role samotná. Čtečka pořád ví, že se s prvkem dá zacházet jako se skupinou nebo oblastí, jen mu dá lidštější jméno.

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

<div role="article" aria-roledescription="snímek" aria-labelledby="snimek-nadpis">
    <h2 id="snimek-nadpis">Výsledky za čtvrtletí</h2>
    ...
</div>

Čtečka ohlásí „Výsledky za čtvrtletí, snímek“ místo výchozího „Výsledky za čtvrtletí, článek“.

aria-description

aria-label má sourozence i pro popis, nejen pro jméno. Atributem je přímý text bez nutnosti odkazovaného prvku. Zatím je to ale jen návrh, protože ariadescription je součástí až WAI-ARIA 1.3, která je stále ve stavu Working Draft, ne hotového doporučení.

Co dělá

Funguje mechanicky stejně jako aria-label: hodnota je přímo text, žádný odkaz na id. Liší se jen tím, k čemu se použije. aria-label dává prvku jméno, aria-description popis, což je stejný rozdíl jako mezi aria-labelledby a aria-describedby, jen bez odkazovaného prvku:

<div role="application" aria-label="Kalendář" aria-description="Rozvrh zápasů pro sezónu 2026">...</div>

V čtečkách, které aria-description už podporují, by se ohlásilo „Kalendář, aplikace, Rozvrh zápasů pro sezónu 2026“. Popis se čte hned po jménu a roli, stejně jako u aria-describedby.

Proč se tady nerozebírá do detailu

Je to teprve návrh specifikace, ne hotové doporučení, a může se ještě změnit.
Podpora u čteček je zatím omezená: MDN k němu výslovně radí, ať se do doby širší podpory používá raději aria-describedby z minulého dílu.
Až se dostane dál ve schvalovacím procesu a podpora bude lepší, může si zasloužit vlastní podrobný díl. Zatím je fér ho zmínit jen jako něco, co se teprve chystá.