M

MLOG

Norsk

En omfattende guide til å implementere tilgjengelige verktøytips ved hjelp av hover- og fokustilstander, som sikrer brukervennlighet for alle, inkludert funksjonshemmede.

Implementering av verktøytips: Tilgjengelig informasjon ved hover og fokus

Verktøytips er små, kontekstuelle hjelpemeldinger som vises når en bruker holder musepekeren over eller fokuserer på et element. De kan gi tilleggsinformasjon, klargjøre formålet med et element eller tilby hint om hvordan en funksjon brukes. Verktøytips kan imidlertid lett bli et mareritt for tilgjengelighet hvis de ikke implementeres riktig. Denne guiden skisserer beste praksis for å lage verktøytips som kan brukes av alle, inkludert brukere med nedsatt funksjonsevne.

Hvorfor tilgjengelighet er viktig for verktøytips

Tilgjengelighet handler ikke bare om å følge regler; det handler om å skape en bedre brukeropplevelse for alle. Når verktøytips ikke er tilgjengelige, kan det ekskludere brukere som er avhengige av hjelpeteknologier som skjermlesere, tastaturnavigasjon eller stemmestyring. Tenk på disse scenariene:

Ved å følge beste praksis for tilgjengelighet kan vi sikre at verktøytips forbedrer i stedet for å hindre brukeropplevelsen for alle.

Nøkkelprinsipper for tilgjengelige verktøytips

Følgende prinsipper er avgjørende for å lage tilgjengelige verktøytips:

  1. Gi alternativ tilgang: Sørg for at verktøytips er tilgjengelige via både 'hover' og tastaturfokus.
  2. Bruk ARIA-attributter: Bruk ARIA (Accessible Rich Internet Applications)-attributter for å korrekt identifisere og beskrive verktøytips for hjelpeteknologier.
  3. Håndter fokus: Kontroller hvor fokus flyttes når et verktøytips vises og skjules.
  4. Sørg for tilstrekkelig kontrast: Gi nok fargekontrast mellom teksten i verktøytipset og bakgrunnen.
  5. Gi tilstrekkelig med tid: Gi brukere nok tid til å lese innholdet i verktøytipset.
  6. Gjør dem lukkbare: Tilby en tydelig måte å lukke verktøytipset på.
  7. Unngå overforbruk: Bruk verktøytips sparsomt og bare når det er nødvendig.

Implementeringsteknikker

1. Bruk av 'hover' og 'focus'

Det mest kritiske aspektet ved tilgjengelige verktøytips er å sikre at de er tilgjengelige for både mus- og tastaturbrukere. Dette betyr at verktøytipset skal vises både ved 'hover' og når elementet mottar fokus.

HTML:

<a href="#" aria-describedby="tooltip-example">Eksempellenke</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Dette er et eksempel på et verktøytips.</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; /* Sikrer at verktøytipset er øverst */
}

Forklaring:

JavaScript (Avansert kontroll - Valgfritt):

Mens CSS kan håndtere enkel visning/skjuling, gir JavaScript mer robust kontroll, spesielt når verktøytips genereres dynamisk eller trenger mer kompleks atferd.

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. Bruk av ARIA-attributter

ARIA-attributter er essensielle for å gi semantisk informasjon til hjelpeteknologier. Her er en oversikt over nøkkelattributter:

Eksempel:

<button aria-describedby="help-tooltip">Send inn</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Klikk her for å sende inn skjemaet.</div>

