Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung →
Barrierefreiheit
Hoe blijft een website op mobiel zonder zijdelings scrollen leesbaar?
Een website blijft zonder zijdelings scrollen leesbaar als de inhoud ervan bij smalle weergave — standaard 320 pixels breed — automatisch in één kolom omvalt. Deze breedte komt overeen met een smal mobiel of een sterk vergrote weergave op de computer. Wie dan voor elke regel heen en weer moet schuiven, verliest de draad bij het lezen.
Omloop: inhoud ordent zich naar de breedte
Omloop betekent: als het weergavebereik smaller wordt, ordenen de inhoud zich opnieuw — naast elkaar liggende kolommen schuiven onder elkaar, afbeeldingen worden kleiner, regels breken eerder om. Dit treft twee groepen tegelijk. Ten eerste telefonisten, dus op veel websites de meerderheid van de bezoekers. Ten tweede slechtzienden op de computer die pagina's sterk vergroten: bij sterke vergroting komt het zichtbare gedeelte exact overeen met zo'n smalle weergave. Breekt de pagina dan niet om, moeten zij voor elke regel naar rechts en terug schuiven — lezen wordt geduldsproef. Typische veroorzakers zijn tabellen met vaste breedte, te grote ingebedde kaarten en afbeeldingen met vaste pixelafmetingen.
Zo meet onze meethartje het zijdelings scrollen
Onze meethartje rendert uw pagina in een echte browser in meerdere schermbreedten — inclusief het smalle 320-pixel-beeld — en meet of een horizontale schuifbalk ontstaat en met hoeveel pixels de inhoud overloopt. Alleen echte, opnieuw gemeten schuifbaarheid telt als bevinding; om toevalskarakteristieken door laadvertragingen uit te sluiten, meet de controle indien twijfel dubbel en geeft zwankende resultaten eerlijk als 'verifiëren op echt apparaat' aan. Elke bevinding noemt de betrokken schermbreedde en wordt met een schermfoto onderbouwd. De resultaten vloeien zowel in het controlegebied Toegankelijkheid als in het controlegebied Responsief — het is dezelfde meting.
Beispiele
Feste Breite auf dem Handy
.inhalt { width: 1100px; }
.tabelle { min-width: 900px; }.inhalt { max-width: 1100px; width: 100%; }
.tabelle-huelle { overflow-x: auto; }Bei 320 Pixel Breite (400 Prozent Zoom) fließt der Inhalt um; nur Tabellen und Karten dürfen einen eigenen Scrollbereich haben.
- Verklein uw browservenster op de computer stap voor stap tot een smalle kolom — verschijnt er een horizontale schuifbalk, dan is er een probleem.
- Controleer tabellen eerst: grote gegevenstabellen hebben op mobiel een eigen oplossing nodig, bijvoorbeeld schuifbare containers met zichtbare aanwijzing.
- Vraag uw bureau vast pixelbreedten bij afbeeldingen en containers te vervangen door aanpassingsgevoelige waarden.
- Test ingebedde inhoud zoals kaarten en video's in de smalle weergave — buitenstandmodules breken het kader het vaakst.
- Controleer na elke grotere inhoudupdate de mobiele weergave voordat de pagina live gaat.