Web Content Accessibility Guidelines (WCAG) 2.0

Ce document est une synthèse (et notre interprétation) des WCAG 2.0. Nous le publions ici en tant qu’aide-mémoire. Il pourra vous être utile pour évaluer l’accessibilité d’un site lors des phases de conception fonctionnelle et graphique.

Merci de vous référer à la documentation officielle : Web Content Accessibility Guidelines (WCAG) 2.0

Traduction en français : Règles pour l’accessibilité des contenus Web (WCAG) 2.0

Voir aussi : WebAIM’s WCAG 2.0 Checklist for HTML documents (aide-mémoire pratique non officiel).

Critères et niveaux

Les WCAG définissent 61 critères répartis en trois niveaux : A, double A (AA) et triple A (AAA).

Niveau A	Niveau AA	Niveau AAA
25 critères	13 critères	23 critères

Le niveau AA (minimum recommandé applicable dans tous les cas de figure) comprend 38 critères (25 critères de niveau A + 13 critères de niveau AA).

Les critères de niveau AAA peuvent ne pas être applicables dans tous les cas de figure où à l’intégralité des éléments.

4 principes, 12 règles (guidelines)

1. Perceptible

L’information et les composants de l’interface utilisateur sont présentés à l’utilisateur de telle sorte qu’il puisse les percevoir.

1.1. Alternatives textuelles

Proposer une alternative textuelle pour tout contenu non textuel.

1.1.1 [A] Contenu non textuel

Fournir une alternative textuelle (attribut alt) pour les images (img), les zones actives (area) des images réactives (img usemap) et les boutons de formulaire de type image (input type="image").

Images véhiculant une information : l’attribut alt donne une indication de la nature de l’image et du contenu.
Images décoratives : l’attribut alt (obligatoire) est vide (alt="").
Images utilisées comme lien : l’attribut alt donne la destination de lien.
Boutons de formulaire de type image : l’attribut alt donne la fonction du bouton.

Si nécessaire, fournir une description longue de l’image (référencée par exemple via un attribut longdesc), soit dans la page, soit dans une autre page accessible via un lien adjacent.

Si nécessaire, utiliser les attributs ARIA aria-label, aria-labelledby, aria-described-by ou d’autres techniques appropriées.

Exceptions et cas particuliers :

Contrôles, zones de saisie : voir le critère 4.1.2 – Nom, rôle, valeur.
Médias temporels : donner une information permettant d’identifier la nature du média et une description. Voir 1.2 – Médias temporels.
Tests, exercices : donner une information permettant d’identifier la nature du test ou de l’exercice et une description.
Eléments faisant appel à une expérience sensorielle spécifique : donner une information permettant d’identifier la nature de l’élément et une description.
CAPTCHA : donner une information permettant d’identifier la nature et la fonction du CAPTCHA et proposer des alternatives non graphiques utilisables.
Eléments décoratifs, invisibles ou utilisés à seule fin de mise en forme : faire en sorte que ces éléments soient ignorés par les technologies d’assistance.

1.2. Médias temporels

Proposer des versions de remplacement aux médias temporels.

1.2.1 [A] Médias préenregistrés seulement audio ou seulement vidéo

médias seulement audio : fournir une transcription textuelle ;
médias seulement vidéo : fournir une transcription textuelle ou une audiodescription synchronisée.

1.2.2 [A] Médias préenregistrés synchronisés (vidéo + audio)

Fournir des sous-titres synchronisés.

1.2.3 [A] Médias préenregistrés synchronisés (vidéo + audio)

Fournir une transcription textuelle ou une audiodescription synchronisée.

1.2.4 [AA] Transmission audio en direct

Fournir des sous-titres synchronisés.

1.2.5 [AA] Médias préenregistrés synchronisés (vidéo + audio) ou seulement vidéo

Fournir une audiodescription synchronisée.

1.2.6 [AAA] Médias préenregistrés synchronisés (vidéo + audio) ou seulement audio

Fournir une interprétation en langue des signes.

1.2.7 [AAA] Médias préenregistrés synchronisés (vidéo + audio) ou seulement vidéo

