Přístupné tooltipy (popisky)

E-shopy používají tooltipy (popisky) u ikony „i“ vedle poznámky o DPH, k vysvětlení dodací lhůty, u tlačítek s ikonou v záhlaví a u rad k velikostem. Vypadají jednoduše, ale tooltip, který se objeví jen při najetí myší, uživatelé klávesnice a dotykových obrazovek vůbec neuvidí, a tooltip, který zakryje obsah a nejde zavřít, je selháním WCAG. Stránka je součástí série přístupné vzory UI.

Kdy použít tooltip

APG popisuje tooltip jako „vyskakovací prvek, který zobrazuje informace související s prvkem, když prvek dostane fokus z klávesnice“ nebo na něj najede myš. Používejte ho jen pro krátký, nepodstatný popis ovládacího prvku — popisek tlačítka s ikonou, nápovědu. Důležité informace (ceny, dodací podmínky, pravidla vrácení) patří do viditelného textu. Interaktivní obsah patří do rozbalovacího prvku (disclosure) nebo dialogu.

Pozor: APG uvádí, že vzor tooltip je „rozpracovaný; pracovní skupina se na něm zatím neshodla“. Berte ho jako vodítko a testujte se skutečnými asistivními technologiemi.

Související kritéria WCAG

• 1.4.13 Obsah při najetí myší nebo fokusu (AA). Obsah, který se objeví při najetí myší nebo fokusu, musí:

  • jít zavřít — „je k dispozici mechanismus, jak další obsah zavřít bez přesunu ukazatele nebo fokusu klávesnice“ (obvykle Escape), pokud neoznamuje chybu vstupu;
  • jít na něj najet — ukazatel se může přesunout na tooltip, aniž by zmizel;
  • trvat — zůstane zobrazený, dokud spouštěč nezmizí, uživatel ho nezavře nebo informace přestane platit.

  Kritérium se nevztahuje na obsah, jehož zobrazení řídí prohlížeč; jako hlavní příklad W3C uvádí tooltip prohlížeče z atributu title.

• 2.1.1 Klávesnice (A): co se objeví při najetí myší, musí být dosažitelné i klávesnicí.

• 4.1.2 Název, role, hodnota (A): tlačítko s ikonou potřebuje název; samotný tooltip spolehlivým názvem není.

• 1.4.3 Kontrast (minimální) (AA): text tooltipu potřebuje 4,5:1.

• 2.4.11 Fokus není zakrytý (minimum) (AA): tooltip nesmí úplně zakrýt prvek s fokusem.

Příklad kódu

<!-- Tooltip jako popis ovládacího prvku, který může získat fokus (vzor APG) -->
<button type="button" class="icon-btn" aria-describedby="tip-compare">
  <svg aria-hidden="true" focusable="false"><use href="#icon-compare"></use></svg>
  <span class="visually-hidden">Porovnat</span>
</button>
<div id="tip-compare" role="tooltip" hidden>Přidat do porovnání</div>

<!-- Toggletip: informace otevřená kliknutím, ne najetím myší -->
<button type="button" aria-expanded="false" aria-controls="vat-info">
  <span class="visually-hidden">O DPH</span>
  <svg aria-hidden="true" focusable="false"><use href="#icon-info"></use></svg>
</button>
<p id="vat-info" hidden>Ceny obsahují DPH platné pro zemi doručení.</p>

Skript pro tooltip: zobrazte ho při focus a mouseenter, skryjte ho při blur a při mouseleave jak spouštěče, tak tooltipu (aby se na něj dalo najet ukazatelem) a skryjte ho při Escape, zatímco fokus zůstává na spouštěči. APG uvádí, že „tooltipy nedostávají fokus“ a „fokus zůstává na spouštěcím prvku, dokud je tooltip zobrazený“. Spouštěč odkazuje na tooltip pomocí aria-describedby.

Druhý příklad je rozbalovací tlačítko (disclosure), tentýž vzor APG, ze kterého se staví akordeony: přepíná aria-expanded a obsah zůstává viditelný, dokud ho uživatel nezavře — lepší pro dotykové obrazovky a delší text.

Ovládání klávesnicí

Časté chyby v e-shopech

• Tooltipy jen při najetí myší u ikon „i“, které jsou prvky span, takže uživatelé klávesnice a dotykových obrazovek poznámky o doručení nebo DPH nikdy neuvidí.
• Důležité podmínky jen v tooltipu: lhůty pro vrácení, cena dopravy, „cena za kilogram“.
• Tooltip zmizí, když se k němu ukazatel přiblíží, takže lidé se zvětšením obrazovky si ho nepřečtou.
• Nefunguje Escape a tooltip zakrývá další pole formuláře.
• Odkazy uvnitř tooltipu („Více informací“), které nikdy nemohou dostat fokus.
• Tlačítka s ikonou pojmenovaná jen atributem title, který se při fokusu ani dotyku nezobrazí.
• Text tooltipu s nízkým kontrastem, například světle šedá na bílé.

Co najde automatická kontrola a co ruční testování

Všechna jsou kartami v naší knihovně pravidel. 1.4.13 nejde otestovat automaticky: sken vidí stránku tak, jak se načte, ne to, co se objeví při najetí myší nebo fokusu. Testujte ručně: přejděte tabulátorem na každý spouštěč, ověřte, že se tooltip objeví, stiskněte Escape, najeďte na něj myší, přibližte na 200 % a ověřte, že je stále čitelný. Se zbytkem stránky pomůže rozšíření prohlížeče.

Začněte bezplatnou kontrolou jedné stránky. Je to automatizovaná kontrola, nikoli úplný audit.

Časté otázky

Které kritérium WCAG se týká tooltipů?

1.4.13 Obsah při najetí myší nebo fokusu (úroveň AA). Obsah, který se objeví při najetí myší nebo při fokusu, musí jít zavřít bez přesunu ukazatele nebo fokusu, musí jít na něj najet ukazatelem a musí zůstat zobrazený, dokud uživatel spouštěč neopustí nebo obsah nezavře.

Je atribut title přístupný tooltip?

Tooltip prohlížeče z atributu title je mimo rozsah 1.4.13, protože ho ovládá prohlížeč. I tak je to špatný způsob, jak předat důležitou informaci: nezobrazí se při fokusu z klávesnice ani na dotykových obrazovkách.

Co je vzor tooltip v APG?

Vyskakovací prvek s role="tooltip", který se objeví, když prvek dostane fokus z klávesnice nebo na něj najede ukazatel; spouštěč na něj odkazuje pomocí aria-describedby, tooltip nikdy nedostává fokus a Escape ho zavře. APG uvádí, že vzor je stále rozpracovaný a pracovní skupina se na něm zatím neshodla.

Může tooltip obsahovat odkazy nebo tlačítka?

Ne. Tooltip nikdy nedostává fokus, takže interaktivní obsah v něm není dosažitelný. Použijte místo toho rozbalovací prvek (disclosure) nebo nemodální dialog, který se otevře kliknutím.

Otestuje tooltipy automatická kontrola?

Najde prvky s role="tooltip" bez názvu a tlačítka s ikonou bez názvu. Zda se tooltip objeví při fokusu, zůstane při najetí myší a zavře se klávesou Escape, je potřeba otestovat ručně.

Zdroje

• W3C WAI, APG Tooltip pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
• W3C, Understanding 1.4.13 Content on Hover or Focus: https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html
• W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/