# Accessibility

Websites die iedereen kan gebruiken, met muis, toetsenbord of schermlezer

Multimedia & Creatieve Technologie · 2.1 Web production · Les 3 · versie 1.1.0 · 2026-09-29

Tags: accessibility, html

Slides: <https://slides.mctantwerp.be/nl/web-production/03-a11y>

<!-- slide 2 -->

## Agenda

1. Wat en waarom
2. Voor wie
3. Basics
4. WAI-ARIA
5. WCAG
6. Tools

<!-- slide 3 -->

## 1. Wat en waarom

<!-- slide 4 -->

**Wat betekent accessibility voor jullie?**

<!-- slide 5 -->

**a11y**

Websites en webapps die iedereen kan waarnemen, begrijpen, navigeren en gebruiken, ongeacht hun beperking of situatie.

<!-- slide 6 -->

### a11y

a11y

Een a, een y en elf letters ertussen. Scheelt typwerk.

<!-- slide 7 -->

### Waarom

- **Ethisch**: Iedereen verdient dezelfde kans om het internet te gebruiken.
- **Wettelijk**: De European Accessibility Act geldt sinds 28 juni 2025.
- **Meer bezoekers**: Meer mensen kunnen je site gebruiken, en meestal helpt het ook je SEO.
- **Gebruiksvriendelijker**: Toegankelijke sites zijn voor iedereen makkelijker, en dat merk je aan je klanten.

<!-- slide 8 -->

## 2. Voor wie

<!-- slide 9 -->

**Wat denken jullie?**

<!-- slide 10 -->

### Visuele beperking

- Blindheid
- Kleurenblindheid
- Slechtziendheid
- Lichtgevoeligheid
- Omgeving: fel zonlicht, een donkere kamer
- Omstandigheden: tijdens het rijden, werken of sporten

<!-- slide 11 -->

### Auditieve beperking

- Doofheid
- Slechthorendheid
- Tijdelijk gehoorverlies
- Een muts of koptelefoon op
- Omgeving: achtergrondlawaai, een open kantoor

<!-- slide 12 -->

### Fysieke beperking

- Geen of beperkte functie van hand of arm
- Weinig kracht of uithoudingsvermogen
- Beperkte mobiliteit
- Omgeving: tijdens het rijden, sporten of koken
- Omstandigheden: maar één hand vrij

<!-- slide 13 -->

### Cognitieve beperking

- Dyslexie, dyscalculie, dysgrafie
- AD(H)D
- Autismespectrumstoornis
- Verstandelijke beperking
- Weinig ervaring met technologie: betalen met een QR-code, 2FA, swipe gestures

<!-- slide 14 -->

### Wie

- Permanent: blindheid, doofheid, een amputatie, tremor
- Tijdelijk: een gebroken arm, tijdelijk gehoorverlies, handschoenen
- Omgeving: veel lawaai, slecht licht, trage hardware, heel koud of warm
- Omstandigheden: tijdens het sporten of koken, weinig bereik, een drankje in je hand op een feestje
- Iedereen: mensen die enkel met muis of enkel met toetsenbord werken, touchscreens op desktop

<!-- slide 15 -->

## 3. Basics

<!-- slide 16 -->

**Waar denken jullie aan?**

<!-- slide 17 -->

### Landmarks

HTML tags die een pagina opdelen in gebieden met elk hun eigen doel.

- Schermlezers gebruiken ze om snel door een pagina te springen
- SEO crawlers gebruiken ze als context om je pagina te begrijpen
- Developers krijgen er een duidelijke structuur mee

<!-- slide 18 -->

### Verschillende landmarks

- `<header>`: de kop van de pagina, vaak met logo en navigatie
- `<nav>`: een blok met navigatielinks
- `<main>`: de hoofdinhoud, maar één per pagina
- `<footer>`: copyright, legal links, contactinfo
- `<aside>`: inhoud die er zijdelings mee te maken heeft, zoals related articles of advertenties
- `<section>` en `<article>`: pas een landmark als ze een naam krijgen via een heading of aria-label

