Snel naar hoofd content

Hoe te beginnen met web toegan­kelijk­heid

Met deze handige tips zet je de eerste stappen naar een toegan­kelijke website die aan de W​C​A​G 2.1 A​A richtlijnen voldoet.

Niet alleen voor developers

Ook al begint een groot deel van het toegankelijk maken van een website bij een developer. Veel ligt ook bij bijvoorbeeld ontwerpers en content beheerders.

Eerlijk is eerlijk, toegankelijkheid kan in het begin overweldigend zijn. Maar met onderstaande eerste stappen ben je al goed op weg.

Semantische H​T​M​L

Een goed beginpunt is om de H​T​M​L van je website op orde te hebben. Gebruik elementen waar ze voor bedoeld zijn en je website is voor een groot deel al toegankelijk.

Als developer zijnde is semantische H​T​M​L het belangrijkste waar je mee kunt beginnen.

Je H​T​M​L kan je eenvoudig controleren met de W​3​C validator.

W​3​C H​T​M​L validator

Checklist

The A​1​1​Y Project is een gemeenschap die de digitale toegankelijkheid makkelijker willen maken. Dit doen ze met het delen van artikelen maar ze hebben ook een enorm handige checklist. Onmisbaar bij het creëren van content of het ontwikkelen van code als je het mij vraagt. Zeker wanneer je bepaalde onderdelen voor het eerst ontwikkeld of wat naslagwerk wilt.

A​1​1​Y Project checklist

De A​1​1​Y Project checklist beschrijft niet alleen de technische aspecten van toegankelijkheid, maar ook de manier van content maken. Wat eigenlijk net zo belangrijk is als de techniek.

Scans

Er zijn veel verschillende tools op de markt om een toegankelijkheid scan te draaien. Sommigen zijn gratis, anderen weer betaald. Je zult begrijpen dat de betaalde oplossingen, over het algemeen, net wat beter zijn en meer de diepte in gaan dan de gratis varianten. Omdat ik mij in dit artikel wil focusen op de eerste stappen richting toegankelijkheid zal ik er één uitlichten.

Lighthouse

Het overgrote deel van desktop gebruikers maakt gebruik van Google Chrome. In Google Chrome zit Lighthouse geïntergreerd. In Lighthouse kun je onder andere de prestaties, zoekmachineoptimalisatie (S​E​O) maar ook de toegankelijkheid meten. Deze metingen kun je op een desktop of mobiele weergave doen.

Geen totaaloplossing

Let er op dat deze controle alleen op het technische vlak zoals H​T​M​L en C​S​S vlak is. Functionaliteit van bijvoorbeeld een logische tab volgorde of aria-attributen wordt niet gedaan.

Lighthouse is een mooi startpunt, maar zeker niet een totaaloplossing voor toegankelijkheid.

Lighthouse rapport gegeneren

Om Lighthouse te openen druk je F12 op je toetsenbord of je klikt je met een rechtemuisklik ergens op een webpagina en kiest vervolgens voor inspecteren.

DevTools wordt nu geopend. Kies vervolgens voor de tab Lighthouse en selecteer accessibility.

Een voorbeeld hoe je Ligthouse opent in DevTools

Kies vervolgens voor Analyse page load. De scan wordt uitgevoerd en er wordt een rapport gegenereerd met eventuele fouten op de betreffende pagina.

Een voorbeeld van een Lighthouse rapport

De eventuele fouten zijn gemakkelijk terug te vinden op de pagina en er worden suggesties gegeven hoe je deze kunt oplossen. Ook is het rapport te exporteren in verschillende formaten voor wanneer je deze rapportages wilt delen.

Meer weten over toegankelijkheid op het web?

De komende periode zal ik een aantal artikelen maken over web toegankelijkheid. Hierin licht ik dan steeds één onderwerp of best-practice uit op dit gebied.

Blog overzicht
Scroll naar boven