Quel est l'impact d'un bon design sur l'accessibilité du site Web

Vous cherchez un point de départ dans la vaste discipline de l'accessibilité? Nous approfondirons les pratiques et les outils réels que vous pouvez mettre en œuvre dans votre processus de conception pour améliorer vos produits numériques en les rendant inclusifs pour un plus grand nombre de vos utilisateurs.

Qu'est-ce que l'accessibilité ?

Les sites Web accessibles permettent à une plus grande variété d'utilisateurs d'interagir avec le contenu de votre site Web de manière fluide. Que nous abordions le sujet d'un point de vue UI ou UX, l'accent est mis sur la création d'un produit de qualité qui convient à un public diversifié.

Ce public diversifié « s'étend à toute personne qui souffre d'un handicap permanent, temporaire ou situationnel, par exemple n'avoir qu'un seul bras est une condition permanente, avoir un bras blessé est temporaire et tenir un bébé dans un bras est une situation - dans chaque cas, le l'utilisateur est capable d'accomplir des tâches d'une seule main. (Avinash Kaur, 2018).

Pourquoi l'accessibilité est-elle importante ?

En tant que concepteurs, il est de notre responsabilité de nous assurer que nous concevons d'une manière accessible à tous les utilisateurs, indépendamment de leur situation, de leurs capacités ou de leur contexte. En conséquence, le Web peut être un espace inclusif pour tous, qu'ils soient atteints d'un handicap cognitif, visuel ou physique.

La création d'un site Web accessible ne nécessite pas nécessairement de gros budgets ou des changements. Puisqu'il ne nécessite aucune fonctionnalité ou contenu supplémentaire, l'accessibilité peut être réalisée par l'éducation et la sensibilisation au début d'un projet de conception.

C'est aussi sans doute important pour les entreprises : des études montrent que les sites Web accessibles ont de meilleurs résultats de recherche, qu'ils atteignent un public plus large, qu'ils sont optimisés pour le référencement, qu'ils ont des temps de téléchargement plus rapides, qu'ils encouragent de bonnes pratiques de codage et qu'ils ont toujours une meilleure convivialité.

Comment atteignons-nous l'accessibilité?

Vous devrez effectuer certains ajustements et suivre un cadre pour vous assurer que vous concevez un ensemble diversifié de capacités, d'âges et de niveaux d'expérience avec les appareils.

L'accessibilité est une discipline autonome qui évolue constamment pour s'adapter aux produits numériques. Mais de la même manière, les solutions logicielles se développent également. Cela signifie que nous ne pouvons pas tout couvrir dans le sujet, mais si vous trouvez cet article utile, nous pouvons faire une partie 2 !

Nous allons approfondir 5 grands domaines :

1. Contraste de couleur
2. Texte alternatif
3. États de mise au point
4. Formes
5. Typographie

Contraste de couleur

S'assurer qu'il y a un contraste de couleur suffisant entre le texte et l'arrière-plan aide les utilisateurs qui ont des problèmes de vision. Cela affecte un plus grand nombre d'utilisateurs que prévu et est souvent ignoré comme un problème. Cependant, jusqu'à 1 homme sur 12 est daltonien et beaucoup d'autres ont une basse vision ou sont aveugles.

Pour commencer, les directives d'accessibilité dictent que la couleur ne devrait jamais être le seul moyen de transmettre des informations. En d'autres termes, il doit y avoir un indice supplémentaire pour les utilisateurs qui perçoivent les couleurs différemment et peuvent manquer nos instructions basées sur les couleurs.

Afin de maintenir un contraste décent entre le texte et l'arrière-plan, un bon rapport à suivre est d'au moins 4,5 pour 1. Cela permet aux utilisateurs malvoyants ou daltoniens de distinguer clairement les deux.

Le rapport de contraste de 4,5 à 1 adhère au niveau de conformité AA (sur les trois niveaux : A, AA et AAA) mais cela change en fonction de la taille de la police et du niveau de conformité que vous souhaitez atteindre. Les polices plus grandes nécessitent un rapport de contraste plus petit de 3 à 1 seulement si le type est de 18 pt (ou 14 pt en gras).

Ces ratios minimaux ne s'appliquent pas au texte contenu dans un logo ou un nom de marque, mais il est utile de vérifier vous-même votre ratio de contraste à l'aide de cet outil pratique.

Texte alternatif

Pour les utilisateurs qui accèdent au Web à l'aide de lecteurs d'écran, le contenu affiché n'est pas toujours correctement transmis. Le texte alternatif (alt) est ce que le lecteur d'écran utilise pour informer l'utilisateur des images présentes sur la page.

