M

MLOG

Slovenščina

Celovit vodnik za implementacijo dostopnih opisov orodij z uporabo stanj lebdenja in fokusa, ki zagotavlja uporabnost za vse uporabnike, vključno z invalidi.

Implementacija opisov orodij: Dostopne informacije ob lebdenju in fokusu

Opisi orodij (angl. tooltips) so majhna, kontekstualna sporočila za pomoč, ki se prikažejo, ko uporabnik z miško lebdi nad elementom ali ga fokusira. Lahko zagotovijo dodatne informacije, pojasnijo namen elementa ali ponudijo namige za uporabo funkcije. Vendar pa lahko opisi orodij hitro postanejo nočna mora za dostopnost, če niso pravilno implementirani. Ta vodnik opisuje najboljše prakse za ustvarjanje opisov orodij, ki so uporabni za vse, vključno z uporabniki z invalidnostmi.

Zakaj je dostopnost pri opisih orodij pomembna

Dostopnost ni le vprašanje skladnosti; gre za ustvarjanje boljše uporabniške izkušnje za vse. Ko opisi orodij niso dostopni, lahko izključijo uporabnike, ki se zanašajo na podporne tehnologije, kot so bralniki zaslona, navigacija s tipkovnico ali glasovni vnos. Razmislite o naslednjih scenarijih:

Z upoštevanjem najboljših praks za dostopnost lahko zagotovimo, da opisi orodij izboljšajo in ne ovirajo uporabniške izkušnje za vse.

Ključna načela za dostopne opise orodij

Naslednja načela so ključna za ustvarjanje dostopnih opisov orodij:

  1. Zagotovite alternativni dostop: Zagotovite, da so opisi orodij dostopni tako ob lebdenju z miško kot ob fokusu s tipkovnico.
  2. Uporabite atribute ARIA: Uporabite atribute ARIA (Accessible Rich Internet Applications) za pravilno identifikacijo in opisovanje opisov orodij podpornim tehnologijam.
  3. Upravljajte fokus: Nadzirajte, kam gre fokus, ko je opis orodja prikazan in skrit.
  4. Zagotovite zadosten kontrast: Zagotovite dovolj barvnega kontrasta med besedilom in ozadjem opisa orodja.
  5. Omogočite dovolj časa: Dajte uporabnikom dovolj časa za branje vsebine opisa orodja.
  6. Naredite jih zapirljive: Zagotovite jasen način za zapiranje opisa orodja.
  7. Izogibajte se pretirani uporabi: Opise orodij uporabljajte zmerno in le, kadar je to potrebno.

Tehnike implementacije

1. Uporaba lebdenja in fokusa

Najpomembnejši vidik dostopnih opisov orodij je zagotoviti, da so dostopni tako uporabnikom miške kot tipkovnice. To pomeni, da se mora opis orodja prikazati tako ob lebdenju z miško kot takrat, ko element prejme fokus.

HTML:

<a href="#" aria-describedby="tooltip-example">Primer povezave</a>
<div id="tooltip-example" role="tooltip" style="display: none;">To je primer opisa orodja.</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; /* Zagotovite, da je opis orodja na vrhu */
}

Pojasnilo:

JavaScript (Napredni nadzor - neobvezno):

Medtem ko lahko CSS obravnava preprosto prikazovanje/skrivanje, JavaScript omogoča bolj robusten nadzor, še posebej, ko so opisi orodij dinamično generirani ali potrebujejo bolj kompleksno obnaš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. Uporaba atributov ARIA

Atributi ARIA so ključni za zagotavljanje semantičnih informacij podpornim tehnologijam. Sledi razčlenitev ključnih atributov:

Primer:

<button aria-describedby="help-tooltip">Pošlji</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Kliknite tukaj za pošiljanje obrazca.</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 fokusa

Ko se prikaže opis orodja, na splošno *ne sme* prevzeti fokusa od sprožilnega elementa. Fokus mora ostati na elementu, ki je sprožil opis orodja. To zagotavlja, da lahko uporabniki tipkovnice nadaljujejo z navigacijo po strani brez nepričakovanih prekinitev.

Vendar pa lahko obstajajo situacije, ko *želite* premakniti fokus na opis orodja, še posebej, če opis orodja vsebuje interaktivne elemente (npr. povezave, gumbe). V tem primeru zagotovite, da:

V večini primerov je za enostavnost in uporabnost bolje, da se izogibamo upravljanju fokusa znotraj samega opisa orodja.

