M

MLOG

Hrvatski

Sveobuhvatan vodič za implementaciju pristupačnih tooltipova koristeći stanja prelaska mišem i fokusa, osiguravajući upotrebljivost za sve korisnike.

Implementacija tooltipa: Pristupačne informacije pri prelasku mišem i fokusu

Tooltipovi su male, kontekstualne poruke pomoći koje se pojavljuju kada korisnik pređe pokazivačem miša preko elementa ili ga stavi u fokus. Oni mogu pružiti dodatne informacije, pojasniti svrhu elementa ili ponuditi savjete o korištenju neke značajke. Međutim, tooltipovi lako mogu postati noćna mora za pristupačnost ako se ne implementiraju ispravno. Ovaj vodič opisuje najbolje prakse za stvaranje tooltipova koji su upotrebljivi za sve, uključujući korisnike s invaliditetom.

Zašto je pristupačnost važna za tooltipove

Pristupačnost nije samo pitanje usklađenosti; radi se o stvaranju boljeg korisničkog iskustva za sve. Kada tooltipovi nisu pristupačni, to može isključiti korisnike koji se oslanjaju na pomoćne tehnologije poput čitača zaslona, navigacije tipkovnicom ili glasovnog unosa. Razmotrite ove scenarije:

Pridržavanjem najboljih praksi za pristupačnost možemo osigurati da tooltipovi poboljšavaju, a ne ometaju korisničko iskustvo za sve.

Ključna načela za pristupačne tooltipove

Sljedeća načela ključna su za stvaranje pristupačnih tooltipova:

  1. Omogućite alternativni pristup: Osigurajte da su tooltipovi dostupni i putem prelaska mišem i putem fokusa tipkovnice.
  2. Koristite ARIA atribute: Koristite ARIA (Accessible Rich Internet Applications) atribute kako biste pravilno identificirali i opisali tooltipove pomoćnim tehnologijama.
  3. Upravljajte fokusom: Kontrolirajte kamo ide fokus kada se tooltip prikaže i sakrije.
  4. Osigurajte dovoljan kontrast: Omogućite dovoljan kontrast boja između teksta tooltipa i pozadine.
  5. Omogućite dovoljno vremena: Dajte korisnicima dovoljno vremena da pročitaju sadržaj tooltipa.
  6. Omogućite njihovo zatvaranje: Pružite jasan način za zatvaranje tooltipa.
  7. Izbjegavajte prekomjernu upotrebu: Koristite tooltipove umjereno i samo kada je to nužno.

Tehnike implementacije

1. Korištenje prelaska mišem i fokusa

Najkritičniji aspekt pristupačnih tooltipova je osigurati da su dostupni i korisnicima miša i korisnicima tipkovnice. To znači da bi se tooltip trebao pojaviti i pri prelasku mišem i kada element dobije fokus.

HTML:

<a href="#" aria-describedby="tooltip-example">Primjer poveznice</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Ovo je primjer tooltipa.</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; /* Osigurava da je tooltip na vrhu */
}

Objašnjenje:

JavaScript (Napredna kontrola - Opcionalno):

Dok CSS može upravljati jednostavnim prikazivanjem/skrivanjem, JavaScript omogućuje robusniju kontrolu, posebno kada se tooltipovi dinamički generiraju ili zahtijevaju složenije ponašanje.

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. Korištenje ARIA atributa

ARIA atributi su ključni za pružanje semantičkih informacija pomoćnim tehnologijama. Evo pregleda ključnih atributa:

Primjer:

<button aria-describedby="help-tooltip">Pošalji</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Kliknite ovdje za slanje obrasca.</div>

