Êtes-vous à la recherche d’un point de départ dans la vaste discipline de l’accessibilité? Nous nous plongerons dans 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 d’utilisateurs.

Nous traversons une transformation numériqueavec de plus en plus d’entreprises proposant leurs produits et services sous forme numérique.

Expérience utilisateur (UX) est devenu beaucoup plus courant et les entreprises ont réalisé qu’il était payant de s’assurer que leur site Web est optimisé pour la convivialité. En effet, fournir une bonne expérience utilisateur peut avoir un impact très positif sur leur conversion en ligne.

Cependant, avez-vous déjà pensé à l’accessibilité de votre site Web pour les millions d’utilisateurs handicapés ?

Qu’est-ce que l’accessibilité d’un site Web ?

Bref accessible création de sites web est la pratique consistant à rendre votre site Web utilisable par le plus grand nombre de personnes possible. En tant que concepteurs, nous ne pensons souvent pas aux personnes qui ne sont pas en mesure d’utiliser le site Web de la même manière que nous, ce qui se traduit par une expérience pire ou même par l’impossibilité d’utiliser votre service.

Les dernières données du gouvernement montrent que 22% des personnes au Royaume-Uni – c’est 14,6 millions – vivent avec un handicap ou une déficience, mais il y a beaucoup plus de personnes qui peuvent être temporairement handicapées (bras cassé ou autre blessure) ou situationnellement handicapées (tenir un bébé dans un bras, regarder un écran en plein soleil) .

Toutes ces personnes veulent et doivent pouvoir utiliser vos services de la manière la plus fluide possible.

Pourquoi devrais-je me soucier de l’accessibilité du site ?

C’est éthique

L’accessibilité du site Web est la bonne chose à faire. En tant que concepteurs, il est de notre responsabilité de nous assurer que nous concevons d’une manière accessible à tous les utilisateurs, quelle que soit leur situation, leurs capacités ou leur contexte.

Par conséquent, le Web peut être un espace inclusif pour tous, qu’ils aient un handicap cognitif, un handicap visuel ou un handicap physique.

Pour se conformer à la loi

Le Royaume-Uni a mis en place des lois sur l’accessibilité des sites Web. Dans 2018, le gouvernement britannique a fait de la loi que les sites Web du gouvernement central et des organisations gouvernementales locales, de certaines organisations caritatives et d’autres organisations non gouvernementales doivent être codés et conçus pour répondre aux normes d’accessibilité du Web, Web Content Accessibility Guidelines (WCAG 2.1)

Tous les fournisseurs de services britanniques ont l’obligation légale de procéder à des ajustements raisonnables en vertu de la Loi de 2010 sur l’égalité ou la Loi de 1995 sur la discrimination des personnes handicapées (en Irlande du Nord).

Si les entreprises ne procèdent pas à des ajustements raisonnables, elles pourraient être poursuivies en justice. En 2019, un client aveugle a poursuivi avec succès Dominos Pizza de ne pas lui avoir offert une expérience accessible.

Impact commercial positif

Bien sûr, l’amélioration de l’accessibilité de votre site Web peut également profiter à votre entreprise de plusieurs façons :

• Cela permet à un plus grand nombre d’utilisateurs de passer par votre entonnoir de conversion.
• Un code propre (qui améliore l’accessibilité) améliore votre vitesse du site et référencementce qui rend votre site Web plus facile à trouver dans les moteurs de recherche.
• L’amélioration de l’accessibilité numérique n’affecte pas seulement les utilisateurs handicapés. Tout le monde peut bénéficier d’une conception Web accessible. En rendant votre site Web plus accessible, vous améliorerez l’expérience utilisateur pour tous vos utilisateurs.

Cela demande peu d’efforts

La création d’un site Web accessible ne nécessite pas nécessairement un budget important ou de gros changements. Il n’y a pas besoin de fonctionnalités ou de contenu supplémentaires pour rendre un site Web plus accessible. De nombreux problèmes peuvent être résolus avec un peu de réflexion, de planification et de sensibilisation, qui seront abordés plus loin dans ce blog.

Comment tester l’accessibilité d’un site Web

VAGUE est un vérificateur d’accessibilité gratuit et un outil d’évaluation que vous pouvez utiliser pour tester l’accessibilité de votre site Web.

Vous pouvez soit coller vos URL dans la case du site, soit télécharger leur extension pour exécuter rapidement des diagnostics sur n’importe quelle page que vous visitez.

Lorsque vous exécutez WAVE, il produit un rapport de diagnostic très détaillé couvrant les principaux domaines d’accessibilité, y compris les erreurs de contraste, le texte alternatif sur images et la structure HTML sémantique.

Les rapports créés par WAVE sont incroyablement détaillés et peuvent être un peu écrasants, surtout si vous êtes nouveau dans le domaine de l’accessibilité. Pour vous donner un aperçu plus clair sur la façon de rendre votre site Web plus accessible, nous avons extrait quelques-uns des domaines clés ci-dessous avec des conseils sur la façon d’améliorer.

Comment améliorer l’accessibilité de votre site Web

Couleurs et contraste

Couleurs et le contraste sont particulièrement importants pour permettre aux personnes malvoyantes et daltoniennes de naviguer facilement sur le site Web.

Cela affecte un nombre d’utilisateurs beaucoup plus élevé que prévu. Selon le NHS, 8% de tous les hommes sont daltoniens et beaucoup plus de personnes souffrent d’un certain degré de déficience visuelle. Comme nous avons une population vieillissante, ce sera une priorité encore plus importante pour l’avenir.

