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

—

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 :

• 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

—

HTML sémantique

Structure de page sémantique

    
    
    


    
    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...










    
    




    
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...
    



15 janvier 2025

Landmarks ARIA


    







    










    

        
        Rechercher
    




    
Titre de la région


Checklist HTML sémantique
[ ] Balises HTML5 sémantiques utilisées (header, nav, main, article, aside, footer)
[ ] Un seul 
 par page
[ ] Un seul 

 par page
[ ] Hiérarchie des titres respectée (h1 → h2 → h3…)
[ ] Landmarks ARIA appropriés
[ ] Attribut lang sur 
[ ] Pas de balises dépréciées (font, center, etc.)
[ ] HTML valide (W3C validator)
—
ARIA (Accessible Rich Internet Applications)
Règles d’or ARIA
N’utilisez pas ARIA si HTML sémantique suffit
Ne changez pas la sémantique native
Tous les contrôles interactifs doivent être utilisables au clavier
Ne pas utiliser role= »presentation » ou aria-hidden sur éléments focusables
Tous les éléments interactifs doivent avoir un nom accessible
Rôles ARIA essentiels


    Bouton personnalisé




Lien personnalisé




    Case à cocher





    Bouton radio





    
        Onglet 1
    
    
        Onglet 2
    


    Contenu onglet 1





    
Titre de la modale
    
Contenu de la modale
    Fermer




    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



    









    Menu





    Mode sombre




    Accepter les conditions




    Onglet actif




    Bouton désactivé










    Format d'email invalide




    Options


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
[ ] ARIA utilisé uniquement si HTML sémantique insuffisant
[ ] Tous les contrôles ARIA utilisables au clavier
[ ] États ARIA mis à jour dynamiquement (aria-expanded, aria-pressed, etc.)
[ ] Live regions pour contenu dynamique
[ ] aria-label ou aria-labelledby sur éléments interactifs
[ ] aria-hidden sur éléments purement décoratifs
[ ] Pas de role= »presentation » sur éléments focusables
[ ] Validation ARIA (axe DevTools, WAVE)
—
Navigation clavier
Ordre de tabulation

Bouton 1
Bouton 2
Bouton 3



    Bouton personnalisé




    Message d'erreur



Ne pas faire
Mauvaise pratique

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
[ ] Tous les éléments interactifs accessibles au clavier
[ ] Ordre de tabulation logique
[ ] Focus visible sur tous les éléments focusables
[ ] Skip link présent
[ ] Pas de piège clavier (sauf modales)
[ ] Focus retourne à l’élément déclencheur après fermeture modale
[ ] Raccourcis clavier documentés si personnalisés
[ ] Pas d’utilisation de tabindex positif
[ ] Flèches fonctionnent dans composants appropriés (menus, sliders)
[ ] Échap ferme les overlays/modales
—
Formulaires accessibles
Structure de formulaire accessible

  
  

    Nom complet 
    
  

  
  

    Email
    
    
      Nous ne partagerons jamais votre email
    
  

  
  

    Téléphone
    
    
      Format invalide. Utilisez : 06 12 34 56 78
    
  

  
  

    
Choisissez votre abonnement
    

      
      Basic (9€/mois)
    
    

      
      Pro (19€/mois)
    
    

      
      Enterprise (49€/mois)
    
  

  
  

    
Préférences de notification
    

      
      Email
    
    

      
      SMS
    
  

  
  

    Pays
    
      -- Sélectionnez un pays --
      France
      Belgique
      Suisse
    
  

  
  

    Message
    
    
      Maximum 500 caractères
    
  

  
  

    Envoyer
    Réinitialiser
    Annuler
  


Validation accessible


  
Erreurs dans le formulaire
  

    
Le nom est requis
    
L'email est invalide
  




  Email
  
  
    Veuillez entrer un email valide
  




  Nom d'utilisateur
  
  
    ✓ Nom d'utilisateur disponible
  


Autocomplete












Checklist Formulaires
[ ] Tous les inputs ont un label associé (for/id)
[ ] Labels visibles (pas uniquement placeholder)
[ ] Champs requis indiqués visuellement et programmatiquement
[ ] Erreurs de validation claires et spécifiques
[ ] Erreurs annoncées aux lecteurs d’écran (role= »alert »)
[ ] aria-invalid sur champs en erreur
[ ] aria-describedby pour aide et erreurs
[ ] Fieldset/legend pour groupes de champs
[ ] Autocomplete approprié
[ ] Focus sur premier champ en erreur après soumission
[ ] Bouton submit clairement identifié
—
Images et médias
Images accessibles








  
  





  
Description détaillée : Le graphique montre...















Vidéos accessibles


  

  



 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

  

  


