Afbeelding

Een toegankelijke website voor iedereen

Wie?

Tobania.Digital

Onze missie?

Het doel van dit project was eenvoudig: onze website toegankelijk maken voor elke bezoeker, ook voor mensen met een functiebeperking.

Kick-off workshop

We schakelden de experts van AnySurfer in om meer over accessibility te leren. In een kick-off workshop bespraken we de verschillende vereisten waaraan een toegankelijke website moet voldoen. Een namiddag vol eye openers.

Eerste rapport

Dankzij een eerste rapport waren we in staat om onze website heel gericht en efficiënt te verbeteren. Dit namen we in fase 1 onder handen:

  • Optimalisatie van de navigatie via de tabtoets;
  • Correct gebruik van alt-teksten;
  • Video’s voorzien van een transcript;
  • Onnodig bewegende elementen vermijden.
Afbeelding

Aanpassen & testen

In de daaropvolgende dagen, gingen onze ontwikkelaars volop aan de slag met de verbeterpunten. Checkpoint na checkpoint werd aangevinkt. Video’s werden voorzien van de nodige beschrijvingen. De modules werden aangepast en de content geoptimaliseerd.

Enkele verbeterpunten

 

Te veel alt-attributen

We zorgden er altijd voor dat alle afbeeldingen netjes voorzien waren van een alt-tekst. Uit de analyse bleek dat we hierin te ver waren gegaan. Afbeeldingen met een louter decoratieve functie mogen gerust overgeslagen worden door een screen-reader, dus mag het alt-attribuut ook achterwege gelaten worden.

Google’s reCAPTCHA, een lastpost

Om onze mailbox af te schermen voor SPAM, opteerden we voor de veelgebruikte reCAPTCHA (“I’m not a robot”) van Google. In het rapport lazen we dat de reCAPTCHA voor veel mensen problematisch is.

Een vinkje is niet altijd voldoende. Google vraagt je dan om een extra handeling: foto’s waarin je bepaalde elementen moet aanduiden. Die foto’s zijn voor onze slechtziende bezoekers een niet-te-nemen hindernis. Soms krijg je een cijferreeks te horen. Het audiofragment is enkel beschikbaar in het Engels. We mogen er niet vanuit gaan dat onze bezoeker een ander taal begrijpt dan de pagina-taal.

Daarom gebruiken we vanaf nu de Honeypot Module. Deze maakt gebruikt van de Honeypotmethode in de vorm van een ‘hidden field’ dat leeg hoort te blijven. Deze module gebruikt ook een tijdsrestrictie, bijvoorbeeld van minimum 5 seconden, om SPAMbots te vatten.

De native video player

Ook de native video player voldoet niet aan de standaarden van de WCAG A (Web Content Accessibility Guidelines A). Deze speler bevat best wat toegankelijkheidsproblemen door het HTML-video-element.

De aard van het probleem hangt af van de browser die je gebruikt. We hebben de native video player door een YouTube player vervangen. Voor ons betekende dit dubbele winst: deze player voldoet aan de standaarden én we hoeven geen video-opslagruimte te voorzien.

Daarnaast voorzagen we onze video’s van ‘transcripts’: de tekst die in de video uitgesproken wordt en een omschrijving van wat er te zien is. Iemand die de video alleen bekijkt of alleen beluistert, krijgt zo dezelfde informatie als iemand die beide doet.

De cookiemelding

De cookiemelding stond helemaal onderaan in de broncode. Het nadeel hiervan is dat iemand die door de website navigeert met het toetsenbord, eerst de complete inhoud van de site moet doorkruisen. Pas dan bereikt de gebruiker de cookiemelding. Hetzelfde geldt voor screenreaders.

De oplossing was (zoals vaak) eenvoudig: door de melding helemaal bovenaan de broncode te plaatsen, krijgt de cookiemelding als eerste de aandacht. Visueel hebben we niets aan de cookiemelding moeten veranderen.

Focus & contrasten

Een belangrijk aandachtspunt in de analyse was het gebruik van voldoende contrast in de lay-out van onze website. Tekst en afbeeldingen die een belangrijke rol spelen, horen een contrastwaarde van 3:1 te hebben.

Voor deze fase, WCAG A, hebben we in de eerste plaats ervoor gezorgd dat linken duidelijk onderlijnd zijn. Belangrijke tekst valt nu voldoende op door de woorden vetgedrukt te maken. Wie met het toetsenbord door de website navigeert, zal duidelijk kunnen zien op welk element de focus ligt aan de hand van een kader.

Afbeelding

Tweede rapport

Na deze grondige aanpassingen lieten we onze website opnieuw screenen. En met succes! De Tobania.Digital site voldoet nu aan alle richtlijnen die gekoppeld zijn aan WCAG – A. Daardoor kregen we het AnySurferlabel toegekend.

Wat nu?

We zien dit absoluut als een succes, maar onze ambitie gaat verder. Er resten ons nog een aantal opmerkingen om ook te voldoen aan de strengere WCAG - AA-richtlijnen. Daar streven we naar.

Vanaf 23 september 2020 is de digitale toegankelijkheid (WCAG 2.1 AA) wettelijk verplicht voor websites (en 2021 voor apps) van alle staats-, regionale en lokale overheidsinstanties en publiekrechtelijke instellingen in het land. Daar horen ook steden en gemeenten bij, (sommige) NGO’s en openbaarvervoermaatschappijen als de NMBS en De Lijn.

Eye-opener

Dit project heeft onze ogen geopend. Een gebruiksvriendelijke website is veel meer dan een overzichtelijk menu, een duidelijke hiërarchie en goed geschreven teksten. Om echt gebruiksvriendelijk te zijn, moeten we eens in de schoenen van de ander staan.

Klaar om ook jouw website onder handen te nemen? Wij kennen de kneepjes van het vak!

Je eigen project bij Tobania.Digital? Dat kan!

Neem contact op met ons

scroll to top