Campus Design System

Appearance

2.4.7 Focus zichtbaar niveau AA ​

Uitleg ​

Het WCAG-criterium 2.4.7 Focus zichtbaar vereist dat de focus van interactie-elementen (zoals knoppen, links, formulieren, enz.) op een webpagina duidelijk zichtbaar is. Dit is van cruciaal belang voor gebruikers die navigeren met het toetsenbord of andere alternatieve inputmethoden, zoals spraakherkenning of een switch. Het doel van dit criterium is ervoor te zorgen dat gebruikers altijd weten welk element ze momenteel selecteren of waar de focus ligt tijdens de interactie met de pagina.

Wanneer een gebruiker met het toetsenbord door een website navigeert, moet het voor hen duidelijk zijn welk element actief is. Dit maakt de navigatie makkelijker en voorkomt verwarring, vooral bij mensen die visueel beperkt zijn of die afhankelijk zijn van andere manieren van navigeren.

Wat betekent dit in de praktijk? ​

Voor gebruikers die geen muis gebruiken, zoals mensen die met het toetsenbord navigeren, moet de actieve focus duidelijk zichtbaar zijn. Dit kan bijvoorbeeld door een visuele indicatie toe te voegen, zoals een rand om het geselecteerde element of door de achtergrondkleur van het element te veranderen.

Stel dat een gebruiker door een formulier navigeert met de Tab-toets. Wanneer de gebruiker van het ene invoerveld naar het andere gaat, moet het actieve veld een visuele indicatie geven dat het de focus heeft, zodat de gebruiker weet waar ze zich bevinden.

Oplossing voor dit probleem ​

  • Gebruik van outline of border: Voeg een duidelijke visuele indicatie toe, zoals een rand of een achtergrondkleur, wanneer een element in focus is. Dit kan eenvoudig worden bereikt met CSS.
css
/* CSS voor een focus-indicator */
button:focus,
input:focus,
a:focus {
  outline: 2px solid #005fcc; /* Duidelijke blauwe rand */
}

In dit voorbeeld krijgen knoppen, invoervelden en links een blauwe rand wanneer ze in focus zijn. Deze visuele indicator maakt het voor de gebruiker duidelijk welk element actief is.

  • Versterk de visuele indicatie: Het is belangrijk dat de focus-indicator goed opvalt en niet te subtiel is. Dit zorgt ervoor dat gebruikers niet per ongeluk een element missen tijdens het navigeren.
css
/* Sterkere visuele focus-indicator */
button:focus,
input:focus,
a:focus {
  outline: none; /* Verwijder standaard outline */
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.8); /* Voeg een duidelijke schaduw toe */
}

In dit voorbeeld wordt de standaard focus-outline verwijderd en vervangen door een opvallende schaduw die de focus nog duidelijker aangeeft.

Voorbeeld van het probleem ​

Een veelvoorkomend probleem is dat er geen visuele focusindicator is, of dat deze te subtiel is om op te vallen voor gebruikers die met het toetsenbord navigeren.

html
<button>Verstuur</button>
<!-- Geen visuele focusindicator -->

In dit geval is het voor de gebruiker niet duidelijk of de knop in focus is, vooral als de gebruiker met het toetsenbord door de pagina navigeert.

Oplossing voor dit probleem ​

Voeg een duidelijke focusindicator toe:

html
<button class="focus-visible">Verstuur</button>
css
button:focus {
  outline: 3px solid #f39c12; /* Duidelijke focusindicator */
}

Belangrijke overwegingen ​

  • Zorg voor een voldoende zichtbare focus: De focus moet altijd duidelijk zichtbaar zijn, zelfs als de pagina geen interactieve elementen heeft zoals knoppen of invoervelden.
  • Geen verborgen focus: Verwijder geen focus-indicatoren zonder een andere visuele vervangende indicator te bieden. Dit zou het navigeren voor toetsenbordgebruikers bemoeilijken.
  • Focusindicatoren op alle interactieve elementen: Alle interactieve elementen, zoals links, knoppen, formulieren en invoervelden, moeten een focusindicator hebben.

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: Deze tool helpt bij het controleren of de focus zichtbaar is op een webpagina. WAVE Tool.
  • aXe Accessibility Tool: Dit is een andere handige tool om te controleren of de focus goed zichtbaar is en voldoet aan de WCAG-richtlijnen. aXe Tool.

Referenties ​