Checklist Médias
[ ] Toutes les images ont un attribut alt approprié
[ ] Images décoratives avec alt= » » ou role= »presentation »
[ ] Vidéos ont des sous-titres (captions)
[ ] Vidéos ont une transcription textuelle
[ ] Audio a une transcription textuelle
[ ] Contrôles média accessibles au clavier
[ ] Pas de lecture automatique (autoplay)
[ ] SVG ont title ou aria-label si informatifs
[ ] Width et height définis sur images (CLS)
—
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
  
  ❌
  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
[ ] Contraste texte normal ≥ 4.5:1 (AA)
[ ] Contraste texte large ≥ 3:1 (AA)
[ ] Contraste composants UI ≥ 3:1
[ ] Information pas uniquement par couleur
[ ] Liens distinguables (underline ou bold)
[ ] Focus visible avec bon contraste
[ ] Mode sombre accessible si présent
[ ] Palette testée (outils contraste)
—
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
[ ] Taille de texte base ≥ 16px
[ ] Line-height ≥ 1.5
[ ] Texte zoomable jusqu’à 200%
[ ] Unités relatives (rem, em, %)
[ ] Largeur de ligne ≤ 80 caractères
[ ] Espacement paragraphes suffisant
[ ] Pas de justification pour longs textes
[ ] Police lisible
[ ] Pas de texte en image (sauf logo)
—
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


  ×
  Fermer la fenêtre




  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
[ ] Contenu important pas dans aria-hidden
[ ] Textes alternatifs descriptifs
[ ] Ordre DOM logique
[ ] .sr-only pour contexte supplémentaire
[ ] aria-label sur éléments sans label visible
[ ] Landmarks ARIA appropriés
[ ] Live regions pour contenu dynamique
[ ] Test avec lecteur d’écran (NVDA, JAWS, VoiceOver)
—
Navigation et structure
Fil d’Ariane (Breadcrumb)


Pagination


Table des matières


Checklist Navigation
[ ] Navigation principale identifiée (nav + aria-label)
[ ] Skip links présents
[ ] Fil d’Ariane si applicable
[ ] Pagination accessible
[ ] Lien actuel identifié (aria-current= »page »)
[ ] Landmarks ARIA (banner, main, navigation, etc.)
[ ] Table des matières pour longs articles
[ ] Tous les liens ont texte descriptif
—
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





Carrousel accessible

  
  

    
      ‹
    

    
      Pause
    

    
      ›
    
  

  
  

    

      
      
Produit 1
    

    

    
  

  
  

    
    
  