4. Zagotavljanje zadostnega kontrasta

Barvni kontrast je ključnega pomena za berljivost. Zagotovite, da ima barva besedila v vaših opisih orodij zadosten kontrast glede na barvo ozadja. Smernice za dostopnost spletnih vsebin (WCAG) priporočajo kontrastno razmerje vsaj 4,5:1 za običajno besedilo in 3:1 za veliko besedilo (18pt ali 14pt krepko).

Uporabite spletna orodja za preverjanje kontrasta, da preverite, ali vaše barvne izbire ustrezajo standardom dostopnosti. Primeri preverjevalnikov kontrasta so:

Primer (dober kontrast):

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

Primer (slab kontrast):

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

5. Zagotavljanje zadostnega časa

Uporabniki potrebujejo dovolj časa za branje vsebine opisa orodja. Izogibajte se opisom orodij, ki prehitro izginejo. Čeprav ni čarobne številke, si prizadevajte za minimalni čas prikaza nekaj sekund. Poleg tega mora opis orodja ostati viden, dokler uporabnik lebdi nad sprožilnim elementom ali ga ima v fokusu. Če morate opis orodja zapreti zaradi drugih dogodkov, zagotovite indikator, da se bo opis orodja zaprl.

Če je vsebina opisa orodja dolga, razmislite o tem, da uporabniku omogočite ročno zapiranje opisa orodja (npr. z gumbom za zapiranje ali s pritiskom na tipko Escape).

6. Omogočanje zapiranja

Čeprav opisi orodij pogosto samodejno izginejo, ko uporabnik odmakne miško ali odstrani fokus, je dobra praksa zagotoviti jasen način za njihovo ročno zapiranje, še posebej za dolge opise orodij ali opise, ki vsebujejo interaktivne elemente.

Metode za zapiranje opisov orodij:

Primer (gumb za zapiranje):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  To je vsebina mojega opisa orodja.
  <button onclick="hideTooltip()">Zapri</button>
</div>

Primer (tipka Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Zamenjajte s svojo dejansko funkcijo za skrivanje opisa orodja
  }
});

7. Izogibanje pretirani uporabi

Opise orodij je treba uporabljati zmerno in le takrat, ko zagotavljajo resnično koristne informacije. Pretirana uporaba opisov orodij lahko nasiči vmesnik, moti uporabnike in ustvari frustrirajočo izkušnjo.

Alternative opisom orodij:

Napredne rešitve

Dinamična vsebina

Če je vsebina vašega opisa orodja dinamično generirana (npr. naložena iz API-ja ali posodobljena na podlagi uporabniškega vnosa), zagotovite, da se atribut aria-describedby in vidnost opisa orodja ustrezno posodobita. Za upravljanje teh posodobitev uporabite JavaScript.

Pozicioniranje

Pazljivo razmislite o pozicioniranju vaših opisov orodij. Izogibajte se postavljanju na način, ki zakriva pomembno vsebino ali povzroča premike postavitve. Bodite pozorni na različne velikosti zaslonov in ločljivosti ter uporabite CSS, da zagotovite, da so opisi orodij vedno vidni znotraj vidnega polja (viewport).

Mobilne naprave

Opisi orodij se tradicionalno zanašajo na interakcije z lebdenjem, ki niso na voljo na napravah na dotik. Za mobilne naprave razmislite o uporabi alternativnih metod interakcije, kot so:

Testiranje vaših opisov orodij

Temeljito preizkusite svoje opise orodij, da zagotovite, da so dostopni vsem uporabnikom. Uporabite kombinacijo ročnega testiranja in avtomatiziranih orodij za testiranje dostopnosti.

Metode testiranja:

Internacionalizacija (i18n) in lokalizacija (l10n)

Pri razvoju opisov orodij za globalno občinstvo imejte v mislih internacionalizacijo in lokalizacijo:

Zaključek

Implementacija dostopnih opisov orodij zahteva skrbno načrtovanje in pozornost do podrobnosti. Z upoštevanjem načel in tehnik, opisanih v tem vodniku, lahko ustvarite opise orodij, ki so uporabni za vse, ne glede na njihove zmožnosti. Ne pozabite, da je dostopnost stalen proces, zato nadaljujte s testiranjem in izboljševanjem svojih opisov orodij, da zagotovite, da ustrezajo potrebam vseh vaših uporabnikov.

Viri

Implementacija opisov orodij: Dostopne informacije ob lebdenju in fokusu | MLOG