Cos'è
Questo controllo verifica specificamente se il meta tag viewport di una pagina include impostazioni che disabilitano lo zoom — più comunemente user-scalable=no o maximum-scale=1 aggiunti allo stesso tag altrimenti richiesto per la reattività mobile. Queste aggiunte venivano usate a volte in passato per impedire che un doppio tocco accidentale zoomasse inaspettatamente, ma hanno un effetto collaterale grave e non intenzionale: bloccano lo zoom completamente, anche quando un visitatore vuole deliberatamente zoomare con un pizzico.
Questo è distinto dal non avere semplicemente alcun tag viewport (che causa un problema diverso, puramente visivo, trattato nelle nostre altre guide sul viewport) — questo copre specificamente un tag viewport presente ma configurato per impedire attivamente lo zoom.
Perché è importante
Molti visitatori ipovedenti si affidano allo zoom con pizzico come modo normale per leggere comodamente qualsiasi contenuto web, regolando il livello di zoom a qualunque dimensione funzioni per la propria vista su una data pagina. Bloccare quella capacità non crea solo un inconveniente — per chi ne ha davvero bisogno, può rendere il contenuto di una pagina completamente illeggibile, punto, indipendentemente da quanto sia ben progettato il resto della pagina.
Questo è esplicitamente citato nelle WCAG (le linee guida standard per l'accessibilità web), che richiedono che lo zoom non venga disabilitato proprio per quanto direttamente influisce sulle persone con bassa visione — è considerato uno dei fallimenti di accessibilità più gravi ed evitabili, proprio perché toglie una capacità che il browser stesso fornisce già di default.
Come risolverlo
- Controlla il meta tag viewport della tua pagina per
user-scalable=noo un valoremaximum-scaledi1o inferiore. - Rimuovi entrambe quelle parti specifiche se presenti, mantenendo intatto il resto del tag (
width=device-width, initial-scale=1). - Se l'obiettivo originale era prevenire uno zoom accidentale da doppio tocco su un elemento interattivo specifico, affronta questo con uno stile più mirato su quell'elemento invece di disabilitare lo zoom per l'intera pagina.
- Se usi un website builder, raramente è qualcosa che la piattaforma imposta di default — controlla eventuali frammenti di codice personalizzati che hai aggiunto alla sezione
<head>della pagina. - Testa successivamente su un telefono reale provando a zoomare con un pizzico sulla pagina per confermare che ora risponda normalmente.