Campus Design System

Appearance

2.4.3 Focusvolgorde niveau A ​

Uitleg ​

Het WCAG-criterium 2.4.3 Focusvolgorde vereist dat de volgorde waarin de focus op een webpagina beweegt logisch en voorspelbaar is. Dit is van groot belang voor gebruikers die de website navigeren met behulp van toetsenbordnavigatie, zoals mensen met motorische beperkingen of blinden/slechtzienden die een schermlezer gebruiken.

Wanneer een gebruiker via de Tab-toets door interactieve elementen op een webpagina navigeert, zoals links, knoppen of formuliervelden, moet de focusvolgorde de natuurlijke leesvolgorde volgen. Dit zorgt ervoor dat de gebruiker een website logisch en zonder verwarring kan verkennen.

Wat betekent dit in de praktijk? ​

De focusvolgorde is de volgorde waarin de focus zich verplaatst wanneer gebruikers door interactieve elementen navigeren (zoals knoppen, tekstvelden, en links). Als de volgorde niet logisch is of onvoorspelbaar, kan dit verwarrend zijn voor de gebruiker, die mogelijk de context verliest of vastloopt tijdens de navigatie.

Een voorbeeld van een onlogische focusvolgorde zou zijn wanneer de focus eerst naar een knop springt die onderaan de pagina staat, terwijl de gebruiker misschien eerst de inhoud van de pagina wil lezen.

Oplossing voor dit probleem ​

Zorg ervoor dat de focusvolgorde logisch en voorspelbaar is. Dit betekent dat de focus zich moet verplaatsen in de volgorde waarin de inhoud visueel wordt gepresenteerd, en dat er geen onverwachte of onlogische focusovergangen zijn. Dit kan bijvoorbeeld worden bereikt door de volgorde van HTML-elementen goed te structureren en aria-labels of andere toegankelijkheidsattributen toe te voegen om de navigatie te verbeteren.

Voorbeeld van het probleem ​

Stel je voor dat de focus op een formulier eerst naar de footer (onderaan de pagina) springt en daarna pas naar de invoervelden bovenaan het formulier. Dit kan verwarrend zijn voor gebruikers die het formulier willen invullen en het navigeren via het toetsenbord gebruiken.

Oplossing voor dit probleem ​

De oplossing is eenvoudig: de volgorde van de interactieve elementen moet logisch zijn, zodat de focus van boven naar beneden beweegt, bijvoorbeeld van de titel naar de inhoud en daarna naar de knoppen en formulieren.

Goed voorbeeld:

html
<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="UTF-8" />
    <title>Bestelformulier</title>
  </head>
  <body>
    <h1>Bestelformulier</h1>
    <form>
      <label for="name">Naam:</label>
      <input type="text" id="name" name="name" />

      <label for="email">E-mail:</label>
      <input type="email" id="email" name="email" />

      <button type="submit">Bestellen</button>
    </form>
  </body>
</html>

In dit voorbeeld volgt de focus de juiste volgorde van boven naar beneden: de gebruiker komt eerst bij de naaminvoer, daarna bij het e-mailadres en vervolgens bij de bestelknop.

Slecht voorbeeld:

html
<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="UTF-8" />
    <title>Bestelformulier</title>
  </head>
  <body>
    <h1>Bestelformulier</h1>
    <footer>
      <a href="#contact">Contact</a>
    </footer>
    <form>
      <label for="name">Naam:</label>
      <input type="text" id="name" name="name" />

      <label for="email">E-mail:</label>
      <input type="email" id="email" name="email" />

      <button type="submit">Bestellen</button>
    </form>
  </body>
</html>

In dit geval zou de focus eerst naar de link in de footer gaan, wat verwarrend zou zijn voor gebruikers die het formulier willen invullen. De focus moet pas naar de footer gaan nadat de gebruiker het formulier heeft ingevuld.

Belangrijke overwegingen ​

  • Visuele volgorde = focusvolgorde: De volgorde van de interactieve elementen in de HTML moet overeenkomen met de visuele volgorde op de pagina.
  • Toetsenbordnavigatie: Zorg ervoor dat de focus logisch door de pagina beweegt bij het gebruik van de Tab-toets, Shift+Tab en andere navigatietoetsen.
  • Gebruik van tabindex: Als het nodig is om de volgorde van de focus aan te passen, kan het tabindex-attribuut worden gebruikt, maar gebruik het voorzichtig, omdat het kan leiden tot onvoorspelbare navigatie als het verkeerd wordt toegepast.

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: Deze tool kan helpen bij het controleren of de focusvolgorde logisch en voorspelbaar is. WAVE Tool.
  • aXe Accessibility Tool: Dit is een handige tool voor het testen van toegankelijkheidsrichtlijnen, inclusief die voor focusvolgorde. aXe Tool.

Referenties ​