WCAG ⬄ Web Content Accessibility Guidelines
61 règles pour l’accessibilité des contenus web développées par la W3C
WACG v. 2.0 inclut et décris 4 groupes différents : Perception, Fonctionnalité, Intelligibilité et Fiabilité
| Groupe | Description |
|---|---|
| PERCEPTION | Présentation des informations et composants accessibles à l’interface utilisateur ex. couleurs / contraste / éléments texte pour les images… |
| FONCTIONNALITÉ | L’interaction doit être autorisée par les composants de l’interface utilisateur et la navigation ex. navigation au clavier / titre des liens / … |
| INTELLIGIBILITÉ | Exactitude du contenu et de l’interface utilisateur du service ex. prévention des erreurs / … |
| FIABILITÉ | Le contenu doit être suffisamment fiable pour être interprété correctement par de nombreux utilisateurs différents ex. responsive design / compatibilité navigateur web / … |
WACG n’est pas une norme technique, mais une norme fonctionnelle (guidelines)
Article 508 aux États-Unis : une obligation légale
Plusieurs niveaux de conformité : A / AA / AAA
En France, 2 référentiels regroupés … : Accessiweb et RGAA
« Les services de communication publics en ligne des services de l’État, des collectivités territoriales et des établissements publics qui en dépendent doivent être accessibles aux personnes handicapées (…) »
Source : loi sur l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées (février 2005)
Quelques chiffres sur le handicap
15 % de la population mondiale, soit un milliard de personnes présentent une forme de handicap.
Ex. déficience visuelle / problèmes auditifs / troubles cognitifs
Dans le monde, 500 millions de personnes présentent une déficience auditive handicapante.
10 % de la population mondiale a plus de 65 ans (seniors)
Les robots d’indexation sont en partie aveugles et sourds !
Optimisation SEO via l’optimisation de l’accessibilité — ex. ALT des images
Une meilleure expérience utilisateur (UX) pour tout le monde.
Des outils pour tester l’accessibilité de son site web
- extension Chrome Google Lighthouse
- AChecker (audit basé sur le niveau AA du WCAG 2.0)
- extension ChromeLens pour simuler les handicapes avec Google Chrome
- extension axe DevTools – Web Accessibility Testing
- test responsive design : ready.mobi
- …
Google Lighthouse
ChromeLens : ex. simulation daltonisme
axe DevTools – Web Accessibility Testing
Les grandes règles à suivre
- proposer des équivalents textuels aux contenus non textuels (vidéos, photos, illustrations) : mise en place des textes ALT (exception faite des images purement décoratives) / sous-titres vidéo — audio
- les contenus doivent être adaptables en fonctions des supports sans induire une perte d’informations : responsive design
- les contenus doivent être facilement distingués des autres : couleurs, taille de police, contraste et arrière-plan
- les contenus doivent être lisibles dans la langue de l’internaute : internationalisation — langue dans l’en-tête HTML
- les erreurs de saisie doivent être détectées, des instructions doivent indiquer une saisie requise
- l’élément actif / sélectionné doit être mis en avant
- liaison entre étiquette et champ (for, id)
- les liens doivent disposer de titres affichés au survol
- des titres explicites doivent être donnés aux champs de formulaire ou un <label>
- un fil d’Ariane doit être présent pour visualiser le chemin
- changement d’état au survol d’un élément interactif
- donner la possibilité de choisir la taille du texte (16 px minimum)
- l’interlignage doit être suffisant (1.5 minimum)
- avoir un design simple et facilement compréhensible
- les boutons et éléments cliquables doivent être suffisamment agrandis et espacés
- éviter les animations complexes (effet psychédélique)
- les infographies et tableaux comportent un titre
- le texte est suffisamment aéré, il comporte des intertitres et éléments graphiques permettant de rythmer la lecture
- zoom autorisé sur mobile
- rotation de l’écran autorisée
- le site présente au moins 2 moyens de navigation : menu, plan de site, moteur de recherche
- la navigation sur le site avec un clavier doit être possible : touches TAB et shift TAB
- créer un retour en haut de page
- utiliser des listes à puces
- ne pas utiliser l’alignement “justify” qui présente des “trous” rendant le texte difficile à lire
- 1 seul titre de niveau <h1> par page
- enchaînement logique des niveaux de titres : ex. Titre de niveau 1 > Titre de niveau 2 > Titre de niveau 3
- les éléments de média (vidéo, audio, carrousel, etc) ne doivent pas être réglés pour se lire automatiquement
contrastchecker.com pour vérifier les contrastes…
app.contrast-finder.org pour trouver les bons contrastes pour l’accessibilité.
WordPress et l’accessibilité
Les thèmes WordPress
Le thème Twenty Twenty-One respecte le référentiel WCAG 2.1 au niveau AAA (le plus haut niveau d’accessibilité).
Storefront thème phare de WooCommerce, répond aux critères d’accessibilité.
Les extensions WordPress
Extension WP Accessibility
- Activation du lien de saut, permettant aux utilisateurs d’accéder directement au contenu utile dans le cas d’un lecteur d’écran évite la lecture d’éléments (menus de navigation, etc)
- Barre d’outils pour redimensionner les polices, ou appliquer un contraste élevé
- …
One Click Accessibility
- Activation du contrôle de la taille des polices, du contraste, le soulignement des liens, les polices lisibles
- …
