M

MLOG

Eesti

Põhjalik juhend ligipääsetavate kohtspikrite rakendamiseks hiirega ülelibistamise ja fookuse abil, tagades kasutatavuse kõigile kasutajatele, kaasa arvatud puuetega inimestele.

Kohtspikri rakendamine: ligipääsetav teave hiirega ülelibistamisel ja fookuses

Kohtspikrid on väikesed kontekstipõhised abiteated, mis ilmuvad, kui kasutaja liigutab hiirekursori elemendile või fokuseerib selle. Need võivad pakkuda lisateavet, selgitada elemendi eesmärki või anda vihjeid funktsiooni kasutamiseks. Valesti rakendatuna võivad kohtspikrid aga kergesti muutuda ligipääsetavuse õudusunenäoks. See juhend kirjeldab parimaid tavasid kõigile, sealhulgas puuetega kasutajatele, kasutatavate kohtspikrite loomiseks.

Miks on ligipääsetavus kohtspikrite puhul oluline

Ligipääsetavus ei tähenda ainult nõuetele vastavust; see on parema kasutajakogemuse loomine kõigile. Kui kohtspikrid ei ole ligipääsetavad, võib see välistada kasutajad, kes toetuvad abitehnoloogiatele nagu ekraanilugejad, klaviatuurinavigatsioon või kõnesisend. Mõelge järgmistele stsenaariumidele:

Järgides ligipääsetavuse parimaid tavasid, saame tagada, et kohtspikrid täiustavad, mitte ei takista kõigi kasutajate kasutajakogemust.

Ligipääsetavate kohtspikrite põhiprintsiibid

Järgmised põhimõtted on ligipääsetavate kohtspikrite loomisel üliolulised:

  1. Pakkuge alternatiivset ligipääsu: Tagage, et kohtspikrid oleksid ligipääsetavad nii hiirega ülelibistamisel kui ka klaviatuuri fookusega.
  2. Kasutage ARIA atribuute: Kasutage ARIA (Accessible Rich Internet Applications) atribuute, et kohtspikreid abitehnoloogiatele õigesti tuvastada ja kirjeldada.
  3. Hallake fookust: Kontrollige, kuhu liigub fookus, kui kohtspikrit kuvatakse ja peidetakse.
  4. Tagage piisav kontrastsus: Pakkuge piisav värvikontrastsus kohtspikri teksti ja tausta vahel.
  5. Andke piisavalt aega: Andke kasutajatele piisavalt aega kohtspikri sisu lugemiseks.
  6. Tehke need suletavaks: Pakkuge selge viis kohtspikri sulgemiseks.
  7. Vältige liigset kasutamist: Kasutage kohtspikreid säästlikult ja ainult vajaduse korral.

Rakendamise tehnikad

1. Hiirega ülelibistamise ja fookuse kasutamine

Ligipääsetavate kohtspikrite kõige kriitilisem aspekt on tagada, et need oleksid kättesaadavad nii hiire- kui ka klaviatuurikasutajatele. See tähendab, et kohtspikker peaks ilmuma nii hiirega ülelibistamisel kui ka siis, kui element saab fookuse.

HTML:

<a href="#" aria-describedby="tooltip-example">Näidislink</a>
<div id="tooltip-example" role="tooltip" style="display: none;">See on näidis-kohtspikker.</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; /* Veenduge, et kohtspikker oleks pealmine */
}

Selgitus:

JavaScript (Täpsem kontroll - valikuline):

Kuigi CSS saab hakkama lihtsa näitamise/peitmisega, võimaldab JavaScript robustsemat kontrolli, eriti kui kohtspikrid genereeritakse dünaamiliselt või vajavad keerukamat käitumist.

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 atribuutide kasutamine

ARIA atribuudid on olulised semantilise teabe pakkumiseks abitehnoloogiatele. Siin on ülevaade peamistest atribuutidest:

Näide:

<button aria-describedby="help-tooltip">Esita</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Vormi esitamiseks klõpsake siin.</div>

JavaScript (aria-hidden jaoks):

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. Fookuse haldamine

Kui kohtspikker ilmub, ei tohiks see üldjuhul *ära võtta* fookust käivitavalt elemendilt. Fookus peaks jääma elemendile, mis kohtspikri käivitas. See tagab, et klaviatuurikasutajad saavad lehel navigeerimist jätkata ilma ootamatute katkestusteta.

Siiski võib esineda olukordi, kus te *tahate* fookuse kohtspikrile viia, eriti kui kohtspikker sisaldab interaktiivseid elemente (nt linke, nuppe). Sellisel juhul veenduge, et:

Enamikul juhtudel on lihtsuse ja kasutatavuse huvides eelistatav vältida fookuse haldamist kohtspikri enda sees.

