Tooltip

Prečo je to prístupné

Kritérium 1.4.13 kladie na obsah, ktorý sa zobrazuje pri prejdení myšou, tri požiadavky, a bežné tooltipy nespĺňajú ani jednu. Tento spĺňa všetky: dá sa zavrieť klávesom Escape bez presunu zamerania, je prechodný, teda myš sa dá presunúť z odkazu na text vysvetlivky a ona nezmizne (dôležité pri veľkom priblížení), a je trvalý, pretože nemá žiaden časovač.

Vysvetlivka je pripojená k tlačidlu ako jeho popis cez aria-describedby, takže čítač obrazovky ju prečíta pri zameraní, hoci sa vizuálne zobrazí až po chvíli. Spúšťačom je vždy zameriateľný prvok; tooltip na obyčajnom texte by používateľ klávesnice nikdy neobjavil.

Vyskúšajte si sami

Klávesnica

Tab na skratku WCAG 2.2: vysvetlivka sa zobrazí.
Escape ju skryje, zameranie zostáva na skratke.

Čítač obrazovky

Pri zameraní počujete názov tlačidla a hneď za ním text vysvetlivky ako popis.

Priblíženie a reflow

Pri 400 % priblížení sa vysvetlivka zalomí a zostane celá na obrazovke; ak nad ňou nie je miesto, zobrazí sa pod skratkou.
Presuňte myš zo skratky na vysvetlivku: nezmizne.

Bez JavaScriptu

Text vysvetlivky je zobrazený priamo v texte v zátvorke za skratkou. Informácia nikdy nechýba.

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ážka