M

MLOG

Nederlands

Een complete gids voor het implementeren van toegankelijke tooltips met hover en focus, voor een optimale bruikbaarheid voor alle gebruikers.

Tooltip Implementatie: Toegankelijke Informatie bij Hover en Focus

Tooltips zijn kleine, contextuele hulpberichten die verschijnen wanneer een gebruiker met de muis over een element beweegt of erop focust. Ze kunnen extra informatie geven, het doel van een element verduidelijken of hints geven over het gebruik van een functie. Tooltips kunnen echter gemakkelijk een nachtmerrie voor de toegankelijkheid worden als ze niet correct worden geïmplementeerd. Deze gids beschrijft best practices voor het maken van tooltips die voor iedereen bruikbaar zijn, inclusief gebruikers met een beperking.

Waarom Toegankelijkheid Belangrijk is voor Tooltips

Toegankelijkheid gaat niet alleen over het naleven van regels; het gaat om het creëren van een betere gebruikerservaring voor iedereen. Wanneer tooltips niet toegankelijk zijn, kunnen gebruikers die afhankelijk zijn van ondersteunende technologieën zoals schermlezers, toetsenbordnavigatie of spraakinvoer worden uitgesloten. Overweeg deze scenario's:

Door de best practices voor toegankelijkheid te volgen, kunnen we ervoor zorgen dat tooltips de gebruikerservaring voor iedereen verbeteren in plaats van belemmeren.

Kernprincipes voor Toegankelijke Tooltips

De volgende principes zijn cruciaal voor het creëren van toegankelijke tooltips:

  1. Bied alternatieve toegang: Zorg ervoor dat tooltips toegankelijk zijn via zowel 'hover' als toetsenbordfocus.
  2. Gebruik ARIA-attributen: Gebruik ARIA (Accessible Rich Internet Applications) attributen om tooltips correct te identificeren en te beschrijven voor ondersteunende technologieën.
  3. Beheer de focus: Bepaal waar de focus naartoe gaat wanneer een tooltip wordt weergegeven en verborgen.
  4. Zorg voor voldoende contrast: Zorg voor voldoende kleurcontrast tussen de tekst van de tooltip en de achtergrond.
  5. Geef voldoende tijd: Geef gebruikers genoeg tijd om de inhoud van de tooltip te lezen.
  6. Maak ze sluitbaar: Bied een duidelijke manier om de tooltip te sluiten.
  7. Vermijd overmatig gebruik: Gebruik tooltips spaarzaam en alleen wanneer dat nodig is.

Implementatietechnieken

1. Hover en Focus Gebruiken

Het meest kritieke aspect van toegankelijke tooltips is ervoor te zorgen dat ze toegankelijk zijn voor zowel muis- als toetsenbordgebruikers. Dit betekent dat de tooltip moet verschijnen zowel bij 'hover' als wanneer het element de focus krijgt.

HTML:

<a href="#" aria-describedby="tooltip-example">Voorbeeld Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Dit is een voorbeeld 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; /* Zorg ervoor dat de tooltip bovenaan staat */
}

Uitleg:

JavaScript (Geavanceerde Controle - Optioneel):

Hoewel CSS eenvoudige show/hide-acties kan afhandelen, biedt JavaScript robuustere controle, vooral wanneer tooltips dynamisch worden gegenereerd of complexer gedrag vereisen.

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-attributen Gebruiken

ARIA-attributen zijn essentieel voor het verstrekken van semantische informatie aan ondersteunende technologieën. Hier is een overzicht van de belangrijkste attributen:

Voorbeeld:

<button aria-describedby="help-tooltip">Verzenden</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Klik hier om het formulier te verzenden.</div>

