Composants ARIA - Guide Accessibilité Web

Wat is ARIA?

ARIA (Accessible Rich Internet Applications) is een W3C-specificatie die het mogelijk maakt de toegankelijkheid van rijke webtoepassingen en dynamische componenten te verbeteren.

🏷️ Rollen

Definieer wat een element is (knop, navigatie, waarschuwing...)

role="button"

📊 Statussen

Beschrijf de huidige status van een element (aangevinkt, uitgeklapt, uitgeschakeld...)

aria-expanded="true"

🔧 Eigenschappen

Bied aanvullende informatie (label, describedby, controls...)

aria-label="Hoofdmenu"

⚠️ ARIA Gulden Regel

Gebruik geen ARIA als je native HTML kunt gebruiken

Formulieren met ARIA-attributen

Slecht voorbeeld

Formulier zonder ARIA

❌ Ontoegankelijk formulier zonder geschikte ARIA-attributen:

<!-- Slecht: geen label, geen beschrijving -->
<input type="text" placeholder="Je e-mail">

<!-- Slecht: icoon niet toegankelijk -->
<button>
  <span class="icon">🔍</span>
</button>

<!-- Slecht: fout niet gekoppeld, geen autocomplete -->
<input type="password">
<div class="error">Wachtwoord te kort</div>

Goed voorbeeld

Formulier met ARIA

✅ Toegankelijk formulier met geschikte ARIA-attributen:

<!-- Goed: aria-label voor veld zonder zichtbaar label -->
<input
  type="text"
  aria-label="E-mailadres (verplicht)"
  aria-describedby="email-desc"
  aria-required="true">
<span id="email-desc">Indeling: naam@voorbeeld.com</span>

<!-- Goed: knop met aria-label -->
<button aria-label="Formulier indienen">
  <span aria-hidden="true">🔍</span>
</button>

<!-- Goed: fout gekoppeld met aria-describedby -->
<input
  type="password"
  aria-label="Wachtwoord (minimaal 8 tekens)"
  aria-invalid="true"
  aria-describedby="pwd-error"
  autocomplete="new-password">
<div id="pwd-error" role="alert">
  Wachtwoord moet minimaal 8 tekens bevatten
</div>

Gebruikte ARIA-attributen:

aria-label: Biedt een toegankelijk label
aria-describedby: Koppelt een gedetailleerde beschrijving
aria-required: Geeft een verplicht veld aan
aria-invalid: Signaleert een ongeldig veld
aria-labelledby: Verwijst naar een bestaand label
role="alert": Kondigt onmiddellijk fouten aan
aria-hidden: Verbergt decoratieve elementen
aria-live: Kondigt dynamische wijzigingen aan

Uitleg: ARIA-attributen verrijken formulieren door labels, beschrijvingen en statussen te bieden aan ondersteunende technologieën.

Toegankelijke accordeon

Slecht voorbeeld

Zonder ARIA-attributen

Wat is webtoegankelĳkheid?+

Waarom is het belangrijk?+

Hoe te beginnen?+

<!-- Slecht: Geen ARIA-attributen, geen toetsenbordnavigatie -->
<div class="accordion-header" @click="toggle">
  <span>Title</span>
  <span>+</span>
</div>
<div v-if="open">
  Content
</div>

Goed voorbeeld

Met juiste ARIA

Wat is webtoegankelĳkheid?+

Waarom is het belangrijk?+

Hoe te beginnen?+

<!-- Goed: Volledige ARIA met toetsenbordnavigatie -->
<button
  id="accordion-button-1"
  aria-expanded="false"
  aria-controls="panel-1"
  @click="toggle"
  @keydown.enter="toggle"
>
  Title
</button>
<div
  id="panel-1"
  role="region"
  aria-labelledby="accordion-button-1"
  :hidden="!open"
>
  Content
</div>

Uitleg: Een accordeon moet geschikte ARIA-attributen gebruiken, toetsenbordnavigatie ondersteunen en statuswijzigingen aankondigen.

Tabindex en toetsenbordnavigatie

Het tabindex-attribuut bepaalt of een element toetsenbordfocus kan ontvangen en in welke volgorde.

✅ tabindex="0"

Element is focusbaar in de natuurlijke DOM-volgorde

