Les Easy Checks pour vérifier l'accessibilité d'un site web

le 01/08/2024 par Lina Yahi
Tags: Product & Design, Numérique Responsable, Bonne Pratique, Delivery, Formation

Les « Easy Checks » qu’on peut traduire en « vérifications faciles », sont un ensemble de tests manuels simples et rapides que vous pouvez effectuer pour vérifier l'accessibilité d'un site web. Ces vérifications sont basées sur les directives d'accessibilité du Web Accessibility Initiative (WAI) du World Wide Web Consortium (W3C).

Voici un aperçu des Easy Checks :

  1. Titres des pages (<title>) : chaque page doit avoir un titre unique, clair et descriptif pour faciliter la navigation entre les onglets du navigateur.
  2. Alternatives textuelles pour les images : assurez-vous que toutes les images ont une alternative textuelle appropriée pour les utilisateurs qui ne peuvent pas les voir.
  3. Hiérarchie des titres : utilisez des balises de titre (h1, h2, h3, etc.) pour organiser le contenu de manière hiérarchique et faciliter la navigation.
  4. Contraste des couleurs : assurez-vous que le contraste entre le texte et l'arrière-plan est suffisamment élevé pour garantir une bonne lisibilité.
  5. Taille du texte ajustable : permettez aux utilisateurs d'ajuster la taille du texte selon leurs préférences pour une meilleure lisibilité.
  6. Navigation au clavier : assurez-vous que tous les éléments interactifs du site (boutons, liens…) sont accessibles uniquement avec le clavier, sans nécessiter l'utilisation de la souris.
  7. Formulaires : assurez-vous que les formulaires sont faciles à remplir et que les messages d'erreur sont clairs et compréhensibles.
  8. Les contenus animés : permettez aux utilisateurs de contrôler le contenu en mouvement pour ne pas perturber la lecture.
  9. Alternatives aux multimédia (audio et vidéo) : assurez-vous que tous les médias ont une alternative textuelle appropriée pour les utilisateurs qui ne peuvent pas voir ou entendre.
  10. Structure de base : examinez la page web sans les styles pour voir comment elle se comporte pour les personnes utilisant des technologies d’assistance.

1. Titres des pages (<title>)

Pourquoi c'est important :

Les titres de page sont cruciaux pour l'orientation des utilisateurs. Ils sont affichés dans les onglets des navigateurs, dans les résultats des moteurs de recherche, et sont utilisés pour les favoris des navigateurs. Les lecteurs d'écran lisent les titres de page en premier, ce qui aide les utilisateurs à comprendre rapidement où ils se trouvent.

À faire :

  • Ouvrir chaque page du site dans un nouvel onglet et comparer les titres des onglets.

À vérifier :

  • Chaque titre décrit adéquatement et brièvement le contenu de la page.
  • Chaque titre est différent afin de bien les distinguer.

2. Alternatives textuelles pour les images

Pourquoi c'est important :

Les alternatives textuelles (attribut: alt) permettent aux utilisateurs qui ne peuvent pas voir les images de comprendre leur contenu quand cela est nécessaire. Plutôt que de simplement décrire l'apparence de l'image, le but est de transmettre l'objectif de l'image pour garantir une expérience utilisateur équivalente pour les personnes qui ne peuvent pas voir les images, notamment les personnes aveugles et celles qui désactivent les images.

À faire :

  • Télécharger l'extension Web Developer.
  • Aller sur la page que vous voulez vérifier.
  • Ouvrir l’extension Web Developer.
  • Aller dans l’onglet « Images » et cliquer sur «Display Alt Attributes ».

À vérifier :

  • Chaque image porteuse d’informations a une alternative textuelle appropriée qui décrit l'information qu’elle transmet.
  • Les images décoratives n’ont pas d’alternative (alt=””). On peut déterminer si une image devrait avoir un alt vide en se posant la question suivante : Si l'image était absente, l'utilisateur pourrait-il toujours obtenir toutes les informations de la page ?

3. Hiérarchie des titres

Pourquoi c'est important :

Les titres structurent le contenu de la page et doivent être balisés pour être accessibles à tous. Cela permet aux utilisateurs, y compris ceux utilisant des lecteurs d'écran, de naviguer facilement entre les titres.

