M

MLOG

Čeština

Komplexní průvodce implementací přístupných tooltipů s využitím stavů hover a focus, který zajišťuje použitelnost pro všechny uživatele včetně osob se zdravotním postižením.

Implementace tooltipů: Přístupné informace při najetí myší a fokusu

Tooltipy jsou malé kontextové nápovědy, které se objeví, když uživatel najede kurzorem myši na prvek nebo na něj zaměří fokus. Mohou poskytovat dodatečné informace, objasňovat účel prvku nebo nabízet tipy, jak funkci použít. Tooltipy se však mohou snadno stát noční můrou přístupnosti, pokud nejsou implementovány správně. Tento průvodce popisuje osvědčené postupy pro vytváření tooltipů, které jsou použitelné pro každého, včetně uživatelů se zdravotním postižením.

Proč na přístupnosti u tooltipů záleží

Přístupnost není jen o dodržování předpisů; je to o vytváření lepšího uživatelského prožitku pro všechny. Pokud tooltipy nejsou přístupné, mohou vyloučit uživatele, kteří se spoléhají na asistivní technologie, jako jsou čtečky obrazovky, klávesnicová navigace nebo hlasové ovládání. Zvažte tyto scénáře:

Dodržováním osvědčených postupů v oblasti přístupnosti můžeme zajistit, že tooltipy uživatelský prožitek pro všechny spíše vylepší, než aby mu bránily.

Klíčové principy pro přístupné tooltipy

Následující principy jsou klíčové pro vytváření přístupných tooltipů:

  1. Poskytněte alternativní přístup: Zajistěte, aby byly tooltipy přístupné jak při najetí myší, tak při fokusu klávesnice.
  2. Používejte atributy ARIA: Používejte atributy ARIA (Accessible Rich Internet Applications) k správné identifikaci a popisu tooltipů pro asistivní technologie.
  3. Spravujte fokus: Kontrolujte, kam se přesune fokus, když je tooltip zobrazen a skryt.
  4. Zajistěte dostatečný kontrast: Poskytněte dostatečný barevný kontrast mezi textem a pozadím tooltipu.
  5. Poskytněte dostatek času: Dejte uživatelům dostatek času na přečtení obsahu tooltipu.
  6. Umožněte jejich zavření: Poskytněte jasný způsob, jak tooltip zavřít.
  7. Vyhněte se nadužívání: Používejte tooltipy střídmě a pouze v nezbytných případech.

Implementační techniky

1. Použití Hover a Focus

Nejdůležitějším aspektem přístupných tooltipů je zajištění jejich dostupnosti jak pro uživatele myši, tak pro uživatele klávesnice. To znamená, že tooltip by se měl objevit jak při najetí myší, tak při získání fokusu prvkem.

HTML:

<a href="#" aria-describedby="tooltip-example">Příklad odkazu</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Toto je příklad tooltipu.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Zajistí, že tooltip bude navrchu */
}

Vysvětlení:

JavaScript (Pokročilé ovládání - volitelné):

Zatímco CSS si poradí s jednoduchým zobrazením/skrytím, JavaScript umožňuje robustnější ovládání, zejména když jsou tooltipy generovány dynamicky nebo vyžadují složitější chování.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. Použití ARIA atributů

ARIA atributy jsou nezbytné pro poskytování sémantických informací asistivním technologiím. Zde je rozpis klíčových atributů:

Příklad:

<button aria-describedby="help-tooltip">Odeslat</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Kliknutím odešlete formulář.</div>

JavaScript (pro aria-hidden):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. Správa fokusu

Když se tooltip objeví, obecně by *neměl* ukrást fokus spouštěcímu prvku. Fokus by měl zůstat na prvku, který tooltip spustil. Tím se zajistí, že uživatelé klávesnice mohou pokračovat v navigaci po stránce bez neočekávaných přerušení.

Mohou však nastat situace, kdy *chcete* přesunout fokus na tooltip, zejména pokud tooltip obsahuje interaktivní prvky (např. odkazy, tlačítka). V takovém případě zajistěte, že:

Ve většině případů je pro jednoduchost a použitelnost preferováno vyhýbat se správě fokusu uvnitř samotného tooltipu.

4. Zajištění dostatečného kontrastu