Cela peut être fait en convertissant le texte alternatif en braille, une description audio ou en lisant visuellement le texte. Cela signifie qu'il est important de décrire avec précision ce qui se passe dans l'image pour ceux qui ne peuvent pas la voir.

Parfois, il peut ne pas être nécessaire d'ajouter du texte alternatif. Par exemple, il peut y avoir suffisamment d'indicateurs contextuels autour de l'image ou l'image n'a pas d'autre fonction qu'esthétique.

États de mise au point

Vous êtes probablement déjà familiarisé avec les indicateurs de focalisation sans vous en rendre compte. Les états de focus sont les contours (souvent) bleus qui apparaissent lorsqu'un élément est sélectionné, par exemple des liens, des menus, des boutons et des champs de formulaire.

Ceux-ci signalent sur quel élément l'utilisateur se concentre actuellement lorsqu'il utilise le clavier. Souvent, ces indicateurs sont considérés comme inesthétiques ou comme s'ils ne servaient à rien, mais ils sont en réalité très importants. De nombreux utilisateurs sont limités à l'utilisation du clavier et les personnes malvoyantes qui utilisent des lecteurs d'écran ont également besoin d'indicateurs de mise au point pour faciliter la navigation dans les pages.

Les indicateurs de focus sont un moyen simple de rendre la navigation de votre page claire et accessible avec très peu d'effort et pourtant une grande différence pour l'utilisateur. Ils peuvent s'intégrer parfaitement à la marque en utilisant des couleurs appropriées, ils doivent simplement être contrastés pour que les éléments se démarquent.

Formes

Les formulaires peuvent être complexes pour n'importe qui, mais ceux qui ont des problèmes d'accessibilité supplémentaires peuvent souvent avoir des difficultés lorsque les formulaires sont trop minimalistes et peu clairs. Vous trouverez ci-dessous une liste de certains éléments courants qui doivent être traités afin de lutter contre l'accessibilité :

• Étiquettes – l'utilisation de texte d'espace réservé comme étiquette plutôt que de texte en dehors du champ crée de la confusion car le texte disparaît lorsque l'utilisateur commence à taper. Omettre des indications cruciales pour l'utilisateur au profit du minimalisme ou de l'esthétique est une erreur majeure à éviter.
• Bordures - quelque chose d'aussi simple qu'une bordure autour d'une entrée de texte est important pour les utilisateurs ayant des troubles cognitifs afin qu'il soit clair où ils doivent cliquer
• Instructions supplémentaires – les formulaires utilisent souvent une approche minimaliste pour tenter de désencombrer le design, cependant, cela entrave la convivialité et donc l'accessibilité.
• Messages d'erreur - ceux-ci doivent être indiqués par plusieurs éléments, la couleur est généralement utilisée, mais en plus de cela, les erreurs doivent être indiquées par des symboles ou du texte.
• Révision - les formulaires doivent prévoir une période de révision avant la soumission pour permettre à l'utilisateur de corriger toute information.

Typographie

L'information est plus facile à digérer lorsqu'elle n'est pas encombrée et en trop grande quantité dans un seul espace. Cela s'applique également aux sites Web accessibles. Comme mentionné précédemment, la taille de la police peut modifier les exigences minimales pour le rapport de contraste, mais les tailles de police ne doivent pas descendre en dessous de 10 pt.

Comme vous pouvez le voir, c'est difficile à lire en 9 pt.

L'augmentation de la quantité d'espace blanc entre les deux lignes de texte et les mots individuels peut aider les utilisateurs malvoyants ou dyslexiques. L'espacement minimum suivant garantit que les exigences de ces utilisateurs sont satisfaites :

• L' espacement des lettres: x0.12 la taille de la police
• Espacement des mots : x0.16 la taille de la police
• Interligne: x1,5 la taille de la police
• Espacement des paragraphes : x2 la taille de la police

Conclusion

Étonnamment, ces petits changements peuvent faire une grande différence en matière d'accessibilité. Cela ne nécessite pas de gros budgets et beaucoup de temps pour que votre site Web respecte les directives d'accessibilité du contenu Web, mais cela peut changer considérablement l'expérience d'un utilisateur et donc stimuler votre entreprise également.

L'ajout de ces suggestions dans votre processus de conception peut devenir une seconde nature, ouvrant la voie à un avenir de sites Web plus accessibles - c'est à nous en tant que concepteurs.

Si vous avez besoin d'aide pour votre création, n'hésitez pas à nous contacter.