Tester l'accessibilité des sites Web Drupal avec WCAG 2.1

Saviez-vous qu'aux États-Unis, 1 adulte sur 4 souffre d'un handicap* ? C'est un chiffre stupéfiant de 61 millions de personnes susceptibles d'être touchées par des sites Web inaccessibles.

En tant que développeur Drupal, vous avez le pouvoir de faire la différence en vous assurant que votre site respecte les directives pour l'accessibilité des contenus Web (WCAG). Dans ce blog, nous allons explorer les fonctionnalités clés et les meilleures pratiques pour tester l'accessibilité WCAG 2.1 dans Drupal, afin que vous puissiez créer des sites Web inclusifs pour tous les utilisateurs.

Qu'est-ce que l'accessibilité (A11y)

L'accessibilité consiste à rendre un site Web utilisable par le plus grand nombre de personnes possible, en particulier en ce qui concerne les personnes handicapées. A quoi fait référence A11y ? A11y fait simplement référence au mot "Accessibilité" où 11 désigne le nombre de caractères présents entre "A" et "Y"

WCAG et ses origines

WCAG signifie Web Content Accessibility Guidelines. Il est considéré comme la référence standardisée pour l'accessibilité des sites Web. Créées par le World Wide Web Consortium (W3C), les directives WCAG sont le meilleur et le plus simple moyen de rendre votre site Web utilisable par tous. Les directives des WCAG sont strictement suivies par la plupart des organisations gouvernementales et de soins de santé afin de garantir que le site Web respecte les lois sur l'accessibilité (par exemple, l'article 508).

Principes des WCAG

Il existe quatre grands principes d'accessibilité si vous souhaitez adopter la conformité WCAG. Ceux-ci suivent l'acronyme « POUR », qui signifie Perceivable, Operable, Understandable, and Robust .

Perceptible

En termes simples, le contenu doit être détectable par les sens de l'utilisateur. Cela signifie qu'ils doivent être capables de reconnaître les informations qui leur sont présentées. Cela inclut de permettre aux utilisateurs d'entendre clairement le contenu audio et de s'assurer qu'il se distingue du bruit de fond.

Opérable

Il s'agit de s'assurer que les utilisateurs peuvent naviguer confortablement sur votre site Web et que l'interface est conviviale. Il ne doit pas y avoir de partie inaccessible du site ou d'étapes que les utilisateurs pourraient être incapables d'accomplir. Devrait éviter le contenu rapide et clignotant lors de la conception de votre contenu Web. Il devrait être facile de naviguer sur le site sans clavier, en s'assurant également que le site est accessible au clavier pour les utilisateurs qui ne peuvent pas utiliser de souris.

Compréhensible

Les utilisateurs doivent être en mesure de traiter les informations qui leur sont présentées et également être en mesure de comprendre comment utiliser et naviguer sur le site Web. Cela inclut de rendre le texte clair, lisible et prévisible pour s'assurer que les pages apparaissent de manière conviviale et anticipée.

Robuste

Cela met en évidence que la technologie pourrait évoluer et construire votre site Web avec les évolutions technologiques futures. En règle générale, si la technologie change et se développe, le contenu doit également rester accessible. Il doit également être compris par un large éventail d'utilisateurs ayant différents handicaps et reste toujours facile à comprendre. Par exemple, le site l'a rendu compatible pour fonctionner avec la dernière version des lecteurs d'écran.

Pourquoi devriez-vous vous conformer aux WCAG

Voici quelques-uns des avantages de la mise en œuvre des WCAG

• Un site Web accessible renforce la bonne volonté envers votre marque et améliore l'optimisation des moteurs de recherche. Votre site sera mieux classé dans les résultats des moteurs de recherche.
• Un site Web accessible permet un engagement, une portée et une rétention accrus, car vous aurez efficacement supprimé les obstacles qui empêchent un large éventail de personnes d'accéder à votre contenu.
• Une fois que WCAG est implémenté dans le cadre d'un site Web, il est considéré comme standard.

Critères de réussite WCAG 2.0/2.1 : les plus largement mis en œuvre

1. Chaque champ de saisie sur le site a une étiquette appropriée
2. Le contenu décoratif est mis en œuvre de manière à pouvoir être ignoré par la technologie d'assistance. Par exemple, les images décoratives ignorées par les lecteurs d'écran
3. Des sous-titres sont fournis pour tout le contenu audio/vidéo préenregistré
4. Une interprétation en langue des signes est fournie pour le contenu audio
5. Une séquence significative de contenu, par exemple les titres de n'importe quelle page sont placés dans un ordre séquentiel
6. L'utilisateur peut mettre en pause ou arrêter l'audio ou contrôler le volume audio indépendamment du volume global du système pour lire automatiquement les vidéos.
7. Le rapport de contraste du texte et des images de texte est de 4,5:1, et le texte et les images à grande échelle sont de 3:1. Le rapport de contraste ne s'applique pas au contenu décoratif ou au logo ou au nom de la marque
8. Audio de fond faible ou inexistant. L'audio/vidéo préenregistré ne contient aucun bruit de fond
9. Toutes les fonctionnalités du contenu sont accessibles via l'interface clavier. Il n'y aura pas de piège à mots-clés.
10. Donner aux utilisateurs suffisamment de temps pour lire et utiliser le contenu
11. Si le contenu est basé sur le temps, l'utilisateur est autorisé à mettre en pause ou à ajuster la contrainte de temps
12. En cas de contenu en mouvement rapide tel que des carrousels automatiques, l'utilisateur se verra présenter des options pour le mettre en pause ou l'arrêter
13. Lorsque la session de l'utilisateur authentifié expire, l'utilisateur pourra poursuivre la session sans perte de données après la réauthentification.
14. Les titres de page, les en-têtes et les étiquettes décriront le sujet de la page Web
15. Le focus du clavier est visible et bien mis en évidence
16. Les composants focalisables recevront le focus dans un ordre qui signifie sens et opérabilité.
17. Chaque section de la page Web est accompagnée de son titre de section
18. À l'exception des images décoratives, toutes les images ont un texte alternatif significatif
19. L'audio, la vidéo, les formulaires, les menus déroulants, le texte d'ancrage, les URL et le texte alternatif sont accessibles au clavier et au lecteur d'écran
20. La clarté du contenu s'adapte en fonction du niveau de zoom de la page. Le contenu est clairement visible, même au niveau de zoom maximal
21. Le menu d'en-tête et de pied de page avec contexte d'aide doit être disponible sur toutes les pages du site
22. Les sites ont une mise en œuvre appropriée des états de survol et de mise au point

Lecteurs d'écran

De nombreuses personnes ayant des difficultés visuelles utilisent des loupes d'écran et des lecteurs d'écran. Un lecteur d'écran est un logiciel qui lit à voix haute le texte numérique affiché à l'écran. Voici quelques exemples de lecteurs d'écran :

• Produits payants comme JAWS (Windows) et Dolphin Screen Reader (Windows).
• Freeware comme NVDA (Windows), ChromeVox (Chrome) et Orca (Linux).
• Logiciel intégré au système d'exploitation (système d'exploitation), comme VoiceOver (macOS, iPadOS, iOS), Narrator (Windows), ChromeVox (sur Chrome OS) et TalkBack (Android).

