Toegankelijkheid (a11y) zorgt ervoor dat websites bruikbaar zijn voor iedereen, inclusief mensen met beperkingen. Deze cheatsheet geeft de belangrijkste richtlijnen en tips om je website toegankelijk te maken.
Structuur & semantiek
| Richtlijn | Voorbeeld |
|---|
| Gebruik semantische HTML | <header> <main> <footer> i.p.v. alleen <div> |
| Koppen hiërarchisch gebruiken | <h1> voor paginatitel, daarna <h2> en <h3> |
| Gebruik lijsten voor opsommingen | <ul><li>Item</li></ul> |
Gebruik <label> voor formulieren | <label for="email">E-mail</label> |
Gebruik <button> i.p.v. clickable <div> | <button>Verstuur</button> |
Tekst & contrast
| Richtlijn | Voorbeeld |
|---|
| Voldoende contrast | Tekst moet contrastverhouding 4.5:1 hebben |
| Geen tekst in afbeeldingen | Gebruik echte tekst, niet ingebakken in een plaatje |
| Altijd schaalbare lettergrootte | font-size: 1rem; i.p.v. vaste pixels |
Afbeeldingen & media
| Richtlijn | Voorbeeld |
|---|
| Alt-teksten | <img src="kat.jpg" alt="Zwarte kat op vensterbank"> |
| Decoratieve afbeeldingen | <img src="lijn.png" alt=""> (lege alt) |
| Ondertiteling bij video’s | <track src="ondertitels.vtt" kind="subtitles" srclang="nl"> |
| Transcript voor audio | Bied een tekstversie aan van podcasts of audio |
Formulieren
| Richtlijn | Voorbeeld |
|---|
| Labels koppelen aan inputs | <label for="naam">Naam</label><input id="naam"> |
| Foutmeldingen duidelijk maken | <span id="error">Vul uw naam in</span> + ARIA koppeling |
| Tabvolgorde logisch | Gebruik natuurlijke volgorde, niet corrigeren met tabindex > 0 |
Keyboard-navigatie
| Richtlijn | Voorbeeld |
|---|
| Focus zichtbaar maken | :focus { outline: 2px solid #00bf63; } |
| Skip links toevoegen | <a href="#main" class="skiplink">Ga naar inhoud</a> |
Gebruik geen outline: none; zonder alternatief | Zorg dat focus altijd zichtbaar is |
ARIA (Accessible Rich Internet Applications)
| Richtlijn | Voorbeeld |
|---|
| Gebruik ARIA alleen als HTML niet volstaat | <button aria-pressed="true">Toggle</button> |
| Gebruik landmarks | <main role="main">, <nav role="navigation"> |
| Beschrijf knoppen en iconen | <button aria-label="Zoeken"><svg>...</svg></button> |
Overige best practices
| Richtlijn | Voorbeeld |
|---|
| Responsive design | Geschikt voor schermlezers én kleine schermen |
| Formulieren valideren client + server side | Zorg dat foutmeldingen altijd duidelijk zijn |
| Gebruik duidelijke taal | Vermijd jargon en te lange zinnen |
| Test met screenreaders | NVDA, JAWS, VoiceOver |
| Test met toetsenbord | Kun je alles bereiken zonder muis? |
