M

MLOG

Suomi

Kattava opas saavutettavien työkaluvihjeiden toteutukseen hover- ja focus-tilojen avulla, mikä takaa käytettävyyden kaikille, myös vammaisille käyttäjille.

Työkaluvihjeiden Toteutus: Saavutettavaa Tietoa Hiirellä Osoittamalla ja Kohdistamalla

Työkaluvihjeet ovat pieniä, asiayhteyteen sidottuja ohjeviestejä, jotka ilmestyvät, kun käyttäjä vie hiiren osoittimen elementin päälle tai kohdistaa siihen. Ne voivat tarjota lisätietoa, selventää elementin tarkoitusta tai antaa vinkkejä ominaisuuden käyttöön. Työkaluvihjeistä voi kuitenkin helposti tulla saavutettavuuspainajaisia, jos niitä ei toteuteta oikein. Tämä opas esittelee parhaat käytännöt sellaisten työkaluvihjeiden luomiseen, jotka ovat kaikkien, myös vammaisten käyttäjien, käytettävissä.

Miksi Saavutettavuus on Tärkeää Työkaluvihjeissä

Saavutettavuus ei ole vain vaatimusten noudattamista; se on paremman käyttökokemuksen luomista kaikille. Kun työkaluvihjeet eivät ole saavutettavia, se voi sulkea ulkopuolelle käyttäjiä, jotka tukeutuvat avustaviin teknologioihin, kuten ruudunlukijoihin, näppäimistönavigointiin tai puhesyötteeseen. Harkitse näitä skenaarioita:

Noudattamalla saavutettavuuden parhaita käytäntöjä voimme varmistaa, että työkaluvihjeet parantavat eivätkä heikennä kaikkien käyttäjäkokemusta.

Keskeiset Periaatteet Saavutettaville Työkaluvihjeille

Seuraavat periaatteet ovat ratkaisevan tärkeitä saavutettavien työkaluvihjeiden luomisessa:

  1. Tarjoa vaihtoehtoinen käyttötapa: Varmista, että työkaluvihjeet ovat käytettävissä sekä hiirellä osoittamalla että näppäimistöllä kohdistamalla.
  2. Käytä ARIA-attribuutteja: Käytä ARIA-attribuutteja (Accessible Rich Internet Applications) tunnistaaksesi ja kuvaillaksesi työkaluvihjeet oikein avustaville teknologioille.
  3. Hallitse kohdistusta: Kontrolloi, minne kohdistus siirtyy, kun työkaluvihje näytetään ja piilotetaan.
  4. Varmista riittävä kontrasti: Tarjoa riittävä värikontrasti työkaluvihjeen tekstin ja taustan välillä.
  5. Anna riittävästi aikaa: Anna käyttäjille tarpeeksi aikaa lukea työkaluvihjeen sisältö.
  6. Tee niistä hylättäviä: Tarjoa selkeä tapa hylätä työkaluvihje.
  7. Vältä ylikäyttöä: Käytä työkaluvihjeitä säästeliäästi ja vain tarvittaessa.

Toteutustekniikat

1. Hover- ja Focus-tilojen Käyttö

Saavutettavien työkaluvihjeiden kriittisin näkökohta on varmistaa, että ne ovat käytettävissä sekä hiiren että näppäimistön käyttäjille. Tämä tarkoittaa, että työkaluvihjeen tulisi ilmestyä sekä hiiren osoituksella että elementin saadessa kohdistuksen.

HTML:

<a href="#" aria-describedby="tooltip-example">Esimerkkilinkki</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Tämä on esimerkkityökaluvihje.</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; /* Varmista, että työkaluvihje on päällimmäisenä */
}

Selitys:

JavaScript (Edistynyt Hallinta - Valinnainen):

Vaikka CSS voi hoitaa yksinkertaisen näyttämisen/piilottamisen, JavaScript mahdollistaa vankemman hallinnan, erityisesti kun työkaluvihjeet luodaan dynaamisesti tai ne vaativat monimutkaisempaa toiminnallisuutta.

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-attribuuttien Käyttö

ARIA-attribuutit ovat välttämättömiä semanttisen tiedon tarjoamiseksi avustaville teknologioille. Tässä erittely avainattribuuteista:

Esimerkki:

<button aria-describedby="help-tooltip">Lähetä</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Napsauta tästä lähettääksesi lomakkeen.</div>

JavaScript (aria-hidden-attribuutille):

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. Kohdistuksen Hallinta

Kun työkaluvihje ilmestyy, sen ei yleensä *pitäisi* viedä kohdistusta laukaisevalta elementiltä. Kohdistuksen tulisi pysyä elementissä, joka laukaisi työkaluvihjeen. Tämä varmistaa, että näppäimistön käyttäjät voivat jatkaa sivun selaamista ilman odottamattomia keskeytyksiä.

Voi kuitenkin olla tilanteita, joissa *haluat* siirtää kohdistuksen työkaluvihjeeseen, erityisesti jos työkaluvihje sisältää interaktiivisia elementtejä (esim. linkkejä, painikkeita). Tässä tapauksessa varmista, että:

