Omdat digitale toegankelijkheid geen eenmalig project is dat één keer wordt uitgevoerd, maar een doorlopende activiteit, zijn er richtlijnen opgesteld. Die worden continu bijgewerkt. Eerder schreven we een goodreadsartikel over toegankelijkheid, waarin we interessante links en artikelen deelden. In deze serie artikelen leggen we uit waarom digitale toegankelijkheid zo belangrijk is en delen we inzichten waarmee je zelf aan de richtlijnen kunt voldoen. In het eerste deel legden we uit waarom dit onderwerp ook voor jou belangrijk is en deelden we technische aspecten. In dit tweede deel leggen we uit wat 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 sterk contrast wordt gebruikt. De norm die hierbij wordt aangehouden is dat platte tekst, dus 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 uit de huisstijl worden doorgevoerd op de website. Dat is consistent voor de branding, maar niet toegankelijk.
Neem bijvoorbeeld een huisstijl met de kleuren oranje of geel. Als deze kleuren als achtergrondkleur worden gebruikt met witte tekst, is de tekst leesbaar voor mensen met normaal zicht, maar is het contrast te laag voor slechtzienden. Een oplossing is om deze kleuren alleen te gebruiken in visuele elementen die niet noodzakelijk 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 je website of applicatie genoeg contrast hebben? Dan kun je gebruikmaken 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, maak je het voor mensen makkelijker om te begrijpen hoe iets werkt. Hierdoor heeft een interface een minder steile leercurve.
Kleurafhankelijkheid
Het is belangrijk dat kleur niet de enige indicatie is dat een element klikbaar is. Wanneer klikbare elementen alleen met kleur worden aangegeven, kan het lastig of onmogelijk zijn voor mensen met kleurenblindheid om binnen een website te navigeren.
Tekstlinks zijn hier een goed voorbeeld van. Die worden vaak aangegeven door ze binnen een tekstblok een andere kleur te geven. Een “best practice” is daarom om links te onderstrepen 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 om in te zoomen tot 200%, zonder dat deze daardoor stuk gaat. Ook de functies om de website te laten voorlezen en/of over te schakelen naar een zwart-wit layout mogen niet ontbreken.
Regelhoogte en alinea-afstand
De regelhoogte moet minimaal 1,5 keer de grootte van het lettertype zijn. De ruimte tussen alinea’s moet minimaal 2 keer de tekstgrootte zijn. Daarnaast moet er ook genoeg ruimte zijn tussen letters en woorden. Tekst mag niet overlappen of te dicht op elkaar staan, zodat gebruikers tekstblokken en 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 afbeeldingen op veel verschillende manieren worden weergegeven, bijvoorbeeld liggend voor desktop en staand voor mobiel. De uitsnede is daardoor altijd variabel. Hierdoor kan tekst in de afbeelding worden afgesneden. Een goede oplossing is om tekst in HTML te gebruiken boven op een achtergrondafbeelding, zodat de tekst gegarandeerd zichtbaar is. Deze oplossing werkt zowel responsive als voor gebruikers met verminderd zicht die voorleessoftware gebruiken.