Maakt de broncode van je site deze lastig toegankelijk?

Een website die geoptimaliseerd is voor webtoegankelijkheid, levert je in veel gevallen een groter bereik, meer omzet en lagere kosten op. Maar wist je dat de kwaliteit van de broncode (de HTML, dat is de programmeertaal die je website op browsers laat verschijnen) de toegankelijkheid van je site behoorlijk in de weg kan staan?

Een website die geoptimaliseerd is voor webtoegankelijkheid, levert je in veel gevallen een groter bereik, meer omzet en lagere kosten op. Maar wist je dat de kwaliteit van de broncode (de HTML, dat is de programmeertaal die je website op browsers laat verschijnen) de toegankelijkheid van je site behoorlijk in de weg kan staan?

Lekker is dat! En nu?

In dit artikel wil ik je de vijf vaakst voorkomende fouten laten zien en je uitleggen hoe je jullie site hierop kunt checken, zodat je dat met jullie internetbureau kunt bespreken en kunt laten oplossen. 

1. Een menu dat je niet met een toetsenbord in of uit kunt klappen

Menu’s helpen je bezoeker om snel hun doel te bereiken. Maar wat nou als je gebruiker afhankelijk is van een toetsenbord, bijvoorbeeld omdat deze last heeft van RSI, reumatische artritis of de ziekte van Parkinson?

Je kunt makkelijk zelf testen hoe toegankelijk je navigatie is. Open je browser, en bezoek je eigen website. Klik nergens, maar probeer met de tab toets en de enter toets een pagina uit je hoofdmenu te openen. En als dat niet lukt, lukt het je dan wel om het menu weer te sluiten, zodat je de hoofdpagina verder kunt bezoeken?

2. Een knop die stiekem geen knop is

In HTML is er een apart element dat specifiek voor knoppen bedoeld is. Toch gebruiken developers allerlei andere methoden om knoppen te laten verschijnen. Zo op het eerste gezicht ziet niemand het verschil. Maar wanneer je om wat voor reden dan ook niet in staat bent om op die knop te klikken, dan kun je als gebruiker dus niet je doel bereiken, waardoor je als ondernemer belangrijke conversies mist. 

Of mensen die geen muis kunnen gebruiken wel op je knop kunnen ‘klikken’, kun je eenvoudig testen. Laad een willekeurige pagina op je website. Probeer daarna door alleen de tab- en de entertoets te gebruiken de knop te laten doen waarvoor deze bedoeld is. Bijvoorbeeld een product in een mandje laten plaatsen of naar een andere pagina gaan.

3. Koppen gebruiken voor andere doelen dan de pagina te structureren

Door koppen te gebruiken, kunnen je gebruikers makkelijker de tekst scannen. Zo kunnen ze bepalen waar de voor hen meest waardevolle informatie te vinden is. Mensen met een visuele beperking gebruiken vaak schermlezers. Deze schermlezers lezen de tekst hardop voor, maar ze kunnen bijvoorbeeld ook alleen de koppen voorlezen. Op die manier kunnen ook deze gebruikers snel vinden wat ze nodig hebben. Het is dus belangrijk om in je kopjes duidelijk weer te geven wat ze in de paragraaf erna kunnen verwachten. Bovendien is het niet handig om kop-elementen te gebruiken voor andere doelen. Zoals het vet of groter maken van stukken tekst.

Wanneer je een Content Management Systeem (CMS) zoals WordPress gebruikt en zelf content publiceert, kun je zorgen dat je de koppen op de juiste volgorde gebruikt. Gebruik per pagina maar één keer de h1, de kop van het hoogste niveau  en sla geen niveaus over. Dus gebruik na een h2 een h3, en niet bijvoorbeeld een h4. Het is lastiger te controleren of je kop elementen gebruikt voor andere doeleinden. Je kunt natuurlijk wel jullie internetbureau specifiek vragen om daarnaar te kijken. 

4. Voor de gebruiker bepalen hoe deze met tab door de site navigeert

Wanneer je graag wilt dat iemand een formulier invult, is het best begrijpelijk dat je veronderstelt dat je bezoeker met de eerste druk op de tabknop direct in het eerste veld terecht wil komen. Maar je gaat dan voorbij aan de grote groep gebruikers die verwacht dat die tab ze eerst door het hoofdmenu leidt. 

Je kunt ook dit testen door te proberen door diverse pagina’s te navigeren met alleen het gebruik van de tab- en de enterknop.

5. Een afbeelding als link gebruiken zonder extra hints toe te voegen

Een afbeelding kan een hele effectieve manier zijn om bezoekers tot actie te verleiden. Helaas kunnen je visueel beperkte bezoekers die afbeelding niet (goed) herkennen. Je kunt deze groep een enorm plezier doen door extra informatie aan de code toe te voegen die beschrijft waar je naartoe linkt. Je noemt dit de alt-tekst en in de meeste CMS-systemen kun je deze bij het uploaden van je afbeeldingen makkelijk toevoegen. Zo kunnen ook deze bezoekers bepalen of dit hen helpt hun doelen te bereiken en krijg je die welverdiende klik.
Wist je trouwens dat zoekmachines als Google deze extra informatie ook gebruikt om te bepalen voor welke zoektermen je pagina relevant is?

De zelfscan toegankelijkheid, die Level Level voor Thuiswinkel.org ontwikkeld heeft, laat je zien of je niet vergeten bent om deze extra informatie aan je afbeeldingen toe te voegen. Het kan dus handig zijn om naast de homepage ook pagina’s te checken die je net gepubliceerd hebt. 

Samen met de resultaten van de Zelfscan Toegankelijkheid heb je hiermee een aardige eerste indruk van hoe het gesteld is met de toegankelijkheid van je website. Kom je er na de Zelfscan niet uit? Neem dan gerust contact met ons op.