CONTENT MANAGEMENT
A11y
Inclusief ontwerpen en bouwen
Accessibility
Belang van toegankelijkheid
a11y
-
= afkorting van accessibility (11 letters tussen a en y).
-
Integraal onderdeel van UX
-
Niet optioneel: wettelijk verplicht voor publieke instellingen om de WCAG-richtlijnen te volgen
WCAG
= Web Content Accessibility Guidelines (WCAG 2.2)
4 Principes:
- Perceivable: gebruikers kunnen content waarnemen
- Operable: alles werkt via toetsenbord & muis
- Understandable: duidelijke & voorspelbare interacties
- Robust: werkt met verschillende browsers & screenreaders
Niveaus: A, AA, AAA
🔗 WCAG
🤓 Huiswerk
Volg de Webflow Accessibility Course:
university.webflow.com/courses/web-accessibility
- 8 video's
- Ongeveer 1 uur in totaal
A11y in design
The basics
-
Gebruikt echte content, geen lorem ipsum
-
Denk aan design principles
-
Testing, testing, testing
Figma Mirror
Typografie
💬 Fontkeuze
Gebruik geen te dunne of decoratieve fonts voor teksten
Typografie
𝌋 Alignment
Gebruik een logische uitlijning voor beste leesbaarheid. Voorbeeld voor Nederlandse inhoud: Links uitlijnen
❌
Typografie
📄 All caps
Vermijden voor langere tekst
🔗 Underlines
Enkel gebruiken voor links (anchor tags)
😎 Contrast
Minimaal 4.5:1 (body), 3:1 (grote tekst)
Tip: gebruikt een Contrast checker
Typografie
📏 Line length
- Mik op max 45–75 tekens per regel
- Laat teksten geen volledige paginabreedte innemen!
Tip: ch-unit in Webflow
❌
Typografie
📐 Line height
Standaard voor web: 1,4 à 1,6 * font size
❌
Teks & afbeeldingen
Vermijd tekst in afbeeldingen
-
Als het niet anders kan: vermeld in de alt text
Tekst op een afbeelding
-
Gebruik een semi-transparante overlay
-
Gebruik voldoende contrast
Beschrijvende link labels
❌ Slecht: klik hier, meer info, lees nu
✅ Goed: Bekijk onze artiest van de week
Voiceover example at 4'50
States
Hover = visuele feedback met muis
Focus (keyboard) = zichtbaar bij toetsenbordnavigatie (Tab)
States
Gebruik niet enkel kleur om een bepaalde state aan te duiden
A11y in Webflow
Audit panel
-
Ontbrekende alt text
-
Foute heading-structuur
<h1> → <h2> → <h3> → ... -
Dubbele ID’s
-
Links zonder label
Vision preview
Simuleert visuele beperkingen
Color contrast
Checkt leesbaarheid van tekst op (solid) backgrounds
Webflow A11y Checklist
Focust op:
- Alt text
- Logische heading-structuur
- Labels voor formulieren
- Beschrijvende links
- Focus states
- Leesbare line-lengths (ch)
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee
inventor of the World Wide Web
Toegankelijkheid is geen extra stap,
het is goed design.
- ChatGPT