UX design Geplaatst op: 6 december 2024, aangepast op: 9 december 2024
Een website maak je toegankelijk door rekening te houden met beperkingen, zoals blind- en doofheid of invaliditeit. Lees onze accessibility tips en bekijk onze voorbeelden.
Websites en apps die toegankelijk zijn ontworpen zijn makkelijker te gebruiken voor mensen met een beperking. Bijvoorbeeld mensen die slechtziend, kleurenblind of doof zijn. Door rekening te houden met deze beperkingen kunnen websites met een betere ervaring ontworpen worden: voor iedereen. Uit onderzoek blijkt namelijk dat websites die hoog scoren op toegankelijkheid gebruiksvriendelijker zijn dan websites die ontoegankelijk zijn.
Meer dan 4 miljoen mensen hebben een beperking. Dit zijn bijvoorbeeld mensen die blind, doof of invalide zijn, maar ook mensen met dyslexie, kleurenblindheid of met een cognitieve beperking. Maar accessibility is voor meer mensen handig, ook zonder beperking. Je kunt namelijk ook tijdelijk beperkt worden, zoals door een gebroken arm, een luide omgeving, of fel zonlicht dat op je scherm schijnt. Toegankelijkheid komt dan ook iedereen ten goede.
Lees onderstaande tips om je website of app toegankelijk te maken voor mensen met beperkingen.
Contrast is het verschil tussen twee kleuren, bijvoorbeeld de tekstkleur tegen de achtergrondkleur. Als deze te laag is, is je tekst niet goed leesbaar. Met de WebAIM Contrast Checker kun je controleren of je tekstkleur voldoende contrasteert met de achtergrond.
Een te kleine tekstgrootte gebruiken kan ervoor zorgen dat je website-gebruikers je tekst niet goed kunnen lezen. Maak je standaardteksten minimaal 12 pixels groot en het liefst 16 pixels. Dit verschilt natuurlijk per lettertype en per scherm. Op mobiele apparaten kan de tekst iets kleiner getoond worden, omdat deze dichterbij de ogen wordt gehouden. Het belangrijkste is dat je de gebruikers de mogelijkheid geeft om de tekst te vergroten. Dit kunnen ze bijvoorbeeld doen in de browser of besturingssysteem. Test of dit goed werkt op je website.
Bij afbeeldingen kun je een tekstueel alternatief toevoegen. Omschrijf de afbeelding en zorg dat deze bij de afbeelding geplaatst wordt. Of zorg voor een alt text (alternatieve tekst) die de afbeelding omschrijft. Slechtziende of blinde mensen kunnen deze alt-tekst laten voorlezen door een schermlezer (screen reader) of de tekst vergroten in het geval van een bijschrift.
Video’s zijn ook toegankelijker te maken. Bijvoorbeeld door ondertitels toe te voegen of de gesproken tekst op te nemen als transcriptie. Maar hier stopt het niet, je kunt video’s ook makkelijker te bedienen maken door sneltoetsen te ondersteunen vanaf het toetsenbord. Voeg ook knoppen toe om de video te kunnen doorspoelen of stukken over te slaan.
Tekst leest prettiger als er opmaak aan toegevoegd is. Gebruik dan ook vooral tussenkoppen van verschillende niveaus om verschillende secties van een titel te voorzien. Gebruik verschillende headings (zoals H1, H2, H3 etc.) en zorg ervoor dat deze de tekst eronder bondig samenvatten. Hiermee maak je het direct makkelijker om de tekst te ‘scannen’ en is de tekst toegankelijker voor mensen met een schermlezer.
Naast deze grotere punten zijn er ook een aantal kleine punten die je direct kunt toepassen op je ontwerp én die bijdragen aan een betere toegankelijkheid:
