Quin és el problema?
La metaetiqueta viewport controla com els navegadors mòbils mostren una pàgina web. Alguns desenvolupadors i temes afegeixen user-scalable=no o maximum-scale=1 per evitar que els usuaris ampliïn la pàgina —sovint per evitar el «zoom accidental» en camps de formulari o per mantenir el disseny «perfecte».
El problema és que bloquejar el zoom impedeix que les persones amb baixa visió puguin ampliar el contingut per llegir-lo. Per a moltes persones, poder fer zoom al mòbil no és una preferència: és una necessitat.
El criteri WCAG 1.4.4 exigeix que el text es pugui redimensionar fins al 200% sense pèrdua de contingut o funcionalitat, excepte per a subtítols i imatges de text.
Com es bloqueja el zoom i com no s’ha de fer
— MAL: bloqueja completament el zoom —
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
— MAL: limita el zoom al 100% —
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
— BÉ: permet el zoom lliure —
<meta name="viewport" content="width=device-width, initial-scale=1">
L’argument del ‘zoom accidental’
La raó més habitual per bloquejar el zoom és evitar que els dispositius iOS ampliïn automàticament els camps de formulari quan reben el focus. Però la solució correcta no és bloquejar el zoom: és assegurar-se que els camps de formulari tinguin una mida de font d’almenys 16px, que evita el zoom automàtic d’iOS sense comprometre l’accessibilitat.
input, select, textarea {
font-size: 16px; /* Evita el zoom automàtic a iOS */
}
Navegadors moderns ignoren user-scalable=no
A partir de certes versions, Safari en iOS i Chrome en Android ignoren user-scalable=no per raons d’accessibilitat. Però no tots els navegadors ho fan, i no es pot dependre d’aquest comportament. Cal corregir el codi font.
Com detectar i corregir l’error
L’eina d’autoevaluació de webaccessible.cat detecta automàticament si la metaetiqueta viewport del teu web bloqueja el zoom. Si tens aquest error, la correcció és senzilla: elimina user-scalable=no i maximum-scale=1 de la metaetiqueta.
A WordPress, la metaetiqueta viewport sol estar al header.php del tema o generada per un plugin. Si uses un tema fill (child theme), pots sobreescriure-la sense modificar el tema pare.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.