Wat voor inzicht biedt Lighthouse aan toegankelijkheid

In dit blog laat ik zien hoe je een test doet met Google Lighthouse om de toegankelijkheid van je website te checken.

Waarom is de toegankelijkheid zo belangrijk, dat legt Google in dit artikel uit. Kort gezegd gaat het over dat de content beschikbaar is en de functionaliteit kan worden bediend door iedereen. Google kijkt dan naar de volgende principes;

Waarneembaarheid: Kan een gebruiker de content waarnemen, denk bijvoorbeeld aan beperkingen als kleurenblindheid.

Bedienbaarheid: Kan iedere gebruiker de UI gebruiken ook zonder een muis met bijvoorbeeld alleen touch screen.

Begrijpelijkheid: Kunnen gebruikers de content begrijpen en kunnen de computers die zij gebruiken de content ook begrijpen.

Robuustheid: Kan iedere browser goed omgaan met de website, denk hier ook aan assistive technologie.

Lighthouse test op sigmasolutions.nl

In Google Chrome kun je via het inspecteren van de site naar de tab Lighthouse waar je een audit kan doen. In dit geval kiezen we alleen voor ‘accessibility’ voor desktop.

Door te klikken op ‘Generate report’ krijgen we een uitslag met optimalisaties die Google ziet op basis van Accessibility.

Optimalisaties gevonden

Er zijn een aantal optimalisaties gevonden die een gebruiker zou kunnen beperken in het bezoeken van de site.

Contrast

Zo kijkt Google naar contrast wat neerkomt op de waarneembaarheid van de site. Google geeft een contrastratio van jouw content t.o.v. de achtergrond waarop deze content wordt getoond. Deze contrastratio kun je verbeteren door kleuraanpassingen te doen. Leer daar meer over in dit artikel.

Namen en labels

Daarnaast geeft Lighthouse een aantal suggesties om de semantiek van de website te verbeteren. Hiermee zijn functionaliteiten beter bedienbaar, zo zijn er een aantal icoon buttons die geen herkenbare naam hebben als link tekst, het kan voorkomen dat je een button een bepaalde link wilt geven zonder een tekst weer te geven, in dat geval kun je een aria-label attribuut toevoegen aan de button icoon.

Geslaagde controles

Ook geeft Lighthouse aan wat al wel goed gaat, belangrijk is om die ook door te nemen, hiervan kun je leren en dit toepassen op andere sites om daar semantisch gezien ook een goede toegankelijke site neer te zetten.