Chapitre 1.4 — Les principes POUR

⏱️ TL;DR — Les WCAG, la norme de référence, ne sont pas une liste en vrac : elles s’organisent autour de quatre principes — Perceptible, Utilisable (opérable), Compréhensible, Robuste. En anglais l’acronyme donne POUR (Perceivable, Operable, Understandable, Robust). Chaque principe se décline en règles puis en critères de succès vérifiables, classés par niveaux A / AA / AAA. Retenir POUR te donne une grille mentale pour ranger tout ce que tu apprendras ensuite : « ce problème, c’est du Perceptible ou de l’Utilisable ? »

🎯 Objectifs

Mémoriser les quatre principes POUR et ce que chacun recouvre.
Comprendre la hiérarchie : principes → règles → critères de succès → niveaux.
Distinguer les niveaux A / AA / AAA (survol ; détail en Partie 2).
Utiliser POUR comme grille de classement des problèmes d’accessibilité.

D’où viennent ces principes

Les WCAG (Web Content Accessibility Guidelines) sont produites par le W3C. La version de référence aujourd’hui est WCAG 2.2 (Recommandation depuis octobre 2023). Tout le référentiel repose sur une idée : pour être accessible, un contenu doit satisfaire quatre exigences fondamentales. Si l’une manque, une catégorie d’utilisateurs est exclue.

P — Perceptible

L’information doit pouvoir être perçue, quel que soit le sens utilisé. Si un contenu n’existe que sous une forme (visuelle, ou sonore), ceux qui ne disposent pas de ce sens sont exclus. Concrètement :

Des alternatives textuelles pour les images (alt), lues par les lecteurs d’écran.
Des sous-titres et transcriptions pour les médias.
Un contraste suffisant entre texte et fond.
Une information qui ne repose pas uniquement sur la couleur (ex. « les champs en rouge » exclut les daltoniens).
Un contenu qui reste lisible quand on zoome ou qu’on modifie l’espacement.

U — Utilisable (opérable)

L’interface doit pouvoir être manipulée, quel que soit le moyen d’interaction. Beaucoup n’utilisent pas de souris. Concrètement :

Tout est accessible au clavier (Partie 4), sans piège au clavier.
Assez de temps pour agir (pas de délais brutaux).
Pas de contenu qui flashe dangereusement (risque d’épilepsie).
Des moyens de naviguer et de s’orienter : titres, liens explicites, ordre logique, liens d’évitement.
Des cibles de taille suffisante, des gestes non essentiels (Partie 13).

C — Compréhensible

Le contenu et le fonctionnement doivent être compréhensibles. Percevoir et manipuler ne suffit pas si l’utilisateur ne comprend pas. Concrètement :

Un langage clair, la langue de la page déclarée (lang) pour la bonne prononciation vocale.
Un comportement prévisible (pas de changement de contexte surprise au focus ou à la saisie).
Une aide à la saisie : labels, instructions, messages d’erreur utiles qui disent quoi corriger (Partie 9).

R — Robuste

Le contenu doit rester interprétable par une grande variété d’outils, y compris les technologies d’assistance présentes et futures. Concrètement :

Un HTML valide et correctement imbriqué (Partie 3).
Des composants dont le nom, le rôle et la valeur sont exposés programmatiquement — via le HTML natif, ou via ARIA quand nécessaire (Partie 6).
Des messages de statut annonçables sans voler le focus (live regions).

C’est le principe le plus « technique » : il garantit que ton interface parle correctement aux lecteurs d’écran, aux commandes vocales, etc.

💡 Réflexe — Face à n’importe quel bug d’accessibilité, demande-toi « quel principe POUR est en défaut ? ». Une image sans alt → Perceptible. Une modale qu’on ne peut pas fermer au clavier → Utilisable. Un message d’erreur cryptique → Compréhensible. Un composant custom muet pour le lecteur d’écran → Robuste. Cette classification t’oriente direct vers la bonne solution.

La hiérarchie : principes → règles → critères → niveaux