JavaScript (za 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. Upravljanje fokusom

Kada se tooltip pojavi, on općenito *ne bi trebao* ukrasti fokus s elementa koji ga je pokrenuo. Fokus bi trebao ostati na elementu koji je pokrenuo tooltip. To osigurava da korisnici tipkovnice mogu nastaviti s navigacijom po stranici bez neočekivanih prekida.

Međutim, mogu postojati situacije u kojima *želite* premjestiti fokus na tooltip, posebno ako tooltip sadrži interaktivne elemente (npr. poveznice, gumbe). U tom slučaju, osigurajte da:

U većini slučajeva, izbjegavanje upravljanja fokusom unutar samog tooltipa je poželjnije radi jednostavnosti i upotrebljivosti.

4. Osiguravanje dovoljnog kontrasta

Kontrast boja je ključan za čitljivost. Osigurajte da boja teksta u vašim tooltipovima ima dovoljan kontrast u odnosu na boju pozadine. Smjernice za pristupačnost web sadržaja (WCAG) preporučuju omjer kontrasta od najmanje 4.5:1 za normalan tekst i 3:1 za veliki tekst (18pt ili 14pt podebljano).

Koristite online alate za provjeru kontrasta kako biste potvrdili da vaš odabir boja zadovoljava standarde pristupačnosti. Primjeri alata za provjeru kontrasta uključuju:

Primjer (Dobar kontrast):

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

Primjer (Loš kontrast):

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

5. Omogućavanje dovoljno vremena

Korisnici trebaju dovoljno vremena da pročitaju sadržaj tooltipa. Izbjegavajte tooltipove koji prebrzo nestaju. Iako ne postoji čarobni broj, ciljajte na minimalno vrijeme prikaza od nekoliko sekundi. Također, tooltip bi trebao ostati vidljiv sve dok korisnik prelazi mišem preko elementa ili ga ima u fokusu. Ako trebate zatvoriti tooltip zbog drugih događaja, pružite indikator da će se tooltip zatvoriti.

Ako je sadržaj tooltipa dugačak, razmislite o pružanju načina da korisnik ručno zatvori tooltip (npr. gumb za zatvaranje ili pritisak na tipku Escape).

6. Omogućavanje zatvaranja

Iako tooltipovi često automatski nestaju kada korisnik pomakne miš ili ukloni fokus, dobra je praksa pružiti jasan način za njihovo ručno zatvaranje, posebno za dugačke tooltipove ili tooltipove koji sadrže interaktivne elemente.

Metode za zatvaranje tooltipova:

Primjer (Gumb za zatvaranje):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Ovo je sadržaj mog tooltipa.
  <button onclick="hideTooltip()">Zatvori</button>
</div>

Primjer (Tipka Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Zamijenite sa svojom stvarnom funkcijom za skrivanje tooltipa
  }
});

7. Izbjegavanje prekomjerne upotrebe

Tooltipove treba koristiti umjereno i samo kada pružaju zaista korisne informacije. Prekomjerna upotreba tooltipova može zatrpati sučelje, ometati korisnike i stvoriti frustrirajuće iskustvo.

Alternative tooltipovima:

Napredna razmatranja

Dinamički sadržaj

Ako se sadržaj vašeg tooltipa dinamički generira (npr. učitava iz API-ja ili ažurira na temelju unosa korisnika), osigurajte da se atribut aria-describedby i vidljivost tooltipa ažuriraju u skladu s tim. Koristite JavaScript za upravljanje tim ažuriranjima.

Pozicioniranje

Pažljivo razmislite o pozicioniranju vaših tooltipova. Izbjegavajte ih postavljati na način da zaklanjaju važan sadržaj ili uzrokuju pomake u izgledu. Budite svjesni različitih veličina zaslona i rezolucija te koristite CSS kako biste osigurali da su tooltipovi uvijek vidljivi unutar okvira za prikaz (viewport).

Mobilni uređaji

Tooltipovi se tradicionalno oslanjaju na interakcije prelaskom mišem, koje nisu dostupne na uređajima osjetljivim na dodir. Za mobilne uređaje razmislite o korištenju alternativnih metoda interakcije, kao što su:

Testiranje vaših tooltipova

Temeljito testirajte svoje tooltipove kako biste osigurali da su pristupačni svim korisnicima. Koristite kombinaciju ručnog testiranja i automatiziranih alata za testiranje pristupačnosti.

Metode testiranja:

Internacionalizacija (i18n) i lokalizacija (l10n)

Prilikom razvoja tooltipova za globalnu publiku, imajte na umu internacionalizaciju i lokalizaciju:

Zaključak

Implementacija pristupačnih tooltipova zahtijeva pažljivo planiranje i posvećenost detaljima. Pridržavanjem načela i tehnika opisanih u ovom vodiču, možete stvoriti tooltipove koji su upotrebljivi za sve, bez obzira na njihove sposobnosti. Zapamtite da je pristupačnost kontinuirani proces, stoga nastavite testirati i usavršavati svoje tooltipove kako biste osigurali da zadovoljavaju potrebe svih vaših korisnika.

Resursi