Campus Design System

Appearance

2.1.2 Geen toetsvergrendeling (No Keyboard Trap) niveau A ​

Uitleg ​

Het WCAG-criterium 2.1.2 Geen toetsvergrendeling vereist dat gebruikers niet vast komen te zitten in een interactief element wanneer ze alleen het toetsenbord gebruiken. Dit betekent dat de gebruiker in staat moet zijn om eenvoudig door de webpagina te navigeren en de interactieve elementen te verlaten zonder dat de toetsenbordnavigatie hen "vergrendelt" of hen dwingt om onbedoelde handelingen uit te voeren.

Toetsvergrendeling gebeurt wanneer een gebruiker ergens op de pagina terechtkomt en niet meer naar andere elementen kan navigeren via het toetsenbord (bijvoorbeeld via de Tab-toets). Het is belangrijk om te zorgen dat gebruikers altijd de controle behouden over hun navigatie en nooit vast komen te zitten in een element of sectie, zoals een pop-up, formulier of modaal venster.

Wat betekent dit in de praktijk? ​

  • Vergrendeling voorkomen: Wanneer een gebruiker zich door een interactief element beweegt (bijvoorbeeld een pop-up of modaal venster), moet de gebruiker kunnen blijven navigeren naar andere onderdelen van de pagina of het venster sluiten zonder dat ze vast komen te zitten in het element.
  • Focusbeheer: Als een modaal venster bijvoorbeeld wordt geopend, moet de focus naar het eerste interactief element binnen het venster verplaatst worden. Bovendien moet de gebruiker de mogelijkheid hebben om het modale venster weer te sluiten via toetsenbordnavigatie (bijvoorbeeld door op Esc te drukken).

Waarom is dit belangrijk? ​

Dit criterium is van cruciaal belang voor gebruikers die geen muis gebruiken en volledig afhankelijk zijn van toetsenbordnavigatie. Als een gebruiker vast komt te zitten in een interactief element zonder de mogelijkheid om eruit te komen, kan dit zeer frustrerend zijn en de toegang tot de rest van de pagina blokkeren.

Een toetsvergrendeling kan ook een probleem zijn voor gebruikers van schermlezers, omdat de focus mogelijk vastzit in een bepaald element en het niet mogelijk is om andere delen van de pagina te bereiken zonder de gebruikelijke toetsenbordnavigatie-opties.

Voorbeeld van het probleem ​

Stel je voor dat een gebruiker een formulier invult en per ongeluk op een "submit"-knop klikt. Als deze knop leidt naar een modaal venster dat de focus naar binnen verplaatst en er geen manier is om via het toetsenbord naar buiten te navigeren (bijvoorbeeld door op Esc te drukken), kan de gebruiker vast komen te zitten in het modale venster zonder de mogelijkheid om terug te keren naar de rest van de pagina.

Oplossing voor dit probleem ​

Zorg ervoor dat de focus altijd logisch beweegt en dat de gebruiker niet vast komt te zitten in een bepaald interactief element. Als er een modaal venster of pop-up is, moet de gebruiker het venster kunnen sluiten met toetsenbordcommando’s zoals Esc, en de focus moet terugkeren naar het element dat de pop-up heeft geopend.

Goed voorbeeld:

html
<!-- Correcte implementatie van een modaal venster waarbij de focus goed wordt beheerd -->
<button id="openModal" onclick="openModal()">Open Modal</button>

<div id="modal" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-content">
    <h2 id="modalTitle">Modaal Venster</h2>
    <p>Inhoud van het modale venster.</p>
    <button onclick="closeModal()">Sluit</button>
  </div>
</div>

<script>
  // Functie om het modaal venster te openen en focus naar het eerste element te verplaatsen
  function openModal() {
    document.getElementById('modal').setAttribute('aria-hidden', 'false');
    document.getElementById('modal').focus();
  }

  // Functie om het modaal venster te sluiten
  function closeModal() {
    document.getElementById('modal').setAttribute('aria-hidden', 'true');
    document.getElementById('openModal').focus(); // Focus terug naar de knop
  }

  // Sluit het modale venster wanneer de Esc-toets wordt ingedrukt
  document.addEventListener('keydown', function (event) {
    if (event.key === 'Escape') {
      closeModal();
    }
  });
