Online en offline toegankelijkheid

Tijdens de Coronacrisis waar we nu midden in zitten, zijn veel winkels minder of zelfs helemaal niet toegankelijk. Dit allemaal vanwege de pandemie en het verplichte deurbeleid. Winkels kunnen bezoekers helpen zich aan de verplichte 1,5 m afstand te houden. Dit kunnen ze doen door bijvoorbeeld vakken of aanduidingen op de vloer (zie foto) te maken. Een winkel kan het ook overlaten aan de bezoeker. Met een website is het eigenlijk net zo. Je kunt van alles doen om de toegankelijkheid van je website te verbeteren. Je kunt ook niks doen, waarom zou je?

Fotobron: rtlnieuws.nl

Richtlijnen

Voor de toegankelijkheid van het web zijn richtlijnen opgesteld. De zogenaamde WCAG. Deze zijn opgesteld door het w3c, een organisatie die zich bezig houdt met het standaardiseren van het web. De principes uit deze richtlijnen komen neer op het waarneembaar, bedienbaar en begrijpelijk maken van een website. Overheden zijn bijvoorbeeld verplicht om deze richtlijnen te volgen.

Toegankelijkheid in de praktijk?

Afgelopen week werd ik weer eens geconfronteerd met het belang van toegankelijke websites. Na het zien van een filmpje over de werking van een screen reader. De persoon in het filmpje die blind (slechtziend) is bezoekt een website en laat zien wat goed en niet goed werkt.

Wat kun je doen?

Naast dat een webbouwer voor een groot deel verantwoordelijk is voor de toegankelijk van een website kun je ook zelf een steentje bijdragen.

Wat kun je zelf?

De afbeelding alt tekst

Ik betrap mezelf vaak op mijn lakse houding als het om ‘alt’ teksten bij een afbeelding gaat. Een alt tekst is een korte beschrijving van een afbeelding op een website die je niet ziet. Voor iemand die blind of slechtziend is, is het verschil erg groot!

De mogelijke scenario’s:

  1. Geen alt tekst
  2. Gebruik een bestandsnaam bijvoorbeeld 'img-007.jpg'
  3. Een beschrijvende tekst bijvoorbeeld: 'Rennende hond op een voetbalveld'.

Één, je hebt geen alt tekst en het is alleen duidelijk dat het een afbeelding betreft. Twee zegt helemaal niets over de afbeelding behalve dat je weet wat de bestandsnaam is. Drie vertelt beschrijvend wat je op de afbeelding ziet. Duidelijk mag zijn dat scenario drie de beste is. Naast dat het toegankelijker is wordt Google er ook blij van!

Beschrijvende links

Hoevaak maken we niet een tekst en zeggen in de tekst ‘klik op deze link om’.... Dat zegt natuurlijk helemaal niks over deze link of waar die naar toe gaat. Doe je dit wel dan verbeter je de toegankelijkheid voor mensen die bijvoorbeeld blind zijn en de tab functie gebruiken om door de website te navigeren.

Wat kan een webbouwer doen?

De button tekst

Een button tekst is nog zo’n voorbeeld. Deze tekst is van groot belang voor mensen die afhankelijk zijn van een screen reader. Bevat een button alleen een icoon en geen tekst dan is de kans groot dat die button onbruikbaar is voor mensen met een beperking.

Toetsenbord als navigatie

Stel je kunt door een beperking niet overweg met een muis. Dan kun je het toetsenbord gebruiken om door een website heen te navigeren. De pijlen om te scrollen, tab om door de buttons en navigatie heen te navigeren en enter om te bevestigen. Het is dan natuurlijk wel mooi dat je visueel kunt zien waar je je bevindt met het gebruik van tabs. Je kunt er voor zorgen dat die tab index zichtbaar wordt op een website. Dat maakt het navigeren met een toetsenbord weer een stukje eenvoudiger.

Tabindex zichtbaar maken
Voorbeeld van een zichtbare tab navigatie

Tekst grootte

Via mobiele apparaten kun je vaak eenvoudig via de browser instellingen de grootte van het lettertype aanpassen. Op pc’s is deze functie een stuk minder gestandaardiseerd. Het is mogelijk om de tekst grootte door een bezoeker te laten aanpassen en deze keuze te onthouden voor een bepaalde tijd.

Test je eigen website

Google Chrome heeft een website audit functionaliteit (Lighthouse). Hiermee krijg je per pagina een score op verschillende fronten. Een van die fronten is toegankelijkheid. Het doel zou moeten zijn om 100 te scoren. Al zegt dat nog niet alles over de kwaliteit, het is een goed begin!

Hoe?

  • Klik binnen een geopende website in Google Chrome op je rechtermuisknop.
  • Klik op 'inspecteren'.
  • Ga naar het tabje 'Audits'. In dit geval helemaal rechts.
  • Klik op de blauwe knop 'Generate report'.