Les titres doivent être hiérarchisés par niveaux, exemple :

  • Titre de niveau 1 <h1>
    • Titre de niveau 2 <h2>
      • Titre de niveau 3 <h3>
      • Titre de niveau 3 <h3>
    • Titre de niveau 2 <h2>
      • Titre de niveau 3 <h3>
        • Titre de niveau 4 <h4>
        • Titre de niveau 4 <h4>
    • Titre de niveau 2 <h2>

À faire :

  • Télécharger à l'extension Web Developer.
  • Aller sur la page que vous voulez vérifier.
  • Ouvrir l’extension Web Developer.
  • Aller dans l’onglet « Information » et cliquer sur «View Document Outline ». Le plan de la page s’affiche dans un nouvel onglet.

À vérifier :

  • Avoir au moins un titre par page.
  • Le plan reflète le design : tout texte qui ressemble à un titre est balisé comme un titre.
  • Même si ces critères ne sont pas invalidants, il est recommandé que :
    • Le premier titre de la page soit de niveau <h1>.
    • Il n'y ait pas de saut de niveaux (par exemple, un <h2> suivi directement par un <h4>).

4. Contraste des couleurs

Pourquoi c'est important :

Un bon contraste entre le texte et l'arrière-plan assure que le contenu est lisible pour les utilisateurs ayant des déficiences visuelles mais aussi pour les seniors (⅓ de la population) qui sont moins sensibles au contraste. Cela garantit également une meilleure lisibilité dans des conditions de faible éclairage ou sur des écrans de mauvaise qualité.

À faire :

  • Utiliser des outils de vérification de contraste comme Colour Contrast Analyzer pour tester vos combinaisons de couleurs.

À vérifier :

5. Taille du texte ajustable

Pourquoi c'est important :

Permettre aux utilisateurs d’agrandir la taille des caractères améliore la lisibilité du contenu.

À faire :

Dans Firefox activer le zoom de texte uniquement : View -> Zoom -> Zoom Text Only.
Agrandir le texte à 200 % : View -> Zoom -> Zoom Out -> 200%

À vérifier :

  • Tout le contenu textuel s’agrandit.
  • Le texte reste lisible : il ne disparaît pas et n’est pas coupé.
  • Le texte et le reste du contenu ne se chevauchent pas.
  • Tous les boutons et champs de formulaire sont visibles et utilisables.
  • Le défilement horizontal n'est pas nécessaire pour lire le texte.

6. Navigation au clavier

Pourquoi c'est important :

Certains utilisateurs ne peuvent pas utiliser une souris et dépendent du clavier pour naviguer. Les personnes aveugles et certaines personnes avec des handicaps moteurs utilisent le clavier ou des technologies d'assistance basées sur les commandes clavier, comme la saisie vocale.

À faire :

