M

MLOG

Lietuvių

Išsamus vadovas, kaip įdiegti prieinamus patarimų įrankius naudojant užvedimo ir fokusavimo būsenas, užtikrinant patogumą visiems vartotojams, įskaitant ir turinčius negalią.

Patarimų įrankio diegimas: pasiekiama informacija užvedus pelę ir sufokusavus

Patarimų įrankiai (angl. tooltips) yra trumpi, kontekstiniai pagalbos pranešimai, kurie atsiranda vartotojui užvedus pelės žymeklį ant elemento arba jį sufokusavus. Jie gali suteikti papildomos informacijos, paaiškinti elemento paskirtį ar pasiūlyti užuominų, kaip naudotis funkcija. Tačiau netinkamai įdiegti patarimų įrankiai gali tapti tikru prieinamumo košmaru. Šiame vadove apžvelgiama geriausia praktika, kaip sukurti patarimų įrankius, kuriais galėtų naudotis visi, įskaitant vartotojus su negalia.

Kodėl patarimų įrankių prieinamumas yra svarbus

Prieinamumas – tai ne tik reikalavimų laikymasis; tai geresnės vartotojo patirties kūrimas visiems. Kai patarimų įrankiai nėra prieinami, tai gali atskirti vartotojus, kurie naudojasi pagalbinėmis technologijomis, tokiomis kaip ekrano skaitytuvai, naršymas klaviatūra ar įvestis balsu. Apsvarstykite šiuos scenarijus:

Laikydamiesi prieinamumo geriausios praktikos, galime užtikrinti, kad patarimų įrankiai pagerintų, o ne pablogintų vartotojo patirtį visiems.

Pagrindiniai prieinamų patarimų įrankių principai

Šie principai yra labai svarbūs kuriant prieinamus patarimų įrankius:

  1. Suteikite alternatyvią prieigą: Užtikrinkite, kad patarimų įrankiai būtų pasiekiami tiek užvedus pelę, tiek sufokusavus klaviatūra.
  2. Naudokite ARIA atributus: Naudokite ARIA (Accessible Rich Internet Applications) atributus, kad tinkamai identifikuotumėte ir apibūdintumėte patarimų įrankius pagalbinėms technologijoms.
  3. Valdykite fokusą: Kontroliuokite, kur nukreipiamas fokusas, kai patarimo įrankis rodomas ir slepiamas.
  4. Užtikrinkite pakankamą kontrastą: Užtikrinkite pakankamą spalvų kontrastą tarp patarimo įrankio teksto ir fono.
  5. Suteikite pakankamai laiko: Suteikite vartotojams pakankamai laiko perskaityti patarimo įrankio turinį.
  6. Padarykite juos uždaromus: Suteikite aiškų būdą uždaryti patarimo įrankį.
  7. Venkite perteklinio naudojimo: Naudokite patarimų įrankius saikingai ir tik tada, kai tai būtina.

Diegimo metodai

1. Užvedimo ir fokusavimo naudojimas

Svarbiausias prieinamų patarimų įrankių aspektas yra užtikrinti, kad jie būtų pasiekiami tiek pelės, tiek klaviatūros naudotojams. Tai reiškia, kad patarimo įrankis turėtų pasirodyti tiek užvedus pelę, tiek elementui gavus fokusą.

HTML:

<a href="#" aria-describedby="tooltip-example">Nuorodos pavyzdys</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Tai yra patarimo įrankio pavyzdys.</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; /* Užtikrinti, kad patarimo įrankis būtų viršuje */
}

Paaiškinimas:

JavaScript (Išplėstinis valdymas – neprivaloma):

Nors CSS gali valdyti paprastą rodymą/slėpimą, JavaScript leidžia tvirtesnį valdymą, ypač kai patarimų įrankiai generuojami dinamiškai arba reikalauja sudėtingesnio elgesio.

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. ARIA atributų naudojimas

ARIA atributai yra būtini semantinės informacijos teikimui pagalbinėms technologijoms. Štai pagrindinių atributų apžvalga:

Pavyzdys:

<button aria-describedby="help-tooltip">Pateikti</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Spustelėkite čia, norėdami pateikti formą.</div>

