Een duidelijke HTML-structuur en goed gebruik van elementen en attributen is essentieel voor digitale toegankelijkheid. Daarmee zorg je niet alleen voor een groter bereik, maar ook voor betere vindbaarheid.
Alle nieuwe én bestaande websites van overheidsorganisaties moeten vanaf september 2020 voldoen aan het Tijdelijk Besluit Digitale Toegankelijkheid, waarbij je ondere andere moet zorgen voor voldoende contrast.
Voorleessoftware gebruiken
In deze blog wil ik het met je hebben over het fundament van je site: de achterkant. Daar moet je namelijk een duidelijke HTML-structuur neerzetten en de juiste elementen en attributen gebruiken om digitaal toegankelijk te zijn. Voorleessoftware, of screenreaders en schermlezers, gebruiken die namelijk om gebruikers met een visuele beperking te bedienen. Zonder goede structuur, elementen en attributen wordt dat voorlezen dus een stuk ingewikkelder.
Voorleessoftware leest in principe van links naar rechts en van boven naar beneden. De volgorde van de inhoud die je op de site presenteert is dus zeer relevant. Daarnaast gebruikt de software HTML-elementen om die voorleessoftware goed te bedienen. Zo vertellen die elementen de software bijvoorbeeld wat de menubalk is, wat het zoekveld is en wat koppen, tussenkopjes en paragrafen zijn. De gebruiker van die software kan zo makkelijk aangeven wat hij wel en niet voorgelezen wil hebben en waar hij wel en niet op wil klikken.
Vindbaarheid op Google
Gebruikers van voorleessoftware hebben er enorm veel baat bij als ontwikkelaars HTML-code alleen gebruiken voor het goed structureren van de inhoud. Maar ook Google en andere zoekmachines vinden dat prettig: die zijn doorgaans namelijk technisch ‘blind’ en hebben de HTML-elementen en attributies nodig om te begrijpen hoe jouw site eruit ziet.
Een goed voorbeeld hiervan is het gebruik van de lang=””-tag. Wanneer deze niet correct is opgenomen weet Google (en voorleessoftware) niet in welke taal de content is geschreven en is het dus onmogelijk om deze te indexeren of voor te lezen.
Semantische HTML
Het is belangrijk dat je zogenoemde semantische HTML gebruikt en niet in de weer gaat met inline styling en JavaScript om de verschillende onderdelen te laten doen wat jij wilt dat ze doen. De voorleessoftware kan namelijk niet goed omgaan met CSS en JavaScript.
Wees dus zo specifiek mogelijk. Gebruik bijvoorbeeld alleen het algemene <div>-element als er geen specifieker element voorhanden is. Voorleessoftware kent namelijk specifieke eigenschappen toe aan zo’n specifiek element. Zo kan een gebruiker van die software op het element <button> klikken om bijvoorbeeld een video af te spelen, terwijl hij met het element <div> die mogelijkheid niet krijgt.
Afgekeurde elementen en attributen
Een tijdlang werd HTML ook veel gebruikt voor de layout van een website. Na de introductie van CSS in 1996 nam dat weliswaar af, maar nog steeds stoppen ontwikkelaars weleens wat elementen in de code die iets over de opmaak zeggen. En dat terwijl veel van die elementen en attributen bij de introductie van HTML 4 in 1998 al werden afgekeurd.
Voorleessoftware kan met de meeste van die afgekeurde elementen niet goed omgaan. Daarom is het gebruik hiervan volgens de richtlijnen van een toegankelijke website niet meer toegestaan. Een voorbeeld is het align-attribuut dat je bij veel HTML-elementen kunt specificeren. Het gebruik van Alignment moet je nu met stylesheets regelen. Gelukkig kun je voor bijna alle elementen en attributen prima alternatieven in style sheets vinden.
Veel succes met het digitaal toegankelijk maken van je websites. Voor hulp en nader advies kun je altijd contact met me opnemen.
