Toegankelijkheid

Waarom het blokkeren van pinch-to-zoom slechtziende bezoekers buitensluit

Een instelling die sommige sites gebruiken om er 'strakker' uit te zien, kan een pagina volledig onleesbaar maken voor iemand die moet inzoomen.

Wat het is

Deze check kijkt specifiek of de viewport-meta-tag van een pagina instellingen bevat die zoomen uitschakelen — meestal user-scalable=no of maximum-scale=1 toegevoegd aan dezelfde tag die anders vereist is voor mobiele responsiviteit. Deze toevoegingen werden vroeger soms gebruikt om te voorkomen dat een per ongeluk dubbele tik onverwacht inzoomde, maar ze hebben een ernstig, onbedoeld neveneffect: ze blokkeren zoomen volledig, zelfs wanneer een bezoeker bewust wil pinch-zoomen.

Dit is iets anders dan simpelweg helemaal geen viewport-tag hebben (wat een ander, puur visueel probleem veroorzaakt dat in onze andere viewport-gidsen wordt behandeld) — dit gaat specifiek over een viewport-tag die aanwezig is maar zo is geconfigureerd dat hij zoomen actief voorkomt.

Waarom het belangrijk is

Veel slechtziende bezoekers vertrouwen op pinch-to-zoom als hun normale manier om webinhoud comfortabel te lezen, waarbij ze het zoomniveau aanpassen aan wat werkt voor hun eigen gezichtsvermogen op een bepaalde pagina. Die mogelijkheid blokkeren creëert niet alleen ongemak — voor iemand die het echt nodig heeft, kan het de inhoud van een pagina volledig onleesbaar maken, punt, ongeacht hoe goed de rest van de pagina is ontworpen.

Dit wordt expliciet genoemd in WCAG (de standaard richtlijnen voor webtoegankelijkheid), die vereisen dat zoomen niet wordt uitgeschakeld, juist vanwege hoe direct het mensen met een visuele beperking beïnvloedt — het wordt beschouwd als een van de ernstigere, vermijdbare toegankelijkheidsfouten, precies omdat het een mogelijkheid wegneemt die de browser zelf standaard al biedt.

Hoe je het oplost

  1. Controleer de viewport-meta-tag van je pagina op user-scalable=no of een maximum-scale-waarde van 1 of lager.
  2. Verwijder beide specifieke onderdelen indien aanwezig, en houd de rest van de tag intact (width=device-width, initial-scale=1).
  3. Als het oorspronkelijke doel was om een per ongeluk dubbele-tik-zoom op een specifiek interactief element te voorkomen, los dat dan op met gerichtere styling op dat element in plaats van zoomen voor de hele pagina uit te schakelen.
  4. Als je een websitebouwer gebruikt, is dit zelden iets dat het platform standaard instelt — controleer eventuele aangepaste codefragmenten die je aan de <head>-sectie van de pagina hebt toegevoegd.
  5. Test daarna op een echte telefoon door te proberen te pinch-zoomen op de pagina om te bevestigen dat hij nu normaal reageert.

Controleer of jouw eigen website dit probleem heeft

Launch Readiness scant je website in enkele seconden op dit en ~50 andere problemen vóór de lancering — gratis, zonder registratie.

Start een gratis controle