Parcourir le site en utilisant uniquement le clavier (tab pour naviguer d'un élément interactif à un autre, shift + tab pour revenir en arrière et Entrer pour actionner les liens ou boutons).

À vérifier :

  • Tous les éléments interactifs du site sont accessibles avec le clavier par exemple les liens, les champs de formulaire, les boutons et les contrôles du lecteur multimédia.
  • Il est toujours possible de sortir d'une zone au clavier.
  • L'ordre de tabulation suit l'ordre de lecture logique.
  • Le focus est clairement visible lorsque vous naviguez, c'est-à-dire que vous pouvez identifier visuellement quel élément a le focus.

7. Formulaires

Pourquoi c'est important :

Les formulaires doivent être faciles à remplir pour tous les utilisateurs. Des étiquettes claires et des messages d'erreur compréhensibles sont essentiels pour éviter la frustration.

À faire :

  • Examiner les formulaires du site.
  • Soumettre les formulaires sans remplir les champs obligatoires pour vérifier l'affichage des messages d'erreur.
  • Soumettre les formulaires avec des informations incorrectes dans les champs exigeant un format spécifique pour vérifier l'affichage des messages d'erreur.

À vérifier :

  • Tout le formulaire est utilisable au clavier (y compris les bulles d’aide et les listes déroulantes).
  • Chaque champ de formulaire a une étiquette associée (balise <label>).
  • Les champs obligatoires sont clairement indiqués, pas uniquement par la couleur.
  • Les instructions pour remplir le formulaire sont placées avant le formulaire.
  • Les formats requis, tels que les dates sont explicités.
  • Les messages d'erreur sont facilement repérables. Ils sont clairs et expliquent comment corriger les erreurs. Si l'erreur concerne un format tel qu'une date par exemple, le format attendu est clairement expliqué.

8. Les contenus animés

Pourquoi c'est important :

Les utilisateurs doivent pouvoir contrôler les contenus animés pour avoir le temps de traiter une information et pouvoir se concentrer sur le contenu sans être distrait. Plus spécifiquement, certains contenus clignotants peuvent déclencher une crise d’épilepsie chez certaines personnes.

À faire :

  • Identifier les contenus qui bougent ou clignotent.

À vérifier :

  • Aucun contenu ne clignote plus de trois fois en une seconde.
  • Si des informations défilent ou bougent automatiquement, leur défilement ne dure pas plus de 5 secondes, ou le mouvement peut être mis en pause, arrêté ou masqué.
  • Si des informations se mettent à jour en temps réel (par exemple le prix), l’utilisateur peut mettre en pause, arrêter ou masquer les informations mises à jour, ou contrôler la fréquence de la mise à jour.

9. Alternatives aux multimédia (audio et vidéo)

Pourquoi c'est important :

Les contenus audio ne sont pas accessibles aux utilisateurs sourds ou malentendants. Les informations visuelles dans les vidéos ne sont pas accessibles aux personnes aveugles ou malvoyantes. Les alternatives aux multimédia permettent d’en comprendre le contenu.

À faire :

  • Identifier les contenus multimédia sur la page.

À vérifier :

  • Il est préférable que le son ne démarre pas seul.
  • Audio et vidéo sont contrôlables au clavier (pause, arrêt, ajustement volume).
  • Les contenus audio ont des transcriptions textuelles.
  • L’information visuelle est disponible au format texte ou audio (sous-titres, transcript et/ou audio-description).

10. Structure de base

Pourquoi c'est important :

Les pages web sont souvent conçues avec plusieurs colonnes et sections qui organisent visuellement l'information. Cependant, les personnes aveugles ou malvoyantes utilisent des lecteurs d'écran ou ajustent l'affichage pour lire le contenu. Par exemple, elles peuvent transformer une mise en page en plusieurs colonnes en une seule colonne. Il est crucial de vérifier comment la page web fonctionne lorsqu'elle est "linéarisée" en une seule colonne et que sa présentation est modifiée, pour s'assurer que l'information reste compréhensible et accessible.

À faire :

  • Télécharger à l'extension Web Developer.
  • Aller sur la page que vous voulez vérifier.
  • Ouvrir l’extension Web Developer.
  • Aller dans l’onglet « Images » et cliquer sur «Disable Images ».
  • Aller dans l’onglet « CSS » et cliquer sur «Disable All Styles ».
  • Aller dans l’onglet « Miscellaneous » et cliquer sur «Linearize Page ».

À vérifier :

  • Toutes les informations restent disponibles et sont affichées dans le bon ordre.
  • Les interactions sont possibles et compréhensibles.

Conseils

  • Ces Easy Checks sont un bon point de départ pour évaluer l'accessibilité d'un site web, mais il est important de noter qu'ils ne couvrent pas tous les aspects de l'accessibilité.
  • Intégrez-les dans votre quotidien en les ajoutant, par exemple, à votre Definition of Done (la liste des conditions nécessaires pour qu’une user story puisse passer d’un état à un autre)
  • Plus vous les pratiquez, moins de temps cela vous prendra, c'est promis ! Surtout que les dix ne s'appliquent généralement pas tous à une seule user story.
  • Vous pouvez répartir les tests entre les membres de votre équipe : par exemple, le contraste et les formulaires pour l'UX/UI, la navigation au clavier pour les développeurs, les médias pour le Product Owner, etc.
  • Une nouvelle version des Easy Checks est actuellement en phase de brouillon, avec des mises à jour prévues pour être finalisées durant l’été 2024. Cette version vise à améliorer l'évaluation de l'accessibilité des pages web. Les tests présentés dans cet article sont maintenus et complétés par des tests supplémentaires pour répondre aux divers besoins des utilisateurs. Suivez l’avancée en consultant cette section.

Pour aller plus loin