Homepage checklist: is jouw homepage digitaal toegankelijk?

De homepage van jouw website is de plek waar je jouw klanten, gebruikers of bezoekers welkom heet. Vergelijk het met de entree van je winkel of de ontmoetingsruimte in jouw kantoor. Homepage checklist: is hij ook digitaal toegankelijk?

Grote kans dat je er in je winkel of kantoor alles aan doet om iedereen een goede eerste indruk te geven. Hoe zit dat dan met de homepage van je website? Zorgt die ook voor een prettige ervaring voor alle bezoekers? Met andere woorden: is jouw homepage digitaal toegankelijk? De homepage checklist uit dit artikel helpt je hiermee.

Hoe toegankelijk zijn homepages?

De eerste belangrijke vraag van de homepage checklist is: hoe staat het er nu mee? Kan iedereen jouw homepage gebruiken of sluit je direct bij de entree al een deel van je bezoekers uit? Hiermee bedoel ik mensen met een visuele, auditieve, motorische of cognitieve beperking. Wist je dat dit bij elkaar ongeveer 25% van de totale bevolking is? Dat is dus 1 op de 4 mensen.

De Amerikaanse organisatie WebAIM voert sinds 2019 elk jaar een onderzoek uit naar de toegankelijkheid van 1 miljoen homepages wereldwijd, dus dat is een goede graadmeter om te ontdekken hoe toegankelijk homepages zijn. Het resultaat is alleen niet heel erg hoopvol. Uit het onderzoek van februari 2022 blijkt namelijk dat 96,8% van al deze homepages toegankelijkheidsproblemen bevat en dat er gemiddeld 50,8 fouten op de homepages staan. Lees de vorige zin nog maar een keer, om het even goed op je in te laten werken…

96,8% van de homepages bevat toegankelijkheidsproblemen. Gemiddeld bevat een pagina 50,8 fouten.

Enkele opvallende resultaten uit het onderzoek wil ik graag met je delen:

• Websites van overheden, social media, wetenschap en techniek bevatten de minste toegankelijkheidsproblemen.

• Websites over sport, mode, nieuws, onroerend goed en webshops bevatten de meeste toegankelijkheidsproblemen.

• Engelstalige websites hebben de minste fouten, maar websites in de talen Chinees en Farsi hebben de meeste fouten.

• Websites die de CMS’en Drupal en Typo3 gebruiken, bevatten in het algemeen minder toegankelijkheidsproblemen dan websites die gebouwd zijn met WordPress.

• Op één specifieke homepage zijn maar liefst 68.826 toegankelijkheidsproblemen gevonden.

• Op de onderzochte websites wordt steeds meer en steeds vaker WAI-ARIA gebruikt. Ondanks dat dit bedoeld is om de toegankelijkheid te verbeteren, leidt het vaak juist tot een verslechtering in de toegankelijkheid.

Ondanks dat deze cijfers enigszins zijn verbeterd ten opzichte van de voorgaande jaren, is dit nog steeds schokkend. Tenminste, dat vind ik. Deze cijfers zeggen misschien niet direct iets over jouw homepage, maar in de praktijk zien wij ook regelmatig dat de homepage – waar je dus je bezoekers welkom heet – drempels opwerpen voor mensen met een beperking. Dat is natuurlijk zonde, want zo jaag je ze meteen weer weg. Alle marketing- en SEO-werkzaamheden worden daarmee voor een groot deel tenietgedaan.

Meest voorkomende problemen

Uit het onderzoek van WebAIM komen de volgende problemen het meest voor:

• Op 83,9% van de homepages hebben teksten een te laag contrast ten opzichte van de achtergrondkleur. Mensen die slechtziend of kleurenblind zijn, kunnen daardoor informatie missen.

• Op 55,4% van de homepages ontbreekt bij informatieve afbeeldingen een tekstalternatief. Mensen die blind zijn, kunnen daardoor niet achterhalen wat op de afbeelding staat of wat een icoon doet.

• Op 50,1% van de homepages zijn links leeg of hebben links een onduidelijk doel. Gebruikers van hulpsoftware weten daardoor niet waar deze links naartoe gaan.

• Op 46,1% van de homepages missen invoervelden in formulieren een label. Hierdoor is het niet voor iedereen duidelijk wat in deze velden ingevoerd kan of moet worden.

• Op 27,2% van de homepages staan knoppen die leeg of onduidelijk zijn. Ook hier weten mensen die hulpsoftware gebruiken niet wat deze knoppen doen.

• Op 22,3% van de homepages mist een taal. Hierdoor kan het gebeuren dat bijvoorbeeld een schermlezer de verkeerde voorleesstem gebruikt, waardoor het heel moeilijk te volgen is.

Het goede nieuws is: al deze problemen zijn vrij makkelijk en snel te verhelpen met een homepage checklist.

Homepage checklist op toegankelijkheid