JavaScript (voor 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. Focus Beheren

Wanneer een tooltip verschijnt, mag deze over het algemeen *geen* focus stelen van het activerende element. De focus moet op het element blijven dat de tooltip heeft geactiveerd. Dit zorgt ervoor dat toetsenbordgebruikers de pagina kunnen blijven navigeren zonder onverwachte onderbrekingen.

Er kunnen echter situaties zijn waarin u de focus *wel* naar de tooltip wilt verplaatsen, met name als de tooltip interactieve elementen bevat (bijv. links, knoppen). Zorg er in dat geval voor dat:

In de meeste gevallen heeft het vermijden van focusbeheer binnen de tooltip zelf de voorkeur voor eenvoud en bruikbaarheid.

4. Voldoende Contrast Garanderen

Kleurcontrast is cruciaal voor de leesbaarheid. Zorg ervoor dat de tekstkleur in uw tooltips voldoende contrast heeft met de achtergrondkleur. De Web Content Accessibility Guidelines (WCAG) bevelen een contrastverhouding aan van ten minste 4.5:1 voor normale tekst en 3:1 voor grote tekst (18pt of 14pt vet).

Gebruik online contrast checkers om te controleren of uw kleurkeuzes voldoen aan de toegankelijkheidsnormen. Voorbeelden van contrast checkers zijn:

Voorbeeld (Goed Contrast):

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

Voorbeeld (Slecht Contrast):

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

5. Voldoende Tijd Toestaan

Gebruikers hebben voldoende tijd nodig om de inhoud van de tooltip te lezen. Vermijd tooltips die te snel verdwijnen. Hoewel er geen magisch getal is, streef naar een minimale weergavetijd van een paar seconden. De tooltip moet ook zichtbaar blijven zolang de gebruiker over het activerende element zweeft of erop focust. Als u de tooltip moet sluiten vanwege andere gebeurtenissen, geef dan een indicatie dat de tooltip zal sluiten.

Als de inhoud van de tooltip lang is, overweeg dan een manier te bieden waarop de gebruiker de tooltip handmatig kan sluiten (bijv. een sluitknop of het indrukken van de Escape-toets).

6. Ze Sluitbaar Maken

Hoewel tooltips vaak automatisch verdwijnen wanneer de gebruiker de muis wegbeweegt of de focus verwijdert, is het een goede gewoonte om een duidelijke manier te bieden om ze handmatig te sluiten, vooral voor lange tooltips of tooltips die interactieve elementen bevatten.

Methoden om Tooltips te Sluiten:

Voorbeeld (Sluitknop):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Dit is de inhoud van mijn tooltip.
  <button onclick="hideTooltip()">Sluiten</button>
</div>

Voorbeeld (Escape-toets):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Vervang door uw daadwerkelijke functie om de tooltip te verbergen
  }
});

7. Overmatig Gebruik Vermijden

Tooltips moeten spaarzaam worden gebruikt en alleen wanneer ze echt nuttige informatie bieden. Overmatig gebruik van tooltips kan de interface onoverzichtelijk maken, gebruikers afleiden en een frustrerende ervaring creëren.

Alternatieven voor Tooltips:

Geavanceerde Overwegingen

Dynamische Inhoud

Als de inhoud van uw tooltip dynamisch wordt gegenereerd (bijv. geladen vanuit een API of bijgewerkt op basis van gebruikersinvoer), zorg er dan voor dat het aria-describedby-attribuut en de zichtbaarheid van de tooltip dienovereenkomstig worden bijgewerkt. Gebruik JavaScript om deze updates te beheren.

Positionering

Overweeg zorgvuldig de positionering van uw tooltips. Plaats ze niet op een manier die belangrijke inhoud verbergt of layoutverschuivingen veroorzaakt. Houd rekening met verschillende schermformaten en resoluties, en gebruik CSS om ervoor te zorgen dat tooltips altijd zichtbaar zijn binnen de viewport.

Mobiele Apparaten

Tooltips zijn traditioneel afhankelijk van hover-interacties, die niet beschikbaar zijn op touch-gebaseerde apparaten. Overweeg voor mobiele apparaten alternatieve interactiemethoden te gebruiken, zoals:

Het Testen van Uw Tooltips

Test uw tooltips grondig om ervoor te zorgen dat ze toegankelijk zijn voor alle gebruikers. Gebruik een combinatie van handmatig testen en geautomatiseerde toegankelijkheidstesttools.

Testmethoden:

Internationalisatie (i18n) en Lokalisatie (l10n)

Houd bij het ontwikkelen van tooltips voor een wereldwijd publiek rekening met internationalisatie en lokalisatie:

Conclusie

Het implementeren van toegankelijke tooltips vereist zorgvuldige planning en aandacht voor detail. Door de principes en technieken in deze gids te volgen, kunt u tooltips maken die voor iedereen bruikbaar zijn, ongeacht hun vaardigheden. Onthoud dat toegankelijkheid een doorlopend proces is, dus blijf uw tooltips testen en verfijnen om ervoor te zorgen dat ze aan de behoeften van al uw gebruikers voldoen.

Bronnen

Tooltip Implementatie: Toegankelijke Informatie bij Hover en Focus | MLOG