Checklist Animations
[ ] prefers-reduced-motion respecté
[ ] Pas d’animations automatiques critiques
[ ] Contrôle pause/lecture pour animations
[ ] Timeouts avec avertissement et extension possible
[ ] Pas de clignotement > 3 fois/seconde
[ ] Carrousels avec contrôles accessibles
[ ] Auto-scroll désactivable
—
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
[ ] WAVE : 0 erreur
[ ] axe DevTools : 0 erreur
[ ] Lighthouse Accessibility : score > 90
[ ] HTML valide (W3C validator)
[ ] Contraste vérifié (tous textes/composants)
Tests manuels
[ ] Navigation clavier complète
[ ] Tous les éléments interactifs accessibles
[ ] Ordre de tabulation logique
[ ] Focus visible sur tous éléments
[ ] Skip links fonctionnels
[ ] Formulaires testés avec validation
[ ] Modales/overlays avec focus trap
[ ] Zoom texte 200% fonctionnel
Tests lecteurs d’écran
[ ] Test NVDA (Windows)
[ ] Test VoiceOver (macOS/iOS)
[ ] Landmarks correctement annoncés
[ ] Titres correctement hiérarchisés
[ ] Images alt text appropriés
[ ] Formulaires labels annoncés
[ ] Live regions fonctionnelles
[ ] États ARIA annoncés (expanded, pressed, etc.)
Tests utilisateurs
[ ] Tests avec utilisateurs réels en situation de handicap
[ ] Tests sur différents devices
[ ] Tests avec assistances technologies variées
—
Checklist WCAG 2.2 complète
Niveau A (minimum)
Perceptible
[ ] 1.1.1 Contenu non textuel (alt text)
[ ] 1.2.1 Audio et vidéo en différé (alternative)
[ ] 1.2.2 Sous-titres (pré-enregistré)
[ ] 1.2.3 Audio-description (pré-enregistré)
[ ] 1.3.1 Info et relations (sémantique HTML)
[ ] 1.3.2 Ordre séquentiel logique
[ ] 1.3.3 Caractéristiques sensorielles
[ ] 1.4.1 Utilisation de la couleur
[ ] 1.4.2 Contrôle du son
Opérable
[ ] 2.1.1 Clavier
[ ] 2.1.2 Pas de piège clavier
[ ] 2.1.4 Raccourcis clavier
[ ] 2.2.1 Réglage du délai
[ ] 2.2.2 Mettre en pause, arrêter, masquer
[ ] 2.3.1 Pas de clignotement
[ ] 2.4.1 Contourner des blocs (skip links)
[ ] 2.4.2 Titre de page
[ ] 2.4.3 Parcours du focus
[ ] 2.4.4 Fonction du lien (contexte)
[ ] 2.5.1 Gestes pour le pointeur
[ ] 2.5.2 Annulation de l’action du pointeur
[ ] 2.5.3 Étiquette dans le nom
[ ] 2.5.4 Activation par le mouvement
Compréhensible
[ ] 3.1.1 Langue de la page
[ ] 3.2.1 Au focus
[ ] 3.2.2 À la saisie
[ ] 3.2.6 Aide cohérente (nouveau 2.2)
[ ] 3.3.1 Identification des erreurs
[ ] 3.3.2 Étiquettes ou instructions
[ ] 3.3.7 Saisie redondante (nouveau 2.2)
Robuste
[ ] 4.1.1 Analyse syntaxique (déprécié en 2.2)
[ ] 4.1.2 Nom, rôle et valeur
[ ] 4.1.3 Messages de statut
Niveau AA (recommandé)
Perceptible
[ ] 1.2.4 Sous-titres (en direct)
[ ] 1.2.5 Audio-description (pré-enregistré)
[ ] 1.3.4 Orientation
[ ] 1.3.5 Identification de la finalité
[ ] 1.4.3 Contraste minimum (4.5:1)
[ ] 1.4.4 Redimensionnement du texte
[ ] 1.4.5 Texte sous forme d’image
[ ] 1.4.10 Reflow
[ ] 1.4.11 Contraste non textuel
[ ] 1.4.12 Espacement du texte
[ ] 1.4.13 Contenu au survol ou au focus
Opérable
[ ] 2.4.5 Accès multiples
[ ] 2.4.6 En-têtes et étiquettes
[ ] 2.4.7 Visibilité du focus
[ ] 2.4.11 Focus non obscurci (minimum) (nouveau 2.2)
[ ] 2.5.7 Mouvements de glissement (nouveau 2.2)
[ ] 2.5.8 Taille de la cible (minimum) (nouveau 2.2)
Compréhensible
[ ] 3.1.2 Langue d’un passage
[ ] 3.2.3 Navigation cohérente
[ ] 3.2.4 Identification cohérente
[ ] 3.3.3 Suggestion d’erreur
[ ] 3.3.4 Prévention des erreurs (juridique, financier)
[ ] 3.3.8 Authentification accessible (minimum) (nouveau 2.2)
Niveau AAA (optimal)
Perceptible
[ ] 1.2.6 Langue des signes (pré-enregistré)
[ ] 1.2.7 Audio-description étendue
[ ] 1.2.8 Média de remplacement
[ ] 1.2.9 Audio seulement (en direct)
[ ] 1.4.6 Contraste amélioré (7:1)
[ ] 1.4.7 Fond sonore faible ou absent
[ ] 1.4.8 Présentation visuelle
[ ] 1.4.9 Texte sous forme d’image (sans exception)
Opérable
[ ] 2.1.3 Clavier (sans exception)
[ ] 2.2.3 Pas de délai
[ ] 2.2.4 Interruptions
[ ] 2.2.5 Re-authentification
[ ] 2.2.6 Délais d’expiration
[ ] 2.3.2 Trois flashs
[ ] 2.3.3 Animations dues aux interactions
[ ] 2.4.8 Localisation
[ ] 2.4.9 Fonction du lien (seul)
[ ] 2.4.10 En-têtes de section
[ ] 2.4.12 Focus non obscurci (amélioré) (nouveau 2.2)
[ ] 2.4.13 Apparence du focus (nouveau 2.2)
[ ] 2.5.5 Taille de la cible (amélioré)
[ ] 2.5.6 Mécanismes de saisie
Compréhensible
[ ] 3.1.3 Mots inhabituels
[ ] 3.1.4 Abréviations
[ ] 3.1.5 Niveau de lecture
[ ] 3.1.6 Prononciation
[ ] 3.2.5 Changement à la demande
[ ] 3.3.5 Aide
[ ] 3.3.6 Prévention des erreurs (toutes)
[ ] 3.3.9 Authentification accessible (amélioré) (nouveau 2.2)
—
Ressources
Documentation officielle
WCAG 2.2 : https://www.w3.org/WAI/WCAG22/quickref/
WAI-ARIA : https://www.w3.org/WAI/ARIA/apg/
MDN Accessibility : https://developer.mozilla.org/en-US/docs/Web/Accessibility
Guides et tutoriels
WebAIM : https://webaim.org/
The A11Y Project : https://www.a11yproject.com/
Deque University : https://dequeuniversity.com/
Législation
France : RGAA (Référentiel Général d’Amélioration de l’Accessibilité)
Europe : European Accessibility Act
USA : ADA (Americans with Disabilities Act), Section 508

—
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.