Salut à tous ! Parlons un peu du zoom par pincement sur les appareils mobiles. L’une des fonctionnalités clés de la navigation mobile est de pouvoir zoomer pour lire un contenu, puis dézoomer pour le localiser sur la page. Malheureusement, il existe une idée reçue parmi les développeurs et les concepteurs de sites adaptatifs selon laquelle un site web adaptatif correctement mis en œuvre n’a pas besoin de permettre le zoom.
Je souhaite examiner en détail les conséquences sur l'accessibilité de la désactivation du zoom par pincement. Je présenterai différents exemples illustrant ce qui se passe lorsque les développeurs et les concepteurs désactivent cette fonctionnalité sur les appareils iOS et Android, et j'expliquerai en fin de compte pourquoi ils ne devraient pas la désactiver.
Si vous le souhaitez, vous pouvez suivre mon tutoriel enregistré ici :
WCAG 2.0 et le zoom par pincement
Le « pinch-to-zoom » consiste, pour un utilisateur, à agrandir l’affichage sur un appareil mobile en pinçant l’écran, ce qui permet de zoomer et de dézoomer. Il arrive parfois que les concepteurs et les développeurs décident de désactiver cette fonctionnalité. Voyons ce qu’il advient du code lorsque cette fonctionnalité est désactivée. Par exemple, un élément de code important situé sous la balise Meta s’appelle « Viewport ». Je vais aborder les avantages et les inconvénients liés à la désactivation de cet élément de code.
Dans les directives d’accessibilité aux contenus Web (WCAG) du World Wide Web Consortium (W3C), on trouve le critère de succès 1.4.4, intitulé « Redimensionnement du texte ». Il stipule : « À l’exception des légendes et des images contenant du texte, le texte doit pouvoir être redimensionné sans technologie d’assistance jusqu’à 200 % sans perte de contenu ni de fonctionnalité. Ce critère de succès relève du niveau AA, qui correspond au niveau intermédiaire de conformité ; cela signifie que la page Web satisfait à tous les critères de succès des niveaux A et AA. Si les développeurs et les concepteurs désactivent et empêchent le zoom par pincement, nous ne respectons en réalité pas ce critère de succès.
Pincez pour zoomer sur les appareils iOS
Le premier exemple que je vais vous présenter illustre les bonnes pratiques relatives au code de zoom par pincement. Ce code s'inscrit dans une approche de conception responsive ; il se trouve en effet dans la balise
et correspond à la balise meta « name: viewport ». La balise « name: viewport » permet de désactiver le zoom par pincement, et il existe deux façons de le faire dans cette balise meta. Examinons cela de plus près : vous allez voir un contenu et il y a deux éléments auxquels vous devrez prêter une attention particulière.Tout d'abord, les balises « user-scalable=no » et « maximum-scale=1.0 » sont celles qui désactivent le zoom par pincement, rendant ainsi cette fonctionnalité inutilisable. En supprimant ces balises, vous résolvez donc ce problème. Par ailleurs, Apple et les appareils iOS ont récemment mis à jour leurs versions afin que cela ne soit plus possible, ce qui constitue une avancée majeure en matière d'accessibilité. Même si quelqu'un tentait d'insérer cet extrait de code, cela ne désactiverait pas le zoom tactile.
Pincez pour zoomer sur les appareils Android
Ce n'est toutefois pas le cas avec les appareils Android. Sur un appareil Android, celui-ci continuera à reconnaître cette balise meta. Malheureusement, cela permet aux développeurs ou aux concepteurs de désactiver le zoom par pincement.
La meilleure règle à suivre est la suivante : en cas de doute, mettez-vous à la place de l’utilisateur final. Pensez aux problèmes de contraste lorsque l’on utilise un téléphone en plein soleil ou lorsque l’on souffre d’une déficience visuelle. Imaginez que vous ayez une motricité fine limitée. Ou encore que le développeur ait mal géré l’adaptabilité du site et qu’il soit nécessaire d’activer le zoom pour simplement consulter la page (oui, cela arrive). Prenez l’appareil en main, testez-le en tenant compte de ces contraintes et concevez votre site en gardant à l’esprit l’accessibilité. N’hésitez pas à laisser vos commentaires et questions ci-dessous !
