Správné značení aktivních prvků atributy title, aria-label, aria-labelledby a placeholder – Jak na přístupnost

Při tvorbě webových stránek, které mají být dobře přístupné uživatelům s různým postižením nebo situačním znevýhodněním, máme několik možností, jak aktivním prvkům, jako jsou tlačítka, odkazy nebo editační pole, přiřadit pojmenování či popisky. V tomto článku si ujasníme, jaká jsou doporučení a rozdíly mezi různými způsoby takového značení s ohledem na přístupnost. Než si ale tyto rozdíly popíšeme, doporučujeme seznámit se s odlišnostmi různých režimů odečítačů obrazovky ve Windows, protože tyto režimy určují, zda je přiřazené pojmenování při procházení webové stránky uživatelem používajícím odečítač čteno odečítači nebo ne.

Atribut title

Značkovací jazyk HTML nabízí atribut title, který umožňuje elementu přiřadit text, tzv. tooltip, jenž se má zobrazit při najetí myší na daný element. Atribut title však nemá efekt pouze pro vidící uživatele, ale v určitých případech, viz níže, je čten také odečítači obrazovky v momentě, kdy odečítačem element s tímto atributem zaměříme.

S atributem title se často setkáváme u tlačítek implementovaných pomocí elementu <button>, případně atributem role="button". Taková tlačítka často nemají žádný textový obsah, ale obsahují jen grafickou ikonu. Popisek, například s významem tlačítka, zobrazí díky atributu title až po najetí myší. Podobně je často atribut title používán na odkazech <a>.

Problémy atributu title

Z hlediska přístupnosti je používání HTML atributu title problematické hned z několika důvodů. Je proto doporučeno doplňující text pokud možno nezobrazovat po najetí myší, ale rovnou na stránce, například vedle ikony. Používání přímo viditelného textu místo atributu title je navíc doporučeno také z hlediska optimalizace pro vyhledávače (SEO). Následující skupiny uživatelů nemohou text atributu title přečíst:

• uživatelé zařízení s dotykovou obrazovkou;

• uživatelé pohybující se na stránkách jen pomocí klávesnice (některé prohlížeče sice zobrazí tooltip při zaměření daného elementu fokusem klávesnice, avšak to jen pro elementy zaměřitelné fokusem, tedy nikoliv například pro statické obrázky);

• uživatelé s tělesným postižením používající k ovládání počítače různé asistivní přepínače nebo spínače, případně ovládající počítač hlasem;

• uživatelé s postižením jemné motoriky, jimž může činit problémy prvek přesně zaměřit myší;

• v určitých případech uživatelé odečítačů obrazovky;

• zrakově postižení uživatelé používající zvětšovací software (při čtení textu tooltipu mohou mít problémy);

• někteří uživatelé s kognitivním postižením.

Pokud přece jen potřebujete vytvořit tlačítko s tooltipem, tedy textem zobrazeným po najetí myší, tak raději než samotné použití atributu title doporučujeme toto přístupnější řešení využívající atribut aria-labelledby či aria-label a další triky. Ještě lepší, jak je blíže popsáno v odkazovaném článku, je však nahradit tooltip za toggletip, tedy za text zobrazující se nikoliv po najetí myší, ale až po aktivaci dotyčného prvku.

Výjimky, kdy je vhodné atribut title použít, jeho různé záludnosti a bližší rozbor jeho chování napříč odlišnými webovými prohlížeči a odečítači je případně popsán v tomto článku nebo také v  technice H65 od W3C.

Odečítače a chování atributu title

Předpokládejme, že jsme aktivnímu elementu přiřadili popisek jen pomocí atributu title, tj. nepoužili jsme jiný způsob pojmenování, například textový obsah elementu, atribut aria-label nebo aria-labelledby. V tomto případě některé odečítače (konkrétně například NVDA 2025.3.3) u některých elementů (konkrétně například u odkazů <a>) pojmenování nepřečtou. Základním pravidlem je tedy nepoužívat pro pojmenování aktivního elementu pouze atribut title. Použijeme-li však zároveň také jiný způsob pojmenování, tak je potřeba zaručit, že toto pojmenování je zcela totožné jako pojmenování přes atribut title. Například bude-li se lišit obsah atributu title od obsahu atributu aria-label jen velikostí počátečního písmene či přítomností tečky na konci, tak některé odečítače (například NVDA 2025.3.3) přečtou při zaměření takového elementu totožné pojmenování dvakrát.

Častým jevem souvisejícím s používáním atributu title bývá nastavení tohoto atributu na odkazech obsahujících obrázek. V takovém případě doporučujeme atribut title nenastavovat na obrázku, tedy například na elementu <img>, ale nastavit jej místo toho na obalujícím odkazu <a>. Tím dosáhneme spolehlivějšího čtení tohoto atributu napříč různými odečítači.