Barevný kontrast je klíčový pro čitelnost. Ujistěte se, že barva textu ve vašich tooltipech má dostatečný kontrast oproti barvě pozadí. Pokyny pro přístupnost webového obsahu (WCAG) doporučují kontrastní poměr alespoň 4.5:1 pro normální text a 3:1 pro velký text (18pt nebo 14pt tučně).

Použijte online nástroje pro kontrolu kontrastu k ověření, že vaše barevné volby splňují standardy přístupnosti. Příklady nástrojů pro kontrolu kontrastu zahrnují:

Příklad (Dobrý kontrast):

.tooltip {
  background-color: #000;
  color: #fff;
}

Příklad (Špatný kontrast):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. Poskytnutí dostatečného času

Uživatelé potřebují dostatek času na přečtení obsahu tooltipu. Vyhněte se tooltipům, které mizí příliš rychle. Ačkoliv neexistuje žádné magické číslo, snažte se o minimální dobu zobrazení několika sekund. Tooltip by také měl zůstat viditelný, dokud uživatel najíždí myší na spouštěcí prvek nebo na něj má zaměřený fokus. Pokud potřebujete tooltip zavřít kvůli jiným událostem, poskytněte indikátor, že se tooltip zavře.

Pokud je obsah tooltipu zdlouhavý, zvažte poskytnutí způsobu, jakým může uživatel tooltip ručně zavřít (např. tlačítkem pro zavření nebo stisknutím klávesy Escape).

6. Umožnění jejich zavření

Ačkoliv tooltipy často mizí automaticky, když uživatel odsune myš nebo odstraní fokus, je dobrým zvykem poskytnout jasný způsob, jak je zavřít ručně, zejména u zdlouhavých tooltipů nebo tooltipů obsahujících interaktivní prvky.

Metody pro zavření tooltipů:

Příklad (Tlačítko pro zavření):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Toto je obsah mého tooltipu.
  <button onclick="hideTooltip()">Zavřít</button>
</div>

Příklad (Klávesa Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Nahraďte vaší skutečnou funkcí pro skrytí tooltipu
  }
});

7. Vyhýbání se nadužívání

Tooltipy by se měly používat střídmě a pouze tehdy, když poskytují skutečně užitečné informace. Nadužívání tooltipů může zahltit rozhraní, rozptylovat uživatele a vytvářet frustrující zážitek.

Alternativy k tooltipům:

Pokročilá zvážení

Dynamický obsah

Pokud je obsah vašeho tooltipu generován dynamicky (např. načítán z API nebo aktualizován na základě uživatelského vstupu), zajistěte, aby byl atribut aria-describedby a viditelnost tooltipu odpovídajícím způsobem aktualizovány. K řízení těchto aktualizací použijte JavaScript.

Polohování

Pečlivě zvažte polohování vašich tooltipů. Vyhněte se jejich umisťování tak, aby zakrývaly důležitý obsah nebo způsobovaly posuny v rozvržení. Mějte na paměti různé velikosti obrazovek a rozlišení a pomocí CSS zajistěte, aby byly tooltipy vždy viditelné v rámci viewportu.

Mobilní zařízení

Tooltipy se tradičně spoléhají na interakce při najetí myší (hover), které nejsou dostupné na dotykových zařízeních. Pro mobilní zařízení zvažte použití alternativních interakčních metod, jako jsou:

Testování vašich tooltipů

Důkladně testujte své tooltipy, abyste zajistili, že jsou přístupné všem uživatelům. Použijte kombinaci manuálního testování a automatizovaných nástrojů pro testování přístupnosti.

Metody testování:

Internacionalizace (i18n) a lokalizace (l10n)

Při vývoji tooltipů pro globální publikum mějte na paměti internacionalizaci a lokalizaci:

Závěr

Implementace přístupných tooltipů vyžaduje pečlivé plánování a pozornost k detailu. Dodržováním principů a technik uvedených v tomto průvodci můžete vytvářet tooltipy, které jsou použitelné pro každého, bez ohledu na jeho schopnosti. Pamatujte, že přístupnost je nepřetržitý proces, takže pokračujte v testování a zdokonalování svých tooltipů, abyste zajistili, že splňují potřeby všech vašich uživatelů.

Zdroje