Trois niveaux d'accessibilité

WCAG 2.1 a 3 niveaux de critères de réussite

• Niveau A : Les 30 critères de réussite essentiels définis dans les WCAG 2.0 sont remplis. Au minimum, tous les sites Web doivent atteindre ce niveau de conformité.
• Niveau AA : Tous les critères de réussite de niveau A sont satisfaits et 28 autres critères de réussite en matière d'accessibilité sont satisfaits. Ce niveau atteint un spectre d'accessibilité plus large et est souvent l'objectif que la plupart des équipes de développement doivent atteindre.
• Niveau AAA : Le site Web doit satisfaire aux trois niveaux de critères de succès, y compris 28 critères de succès supplémentaires. Ce niveau est généralement réservé aux sites spéciaux tels que les organisations gouvernementales.

La plupart des sites compatibles WCAG relèvent largement des critères de succès d'accessibilité de niveau A ou AA.

Test d'accessibilité d'un site Web Drupal

Voici les étapes suivies pour effectuer un test d'accessibilité pour un site Web Drupal

1. Exécutez un audit Google Chrome Lighthouse et corrigez les problèmes d'accessibilité mis en évidence
2. Exécuter un audit de l'outil Wave
3. Valider manuellement le focus de surbrillance du clavier et l'ordre de tabulation de la page
4. Validez la page avec le logiciel de lecteur d'écran requis. Par exemple, VoiceOver
5. Valider l'accessibilité du site sur toutes les résolutions telles que les ordinateurs de bureau larges, les ordinateurs portables, les onglets et les appareils mobiles
6. Valider le code du site à l'aide des outils de validation du W3C pour le balisage et le CSS
7. Validez le contraste des couleurs du site pour vous assurer qu'il respecte les normes (4:5:1) en utilisant un outil d'extensions Chrome comme Kontrast ou une application comme Color Contrast Analyzer

