Websites moeten zich automatisch aanpassen aan kleinere schermen of hogere zoomniveaus, zonder dat je horizontaal hoeft te scrollen om de gewone tekst te lezen.
Waarom is dit belangrijk?
Steeds meer mensen bekijken websites op hun telefoon, tablet of een ander klein scherm. En mensen met een visuele beperking gebruiken vaak een vergrote weergave (ingezoomd). Als websites zich niet aanpassen aan andere resoluties, zijn ze moeilijk te gebruiken.
Wat moet je doen?
Zorg dat je website op kleine schermen en bij inzoomen aan de volgende punten voldoet:
- De website blijft goed werken tot 400% zoom.
- De bezoeker hoeft niet horizontaal te scrollen om gewone tekst te lezen.
- De inhoud moet zich netjes schikken binnen het scherm (‘reflow’).
- Navigatie, formulieren, knoppen en andere elementen blijven bruikbaar.
Wat is niet verplicht?
- Je hoeft geen aparte mobiele versie te maken. Dat is ook niet nodig: een goed ontworpen, responsieve website past zichzelf automatisch aan.
- De vormgeving hoeft niet onder alle omstandigheden perfect te blijven, als de site maar bruikbaar blijft.
- Elementen zoals grote tabellen, kaarten of grafieken mogen nog wel horizontaal gescrold worden. Bij dit soort content is het soms gewoon niet anders mogelijk.
Veelgemaakte fouten
Bij onze audits zien we dat het bij dit succescriterium vaak fout gaat op een van de volgende punten:
- De (desktop)lay-out is statisch en verandert niet, dus bij inzoomen of op je mobiel of tablet moet je eindeloos heen en weer scrollen.
- Teksten worden te klein weergegeven of ze lopen uit het scherm.
- Belangrijke elementen (zoals menuknoppen) verdwijnen of overlappen elkaar.
Wat kun je doen als webredacteur of manager?
Ook als je geen programmeur bent, heb je invloed op het voldoen aan dit succescriterium. Dit kun je doen:
- Test je site op verschillende schermgroottes (telefoon, tablet, desktop).
- Zoom in je browser in tot 400% en kijk of je nog makkelijk kunt lezen en navigeren.
- Controleer daarbij ook de formulieren. Zijn de invulvelden en knoppen nog goed bereikbaar als je inzoomt?
- Vraag je webbouwer: ‘hebben we een flexibel, responsive design?’