</script>

<style>
  #modal {
    display: none;
  }

  #modal[aria-hidden='false'] {
    display: block;
  }
</style>

In dit voorbeeld wordt het modale venster op de juiste manier geopend en wordt de focus verplaatst naar het eerste element in het venster. Gebruikers kunnen het venster sluiten door op de Esc-toets te drukken, en de focus wordt terug naar de oorspronkelijke knop verplaatst.

Slecht voorbeeld:

html
<!-- Slechte implementatie van een modaal venster waarbij de focus niet goed wordt beheerd -->
<button id="openModal" onclick="openModal()">Open Modal</button>

<div id="modal" role="dialog" aria-hidden="true">
  <div class="modal-content">
    <h2>Modaal Venster</h2>
    <p>Inhoud van het modale venster.</p>
    <button onclick="closeModal()">Sluit</button>
  </div>
</div>

<script>
  // Functie om het modaal venster te openen
  function openModal() {
    document.getElementById('modal').setAttribute('aria-hidden', 'false');
  }

  // Functie om het modaal venster te sluiten
  function closeModal() {
    document.getElementById('modal').setAttribute('aria-hidden', 'true');
  }
</script>

In dit slechte voorbeeld kan de gebruiker mogelijk vast komen te zitten in het modale venster, omdat de focus niet goed wordt beheerd en het element niet gemakkelijk kan worden gesloten via toetsenbordinteractie.

Belangrijke overwegingen ​

  • Focusbeheer: Zorg ervoor dat de focus altijd naar een logisch interactief element beweegt wanneer een nieuw element wordt geopend of de focus verandert. Dit geldt vooral voor pop-ups en modale vensters.
  • Esc-toets om te sluiten: Als een modaal venster of pop-up wordt geopend, moet de gebruiker het venster kunnen sluiten door op de Esc-toets te drukken, en de focus moet terugkeren naar het element dat de pop-up heeft geopend.
  • Centrale focus voor dynamische inhoud: Zorg ervoor dat bij het openen van een nieuw venster of pop-up de focus naar dat nieuwe element verschuift, zodat het duidelijk is waar de gebruiker zich bevindt.

Alternatieve benaderingen ​

  • ARIA-rolattributen: Gebruik de juiste ARIA-rolattributen zoals role="dialog" voor modale vensters en aria-hidden="true/false" om de zichtbaarheid van dynamische inhoud aan te geven.
  • Focus-trap: Voor complexere modale vensters kan een "focus-trap"-techniek worden gebruikt, waarbij de focus binnen het modale venster blijft totdat het venster wordt gesloten.

Belangrijkste punten ​

  • Zorg ervoor dat gebruikers altijd de controle hebben en niet vast komen te zitten in een interactief element.
  • Gebruik focusbeheer om te garanderen dat de gebruiker logisch door de pagina kan navigeren.
  • Zorg voor toetsenbordinteracties zoals Esc om pop-ups en modale vensters te sluiten.

Tools en Hulpmiddelen ​

  • aXe Accessibility Tool: Deze tool helpt bij het testen van de toegankelijkheid van interacties en controleert of er toetsenbordvergrendeling optreedt. aXe Tool.
  • WAVE (Web Accessibility Evaluation Tool): Deze tool controleert op toetsenbordvergrendeling en biedt een visuele weergave van focusproblemen. WAVE Tool.

Betekenis voor toegankelijkheid ​

Het vermijden van toetsenbordvergrendeling zorgt ervoor dat gebruikers die uitsluitend het toetsenbord gebruiken de volledige controle hebben over hun interactie met de website. Dit is van cruciaal belang voor de bruikbaarheid van de website, vooral voor gebruikers met een beperking die geen muis kunnen gebruiken.

Referenties ​