La conception Web accessible garantit qu’il y a suffisamment de contraste entre tout texte utilisé et son arrière-plan pour permettre à tout le monde de le lire facilement.

Tester le contraste des couleurs utilisées sur votre site Web est un travail rapide avec ce outil de contrôle de contraste. Il doit y avoir un rapport de contraste minimum de 4,5:1 pour fournir suffisamment de clarté aux utilisateurs malvoyants.

De plus, les directives d’accessibilité stipulent que la couleur ne doit jamais être le seul moyen de transmettre des informations. En d’autres termes, il doit y avoir un indice supplémentaire (tel qu’un texte souligné pour les hyperliens) pour les utilisateurs qui perçoivent les couleurs différemment et qui peuvent manquer nos instructions basées sur les couleurs.

Choix et taille de la police

Le choix et la taille de la police sont également importants non seulement pour les utilisateurs malvoyants, mais aident également les utilisateurs souffrant de troubles cognitifs comme la dyslexie.

Côté choix, évitez les polices Serif (Times New Roman, Georgia, Garamond). Les crochets décoratifs et les tourbillons à la fin des traits de lettre obscurcissent les formes des lettres et causent des problèmes de lecture aux utilisateurs dyslexiques.

La bonne nouvelle est que vous n’avez pas besoin de changer votre site Web en Comic Sans pour le rendre adapté à la dyslexie. Les lettres des polices Sans Serif (Helvetica, Arial, Open Sans, Roboto) peuvent apparaître moins encombrées et sont largement disponibles dans la plupart des systèmes d’exploitation et des logiciels de conception.

La taille de police par défaut du corps du navigateur est généralement de 16 px (12 pt) ; il s’agit également de la taille de police minimale recommandée pour le corps du texte par les directives d’accessibilité.

Il ne s’agit pas seulement de la taille du texte. Augmenter la quantité d’espace blanc entre les lignes de texte et les mots individuels peut vraiment aider les utilisateurs malvoyants ou dyslexiques.

L’espacement minimum suivant garantit que les exigences de ces utilisateurs sont satisfaites :

• 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

Texte alternatif

Texte alternatif (ou “balise alt”) est une balise dans votre code HTML qui vous permet de saisir une description textuelle pour les images.

Ces descriptions textuelles sont utilisées pour décrire les images aux utilisateurs malvoyants qui utilisent des lecteurs d’écran. Cela signifie qu’il est important de décrire avec précision la signification ou le but de l’image pour ceux qui ne peuvent pas la voir.

Il n’est pas toujours nécessaire d’ajouter du texte alternatif. Par exemple, il peut y avoir suffisamment d’indicateurs contextuels entourant l’image ou l’image n’a pas d’autre fonction qu’esthétique. Dans ce cas, ajoutez une balise alt vide (alt=””) ou elle sera signalée comme une balise alt manquante par les outils de diagnostic.

Formes

Formes peut être complexe pour n’importe qui, mais ceux qui ont des problèmes d’accessibilité supplémentaires peuvent souvent avoir du mal 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 d’un texte d’espace réservé comme étiquette plutôt que d’un texte en dehors du champ crée une 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.
• Les frontières – quelque chose d’aussi simple qu’une bordure autour d’une saisie de texte est important pour les utilisateurs souffrant de troubles cognitifs afin qu’ils sachent où ils doivent cliquer.
• Instructions additionnelles – 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, généralement la couleur est utilisée, mais en plus de cela, les erreurs doivent être indiquées via des symboles ou du texte.
• Examen – les formulaires doivent prévoir une période de révision avant soumission pour permettre à l’utilisateur de corriger toute information.

Structure HTML

Même lorsque la page Web semble bonne après avoir suivi les bases ci-dessus, elle peut encore souffrir de graves problèmes d’accessibilité si la sémantique structure de votre code n’est pas à la hauteur.

Il est important de s’assurer que toutes les structures de contenu sont balisées correctement et suivent une hiérarchie claire, car les personnes utilisant des lecteurs d’écran utiliseront ce balisage structurel pour la navigation.

Un avantage supplémentaire est que cela permet également à Google de mieux interpréter votre contenu, ce qui peut bénéficier à votre référencement.

Un conseil simple serait d’avoir un élément

sur votre page, puis

pour vos prochaines sections importantes. Si vous avez un enfant d’une sous-section, utilisez un

et ainsi de suite :

Généralement, le titre de votre page

Quelques paragraphes de texte ici

La prochaine section importante de votre page

Quelques paragraphes de texte ici

Quelque chose de pas si important mais lié au h2 ci-dessus

Quelques paragraphes de texte ici

La prochaine section importante de votre page

Bref

Rendre votre site Web plus accessible ne nécessite pas un gros budget ni beaucoup de temps. L’utilisation des conseils et astuces ci-dessus peut déjà changer radicalement l’expérience et la rendre plus inclusive pour TOUS vos utilisateurs.

Commencez dès maintenant à inclure la conception Web accessible dans votre processus de conception et vous créerez non seulement un espace plus accessible et inclusif pour vos utilisateurs, mais améliorerez également votre position auprès de Google. C’est un gagnant-gagnant pour tout le monde.

Si vous avez besoin d’autres conseils sur l’accessibilité du site Web, n’hésitez pas à Nous contacter.

Si vous avez besoin d’aide pour votre expérience utilisateur, n’hésitez pas à nous contacter.