Accessibilité : les quatre principes WCAG appliqués concrètement

Ce que c'est

Les Web Content Accessibility Guidelines (WCAG) 2.2 du W3C organisent leurs critères de succès selon quatre principes ; la traduction allemande de la version 2.0 publiée par le W3C les nomme wahrnehmbar (perceptible), bedienbar (utilisable), verständlich (compréhensible) et robust (robuste). Chaque critère porte un niveau de conformité A, AA ou AAA ; AA est le niveau habituellement retenu comme objectif. La version 2.2 ajoute notamment des critères sur la taille minimale des éléments de commande (2.5.8 « Target Size (Minimum) » : 24 sur 24 pixels CSS), sur le focus non masqué (2.4.11), sur la répétition de saisies déjà effectuées (3.3.7 « Redundant Entry ») et sur l'authentification sans tâche de mémorisation ou de résolution d'énigme (3.3.8 « Accessible Authentication (Minimum) ») ; le critère 4.1.1 « Parsing » est supprimé dans la version 2.2 car jugé obsolète. Le texte original anglais fait seul foi ; les traductions n'ont pas de valeur normative.

Pourquoi c'est important

Les obstacles à l'accessibilité excluent les personnes qui utilisent un lecteur d'écran, le clavier, un agrandissement ou une commande vocale. Les mêmes manquements gênent aussi les moteurs de recherche et les lecteurs automatisés : une image sans alternative textuelle, un bouton sans nom accessible, un champ sans étiquette sont invisibles pour tout accès non visuel. Les quatre principes forment une grille de vérification que l'on peut parcourir mentalement, même sans outil.

Comment l'appliquer

• Perceptible : chaque image porteuse d'information reçoit un attribut alt, les images purement décoratives un attribut vide (alt=""). Le texte normal exige un rapport de contraste d'au moins 4,5:1, le grand texte 3:1. Ne jamais transmettre une information par la seule couleur ; souligner les liens dans le texte courant.
• Utilisable : toutes les fonctions sont accessibles au clavier, le focus est visible et ne reste jamais piégé (2.1.2 « No Keyboard Trap »). Cibles de clic et de frappe d'au moins 24 sur 24 pixels CSS, ou avec un espacement suffisant. Un lien d'évitement mène au contenu principal.
• Compréhensible : déclarer la langue de la page avec lang, chaque section en langue étrangère individuellement. Navigation identique sur toutes les pages. Les messages d'erreur nomment le champ et la correction à apporter ; les données déjà saisies ne sont pas redemandées.
• Robuste : HTML sémantique (titres, listes, points de repère, button plutôt qu'un div cliquable) ; ARIA seulement là où HTML n'offre pas d'équivalent.
• Vérifier : d'abord de façon automatisée (elle détecte les manquements formels), puis un passage au clavier seul et un autre avec un lecteur d'écran sur les parcours essentiels.

Pièges

Un attribut title n'est pas un nom accessible. Supprimer le contour de focus pour des raisons esthétiques enfreint le critère 2.4.7. Les outils de vérification automatisés n'évaluent en général pas le contenu des alternatives textuelles : alt="Bild" passe le contrôle et n'aide personne. Des « surcouches d'accessibilité » ajoutées après coup ne remplacent pas une structure absente du code source. Quiconque ne lit que la traduction allemande de la version 2.0 ignore les critères ajoutés en 2.1 et 2.2.