Accessibility: testing

Als web developer is het cruciaal om te begrijpen hoe screen readers werken. Het geeft je inzicht in:

• Hoe blinde en slechtziende gebruikers je website ervaren
• Of je HTML semantiek correct is
• Welke informatie toegankelijk is en welke niet
• Hoe navigatie en interacties werken zonder visuele cues

VoiceOver (Mac) - Gratis Ingebouwd

VoiceOver Activeren

Sneltoets: Cmd + F5
Of: Systeemvoorkeuren → Toegankelijkheid → VoiceOver → VoiceOver gebruiken

Basis VoiceOver Commando's

Navigatie

Ctrl + Option + →     Ga naar volgend element
Ctrl + Option + ←     Ga naar vorig element
Ctrl + Option + ↓     Interacteer met element (bijv. enter group/menu)
Ctrl + Option + ↑     Stop interactie met element
Ctrl + Option + Space Activeer element (klik/enter)
Ctrl + Option + A     Begin lezen vanaf huidige positie
Ctrl + Option + S     Stop met lezen

Web Navigatie (VoiceOver Web Rotor)

Ctrl + Option + U     Open Web Rotor menu
In Web Rotor:
- Pijltjestoetsen     Navigeer door categorieën
- Enter               Ga naar geselecteerd element
- Esc                 Sluit Web Rotor

Web Rotor Categorieën:
- Headings            Alle headings (h1, h2, etc.)
- Links               Alle links op de pagina
- Form Controls       Alle form elementen
- Tables              Alle tabellen
- Landmarks           ARIA landmarks (nav, main, etc.)
- Images              Alle afbeeldingen

Snelle Navigatie (Quick Nav)

Activeren: Ctrl + Option + Q

Met Quick Nav aan (pijltjes alleen):
←→                    Vorig/volgend element
↑↓                    Vorig/volgende lijn

Specifieke elementen (alleen met Quick Nav):
H                     Volgend heading
Shift + H             Vorig heading
L                     Volgend link
Shift + L             Vorig link
B                     Volgend button
Shift + B             Vorig button
F                     Volgend form element
Shift + F             Vorig form element
T                     Volgende tabel
Shift + T             Vorige tabel

NVDA (Windows) - Gratis Download

NVDA Installeren

1. Download van: https://www.nvaccess.org/download/
2. Installeer de software
3. NVDA start automatisch na installatie

Basis NVDA Commando's

Navigatie

↓                     Volgend element
↑                     Vorig element
Tab                   Volgend focusbaar element
Shift + Tab           Vorig focusbaar element
Enter                 Activeer element
Ctrl                  Stop met lezen
NVDA + ↓              Begin lezen (Say All)
NVDA + ↑              Huidige regel lezen

Browse Mode Navigatie

NVDA toets = Insert (of Caps Lock indien ingesteld)

Specifieke elementen in Browse Mode:
H                     Volgend heading
Shift + H             Vorig heading
1-6                   Heading level 1-6
Shift + 1-6           Vorig heading level 1-6
K                     Volgend link
Shift + K             Vorig link
B                     Volgend button
Shift + B             Vorig button
F                     Volgend form field
Shift + F             Vorig form field
T                     Volgende tabel
Shift + T             Vorige tabel
E                     Volgend edit field
Shift + E             Vorig edit field
L                     Volgende lijst
Shift + L             Vorige lijst
I                     Volgend list item
Shift + I             Vorig list item

Elements List (vergelijkbaar met Web Rotor)

NVDA + F7             Open Elements List

In Elements List:
- Tab                 Schakel tussen types (Links, Headings, Form fields, etc.)
- ↑↓                  Navigeer door elementen
- Enter               Ga naar element
- Esc                 Sluit Elements List
- F                   Filter/zoek