We lezen van alles over het belang van toegankelijkheid op het web. Maar er zijn ook genoeg mensen die vinden dat er binnen de doelgroep van hun website helemaal geen vraag is naar toegankelijkheids technologieën. Wat nu als ik zeg dat de juiste informatie mist? En dat je beeld over mensen die gebruik maken van toegankelijkheid technologieën niet correct is? In deze blogpost vertel ik alles wat men uit het oog verliest bij toegankelijkheid.
Wie zijn die mensen?
Allereerst, de groep van mensen die afhankelijk is van toegankelijkheids technologieën is vele male groter dan je denkt. Je hoeft niet blind te zijn om een schermlezer te moeten gebruiken. Schermlezers zijn ook voor mensen die;
- slecht zien,
- niet goed tegen licht kunnen,
- niet in staat zijn naar hun beeldscherm te kijken,
- een taalstoornis hebben of
- simpelweg niet kunnen lezen gebruiken schermlezers.
Maar het blijft niet bij enkel de technologie zoals de schermlezer. Ook mensen die een motorische afwijking hebben, of niet in staat zijn om te muizen, gebruiken veelal hun toetsenbord of een ander input device om te navigeren. En dan zijn we er nog steeds niet. Mensen die veel last hebben van veel bewegende beelden gebruiken schermlezers of software die hun scherm vertraagd, omdat veel websites flitsende en bewegende animaties gebruiken om de laatste aanbiedingen te laten zien. Of mensen die overgevoelig zijn voor licht en het liefst een donker thema willen hebben.
En ook in dit blog zal ik vast een situatie niet beschreven hebben die hier wel thuis hoort. De doelgroep is namelijk echt groot en divers. Volgens stichting appt heeft ongeveer de helft van alle mobiele app gebruikers een vorm van toegankelijkheidshulp aanstaan. Deze hulp varieert van verhoogt contrast of grotere letters tot schermlezer.
En er zijn dus serieus veel mensen die extra software of randapparatuur nodig hebben om hun computer te bedienen. En zonder die computer kan eigenlijk niemand meer in de huidige maatschappij. Belangrijk is het daarom dat je website bruikbaar is voor die software. Dit klinkt ingewikkeld, maar eigenlijk is het heel simpel: gebruik HTML in een gestructureerde manier, zodat software hier goed mee om kan gaan. Het bijkomende voordeel hiervan is dat zoekmachines zoals google dan ook beter om kunnen gaan met de content op je website.
Gebruik je toetsenbord
Een groot deel van de doelgroep is afhankelijk van een toetsenbord of softwarematige navigatie. Deze mensen kunnen niet werken met een muis! Het meest extreme voorbeeld hierin is een blind persoon. Maar niet iedereen die afhankelijk is van meer dan een muis, ziet helemaal niets. Voor al deze mensen is het dus belangrijk dat je website muisloos te gebruiken is. Dit betekent dat veel van de technieken die wij (helaas) normaal zijn gaan vinden, dan niet werken. Geen “als je met je muis op een menu staat klapt hij uit” of “als je op de afbeelding klikt dan gebeurt er iets”.
Technisch betekent dit: geen hover states en geen onclicks. Maar dat betekent niet dat uitklapmenu’s of knoppen helemaal niet meer werken. Zorg dat ze ook werken met enkel toetsenbord navigatie door expliciet ook de acties uit te voeren bij een toetsenbord focus. En gebruik expliciet daarvoor bedoelde klikbare elementen, zoals linkjes en knoppen, en denk niet dat zomaar elk element met een onclick magisch klikbaar is voor iedereen. Hoe test je dit? Heel simpel, navigeer door je website met alleen maar tab en enter. Mensen die hiervan afhankelijk zijn, hebben iets meer controle dan enkel tab en enter, maar als het daarmee lukt, ben je al een heel eind op weg.
Zorg voor een duidelijke structuur
Origineel is HTML bedoeld als manier om structuur te geven aan platte tekst. Mettertijd is deze structuur verwaterd omdat we alles kunnen opmaken zoals we willen. Maar voor schermlezers bestaat die opmaak veelal niet. Probeer daarom zo veel mogelijk een logische structuur te houden.
<header>
<h1>Wat niemand je verteld over toegankelijkheid</h1>
</header>
<main>
<section>
<h2>Wie zijn die mensen?</h2>
<p>...</p>
</section>
<section>
<h2>Gebruik je toetsenbord</h2>
<p>...</p>
</section>
<section>
<h2>Zorg voor een duidelijke structuur</h2>
<p>...</p>
</section>
</main>Een goed voorbeeld is dat alle titel elementen op de goede volgorde staan. Klinkt eigenlijk best logisch toch? Een artikel begint bijvoorbeeld met de titel ‘in X stappen …’ de eerstvolgende tussenkop is dan ‘stap 1’. In HTML gebruiken we H1 tot H6 (of meer) om titels te geven aan stukken tekst. Dus ‘in 6 stappen’ krijgt van ons een H1. De H2 geven we mee aan ‘Stap 1’.
Om dit blogpost als voorbeeld te nemen: de blogpost titel zelf is een H1 en deze subsectie “Zorg voor een duidelijke structuur” is een H2. Schermlezers en zoekmachines kunnen dan makkelijk een inhoudsopgave genereren en zo kan men de pagina makkelijker navigeren.
Als je zelf je website heb proberen te navigeren met tab, zal het je opvallen dat je vaak door veel menu elementen moet gaan. Wat je kan doen is een verborgen link maken, die zichtbaar wordt op keyboard focus, die linkt naar het eerste relevante content element.
Zoals je leest is er meer om je website toegankelijk te krijgen dan enkel wat aria tags toevoegen, maar het is ook simpeler dan je initieel zou denken, zonder dat je hoeft in te leveren op functionaliteit of uiterlijk. Wil je meer weten, lees een van onze andere artikelen over toegankelijkheid, of neem contact met ons op, wij helpen je graag!
