M

MLOG

Dansk

En omfattende guide til implementering af tilgængelige tooltips ved hjælp af hover- og fokus-tilstande for at sikre brugbarhed for alle brugere.

Implementering af tooltips: Tilgængelig information ved hover og fokus

Tooltips er små, kontekstafhængige hjælpemeddelelser, der vises, når en bruger holder musemarkøren over eller fokuserer på et element. De kan give yderligere information, præcisere formålet med et element eller tilbyde tips til, hvordan en funktion bruges. Men tooltips kan let blive et mareridt for tilgængelighed, hvis de ikke implementeres korrekt. Denne guide beskriver bedste praksis for at skabe tooltips, der kan bruges af alle, inklusive brugere med handicap.

Hvorfor tilgængelighed er vigtigt for tooltips

Tilgængelighed handler ikke kun om overholdelse af regler; det handler om at skabe en bedre brugeroplevelse for alle. Når tooltips ikke er tilgængelige, kan det udelukke brugere, der er afhængige af hjælpeteknologier som skærmlæsere, tastaturnavigation eller stemmeinput. Overvej disse scenarier:

Ved at følge bedste praksis for tilgængelighed kan vi sikre, at tooltips forbedrer i stedet for at forringe brugeroplevelsen for alle.

Nøgleprincipper for tilgængelige tooltips

Følgende principper er afgørende for at skabe tilgængelige tooltips:

  1. Giv alternativ adgang: Sørg for, at tooltips er tilgængelige via både hover og tastaturfokus.
  2. Brug ARIA-attributter: Brug ARIA (Accessible Rich Internet Applications) attributter til korrekt at identificere og beskrive tooltips for hjælpeteknologier.
  3. Håndtér fokus: Styr, hvor fokus flyttes hen, når et tooltip vises og skjules.
  4. Sørg for tilstrækkelig kontrast: Sørg for tilstrækkelig farvekontrast mellem tooltip-teksten og baggrunden.
  5. Tillad tilstrækkelig tid: Giv brugerne nok tid til at læse indholdet i tooltip'et.
  6. Gør dem afviselige: Giv en klar måde at afvise tooltip'et på.
  7. Undgå overforbrug: Brug tooltips sparsomt og kun, når det er nødvendigt.

Implementeringsteknikker

1. Brug af hover og fokus

Det mest kritiske aspekt ved tilgængelige tooltips er at sikre, at de er tilgængelige for både mus- og tastaturbrugere. Dette betyder, at tooltip'et skal vises både ved hover, og når elementet modtager fokus.

HTML:

<a href="#" aria-describedby="tooltip-example">Eksempellink</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Dette er et eksempel-tooltip.</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; /* Sørg for at tooltip'et er øverst */
}

Forklaring:

JavaScript (Avanceret kontrol - valgfrit):

Mens CSS kan håndtere simpel vis/skjul, giver JavaScript mere robust kontrol, især når tooltips genereres dynamisk eller har brug for mere kompleks adfærd.

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. Brug af ARIA-attributter

ARIA-attributter er essentielle for at give semantisk information til hjælpeteknologier. Her er en oversigt over nøgleattributter:

Eksempel:

<button aria-describedby="help-tooltip">Send</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Klik her for at sende formularen.</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 af fokus

Når et tooltip vises, bør det generelt *ikke* stjæle fokus fra det udløsende element. Fokus bør forblive på det element, der udløste tooltip'et. Dette sikrer, at tastaturbrugere kan fortsætte med at navigere på siden uden uventede afbrydelser.

Der kan dog være situationer, hvor du *ønsker* at flytte fokus til tooltip'et, især hvis det indeholder interaktive elementer (f.eks. links, knapper). I dette tilfælde skal du sikre, at:

I de fleste tilfælde er det at foretrække at undgå fokushåndtering i selve tooltip'et for at opnå enkelhed og brugervenlighed.

