M

MLOG

Slovenčina

Komplexný sprievodca implementáciou prístupných tooltipov pomocou stavov hover a focus, ktorý zaisťuje použiteľnosť pre všetkých používateľov vrátane ľudí so zdravotným postihnutím.

Implementácia tooltipov: Prístupné informácie pri prejdení myšou a zameraní

Tooltipy sú malé, kontextové pomocné správy, ktoré sa zobrazia, keď používateľ prejde kurzorom myši nad prvok alebo sa naň zameria. Môžu poskytovať dodatočné informácie, objasňovať účel prvku alebo ponúkať rady, ako používať funkciu. Tooltipy sa však môžu ľahko stať nočnou morou pre prístupnosť, ak nie sú implementované správne. Tento sprievodca načrtáva osvedčené postupy pre vytváranie tooltipov, ktoré sú použiteľné pre všetkých, vrátane používateľov so zdravotným postihnutím.

Prečo na prístupnosti tooltipov záleží

Prístupnosť nie je len o dodržiavaní noriem; je to o vytváraní lepšej používateľskej skúsenosti pre všetkých. Keď tooltipy nie sú prístupné, môžu vylúčiť používateľov, ktorí sa spoliehajú na asistenčné technológie, ako sú čítačky obrazovky, navigácia pomocou klávesnice alebo hlasový vstup. Zvážte tieto scenáre:

Dodržiavaním osvedčených postupov v oblasti prístupnosti môžeme zabezpečiť, že tooltipy budú používateľskú skúsenosť pre všetkých zlepšovať, a nie jej brániť.

Kľúčové princípy pre prístupné tooltipy

Nasledujúce princípy sú kľúčové pre vytváranie prístupných tooltipov:

  1. Poskytnite alternatívny prístup: Zabezpečte, aby boli tooltipy prístupné prostredníctvom prejdenia myšou (hover) aj zamerania klávesnicou (focus).
  2. Používajte atribúty ARIA: Používajte atribúty ARIA (Accessible Rich Internet Applications) na správnu identifikáciu a popis tooltipov pre asistenčné technológie.
  3. Spravujte focus: Kontrolujte, kam sa presunie focus, keď sa tooltip zobrazí a skryje.
  4. Zabezpečte dostatočný kontrast: Poskytnite dostatočný farebný kontrast medzi textom a pozadím tooltipu.
  5. Poskytnite dostatok času: Dajte používateľom dostatok času na prečítanie obsahu tooltipu.
  6. Umožnite ich zatvorenie: Poskytnite jasný spôsob, ako tooltip zavrieť.
  7. Vyhnite sa nadmernému používaniu: Používajte tooltipy striedmo a len vtedy, keď je to nevyhnutné.

Implementačné techniky

1. Použitie hover a focus

Najdôležitejším aspektom prístupných tooltipov je zabezpečenie ich dostupnosti pre používateľov myši aj klávesnice. To znamená, že tooltip by sa mal zobraziť ako pri prejdení myšou, tak aj pri zameraní prvku.

HTML:

<a href="#" aria-describedby="tooltip-example">Príklad odkazu</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Toto je prí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; /* Zaistí, aby bol tooltip navrchu */
}

Vysvetlenie:

JavaScript (Pokročilá kontrola - Voliteľné):

Zatiaľ čo CSS si poradí s jednoduchým zobrazením/skrytím, JavaScript umožňuje robustnejšiu kontrolu, najmä keď sú tooltipy generované dynamicky alebo vyžadujú zložitejšie správanie.

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žívanie atribútov ARIA

Atribúty ARIA sú nevyhnutné na poskytovanie sémantických informácií asistenčným technológiám. Tu je prehľad kľúčových atribútov:

Príklad:

<button aria-describedby="help-tooltip">Odoslať</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Kliknite sem pre odoslanie formulára.</div>

