Naam, rol, waarde

Stel je eens voor dat je een website gebruikt zonder het scherm te kunnen zien. Hoe weet je dan:

• Op welke knop je gaat klikken?
• Wat je in een formulierveld moet invullen?
• Of een selectievakje aangevinkt is of niet?

Dit is precies waarom 4.1.2 zo belangrijk is. Het zorgt dat schermlezers (en andere hulptechnologieën) deze informatie kunnen presenteren.

Wat is WCAG 4.1.2 eigenlijk?

Succescriterium 4.1.2 valt onder het principe “Robuust” en stelt:

Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën.

Simpel gezegd: Alle bedieningselementen op je website (zoals links, knoppen, formuliervelden, enz.) moeten in de code informatie bevatten die hulptechnologieën goed kunnen begrijpen. Deze informatie bestaat uit:

• Naam: Wat is het? (bijv. “Zoeken”, “E-mailadres”, “Menu”)
• Rol: Wat doet het? (bijv. link, knop, invoerveld, keuzelijst)
• Waarde: Hoe is de huidige toestand? (bijv. “ingeschakeld”, “50%”, “geselecteerd”)

Naam, rol en waarde voor verschillende componenten

Laten we eens kijken naar hoe je naam, rol en waarde toepast bij de meest voorkomende componenten.

Links

Naam van links

De naam van een link is wat een schermlezer presenteert om de gebruiker te vertellen waar de link naar verwijst. Standaard is dit alle content tussen de begintag en de eindtag van het <a>-element. Doorgaans is dit ook de zichtbare linktekst.

<!-- Goed voorbeeld -->
<a href="contact.html">
  Neem contact met ons op
</a>

Gebruik je een afbeelding als link? Dan vormt het tekstalternatief de linktekst.

<!-- Slecht voorbeeld -->
<a href="home.html">
  <img src="home-icon.png" alt="">
</a>

<!-- Goed voorbeeld -->
<a href="home.html">
  <img src="home-icon.png" alt="Home">
</a>

Rol van links

De rol van een link is standaard “link”. Als je een <a>-element gebruikt in combinatie met het href-attribuut, dan is deze rol automatisch ingesteld.

Knoppen

Naam van knoppen

De naam van een knop is standaard de content tussen de begintag en de eindtag van het <button>-element:

<!-- Goed voorbeeld -->
<button type="submit">
  Verstuur formulier
</button>

Voor knoppen met alleen een afbeelding vormt het tekstalternatief de toegankelijke naam:

<!-- Slecht voorbeeld -->
<button type="submit">
  <img src="send-icon.png" alt="">
</button>

<!-- Goed voorbeeld -->
<button type="submit">
  <img src="send-icon.png" alt="Verstuur">
</button>

Rol van knoppen

Knoppen hebben standaard de rol “button”. Als je een <button>-element gebruikt, dan is deze rol automatisch ingesteld.

Waarde van knoppen

Knoppen kunnen verschillende waarden hebben:

• Inactief (disabled)
• Ingeschakeld/uitgeschakeld (aria-pressed)
• Geselecteerd/niet geselecteerd (aria-selected)

<!-- Inactieve knop -->
<button type="submit" disabled>
  Verstuur formulier
</button>

<!-- Toggle-knop met aria-pressed -->
<button type="button" aria-pressed="false" onclick="toggleFunction()">
  Pauzeer
</button>

Het aria-pressed-attribuut geeft aan of een knop in- of uitgeschakeld is zoals in een toggle-knop of schuifschakelaar.

Formulierelementen

Naam van formulierelementen

De naam van een formulierelement komt van het bijbehorende <label>-element. Koppel dit label aan het element.

<!-- Goed voorbeeld -->
<label for="gebruikersnaam">
  Gebruikersnaam
</label>
<input type="text" id="gebruikersnaam" name="gebruikersnaam">

Rol van formulierelementen

Formulierelementen hebben verschillende standaardrollen, afhankelijk van het type:

• <input type="text">: invoerveld
• <input type="checkbox">: selectievakje
• <input type="radio">: keuzerondje
• <input type="range">: schuifschakelaar
• <select>: keuzelijst
• enz.

Zorg dat je het juiste type gebruikt voor het doel van het formulierelement.

Waarde van formulierelementen

De waarde van een formulierelement is wat de gebruiker heeft ingevoerd of geselecteerd. Zorg dat de huidige waarde altijd duidelijk is:

<!-- Selectievakje met waarde -->
<input type="checkbox" checked>

<!-- Keuzelijst met geselecteerde optie -->
<select>
  <option>Kies een land</option>
  <option selected>Nederland</option>
  <option>België</option>
</select>

Ook formulierelementen kunnen inactief worden gemaakt:

<!-- Inactief formulierelement -->
<input type="text" disabled>

Maatwerk componenten

