Campus Design System

Appearance

2.4.11 Focus niet belemmerd (Minimum) niveau AA ​

Uitleg ​

Het WCAG-criterium 2.4.11 Focus niet belemmerd (Minimum) vereist dat de focus van een interactief element altijd zichtbaar is, zelfs als er visuele elementen zijn die de focus kunnen bedekken. Dit betekent dat wanneer de gebruiker door een pagina navigeert met het toetsenbord of andere invoerapparaten, de focus niet verborgen of bedekt mag worden door andere inhoud of visuele elementen.

Dit is belangrijk voor gebruikers die afhankelijk zijn van toetsenbordnavigatie of andere niet-muismethoden. Als de focus op een interactief element wordt bedekt door bijvoorbeeld een pop-up, een menu of een ander visueel element, kunnen deze gebruikers niet meer zien welk element ze selecteren of activeren, wat kan leiden tot verwarring of fouten in de interactie.

Wat betekent dit in de praktijk? ​

Als er een pop-up of ander dynamisch element op een pagina verschijnt, mag dit niet het element bedekken waarop de focus ligt. Dit geldt ook voor bijvoorbeeld het navigeren door een formulier: als de focus op een invoerveld ligt, mag geen ander element het veld visueel blokkeren, zodat de gebruiker niet meer kan zien waar de focus ligt.

Oplossing voor dit probleem ​

Om te voldoen aan dit criterium, moeten webpagina's ervoor zorgen dat visuele elementen zoals pop-ups of modale vensters de focus niet bedekken of blokkeren. Dit kan onder meer door het ontwerpen van pop-ups die de focus automatisch naar een specifieke, zichtbare positie verplaatsen en ervoor zorgen dat er geen visuele overlapping is.

  • Gebruik van z-index: Zorg ervoor dat dynamische elementen die verschijnen (zoals pop-ups of modale vensters) de focus niet bedekken, door ze correct te positioneren met behulp van z-index en door de focus te verplaatsen naar het nieuwe element wanneer dat verschijnt.
css
/* Voorbeeld van het gebruik van z-index om de focus zichtbaar te houden */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000; /* Zorg ervoor dat de pop-up boven andere elementen komt */
}

button:focus {
  z-index: 9999; /* Zorg ervoor dat de focus altijd boven de pop-up blijft */
}

In dit voorbeeld is de pop-up met een z-index gedefinieerd om ervoor te zorgen dat de focus altijd boven de pop-up zichtbaar blijft.

  • Focusverplaatsing bij pop-ups: Wanneer een pop-up of modaal venster verschijnt, moet de focus naar het eerste interactieve element binnen de pop-up verplaatst worden.
javascript
// JavaScript om de focus naar de pop-up te verplaatsen
document.getElementById('popup').focus();

Voorbeeld van het probleem ​

Een veelvoorkomend probleem is wanneer een pop-up verschijnt en de focus op een ander element wordt verplaatst, maar de pop-up zelf de focus bedekt, waardoor de gebruiker niet kan zien welk element in focus is.

html
<!-- Onjuiste implementatie -->
<button id="open-popup">Open Pop-up</button>
<div id="popup" style="display:none;">
  <button>Knop binnen pop-up</button>
</div>

In dit geval kan de pop-up de focus van andere knoppen of inhoud blokkeren, waardoor de gebruiker niet meer kan navigeren naar de volgende elementen.

Oplossing voor dit probleem ​

Verplaats de focus naar de pop-up en zorg ervoor dat het eerste element in de pop-up in focus komt, terwijl je voorkomt dat het de rest van de pagina blokkeert.

html
<!-- Correcte implementatie -->
<button id="open-popup" onclick="openPopup()">Open Pop-up</button>
<div id="popup" style="display:none;">
  <button>Knop binnen pop-up</button>
</div>

<script>
  function openPopup() {
    document.getElementById('popup').style.display = 'block';
    document.getElementById('popup').focus();
  }
</script>

Belangrijke overwegingen ​

  • Geen focusverlies: Zorg ervoor dat de focus niet verloren gaat tijdens het navigeren naar nieuwe elementen, vooral als een nieuw element verschijnt op de pagina.
  • Dynamische inhoud: Bij het toevoegen van dynamische inhoud, zoals modale vensters of pop-ups, moet de focus beheerd worden om ervoor te zorgen dat de gebruiker altijd weet waar de focus zich bevindt.
  • Visuele elementen: Zorg ervoor dat visuele elementen zoals overlays en pop-ups geen interactie-elementen bedekken of de zichtbaarheid van de focus belemmeren.

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: Deze tool kan helpen bij het detecteren van problemen met focus en zichtbaarheid van focus op interactieve elementen. WAVE Tool.
  • aXe Accessibility Tool: Met deze tool kan je controleren of de focus op een interactief element zichtbaar blijft, ook als er pop-ups of overlays aanwezig zijn. aXe Tool.

Referenties ​