Alles wat je moet weten over digitale toegankelijkheid

DESIGN / ONTWERP / UX

Internet en computers zijn onmisbaar en websites die goed in elkaar zitten kunnen door iedereen worden gebruikt. Ook voor bezoekers met een beperking, in alle browsers, op alle platforms en op alle apparaten. Eind september is er een Nederlandse wet in gegaan die overheidswebsites verplicht aan een aantal regels rondom toegankelijkheid. Maar ook voor niet-overheidswebsites is het handig om aan de toegankelijkheid van je website te werken. Naast dat je website bruikbaar is voor alle bezoekers, zorgt een goede toegankelijkheid ook voor een goede Google positie. Een win-win situatie dus!

In dit artikel gaan we dieper in hoe jij de toegankelijkheid van jouw website kan verbeteren.

Jouw eindgebruiker centraal

Er is digitaal veel mogelijk om producten en diensten inclusiever te maken. Maar hoe kun je er voor zorgen dat jouw website aansluiting vindt bij iedereen die je wil bereiken? Dit doe je door de eindgebruiker centraal te zetten tijdens het ontwerpproces en toegankelijkheid vanaf het begin van het project mee te nemen. Houdt er tijdens de ontwikkelfase van je product rekening mee dat de gebruiker gemakkelijk over de website kan navigeren. Bij het development van een website kunnen ook stappen behaald worden. Hulpsoftware gebruiken de HTML-code om elementen op een pagina te kunnen beschrijven. Je kunt dit alles borgen door je project regelmatig te laten testen door iemand uit jouw doelgroep.

Design

Tijdens de designfase van je website is het belangrijk om rekening te houden met een goed contrast tussen tekst en achtergrond. Dit zorgt er voor dat de teksten goed leesbaar zijn, ook voor bezoekers met een visuele beperking. Leesbaarheid van de teksten houdt meer in dan alleen contrast, let ook op:

  1. Lengte van zinnen:
    - De ideale regellengte is 60 à 70 lettertekens op één regel.
  2. Lettergrootte:
    - Minimaal 10 punts
  3. Lettertype:
    - Gebruikt uitsluitend aangesloten letters
    - Schreefloze letters zijn beter leesbaar
  4. Regelafstanden:
    - Regelhoogte (regelafstand) tot minimaal 1,5 keer de lettergrootte
    - Afstand tussen volgende alinea tot minimaal 2 keer de lettergrootte
    - Letterafstand tot minimaal 0,12 keer de lettergrootte
    - Woordafstand tot minimaal 0,16 keer de lettergrootte

HTML structuur

Een goede HTML structuur maakt het voor bezoekers die voorlees software gebruiken (zoals slechtziende) makkelijker om de website te gebruiken. Denk hierbij aan het plaatsten van het menu in de <header> tag, het gebruik van <h1>, <h2>, etc tags voor titels en teksten in <p> tags. Het gebruik van tabel headers in een tabel en <label> tags met een goede beschrijving bij invoervelden.

Teksten

Wanneer je de content hebt geschreven en dit op je website gaat plaatsen, zijn er ook een aantal belangrijke punten op het gebied van online toegankelijkheid:

Maak gebruik van titels en koppen. Een gebruiker scant de koppen om overzicht te krijgen om zo te bepalen op welk punt je een tekst begint te lezen. Screenreaders werken zo, maar uit recent eigen gebruikersonderzoek blijkt dat bijna alle gebruikers van een website scannen en daarna pas echt lezen.

Wat betreft content zijn er een aantal aandachtspunten waar je rekening mee kunt houden:

  • Gebruik simpele zinnen en bullets
  • Gebruik ondersteunend beeldmateriaal
  • Vermijd figuurlijk taalgebruik
  • Vermijd onnodige onderlijning, kapitalen of cursieve teksten


Duidelijke verwijzingen waarin wordt beschreven waar de link bij hoort kunnen hierbij ondersteunen. "Klik hier" is niets zeggend, "Lees meer over toegankelijkheid" daarentegen wel. Daarnaast is het ook nuttig voor de indexatie binnen Google.

Formulieren

Formulieren bieden een vorm van interactie met jouw bezoeker en in sommige gevallen de beoogde conversie. In het kader van toegankelijkheid zijn labels van groot belang, zo kan de screenreader voorlezen wat er gevraagd wordt. Ook is het van belang dat de validatie en feedback in een tekst genoemd worden, zo wordt bijvoorbeeld duidelijk welke vraag de gebruiker niet juist heeft ingevuld.

Een formulier moet ook te besturen zijn zonder het gebruik van een muis. Denk hierbij aan het gebruik van een focus state die visueel aangeeft welk invoer veld geslecteerd is.

Afbeeldingen, geluid en video's

Voor afbeeldingen, geluid en video geldt dat er een tekstalternatief kan worden toegevoegd, waarin wordt beschreven wat er te zien of te horen is. Werkt ook nog eens goed voor je SEO! Voor slechthorende kan er bij een video ondertiteling worden toegevoegd. Ook is het goed om je er bewust van te zijn dat sliders of animaties niet door alle bezoekers als prettig worden ervaren. De optie om te pauzeren maakt jouw website toegankelijker.

Wil je ook de digitale toegankelijkheid verbeteren in jouw product?

Staat digitale toegankelijkheid binnen jouw organisatie op de agenda? Wij hebben ervaring met en helpen je graag bij het verbeteren van je website. Een mooi voorbeeld is onze Senior Service case, waarbij wij rekening hielden met de leesbaarheid en consistentie in het ontwerp om de bezoekers van de website zo een warm onthaal te bieden.

Benieuwd hoe wij je kunnen helpen? Laten we dan snel afspreken. Samen met jou zorgen we voor een inclusief digitaal product.



LET'S MEET

Get in touch with Jasper

Als digital agency uit Breda werken we samen met merken en organisaties die zoeken naar langdurige vooruitgang en strategische groei. Klanten die het belang van onderscheidend concept en high-end design beseffen. Pioniers die, zowel op korte als lange termijn, met innoverende en schaalbare digitale ontwikkeling bezig zijn. Let's groow.