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:

• Brugere af skærmlæsere: Hvis et tooltip ikke er korrekt markeret, vil en skærmlæser muligvis ikke annoncere dets tilstedeværelse eller indhold.
• Tastaturbrugere: Hvis et tooltip kun vises ved hover, vil tastaturbrugere ikke kunne tilgå det.
• Brugere med motoriske handicap: Præcise musebevægelser, der kræves til hover-interaktioner, kan være udfordrende eller umulige.
• Brugere med kognitive handicap: Et dårligt timet eller forvirrende tooltip kan skabe frustration og hindre forståelsen.

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>
            

              
                Copy
              
            
          

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 */
}

            

              
                Copy
              
            
          

Forklaring:

• aria-describedby: Denne attribut forbinder linket til tooltip-elementet ved hjælp af dets ID. Dette fortæller hjælpeteknologier, at tooltip'et giver yderligere information om linket.
• role="tooltip": Denne ARIA-rolle identificerer elementet som et tooltip.
• CSS'en bruger den tilstødende søskende-selektor (+) til at vise tooltip'et, når der holdes musen over eller fokuseres på linket.

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';
});
            

              
                Copy
              
            
          

2. Brug af ARIA-attributter

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

• aria-describedby: Som tidligere nævnt, etablerer denne attribut forholdet mellem det udløsende element og tooltip-elementet.
• role="tooltip": Denne attribut definerer eksplicit elementet som et tooltip.
• aria-hidden="true"/aria-hidden="false": Brug disse til at angive, om tooltip'et i øjeblikket er synligt for hjælpeteknologier. Når tooltip'et er skjult, skal du indstille aria-hidden="true". Når det er synligt, skal du indstille aria-hidden="false". Dette er især vigtigt, når du bruger JavaScript til at styre tooltip'ets synlighed.

Eksempel:

            <button aria-describedby="help-tooltip">Send</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Klik her for at sende formularen.</div>
            

              
                Copy
              
            
          

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';
});
            

              
                Copy
              
            
          

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:

• Tooltip'et er visuelt adskilt for at indikere, at det har fokus.
• Der er en klar måde at returnere fokus til det oprindelige udløsende element (f.eks. en lukkeknap i tooltip'et).

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:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Eksempel (God kontrast):

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

            

              
                Copy
              
            
          

Eksempel (Dårlig kontrast):

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

            

              
                Copy
              
            
          

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:

• Lukkeknap: Inkludér en visuelt fremtrædende lukkeknap i tooltip'et.
• Escape-tast: Tillad brugere at afvise tooltip'et ved at trykke på Escape-tasten.
• Klik udenfor: Afvis tooltip'et, når brugeren klikker et vilkårligt sted uden for tooltip'et og det udløsende element. (Brug med forsigtighed, da det kan være forstyrrende).

Eksempel (Lukkeknap):

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

              
                Copy
              
            
          

Eksempel (Escape-tast):

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

            

              
                Copy
              
            
          

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:

• Tydelige etiketter: Brug klare og beskrivende etiketter til formularfelter, knapper og links.
• Kontekstuel hjælp: Giv hjælpetekst direkte i grænsefladen, tæt på de relevante elementer.
• Hjælpedokumentation: Link til omfattende hjælpedokumentation for mere komplekse funktioner.

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:

• Tryk: Vis tooltip'et, når brugeren trykker på elementet.
• Langt tryk: Vis tooltip'et, når brugeren holder fingeren på elementet i længere tid.
• Vis ved fokus: Vis, når elementet får fokus. Dette kan opnås med JavaScript ved at tjekke for touch-understøttelse (f.eks. `('ontouchstart' in window)`) og ændre visningsadfærden i overensstemmelse hermed.

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:

• Tastaturnavigation: Verificer, at tooltips er tilgængelige ved hjælp af tastaturet.
• Test med skærmlæser: Brug en skærmlæser for at sikre, at tooltips annonceres korrekt.
• Farvekontrastanalyse: Brug et farvekontrastværktøj til at verificere tilstrækkelig kontrast.
• Mobiltest: Test tooltips på forskellige mobile enheder og skærmstørrelser.
• Automatiseret tilgængelighedstest: Brug værktøjer som axe DevTools, WAVE eller Lighthouse til at identificere potentielle tilgængelighedsproblemer.

Internationalisering (i18n) og lokalisering (l10n)

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

• Tekstretning: Understøt både venstre-mod-højre (LTR) og højre-mod-venstre (RTL) tekstretninger. Brug CSS logiske egenskaber (f.eks. `margin-inline-start`, `margin-inline-end`) i stedet for fysiske egenskaber (f.eks. `margin-left`, `margin-right`) til layout.
• Sprogspecifikke oversættelser: Sørg for oversættelser af tooltip-indhold til forskellige sprog.
• Dato- og tidsformater: Tilpas dato- og tidsformater til brugerens lokalitet.
• Talformater: Brug passende talformater for forskellige regioner (f.eks. decimalseparatorer, tusindtalsseparatorer).

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

• ARIA Authoring Practices Guide (APG) - Tooltip
• Web Content Accessibility Guidelines (WCAG) 2.1
• MDN Web Docs - ARIA