Webinar 4: Technische vereiste van de EAA: WCAG 2.1 en meer

Wat is de WCAG?

De WCAG is een erkende standaard op internationaal vlak voor digitale toegankelijkheid. Deze zijn ontwikkeld door het World Wide Web Consortium (W3C). De WCAG bestaat uit:

• 4 hoofdprincipes

• 13 richtlijnen

• 78 succescriteria (verdeeld over drie niveaus: A, AA en AAA)

De EAA vereist dus dat je moet voldoen aan WCAG 2.1 AA.

De vier principes van de WCAG

Waarneembaar (Perceivable)

Informatie en componenten van de gebruikersinterface moeten op zo'n manier worden gepresenteerd dat gebruikers ze kunnen waarnemen. Dit betekent alternatieven bieden voor niet-tekstuele content, zoals afbeeldingen en video's.

Bedienbaar (Operable)

Componenten van de gebruikersinterface en navigatie moeten bedienbaar zijn.Dit betekent dat alles moet werken met verschillende invoermethoden, niet alleen met een muis.

Begrijpelijk (Understandable)

Informatie en de bediening van de gebruikersinterface moeten begrijpelijk zijn. Dit betekent duidelijke taal, voorspelbare navigatie en goede foutafhandeling.

Robuust (Robust)

Content moet robuust genoeg zijn om betrouwbaar geïnterpreteerd te kunnen worden door verschillende user agents, inclusief hulptechnologieën. Dit betekent goed gestructureerde code die voldoet aan webstandaarden.

De EAA en WCAG 2.1 AA?

De EAA verwijst naar WCAG 2.1 niveau AA. Dit is de technische standaard voor:

• Websites.

• Mobiele apps.

• Elektronische documenten (pdf's).

• Zelfbedieningsterminals.

Maar let op! De EAA is veel breder van alleen webtoegankelijkheid. Voor sommige producten en diensten gelden er aanvullende eisen die niet volledig zijn gedekt door de WCAG. Dit is waar je de WCAG in de EAA kan terugzien.

De meest voorkomende toegankelijkheidsproblemen

1. Ontbrekende alternatieve teksten.

2. Onvoldoende kleurcontrast.

3. Niet-toegankelijke formulieren (zoals ontbrekende labels, onduidelijke foutmeldingen of geen instructies).

4. Toetsenbordtoegankelijkheid (geen focusindicator of toetsenbordvallen).

5. Ontbrekende pagina-structuur (geen semantische HTML h1-h6, nav, main).

6. Niet-responsive design.

7. Dynamische content zonder notificaties (content die veranderd zonder dat screenreaders dit opmerken)

8. Complexe tabellen zonder juiste markup.

9. Tijdslimieten zonder controle.

10. Niet-toegankelijke PDF-documenten.

Voorbeelden van technische oplossingen

Wat zijn praktische voorbeelden van technische oplossingen voor veelvoorkomende toegankelijkheidsproblemen?

Toegankelijke navigatie

Niet-toegankelijke code:

<div class="nav">
  <div class="nav-item" onclick="goToPage('home')">Home</div>
  <div class="nav-item" onclick="goToPage('about')">Over ons</div>
  <div class="nav-item" onclick="goToPage('contact')">Contact</div>
</div>

Toegankelijke code:

<nav aria-label="Hoofdnavigatie">
  <ul class="nav">
    <li>
      <a href="/home" class="nav-item">Home</a>
    </li>
    <li>
      <a href="/about" class="nav-item">Over ons</a>
    </li>
    <li>
      <a href="/contact" class="nav-item">Contact</a>
    </li>
  </ul>
</nav>

Verbeteringen:

• Gebruik van semantische <nav> en <ul>/<li> elementen.

• Echte links in plaats van div's met onclick.

• Aria-label voor screenreadergebruikers.

Toegankelijk formulier

Niet-toegankelijke code:

<div class="form-group"> 
  Naam: <input type="text" id="name">
  <span class="error" style="color: red;"></span>
</div>

Toegankelijke code:

<div class="form-group">
  <label for="name">Naam:</label>
  <input type="text" id="name" aria-describedby="name-error">
  <span id="name-error" class="error" role="alert"></span>
</div>

Verbeteringen:

• Gebruik van <label> gekoppeld aan input via 'for' attribuut.

• Aria-describedby voor koppeling met foutmelding.

• Role="alert" voor dynamische foutmeldingen.

Aan de slag met de WCAG en EAA?

Download onze WCAG 2.2 checklist en ga direct aan de slag met het implementeren van de richtlijnen!