JavaScript (for 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. Håndtering av fokus

Når et verktøytips vises, skal det generelt *ikke* stjele fokus fra det utløsende elementet. Fokus bør forbli på elementet som utløste verktøytipset. Dette sikrer at tastaturbrukere kan fortsette å navigere på siden uten uventede avbrudd.

Imidlertid kan det være situasjoner der du *ønsker* å flytte fokus til verktøytipset, spesielt hvis verktøytipset inneholder interaktive elementer (f.eks. lenker, knapper). I dette tilfellet, sørg for at:

I de fleste tilfeller er det å foretrekke å unngå fokushåndtering i selve verktøytipset for enkelhet og brukervennlighet.

4. Sikre tilstrekkelig kontrast

Fargekontrast er avgjørende for lesbarhet. Sørg for at tekstfargen i verktøytipsene dine har tilstrekkelig kontrast mot bakgrunnsfargen. Retningslinjene for tilgjengelig webinnhold (WCAG) anbefaler et kontrastforhold på minst 4.5:1 for normal tekst og 3:1 for stor tekst (18pt eller 14pt fet skrift).

Bruk online kontrastkontrollverktøy for å verifisere at fargevalgene dine oppfyller tilgjengelighetsstandardene. Eksempler på kontrastkontrollverktøy inkluderer:

Eksempel (God kontrast):

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

Eksempel (Dårlig kontrast):

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

5. Gi tilstrekkelig med tid

Brukere trenger nok tid til å lese innholdet i verktøytipset. Unngå verktøytips som forsvinner for fort. Selv om det ikke finnes et magisk tall, sikt mot en minimum visningstid på noen få sekunder. Verktøytipset bør også forbli synlig så lenge brukeren holder over eller har fokus på det utløsende elementet. Hvis du må lukke verktøytipset på grunn av andre hendelser, gi en indikasjon på at verktøytipset vil lukkes.

Hvis innholdet i verktøytipset er langt, vurder å gi brukeren en måte å lukke det manuelt på (f.eks. en lukkeknapp eller ved å trykke på Escape-tasten).

6. Gjøre dem lukkbare

Selv om verktøytips ofte forsvinner automatisk når brukeren flytter musen bort eller fjerner fokus, er det god praksis å tilby en tydelig måte å lukke dem manuelt, spesielt for lange verktøytips eller verktøytips som inneholder interaktive elementer.

Metoder for å lukke verktøytips:

Eksempel (Lukkeknapp):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Dette er innholdet i mitt verktøytips.
  <button onclick="hideTooltip()">Lukk</button>
</div>

Eksempel (Escape-tasten):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Erstatt med din faktiske funksjon for å skjule verktøytips
  }
});

7. Unngå overforbruk

Verktøytips bør brukes sparsomt og bare når de gir virkelig nyttig informasjon. Overforbruk av verktøytips kan rote til grensesnittet, distrahere brukere og skape en frustrerende opplevelse.

Alternativer til verktøytips:

Avanserte betraktninger

Dynamisk innhold

Hvis innholdet i verktøytipset ditt genereres dynamisk (f.eks. lastet fra et API eller oppdatert basert på brukerinput), sørg for at aria-describedby-attributtet og synligheten til verktøytipset oppdateres tilsvarende. Bruk JavaScript til å håndtere disse oppdateringene.

Posisjonering

Vurder nøye posisjoneringen av verktøytipsene dine. Unngå å plassere dem slik at de skjuler viktig innhold eller forårsaker forskyvninger i layouten. Vær oppmerksom på forskjellige skjermstørrelser og oppløsninger, og bruk CSS for å sikre at verktøytipsene alltid er synlige innenfor visningsområdet.

Mobile enheter

Verktøytips er tradisjonelt avhengige av 'hover'-interaksjoner, som ikke er tilgjengelige på berøringsbaserte enheter. For mobile enheter, vurder å bruke alternative interaksjonsmetoder, som:

Test dine verktøytips

Test verktøytipsene dine grundig for å sikre at de er tilgjengelige for alle brukere. Bruk en kombinasjon av manuell testing og automatiserte verktøy for tilgjengelighetstesting.

Testmetoder:

Internasjonalisering (i18n) og lokalisering (l10n)

Når du utvikler verktøytips for et globalt publikum, husk internasjonalisering og lokalisering:

Konklusjon

Implementering av tilgjengelige verktøytips krever nøye planlegging og oppmerksomhet på detaljer. Ved å følge prinsippene og teknikkene som er skissert i denne guiden, kan du lage verktøytips som er brukbare for alle, uavhengig av deres evner. Husk at tilgjengelighet er en kontinuerlig prosess, så fortsett å teste og forbedre verktøytipsene dine for å sikre at de møter behovene til alle brukerne dine.

Ressurser