4. Piisava kontrastsuse tagamine

Värvikontrastsus on loetavuse seisukohalt ülioluline. Veenduge, et teie kohtspikrite tekstivärvil oleks piisav kontrastsus taustavärvi suhtes. Veebisisu ligipääsetavuse suunised (WCAG) soovitavad kontrastsussuhteks vähemalt 4.5:1 tavalise teksti ja 3:1 suure teksti (18pt või 14pt paksus kirjas) puhul.

Kasutage veebipõhiseid kontrastsuse kontrollijaid, et veenduda, et teie värvivalikud vastavad ligipääsetavuse standarditele. Näiteid kontrastsuse kontrollijatest on:

Näide (hea kontrastsus):

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

Näide (halb kontrastsus):

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

5. Piisava aja võimaldamine

Kasutajad vajavad kohtspikri sisu lugemiseks piisavalt aega. Vältige liiga kiiresti kaduvaid kohtspikreid. Kuigi maagilist numbrit pole, püüdke saavutada minimaalseks kuvamisajaks mõned sekundid. Samuti peaks kohtspikker jääma nähtavale seni, kuni kasutaja hoiab hiirt käivitaval elemendil või on sellele fokuseerinud. Kui peate kohtspikri muude sündmuste tõttu sulgema, andke märku, et kohtspikker sulgub.

Kui kohtspikri sisu on pikk, kaaluge kasutajale võimaluse andmist kohtspikri käsitsi sulgemiseks (nt sulgemisnupp või Esc-klahvi vajutamine).

6. Nende suletavaks tegemine

Kuigi kohtspikrid kaovad sageli automaatselt, kui kasutaja hiire eemale liigutab või fookuse eemaldab, on hea tava pakkuda selget viisi nende käsitsi sulgemiseks, eriti pikkade või interaktiivseid elemente sisaldavate kohtspikrite puhul.

Kohtspikrite sulgemise meetodid:

Näide (sulgemisnupp):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  See on minu kohtspikri sisu.
  <button onclick="hideTooltip()">Sule</button>
</div>

Näide (Esc-klahv):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Asendage oma tegeliku kohtspikri peitmise funktsiooniga
  }
});

7. Liigse kasutamise vältimine

Kohtspikreid tuleks kasutada säästlikult ja ainult siis, kui need pakuvad tõeliselt kasulikku teavet. Kohtspikrite liigne kasutamine võib liidest segada, kasutajaid häirida ja tekitada frustreeriva kogemuse.

Alternatiivid kohtspikritele:

Täpsemad kaalutlused

Dünaamiline sisu

Kui teie kohtspikri sisu genereeritakse dünaamiliselt (nt laaditakse API-st või uuendatakse vastavalt kasutaja sisendile), veenduge, et aria-describedby atribuut ja kohtspikri nähtavus oleksid vastavalt uuendatud. Kasutage nende värskenduste haldamiseks JavaScripti.

Paigutamine

Kaaluge hoolikalt oma kohtspikrite paigutust. Vältige nende paigutamist viisil, mis varjab olulist sisu või põhjustab paigutuse nihkeid. Pidage silmas erinevaid ekraanisuurusi ja eraldusvõimet ning kasutage CSS-i, et tagada kohtspikrite alati nähtavus vaateaknas.

Mobiilseadmed

Kohtspikrid toetuvad traditsiooniliselt hiirega ülelibistamise interaktsioonidele, mis pole puutetundlikes seadmetes saadaval. Mobiilseadmete jaoks kaaluge alternatiivsete interaktsioonimeetodite kasutamist, näiteks:

Oma kohtspikrite testimine

Testige oma kohtspikreid põhjalikult, et tagada nende ligipääsetavus kõigile kasutajatele. Kasutage manuaalse testimise ja automatiseeritud ligipääsetavuse testimise tööriistade kombinatsiooni.

Testimismeetodid:

Rahvusvahelistamine (i18n) ja lokaliseerimine (l10n)

Globaalsele vaatajaskonnale kohtspikrite arendamisel pidage silmas rahvusvahelistamist ja lokaliseerimist:

Kokkuvõte

Ligipääsetavate kohtspikrite rakendamine nõuab hoolikat planeerimist ja detailidele tähelepanu pööramist. Järgides selles juhendis toodud põhimõtteid ja tehnikaid, saate luua kohtspikreid, mis on kasutatavad kõigile, olenemata nende võimetest. Pidage meeles, et ligipääsetavus on pidev protsess, seega jätkake oma kohtspikrite testimist ja täiustamist, et tagada nende vastavus kõigi teie kasutajate vajadustele.

Ressursid