4. Sikring af tilstrækkelig kontrast

Farvekontrast er afgørende for læsbarheden. Sørg for, at tekstfarven i dine tooltips har tilstrækkelig kontrast mod baggrundsfarven. Web Content Accessibility Guidelines (WCAG) anbefaler et kontrastforhold på mindst 4,5:1 for normal tekst og 3:1 for stor tekst (18pt eller 14pt fed).

Brug online kontrastværktøjer til at verificere, at dine farvevalg opfylder tilgængelighedsstandarderne. Eksempler på kontrastværktøjer inkluderer:

Eksempel (God kontrast):

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

Eksempel (Dårlig kontrast):

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

5. Tillad tilstrækkelig tid

Brugere har brug for nok tid til at læse indholdet i tooltip'et. Undgå tooltips, der forsvinder for hurtigt. Selvom der ikke findes et magisk tal, så sigt efter en minimumsvisningstid på et par sekunder. Tooltip'et bør også forblive synligt, så længe brugeren holder musen over eller har fokuseret på det udløsende element. Hvis du er nødt til at afvise tooltip'et på grund af andre begivenheder, skal du give en indikation af, at tooltip'et vil lukke.

Hvis indholdet i tooltip'et er langt, kan du overveje at give brugeren en måde at afvise det manuelt (f.eks. en lukkeknap eller ved at trykke på Escape-tasten).

6. Gør dem afviselige

Selvom tooltips ofte forsvinder automatisk, når brugeren flytter musen væk eller fjerner fokus, er det god praksis at give en klar måde at afvise dem manuelt, især for lange tooltips eller tooltips, der indeholder interaktive elementer.

Metoder til at afvise tooltips:

Eksempel (Lukkeknap):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Dette er mit tooltip-indhold.
  <button onclick="hideTooltip()">Luk</button>
</div>

Eksempel (Escape-tast):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Erstat med din faktiske funktion til at skjule tooltip
  }
});

7. Undgå overforbrug

Tooltips bør bruges sparsomt og kun, når de giver virkelig nyttig information. Overforbrug af tooltips kan rode i grænsefladen, distrahere brugere og skabe en frustrerende oplevelse.

Alternativer til tooltips:

Avancerede overvejelser

Dynamisk indhold

Hvis dit tooltip-indhold genereres dynamisk (f.eks. indlæst fra en API eller opdateret baseret på brugerinput), skal du sikre, at aria-describedby-attributten og tooltip'ets synlighed opdateres tilsvarende. Brug JavaScript til at håndtere disse opdateringer.

Positionering

Overvej omhyggeligt positioneringen af dine tooltips. Undgå at placere dem på en måde, der skjuler vigtigt indhold eller forårsager layoutskift. Vær opmærksom på forskellige skærmstørrelser og opløsninger, og brug CSS til at sikre, at tooltips altid er synlige inden for visningsområdet.

Mobile enheder

Tooltips er traditionelt afhængige af hover-interaktioner, som ikke er tilgængelige på touch-baserede enheder. For mobile enheder kan du overveje at bruge alternative interaktionsmetoder, såsom:

Test af dine tooltips

Test dine tooltips grundigt for at sikre, at de er tilgængelige for alle brugere. Brug en kombination af manuel test og automatiserede tilgængelighedstestværktøjer.

Testmetoder:

Internationalisering (i18n) og lokalisering (l10n)

Når du udvikler tooltips til et globalt publikum, skal du huske på internationalisering og lokalisering:

Konklusion

Implementering af tilgængelige tooltips kræver omhyggelig planlægning og opmærksomhed på detaljer. Ved at følge principperne og teknikkerne i denne guide kan du skabe tooltips, der kan bruges af alle, uanset deres evner. Husk, at tilgængelighed er en løbende proces, så fortsæt med at teste og forfine dine tooltips for at sikre, at de opfylder behovene hos alle dine brugere.

Ressourcer