Waar raken responsive design en toegankelijkheid elkaar?

Op vier punten, en dat is handig om te weten omdat je ze in één keer kunt oplossen.

De WCAG-eis over herschikken vraagt dat je pagina bruikbaar blijft op een breedte van 320 pixels zonder horizontaal scrollen. Dat is precies wat responsive design moet doen, dus wie het een goed doet, haalt het ander.

De eis over inzoomen vraagt dat tekst tot 200 procent vergroot kan worden zonder dat er iets wegvalt. Vaste hoogtes in de opmaak zijn hier de gebruikelijke boosdoener, want dan loopt de tekst uit zijn blok.

De eis over klikvlakken vraagt minimaal 24 bij 24 pixels. Dat is een responsive vraagstuk zodra iconen op mobiel kleiner worden meegeschaald.

En de eis over de leesvolgorde vraagt dat de volgorde waarin een schermlezer de pagina voorleest logisch blijft. Bij CSS Grid kun je blokken visueel verplaatsen zonder de volgorde in de HTML te wijzigen, waardoor wat je ziet en wat wordt voorgelezen uit elkaar gaan lopen.

Dat laatste is de valkuil die je alleen vindt als je erop test. Visueel klopt het, in de code niet.