Comment Drupal aide à atteindre les normes d'accessibilité

Le développement Web doit inclure l'accessibilité pour s'assurer que les sites Web sont fonctionnels et accessibles aux personnes handicapées. Drupal est réputé pour son dévouement inébranlable à l'accessibilité. Découvrez comment Drupal promeut l'accessibilité et quels outils et fonctionnalités il fournit pour aider les sites Web à être plus conviviaux.

1. Renforcer l'accessibilité dans Drupal

L'objectif de l'équipe de développement Drupal a toujours été de créer une plate-forme utilisable par autant d'utilisateurs que possible. Les exigences de niveau AA des directives pour l'accessibilité du contenu Web (WCAG) 2.1 sont suivies lors du développement de la plate-forme principale Drupal. Cela indique qu'une variété de handicaps, tels que ceux affectant les systèmes visuel, auditif, physique, verbal, cognitif et neurologique, peuvent accéder aux sites Web Drupal.

2. Fonctionnalités d'accessibilité par défaut

• Grâce à leur capacité à s'adapter à différentes tailles d'écran et appareils grâce à une conception réactive, les thèmes par défaut de Drupal sont utilisables pour ceux qui utilisent des appareils mobiles ou des technologies d'assistance.
• Drupal crée un balisage HTML sémantique, qui aide les lecteurs d'écran et d'autres outils technologiques d'assistance à comprendre la structure du site Web.
• Drupal inclut un champ pour ajouter du texte alternatif aux photos, ce qui aide les personnes aveugles à comprendre le contenu du site Web.
• Drupal prend en charge la navigation au clavier, ce qui est crucial pour les utilisateurs qui ne peuvent pas utiliser de souris.
• Des formulaires faciles à utiliser et à naviguer avec une technologie d'assistance sont générés par Drupal qui sont accessibles.

3. Drupal fournit des plugins et des modules pour l'accessibilité

Pour améliorer l'accessibilité d'un site Web, Drupal fournit une variété de modules d'accessibilité et de plugins qui peuvent être déployés. Plusieurs modules et plugins d'accessibilité appréciés sont les suivants :

• Editoria11y Accessibility Checker : Ce module examine un site Web pour détecter les problèmes d'accessibilité et recommande des solutions.
• Plugin d'accessibilité CKEditor : ce module complémentaire améliore l'accessibilité de l'éditeur de texte largement utilisé pour Drupal, CKEditor.
• Widget d'accessibilité tout-en-un : ce module comprend un widget d'accessibilité qui permet aux utilisateurs de modifier la taille du texte, le contraste et d'autres paramètres liés à l'accessibilité du site Web.
• A11Y : Aides aux formulaires : ce module permet de rendre tous les formulaires Web Drupal conformes aux normes d'accessibilité.
• Bloquer les rôles de point de repère ARIA : ce module ajoute des éléments supplémentaires aux formulaires de configuration de bloc qui permettent aux utilisateurs d'attribuer un rôle de point de repère ARIA et/ou des étiquettes ARIA à un bloc.

4. Solide soutien de la communauté pour l'accessibilité

Les développeurs et les concepteurs qui s'engagent pour l'accessibilité constituent une partie importante de la communauté Drupal. Un effort mené par la communauté pour rendre Drupal plus accessible aux personnes handicapées est le Drupal Accessibility Group. Le groupe propose des conseils, des outils et des meilleures pratiques pour développer des sites Web Drupal conformes à l'ADA.

Les références:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

Dernières pensées

Drupal est un système de gestion de contenu efficace et open source qui fournit une variété de fonctionnalités, d'outils et de plugins pour améliorer l'accessibilité d'un site Web. En raison de son dévouement à l'accessibilité et de la force de sa communauté axée sur l'accessibilité, Drupal est une plate-forme fantastique pour créer des sites Web utilisables et accessibles aux personnes handicapées.
J'espère que cet article vous fournira les informations nécessaires sur les tests d'accessibilité avec WCAG 2.1. Vous souhaitez créer un site Web Drupal accessible à partir de zéro ou souhaitez rendre votre site actuel plus accessible ? Nous aimerions que cela se produise! Parlons!