JavaScript (pre 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 zamerania (focus)

Keď sa tooltip zobrazí, vo všeobecnosti by *nemal* ukradnúť focus spúšťaciemu prvku. Focus by mal zostať na prvku, ktorý tooltip spustil. Tým sa zabezpečí, že používatelia klávesnice môžu pokračovať v navigácii po stránke bez neočakávaných prerušení.

Môžu však nastať situácie, kedy *chcete* presunúť focus na tooltip, najmä ak tooltip obsahuje interaktívne prvky (napr. odkazy, tlačidlá). V takom prípade zabezpečte, aby:

Vo väčšine prípadov je pre jednoduchosť a použiteľnosť preferované vyhnúť sa správe focusu v rámci samotného tooltipu.

4. Zabezpečenie dostatočného kontrastu

Farebný kontrast je kľúčový pre čitateľnosť. Zabezpečte, aby farba textu vo vašich tooltipoch mala dostatočný kontrast voči farbe pozadia. Smernice pre prístupnosť webového obsahu (WCAG) odporúčajú kontrastný pomer najmenej 4.5:1 pre bežný text a 3:1 pre veľký text (18pt alebo 14pt tučné).

Používajte online nástroje na kontrolu kontrastu, aby ste overili, že vaše farebné voľby spĺňajú štandardy prístupnosti. Príklady nástrojov na kontrolu kontrastu zahŕňajú:

Príklad (Dobrý kontrast):

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

Príklad (Slabý kontrast):

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

5. Poskytnutie dostatočného času

Používatelia potrebujú dostatok času na prečítanie obsahu tooltipu. Vyhnite sa tooltipom, ktoré miznú príliš rýchlo. Hoci neexistuje žiadne magické číslo, snažte sa o minimálny čas zobrazenia niekoľko sekúnd. Tooltip by mal tiež zostať viditeľný, pokiaľ používateľ prechádza myšou nad spúšťacím prvkom alebo ho má zameraný. Ak potrebujete tooltip zavrieť z dôvodu iných udalostí, poskytnite indikátor, že sa tooltip zavrie.

Ak je obsah tooltipu rozsiahly, zvážte poskytnutie spôsobu, ako môže používateľ tooltip manuálne zavrieť (napr. tlačidlo na zatvorenie alebo stlačenie klávesy Escape).

6. Možnosť zatvorenia

Hoci tooltipy často zmiznú automaticky, keď používateľ pohne myšou preč alebo zruší focus, je dobrou praxou poskytnúť jasný spôsob ich manuálneho zatvorenia, najmä pre rozsiahle tooltipy alebo tooltipy obsahujúce interaktívne prvky.

Metódy zatvárania tooltipov:

Príklad (Tlačidlo na zatvorenie):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Toto je obsah môjho tooltipu.
  <button onclick="hideTooltip()">Zavrieť</button>
</div>

Príklad (Klávesa Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Nahraďte vašou skutočnou funkciou na skrytie tooltipu
  }
});

7. Vyhýbanie sa nadmernému používaniu

Tooltipy by sa mali používať striedmo a len vtedy, keď poskytujú skutočne užitočné informácie. Nadmerné používanie tooltipov môže preplniť rozhranie, rozptyľovať používateľov a vytvárať frustrujúcu skúsenosť.

Alternatívy k tooltipom:

Pokročilé úvahy

Dynamický obsah

Ak je obsah vášho tooltipu generovaný dynamicky (napr. načítaný z API alebo aktualizovaný na základe vstupu používateľa), zabezpečte, aby sa atribút aria-describedby a viditeľnosť tooltipu zodpovedajúcim spôsobom aktualizovali. Na správu týchto aktualizácií použite JavaScript.

Umiestnenie

Dôkladne zvážte umiestnenie vašich tooltipov. Vyhnite sa ich umiestneniu tak, aby zakrývali dôležitý obsah alebo spôsobovali posuny v rozložení. Dávajte pozor na rôzne veľkosti obrazoviek a rozlíšenia a použite CSS na zabezpečenie, aby boli tooltipy vždy viditeľné v rámci zobrazovacej oblasti (viewport).

Mobilné zariadenia

Tooltipy sa tradične spoliehajú na interakcie pri prejdení myšou (hover), ktoré nie sú dostupné na dotykových zariadeniach. Pre mobilné zariadenia zvážte použitie alternatívnych interakčných metód, ako sú:

Testovanie vašich tooltipov

Dôkladne otestujte vaše tooltipy, aby ste sa uistili, že sú prístupné pre všetkých používateľov. Použite kombináciu manuálneho testovania a automatizovaných nástrojov na testovanie prístupnosti.

Metódy testovania:

Internacionalizácia (i18n) a lokalizácia (l10n)

Pri vývoji tooltipov pre globálne publikum majte na pamäti internacionalizáciu a lokalizáciu:

Záver

Implementácia prístupných tooltipov si vyžaduje starostlivé plánovanie a zmysel pre detail. Dodržiavaním princípov a techník uvedených v tomto sprievodcovi môžete vytvoriť tooltipy, ktoré sú použiteľné pre každého, bez ohľadu na jeho schopnosti. Pamätajte, že prístupnosť je nepretržitý proces, preto pokračujte v testovaní a zdokonaľovaní svojich tooltipov, aby ste zaistili, že spĺňajú potreby všetkých vašich používateľov.

Zdroje