Toegankelijkheid

Toegankelijkheid van websites is van vitaal belang in de moderne digitale wereld. Het staat voor het waarborgen van gelijke toegang tot online informatie en diensten voor alle gebruikers, ongeacht hun vaardigheden, beperkingen of technologische beperkingen.
Dit hoofdstuk focust op de toegankelijkheid van de website, met aandacht voor aspecten zoals kleurcontrast, navigatie en ondersteuning voor hulpmiddelen. We bieden inzicht en aanbevelingen om de website inclusiever te maken.

European Accessibility Act

Met de toenemende digitalisering en de groeiende afhankelijkheid van online diensten, wordt de druk om toegankelijkheid te waarborgen steeds groter. De European Accessibility Act (EAA) is een belangrijke mijlpaal op dit gebied. Deze wetgeving verplicht organisaties om vanaf 2025 hun digitale diensten toegankelijk te maken voor mensen met beperkingen. Het is een cruciale stap in de richting van een meer inclusieve samenleving en benadrukt het belang van het creëren van digitale omgevingen die voor iedereen toegankelijk zijn. De belangrijkste richtlijnen voor toegankelijkheid zijn vastgelegd in de Web Content Accessibility Guidelines (WCAG).

Meer dan een plicht

Een toegankelijke website is niet alleen een plicht, maar ook een strategische investering. Het vergroot het bereik en de impact van een bedrijf door een breder publiek aan te spreken, wat leidt tot een verbeterde gebruikerservaring en klanttevredenheid.

Checklist

Onderwerp
Score
Toelichting
Screen reader
4
Er zijn verschillende issues opgedoken door de website met een screen reader te bezoeken. Zie hieronder.
Kleur contrast
5
De buttons hebben te weinig contrast en moeten aangepast worden om te voldoen voor de EEA.
Content
8
Een klein verstopt foutje bij het logo, maar verder geen grote issues.

Aandachtspunten

Screen reader

Er zijn veel mensen met een visuele, motorische of andere beperking die afhankelijk zijn van hulpmiddelen om een website te gebruiken. Ze gebruiken een screen reader of andere hardware- of software ondersteuning. Natuurlijk werken er in bedrijven ook mensen die van afhankelijk zijn van dergelijke hulpmiddelen.

Daarom is het belangrijk om de juiste feedback te geven wanneer iemand een item selecteert. Browsers hebben hier standaard instellingen voor, en je kunt er zelf in de code van je website voor kiezen om bepaalde (visuele) feedback te geven. Maar ook alt-teksten en andere codes helpen om de juiste terugkoppeling te geven.

Test het zelf uit

Gebruik je eigen website eens zonder muis of trackpad. Je kunt met de tab-toets alle interactieve elementen van de pagina afgaan en met de enter-toets selecteren. Of gebruik een tool zoals Silktide, die een screenreader nabootst en visuele beperkingen zoals kleurenblindheid simuleert.
Silktide toolbar

Door de website met een screen reader (simulatie) te gebruiken komen de volgende punten naar voren.

Skip to content-link

  • Voeg een verborgen "Skip to content"-link toe. Hiermee kunnen gebruikers de (op ieder pagina terugkerende) hoofdnavigatie overslaan wanneer zijn bijvoorbeeld een screen reader gebruiken. Probeer dit maar eens uit op andere websites, bijvoorbeeld van de overheid. Druk op de tab-toets en kijk of er bovenin een "Skip to content"-link verschijnt.
  • Het primaire menu kan niet volledig gebruikt worden met een screen reader of met alleen een toetsenbord. Alleen de items het hoogste niveau zijn te selecteren. De diepere niveaus zijn niet bereikbaar.
  • De slider (op de pagina "SDE Subsidiecheck") is onbruikbaar met een screenreader.

Alt teksten voor afbeeldingen

  • Afbeeldingen moeten een alt-tekst hebben, zodat screen readers de omschrijving of functie ervan kunnen voorlezen. Gebruik deze functie om waarde toe te voegen voor de bezoeker die de afbeeldingen niet kan zien.
  • Bij decoratieve afbeeldingen is dat juist niet nodig, dan slaat de screen reader ze ook over. Gebruik in dat geval een leeg alt-element: <img src="decoration.jpg" alt="">.
  • Afbeeldingen zoals pijltjes in buttons of vinkjes voor een usp hoeven natuurlijk niet voorgelezen te worden. Je kunt hier het aria-hidden label toevoegen, zodat een screen reader het negeert: <img src="check.svg" alt="check" aria-hidden="true">. Zorg wel dat de button zelf een duidelijke beschrijving heeft.

Kleur contrast

Waarom is dit belangrijk?

De WCAG richtlijnen voor kleurcontrast stellen eisen aan de verhouding tussen de voorgrond- en achtergrondkleur om de leesbaarheid te verbeteren voor mensen met visuele beperkingen. Voor normale tekst moet het contrast minstens 4,5:1 zijn, terwijl voor grotere tekst (of vetgedrukte tekst) het contrast 3:1 moet zijn. Dit bevordert een toegankelijke online omgeving voor iedereen, inclusief mensen met kleurenblindheid of verminderd zicht.

Er zijn slechts op 2 elementen problemen gevonden met het kleurcontrast:

Primaire buttons

De groene buttons met witte tekst voldoen niet aan het minimale contrast van 4.5:1.

Overweeg om de tekst te vergroten en een donkerdere tint of een hele andere kleur te kiezen.

Tip: Voor grote tekst (minimaal 18pt, of 14pt en vetgedrukt) is 3.0:1 voldoende contrast. De benodigde aanpassing in kleur is dan minder groot.

Grijze tekst onder button

De grijze tekst onder de primaire button is niet leesbaar genoeg. Gebruik een donkerdere kleur grijs voor tekst.

Tekstvelden in formulieren

De invoervelden zijn niet voldoende te herkennen. De lichte grijze lijn heeft niet genoeg contrast met de witte achtergrond van de pagina of van het tekstveld.

Overzicht van belangrijke kleuren

Teveel contrast kan ook

Zwart op wit is zo’n hoog contrast dat dit vermoeide ogen kan veroorzaken. Voor een prettige leesbaarheid adviseren wij om zwarte tekst te vervangen door heel donker grijs (ergens tussen 85% en 95% in) en/of de witte achtergrond te vervangen door heel licht grijs (ergens tussen 1% en 3%).

Content

Bij het controleren van de inhoud op toegankelijkheidsissues kwam dit nog naar voren:

  • Logo (links boven) heeft op de website van Elix een alt-tekst "Zonnestroom Nederland". Dit wordt dus ook zo voorgelezen door screen readers, wat heel verwarrend is.

Vervolgstappen

Dit zijn volgens ons de belangrijkste stappen om de toegankelijkheid van je website te verbeteren.

Zorg dat het primaire menu te gebruiken is met screen readers en toetsenbord.

Pas de primaire buttons aan zodat ze voldoen aan het minimale kleurcontrast.

Pas formulieren aan zodat ook dit belangrijke element voor iedereen te gebruiken is.

vorige:

Responsiviteit
volgende:

Technisch