Campus Design System

Appearance

3.2.1 Bij Focus niveau A ​

Uitleg ​

Het WCAG-criterium 3.2.1 Bij Focus vereist dat wanneer een gebruikersinterface-element de focus krijgt, de inhoud niet onverwacht verandert. Dit betekent dat wanneer een gebruiker via toetsenbordnavigatie of een andere methode de focus op een element plaatst (zoals een invoerveld of knop), de inhoud van de pagina niet plotseling mag wijzigen zonder dat de gebruiker duidelijk kan begrijpen wat er is veranderd.

Onverwachte veranderingen kunnen verwarrend zijn voor gebruikers, vooral voor degenen die een schermlezer gebruiken of de toetsenbordnavigatie gebruiken om door een pagina te bewegen. Het doel van dit criterium is om de interactie voorspelbaar en toegankelijk te maken voor iedereen.

Wat betekent dit in de praktijk? ​

Als een element op de pagina de focus krijgt (bijvoorbeeld wanneer een gebruiker door te klikken of te navigeren met de tabtoets naar een invoerveld gaat), mag er geen onverwachte verandering plaatsvinden in de inhoud van de pagina, zoals het automatisch wijzigen van tekst, het openen van een pop-up, of het versturen van een formulier. Dit kan namelijk verwarring veroorzaken bij de gebruiker.

Bijvoorbeeld, stel je voor dat wanneer een gebruiker naar een invoerveld navigeert, het formulier plotseling automatisch wordt verzonden zonder dat de gebruiker daar om vraagt. Dit kan erg verwarrend zijn, vooral voor gebruikers die toetsenbordnavigatie of schermlezers gebruiken.

Voorbeeld van het probleem ​

Stel je voor dat een formulier een knop bevat die de focus krijgt wanneer een gebruiker op de pagina navigeert. Als het formulier vervolgens automatisch wordt ingediend zonder dat de gebruiker op de knop heeft geklikt, zou dit een onverwachte verandering zijn.

html
<button id="submit" onfocus="submitForm()">Verzenden</button>

<script>
  function submitForm() {
    document.getElementById('form').submit(); // Formulier wordt verzonden bij focus
  }
</script>

In dit geval wordt het formulier automatisch ingediend zodra de focus op de knop komt, wat verwarrend is voor de gebruiker.

Oplossing voor dit probleem ​

Om te voldoen aan dit criterium, moet je ervoor zorgen dat de inhoud niet onverwachts verandert wanneer een element de focus krijgt. Focus kan alleen worden gebruikt om de interface toegankelijker te maken, maar mag niet leiden tot een verandering van de inhoud zonder expliciete actie van de gebruiker.

Een oplossing zou zijn om de actie (zoals het indienen van een formulier) alleen te laten gebeuren wanneer de gebruiker daadwerkelijk op de knop klikt, en niet wanneer de knop de focus krijgt:

html
<button id="submit">Verzenden</button>

<script>
  document.getElementById('submit').addEventListener('click', function () {
    document.getElementById('form').submit();
  });
</script>

In dit geval wordt het formulier pas ingediend wanneer de gebruiker daadwerkelijk op de knop klikt, in plaats van wanneer de focus op de knop komt.

Belangrijke overwegingen ​

  • Onverwachte veranderingen: Elke verandering die plaatsvindt wanneer een element de focus krijgt, moet altijd door de gebruiker worden geïnitieerd (bijvoorbeeld door te klikken of een toets in te drukken). Vermijd het automatisch uitvoeren van acties bij focus.

  • Toegankelijkheid voor gebruikers met verschillende hulpmiddelen: Voor gebruikers die hulpmiddelen zoals schermlezers gebruiken of voor mensen met cognitieve beperkingen, kan het onverwacht wijzigen van de inhoud verwarrend of zelfs frustrerend zijn. Zorg ervoor dat alle wijzigingen in de inhoud expliciet zijn en begrijpelijk voor de gebruiker.

  • Dynamische inhoud: Als je dynamische inhoud hebt (bijvoorbeeld met JavaScript), zorg er dan voor dat de focusvolgorde en wijzigingen in de inhoud duidelijk en voorspelbaar zijn. Vermijd inhoud die plotseling verandert zonder dat de gebruiker de kans heeft om ermee te interageren of deze te begrijpen.

Voorbeeld van toepassing ​

In een formulier of interactie-element waar de focus mogelijk van invloed kan zijn op de inhoud, kan de focus alleen worden gebruikt voor navigatie en niet voor het initiëren van acties. Bijvoorbeeld:

html
<form id="formulier">
  <input type="text" id="naam" placeholder="Naam" />
  <input type="email" id="email" placeholder="E-mail" />
  <button id="submit" onclick="submitForm()">Verzenden</button>
</form>

<script>
  function submitForm() {
    alert('Het formulier wordt verzonden.');
    document.getElementById('formulier').submit();
  }
</script>

In dit geval gebeurt er niets onverwachts bij het verkrijgen van de focus op een element. De gebruiker moet expliciet de knop indrukken om het formulier in te dienen.

Testen en hulpmiddelen ​

  • WAVE Accessibility Tool: WAVE kan helpen bij het identificeren van onverwachte veranderingen wanneer een element de focus krijgt. Je kunt het gebruiken om te controleren of er onverwachte acties plaatsvinden. WAVE Tool.
  • Axe Accessibility Tool: aXe biedt tools voor het testen van onverwachte veranderingen die optreden bij het verkrijgen van de focus. Axe Tool.
  • Chrome DevTools: Gebruik de DevTools om JavaScript-acties en wijzigingen in de inhoud van de pagina te inspecteren, en test of deze pas plaatsvinden na expliciete acties van de gebruiker.

Referenties ​