Nous savons qu'il est judicieux de concevoir de manière responsive afin d'offrir la meilleure expérience multi-appareil possible, mais le responsive design permet également d'améliorer l'accessibilité.
Prenons l'exemple d'un site comme Udacity:
Un utilisateur malvoyant qui a des difficultés à lire les petits caractères peut zoomer sur la page, jusqu'à 400%. Le site étant conçu de manière responsive, l'interface utilisateur se réorganise pour la "fenêtre d'affichage plus petite" (en fait pour la page plus grande), ce qui est idéal pour les utilisateurs d'ordinateurs de bureau qui ont besoin d'une loupe, ainsi que pour les utilisateurs de lecteurs d'écran mobiles. Chacun y trouve son compte. Voici la même page agrandie à 400%:
En fait, en concevant de façon réactive, nous obtenons d'ailleurs 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".
Ce guide n'aborde pas l'intégralité du responsive design, mais voici quelques points importants à retenir qui profiteront à votre expérience responsive et permettront à vos utilisateurs d'accéder plus facilement à votre contenu.
Utiliser la balise Meta de la fenêtre d'affichage
<meta name="viewport" content="width=device-width, initial-scale=1.0">
La définition de width=device-width correspond à la largeur de l'écran en pixels indépendants de l'appareil, et la définition de initial-scale=1 établit une relation 1:1 entre les pixels CSS et les pixels indépendants de l'appareil.
Cela indique au navigateur d'adapter votre contenu à la taille de l'écran, afin que les utilisateurs ne voient pas seulement une partie du texte tronqué.
Pour en savoir plus, consultez Adapter la taille du contenu à la fenêtre d'affichage.
Autoriser les utilisateurs à zoomer
Il est possible d'utiliser la balise Meta de la fenêtre d'affichage pour empêcher les zooms, en définissant maximum-scale=1 ou user-scaleable=no.
Évitez de le faire et laissez les utilisateurs effectuer un zoom avant s'ils en ont besoin.
Concevoir une solution flexible
Évitez de cibler des tailles d'écran spécifiques et utilisez plutôt une grille flexible en modifiant la mise en page lorsque le contenu le requiert. 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 exploiter tout le potentiel de votre grille flexible, utilisez des unités relatives telles que em ou rem pour des éléments tels que la taille du texte, plutôt que des valeurs en pixels. Certains navigateurs n'acceptent le redimensionnement du 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 sur l'ensemble du site, le contenu du site sera mis à jour pour refléter les préférences de l'utilisateur.
L'ensemble du site peut ainsi s'ajuster à mesure que l'utilisateur zoome, créant ainsi l'expérience de lecture dont il a besoin pour utiliser votre site.
Éviter de déconnecter la vue visuelle de l'ordre source
Un visiteur qui parcourt votre site avec le clavier suit l'ordre du contenu du 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 des sources. Cela peut conduire à des sauts déconcertants sur la page pour quelqu'un qui utilise le clavier pour se déplacer.
Veillez à tester votre conception à chaque point d'arrêt en parcourant le contenu en utilisant la touche de tabulation. Le flux de la page est-il toujours logique ?
En savoir plus sur la dissociation de la source et de l'affichage visuel
Prenez soin de vous avec des indices spatiaux
Lorsque vous écrivez en microcopie, évitez d'utiliser un langage qui indique 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 est en haut de l'écran.
Assurez-vous que les éléments tactiles sont suffisamment grands sur les appareils à écran tactile
Sur les appareils à écran tactile, assurez-vous que vos éléments tactiles sont suffisamment grands pour qu'ils puissent être activés facilement sans appuyer sur d'autres liens. La taille idéale pour tout élément sur lequel appuyer est de 48 pixels. Consultez plus de conseils sur les éléments tactiles.