Useimmissa tapauksissa on suositeltavaa välttää kohdistuksen hallintaa työkaluvihjeen sisällä yksinkertaisuuden ja käytettävyyden vuoksi.

4. Riittävän Kontrastin Varmistaminen

Värikontrasti on ratkaisevan tärkeä luettavuuden kannalta. Varmista, että työkaluvihjeiden tekstin värillä on riittävä kontrasti taustaväriä vasten. Verkkosisällön saavutettavuusohjeet (WCAG) suosittelevat vähintään 4.5:1 kontrastisuhdetta normaalille tekstille ja 3:1 suurelle tekstille (18pt tai 14pt lihavoituna).

Käytä online-kontrastintarkistimia varmistaaksesi, että värivalintasi täyttävät saavutettavuusstandardit. Esimerkkejä kontrastintarkistimista:

Esimerkki (Hyvä Kontrasti):

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

Esimerkki (Huono Kontrasti):

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

5. Riittävän Ajan Antaminen

Käyttäjät tarvitsevat tarpeeksi aikaa lukea työkaluvihjeen sisältö. Vältä työkaluvihjeitä, jotka katoavat liian nopeasti. Vaikka maagista lukua ei ole, pyri vähintään muutaman sekunnin näyttöaikaan. Lisäksi työkaluvihjeen tulisi pysyä näkyvissä niin kauan kuin käyttäjä osoittaa hiirellä laukaisevaa elementtiä tai on kohdistanut siihen. Jos joudut hylkäämään työkaluvihjeen muiden tapahtumien vuoksi, anna merkki siitä, että työkaluvihje sulkeutuu.

Jos työkaluvihjeen sisältö on pitkä, harkitse tavan tarjoamista käyttäjälle hylätä työkaluvihje manuaalisesti (esim. sulkemispainike tai Escape-näppäimen painaminen).

6. Hylättävyyden Mahdollistaminen

Vaikka työkaluvihjeet usein katoavat automaattisesti, kun käyttäjä siirtää hiiren pois tai poistaa kohdistuksen, on hyvä käytäntö tarjota selkeä tapa hylätä ne manuaalisesti, erityisesti pitkien työkaluvihjeiden tai interaktiivisia elementtejä sisältävien työkaluvihjeiden kohdalla.

Tapoja Työkaluvihjeiden Hylkäämiseen:

Esimerkki (Sulkemispainike):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Tämä on työkaluvihjeeni sisältö.
  <button onclick="hideTooltip()">Sulje</button>
</div>

Esimerkki (Escape-näppäin):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Korvaa omalla työkaluvihjeen piilotusfunktiolla
  }
});

7. Ylikäytön Välttäminen

Työkaluvihjeitä tulisi käyttää säästeliäästi ja vain silloin, kun ne tarjoavat todella hyödyllistä tietoa. Työkaluvihjeiden ylikäyttö voi sotkea käyttöliittymää, häiritä käyttäjiä ja luoda turhauttavan kokemuksen.

Vaihtoehtoja Työkaluvihjeille:

Edistyneitä Huomioita

Dynaaminen Sisältö

Jos työkaluvihjeesi sisältö luodaan dynaamisesti (esim. ladataan API:sta tai päivitetään käyttäjän syötteen perusteella), varmista, että aria-describedby-attribuutti ja työkaluvihjeen näkyvyys päivitetään vastaavasti. Käytä JavaScriptiä näiden päivitysten hallintaan.

Sijoittelu

Harkitse huolellisesti työkaluvihjeidesi sijoittelua. Vältä sijoittamasta niitä tavalla, joka peittää tärkeää sisältöä tai aiheuttaa asettelun siirtymiä. Ota huomioon eri näyttökoot ja resoluutiot ja käytä CSS:ää varmistaaksesi, että työkaluvihjeet ovat aina näkyvissä näkymäalueella.

Mobiililaitteet

Työkaluvihjeet perustuvat perinteisesti hiiren osoitus-interaktioihin, jotka eivät ole käytettävissä kosketuspohjaisilla laitteilla. Mobiililaitteille harkitse vaihtoehtoisia vuorovaikutusmenetelmiä, kuten:

Työkaluvihjeiden Testaaminen

Testaa työkaluvihjeesi perusteellisesti varmistaaksesi, että ne ovat kaikkien käyttäjien saavutettavissa. Käytä yhdistelmää manuaalista testausta ja automaattisia saavutettavuuden testausvälineitä.

Testausmenetelmät:

Kansainvälistäminen (i18n) ja Lokalisointi (l10n)

Kun kehität työkaluvihjeitä maailmanlaajuiselle yleisölle, pidä mielessä kansainvälistäminen ja lokalisointi:

Yhteenveto

Saavutettavien työkaluvihjeiden toteuttaminen vaatii huolellista suunnittelua ja yksityiskohtien huomioimista. Noudattamalla tässä oppaassa esitettyjä periaatteita ja tekniikoita voit luoda työkaluvihjeitä, jotka ovat kaikkien käytettävissä heidän kyvyistään riippumatta. Muista, että saavutettavuus on jatkuva prosessi, joten jatka työkaluvihjeidesi testaamista ja hiomista varmistaaksesi, että ne vastaavat kaikkien käyttäjiesi tarpeita.

Resurssit