Is je AI-design toegankelijk?

Toegankelijk betekent dat iemand met slecht zicht, zonder muis of met een schermlezer je site kan gebruiken. Een AI-design gaat daarop op vaste plekken mis, en de preview verraadt niets. Hieronder de vier plekken die we het vaakst tegenkomen, per plek een test die je zelf doet en de reparatie in code. Of je wettelijk toegankelijk moet zijn, is een andere vraag; daarover staat onderaan één alinea.

Herken je dit?

AI ontwerpt voor de screenshot

Een AI-designtool wordt beoordeeld op hoe het resultaat eruitziet in de preview. Lichtgrijze tekst oogt rustig, dus die kiest hij graag. Een focusrand oogt rommelig, dus haalt hij hem weg met outline: none. Een menu dat opent bij hover werkt prima met een muis, en met een muis wordt de preview bekeken. En alt-teksten schrijft niemand op voor een screenshot, dus vult de tool de bestandsnaam in.

Niemand tabt door een preview. Daarom zie je deze fouten pas als iemand de site echt gebruikt.

Zo test en repareer je het

1. Contrast

WCAG 2.2 vraagt een contrast van minimaal 4,5:1 voor gewone tekst en 3:1 voor grote tekst: vanaf ongeveer 24 pixels, of 18,5 pixels vet. Dat geldt ook voor de voorbeeldtekst in een invoerveld. Knoppen, randen van invoervelden en focusranden moeten 3:1 halen tegen hun achtergrond.

Meten doe je in Chrome. Klik met rechts op de tekst, kies Inspecteren en klik in het stijlenpaneel op het kleurvakje naast color. Je ziet het contrast meteen, met een vinkje of een kruis. Voor losse kleurparen werkt de contrastchecker van WebAIM.

/* voor: 2,5:1 op wit, te licht voor lopende tekst */
.intro { color: #9CA3AF; }   /* Tailwind: text-gray-400 */

/* na: 7,6:1 op wit */
.intro { color: #4B5563; }   /* Tailwind: text-gray-600 */

Tekst over een foto meet je op de lichtste plek achter de tekst, en op verschillende schermbreedtes. Haalt hij het niet, leg dan een donker vlak achter de tekst in plaats van de tekst een schaduw te geven.

2. Een zichtbare focus

Zoek in de code waar de focusrand wordt weggehaald.

grep -rnE 'outline:\s*(none|0)|focus:outline-none' src/

Haal die regels weg en geef de focus een eigen stijl. Met :focus-visible zie je hem alleen bij het toetsenbord, niet bij elke muisklik.

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* een vaste kopbalk mag het element met focus niet afdekken */
html {
  scroll-padding-top: 5rem;
}

Die tweede regel hoort bij een criterium dat in WCAG 2.2 nieuw is: een element met focus mag niet helemaal verdwijnen onder een vaste kopbalk of een cookiemelding. Zet de waarde op de hoogte van je kopbalk.

3. Het toetsenbord

Leg je muis weg en druk op Tab tot je onderaan de pagina bent. Kom je bij elke link en elke knop, in een logische volgorde? Gaat het menu open met Enter, en dicht met Escape?

Een menu dat alleen op hover werkt, krijgt een echte knop die opent bij een klik of een tik, met aria-expanded, zodat een schermlezer weet of het menu open is. Die knop staat uitgewerkt in AI-design kapot op mobiel, want op een telefoon is het hetzelfde probleem. Voor het toetsenbord komt er één ding bij: Escape sluit het menu en zet de focus terug op de knop, zodat niemand halverwege de pagina verdwaalt.

document.addEventListener('keydown', (e) => {
  if (e.key !== 'Escape') return;
  const knop = document.querySelector('button[aria-expanded="true"]');
  if (!knop) return;
  knop.setAttribute('aria-expanded', 'false');
  document.getElementById(knop.getAttribute('aria-controls')).hidden = true;
  knop.focus();
});

Een div met een klikfunctie vervang je door een button: die is vanzelf met het toetsenbord te bedienen. Maak klikbare elementen minimaal 24 bij 24 pixels, de ondergrens die WCAG 2.2 op niveau AA stelt.

4. Alt-teksten en namen

Een afbeelding die iets vertelt, krijgt een alt-tekst die zegt wat erop staat. Een afbeelding die alleen decoratie is, krijgt een lege alt, zodat een schermlezer hem overslaat. Een knop met alleen een icoon krijgt een naam.

<!-- voor -->
<img src="hero-1.png" alt="hero-1.png">
<button><svg>…</svg></button>
<input type="email" placeholder="E-mailadres">

<!-- na -->
<img src="hero-1.png" alt="Monteur plaatst een warmtepomp tegen de gevel van een rijtjeshuis">
<img src="golf.svg" alt="">
<button aria-label="Menu openen"><svg aria-hidden="true">…</svg></button>
<label for="email">E-mailadres</label>
<input id="email" type="email" autocomplete="email">

Geef je AI-tool deze regels mee, dan gaat het bij de volgende generatie vaker goed. Zet ze in je prompt, of in een DESIGN.md voor je AI-tools.

Houd je aan WCAG 2.2 niveau AA.
Tekstcontrast minimaal 4,5:1, grote tekst 3:1. Geen lichtgrijze lopende tekst.
Haal de focusrand nooit weg; gebruik :focus-visible met een rand van 3px.
Elk menu werkt met Tab, Enter en Escape. Gebruik button voor alles wat klikbaar is en geen link is.
Elke afbeelding krijgt een alt-tekst die zegt wat erop staat, of alt="" als hij decoratie is.
Elk invoerveld heeft een zichtbaar label.

Veelgemaakte fouten

Wanneer je hulp nodig hebt

Of je wettelijk toegankelijk moet zijn, en wat de European Accessibility Act van je bedrijf vraagt, lees je op website toegankelijk maken. Dat is uitleg, geen juridisch advies: laat de vraag of de wet voor jou geldt beoordelen door een jurist.

De technische kant pakken we op bij AI-design laten verbeteren: contrast, focus, toetsenbord en alt-teksten, getest en gerepareerd. Moet je ontwerp nog een website worden, dan zitten deze regels er bij AI-design omzetten naar een echte website vanaf het begin in. Alle gidsen staan in het overzicht van AI-design.