Accessibilité Web (WCAG 2.2) – Guide des standards
Guide de référence complet pour l’accessibilité web : standards WCAG 2.2, ARIA, HTML sémantique, navigation clavier, lecteurs d’écran et outils de test.
Table des matières
- Introduction WCAG 2.2
- HTML sémantique
- ARIA (Accessible Rich Internet Applications)
- Navigation clavier
- Formulaires accessibles
- Images et médias
- Couleurs et contrastes
- Typographie et lisibilité
- Lecteurs d’écran
- Navigation et structure
- Animations et interactions
- Outils de test et validation
- 2.4.11 Focus Not Obscured (Minimum) – AA
- 2.4.12 Focus Not Obscured (Enhanced) – AAA
- 2.4.13 Focus Appearance – AAA
- 2.5.7 Dragging Movements – AA
- 2.5.8 Target Size (Minimum) – AA
- 3.2.6 Consistent Help – A
- 3.3.7 Redundant Entry – A
- 3.3.8 Accessible Authentication (Minimum) – AA
- 3.3.9 Accessible Authentication (Enhanced) – AAA
—
Introduction WCAG 2.2
Principes POUR (WCAG)
1. Perceptible : L’information doit être présentée de façon à être perçue par tous
2. Opérable : Les composants de l’interface doivent être utilisables
3. Compréhensible : L’information et l’interface doivent être compréhensibles
4. Robuste : Le contenu doit être compatible avec les technologies d’assistance
Niveaux de conformité
| Niveau | Description | Usage |
|——–|————-|——-|
| A | Niveau minimal | Exigences de base |
| AA | Niveau recommandé | Standard professionnel (requis légalement dans beaucoup de pays) |
| AAA | Niveau optimal | Excellence en accessibilité |
Nouveautés WCAG 2.2 (2023)
Nouveaux critères :
—
HTML sémantique
Structure de page sémantique
Titre descriptif de la page
Aller au contenu principal
Titre principal de la page
Première section
Contenu de la section...
Deuxième section
Contenu de la section...
Balises sémantiques HTML5
Titre du site
Titre de l'article
Contenu de l'article...
Titre de section
Contenu...
Évolution des ventes sur l'année 2024
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
Ce texte contient un mot important et un
mot accentué. Le code s'écrit avec <code>.
W3C
Citation longue...
Landmarks ARIA
Titre de la région
Checklist HTML sémantique
lang sur —
ARIA (Accessible Rich Internet Applications)
Règles d’or ARIA
Rôles ARIA essentiels
Bouton personnalisé
Lien personnalisé
Case à cocher
Bouton radio
Contenu onglet 1
Contenu onglet 2
Titre de la modale
Contenu de la modale
Message d'alerte important
Chargement en cours...
Option 1
Option 2
Option 3
75%
Slider
Propriétés ARIA
Titre de section
Contenu de la section
Entre 3 et 20 caractères
Note : 4 étoiles sur 5
Accepter les conditions
Onglet actif
Format d'email invalide
Live Regions (contenu dynamique)
Message enregistré avec succès
Erreur : veuillez remplir tous les champs obligatoires
00:30
Chargement en cours...
42 résultats trouvés
Checklist ARIA
—
Navigation clavier
Ordre de tabulation
Bouton personnalisé
Message d'erreur
Raccourcis clavier
| Touche | Action standard |
|——–|—————-|
| Tab | Élément suivant |
| Shift + Tab | Élément précédent |
| Enter | Activer lien/bouton |
| Espace | Activer bouton, toggle checkbox |
| Flèches | Navigation dans menus, tabs, sliders |
| Échap | Fermer dialog/menu |
| Home | Début de liste/contenu |
| End | Fin de liste/contenu |
| Page Up/Down | Scroll par page |
Navigation au clavier : implémentation
Aller au contenu principal
Focus visible
/ Reset du outline natif (MAUVAIS) /
:focus {
outline: none; / NE PAS FAIRE /
}
/ Style de focus personnalisé (BON) /
:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/ Focus visible uniquement clavier (moderne) /
:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/ Désactiver focus visible pour souris /
:focus:not(:focus-visible) {
outline: none;
}
/ Skip link focus /
.skip-link:focus {
position: absolute;
top: 0;
left: 0;
background: #000;
color: #fff;
padding: 8px 16px;
text-decoration: none;
z-index: 9999;
}
/ Focus dans composants personnalisés /
[role="button"]:focus,
[role="link"]:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
Piège clavier (focus trap dans modales)
// Piéger le focus dans une modale
class FocusTrap {
constructor(element) {
this.element = element;
this.focusableElements = element.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
this.firstFocusable = this.focusableElements[0];
this.lastFocusable = this.focusableElements[this.focusableElements.length - 1];
}
activate() {
this.element.addEventListener('keydown', this.handleKeyDown.bind(this));
this.firstFocusable?.focus();
}
deactivate() {
this.element.removeEventListener('keydown', this.handleKeyDown.bind(this));
}
handleKeyDown(e) {
if (e.key === 'Tab') {
if (e.shiftKey) {
// Shift + Tab
if (document.activeElement === this.firstFocusable) {
e.preventDefault();
this.lastFocusable?.focus();
}
} else {
// Tab
if (document.activeElement === this.lastFocusable) {
e.preventDefault();
this.firstFocusable?.focus();
}
}
}
if (e.key === 'Escape') {
this.close();
}
}
close() {
// Logique de fermeture
this.deactivate();
}
}
// Utilisation
const modal = document.querySelector('[role="dialog"]');
const focusTrap = new FocusTrap(modal);
focusTrap.activate();
Checklist Navigation clavier
—
Formulaires accessibles
Structure de formulaire accessible
Validation accessible
Erreurs dans le formulaire
Veuillez entrer un email valide
✓ Nom d'utilisateur disponible
Autocomplete
Checklist Formulaires
—
Images et médias
Images accessibles
Nouveau modèle X - Disponible en 3 couleurs
Description détaillée : Le graphique montre...
Vidéos accessibles
Transcription de la vidéo
Transcription textuelle complète de la vidéo...
00:00:03.000
Bienvenue dans cette vidéo tutoriel.
00:00:03.000 --> 00:00:07.000
Aujourd'hui, nous allons apprendre l'accessibilité web.
-->
Audio accessible
Transcription de l'audio
Transcription complète du contenu audio...
Checklist Médias
—
Couleurs et contrastes
Ratios de contraste WCAG 2.2
| Élément | Niveau AA | Niveau AAA |
|———|———–|————|
| Texte normal (< 18pt) | 4.5:1 | 7:1 |
| Texte large (≥ 18pt ou ≥ 14pt gras) | 3:1 | 4.5:1 |
| Composants UI et graphiques | 3:1 | - |
| Texte de logo | Pas de minimum | - |
Exemples de contrastes
/ BON : Contraste 7:1 (AAA) /
.text-high-contrast {
color: #000000; / Noir /
background-color: #ffffff; / Blanc /
}
/ BON : Contraste 4.52:1 (AA pour texte normal) /
.text-good-contrast {
color: #595959; / Gris foncé /
background-color: #ffffff; / Blanc /
}
/ INSUFFISANT : Contraste 2.9:1 /
.text-poor-contrast {
color: #999999; / Gris /
background-color: #ffffff; / Blanc /
/ Ne passe pas AA /
}
/ BON : Texte large avec contraste 3:1 /
.large-text {
font-size: 18pt;
font-weight: bold;
color: #767676;
background-color: #ffffff;
}
/ Boutons et composants UI : 3:1 minimum /
.button {
background-color: #0066cc;
border: 2px solid #004080; / Contraste 3.2:1 avec background /
}
/ Focus indicator : 3:1 minimum /
:focus-visible {
outline: 2px solid #0066cc; / Contraste avec arrière-plan /
outline-offset: 2px;
}
Ne pas utiliser uniquement la couleur
Champ requis
Champ requis
Email invalide
Mode sombre accessible
/ Variables CSS pour thème /
:root {
--text-primary: #000000;
--background-primary: #ffffff;
--link-color: #0066cc;
}
@media (prefers-color-scheme: dark) {
:root {
--text-primary: #ffffff;
--background-primary: #1a1a1a;
--link-color: #66b3ff; / Plus clair pour bon contraste /
}
}
/ Utilisation /
body {
color: var(--text-primary);
background-color: var(--background-primary);
}
a {
color: var(--link-color);
}
/ Toggle manuel /
[data-theme="dark"] {
--text-primary: #ffffff;
--background-primary: #1a1a1a;
--link-color: #66b3ff;
}
Checklist Couleurs
—
Typographie et lisibilité
Taille de texte
/ Texte de base : minimum 16px /
body {
font-size: 16px;
line-height: 1.5; / 150% minimum /
}
/ Texte peut être zoomé jusqu'à 200% sans perte de fonctionnalité /
/ Utiliser unités relatives (rem, em) /
h1 {
font-size: 2rem; / 32px si base = 16px /
}
p {
font-size: 1rem; / 16px /
line-height: 1.5; / 24px /
}
/ Texte large pour accessibilité /
.large-text {
font-size: 1.125rem; / 18px /
line-height: 1.6;
}
/ ÉVITER : taille fixe en pixels pour texte /
/ Empêche le zoom texte du navigateur /
Espacement
/ Espacement pour lisibilité (WCAG 2.2 - 1.4.12) /
{
/ Line height : minimum 1.5x font-size /
line-height: 1.5;
/ Espacement paragraphes : minimum 2x font-size /
margin-bottom: 2em;
/ Letter spacing : minimum 0.12x font-size /
letter-spacing: 0.12em;
/ Word spacing : minimum 0.16x font-size /
word-spacing: 0.16em;
}
/ Largeur de ligne optimale /
p {
max-width: 70ch; / 70 caractères maximum par ligne /
}
Polices lisibles
/ Polices sans-serif pour écrans /
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
/ Éviter polices trop stylisées pour contenu principal /
.decorative-heading {
font-family: 'Fancy Font', cursive;
/ OK pour titres courts, pas pour paragraphes /
}
/ Dyslexie : polices spécialisées /
.dyslexia-friendly {
font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif;
}
Justification et alignement
/ Éviter justification complète (difficile à lire) /
.text-block {
text-align: left; / BON /
/ text-align: justify; / / ÉVITER pour accessibilité /
}
/ Césure contrôlée /
p {
hyphens: auto;
overflow-wrap: break-word;
}
Checklist Typographie
—
Lecteurs d’écran
Screen reader only (SR-only)
/ Classe pour texte visible uniquement par lecteurs d'écran /
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/ Visible au focus (skip links) /
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
}
Exemples d’utilisation
Panier
3
3 articles dans le panier
Opération réussie
Texte alternatif de qualité
Ordre de lecture
Titre de l'article
15 janvier 2025
Contenu de l'article...
Lire la suite
Contenu...
Titre
Date
Checklist Lecteurs d’écran
—
Navigation et structure
Fil d’Ariane (Breadcrumb)
Pagination
Table des matières
Checklist Navigation
—
Animations et interactions
Respecter prefers-reduced-motion
/ Animations par défaut /
.element {
transition: transform 0.3s ease;
}
.element:hover {
transform: scale(1.1);
}
/ Désactiver pour utilisateurs sensibles /
@media (prefers-reduced-motion: reduce) {
,
::before,
::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/ Alternative : animations subtiles /
@media (prefers-reduced-motion: reduce) {
.element {
transition: opacity 0.3s ease; / OK /
/ transition: transform 0.3s ease; / / Éviter */
}
}
Timeout et limites de temps
Votre session expirera dans 60 secondes.
Carrousel accessible
Produit 1
Checklist Animations
—
Outils de test et validation
Outils automatiques
| Outil | Type | URL |
|——-|——|—–|
| WAVE | Extension navigateur | https://wave.webaim.org/ |
| axe DevTools | Extension navigateur | https://www.deque.com/axe/ |
| Lighthouse | Chrome DevTools | Intégré Chrome |
| Pa11y | CLI | https://pa11y.org/ |
| Accessibility Insights | Extension + Desktop | https://accessibilityinsights.io/ |
| ARC Toolkit | Extension Chrome | https://www.tpgi.com/arc-platform/arc-toolkit/ |
Outils de contraste
| Outil | Usage |
|——-|——-|
| WebAIM Contrast Checker | https://webaim.org/resources/contrastchecker/ |
| Colour Contrast Analyser | Application desktop |
| Stark | Plugin Figma/Sketch |
Lecteurs d’écran
| Lecteur | Plateforme | Navigateur |
|———|————|————|
| NVDA | Windows | Firefox, Chrome |
| JAWS | Windows | Chrome, Edge |
| VoiceOver | macOS/iOS | Safari |
| Narrator | Windows | Edge |
| TalkBack | Android | Chrome |
Checklist de tests
Tests automatiques
Tests manuels
Tests lecteurs d’écran
Tests utilisateurs
—
Checklist WCAG 2.2 complète
Niveau A (minimum)
Perceptible
Opérable
Compréhensible
Robuste
Niveau AA (recommandé)
Perceptible
Opérable
Compréhensible
Niveau AAA (optimal)
Perceptible
Opérable
Compréhensible
—
Ressources
Documentation officielle
Guides et tutoriels
Législation
—
Version : WCAG 2.2 (octobre 2023)
Dernière mise à jour : Décembre 2024
Ce guide couvre les standards WCAG 2.2 et les meilleures pratiques d’accessibilité web pour créer des expériences inclusives pour tous les utilisateurs.