Conception responsive et accessible

Nous savons qu'il est judicieux de concevoir de manière réactive pour offrir la meilleure expérience multi-appareil, mais la conception responsive améliore également l'accessibilité.

Prenons l'exemple d'un site comme Udacity :

Le site d'Udacity

Un utilisateur malvoyant qui a du mal à lire les petits caractères peut faire un zoom avant 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%:

Zoom à 400 % sur le site d'Udacity

D'ailleurs, grâce à la réactivité de la conception, 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. Cela indique au navigateur d'adapter votre contenu à la taille de l'écran, afin que les utilisateurs ne voient pas seulement un texte brouillé.

Pour en savoir plus, consultez Adapter la taille du contenu à la fenêtre d'affichage.

Autoriser les utilisateurs à zoomer

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 d'Udacity ci-dessus, cette approche garantit que la conception réagit, 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, plutôt que des 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'aura aucune incidence sur votre contenu. 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 déconnexion de la source et de l'affichage visuel

Faire attention aux indices spatiaux

Lorsque vous rédigez une 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 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 vos zones cibles sont suffisamment grandes pour pouvoir être activées facilement sans appuyer sur d'autres liens. La taille appropriée de tout élément tactile est de 48 pixels. Pour en savoir plus, consultez les éléments tactiles.