Zo verbeter je de toegankelijkheid van de knoppen en het contrast op jouw website

Zo maak je de knoppen op je website toegankelijker 

Knoppen zijn heel belangrijk voor de navigatie op je website. Je gebruikt ze om een actie uit te voeren. Om ze toegankelijker te maken, geeft Joost de volgende tips: 

• Toegankelijke knoppen: Knoppen moeten een zichtbare en toegankelijke naam hebben, eentje die klopt met hun functie. Ze worden namelijk gebruikt om acties te initiëren, zoals ‘Verzenden’ of ‘Open menu’. Dus zorg ervoor dat dit ook op de knop staat. Of dat de knop begint met het woord dat de actie beschrijft, zoals ‘Verzend het formulier’. Dit is erg belangrijk voor mensen die spraaksoftware gebruiken om een website te bedienen.  
• Toegankelijk met het toetsenbord: Het is belangrijk dat knoppen op webpagina’s bedienbaar zijn met het toetsenbord. Voor mensen met een visuele beperking is de tabtoets namelijk een belangrijk hulpmiddel om door een pagina te navigeren. Daarnaast moet je de knoppen met de entertoets of spatiebalk kunnen activeren. Zorg er wel voor dat je óf kiest voor de entertoets, óf voor de spatiebalk. Anders veroorzaakt je website alsnog verwarring. 
• Duidelijk zichtbare focus: De focusindicator is een rechthoekig kader dat om een interactief element zit en zichtbaar is als daar de focus op staat. Dit kader moet wanneer een knop geselecteerd wordt voldoende contrast hebben. Dit helpt gebruikers die navigeren met het toetsenbord om te zien welke knop op dat moment actief is. De focusindicator moet een goede contrastverhouding hebben, van minimaal 3:1 met de achtergrond. Wat dat betekent, lees je in de volgende alinea. 

Zo maak je het contrast op je website toegankelijker 

Goed contrast tussen tekst en achtergrond is belangrijk voor de leesbaarheid, vooral voor mensen met visuele beperkingen. Joost deelt enkele tips om het contrast te verbeteren: 

• Gebruik contrasterende kleuren: Gebruik kleuren die goed contrasteren met elkaar. Gebruik bijvoorbeeld geen combinaties zoals lichtgrijs op wit, of lichtblauw op wit, omdat die moeilijk te lezen zijn voor veel gebruikers. Gelukkig zijn er in een kleurenschema genoeg mogelijkheden om een goed contrast door te voeren in een huisstijl. Het checken van kleurcontrast kan via de Inspector, die in elke browser zit. Maar wij gebruiken vooral de ‘Contrast Color Analyzer(CCA)’, een tool die zeer nauwkeurig kleurencontrast meet. Deze is gratis te downloaden en werkt op zowel Windows als op MacOS. 
• Contrastverhouding: Zorg voor een contrastverhouding van minimaal 4.5:1 voor normale tekst en 3:1 voor grote tekst (vanaf 18pt of 14pt én vetgedrukt). 

Deze toepassing helpt gebruikers met visuele beperkingen, zoals kleurenblindheid, om teksten op een website beter te kunnen lezen. 

Volgens Joost Claassen zijn deze veranderingen meestal gemakkelijk toe te passen. En ze kunnen een groot verschil maken in de toegankelijkheid van een website of applicatie. Dat is niet alleen een voordeel voor mensen met een beperking, maar voor iedereen. 

Kennis van toegankelijkheid vergroten met een training 

We delen onze kennis van toegankelijkheid graag met je. Of het nu gaat om het toegankelijk maken van een app of website, of van een gebouw, locatie of faciliteit. We hebben ontzettend veel ervaring met en kennis van digitale en fysieke toegankelijkheid. We maken kennisartikelen om anderen op weg te helpen én geven trainingen. Hierin kun je jouw kennis en vaardigheid vergroten. Daarna kun je zelf of als team zorgen dat jullie website volledig toegankelijk is. Wil je dit graag? Volg dan een van de trainingen van Accessibility. Ze staan voor je op een rij op deze webpagina. Of bel 030 - 239 82 70, dan denken we met je mee welke training het beste bij jouw wensen aansluit.