Nous savons qu'il est judicieux de concevoir de manière réactive pour offrir la meilleure expérience multi-appareil, 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, peut-être jusqu'à 400%. Le site étant conçu de façon réactive, l'interface utilisateur se réorganise pour la "fenêtre d'affichage plus petite" (en fait pour la plus grande page), ce qui est idéal pour les utilisateurs d'ordinateurs 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, simplement en concevant de manière réactive, 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".
Aborder la conception réactive n’entre pas dans le cadre de ce guide, mais voici quelques points importants à retenir qui profiteront à votre expérience responsive et permettre à vos utilisateurs d'accéder plus facilement à votre contenu.
Utiliser la balise Meta de fenêtre d'affichage
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Définir 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 permet au navigateur d'adapter
votre contenu à la taille de l'écran,
afin que les utilisateurs ne voient
pas seulement un tas de texte brouillé.
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 fenêtre d'affichage pour empêcher les opérations de zoom,
en définissant maximum-scale=1 ou user-scaleable=no.
Évitez de le faire et laissez les utilisateurs faire un zoom avant s'ils en ont besoin.
Conception flexible
Évitez de cibler des tailles d'écran spécifiques et utilisez plutôt une grille flexible, apporter des modifications à la mise en page en fonction du contenu. Comme nous l'avons vu avec l'exemple d'Udacity ci-dessus, cette approche garantit que la conception répond si l'espace réduit est 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 comme em ou rem pour des éléments comme la taille du texte, plutôt que des valeurs en pixels. Certains navigateurs ne prennent en charge le redimensionnement du texte que dans les préférences utilisateur, et si vous utilisez une valeur en pixels pour le texte, ce paramètre n'a aucune incidence sur votre copie. Si, en revanche, vous avez utilisé des unités relatives, alors la copie du site sera mise à jour pour refléter les préférences de l'utilisateur.
Cela permettra à l'ensemble du site de s'adapter à mesure que l'utilisateur effectue un zoom, créer l'expérience de lecture dont ils ont besoin pour utiliser votre site.
Éviter de dissocier la vue visuelle de l'ordre source
Visiteur qui parcourt votre site à l'aide de la touche de tabulation suit 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 de la 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'arrêt en parcourant le contenu à l'aide de la touche de tabulation, le flux à travers la page a-t-il toujours du sens ?
En savoir plus sur la dissociation de la source et de l'affichage visuel
Prendre soin de soi avec des 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 est 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 assez grands. afin de pouvoir les activer facilement sans avoir à cliquer sur d'autres liens. La taille de n'importe quel élément tactile est de 48 pixels, En savoir plus sur les éléments tactiles