M

MLOG

Latviešu

Visaptveroša rokasgrāmata par pieejamu rīka padomu ieviešanu, izmantojot kursora un fokusa stāvokļus, nodrošinot lietojamību visiem lietotājiem.

Rīka padomu ieviešana: pieejama informācija ar kursoru un fokusu

Rīka padomi ir nelieli, kontekstuāli palīdzības ziņojumi, kas parādās, kad lietotājs virza peles kursoru virs elementa vai fokusējas uz to. Tie var sniegt papildu informāciju, paskaidrot elementa mērķi vai piedāvāt ieteikumus par funkcijas lietošanu. Tomēr, ja rīka padomi nav pareizi ieviesti, tie var viegli kļūt par pieejamības murgu. Šī rokasgrāmata izklāsta labākās prakses, kā izveidot rīka padomus, kas ir lietojami visiem, ieskaitot lietotājus ar invaliditāti.

Kāpēc pieejamība ir svarīga rīka padomiem

Pieejamība nav tikai par atbilstību standartiem; tā ir par labākas lietotāja pieredzes radīšanu visiem. Ja rīka padomi nav pieejami, tas var izslēgt lietotājus, kuri paļaujas uz palīgtehnoloģijām, piemēram, ekrāna lasītājiem, tastatūras navigāciju vai balss ievadi. Apsveriet šādus scenārijus:

Ievērojot pieejamības labākās prakses, mēs varam nodrošināt, ka rīka padomi uzlabo, nevis traucē lietotāja pieredzi visiem.

Galvenie principi pieejamiem rīka padomiem

Šie principi ir būtiski, lai izveidotu pieejamus rīka padomus:

  1. Nodrošiniet alternatīvu piekļuvi: Pārliecinieties, ka rīka padomi ir pieejami gan ar kursoru, gan ar tastatūras fokusu.
  2. Izmantojiet ARIA atribūtus: Izmantojiet ARIA (Accessible Rich Internet Applications) atribūtus, lai pareizi identificētu un aprakstītu rīka padomus palīgtehnoloģijām.
  3. Pārvaldiet fokusu: Kontrolējiet, kur nonāk fokuss, kad rīka padoms tiek parādīts un paslēpts.
  4. Nodrošiniet pietiekamu kontrastu: Nodrošiniet pietiekamu krāsu kontrastu starp rīka padoma tekstu un fonu.
  5. Atvēliet pietiekami daudz laika: Dodiet lietotājiem pietiekami daudz laika, lai izlasītu rīka padoma saturu.
  6. Padariet tos noraidāmus: Nodrošiniet skaidru veidu, kā noraidīt rīka padomu.
  7. Izvairieties no pārmērīgas lietošanas: Lietojiet rīka padomus taupīgi un tikai tad, kad tas ir nepieciešams.

Ieviešanas tehnikas

1. Izmantojot kursoru un fokusu

Vissvarīgākais pieejamu rīka padomu aspekts ir nodrošināt, ka tie ir pieejami gan peles, gan tastatūras lietotājiem. Tas nozīmē, ka rīka padomam vajadzētu parādīties gan uzvirzot kursoru, gan tad, kad elements saņem fokusu.

HTML:

<a href="#" aria-describedby="tooltip-example">Saites piemērs</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Šis ir rīka padoma piemērs.</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; /* Nodrošiniet, ka rīka padoms ir augšpusē */
}

Paskaidrojums:

JavaScript (Paplašināta kontrole - neobligāti):

Lai gan CSS var nodrošināt vienkāršu parādīšanu/paslēpšanu, JavaScript ļauj veikt robustāku kontroli, īpaši, ja rīka padomi tiek dinamiski ģenerēti vai tiem nepieciešama sarežģītāka uzvedība.

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. Izmantojot ARIA atribūtus

ARIA atribūti ir būtiski, lai nodrošinātu semantisko informāciju palīgtehnoloģijām. Šeit ir galveno atribūtu sadalījums:

Piemērs:

<button aria-describedby="help-tooltip">Iesniegt</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Noklikšķiniet šeit, lai iesniegtu veidlapu.</div>