Dále je dobré mít na paměti, že přiřazení popisku k elementu přes atribut aria-describedby či aria-description přepíše popisek přiřazený přes atribut title.

Použijeme-li na obrázcích (například na elementu <img>) jak atribut alt, tak atribut title, tak některé odečítače (například JAWS 2026.2512.50) při zaměření takového obrázku přečtou vždy jen popisek určený atributem alt. Jiné odečítače (například NVDA 2025.3.3) v prohlížecím režimu přečtou popisek určený atributem title jen při zaměření obrázku přes rychlou klávesu „G“, nikoliv přes klávesové šipky. Závěr tedy je, že ani u obrázků není dobré na čtení atributu title odečítačem spoléhat.

Atributy aria-label a aria-labelledby

Atributy aria-label a aria-labelledby slouží k nastavení vizuálně skrytého pojmenování elementu pro asistivní technologie, jako jsou odečítače obrazovky. Při používání těchto atributů je dobré myslet na následující:

• Pojmenování přiřazené pomocí těchto atributů zcela přepíše, tedy nikoliv rozšíří, pojmenování určené textovým obsahem daného elementu. Například element <button aria-label="Základní informace o mně">Jan Novák</button> odečítače přečtou nikoliv jako „Jan Novák, Základní informace o mně“, ale jako „Základní informace o mně“.

• Pojmenování přiřazené pomocí těchto atributů má tedy vyšší prioritu než pojmenování určené textovým obsahem elementu.

• Liší-li se viditelné pojmenování elementu od pojmenování určeného těmito atributy, tak by text viditelného pojmenování měl být obsažen uvnitř pojmenování určeného těmito atributy. Důvodem je, že vidící uživatelé ovládající webovou stránku pomocí hlasových příkazů dávají pokyny na základě pojmenování elementů viditelných na stránce, přičemž hlas rozpoznávající software hledá text z těchto pokynů v pojmenováních určených atributy aria-label či aria-labelledby. Nejlepší je viditelný text uvést na začátku pojmenování určeného těmito atributy. Více o této problematice viz kritérium úspěšnosti 2.5.3 – Label in Name standardu WCAG.

Atribut placeholder

U textových elementů <input> a elementu <textarea> je možné nastavit HTML atribut placeholder. Hodnotou tohoto atributu je text, který se má v daném poli zobrazit za předpokladu, že v poli není vyplněna žádná hodnota. Při volbě správné hodnoty tohoto atributu doporučujeme pamatovat na následující:

• Hodnotou atributu by měl být text napovídající, jakou hodnotu je možné do daného pole vepsat, jako například <input type="text" name="name" id="name" placeholder="Např. Jan Novák">.

• Atribut placeholder by tedy neměl obsahovat pojmenování textového pole, např. „Jméno“. To by mělo být nastaveno viditelně pomocí elementu <label> svázaného s dotyčným polem přes atribut for. Viditelné pojmenování přes element <label> pomáhá vidícím uživatelům myši a dotykových zařízení s aktivací daného pole pro psaní, neboť kurzor do pole lze pak přesunout také kliknutím nebo dotykem na toto pojmenování realizované elementem <label>.

• Jestliže poli chybně nastavíte pouze atribut placeholder a nepojmenujete jej pomocí elementu <label>, případně pomocí atributu aria-labelledby, tak vidící uživatelé mohou mít problémy s určením významu pole, pokud je toto pole již vyplněno, což se může stát také při automatickém vyplnění hodnot polí prohlížečem.

• Výjimkou mohou být například textová pole pro zadání vyhledávání na stránce, která nemusí být doprovázena viditelným textovým popiskem, ale postačí je doplnit o tlačítko „Hledat“ nebo ikonu typicky lupy a řádně pole pojmenovat atributem aria-label.

• Do hodnoty atributu placeholder byste neměli psát ani bližší instrukce k vyplnění daného pole, neboť tyto instrukce zmizí, jakmile uživatel začne do pole psát, což může zmást nejen uživatele s kognitivním postižením.

• Pro vizuální odlišení textu atributu placeholder od textu vyplněného v daném poli je text atributu placeholder v poli prohlížeče zobrazen s menším kontrastem než vyplněný text, takže slabozrací uživatelé mohou mít problémy s jeho přečtením. To je další důvod, proč jej nepoužívat pro pojmenování polí.

Související kritéria úspěšnosti standardu WCAG

Výše zmíněná doporučení vycházejí jednak z dobré praxe, jednak z následujících takzvaných kritérií úspěšnosti webového standardu WCAG 2.2:

• 1.1.1 – Non-text Content.

• 1.3.1 – Info and Relationships.

• 2.4.6 – Headings and Labels.

• 2.5.3 – Label in Name.

• 3.3.2 – Labels or Instructions.

• 4.1.2 – Name, Role, Value.

Autor: Adam Samec