Omdat digitale toegankelijkheid geen eenmalig project is wat uitgevoerd moet worden, maar een doorlopende activiteit is, zijn er richtlijnen opgesteld. Deze worden continue bijgewerkt. Eerder schreven we al eens een goodreads artikel over toegankelijkheid waarin we interessante links en artikelen deelde. In deze serie artikelen zullen wij vertellen waarom digitale toegankelijkheid zo belangrijk is en delen we inzichten waar je zelf mee verder kunt om te voldoen aan de richtlijnen. In het eerste deel vertelde we waarom dit onderwerp ook voor jou belangrijk is en deelde we technische aspecten. In dit tweede deel vertellen we wat er visueel belangrijk is.

Visuele speerpunten

 

Contrast

Om te zorgen dat zowel slechtzienden als gebruikers die kleurenblind zijn alles duidelijk kunnen zien is het belangrijk dat er een hard contrast wordt gebruikt. De norm die hierbij wordt aangehouden is dat platte tekst (normale alinea’s met tekst) een contrastwaarde moet hebben van minimaal 4.5:1. Zodra tekst groter wordt afgebeeld mag het contrast minder sterk zijn, namelijk 3:1. 

Wat in de praktijk wel eens voorkomt is dat kleuren binnen de huisstijl doorgevoerd worden op de website, waardoor het voor de branding wel consistent is, maar het niet toegankelijk is.

Neem bijvoorbeeld een huisstijl die de kleuren oranje of geel bevat. Als deze kleuren als achtergrondkleur worden gebruikt met een witte tekstkleur is de tekst leesbaar voor mensen met normaal zicht, maar is het contrast te laag voor slechtzienden. Een oplossing hiervoor is om deze kleuren dan alleen te gebruiken in visuele elementen die niet perse bijdragen aan de inhoud van de pagina. Zo blijft de content goed leesbaar en wordt de huisstijl toch goed doorgevoerd.

Benieuwd of de kleuren binnen jouw website of applicatie genoeg contrast hebben? Dan kan je gebruik maken van de contrastchecker van WebAIMS.

 

Consistentie

Interfaces, zoals websites, bevatten veel functionele elementen, zoals buttons, links en invulvelden. Door deze consistent dezelfde opmaak te geven zorg je er voor dat het voor mensen makkelijker wordt om te begrijpen hoe iets werkt. Hierdoor heeft een interface een minder grote leercurve.

 

Kleurafhankelijkheid

Het is belangrijk dat kleur niet de enige indicatie is dat een element klikbaar is. Wanneer klikbare elementen alleen met een kleur worden aangegeven kan het lastig of onmogelijk zijn voor mensen met kleurenblindheid om te navigeren binnen een website.

Tekst links zijn hier een goed voorbeeld van. Deze worden vaak aangegeven door ze een andere kleur te geven binnen een tekstblok. Een “best practice” is daarom om links onderlijnd te maken of er een visueel element, zoals een icoon, aan toe te voegen.

 

Alternatieve layout

Zoals aangegeven in de functionele speerpunten moeten er alternatieven zijn voor gebruikers om een website te bekijken. De website of applicatie moet bijvoorbeeld de mogelijkheid hebben in te zoomen tot 200%, zonder dat deze hierdoor stuk gaat. Maar ook de functies om de website te laten voorlezen en/of aan te passen naar een zwart/wit lay-out mogen niet ontbreken.

 

Regelhoogte en alinea afstand

De regelhoogte moet minimaal 1,5 keer de grootte van het lettertype zijn. De ruimte tussen paragrafen moet minimaal 2 keer de tekstgrootte zijn. Daarnaast moet er ook genoeg ruimte zijn tussen de letters en woorden. Tekst mag niet overlappen of te dicht op elkaar staan, zodat gebruikers stukken tekst/informatie goed van elkaar kunnen onderscheiden.

 

Afbeeldingen

Voor afbeeldingen is het belangrijk dat er geen tekst in de afbeelding staat. Volgens de richtlijnen van WCAG mag dit nog wel, zolang er een goede alternatieve tekst wordt opgegeven. In de praktijk zien we echter vaak dat dit voor problemen zorgt. Websites en applicaties zijn meestal responsive, waardoor de afbeeldingen op veel verschillende manieren worden weergeven (bijvoorbeeld liggend voor desktop en staand voor mobiel). Het heeft dus altijd een variabele uitsnede. Hierdoor kan het voorkomen dat de tekst van de afbeelding afgesneden wordt. Een goede oplossing is om tekst in HTML te gebruiken op een achtergrondafbeelding, zodat de tekst gegarandeerd zichtbaar is. Deze oplossing werkt zowel responsive als voor gebruikers die minder goed zicht hebben en voorleessoftware gebruiken.