JavaScript (priekš 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. Fokusa pārvaldība

Kad parādās rīka padoms, tam parasti *nevajadzētu* nozagt fokusu no ierosinošā elementa. Foksam jāpaliek uz elementa, kas izsauca rīka padomu. Tas nodrošina, ka tastatūras lietotāji var turpināt pārvietoties pa lapu bez neparedzētiem pārtraukumiem.

Tomēr var būt situācijas, kad jūs *vēlaties* pārvietot fokusu uz rīka padomu, īpaši, ja rīka padoms satur interaktīvus elementus (piemēram, saites, pogas). Šādā gadījumā pārliecinieties, ka:

Vairumā gadījumu vienkāršības un lietojamības dēļ priekšroka tiek dota izvairīšanās no fokusa pārvaldības pašā rīka padomā.

4. Pietiekama kontrasta nodrošināšana

Krāsu kontrasts ir būtisks lasāmībai. Pārliecinieties, ka jūsu rīka padomu teksta krāsai ir pietiekams kontrasts pret fona krāsu. Tīmekļa satura pieejamības vadlīnijas (WCAG) iesaka kontrasta attiecību vismaz 4.5:1 normālam tekstam un 3:1 lielam tekstam (18pt vai 14pt treknrakstā).

Izmantojiet tiešsaistes kontrastu pārbaudītājus, lai pārliecinātos, ka jūsu krāsu izvēle atbilst pieejamības standartiem. Kontrasta pārbaudītāju piemēri:

Piemērs (labs kontrasts):

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

Piemērs (slikts kontrasts):

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

5. Pietiekama laika atvēlēšana

Lietotājiem nepieciešams pietiekami daudz laika, lai izlasītu rīka padoma saturu. Izvairieties no rīka padomiem, kas pazūd pārāk ātri. Lai gan nav maģiska skaitļa, mērķējiet uz minimālo attēlošanas laiku dažas sekundes. Turklāt rīka padomam jāpaliek redzamam tik ilgi, kamēr lietotājs virza kursoru virs ierosinošā elementa vai ir uz to fokusējies. Ja jums ir nepieciešams noraidīt rīka padomu citu notikumu dēļ, nodrošiniet indikatoru, ka rīka padoms tiks aizvērts.

Ja rīka padoma saturs ir garš, apsveriet iespēju nodrošināt lietotājam veidu, kā manuāli noraidīt rīka padomu (piemēram, aizvēršanas poga vai Escape taustiņa nospiešana).

6. Padarot tos noraidāmus

Lai gan rīka padomi bieži pazūd automātiski, kad lietotājs pārvieto peli prom vai noņem fokusu, ir laba prakse nodrošināt skaidru veidu, kā tos manuāli noraidīt, īpaši gariem rīka padomiem vai rīka padomiem, kas satur interaktīvus elementus.

Metodes rīka padomu noraidīšanai:

Piemērs (aizvēršanas poga):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Šis ir mana rīka padoma saturs.
  <button onclick="hideTooltip()">Aizvērt</button>
</div>

Piemērs (Escape taustiņš):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Aizstājiet ar savu faktisko rīka padoma paslēpšanas funkciju
  }
});

7. Izvairīšanās no pārmērīgas lietošanas

Rīka padomi jālieto taupīgi un tikai tad, ja tie sniedz patiesi noderīgu informāciju. Pārmērīga rīka padomu lietošana var pārblīvēt saskarni, novērst lietotāju uzmanību un radīt nepatīkamu pieredzi.

Alternatīvas rīka padomiem:

Papildu apsvērumi

Dinamiskais saturs

Ja jūsu rīka padoma saturs tiek ģenerēts dinamiski (piemēram, ielādēts no API vai atjaunināts, pamatojoties uz lietotāja ievadi), nodrošiniet, ka aria-describedby atribūts un rīka padoma redzamība tiek atbilstoši atjaunināti. Izmantojiet JavaScript, lai pārvaldītu šos atjauninājumus.

Pozicionēšana

Rūpīgi apsveriet savu rīka padomu pozicionēšanu. Izvairieties no to novietošanas veidā, kas aizsedz svarīgu saturu vai izraisa izkārtojuma nobīdes. Pievērsiet uzmanību dažādiem ekrāna izmēriem un izšķirtspējām un izmantojiet CSS, lai nodrošinātu, ka rīka padomi vienmēr ir redzami skatlogā.

Mobilās ierīces

Rīka padomi tradicionāli paļaujas uz kursora mijiedarbību, kas nav pieejama skārienjutīgās ierīcēs. Mobilajām ierīcēm apsveriet alternatīvu mijiedarbības metožu izmantošanu, piemēram:

Jūsu rīka padomu testēšana

Rūpīgi pārbaudiet savus rīka padomus, lai nodrošinātu, ka tie ir pieejami visiem lietotājiem. Izmantojiet manuālās testēšanas un automatizēto pieejamības testēšanas rīku kombināciju.

Testēšanas metodes:

Internacionalizācija (i18n) un lokalizācija (l10n)

Izstrādājot rīka padomus globālai auditorijai, paturiet prātā internacionalizāciju un lokalizāciju:

Noslēgums

Pieejamu rīka padomu ieviešana prasa rūpīgu plānošanu un uzmanību detaļām. Ievērojot šajā rokasgrāmatā izklāstītos principus un tehnikas, jūs varat izveidot rīka padomus, kas ir lietojami visiem, neatkarīgi no viņu spējām. Atcerieties, ka pieejamība ir nepārtraukts process, tāpēc turpiniet testēt un pilnveidot savus rīka padomus, lai nodrošinātu, ka tie atbilst visu jūsu lietotāju vajadzībām.

Resursi