Toegankelijk design

Er is gekozen voor een kalm en overzichtelijk design. Overstimulatie wordt beperkt door een kalm kleurenpalet, een simpele paginastructuur en het niet automatisch afspelen van video’s of animaties.

Kleurgebruik en contrast

Om een website met een voldoende contrast-ratio te bieden aan bezoekers met een visuele beperking is er een contrastknop geïmplementeerd.
Deze knop bevindt zich rechts bovenaan de pagina en is ook snel te bereiken via een skiplink. Op kleine schermresoluties bevindt deze knop zich in het uitklapmenu.

Wanneer de contrastknop geactiveerd wordt, wordt de website getoond in hoog-contrast-modus. Deze activatie wordt vervolgens in een cookie opgeslagen, zodat bij een volgend bezoek deze voorkeur is onthouden. Lees meer over het gebruik van cookies op deze website.

Screenshot van het secundaire menu met de contrastknop
De contrastknop bevindt zich in het menu bovenaan de pagina
Screenshot van een overzicht met cards, waarbij de hoge contrast modus actief is
Een overzichtspagina waarbij de hoog-contrast-modus is geactiveerd

Inzoomen en tekst vergroten

De tekst op deze website kan 200 procent groter gemaakt worden zonder verlies van inhoud of functionaliteit. Teksten worden in dit geval niet afgesneden en onderdelen overlappen niet. De functie om te vergroten zit standaard in de meeste browsers.

Dit draagt bij aan een betere website omdat bezoekers die slechtziend zijn er baat bij hebben als zij de tekst op een website eenvoudig kunnen vergroten, zonder dat er iets van het scherm afvalt of niet meer leesbaar is.

Voorleesfunctie

De website is uitgerust met een voorleesfunctie, door middel van een ReadSpeaker webReader implementatie.
ReadSpeaker kan de content van een website hardop voorlezen.
Door het klikken op deze knop wordt de pagina voorgelezen terwijl de tekst wordt gehighlight om het meelezen te vergemakkelijken.

Ook is het mogelijk om binnen de pagina op tekst te klikken, waardoor er een ReadSpeaker knop verschijnt waarmee je vanaf de huidige locatie de tekst kan laten voorlezen.

De voorleesfunctie maakt de website toegankelijk voor een bredere doelgroep bezoekers, waaronder mensen met leerproblemen of visuele beperkingen, laaggeletterden, mensen die een nieuwe taal leren, de groeiende groep ouderen en iedereen die liever luistert dan leest of onderweg websites wil raadplegen. Je hoeft niets te downloaden om de voorleesfunctie te gebruiken.

Screenshot van de voorleesfunctie, waarin de voorleesfunctie actief is. Je ziet meerdere opties om de voorleesfunctie te bedienen
ReadSpeaker webReader
Je ziet tekst waarin de voorgelezen tekst is gemarkeerd
De voorgelezen tekst wordt gehighlight om het meelezen te vergemakkelijken.

Bovenaan de pagina, in de linkerhoek, zijn er ‘Direct naar …’ links aanwezig. Deze skiplinks zijn in eerste instantie niet zichtbaar voor bezoekers, maar wel voor hulptechnologieën zoals screen readers, of voor de bezoeker die met behulp van het toetsenbord door de pagina navigeert.

Vóór de hoofdcontent van een pagina bevinden zich vaak meerdere navigatielinks, zoekformulieren of andere elementen. Voor de toetsenbord- en screen reader-gebruiker kan het vervelend zijn om steeds eerst langs al deze elementen te moeten navigeren.
De skiplinks zorgen ervoor dat men snel bepaalde content kan omzeilen, zoals in ons geval het hoofdmenu.

Content

Op verschillende landingspagina’s, bijvoorbeeld Inspiratie of Tools, is de content gerangschikt in zogeheten kaartjes of ‘cards’. Deze cards linken naar individuele detailpagina’s. De cards zijn dynamisch (wanneer er nieuwe artikelen worden gepubliceerd zullen er cards bijkomen) en hierdoor kan de layout regelmatig veranderen.

De hoofdcontent op andere pagina’s is links uitgelijnd, waarbij er rekening wordt gehouden met de juiste regellengte voor optimale leesbaarheid.

In de code van de website is zoveel mogelijk gekozen voor semantische elementen en een logische, hiërarchische koppenstructuur zodat hulptechnologieën zoals screen readers de pagina’s goed kunnen interpreteren.

Afbeeldingen

Alternatieve teksten zijn waar mogelijk toegevoegd aan alle afbeeldingen. Een alternatieve tekst is een beschrijving van wat er in een afbeelding gebeurt. Afbeeldingen die geen content bevatten maar puur ter decoratie dienen, zijn hier een uitzondering op.

De website heeft een simpele structuur, waardoor de navigatie overzichtelijk blijft en alle pagina’s makkelijk te bereiken zijn.

De meeste pagina’s, behalve de homepage, hebben een ‘kruimelpad’ bovenaan de pagina. Dit kruimelpad laat je huidige locatie binnen de website zien en biedt ook links naar pagina’s die een niveau hoger liggen.
Kruimelpaden laten de bezoeker zien waar in de context van een website ze zich bevinden en zorgen ervoor dat de pagina zelf beter geïnterpreteerd wordt.

Naast de hoofdnavigatie, zijn de belangrijkste links nog eens terug vinden in de footer onderaan de pagina. Om te navigeren door de pagina hoeft een bezoeker dus niet steeds de weg terug te vinden naar de hoofdnavigatie. Ook vind je hier meer informatie over privacy en cookies.

Bijlagen

Op sommige detailpagina’s wordt er een download aangeboden, dit kan bijvoorbeeld een publicatie zijn.

Om ervoor te zorgen dat het downloaden van een bijlage voorspelbaar is,
wordt er bij elke bijlage aangegeven om wat voor download het gaat, om welk type bestand het gaat en ook wat de bestandsgrootte is die men zal gaan downloaden.

Een bijlage-knop waarin de titel, type en bestandsgrootte van de download wordt beschreven

Transities

Wanneer een bezoeker de Reduce Motion instelling heeft ingeschakeld, worden transities op de website niet meer getoond. Een transitie is een soepele overgang tussen twee verschillende statussen. Een voorbeeld hiervan is de navigatie-icoon op mobiele apparaten: het hamburger-icoon gaat door middel van een animatie over in een kruisje.

Vragen of opmerkingen

Mochten er enige vragen, opmerkingen of suggesties zijn ontstaan, neem gerust contact met ons op.

Contactpersonen

Marleen Hartjes

Projectleider

Jacqueline Kool

Mede-initiatiefnemer van Disability Studies in Nederland (DSiN)