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.
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.
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!