Tooltip

Proč je to přístupné

Kritérium 1.4.13 klade na obsah, který se zobrazuje při přejetí myší, tři požadavky, a běžné tooltipy nesplňují ani jeden. Tento splňuje všechny: dá se zavřít klávesou Escape bez přesunu zaměření, je přechodný, tedy myš se dá přesunout z odkazu na text vysvětlivky a ona nezmizí (důležité při velkém zvětšení), a je trvalý, protože nemá žádný časovač.

Vysvětlivka je připojená k tlačítku jako jeho popis přes aria-describedby, takže odečítač obrazovky ji přečte při zaměření, i když se vizuálně zobrazí až po chvíli. Spouštěčem je vždy zaměřitelný prvek; tooltip na obyčejném textu by uživatel klávesnice nikdy neobjevil.

Vyzkoušejte si sami

Klávesnice

Tab na zkratku WCAG 2.2: vysvětlivka se zobrazí.
Escape ji skryje, zaměření zůstává na zkratce.

Odečítač obrazovky

Při zaměření uslyšíte název tlačítka a hned za ním text vysvětlivky jako popis.

Zvětšení a přizpůsobení obsahu

Při 400% zvětšení se vysvětlivka zalomí a zůstane celá na obrazovce; pokud nad ní není místo, zobrazí se pod zkratkou.
Přesuňte myš ze zkratky na vysvětlivku: nezmizí.

Bez JavaScriptu

Text vysvětlivky je zobrazen přímo v textu v závorce za zkratkou. Informace nikdy nechybí.

Kód

<ad-tooltip>
  <button type="button" aria-describedby="tip-wcag">WCAG 2.2</button>
  <span role="tooltip" id="tip-wcag">Web Content Accessibility Guidelines 2.2 …</span>
</ad-tooltip>
<link rel="stylesheet" href="/assets/js/components/ad-tooltip/ad-tooltip.css">
<script type="module" src="/assets/js/components/ad-tooltip/ad-tooltip.js"></script>

Ukázka