tabindex="0"

<!-- Goed: Interactief element focusbaar -->
<div role="button" aria-label="Custom action" tabindex="0">
  Custom button
</div>

⚠️ tabindex="-1"

Focusbaar via JavaScript maar niet via Tab

tabindex="-1"

<!-- Goed: Voor programmatische focus -->
<div role="alert" aria-live="assertive" tabindex="-1">
  Error message
</div>

❌ tabindex > 0

Wijzigt navigatievolgorde (vermijden!)

tabindex="5"

<!-- Slecht: Breekt natuurlijke tab-volgorde -->
<button tabindex="3">Third</button>
<button tabindex="1">First</button>
<button tabindex="2">Second</button>

📋 Tabindex best practices

Gebruik tabindex="0" om aangepaste interactieve elementen focusbaar te maken
Gebruik tabindex="-1" voor programmatische focus (modals, waarschuwingen)
NOOIT positieve waarden gebruiken - respecteer DOM-volgorde
Native interactieve elementen (<button>, <a>, <input>) hebben geen tabindex nodig

🎯 Interactieve voorbeelden

Test toetsenbordnavigatie (Tab/Shift+Tab) met deze elementen:

✅ Focusbare elementen

Link

Aangepaste knop (div)

Aangepaste tab

Menu-optie

❌ Niet-focusbare elementen

Eenvoudige tekst (div)

Inline tekst (span)

Paragraaf

Waarschuwingsbericht (tabindex="-1")

💡 Testtips

Gebruik Tab om vooruit te navigeren
Gebruik Shift + Tab om achteruit te navigeren
Gebruik Spatie of Enter om elementen te activeren
Observeer de focusindicator (blauwe omtrek)
Let op welke elementen wel of niet focus kunnen ontvangen

Toegankelijk dropdown-menu

Slecht voorbeeld

Menu zonder ARIA

<!-- Slecht: Geen menu-rol, geen focus trap -->
<div @click="open = !open">
  Actions ▼
</div>
<div v-if="open">
  <div @click="action">Edit</div>
  <div @click="action">Delete</div>
</div>

Goed voorbeeld

Menu met ARIA

<!-- Goed: ARIA-attributen en focusbeheer -->
<button
  aria-haspopup="true"
  aria-expanded="false"
  aria-controls="menu"
  @keydown.escape="close"
>
  Actions
</button>
<div
  id="menu"
  role="menu"
  v-if="open"
>
  <button role="menuitem">Edit</button>
  <button role="menuitem">Delete</button>
</div>

Uitleg: Een dropdown-menu moet toetsenbordnavigatie ondersteunen, sluiten met Escape en de focus correct behouden.

Toegankelijke afbeeldingengalerij

Slecht voorbeeld

Toegankelijke afbeeldingengalerij

<!-- ❌ Slecht: galerij niet toetsenbordtoegankelijk -->
<div class="thumbnails">
  <img v-for="image in images"
       :src="image.thumb"
       @click="selectImage(index)"
       :class="{ active: selected === index }" />
</div>
<div class="main-image">
  <img :src="images[selected].full" />
</div>

Goed voorbeeld

Toegankelijke afbeeldingengalerij

MacBook Pro vooraanzicht, scherm gesloten

Vooraanzicht van de 16-inch MacBook Pro met gesloten scherm, met het strakke aluminium ontwerp.

<!-- ✅ Goed: toegankelijke galerij met toetsenbordnavigatie -->
<div role="tablist" aria-label="Productafbeeldingen">
  <button v-for="(image, index) in images"
          :id="`tab-${index}`"
          role="tab"
          :aria-selected="selected === index"
          :aria-controls="`panel-${index}`"
          :tabindex="selected === index ? 0 : -1"
          @click="selectImage(index)"
          @keydown="handleKeydown($event, index)">
    <img :src="image.thumb" :alt="`${image.alt} - Miniature`" />
  </button>
</div>

<div :id="`panel-${selected}`"
     role="tabpanel"
     :aria-labelledby="`tab-${selected}`">
  <img :src="images[selected].full" :alt="images[selected].alt" />
  <p>{{ images[selected].description }}</p>
</div>

