Sluit

Hoe maak ik een website digitaal toegankelijk voor kleine schermen?

Main content

Zorg dat alle content ook op een klein scherm leesbaar is en dat de bezoeker alles op de website kan doen wat ook op desktop mogelijk is. Ontwerp je website altijd eerst voor een klein scherm, mobile-first. Toon daarom de inhoud van je website op een klein scherm in een kolom. Let daarbij op sticky headers, footers en widgets die content kunnen bedekken.

Wat zijn de eisen vanuit WCAG?

  • Een website op een klein scherm met een breedte van 320 pixels, mag niet in twee richtingen scrollen. Vermijd dat in de richting van lezen gescrold moet worden. · Zorg dat alle functionaliteiten beschikbaar blijven via een toetsenbord.
  • Zorg dat het contrast van tekst en achtergrond voldoende blijft. Let er bijvoorbeeld op dat bij het inzoomen een witte tekst niet buiten een knop valt en op een witte achtergrond komt.
  • Gebruik je decoratieve elementen op je website? Deze mag je verbergen op kleine schermen.

Hoe ga je om met informatie die niet in kolommen getoond kan worden?

Er is een uitzondering voor informatie die niet in een kolom kan worden getoond, zoals tabellen, kaarten en video's. Daar mag wel horizontaal worden gescrold. Let wel op dat een tabel die op een klein scherm wordt afgesneden niet toegankelijk is.

Waarom is het belangrijk?

Bezoekers met gezichtsbeperkingen zoomen in. Door de content in een kolom te zetten, zien de bezoekers dezelfde weergave op een klein scherm als op een groot scherm. Bijvoorbeeld op het scherm van een mobiele telefoon.

Wat zijn onze tips?

  • Pas lange woorden aan met CSS zodat ze leesbaar blijven. Dat kan door de tekstgrootte aan te passen of de woorden af te breken.
  • Controleer alle functionaliteiten van je website op kleine schermen. Vergeet de externe widgets niet, zoals chat en een cookiebanner.
  • Controleer je code:
    1. Check of er <meta name="viewport": user-scalable=no, max-width=, maximum-scale=1.0"> in je code staat. 2.
    2. Verwijder dan user-scalable="no" en maximum-scale=1.0 uit je code. Deze code maakt het inzoomen in sommige gevallen onmogelijk.
    3. De code wordt dan <meta name=,"viewport": max-width=,">

Ook interessant

Officiële documentatie