Wanneer je de website wil laten voldoen aan de nieuwe Europese wet EAA (European Accesibility Act) dan kun je een aantal punten afwerken. In deze reeks van blogs, de derde blog we zullen dieper ingaan op enkele essentiële aspecten van toegankelijkheid, met de nadruk op HTML-structuur, navigatie, responsive design, formulieren en interactieve elementen.
1. HTML-Structuur: H1, H2, H3 en Meer
Eén van de fundamenten van een toegankelijke website is een goed gestructureerd HTML-document. Koppen zijn vaak te herkennen aan hun vormgeving: dikker en grotere letters en andere kleuren als de andere tekst in de site.
Kopniveaus en HTML
De kop krijgt een heading tag, deze heading tags zijn er in 6 verschillende kopniveaus.
- H1 (Heading 1): Gebruik dit voor de hoofdtitel van de pagina.
- H2 (Heading 2): Onderverdeling van secties binnen de hoofdtitel.
- H3 (Heading 3): Subsecties onder H2, en zo verder.
Dit ziet er als volgt uit:
<h1>HTML Structuur en navigatie</h1> <h3>HTML-Structuur: H1, H2, H3 en meer</h3> <h2>Kopniveaus en html</h2>
Een duidelijke en logische structuur verbetert niet alleen de leesbaarheid voor iedereen, maar het is ook essentieel voor mensen die afhankelijk zijn van schermlezers om de inhoud van een webpagina te begrijpen.
2. Toetsenbord toegankelijke Elementen
Toegankelijkheid houdt niet op bij de visuele ervaring; het omvat ook de interactie met de website via het toetsenbord. Zorg ervoor dat alle interactieve elementen, zoals knoppen en formulierelementen, gemakkelijk te bereiken en te bedienen zijn met behulp van het toetsenbord.
- Tabindex: Gebruik de
tabindex-eigenschap om de volgorde van focus tussen interactieve elementen te bepalen. - :focus Pseudo-klasse: Stijl de focusindicatoren om duidelijk te maken welk element momenteel is geselecteerd.
3. Navigatie: Wegwijs voor Iedereen
Een intuïtieve en gemakkelijk te navigeren website is van groot belang. Voorzie elke pagina van een consistente navigatiestructuur en maak gebruik van ARIA-landmarks om schermlezers te helpen de belangrijkste delen van de pagina te identificeren.
- <nav>-element: Gebruik het
<nav>-element om de navigatie van de pagina aan te geven. - ARIA-landmarks: Gebruik ARIA-landmarks zoals
role="navigation"om de belangrijkste secties van de pagina aan te duiden.
4. Responsive Design: Van Desktop tot Mobiel
Met de groeiende diversiteit aan apparaten is het essentieel om websites te ontwerpen die zich aanpassen aan verschillende schermgroottes. Responsive design zorgt ervoor dat de inhoud op een bruikbare en begrijpelijke manier wordt weergegeven, ongeacht het apparaat.
- Media Queries: Gebruik media queries in je CSS om de lay-out aan te passen op basis van schermgrootte.
- Flexibele Afbeeldingen: Zorg ervoor dat afbeeldingen schalen om goed weer te geven op verschillende apparaten.
5. Formulieren en Interactieve Elementen
Formulieren zijn vaak een cruciaal onderdeel van een website, en het is belangrijk dat ze voor iedereen toegankelijk zijn. Gebruik duidelijke labels, valideer input en zorg ervoor dat foutmeldingen duidelijk worden gecommuniceerd.
- <label>-element: Gebruik altijd het
<label>-element om formulierelementen te beschrijven. - Foutmeldingen: Geef duidelijke foutmeldingen weer en zorg ervoor dat schermlezers deze correct kunnen interpreteren.
Met de meeste van de bovenstaande punten gebruik je standaard wanneer je een webpagina opzet. De meeste CMS systemen zoals WordPress en de pagebuilders zoals Elementor helpen je door mogelijkheden zichtbaar te maken en gemakkelijk elementen aan te passen. Door de bovenstaande richtlijnen te volgen, draag je bij aan een webomgeving die voor iedereen toegankelijk is, ongeacht hun fysieke mogelijkheden.
