Nous savons qu'il est judicieux de concevoir des sites Web responsifs pour offrir la meilleure expérience multi-appareil possible, mais le responsive design est également bénéfique pour l'accessibilité.
Prenons l'exemple d'un site comme Udacity :
Un utilisateur malvoyant qui a des difficultés à lire des petits caractères en petits caractères peut effectuer un zoom sur la page, jusqu'à 400%. Étant donné que le site est conçu de manière responsive, l'UI se réorganise pour le "petit viewport" (en réalité pour la page plus grande), ce qui est idéal pour les utilisateurs de bureau qui ont besoin d'agrandir l'écran et pour les utilisateurs de lecteurs d'écran mobiles. Chacun y trouve son compte. Voici la même page agrandie à 400%:
En fait, rien qu'en concevant une page responsive, nous respectons la règle 1.4.4 de la checklist WebAIM, qui stipule qu'une page "doit être lisible et fonctionnelle lorsque la taille du texte est doublée".
Il n'entre pas dans le champ d'application de ce guide de passer en revue l'ensemble du responsive design, mais voici quelques points importants qui profiteront à votre expérience responsive et permettront à vos utilisateurs d'accéder plus facilement à vos contenus.
Utiliser la balise Meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Le paramètre width=device-width correspond à la largeur de l'écran en pixels indépendants de l'appareil, et le paramètre initial-scale=1 établit une relation de 1 à 1 entre les pixels CSS et les pixels indépendants de l'appareil.
Le navigateur s'adapte alors à la taille de l'écran pour que les utilisateurs ne voient pas un simple tas de texte compressé.
Pour en savoir plus, consultez Adapter la taille du contenu à la fenêtre d'affichage.
Autoriser les utilisateurs à faire un zoom
Vous pouvez utiliser la balise Meta viewport pour empêcher le zoom en définissant maximum-scale=1 ou user-scaleable=no.
Évitez de le faire et laissez vos utilisateurs zoomer si nécessaire.
Concevoir avec flexibilité
Évitez de cibler des tailles d'écran spécifiques et utilisez plutôt une grille flexible, en modifiant la mise en page en fonction du contenu. Comme nous l'avons vu avec l'exemple Udacity ci-dessus, cette approche garantit que la conception répond, que l'espace réduit soit dû à un écran plus petit ou à un niveau de zoom plus élevé.
Pour en savoir plus sur ces techniques, consultez l'article Principes de base du Responsive Web Design.
Utiliser des unités relatives pour le texte
Pour tirer le meilleur parti de votre grille flexible, utilisez des unités relatives telles que em ou rem pour des éléments tels que la taille du texte, au lieu de valeurs en pixels. Certains navigateurs ne permettent de redimensionner le texte que dans les préférences utilisateur. Si vous utilisez une valeur en pixels pour le texte, ce paramètre n'a aucune incidence sur votre copie. Toutefois, si vous avez utilisé des unités relatives tout au long de la copie du site, elle sera mise à jour pour refléter les préférences de l'utilisateur.
L'ensemble du site sera ainsi reflowé lorsque l'utilisateur fera un zoom, ce qui créera l'expérience de lecture dont il a besoin pour utiliser votre site.
Éviter de dissocier la vue visuelle de l'ordre source
Un visiteur qui parcourt votre site à l'aide de la touche Tabulation suivra l'ordre du contenu dans le document HTML. Lorsque vous utilisez des méthodes de mise en page modernes telles que Flexbox et Grid, il est facile de faire en sorte que le rendu visuel ne corresponde pas à l'ordre source. Cela peut entraîner des sauts perturbants sur la page pour une personne qui utilise le clavier pour se déplacer.
Veillez à tester votre conception à chaque point d'inflexion en parcourant le contenu à l'aide de la touche Tabulation. Le parcours sur la page a-t-il toujours du sens ?
En savoir plus sur la dissociation de la source et de l'affichage visuel
Faire attention aux indices spatiaux
Lorsque vous écrivez en microcopie, évitez d'utiliser des termes indiquant l'emplacement d'un élément sur la page. Par exemple, faire référence à la navigation "à gauche" n'a aucun sens dans une version mobile lorsque la navigation se trouve en haut de l'écran.
Vérifier que les éléments tactiles sont suffisamment grands sur les appareils à écran tactile
Sur les appareils à écran tactile, assurez-vous que les éléments tactiles sont suffisamment grands pour pouvoir être activés facilement sans appuyer sur d'autres liens. Une taille de 48 px est adaptée à tous les éléments cliquables. Pour en savoir plus sur les cibles tactiles, consultez nos conseils.