# Toegankelijke Webpagina's Maken ![Alles Over Toegankelijkheid](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.nl.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title Your Accessibility Learning Adventure section Foundation Understanding Users: 5: You Testing Tools: 4: You POUR Principles: 5: You section Build Skills Semantic HTML: 4: You Visual Design: 5: You ARIA Techniques: 4: You section Master Practice Keyboard Navigation: 5: You Form Accessibility: 4: You Real-world Testing: 5: You ``` ## Quiz Voorafgaand Aan De Les [Quiz voorafgaand aan de les](https://ff-quizzes.netlify.app/web/) > De kracht van het web ligt in zijn universaliteit. Toegang voor iedereen, ongeacht een beperking, is een essentieel aspect. > > \- Sir Timothy Berners-Lee, W3C-directeur en uitvinder van het World Wide Web Hier is iets dat je misschien zal verrassen: wanneer je toegankelijke websites bouwt, help je niet alleen mensen met een beperking—je maakt het web eigenlijk beter voor iedereen! Heb je ooit die verlaagde stoepjes op straathoeken opgemerkt? Ze waren oorspronkelijk ontworpen voor rolstoelen, maar nu helpen ze ook mensen met kinderwagens, bezorgers met karretjes, reizigers met rolkoffers en fietsers. Dat is precies hoe toegankelijke webdesign werkt—oplossingen die één groep helpen, blijken vaak iedereen te helpen. Best gaaf, toch? In deze les gaan we onderzoeken hoe je websites kunt maken die echt voor iedereen werken, ongeacht hoe ze het web gebruiken. Je ontdekt praktische technieken die al in webstandaarden zijn ingebouwd, gaat aan de slag met testtools en ziet hoe toegankelijkheid je sites gebruiksvriendelijker maakt voor alle gebruikers. Aan het einde van deze les heb je het vertrouwen om toegankelijkheid een natuurlijk onderdeel van je ontwikkelproces te maken. Klaar om te ontdekken hoe doordachte ontwerpkeuzes het web toegankelijk kunnen maken voor miljarden gebruikers? Laten we beginnen! ```mermaid mindmap root((Web Accessibility)) Users Screen readers Keyboard navigation Voice control Magnification Technologies HTML semantics ARIA attributes CSS focus indicators Keyboard events Benefits Wider audience Better SEO Legal compliance Universal design Testing Automated tools Manual testing User feedback Real assistive tech ``` > Je kunt deze les volgen op [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! ## Begrip van Hulpmiddelen Voordat we gaan coderen, nemen we even de tijd om te begrijpen hoe mensen met verschillende mogelijkheden het web daadwerkelijk ervaren. Dit is niet alleen theorie—het begrijpen van deze navigatiepatronen uit de praktijk maakt je een veel betere ontwikkelaar! Hulpmiddelen zijn geweldige technologieën die mensen met een beperking helpen om op verrassende manieren met websites te interageren. Zodra je begrijpt hoe deze technologieën werken, wordt het creëren van toegankelijke webervaringen veel intuïtiever. Het is alsof je leert je code te zien door de ogen van iemand anders. ### Schermlezers [Schermlezers](https://en.wikipedia.org/wiki/Screen_reader) zijn behoorlijk geavanceerde technologieën die digitale tekst omzetten in spraak of braille-output. Hoewel ze voornamelijk worden gebruikt door mensen met een visuele beperking, zijn ze ook erg nuttig voor gebruikers met leerstoornissen zoals dyslexie. Ik zie een schermlezer graag als een slimme verteller die een boek aan je voorleest. Het leest inhoud hardop voor in een logische volgorde, kondigt interactieve elementen aan zoals "knop" of "link" en biedt sneltoetsen om door een pagina te navigeren. Maar hier komt het—schermlezers kunnen alleen hun werk doen als wij websites bouwen met een goede structuur en betekenisvolle inhoud. Dat is waar jij als ontwikkelaar in beeld komt! **Populaire schermlezers op verschillende platforms:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (gratis en meest populair), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (ingebouwd) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (ingebouwd en zeer capabel) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (ingebouwd) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (gratis en open-source) **Hoe schermlezers webinhoud navigeren:** Schermlezers bieden meerdere navigatiemethoden die het browsen efficiënt maken voor ervaren gebruikers: - **Sequentieel lezen**: Leest inhoud van boven naar beneden, zoals een boek - **Landmark-navigatie**: Spring tussen paginasecties (header, nav, main, footer) - **Kopnavigatie**: Spring tussen koppen om de structuur van de pagina te begrijpen - **Linklijsten**: Genereer een lijst van alle links voor snelle toegang - **Formuliervelden**: Navigeer direct tussen invoervelden en knoppen > 💡 **Hier is iets dat me verbaasde**: 68% van de schermlezergebruikers navigeert voornamelijk via koppen ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Dit betekent dat je kopstructuur als een routekaart voor gebruikers is—als je het goed doet, help je mensen letterlijk sneller hun weg te vinden in je inhoud! ### Je testworkflow opbouwen Goed nieuws—effectief testen op toegankelijkheid hoeft niet overweldigend te zijn! Je wilt geautomatiseerde tools combineren (ze zijn fantastisch in het opsporen van duidelijke problemen) met wat handmatig testen. Hier is een systematische aanpak die ik heb gevonden om de meeste problemen te ontdekken zonder dat het je hele dag kost: **Essentiële handmatige testworkflow:** ```mermaid flowchart TD A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation} B --> C[Tab through all interactive elements] C --> D{🎧 Screen Reader Testing} D --> E[Test with NVDA/VoiceOver] E --> F{🔍 Zoom Testing} F --> G[Zoom to 200% and test functionality] G --> H{🎨 Color/Contrast Check} H --> I[Verify all text meets contrast ratios] I --> J{👁️ Focus Management} J --> K[Ensure focus indicators are visible] K --> L[✅ Testing Complete] style A fill:#e3f2fd style L fill:#e8f5e8 style B fill:#fff3e0 style D fill:#f3e5f5 style F fill:#e0f2f1 style H fill:#fce4ec style J fill:#e8eaf6 ``` **Stapsgewijze testchecklist:** 1. **Navigatie met toetsenbord**: Gebruik alleen Tab, Shift+Tab, Enter, Spatie en pijltjestoetsen 2. **Testen met schermlezer**: Schakel NVDA, VoiceOver of Narrator in en navigeer met gesloten ogen 3. **Zoomtesten**: Test op 200% en 400% zoomniveaus 4. **Kleurcontrastverificatie**: Controleer alle tekst en UI-componenten 5. **Focusindicator testen**: Zorg ervoor dat alle interactieve elementen zichtbare focusstatus hebben ✅ **Begin met Lighthouse**: Open de DevTools van je browser, voer een Lighthouse toegankelijkheidsaudit uit en gebruik de resultaten om je handmatige testfocusgebieden te bepalen. ### Zoom- en vergrotingstools Weet je nog hoe je soms inzoomt op je telefoon als de tekst te klein is, of je ogen dichtknijpt bij fel zonlicht op je laptopscherm? Veel gebruikers vertrouwen dagelijks op vergrotingstools om inhoud leesbaar te maken. Dit geldt voor mensen met een verminderd gezichtsvermogen, ouderen en iedereen die ooit geprobeerd heeft een website buiten te lezen. Moderne zoomtechnologieën zijn verder geëvolueerd dan alleen dingen groter maken. Begrijpen hoe deze tools werken helpt je om responsieve ontwerpen te maken die functioneel en aantrekkelijk blijven op elk vergrotingsniveau. **Moderne browserzoommogelijkheden:** - **Paginazoom**: Schaal alle inhoud proportioneel (tekst, afbeeldingen, lay-out) - dit is de voorkeursmethode - **Alleen tekstzoom**: Vergroot lettergrootte terwijl de oorspronkelijke lay-out behouden blijft - **Knijp-om-te-zoomen**: Mobiele gebarenondersteuning voor tijdelijke vergroting - **Browserondersteuning**: Alle moderne browsers ondersteunen zoom tot 500% zonder functionaliteit te breken **Gespecialiseerde vergrotingssoftware:** - **Windows**: [Vergrootglas](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (ingebouwd), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (ingebouwd met geavanceerde functies) > ⚠️ **Ontwerpoverweging**: WCAG vereist dat inhoud functioneel blijft bij 200% zoom. Op dit niveau moet horizontaal scrollen minimaal zijn en moeten alle interactieve elementen toegankelijk blijven. ✅ **Test je responsieve ontwerp**: Zoom je browser naar 200% en 400%. Past je lay-out zich elegant aan? Kun je nog steeds alle functionaliteit gebruiken zonder overmatig scrollen? ## Moderne Toegankelijkheidstesttools Nu je begrijpt hoe mensen met hulpmiddelen het web navigeren, laten we de tools verkennen die je helpen toegankelijke websites te bouwen en te testen. Zie het zo: geautomatiseerde tools zijn geweldig in het opsporen van duidelijke problemen (zoals ontbrekende alt-tekst), terwijl handmatig testen je helpt ervoor te zorgen dat je site prettig aanvoelt in de praktijk. Samen geven ze je het vertrouwen dat je sites voor iedereen werken. ### Kleurcontrast testen Goed nieuws: kleurcontrast is een van de meest voorkomende toegankelijkheidsproblemen, maar het is ook een van de gemakkelijkste om op te lossen. Goed contrast is gunstig voor iedereen—van gebruikers met een visuele beperking tot mensen die hun telefoon proberen te lezen op het strand. **WCAG contrastvereisten:** | Teksttype | WCAG AA (Minimum) | WCAG AAA (Verbeterd) | |-----------|-------------------|---------------------| | **Normale tekst** (onder 18pt) | 4.5:1 contrastverhouding | 7:1 contrastverhouding | | **Grote tekst** (18pt+ of 14pt+ vetgedrukt) | 3:1 contrastverhouding | 4.5:1 contrastverhouding | | **UI-componenten** (knoppen, formuliergrenzen) | 3:1 contrastverhouding | 3:1 contrastverhouding | **Essentiële testtools:** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Desktop-app met kleurkiezer - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Webgebaseerd met directe feedback - [Stark](https://www.getstark.co/) - Ontwerptoolplugin voor Figma, Sketch, Adobe XD - [Accessible Colors](https://accessible-colors.com/) - Vind toegankelijke kleurenpaletten ✅ **Bouw betere kleurenpaletten**: Begin met je merkkleuren en gebruik contrastcheckers om toegankelijke variaties te maken. Documenteer deze als toegankelijke kleurtokens in je ontwerpsysteem. ### Uitgebreide toegankelijkheidsaudits De meest effectieve toegankelijkheidstests combineren meerdere benaderingen. Geen enkele tool vangt alles, dus een testroutine opbouwen met verschillende methoden zorgt voor grondige dekking. **Browsergebaseerde tests (ingebouwd in DevTools):** - **Chrome/Edge**: Lighthouse toegankelijkheidsaudit + Toegankelijkheidspaneel - **Firefox**: Accessibility Inspector met gedetailleerde boomweergave - **Safari**: Audit-tabblad in Web Inspector met VoiceOver-simulatie **Professionele testextensies:** - [axe DevTools](https://www.deque.com/axe/devtools/) - Industriestandaard geautomatiseerde tests - [WAVE](https://wave.webaim.org/extension/) - Visuele feedback met foutmarkering - [Accessibility Insights](https://accessibilityinsights.io/) - Microsofts uitgebreide testpakket **Command-line en CI/CD-integratie:** - [axe-core](https://github.com/dequelabs/axe-core) - JavaScript-bibliotheek voor geautomatiseerde tests - [Pa11y](https://pa11y.org/) - Command-line toegankelijkheidstesttool - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Geautomatiseerde toegankelijkheidsscores > 🎯 **Testdoel**: Streef naar een Lighthouse toegankelijkheidsscore van 95+ als basislijn. Onthoud, geautomatiseerde tools vangen slechts ongeveer 30-40% van de toegankelijkheidsproblemen—handmatig testen blijft essentieel! ### 🧠 **Testvaardigheden Check: Klaar Om Problemen Te Vinden?** **Laten we kijken hoe je je voelt over toegankelijkheidstests:** - Welke testmethode lijkt je nu het meest toegankelijk? - Kun je je voorstellen om een hele dag alleen met toetsenbordnavigatie te werken? - Wat is een toegankelijkheidsbarrière die je persoonlijk online hebt ervaren? ```mermaid pie title "Accessibility Issues Caught by Different Methods" "Automated Tools" : 35 "Manual Testing" : 40 "User Feedback" : 25 ``` > **Zelfvertrouwenbooster**: Professionele toegankelijkheidstesters gebruiken precies deze combinatie van methoden. Je leert industriestandaard praktijken! ## Toegankelijkheid Vanaf Het Begin Opbouwen De sleutel tot succes in toegankelijkheid is om het vanaf dag één in je basis op te nemen. Ik weet dat het verleidelijk is om te denken "Ik voeg toegankelijkheid later toe," maar dat is alsof je probeert een helling toe te voegen aan een huis dat al gebouwd is. Mogelijk? Ja. Makkelijk? Niet echt. Zie toegankelijkheid als het plannen van een huis—het is veel eenvoudiger om rolstoeltoegankelijkheid in je oorspronkelijke architectuurplannen op te nemen dan om alles later aan te passen. ### De POUR-principes: Jouw Toegankelijkheidsbasis De Web Content Accessibility Guidelines (WCAG) zijn opgebouwd rond vier fundamentele principes die samen POUR vormen. Maak je geen zorgen—dit zijn geen saaie academische concepten! Het zijn eigenlijk praktische richtlijnen om inhoud te maken die voor iedereen werkt. Zodra je de POUR-principes onder de knie hebt, wordt het nemen van toegankelijkheidsbeslissingen veel intuïtiever. Het is alsof je een mentale checklist hebt die je ontwerpkeuzes begeleidt. Laten we het opsplitsen: ```mermaid flowchart LR A[🔍 PERCEIVABLE
Can users sense it?] --> B[🎮 OPERABLE
Can users use it?] B --> C[📖 UNDERSTANDABLE
Can users get it?] C --> D[💪 ROBUST
Does it work everywhere?] A1[Alt text
Captions
Contrast] --> A B1[Keyboard access
No seizures
Time limits] --> B C1[Clear language
Predictable
Error help] --> C D1[Valid code
Compatible
Future-proof] --> D style A fill:#e1f5fe style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 ``` **🔍 Waarneembaar**: Informatie moet op manieren worden gepresenteerd die gebruikers kunnen waarnemen via hun beschikbare zintuigen - Bied tekstalternatieven voor niet-tekstinhoud (afbeeldingen, video's, audio) - Zorg voor voldoende kleurcontrast voor alle tekst en UI-componenten - Bied ondertitels en transcripties voor multimedia-inhoud - Ontwerp inhoud die functioneel blijft bij vergroting tot 200% - Gebruik meerdere zintuiglijke kenmerken (niet alleen kleur) om informatie over te brengen **🎮 Bedienbaar**: Alle interfacecomponenten moeten bedienbaar zijn via beschikbare invoermethoden - Maak alle functionaliteit toegankelijk via toetsenbordnavigatie - Geef gebruikers voldoende tijd om inhoud te lezen en ermee te interageren - Vermijd inhoud die aanvallen of evenwichtsstoornissen veroorzaakt - Help gebruikers efficiënt te navigeren met duidelijke structuur en herkenningspunten - Zorg ervoor dat interactieve elementen voldoende doelgroottes hebben (minimaal 44px) **📖 Begrijpelijk**: Informatie en bediening van de interface moeten duidelijk en begrijpelijk zijn - Gebruik duidelijke, eenvoudige taal die geschikt is voor je doelgroep - Zorg ervoor dat inhoud op voorspelbare, consistente manieren verschijnt en werkt - Bied duidelijke instructies en foutmeldingen voor gebruikersinvoer - Help gebruikers fouten in formulieren te begrijpen en te corrigeren - Organiseer inhoud met een logische leesvolgorde en informatieve hiërarchie **💪 Robuust**: Inhoud moet betrouwbaar werken op verschillende technologieën en hulpmiddelen - **Gebruik geldige, semantische HTML als basis** - **Zorg voor compatibiliteit met huidige en toekomstige hulpmiddelen** - **Volg webstandaarden en best practices voor opmaak** - **Test op verschillende browsers, apparaten en hulpmiddelen** - **Structureer content zodat deze goed functioneert, zelfs als geavanceerde functies niet worden ondersteund** ### 🎯 **POUR-principes: Maak het blijvend** **Snelle reflectie op de basisprincipes:** - Kun je een websitefunctie bedenken die faalt volgens elk van de POUR-principes? - Welk principe voelt het meest natuurlijk aan voor jou als ontwikkelaar? - Hoe kunnen deze principes het ontwerp verbeteren voor iedereen, niet alleen voor mensen met een beperking? ```mermaid quadrantChart title POUR Principles Impact Matrix x-axis Low Effort --> High Effort y-axis Low Impact --> High Impact quadrant-1 Quick Wins quadrant-2 Major Projects quadrant-3 Consider Later quadrant-4 Strategic Focus Alt Text: [0.2, 0.9] Color Contrast: [0.3, 0.8] Semantic HTML: [0.4, 0.9] Keyboard Nav: [0.6, 0.8] ARIA Complex: [0.8, 0.7] Screen Reader Testing: [0.7, 0.6] ``` > **Onthoud**: Begin met verbeteringen die veel impact hebben en weinig moeite kosten. Semantische HTML en alt-tekst geven je de grootste toegankelijkheidsboost met de minste inspanning! ## Toegankelijk visueel ontwerp maken Goed visueel ontwerp en toegankelijkheid gaan hand in hand. Wanneer je ontwerpt met toegankelijkheid in gedachten, ontdek je vaak dat deze beperkingen leiden tot schonere, elegantere oplossingen die alle gebruikers ten goede komen. Laten we onderzoeken hoe je visueel aantrekkelijke ontwerpen kunt maken die werken voor iedereen, ongeacht hun visuele mogelijkheden of de omstandigheden waarin ze jouw content bekijken. ### Strategieën voor kleur en visuele toegankelijkheid Kleur is krachtig voor communicatie, maar het mag nooit de enige manier zijn om belangrijke informatie over te brengen. Ontwerpen voorbij kleur zorgt voor robuustere, inclusieve ervaringen die in meer situaties werken. **Ontwerp voor verschillen in kleurenzicht:** Ongeveer 8% van de mannen en 0,5% van de vrouwen heeft een vorm van kleurenzichtverschil (vaak "kleurenblindheid" genoemd). De meest voorkomende typen zijn: - **Deuteranopie**: Moeite met het onderscheiden van rood en groen - **Protanopie**: Rood lijkt minder helder - **Tritanopie**: Moeite met blauw en geel (zeldzaam) **Inclusieve kleurstrategieën:** ```css /* ❌ Bad: Using only color to indicate status */ .error { color: red; } .success { color: green; } /* ✅ Good: Color plus icons and context */ .error { color: #d32f2f; border-left: 4px solid #d32f2f; } .error::before { content: "⚠️"; margin-right: 8px; } .success { color: #2e7d32; border-left: 4px solid #2e7d32; } .success::before { content: "✅"; margin-right: 8px; } ``` **Voorbij de basisvereisten voor contrast:** - Test je kleurkeuzes met simulators voor kleurenblindheid - Gebruik patronen, texturen of vormen naast kleurcodering - Zorg ervoor dat interactieve staten onderscheidend blijven zonder kleur - Overweeg hoe je ontwerp eruitziet in de modus voor hoog contrast ✅ **Test je kleurtoegankelijkheid**: Gebruik tools zoals [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) om te zien hoe je site eruitziet voor gebruikers met verschillende soorten kleurenzicht. ### Focusindicatoren en interactieontwerp Focusindicatoren zijn het digitale equivalent van een cursor—ze laten toetsenbordgebruikers zien waar ze zich op de pagina bevinden. Goed ontworpen focusindicatoren verbeteren de ervaring voor iedereen door interacties duidelijk en voorspelbaar te maken. **Moderne best practices voor focusindicatoren:** ```css /* Enhanced focus styles that work across browsers */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); } /* Remove focus outline for mouse users, preserve for keyboard users */ button:focus:not(:focus-visible) { outline: none; } /* Focus-within for complex components */ .card:focus-within { box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); border-color: #4A90A4; } /* Ensure focus indicators meet contrast requirements */ .custom-focus:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; } ``` **Vereisten voor focusindicatoren:** - **Zichtbaarheid**: Moet een contrastverhouding van minimaal 3:1 hebben met omliggende elementen - **Breedte**: Minimaal 2px dikte rondom het hele element - **Blijvend zichtbaar**: Moet zichtbaar blijven totdat de focus elders naartoe gaat - **Onderscheidend**: Moet visueel verschillen van andere UI-staten > 💡 **Ontwerptip**: Goede focusindicatoren gebruiken vaak een combinatie van omtrek, box-shadow en kleurveranderingen om zichtbaarheid te garanderen in verschillende achtergronden en contexten. ✅ **Controleer focusindicatoren**: Navigeer met de Tab-toets door je website en noteer welke elementen duidelijke focusindicatoren hebben. Zijn er elementen die moeilijk te zien zijn of helemaal ontbreken? ### Semantische HTML: De basis van toegankelijkheid Semantische HTML is als het geven van een GPS-systeem aan hulpmiddelen voor jouw website. Door de juiste HTML-elementen te gebruiken voor hun beoogde doel, geef je schermlezers, toetsenborden en andere tools een gedetailleerde routekaart om gebruikers effectief te helpen navigeren. Hier is een analogie die echt bij mij aansloeg: semantische HTML is het verschil tussen een goed georganiseerde bibliotheek met duidelijke categorieën en behulpzame borden versus een magazijn waar boeken willekeurig verspreid liggen. Beide plekken hebben dezelfde boeken, maar waar zou jij liever iets proberen te vinden? Precies! ```mermaid flowchart TD A[🏠 HTML Document] --> B[📰 header] A --> C[🧭 nav] A --> D[📄 main] A --> E[📋 footer] B --> B1[h1: Site Name
Logo & branding] C --> C1[ul: Navigation
Primary links] D --> D1[article: Content
section: Subsections] D --> D2[aside: Sidebar
Related content] E --> E1[nav: Footer links
Copyright info] D1 --> D1a[h1: Page title
h2: Major sections
h3: Subsections] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` **Bouwstenen van een toegankelijke paginavoorstelling:** ```html

Your Site Name

Article Title

Published on

First Section

Content that relates to this section...

Second Section

More related content...

``` **Waarom semantische HTML toegankelijkheid transformeert:** | Semantisch Element | Doel | Voordeel voor schermlezers | |--------------------|------|---------------------------| | `
` | Pagina- of sectiekop | "Banner landmark" - snelle navigatie naar boven | | `