Fournir une audiodescription étendue.

1.2.8 [AAA] Médias préenregistrés synchronisés (vidéo + audio) ou seulement vidéo

Fournir une transcription textuelle.

1.2.9 [AAA] Transmission audio en direct

Fournir une transcription textuelle.

1.3. Adaptable

Créer un contenu qui puisse être présenté de différentes manières (par exemple avec une mise en page simplifiée) sans perte d’information ou de structure.

1.3.1 [A] Information et relations

L’information, la structure, et les relations véhiculées par la présentation doivent pourvoir être exploitées informatiquement ou être véhiculées par du texte.

Exploiter et respecter la sémantique des éléments HTML.

1.3.2 [A] Ordre compréhensible

L’information doit se présenter (dans le code et à l’écran) dans un ordre de lecture compréhensible (l’ordre des mots et des paragraphes doit être cohérent).

1.3.3 [A] Caractéristiques sensorielles des composants

L’information ne doit pas être véhiculée uniquement par la forme, la taille, la position ou l’orientation des éléments.

L’information ne doit pas être véhiculée uniquement par le son.

1.4 Distinguable

Faire en sorte qu’on puisse distinguer le contenu de « l’arrière-plan » (visuel et sonore).

1.4.1 [A] Utilisation de la couleur

L’information ne doit pas être véhiculée uniquement par la couleur.

1.4.2 [A] Contrôle du son

Dans le cas d’un son lancé automatiquement (et d’une durée supérieure à 3 secondes), l’utilisateur doit disposer d’un moyen de contrôle immédiat (stop, pause, silence ou réglage du volume indépendamment du volume système).

1.4.3 [AA] Contraste minimum

Rapport de contraste minimum :

texte en taille normale : 4,5:1
texte en gros caractères : 3:1

Taille normale du texte (valeur par défaut) : 16 pixels (soit 12 points à 96 points par pouce).

Texte en gros caractères :

≥ 150% de la taille normale pour le texte sans effet de graisse (soit 24 pixels ou 18 points)
≥ 120% de la taille normale pour le texte en gras (soit environ 19 pixels ou 14 points)

Exceptions : images ou éléments purement décoratifs et logotypes.

1.4.4 [AA] Agrandissement du texte

Le texte doit pouvoir être agrandi jusqu’à 200% de sa taille originale sans perte d’information (sans chevauchement des lignes et des caractères, et sans débordement du cadre).

1.4.5 [AA] Texte en image

S’il est possible techniquement d’obtenir la même présentation, l’information doit être véhiculée par du texte et non par du texte « en image », sauf :

si l’utilisateur peut choisir la police, la taille et la couleur du texte et de l’arrière-plan ;
le respect de la forme du texte est essentiel (comme par exemple dans le cas d’un logotype).

1.4.6 [AAA] Contraste amélioré

Rapport de contraste minimum :

texte en taille normale : 7:1
texte en gros caractères : 4.5:1

Cf. § 1.4.3 pour la détermination de la taille du texte en taille normale et en gros caractères.

1.4.7 [AAA] Bruit de fond

Le niveau de bruit doit être au moins 20 décibels plus faible (environ quatre fois plus faible) que celui du contenu parlé (ou le bruit doit durer moins d’une ou deux secondes).

1.4.8 [AAA] Présentation visuelle

L’utilisateur doit avoir la possibilité de choisir la couleur du texte et la couleur de l’arrière-plan.

Le texte doit pouvoir être lu dans les conditions suivantes :

longueur d’une ligne : 80 caractères (maximum) ;
alignement : non justifié ;
interligne : 1,5 fois la taille des caractères (au moins) ;
espacement entre les paragraphes : 1,5 fois la valeur de l’interligne (au moins).

1.4.9 [AAA] Texte sous forme d’image (sans exception)

Le texte sous forme d’image ne doit être utilisé que pour des images purement décoratives (ne véhiculant aucune information), sauf si le respect de la forme du texte est essentiel (comme par exemple dans le cas d’un logotype).

Pages : 1234