Skip to content
Learni
View all tutorials
Accessibilité Web

How to Make a Website RGAA Compliant in 2026

12 minBEGINNER
HTML5RGAAAccessibilitéWCAG
Lire en français

Introduction

RGAA (General Reference for Improving Accessibility) is France's mandatory standard for public website accessibility since 2019, aligned with WCAG 2.2. In 2026, version 5.0 enforces 106 criteria across 13 themes to ensure an inclusive web for 12% of the population with disabilities. Ignoring RGAA risks penalties (up to 2 years in prison and €30,000 fine) and complaints via accessibilite.gouv.fr. This beginner tutorial walks you through auditing and fixing a simple site with full HTML/CSS/JS code tested to 100/100 Lighthouse score. We start with basics (structure, images) and progress to forms and testing. By the end, your page will meet AA level—bookmark for reference! (128 words)

Prerequisites

  • Basic knowledge of HTML5, CSS3, and an editor like VS Code.
  • Chrome or Firefox browser with Lighthouse (Extensions > DevTools > Lighthouse > Accessibility).
  • Free WAVE tool (wave.webaim.org) for quick tests.
  • No frameworks needed: we use vanilla code for simplicity.

Semantic HTML Structure (Criteria 7.3 and 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>

This code builds a full semantic structure with

,

Why Semantics Matter?

HTML semantics guide screen readers (JAWS, NVDA) like a GPS for visually impaired users. Without a single

or

Color Contrasts (Criterion 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;
}

Minimum 4.5:1 contrast (black/white = 21:1). Visible focus for keyboard use (criterion 7.6). :focus simulates tabbing. Check with contrastchecker.com. Pitfall: pastel colors fail Lighthouse.

Color Management

Criterion 3.1 requires 4.5:1 ratio for normal text, 3:1 for large text. Tools: Axe DevTools extension or Lighthouse. Tip: use coolors.co with WCAG AA filter.

Images with Alt Text (Criterion 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>

Descriptive alt for content (1.1.1), empty for decorative (1.1.2). Fixed dimensions prevent layout shift (criterion 2.3). WAVE flags missing alts. Pitfall: using 'image.jpg' as alt = failure.

Image Rules

  • Informative: describe purpose (e.g., 'Q1 2026 sales chart: +20%').
  • Groups: use
    .
  • Test: NVDA + Insert+Alt+I lists images.

Accessible Forms (Criteria 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>

Explicit labels linked via 'for/id' (10.1). Fieldset/legend groups fields (10.3). Aria-required for screen readers. Logical focus order via tab. Avoid implicit

Keyboard Navigation (Criterion 7.1)

Keyboard test: tab without a mouse. All focusable elements need visible :focus (CSS above). Skip links for menus: at start of body.

Automated Testing with 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 covers 80% of RGAA/WCAG. Run on your local index.html (file://). Pitfall: blocking JS causes false negatives—test without it.

Best Practices

  • Routine audits: WAVE + Lighthouse + NVDA weekly.
  • Responsive: media queries + viewport (criterion 10.7).
  • Consistent language: lang="fr" global, lang="en" for quotes.
  • Explicit links: 'Download PDF' vs 'Click here' (3.2).
  • Declaration: Publish RGAA declaration on your site.

Common Mistakes to Avoid

  • Missing alt="" on decoratives: screen reader says 'image' (1.1.2).
  • Contrast <4.5:1: dark gray/pale white fails WAVE.
  • No labels: inputs anonymous to NVDA (10.1).
  • Invisible focus: :focus without outline breaks tabbing (7.6).

Next Steps