<!-- Bonnes pratiques :
- Pattern tablist/tab/tabpanel ARIA
- Navigation avec flèches, Home, End
- Focus management avec tabindex
- Descriptions détaillées pour chaque image -->

Uitleg: Een afbeeldingengalerij moet toetsenbordnavigatie mogelijk maken en contextuele beschrijvingen bieden voor elke afbeelding. Het ARIA tablist/tab/tabpanel patroon is perfect voor deze use case.

Toegankelijke sorteerbare tabel

Slecht voorbeeld

Naam ↑	E-mail	Rol	Status
Alice Martin	alice@example.com	Admin	Actief
Bob Dupont	bob@example.com	Gebruiker	Inactief
Charlie Leroy	charlie@example.com	Moderator	Actief
Diana Moreau	diana@example.com	Gebruiker	Geschorst

Goed voorbeeld


Alice Martin	alice@example.com	Admin	Actief
Bob Dupont	bob@example.com	Gebruiker	Inactief
Charlie Leroy	charlie@example.com	Moderator	Actief
Diana Moreau	diana@example.com	Gebruiker	Geschorst

Klik op kolomkoppen om de tabel te sorteren. Gebruik Tab om te navigeren tussen sorteerknoppen.

Uitleg: Een sorteerbare tabel moet de huidige sorteerstatus aangeven, toetsenbordnavigatie mogelijk maken en wijzigingen aankondigen aan schermlezers.

Dynamische aria-live regio's

Slecht voorbeeld

Zonder aria-live

Wijzigingen worden niet aangekondigd

<!-- Mauvais : pas d'attribut aria-live -->
<div class="status-banner">
  <p></p>
</div>

Teller: 0

Problemen:

Wijzigingen worden niet aangekondigd
Schermlezergebruikers weten niet dat de inhoud is gewijzigd
Geen indicatie van berichtbelang

Goed voorbeeld

Met geschikte aria-live

Wijzigingen worden aangekondigd volgens hun prioriteit

<!-- Bon : avec aria-live="polite" pour informations -->
<div
  class="status-banner"
  aria-live="polite"
  aria-atomic="true"
  role="status"
>
  <p>Information : Données mises à jour</p>
</div>

<!-- Bon : avec aria-live="assertive" pour alertes -->
<div
  class="alert-banner"
  aria-live="assertive"
  aria-atomic="true"
  role="alert"
>
  <p>Attention : Action requise immédiatement</p>
</div>

Regio type:

Beleefde zone (informatie)

Assertieve zone (waarschuwingen)

Voordelen:

Belangrijke berichten onderbreken met aria-live="assertive"
Informatieve berichten wachten met aria-live="polite"
aria-atomic="true" kondigt volledige regio-inhoud aan
Geschikte rollen (status, alert) bieden meer context

Uitleg: Aria-live regio's maken het mogelijk inhoudswijzigingen aan te kondigen aan schermlezers. 'polite' wacht tot de huidige aankondiging is voltooid, 'assertive' onderbreekt onmiddellijk.

Toegankelijke icoonknoppen

Slecht voorbeeld

Knoppen zonder beschrijving

Deze knoppen hebben geen tekstindicatie:

Problemen:

Schermlezers kondigen alleen "knop" aan
Onmogelijk om de actie te weten zonder het icoon te zien
Emoji's kunnen verkeerd geïnterpreteerd worden
Geen tooltip bij hover

Goed voorbeeld

Toegankelijke knoppen

Verschillende benaderingen om iconen toegankelijk te maken:

1. Met aria-label

2. Met zichtbare tekst

3. Met visueel verborgen tekst

Best practices:

Bied altijd alternatieve tekst (aria-label, verborgen tekst of zichtbare tekst)
Gebruik aria-hidden="true" op decoratieve iconen
Voeg tooltips toe met het title-attribuut
Geef de voorkeur aan zichtbare tekst wanneer de ruimte het toelaat

Uitleg: Knoppen die alleen iconen bevatten moeten een aria-label of visueel verborgen tekst hebben om begrepen te worden door schermlezers.

Combobox / Zoeken met suggesties

Slecht voorbeeld

Zonder ARIA of toetsenbordnavigatie

Goed voorbeeld

Met ARIA en toetsenbordnavigatie

