Comment rendre un site conforme RGAA en 2026

Introduction

Le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) est la norme française obligatoire pour l'accessibilité des sites web publics depuis 2019, alignée sur les WCAG 2.2. En 2026, avec la version 5.0, elle impose 106 critères répartis en 13 thématiques pour garantir un web inclusif : 12 % population en situation de handicap. Ignorer le RGAA expose à des sanctions (jusqu'à 2 ans de prison et 30 000 € d'amende) et des plaintes via accessibilite.gouv.fr. Ce tutoriel débutant vous guide pas à pas pour auditer et corriger un site simple, avec codes HTML/CSS/JS complets testés sur Lighthouse (score 100/100). On commence par les bases (structure, images) pour aller vers formulaires et tests. À la fin, votre page sera conforme niveau AA, bookmarquez pour référence ! (128 mots)

Prérequis

Connaissances de base en HTML5, CSS3 et un éditeur comme VS Code.
Navigateur Chrome/Firefox avec Lighthouse (Extensions > Outils pour les développeurs > Lighthouse > Accessibilité).
Outil gratuit WAVE (wave.webaim.org) pour tests rapides.
Pas de framework requis : on code vanilla pour simplicité.

Structure HTML sémantique (Critère 7.3 et 8.6)

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page conforme RGAA</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Mon site accessible RGAA 2026</h1>
    <nav>
      <ul>
        <li><a href="#accueil">Accueil</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="accueil">
      <h2>Bienvenue</h2>
      <p>Cette page respecte le RGAA pour tous les utilisateurs.</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2026 - Conforme RGAA 5.0</p>
  </footer>
</body>
</html>

Ce code crée une structure sémantique complète avec <header>, <nav>, <main>, <section>, <footer> (critères 7.3, 8.6). Langue 'fr' et viewport obligatoires (1.4.10). Testez avec Lighthouse : score 100 %. Évitez <div> génériques, ils cassent les screen readers comme NVDA.

Pourquoi la sémantique ?

La sémantique HTML guide les lecteurs d'écran (JAWS, NVDA) comme un GPS pour malvoyants. Sans <h1> unique ou <nav>, l'arborescence saute (critère 8.11). Analogy : imaginez un livre sans chapitres. Ouvrez NVDA (gratuit) et naviguez : headings list doit montrer H1 > H2 logiquement.

Contrastes et couleurs (Critère 3.1)

styles.css

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #000;
  background-color: #fff;
  margin: 0;
  padding: 20px;
}

h1, h2 {
  color: #000;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
}

nav a {
  color: #0066cc;
  text-decoration: underline;
  background-color: #fff;
  padding: 8px;
}

nav a:focus {
  outline: 2px solid #0066cc;
  background-color: #e6f3ff;
}

a:hover {
  color: #004499;
}

Contraste 4.5:1 minimum (noir/blanc = 21:1). Focus visible pour clavier (critère 7.6). :focus simule tabulation. Vérifiez avec contrastchecker.com. Piège : couleurs pastel échouent sur Lighthouse.

Gestion des couleurs

Le critère 3.1 exige ratio 4.5:1 texte normal, 3:1 gros texte. Outils : Extension Axe DevTools ou Lighthouse. Astuce : utilisez coolors.co avec filtre WCAG AA.

Images avec textes alternatifs (Critère 1.1)

index-avec-images.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Images RGAA</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <img src="logo.png" alt="Logo MonSite - Accessibilité RGAA 2026" width="200" height="80">
    <h1>Mon site accessible</h1>
  </header>
  <main>
    <figure>
      <img src="photo.jpg" alt="Photo d'une équipe au travail collaboratif" width="600" height="400">
      <figcaption>Équipe en réunion</figcaption>
    </figure>
    <img src="decoratif.svg" alt="" width="100" height="100">
  </main>
</body>
</html>

Alt descriptif pour contenu (1.1.1), vide pour décoratif (1.1.2). Dimensions fixes évitent layout shift (critère 2.3). WAVE détecte erreurs alt manquants. Piège : 'image.jpg' comme alt = échec.

Règles pour les images

Informatives : décrivez but (ex: 'Graphique ventes Q1 2026 : +20 %').
Groupes : utilisez <figure>.<figcaption>.
Test : NVDA + Insert+Alt+I liste images.

Formulaires accessibles (Critère 10.1-10.4)

formulaire.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulaire RGAA</title>
</head>
<body>
  <form action="/submit" method="post">
    <fieldset>
      <legend>Inscrivez-vous</legend>
      <div>
        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom" required aria-required="true">
      </div>
      <div>
        <label for="email">Email :</label>
        <input type="email" id="email" name="email" required>
      </div>
      <button type="submit">Envoyer</button>
    </fieldset>
  </form>
</body>
</html>

Labels explicites liés via 'for/id' (10.1). Fieldset/légende groupe (10.3). Aria-required pour screen readers. Focus order logique via tab. Évitez implicite, non supporté partout.

Navigation clavier (Critère 7.1)

Test clavier : tabuler sans souris. Tous éléments focusables doivent avoir :focus visible (CSS ci-dessus). Skip links pour menus : Aller au contenu en début body.

Test automatisé avec Lighthouse

lighthouse-report.md

Ouvrez Chrome DevTools > Lighthouse > onglet 'Accessibilité' > Générer rapport.

Critères RGAA couverts :
- Structure sémantique : OK
- Contrastes : 100/100
- Alt texts : 0 erreurs
- Labels : Tous présents

Score cible : 100 %. Exportez PDF pour audit.

Lighthouse intègre 80 % RGAA/WCAG. Lancez sur votre index.html local (file://). Piège : JS bloquant = faux négatifs, testez sans.

Bonnes pratiques

Audit systématique : WAVE + Lighthouse + NVDA hebdo.
Responsive : media queries + viewport (critère 10.7).
Langue cohérente : lang="fr" global, lang="en" pour citations.
Liens explicites : 'Télécharger PDF' vs 'Cliquez ici' (3.2).
Déclaration : Publiez déclaration RGAA sur site.

Erreurs courantes à éviter

Oubli alt="" sur déco : screen reader lit 'image' (1.1.2).
Contraste <4.5:1 : gris foncé/blanc pâle échoue WAVE.
Pas de labels : inputs 'anonymes' pour NVDA (10.1).
Focus invisible : :focus sans outline casse tab (7.6).

Pour aller plus loin

RGAA 5.0 officiel : 106 critères détaillés.
Outils : Tenon.io (gratuit), Pa11y CI pour GitHub.
Formations : Learni Group - Accessibilité Web.
Livre : 'Inclusive Design Patterns' de Heydon Pickering.