Carte WCAG 2.2 - par thème
Ce diagramme regroupe, par thème, l'ensemble des critères de succès des Règles pour l'accessibilité des contenus Web (WCAG) , en version 2.2, de niveaux A et AA.
Cette représentation illustre les liens pratiques qui existent entre chaque critère, mais qui peuvent être difficiles à discerner à travers les noms des règles. Par exemple, tous les critères pouvant être testés à l'aide d'un clavier sont sur une seule ligne.
Cette structure est largement inspirée de l'arbre de décision WCAG qui entre plus en détail sur la manière de tester chaque critère.
D'autres versions sont disponibles sur la page du version en anglais .
Carte
Description
La carte ressemble à une carte de métro souterrain et affiche 55 critères de succès, représentant des stations étendues sur 7 lignes.
Chaque marqueur de station indique si le critère appartient au niveau A ou AA. Les 4 principes WCAG sont représentés par des zones s'éloignant du centre par de fines lignes grises :
- 1.x.x - Perceptible (les plus proches du centre)
- 2.x.x - Utilisable
- 3.x.x - Compréhensible
- 4.x.x - Robuste (les plus éloignés du centre)
Chaque ligne est décrite plus en détail dans les sections suivantes. Certains noms de critères ont été légèrement modifiés.
Clavier
Ces critères permettent d'assurer le bon fonctionnement au clavier, avec des états de focus visibles.
La ligne est bleu foncé. Elle traverse de l'ouest au nord.
| Numéro | Critère de succès | Niveau | Échanges |
|---|---|---|---|
| 1.4.13 | Contenu au survol ou au focus | AA | |
| 2.1.1 | Clavier | A | aucun |
| 2.1.2 | Pas de piège au clavier | A | aucun |
| 2.1.4 | Raccourcis clavier utilisant des caractères | A | aucun |
| 2.4.1 | Contourner des blocs | A | aucun |
| 2.4.3 | Parcours du focus | A | aucun |
| 2.4.7 | Visibilité du focus | AA | |
| 2.4.11 | Focus non masqué nouveau | AA | aucun |
| 3.2.1 | Au focus | A | aucun |
| 3.2.2 | À la saisie | A | |
| 4.1.2 | Nom, rôle et valeur | A |
Zoom et lisibilité
Ces critères garantissent que le texte est :
- lisible lorsqu'il est zoomé ou espacé
- présenté en tant que texte plutôt qu'en tant qu'image
- contrôlable lorsqu'il apparaît au survol ou au focus
La ligne est rouge sombre avec deux bandes intérieures blanches. Elle part de l'ouest du centre et continue vers l'ouest.
| Numéro | Critère de succès | Niveau | Échanges |
|---|---|---|---|
| 1.4.3 | Contraste | AA | |
| 1.4.5 | Texte sous forme d’image | AA | |
| 1.4.4 | Redimensionnement du texte | AA | aucun |
| 1.4.10 | Redistribution | AA | |
| 1.4.12 | Espacement du texte | AA | aucun |
| 1.4.13 | Contenu au survol ou au focus | AA |
Contenu sensoriel
Ces critères permettent d'éviter qu'un contenu dépende d'un sens en particulier :
- en assurant un contraste suffisant
- en évitant de dépendre uniquement de vue, des couleurs, de l'audition ou du temps
- en évitant les distractions audio ou vidéo
La ligne est jaune avec des bordures noires. Elle va principalement du nord-ouest à l'est, en formant une boucle au niveau des «Caractéristiques sensorielles».
| Numéro | Critère de succès | Niveau | Échanges |
|---|---|---|---|
| 2.4.7 | Visibilité du focus | AA | |
| 1.4.11 | Contraste du contenu non textuel | AA | aucun |
| 1.4.3 | Contraste | AA | |
| 1.4.1 | Utilisation de la couleur | A | aucun |
| 1.4.5 | Texte sous forme d'image | AA | |
| 1.1.1 | Contenu non textuel | A | |
| 1.3.3 | Caractéristiques sensorielles | A | |
| 1.2.1 | Audio et vidéo seulement | A | aucun |
| 1.2.2 | Sous-titres (pré-enregistrés) | A | aucun |
| 1.2.4 | Sous-titres (en direct) | AA | aucun |
| 1.2.5 | Audio-description | AA | aucun |
| 1.2.3 | Audio-description ou version de remplacement | A | aucun |
| 1.4.2 | Contrôle de l'audio | A | aucun |
| 2.2.1 | Réglage du délai | A | |
| 2.2.2 | Mettre en pause, arrêter, masquer | A | aucun |
| 2.3.1 | Pas plus de trois flashs | A | aucun |
Code et étiquettes
Ces critères assurent la compatibilité des contenus avec les technologies d'assistance :
- en veillant à la cohérence entre le code et l'aspect visuel des contenus
- en assurant la présence d’étiquettes adaptées
Les formulaires ont des critères supplémentaires.
La ligne est noire avec des bords blancs. Elle part du sud et se dirige surtout vers le nord.
| Numéro | Critère de succès | Niveau | Échanges |
|---|---|---|---|
| 3.1.2 | Langue d’un passage | AA | aucun |
| 3.1.1 | Langue de la page | A | aucun |
| 2.4.2 | Titre de page | A | |
| 1.1.1 | Contenu non textuel | A | |
| 1.3.1 | Informations et relations | A | aucun |
| 1.3.2 | Ordre séquentiel logique | A | aucun |
| 2.4.4 | Fonction du lien | A | aucun |
| 2.4.6 | En-têtes et étiquettes | AA | aucun |
| 2.5.3 | Étiquette dans le nom | A | |
| 3.3.2 | Étiquettes ou instructions | A | |
| 3.2.2 | À la saisie | A | |
| 4.1.2 | Nom, rôle et valeur | A | |
| 4.1.3 | Messages d’état | AA |
Formulaires
Ces critères garantissent des formulaires utilisables qui :
- ne dépendent pas du temps ou des instructions sensorielles
- proposent des instructions et messages d'erreur appropriés
- permettent l'interaction avec les technologies d'assistance
- permettent de se connecter ou de finaliser un formulaire facilement
La ligne est verte avec une ligne intérieure blanche. Elle part de l'est du centre et se dirige surtout vers le nord. Elle forme une boucle après «Identifier la finalité de la saisie».
| Numéro | Critère de succès | Niveau | Échanges |
|---|---|---|---|
| 2.2.1 | Réglage du délai | A | |
| 1.3.3 | Caractéristiques sensorielles | A | |
| 1.3.5 | Identifier la finalité de la saisie | AA | aucun |
| 2.5.3 | Étiquette dans le nom | A | |
| 3.3.2 | Étiquettes ou instructions | A | |
| 3.2.2 | À la saisie | A | |
| 4.1.2 | Nom, rôle et valeur | A | |
| 4.1.3 | Messages d’état | AA | |
| 3.3.1 | Identification des erreurs | A | aucun |
| 3.3.3 | Suggestion après une erreur | AA | aucun |
| 3.3.4 | Prévention des erreurs | AA | aucun |
| 3.3.7 | Saisie redondante nouveau | A | aucun |
| 3.3.8 | Authentification accessible (minimum) nouveau | AA | aucun |
Gestes
Ces critères garantissent que la fonctionnalité :
- ne dépend pas de gestes, glissements ou mouvements
- fonctionne sur petits écrans, en mode portrait et paysage
- réduit le risque de lancer une action indésirable
La ligne est couleur cyan avec des bords et une ligne intérieure noirs. Elle forme une boucle dans le sud-ouest.
| Numéro | Critère de succès | Niveau | Échanges |
|---|---|---|---|
| 1.4.13 | Contenu au survol ou au focus | AA | |
| 1.3.4 | Orientation | AA | aucun |
| 1.4.10 | Redistribution | AA | |
| 2.5.1 | Gestes pour le contrôle du pointeur | A | aucun |
| 2.5.2 | Annulation de l'action du pointeur | A | aucun |
| 2.5.4 | Activation par le mouvement | A | aucun |
| 2.5.7 | Mouvements de glissement nouveau | AA | aucun |
| 2.5.8 | Taille de la cible nouveau | AA | aucun |
Ensemble du site
Ces critères doivent être testés dans l'ensemble du site pour assurer que :
- les noms, menus et mécanismes d'aide apparaissent systématiquement
- les pages ont des titres clairs
- les pages sont accessibles de plusieurs manières
La ligne est rose avec deux lignes intérieures noires. Elle part du sud et se dirige vers l'est.
| Numéro | Critère de succès | Niveau | Échanges |
|---|---|---|---|
| 2.4.2 | Titre de page | A | |
| 2.4.5 | Accès multiples | AA | aucun |
| 3.2.3 | Navigation cohérente | AA | aucun |
| 3.2.4 | Identification cohérente | AA | aucun |
| 3.2.6 | Aide cohérente nouveau | A | aucun |
Alternatives et remerciements
Un grand merci à Elisabeth Duranthon, Yasmine Benotmane, Serena Furnari, Aymeric Tridon et Pierre-Yves Ayoul pour la traduction vers le français, et Johannes Lehner de nous connecter!
Les autres versions et messages de remerciement sont sur la page de la carte AA en anglais.
Licence
Merci pour votre visite ! Ce travail est sous la licence Creative Commons : CC BY-NC 4.0
C'est un plaisir pour moi que cette carte soit utilisée ou adaptée, mais veuillez :
- ajoutez les crédits, avec un lien renvoyant à la description complète accessible sur AndrewHick.com/wcag-fr
- partagez ou retravaillez la de manière accessible (par exemple en ajoutant un texte équivalent aux images)
- demandez-moi avant une quelconque utilisation commerciale