Zoek naar een land

Uitleg: Een zoekopdracht met suggesties (combobox) moet toetsenbordnavigeerbaar zijn, resultaten aankondigen en selectie mogelijk maken.

Toast-meldingen (Live Regions)

Slecht voorbeeld

Zonder aria-live

❌ Meldingen worden niet aangekondigd aan schermlezers

<!-- Slecht: niet aangekondigd aan schermlezers -->
<div v-if="showToast" class="toast">
  Votre demande a été enregistrée
</div>

Goed voorbeeld

Met geschikte aria-live

✅ Meldingen worden correct aangekondigd

<!-- Goed: info melding (beleefd) -->
<div
  v-if="showToast"
  role="status"
  aria-live="polite"
  aria-atomic="true"
  class="toast"
>
  <p>Votre demande a été enregistrée</p>
  <button @click="dismiss" aria-label="Fermer notification">✕</button>
</div>

<!-- Goed: foutwaarschuwing (assertief) -->
<div
  v-if="showError"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  class="toast error"
>
  <p>Erreur : action impossible à exécuter</p>
  <button @click="dismiss" aria-label="Fermer alerte">✕</button>
</div>

Verschillen:

role="status" + aria-live="polite": Voor informatieve meldingen, onderbreekt niet het huidige lezen
role="alert" + aria-live="assertive": Voor kritieke fouten, onderbreekt onmiddellijk
aria-atomic="true": Kondigt volledige meldingsinhoud aan

Uitleg: Dynamische meldingen moeten worden aangekondigd aan schermlezers zonder focus te stelen. Gebruik role='status' voor info en role='alert' voor fouten.

Wat is ARIA?

🏷️ Rollen

📊 Statussen

🔧 Eigenschappen

⚠️ ARIA Gulden Regel

Formulieren met ARIA-attributen

❌ Slecht voorbeeld

Formulier zonder ARIA

✅ Goed voorbeeld

Formulier met ARIA

Gebruikte ARIA-attributen:

Toegankelijke accordeon

❌ Slecht voorbeeld

Zonder ARIA-attributen

✅ Goed voorbeeld

Met juiste ARIA

Tabindex en toetsenbordnavigatie

✅ tabindex="0"

⚠️ tabindex="-1"

❌ tabindex > 0

📋 Tabindex best practices

🎯 Interactieve voorbeelden

✅ Focusbare elementen

❌ Niet-focusbare elementen

💡 Testtips

Toegankelijk dropdown-menu

❌ Slecht voorbeeld

Menu zonder ARIA

✅ Goed voorbeeld

Menu met ARIA

Toegankelijke afbeeldingengalerij

❌ Slecht voorbeeld

Toegankelijke afbeeldingengalerij

✅ Goed voorbeeld

Toegankelijke afbeeldingengalerij

Toegankelijke sorteerbare tabel

❌ Slecht voorbeeld

✅ Goed voorbeeld

Dynamische aria-live regio's

❌ Slecht voorbeeld

Zonder aria-live

✅ Goed voorbeeld

Met geschikte aria-live

Toegankelijke icoonknoppen

❌ Slecht voorbeeld

Knoppen zonder beschrijving

Problemen:

✅ Goed voorbeeld

Toegankelijke knoppen

1. Met aria-label

2. Met zichtbare tekst

3. Met visueel verborgen tekst

Best practices:

Combobox / Zoeken met suggesties

❌ Slecht voorbeeld

Zonder ARIA of toetsenbordnavigatie

✅ Goed voorbeeld

Met ARIA en toetsenbordnavigatie

Toast-meldingen (Live Regions)

❌ Slecht voorbeeld

Zonder aria-live

✅ Goed voorbeeld

Met geschikte aria-live

Verschillen:

Slecht voorbeeld

Goed voorbeeld

Slecht voorbeeld

Goed voorbeeld

Slecht voorbeeld

Goed voorbeeld

Slecht voorbeeld

Goed voorbeeld

Slecht voorbeeld

Goed voorbeeld

Slecht voorbeeld

Goed voorbeeld

Slecht voorbeeld

Goed voorbeeld

Slecht voorbeeld

Goed voorbeeld

Slecht voorbeeld

Goed voorbeeld