Sous chaque principe, les WCAG définissent des règles (12 au total), elles-mêmes déclinées en critères de succès (success criteria) — des affirmations vérifiables (« vrai/faux ») du type « les images portent une alternative textuelle ». Chaque critère a un niveau :

Niveau	Signification	Exemple
A	Minimum vital — sans quoi des groupes sont totalement bloqués	Contenu clavier-accessible
AA	La cible légale habituelle (RGAA, EAA)	Contraste texte ≥ 4,5:1
AAA	Renforcé, pas exigé globalement	Contraste ≥ 7:1, langage très simple

La cible pratique et légale, c’est niveau AA (qui inclut A). On détaille tout ça en Partie 2 ; ici, retiens la grille POUR et le fait que « conforme » veut presque toujours dire « conforme AA ».

🧭 Sur A11yLearn — On rangera chaque chantier d’A11yLearn sous son principe : sous-titrer les vidéos de cours (Perceptible), rendre le lecteur de cours navigable au clavier (Utilisable), clarifier les messages d’erreur du formulaire d’inscription (Compréhensible), exposer correctement le composant d’onglets custom du tableau de bord (Robuste). POUR devient la table des matières de nos corrections.

✏️ Exercices

Exercice 1 — Range sous le bon principe. Classe chaque problème sous P, U, C ou R : (a) une vidéo sans sous-titres, (b) un carrousel qu’on ne peut pas arrêter et qui piège le clavier, (c) un message « Erreur » sans explication, (d) un menu déroulant fait maison que le lecteur d’écran annonce comme du simple texte.

✅ Solution

(a) Perceptible — le contenu audio n’a pas d’alternative. (b) Utilisable — problème de manipulation et de contrôle (piège clavier, pas de pause). (c) Compréhensible — l’utilisateur ne sait pas quoi corriger. (d) Robuste — le composant n’expose pas son rôle/état aux technologies d’assistance. Savoir classer, c’est déjà savoir vers quelle famille de solutions se tourner.

Exercice 2 — Quel niveau viser ? Un client demande « la conformité WCAG ». Quel niveau supposes-tu par défaut, et pourquoi pas AAA partout ?

✅ Solution

Par défaut, niveau AA : c’est la cible des lois (RGAA, EAA) et le sens usuel de « conforme ». Le AAA n’est pas exigé de façon globale car certains de ses critères sont très contraignants ou impossibles pour certains types de contenu (le W3C lui-même déconseille d’exiger AAA sur l’ensemble d’un site). On peut viser certains critères AAA ponctuellement, mais l’engagement se prend sur AA.

🧠 Quiz de révision

1. Que veut dire POUR ?

Les quatre principes des WCAG : Perceptible, Utilisable (opérable), Compréhensible, Robuste. En anglais : Perceivable, Operable, Understandable, Robust → POUR. C’est la grille qui organise tous les critères.

2. À quel principe rattacher un contraste de texte insuffisant ?

Perceptible : l’information visuelle n’est pas perçue par une partie des utilisateurs (malvoyants, contexte lumineux). Le critère de contraste texte (4,5:1) est de niveau AA.

3. Quelle est la hiérarchie interne des WCAG ?

Principes (4) → règles (12) → critères de succès (vérifiables, vrai/faux) → chacun avec un niveau A, AA ou AAA. On teste la conformité au niveau des critères de succès.

4. Quel niveau les lois exigent-elles, et que signifie-t-il ?

Le niveau AA (qui englobe A). C’est l’équilibre entre accessibilité forte et faisabilité. Le AAA, plus exigeant, n’est pas requis globalement. « Conforme » veut presque toujours dire « conforme AA ».

5. En quoi le principe « Robuste » est-il particulier ?

C’est le plus technique : il garantit que le contenu reste interprétable par les outils (HTML valide, nom/rôle/valeur exposés, messages de statut annonçables). C’est lui qui assure que tes composants « parlent » correctement aux lecteurs d’écran et commandes vocales, aujourd’hui et demain.

Chapitre suivant : Mythes & réalités — on déconstruit les idées reçues qui freinent l’accessibilité dans les équipes.