Wil je voorkomen dat jouw homepage de hierboven genoemde toegankelijkheidsproblemen bevat? Doorloop dan de volgende homepage checklist digitale toegankelijkheid. Hierbij worden diverse eisen uit de Web Content Accessibility Guidelines (WCAG) aangehaald. Dit is een set met meetbare succescriteria waarmee bepaald kan worden hoe toegankelijk een website is.

#1 Controleer het kleurcontrast en pas dit aan

Teksten op je homepage (en natuurlijk op andere pagina’s) moeten een goed kleurcontrast hebben ten opzichte van de achtergrond. Hier hebben we al eerder een artikel over geschreven: Goed kleurcontrast: zorg dat je alles goed ziet.

Voldoet het contrast niet, kies dan een kleur die wel voldoende contrast heeft met de achtergrond. Is dit – bijvoorbeeld vanwege huisstijlkleuren – echt niet mogelijk, dan kun je overwegen om een contrastschakelaar aan te bieden. Zo bied je alle bezoekers de mogelijkheid om teksten met een te laag contrast alsnog te lezen.

#2 Geef informatieve afbeeldingen een goed tekstalternatief

Informatieve afbeeldingen, iconen en andere niet-tekstuele content hebben een tekstalternatief nodig, zie WCAG-succescriterium 1.1.1. Bepaal daarom voor elke afbeelding of dit informatief is voor de bezoeker. Is dat het geval, geef het dan een tekstalternatief dat aangeeft wat op de afbeelding te zien is. Meestal kun je dit in de editor van je CMS toevoegen bij de eigenschappen van de afbeelding.

Als er belangrijke iconen – zoals een kruis om een menu te sluiten of een loep waarmee een zoekveld wordt getoond – zijn, dan moet het tekstalternatief aangeven wat dit icoon doet. Dit kan iets simpels zijn als “Menu sluiten” of “Zoekveld openen”. Vaak is dit iets dat de webbouwer voor je kan doen.

In de praktijk hoor ik vaak dat het best lastig is om te bepalen of een afbeelding een tekstalternatief nodig heeft en wat dit dan moet zijn. Op de volgende Engelstalige pagina staat een stappenplan dat je hiermee kan helpen: An alt decision tree.

Een tip hierbij is dat je niet hoeft te schrijven “Afbeelding van”. Hulpsoftware – zoals een schermlezer – geeft namelijk al aan dat het een afbeelding is.

#3 Geef links en knoppen een duidelijke omschrijving

Volgens meerdere WCAG-succescriteria moeten interactieve elementen – zoals links en knoppen – een naam hebben. Die naam moet vervolgens goed omschrijven wat de link of knop doet. Zie onder andere succescriteria 2.4.4, 2.4.6, 2.5.3 en 4.1.2.

Let op: de naam van de link of knop moet in ieder geval de zichtbare tekst bevatten (als die aanwezig is). Dit gaat helaas niet altijd goed, bijvoorbeeld als de link een afbeelding met tekst is of als een aria-label wordt gebruikt.

#4 Voorzie invoervelden van een label

Bied je op de homepage een formulier aan, bijvoorbeeld om in te loggen op een persoonlijke pagina of om in te schrijven voor een nieuwsbrief? Zorg er dan voor dat je bezoekers weten wat ze hier moeten invullen. Ook hiervoor zijn toegankelijkheidseisen vastgesteld, zie bijvoorbeeld succescriteria 1.3.1, 3.3.2 en 4.1.2 van de WCAG.

We zien in de praktijk dat dit helaas niet altijd goed gaat. Bijvoorbeeld als in het design geen ruimte is gemaakt voor een tekstlabel of als er maar één label wordt gebruikt voor meerdere invoervelden. Realiseer je dat niet iedereen dan begrijpt wat hier ingevoerd moet worden. Bijvoorbeeld mensen die de website niet visueel zien, maar hulpsoftware gebruiken om de website waar te kunnen nemen. Vaak is dit iets dat je samen met de webbouwer kunt oplossen.

#5 Zorg voor de juiste taal van de pagina

Het laatste punt is iets dat je meestal maar één keer instelt of laat instellen en waar je vervolgens niet meer naar om hoeft te kijken. Elke pagina heeft namelijk een taal nodig en dit moet ook de juiste taal zijn. De eisen hiervoor zijn vastgelegd in WCAG-succescriterium 3.1.1. Een Nederlandstalige website moet dus bijvoorbeeld de Nederlandse taal hebben.

Let wel op als je delen van de pagina in een andere taal hebt. Daarvoor moet je namelijk volgens succescriterium 3.1.2 een taalwisseling aangeven, zodat hulpsoftware ook kan schakelen naar een andere taal.

Maak je homepage toegankelijk(er)

Met de bovenstaande aanpassingen vanuit de homepage checklist zorg je ervoor dat jouw homepage in ieder geval niet de meest voorkomende problemen bevat. Deze aanpassingen zijn in de regel vrij makkelijk en snel te doen. Kom je er niet uit en wil je hier ondersteuning bij? Weet dan dat onze consultants voor je klaarstaan.