5 erreurs d'accessibilité faciles à détecter

Il y a plein de bonnes pratiques faciles à mettre en place pour améliorer l’accessibilité. Mais pour travailler de façon stratégique, vous pouvez suivre le jeu de l’OAA (Organisation de l’Amélioration de l’Accessibilité) proposé par Design Gouv.

L’une des premières étapes est le diagnostic flash, qui permet d’évaluer rapidement l’accessibilité d’un site ou d’un service en ligne. Tant que certains critères de base ne sont pas respectés, c'est inutile d’investir dans un audit complet de conformité au RGAA (Référentiel général d’amélioration de l’accessibilité).

Le diagnostic flash est facile à faire, je vous partage donc quelques critères à vérifier. Je précise que ce ne sont que des exemples et qu’il existe d’autres points à vérifier.

Les fichiers bureautique sont-ils dans un format ouvert et accessibles ?

Quelques paramètres à vérifier pour que vos fichiers soient conformes :

• si le destinataire n’a pas besoin de modifier le document, il faut utiliser le format PDF
• pour diffuser un document de type texte, utilisez le format ODT
• pour diffuser un document de type présentation, utilisez le format ODP
• pour diffuser un document de type feuille de calcul, utilisez le format ODS

La suite Office n’est pas interdite mais les alternatives ci-dessus doivent aussi être proposées.

Pourquoi ?

Les formats ouverts permettent à tout le monde d’accéder aux documents sans avoir à payer de licence.

Comment rendre ces fichiers accessibles ?

Tout est expliqué dans ce GitHub. Vous pouvez y aller même si vous n’êtes pas dev, c’est compréhensible !

La langue du site est-elle bien définie ?

Si la langue du site n’est pas définie, les aides techniques ne pourront pas vocaliser correctement le texte. Pour un site en français, il faut un attribut lang="fr" dans la balise html au début du code-source. Pour le trouver, faites un clic-droit sur la page et sélectionnez « Examiner l’élément », « Inspecter » ou « Code source de la page ».

Et si on fait du franglais ?

Si vous utilisez des mots anglais comme “UX designer” dans une page majoritairement en français, vous devrez les baliser en anglais. Ainsi, les lecteurs d’écran liront ces mots à l’anglaise et non à la française (“UX designer” et pas “ux dézigné”).

Pour les baliser en anglais, il faut les encadrer d’un élément <span> avec l’attribut lang="en”. N’hésitez pas à me contacter si vous avez besoin d’un coup de main pour la manipulation. C’est assez facile, même sur un CMS (Content Management System) comme Webflow.

Le titre de la page est-il unique et pertinent ?

Le titre de la page permet d’identifier des contenus de la page dans l’onglet de votre navigateur, dans les favoris, dans l’historique ou encore par les lecteurs d’écran. Un titre pertinent améliore aussi le référencement et la présentation dans les moteurs de recherche. Il faut contrôler que :

• le titre de chaque page est composée du titre de son contenu, suivi du nom du site (exemple : Blog - Tamara Sredojevic)
• le titre est pertinent et unique
• sur une page de résultat de recherche, le titre est « Résultat de la page de recherche de xxx page 1 - nom du site »
• sur une page de confirmation d’action, le titre indique le résultat de l’action (suivi du nom du site).

Deux moyens de navigation sont présents

Vérifiez qu’il existe au moins deux moyens de navigation parmi les trois suivants : menu principal, plan du site et moteur de recherche.

Pourquoi ?

Le fait de proposer plusieurs moyens de naviguer permet aux utilisateurs de procéder selon leur préférence ou leur besoin. L’alternative est également importante si l’un des moyens utilisés ne donne pas le résultat attendu.

Les contrastes des couleurs sont suffisants

Pour lire un texte facilement, il faut qu’il y ait suffisamment de contraste entre la couleur du texte et celle du fond.

Comment vérifier ?

Je vous recommande ABC Use All Five pour vérifier les contrastes de vos couleurs de marque. Une fois que vous aurez rentré les références de chaque couleur, vous obtiendrez une grille pour savoir lesquelles peuvent être associées. Une combinaison avec AA ou AAA est conforme. Ce sont des ratios de contraste d’au moins 4,5:1. Si vous obtenez un AA18, ça veut dire que le ratio n’est pas suffisant pour du corps de texte classique. Vous pourrez néanmoins utiliser cette combinaison pour du texte en gras ou à partir de 24px.

Si votre site est déjà fait, un robot classique devrait pouvoir identifier les problèmes de contraste. Je vous recommande d’entrer votre URL dans A11ygator par exemple. Attention, ce genre d'outil ne remplace pas un vrai audit. Mais ça fonctionne bien pour détecter les problèmes de contraste.

À découvrir

Je vous recommande le travail d’Anne-Sophie Tranchet et son atelier “Easy checks pour vérifier l’accessibilité”. Parfois, c’est plus facile d’apprendre en présentiel avec une experte.

Le mémo design de DesignGouv : ces recommandations sont extraites du guide du concepteur RGAA de la DINUM (Direction Interministérielle du Numérique). Ce guide propose des fiches thématiques avec des conseils de design, l'explication du besoin pour les utilisateurs et des ressources complémentaires.

Si vous avez rempli les critères du diagnostic flash, vous pouvez passer à l’audit rapide du RGAA. Il n’est pas représentatif du niveau de conformité, mais il donne une bonne idée de la prise en compte ou non du RGAA dans les processus de développement.