JavaScript (skirtas 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. Fokuso valdymas

Kai pasirodo patarimo įrankis, jis paprastai *neturėtų* perimti fokuso iš jį aktyvavusio elemento. Fokusas turėtų likti ant elemento, kuris sukėlė patarimo įrankio pasirodymą. Tai užtikrina, kad klaviatūros naudotojai galėtų tęsti naršymą puslapyje be netikėtų trukdžių.

Tačiau gali būti situacijų, kai *norite* perkelti fokusą į patarimo įrankį, ypač jei jame yra interaktyvių elementų (pvz., nuorodų, mygtukų). Tokiu atveju užtikrinkite, kad:

Daugeliu atvejų, siekiant paprastumo ir patogumo, geriau vengti fokuso valdymo pačiame patarimo įrankyje.

4. Pakankamo kontrasto užtikrinimas

Spalvų kontrastas yra labai svarbus skaitomumui. Užtikrinkite, kad jūsų patarimų įrankių teksto spalva turėtų pakankamą kontrastą su fono spalva. Žiniatinklio turinio prieinamumo gairės (WCAG) rekomenduoja kontrasto santykį bent 4.5:1 normaliam tekstui ir 3:1 dideliam tekstui (18pt arba 14pt paryškintu šriftu).

Naudokite internetines kontrasto tikrinimo priemones, kad patikrintumėte, ar jūsų spalvų pasirinkimai atitinka prieinamumo standartus. Kontrasto tikrinimo priemonių pavyzdžiai:

Pavyzdys (geras kontrastas):

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

Pavyzdys (prastas kontrastas):

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

5. Pakankamo laiko suteikimas

Vartotojams reikia pakankamai laiko perskaityti patarimo įrankio turinį. Venkite per greitai dingstančių patarimų įrankių. Nors nėra stebuklingo skaičiaus, siekite minimalaus kelių sekundžių rodymo laiko. Taip pat, patarimo įrankis turėtų likti matomas tol, kol vartotojas laiko pelę ant aktyvuojančio elemento arba jį sufokusavęs. Jei reikia uždaryti patarimo įrankį dėl kitų įvykių, pateikite indikatorių, kad patarimo įrankis bus uždarytas.

Jei patarimo įrankio turinys yra ilgas, apsvarstykite galimybę suteikti vartotojui būdą rankiniu būdu jį uždaryti (pvz., uždarymo mygtuku arba paspaudus „Escape“ klavišą).

6. Galimybė uždaryti

Nors patarimų įrankiai dažnai dingsta automatiškai, kai vartotojas patraukia pelę arba nuima fokusą, gera praktika yra suteikti aiškų būdą juos uždaryti rankiniu būdu, ypač ilgiems patarimų įrankiams arba tiems, kuriuose yra interaktyvių elementų.

Patarimų įrankių uždarymo būdai:

Pavyzdys (uždarymo mygtukas):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Tai yra mano patarimo įrankio turinys.
  <button onclick="hideTooltip()">Uždaryti</button>
</div>

Pavyzdys („Escape“ klavišas):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Pakeiskite į savo faktinę patarimo įrankio slėpimo funkciją
  }
});

7. Perteklinio naudojimo vengimas

Patarimų įrankius reikėtų naudoti saikingai ir tik tada, kai jie teikia tikrai naudingą informaciją. Pernelyg gausus patarimų įrankių naudojimas gali apkrauti sąsają, blaškyti vartotojus ir sukelti neigiamą patirtį.

Patarimų įrankių alternatyvos:

Išplėstiniai aspektai

Dinaminis turinys

Jei jūsų patarimo įrankio turinys generuojamas dinamiškai (pvz., įkeliamas iš API arba atnaujinamas pagal vartotojo įvestį), užtikrinkite, kad aria-describedby atributas ir patarimo įrankio matomumas būtų atitinkamai atnaujinti. Naudokite JavaScript šiems atnaujinimams valdyti.

Pozicionavimas

Atidžiai apsvarstykite savo patarimų įrankių pozicionavimą. Venkite juos dėti taip, kad jie užstotų svarbų turinį ar sukeltų išdėstymo poslinkius. Atsižvelkite į skirtingus ekrano dydžius ir raiškas bei naudokite CSS, kad užtikrintumėte, jog patarimų įrankiai visada būtų matomi peržiūros srityje (angl. viewport).

Mobilieji įrenginiai

Patarimų įrankiai tradiciškai remiasi užvedimo sąveika, kuri nėra prieinama jutikliniuose įrenginiuose. Mobiliuosiuose įrenginiuose apsvarstykite galimybę naudoti alternatyvius sąveikos metodus, tokius kaip:

Jūsų patarimų įrankių testavimas

Kruopščiai testuokite savo patarimų įrankius, kad įsitikintumėte, jog jie prieinami visiems vartotojams. Naudokite rankinio testavimo ir automatizuotų prieinamumo testavimo įrankių derinį.

Testavimo metodai:

Internacionalizavimas (i18n) ir lokalizavimas (l10n)

Kuriant patarimų įrankius pasaulinei auditorijai, nepamirškite internacionalizavimo ir lokalizavimo:

Išvados

Prieinamų patarimų įrankių diegimas reikalauja kruopštaus planavimo ir dėmesio detalėms. Laikydamiesi šiame vadove aprašytų principų ir metodų, galite sukurti patarimų įrankius, kuriais galėtų naudotis visi, nepriklausomai nuo jų gebėjimų. Atminkite, kad prieinamumas yra nuolatinis procesas, todėl toliau testuokite ir tobulinkite savo patarimų įrankius, kad užtikrintumėte, jog jie atitiktų visų jūsų vartotojų poreikius.

Ištekliai