Campus Design System

Appearance

1.3.5 Identificeer het Inputdoel (Identify Input Purpose) niveau AA ​

Uitleg ​

Het WCAG-criterium 1.3.5 Identificeer het Inputdoel vraagt dat voor inputvelden waar gebruikers bepaalde informatie moeten invoeren (zoals naam, adres, e-mailadres, enzovoort) de bedoeling of het doel van het veld wordt aangegeven. Dit is belangrijk voor de toegankelijkheid, omdat gebruikers met speciale toegankelijkheidstools (zoals schermlezers of invulassistenten) dan direct kunnen begrijpen welke gegevens vereist zijn en het proces gemakkelijker wordt.

In HTML betekent dit dat inputvelden de juiste semantische kenmerken krijgen om het doel duidelijk te maken. Dit wordt bereikt door autofill-attributen te gebruiken, zoals autocomplete, die beschrijven welke informatie in het veld moet worden ingevuld. Hierdoor kunnen gebruikers met assistieve technologieën en browsers die autofill-functies ondersteunen sneller en accurater formulieren invullen.

Wat betekent dit in de praktijk? ​

In de praktijk houdt dit in dat inputvelden voor formulieren de juiste autocomplete-waarden moeten krijgen. Hierdoor wordt het voor browsers en hulpmiddelen eenvoudiger om te begrijpen welk type informatie verwacht wordt en kunnen deze velden automatisch worden ingevuld waar mogelijk.

Voorbeelden van veelgebruikte waarden voor autocomplete zijn:

  • autocomplete="name" voor de volledige naam,
  • autocomplete="email" voor e-mailadressen,
  • autocomplete="tel" voor telefoonnummers,
  • autocomplete="address-line1" voor adresgegevens.

Waarom is dit belangrijk? ​

Het correct labelen van invoervelden helpt gebruikers met cognitieve beperkingen en gebruikers die assistieve technologie gebruiken, omdat zij sneller kunnen navigeren en invulassistenten kunnen gebruiken. Dit verhoogt de toegankelijkheid van formulieren aanzienlijk, vermindert de kans op fouten en maakt formulieren eenvoudiger in gebruik voor iedereen.

Voorbeeld van het probleem ​

Stel je voor dat een formulier een invoerveld heeft voor een e-mailadres zonder autocomplete-attribuut. Gebruikers met een schermlezer zullen dan minder duidelijke feedback krijgen over wat er van hen wordt verwacht, en invulassistenten kunnen mogelijk niet automatisch het veld invullen, wat frustrerend kan zijn voor gebruikers.

Oplossing voor dit probleem ​

Voeg het juiste autocomplete-attribuut toe aan de inputvelden, zodat duidelijk is welke informatie in elk veld verwacht wordt en gebruikers gemakkelijk toegang hebben tot invulopties.

html
<form>
  <!-- Goed voorbeeld: correct gebruik van autocomplete -->
  <label for="name">Naam:</label>
  <input type="text" id="name" name="name" autocomplete="name" />

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

  <label for="tel">Telefoonnummer:</label>
  <input type="tel" id="tel" name="tel" autocomplete="tel" />
</form>

In dit voorbeeld zijn de autocomplete-waarden toegevoegd om de invoervelden duidelijk te specificeren, wat het invullen voor gebruikers eenvoudiger maakt.

Belangrijke overwegingen ​

  • Gebruik juiste autocomplete-waarden: Kies altijd de waarde die het doel van het invoerveld het beste beschrijft.
  • Combineer met duidelijke labels: Geef ook duidelijke tekstuele labels voor elk veld, zodat alle gebruikers begrijpen wat ze moeten invullen.
  • Consistent gebruik: Zorg ervoor dat elk formulier de juiste semantiek volgt, zodat gebruikers niet worden verward door inconsistentie in het ontwerp.

Alternatieve benaderingen ​

  • Gebruik aria-labels: Wanneer autocomplete niet van toepassing is, kunnen aria-labels helpen om het doel van een invoerveld te beschrijven voor gebruikers van schermlezers.
  • Testen met invulassistenten: Zorg ervoor dat het formulier correct werkt met veelgebruikte invulassistenten om een goede ervaring te garanderen.

Belangrijkste punten ​

  • Gebruik autocomplete om duidelijk te maken welk type gegevens in een inputveld verwacht wordt.
  • Help gebruikers met assistieve technologieën en invulassistenten om gemakkelijker formulieren in te vullen.
  • Combineer autocomplete met duidelijke tekstlabels voor een optimale toegankelijkheid.

Tools en Hulpmiddelen ​

  • HTML Form Guide: Dit is een gids voor ontwikkelaars om de juiste autocomplete-waarden voor formulieren te leren gebruiken. Zie HTML Form Guide.
  • Screen Reader Testing Tools: Test hoe invulassistenten en schermlezers omgaan met formulieren, zoals JAWS of NVDA.

Betekenis voor toegankelijkheid ​

Door inputvelden correct te labelen met autocomplete-waarden, kunnen gebruikers die afhankelijk zijn van assistieve technologie efficiënter en foutloos formulieren invullen. Dit maakt het formulier gebruiksvriendelijker en verlaagt de cognitieve belasting, waardoor het toegankelijker wordt voor alle gebruikers.

Referenties ​