Razendsnel, 100 punten! Webaccessibility in een snelle omgeving, en een vuurwerkshow voor Lighthouse!

Laten we webtoegankelijkheid tot in de puntjes beheersen!

"We hebben topfrontend-ontwikkelaars en topmarkupexperts, en we werken ook aan de UI van een marketingautomatiseringstool. Webtoegankelijkheid moet dan toch een koud kunstje zijn!" Met die naïeve gedachte begon het webtoegankelijkheidsproject van Liberogic... en het werd al snel een gevecht van formaat. Omdat we ons het ambitieuze doel hadden gesteld om volledig te voldoen aan WCAG 2.2, zijn er jarenlange studiesessies en eindeloze discussies geweest. Eerlijk gezegd hebben we onderschat hoe zwaar dit werk zou zijn.

Als ik terugdenk aan de toegankelijkheidsstudiesessies in de beginfase van het project enkele jaren geleden:
"Wat is het verschil tussen WCAG en JIS X 8341-3:2016?"
"WCAG 2.0 en JIS X 8341-3:2016 zijn hetzelfde!"
Zo begon een lange, lange reis met dit soort basale vragen.
"Begrijp ik dit succescriterium zo goed?"
"Nee, dat is het criterium van onze kant."
Na eindeloze discussies en herzieningen konden we eindelijk WCAG 2.2 niveau AA als doel nastreven.

Laten we onze eigen website opnieuw bouwen!

"Past onze website eigenlijk niet bij ons bedrijf?"
Zo begon de vernieuwing van onze eigen site.
"Als we het dan toch doen, dan met volledige focus op toegankelijkheid en SEO!"
Het spreekt vanzelf dat ons drukke, maar zeer capabele team er (vermoedelijk) met veel enthousiasme mee aan de slag ging.

"Deze kleur heeft een contrastverhouding die niet voldoet!"
"Maar het ziet er toch goed uit voor het ontwerp..."
"Kunnen we dit niet binnen de regels aanpassen?"
Zo werd er geëxperimenteerd en bijgesteld, op het snijvlak van design en toegankelijkheid.
Bij de markup werkten we braaf door een meedogenloze checklist met testpunten af.

Eindelijk klaar!
Hoewel we ruim achter op schema lagen, voelden we duidelijk dat we technisch een grote stap vooruit hadden gezet.

100 punten gehaald met Lighthouse! En ook een hoge score bij PageSpeed Insights!

We wisten al dat onze site, gebouwd met Astro + microCMS + Cloudflare, een hoge score zou halen in Lighthouse. Toegankelijkheid is uiteraard helemaal in orde! De accessibility-audit van Lighthouse maakt gebruik van de betrouwbare axe-core, dus de inzet voor WCAG-conformiteit wordt er vrij rechtstreeks op beoordeeld.

Qua performance bleef de score in het begin wat achter, omdat er veel afbeeldingen zijn en we veel dingen dynamisch laten bewegen. Pas nadat we de manier waarop webfonts worden geladen hadden geoptimaliseerd, de compressie en het formaat van afbeeldingen hadden herzien en de laadprioriteit van resources hadden bijgesteld, kwam het moment eindelijk: het harde, handwerk van telkens weer finetunen had zijn vruchten afgeworpen!

＼ 100 punten! ／

Alle onderdelen van Lighthouse op desktop scoorden de maximale 100! En het gerucht bleek waar te zijn. "Oho! Als je in Lighthouse alles op 100 krijgt, vuurt Google dan echt vuurwerk af als felicitatie?"

"Serieus? Onze vorige site haalde amper 80 tot 90 punten. Astro heeft er vast mee te maken, maar dit is echt indrukwekkend!"

Ook PageSpeed Insights, de prestatiemeetweb-tool van Google, gaf ons vanzelfsprekend een score van 100.

Alleen PageSpeed Insights kent geen speciale effecten (vuurwerk). Omdat we steeds afwisselend een 99 en een 100 kregen, hopen we dat Google ook voor dit hulpmiddel een feestelijke animatie toevoegt. 🎇

Overigens: scores in Lighthouse en PageSpeed Insights kunnen per meting verschillen, afhankelijk van de netwerkomstandigheden, de status van de server en de browser op het moment van meten. Dus ook al hebben we ooit 100 punten behaald, het is niet vanzelfsprekend dat we die score altijd vasthouden.

Een performancescore van 100 op mobiel is waarschijnlijk onhaalbaar... Hier is het in ieder geval. (↑ Ik had destijds geen screenshot gemaakt, dus dit is een recente opname.)

Het echte doel ligt voorbij de score

"Nee, maar als we dit vanuit het oogpunt van de gebruiker bekijken, is dit toch vanzelfsprekend?..."

Ik denk dat het resultaat van het consequent ontwerpen voor iedereen die de website daadwerkelijk gebruikt, en niet van het nastreven van een score, ook tot de beste beoordelingen leidt. "Score 100" is slechts een tussenstation. Het echte doel is een website bouwen die voor iedereen prettig en gemakkelijk te gebruiken is!!

Op dit moment voeren we, om de haalbaarheid van ons werk te controleren, verschillende experimentele functies uit, waardoor de Lighthouse-score lager ligt dan destijds. Ik blijf naïef roepen "Waarom, waarom?", maar het spreekt voor zich dat de haalbaarheidscontrole van ons werk voor iedereen belangrijker is dan mijn eigenwijsheid.

Zo gaat onze onverzadigbare zoektocht dan ook gewoon door.