<!-- slide 19 -->

### HTML structuur

#### Koppen

- Logische volgorde: h1, h2, h3
- Eén `<h1>` met het hoofdonderwerp

#### Tekst

- `<p> <blockquote> <abbr>`
- `<strong> <em> <small> <del>`
- `<dl> <dt> <dd>`

#### Structuur

- `<ul> <ol> <table>`
- `<time> <address>`
- `<details> <dialog>`

<!-- slide 20 -->

### HTML structuur

*[CodePen van Eric Rasch](https://codepen.io/ericrasch/pen/jOdGeG)*

<!-- slide 21 -->

### Taal en leesrichting

- Zet `lang` en `dir` op de `<html>` tag
- Schermlezers kiezen er de juiste stem en uitspraak mee
- Zoekmachines weten welke taal je pagina heeft
- Browsers kunnen een vertaling voorstellen

```html
<!DOCTYPE html>
<html dir="ltr" lang="nl">
```

<!-- slide 22 -->

### Alt-attribuut

- Beschrijft wat er op de `<img>` te zien is
- Schermlezers lezen het voor, crawlers gebruiken het om beelden te begrijpen
- Staat de afbeelding in een link of button? Beschrijf dan wat die doet
- Puur decoratief? Gebruik `alt=""`, dan slaat de schermlezer ze over

```html
<img
  src="https://kdg.be/images/afbeelding-1.jpg"
  alt="Zijaanzicht van een persoon die een smartphone
    bedient en een uitgeprint blad vasthoudt."
/>
```

![Zijaanzicht van een persoon die een smartphone bedient en een uitgeprint blad vasthoudt](https://slides.mctantwerp.be/decks/nl/web-production/03-a11y/alt-example.jpg)

<!-- slide 23 -->

### Een abstracte blob staat als decoratie naast je titel. Welke alt krijgt ze?

- A. alt="blob"
- B. alt="decoratieve afbeelding"
- C. alt=""
- D. Geen alt-attribuut

**Antwoord:** C. alt=""

Een lege alt zegt tegen de schermlezer dat hij de afbeelding mag overslaan. Laat je de alt helemaal weg, dan leest een schermlezer vaak de bestandsnaam voor.

<!-- slide 24 -->

**Een CSS background-image heeft geen alt**

Heeft de afbeelding betekenis voor de gebruiker, gebruik dan een `<img>`.

<!-- slide 25 -->

### Captions en controls

- Ondertitels voor mensen die niet kunnen luisteren, door een beperking of hun omgeving
- Voor wie de taal niet begrijpt
- Voor zoekmachines
- Voorzie minstens een mute knop, liefst alle controls
- Enkel audio? Voorzie een transcript

<!-- slide 26 -->

### Captions

```html
<video controls>
  <source src="https://kdg.be/video.mp4" type="video/mp4">
  <track default kind="captions" src="https://kdg.be/video.vtt" srclang="nl" label="Nederlands">
  <track kind="captions" src="https://kdg.be/video-fr.vtt" srclang="fr" label="Français">
  <track kind="captions" src="https://kdg.be/video-en.vtt" srclang="en" label="English">
</video>
```

<!-- slide 27 -->

### Input types

*De browser regelt gedrag dat je anders zelf moet programmeren*

- **`checkbox / radio`**: Meerdere keuzes of één keuze
- **`password`**: De input wordt verborgen
- **`search`**: Zoekveld, met een wisknop in sommige browsers

<!-- slide 28 -->

### Input types

*Het juiste keyboard op mobile*

- **`email`**: Keyboard met @ en validatie
- **`tel`**: Numeriek keyboard
- **`number`**: Numeriek keyboard en pijltjes

<!-- slide 29 -->

### Input types

*Pickers en sliders*

- **`date`**: Date picker
- **`file`**: File picker, op mobile ook camera of microfoon
- **`range`**: Slider met een min en een max

<!-- slide 30 -->

### Labels

- Koppel elk label aan zijn input
- Een schermlezer leest dan het label voor als je in het veld komt
- `for` op het label = `id` van de input
- Klikken op het label zet de focus in het veld

```html
<label for="emailfield">E-mailadres</label>
<input
  type="email"
  id="emailfield"
  name="email"
  placeholder="name@company.com"
/>
```

<!-- slide 31 -->

### Formulieren

- Velden volgen logisch op elkaar
- Alles is bereikbaar met het toetsenbord
- Zo kort mogelijk
- Snelle, duidelijke feedback, zowel als het goed als fout is

<!-- slide 32 -->

### Buttons en links

#### `<button>`

- Acties op de pagina: submit, open, sluit, play
- Werkt met spatie en enter
- Ziet eruit als een knop
- Heeft een hover en focus state

#### `<a href>`

- Om te navigeren
- Schermlezers en crawlers zien het als navigatiepunt
- Werkt met enter
- Onderlijnd
- Heeft een hover en focus state

<!-- slide 33 -->

### Een knop opent een popup met de details van een product. Welke tag gebruik je?

- A. `<a href="#">`
- B. `<div onclick="open()">`
- C. `<button type="button">`
- D. `<span role="link">`

**Antwoord:** C. `<button type="button">`

Je blijft op dezelfde pagina, dus het is een actie en geen navigatie. Een button werkt meteen met enter en spatie, krijgt focus en de schermlezer zegt dat het een knop is.

<!-- slide 34 -->

**Alles wat interactief is, moet je met het toetsenbord kunnen bereiken en gebruiken.**

<!-- slide 35 -->

### Toetsenbord

#### Tab

- Springt tussen interactieve elementen
- In een logische volgorde
- Lange lijsten met links kan je overslaan
- Elk element toont zichtbaar focus

#### Pijltjes

- Navigeren met een schermlezer
- Door een carousel
- Scrollen

#### Andere

- Escape: sluiten of terug
- Enter en spatie: actie uitvoeren
- Keyboard shortcuts

<!-- slide 36 -->

### Opdracht: Muis aan de kant

*10 minuten, Alleen*

1. Kies een webshop of de site van je gemeente en leg je muis weg
2. Probeer met Tab, Enter, spatie en Escape iets in je winkelmandje te krijgen of een formulier te vinden
3. Zie je altijd waar de focus staat? Is er een skip link?
4. Noteer waar je vastloopt, we bespreken de ergste

<!-- slide 37 -->

### User preferences

Gebruikers stellen voorkeuren in op hun OS. Met CSS kan je daarop inspelen.

[Smashing Magazine over user choice](https://www.smashingmagazine.com/2023/08/css-accessibility-inclusion-user-choice/)

```css
@media (prefers-color-scheme: dark) {}
@media (prefers-reduced-motion: reduce) {}
@media (forced-colors: active) {}
@media (prefers-contrast: more) {}
@media (prefers-contrast: less) {}
@media (inverted-colors: inverted) {}
@media (prefers-reduced-transparency: reduce) {}
```

<!-- slide 38 -->

### Contrast

- Voorgrond en achtergrond hebben genoeg contrast om voor iedereen leesbaar te zijn
- Test het in de browser dev tools of met een Figma plugin
- Daar kan je ook kleurenblindheid simuleren

**[Color contrast checker](https://colorcontrast.app/)**

<!-- slide 39 -->

### Grijze tekst #777777 op een witte achtergrond. Haalt die AA voor gewone tekst?

- A. Ja, ruim
- B. Net wel
- C. Net niet
- D. Nee, lang niet

**Antwoord:** C. Net niet

De ratio is 4.48:1, en AA vraagt 4.5:1 voor gewone tekst. Eén tintje donkerder (#767676) en het is in orde.

<!-- slide 40 -->

### Contrast checker

*Ratio's volgens WCAG 2*

<!-- slide 41 -->

## 4. WAI-ARIA

*Web Accessibility Initiative, Accessible Rich Internet Applications*

<!-- slide 42 -->

### ARIA

- **Roles**: Wat een element is
- **Properties**: Extra info over een element
- **States**: In welke toestand het nu zit

> [!WARNING]
> Kan het met een gewone HTML tag, gebruik dan die. Geen ARIA is beter dan foute ARIA.

<!-- slide 43 -->

### Roles

- Landmark roles zoals main, navigation, complementary. Gebruik liever de HTML tag
- Andere roles zoals banner, search, tablist
- Vertellen schermlezers, crawlers en de browser wat een element doet

```html
<!-- met een role -->
<div role="search">...</div>

<!-- beter: de HTML tag -->
<search>
  <form action="./search/">
    <label for="movie">Find a Movie</label>
    <input type="search" id="movie" name="q" />
    <button type="submit">Search</button>
  </form>
</search>
```

<!-- slide 44 -->

### aria-label

*Properties geven extra info en betekenis aan een element*

Een onzichtbaar label dat een schermlezer wel voorleest. Handig voor een knop met enkel een icoon.

```html
<button aria-label="Zoeken" class="button">
  <span class="button__icon"><svg>...</svg></span>
</button>
```

<!-- slide 45 -->

### Een knop met enkel een prullenbak-icoon. Wat leest een schermlezer voor?

- A. "Verwijderen"
- B. "Button"
- C. "Prullenbak"
- D. Niets, hij slaat de knop over

**Antwoord:** B. "Button"

Zonder tekst weet de schermlezer niet wat de knop doet, dus hoor je enkel "button". Met `aria-label="Verwijderen"` hoor je "Verwijderen, button".

<!-- slide 46 -->

### aria-labelledby

Zoals aria-label, maar je verwijst naar het id van een element waar het label al in staat.

```html
<nav aria-labelledby="navtitle">
  <h2 id="navtitle">Main navigation</h2>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>
```

<!-- slide 47 -->

### aria-describedby

Koppelt extra uitleg aan een element, zoals de regels voor een wachtwoord.

```html
<label for="password">Wachtwoord</label>
<input
  type="password"
  id="password"
  aria-describedby="passwordhelp"
/>
<span id="passwordhelp">Minstens 8 karakters.</span>
```

<!-- slide 48 -->

### aria-controls

Zegt welk element een knop bestuurt. Schermlezers doen er weinig mee, dus zie het als extra en niet als vervanging.

```html
<video id="videoplayer">
  <source
    src="https://www.kdg.be/movie1.mp4"
    type="video/mp4"
  />
</video>

<button aria-controls="videoplayer">
  Play video
</button>
<button aria-controls="videoplayer">
  Pause video
</button>
```

<!-- slide 49 -->

### aria-hidden

Verbergt een element voor schermlezers. Visueel blijft het gewoon staan.

```html
<div aria-hidden="true">
  Een schermlezer slaat deze tekst over.
</div>
```

<!-- slide 50 -->

### aria-live

Voor een element dat verandert terwijl je op de pagina bent: een chat, een loader, een nieuwsticker.

- off: de schermlezer zegt niets
- polite: wacht tot de gebruiker niets doet
- assertive: meldt het meteen

```html
<div aria-live="polite">
  Het is nu
  <time datetime="14:30:22">14:30:22</time>
</div>
```

<!-- slide 51 -->

### aria-expanded

Zegt of het gekoppelde element open of dicht staat. De tekst op de knop zegt dat best ook.

```html
<button aria-expanded="false" aria-controls="widget1">
  Show widget
</button>

<button aria-expanded="true" aria-controls="widget1">
  Hide widget
</button>
```

<!-- slide 52 -->

### aria-disabled

Het element is zichtbaar maar doet niets. Het `disabled` attribuut op een form element doet hetzelfde, en haalt het ook uit de tabvolgorde.

```html
<div role="button" aria-disabled="true" tabindex="-1">
  Edit
</div>
<button disabled>Edit</button>
```

<!-- slide 53 -->

### aria-required

Het veld is verplicht. Op een form element doet `required` hetzelfde, en dat is de betere keuze.

```html
<div id="tbLabel">Email Address *</div>
<div role="textbox" contenteditable
  aria-labelledby="tbLabel"
  aria-required="true"
  id="email1"></div>

<label for="firstname">Voornaam</label>
<input
  type="text"
  id="firstname"
  name="voornaam"
  required
/>
```

<!-- slide 54 -->

## 5. WCAG

*Web Content Accessibility Guidelines*

<!-- slide 55 -->

### Wat is WCAG

De standaard richtlijnen van het W3C voor toegankelijkheid op het web, ingedeeld in niveaus A, AA en AAA. Daarop test je een site, zowel tijdens het bouwen als achteraf door een externe partij.

De huidige versie is WCAG 2.2, sinds oktober 2023. Sinds 2025 is dat ook een ISO-standaard.

<!-- slide 56 -->

### European Accessibility Act

*Van kracht sinds 28 juni 2025*

- Geldt voor specifieke producten en diensten: e-commerce, banken, e-books, transport, telecom
- Niet voor elke commerciële site. De overheid valt onder een eigen richtlijn
- Micro-ondernemingen (minder dan 10 werknemers en max. € 2 miljoen omzet) krijgen in België uitstel tot 28 juni 2030
- De norm erachter (EN 301 549) verwijst vandaag naar WCAG 2.1 AA, de nieuwe versie naar WCAG 2.2 AA

<!-- slide 57 -->

### Voor wie geldt de European Accessibility Act?

- A. Voor elke website in de EU
- B. Voor webshops, banken, e-books en transport
- C. Enkel voor overheden
- D. Enkel voor bedrijven met meer dan 250 werknemers

**Antwoord:** B. Voor webshops, banken, e-books en transport

De EAA noemt specifieke producten en diensten. Overheden vallen onder de Web Accessibility Directive. Micro-ondernemingen die diensten leveren krijgen volgens de FOD Economie uitstel tot 28 juni 2030.

<!-- slide 58 -->

### Tekstalternatieven

- Alle content die geen tekst is, krijgt een tekstalternatief
- Elke `<img>` heeft een alt

<!-- slide 59 -->

### Tijdgebaseerde media

- Ondertitels bij opgenomen audio en video
- Ondertitels bij live audio
- Audiodescriptie bij opgenomen video

<!-- slide 60 -->

### Onderscheidbaar

- Genoeg contrast tussen kleuren die elkaar overlappen
- Tekst heeft minstens 4.5:1 contrast met de achtergrond, 3:1 voor grote tekst
- Tekst kan 200% groter zonder dat de site breekt
- Zo weinig mogelijk tekst in afbeeldingen

<!-- slide 61 -->

### Toetsenbord

- Alle content is bereikbaar met het toetsenbord
- Alle interactieve elementen werken met het toetsenbord
- De back button van je browser blijft werken

<!-- slide 62 -->

**Tijd**

Gebruikers krijgen genoeg tijd om alle content te lezen en te gebruiken.

<!-- slide 63 -->

**Triggers**

Vermijd flitsende content, of laat gebruikers die uitzetten. Start ze pas nadat de gebruiker gewaarschuwd is.

<!-- slide 64 -->

**Navigeerbaar**

Help gebruikers navigeren, content vinden en weten waar ze zijn.

<!-- slide 65 -->

### Invoer

- Je site werkt met verschillende invoer, zoals touch en spraak
- Labels bij invoervelden en een logische structuur
- Duidelijke highlight van het geselecteerde element

<!-- slide 66 -->

### Leesbaar en begrijpelijk

- Tekst is leesbaar en begrijpelijk voor zoveel mogelijk mensen
- Pagina’s zien er voorspelbaar uit en werken voorspelbaar

<!-- slide 67 -->

**Compatibel**

Werkt met de hulpmiddelen van vandaag en morgen, zoals assistieve technologie.

<!-- slide 68 -->

### WCAG in begrijpelijke taal

**[Vlaanderen.be: de WCAG-richtlijnen uitgelegd](https://www.vlaanderen.be/inter/toolbox-toegankelijke-steden-en-gemeenten/algemeen-bestuur-dienstverlening-en-communicatie/digitale-toegankelijkheid/de-richtlijnen-voor-toegankelijkheid-van-webcontent-wcag-in-begrijpelijke-taal)**

<!-- slide 69 -->

## 6. Tools

<!-- slide 70 -->

### Testen

- **Inspector**: Accessibility tree in je dev tools
- **Lighthouse**: Accessibility audit in Chrome
- **[HTML validator](https://validator.w3.org/)**
- **[a11y checklist](https://www.a11yproject.com/checklist/)**
- **[axe DevTools](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd)**
- **[WAVE](https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh)**

<!-- slide 71 -->

### Schermlezers

- **[VoiceOver](https://support.apple.com/guide/voiceover/welcome/mac)**: macOS en iOS
- **[NVDA](https://www.nvaccess.org/)**: Windows, gratis
- **[JAWS](https://www.freedomscientific.com/products/software/jaws/)**: Windows

<!-- slide 72 -->

### Opdracht: Luister naar een website

*10 minuten, Per 2*

1. Zet een schermlezer aan: VoiceOver met <kbd>Cmd</kbd> + <kbd>F5</kbd> op een Mac, of installeer NVDA op Windows
2. Doe je ogen dicht en laat je buur je door een pagina van kdg.be sturen
3. Spring via de koppen en de landmarks. Wat hoor je, wat mis je?

<!-- slide 73 -->

### Thuisopdracht: Audit twee lokale websites

*Alleen*

1. Zoek twee kleine websites: een lokale zaak, je sportclub, een jeugdbeweging
2. SEO: check de title, meta description, og tags, url-structuur, robots.txt en sitemap
3. a11y: laat Lighthouse, axe en WAVE los en doe een rondje met enkel je toetsenbord
4. Noteer per site de drie grootste problemen en hoe je ze zou oplossen

## Begrippen

- **a11y**: Accessibility. Websites en apps die iedereen kan waarnemen, begrijpen, navigeren en gebruiken, ongeacht beperking of situatie. Een a, een y en elf letters ertussen. (slide 6)
- **Landmarks**: HTML tags die een pagina opdelen in gebieden met elk hun eigen doel: header, nav, main, footer, aside. Een schermlezer springt ermee door de pagina. (slide 17)
- **lang**: Het attribuut op de <html> tag met de taal van de pagina. De schermlezer kiest er de juiste stem mee, de browser stelt een vertaling voor. dir zet de leesrichting. (slide 21)
- **Alt-attribuut**: Beschrijft wat er op een afbeelding te zien is, voor schermlezers en zoekmachines. Puur decoratief? Dan alt="", zodat de schermlezer ze overslaat. (slide 22)
- **Captions**: Ondertitels bij een video, via een <track>. Voor wie niet kan luisteren, wie de taal niet begrijpt, en voor zoekmachines. Enkel audio krijgt een transcript. (slide 25)
- **Input type**: Het type van een <input>, zoals email, tel, date of file. De browser regelt dan het juiste keyboard op mobile, de validatie en de pickers. (slide 27)
- **Label**: De tekst bij een invoerveld, gekoppeld met for op het label en id op de input. De schermlezer leest het voor, een klik erop zet de focus in het veld. (slide 30)
- **Focus**: Het element dat nu je toetsenbord krijgt. Tab springt naar het volgende, in een logische volgorde, en je ziet altijd waar de focus staat. (slide 35)
- **User preferences**: Voorkeuren die iemand op het OS instelt, zoals dark mode of minder beweging. In CSS lees je ze uit met media queries als prefers-reduced-motion. (slide 37)
- **Contrast**: Het verschil in helderheid tussen tekst en achtergrond, uitgedrukt als ratio. WCAG AA vraagt 4.5:1 voor gewone tekst en 3:1 voor grote tekst. (slide 38)
- **WAI-ARIA**: Attributen die een schermlezer vertellen wat een element is (roles), wat erbij hoort (properties) en in welke toestand het zit (states). Kan het met een gewone HTML tag, gebruik dan die. (slide 42)
- **Role**: Zegt wat een element is, zoals search, banner of tablist. Een HTML tag met dezelfde betekenis is bijna altijd de betere keuze. (slide 43)
- **aria-label**: Een onzichtbaar label dat de schermlezer wel voorleest. Voor een knop met enkel een icoon. (slide 44)
- **aria-labelledby**: Zoals aria-label, maar het verwijst naar het id van een element waar het label al in staat. (slide 46)
- **aria-describedby**: Koppelt extra uitleg aan een element, zoals de regels voor een wachtwoord. (slide 47)
- **aria-controls**: Zegt welk element een knop bestuurt. Schermlezers doen er weinig mee, dus het is extra en geen vervanging. (slide 48)
- **aria-hidden**: Verbergt een element voor schermlezers. Visueel blijft het gewoon staan. (slide 49)
- **aria-live**: Voor een element dat verandert terwijl je op de pagina bent, zoals een chat of een loader. polite wacht tot de gebruiker niets doet, assertive meldt het meteen. (slide 50)
- **aria-expanded**: Zegt of het gekoppelde element open of dicht staat. De tekst op de knop zegt dat best ook. (slide 51)
- **aria-disabled**: Het element is zichtbaar maar doet niets. Op een form element doet disabled hetzelfde, en haalt het ook uit de tabvolgorde. (slide 52)
- **aria-required**: Het veld is verplicht. Op een form element is required de betere keuze. (slide 53)
- **WCAG**: Web Content Accessibility Guidelines. De richtlijnen van het W3C voor toegankelijkheid, in de niveaus A, AA en AAA. De huidige versie is 2.2. (slide 55)
- **European Accessibility Act**: Europese wet, van kracht sinds 28 juni 2025, die toegankelijkheid verplicht voor onder meer webshops, banken, e-books en transport. Niet voor elke website. (slide 56)
- **Accessibility tree**: Wat de browser aan een schermlezer doorgeeft: elk element met zijn rol, naam en toestand. Je ziet hem in de inspector van je dev tools. (slide 70)
- **Lighthouse**: De audit in de dev tools van Chrome, met een score voor onder meer accessibility en SEO. Vindt veel, maar niet alles: test ook zelf met je toetsenbord. (slide 70)
- **Schermlezer**: Software die een pagina voorleest en je laat navigeren via koppen, links en landmarks. VoiceOver op macOS en iOS, NVDA en JAWS op Windows. (slide 71)

## Links en bronnen

### In de presentatie

- [CodePen van Eric Rasch](https://codepen.io/ericrasch/pen/jOdGeG) (slide 20)
- [Smashing Magazine over user choice](https://www.smashingmagazine.com/2023/08/css-accessibility-inclusion-user-choice/) (slide 37)
- [Color contrast checker](https://colorcontrast.app/) (slide 38)
- [Vlaanderen.be: de WCAG-richtlijnen uitgelegd](https://www.vlaanderen.be/inter/toolbox-toegankelijke-steden-en-gemeenten/algemeen-bestuur-dienstverlening-en-communicatie/digitale-toegankelijkheid/de-richtlijnen-voor-toegankelijkheid-van-webcontent-wcag-in-begrijpelijke-taal) (slide 68)
- [HTML validator](https://validator.w3.org/) (slide 70)
- [a11y checklist](https://www.a11yproject.com/checklist/) (slide 70)
- [axe DevTools](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) (slide 70)
- [WAVE](https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh) (slide 70)
- [VoiceOver](https://support.apple.com/guide/voiceover/welcome/mac) (slide 71)
- [NVDA](https://www.nvaccess.org/) (slide 71)
- [JAWS](https://www.freedomscientific.com/products/software/jaws/) (slide 71)