Bij complexe componenten zoals tabbladen, accordeons of carrousels worden naam, rol en waarde een stuk ingewikkelder. Dan komt ARIA (Accessible Rich Internet Applications) van pas. Maar onthoud altijd de eerste regel van ARIA: Gebruik geen ARIA als je native HTML-elementen kunt gebruiken.

Hier zijn de belangrijkste ARIA-attributen voor naam, rol en waarde:

Voor naam:

• aria-label: Geeft een naam, bijvoorbeeld als er geen zichtbare tekst is
• aria-labelledby: Verwijst naar de ID van een ander element dat als label dient
• aria-describedby: Koppelt een instructie of beschrijvende tekst aan een element

<!-- aria-label -->
<button aria-label="Sluiten">X</button>

<!-- aria-labelledby -->
<h2 id="dialogTitle">Instellingen wijzigen</h2>
<div role="dialog" aria-labelledby="dialogTitle">
  <!-- Dialooginhoud -->
</div>

<!-- aria-describedby -->
<input type="password" 
       aria-describedby="password-requirements">
<p id="password-requirements">
  Wachtwoord moet minimaal 8 tekens bevatten
</p>

Voor rol:

• role: Bepaalt de functie van een element, bijvoorbeeld:
• role="dialog": Voor dialoogvenster
• role="search": Voor een zoekveld
• role="slider": Voor een schuifregelaar
• role="menu": Voor een menu
• role="region": Voor een onderdeel
• role="alert": Voor belangrijke meldingen
• enz.

Voor waarde:

• aria-expanded: Geeft aan of iets samengevouwen of uitgevouwen is
• aria-pressed: Voor knoppen die aan/uit kunnen staan
• aria-selected: Voor geselecteerde items in een lijst
• aria-checked: Voor aangepaste selectievakjes of keuzerondjes
• aria-current: Geeft aan welk item “actief” is, bijvoorbeeld in een navigatie

<!-- aria-expanded -->
<button aria-expanded="false">Meer opties</button>

<!-- aria-pressed -->
<button aria-pressed="true">Geluid aan</button>

<!-- aria-selected -->
<div role="option" aria-selected="true">Nederland</div>

<!-- aria-checked -->
<div role="checkbox" aria-checked="true" tabindex="0">
  Akkoord met voorwaarden
</div>

<!-- aria-current -->
<nav>
  <a href="/" aria-current="page">Home</a>
  <a href="/producten">Producten</a>
</nav>

Voorbeelden

Voorbeelden van wanneer ARIA nuttig kan zijn:

Tabbladen (voorbeeld)

<div role="tablist" aria-label="Productinformatie">
  <button role="tab" 
          id="tab-spec" 
          aria-selected="true" 
          aria-controls="panel-spec">
    Specificaties
  </button>
  <button role="tab" 
          id="tab-reviews" 
          aria-selected="false" 
          aria-controls="panel-reviews">
    Reviews
  </button>
</div>

<div id="panel-spec" 
     role="tabpanel" 
     aria-labelledby="tab-spec">
  <!-- Inhoud specificaties -->
</div>

<div id="panel-reviews" 
     role="tabpanel" 
     aria-labelledby="tab-reviews" 
     hidden>
  <!-- Inhoud reviews -->
</div>

In dit voorbeeld:

• Naam: Komt van de tekst in de tabknoppen en aria-labelledby voor de panelen
• Rol: Expliciet aangegeven met role="tablist", role="tab" en role="tabpanel"
• Waarde: Aangegeven met aria-selected="true/false" en het hidden attribuut

Accordeon (voorbeeld)

<div class="accordion">
  <h3>
    <button aria-expanded="false" 
            aria-controls="section1-content" 
            id="section1-header">
      Veelgestelde vragen
    </button>
  </h3>
  <div id="section1-content" 
       role="region" 
       aria-labelledby="section1-header" 
       hidden>
    <!-- Accordeon inhoud -->
  </div>
</div>

In dit voorbeeld:

• Naam: De knoptekst en aria-labelledby voor de inhoud
• Rol: De standaard rol voor de knop en role="region" voor de inhoud
• Waarde: aria-expanded="true/false" en hidden

Praktische tips voor het testen

Om je implementatie te controleren:

1. Browser-inspectiehulpmiddelen: De toegankelijkheidsinspectie in Firefox of de accessibilitytree en Lighthouse in Chrome
2. Test zelf met een schermlezer: NVDA (Windows) of VoiceOver (Mac) zijn goede opties
3. Test met automatische tools: axe DevTools (browser-extensie)

Lees meer over hulpmiddelen

Conclusie

Door standaard HTML-elementen te gebruiken waar mogelijk en ARIA waar nodig, maak je je website toegankelijker voor iedereen. En het mooie is: veel van deze technieken verbeteren ook de gebruikerservaring voor mensen zonder functiebeperking.

Heb je nog vragen over WCAG 4.1.2 of andere succescriteria? Laat het me weten!​​​​​​​​​​​​​​​​