RGAA 4.1 : guide complet des 106 criteres d'accessibilite web

Le Referentiel General d'Amelioration de l'Accessibilite (RGAA) est le cadre technique de reference en France pour evaluer l'accessibilite des sites web et applications. Dans sa version 4.1, il comprend 106 criteres repartis en 13 thematiques. Ce guide detaille chaque thematique avec des exemples concrets de code conforme et non conforme, pour permettre aux developpeurs et agences web de comprendre precisement ce qui est attendu.

RGAA et WCAG : quelle relation ?

Le RGAA 4.1 est la transposition operationnelle francaise du WCAG 2.1 (Web Content Accessibility Guidelines) niveau AA, publie par le W3C. La ou le WCAG formule des principes generaux et des criteres de succes, le RGAA fournit des criteres testables, avec une methodologie de verification precise et un referentiel de tests associe.

Etre conforme au RGAA 4.1 equivaut a etre conforme au WCAG 2.1 AA. L'inverse n'est pas toujours vrai : le RGAA impose des modalites de test specifiques au contexte francais (notamment la declaration d'accessibilite obligatoire et le schema pluriannuel).

Le WCAG repose sur quatre principes fondamentaux, que le RGAA decline en criteres concrets :

1. Perceptible : l'information doit etre presentable de maniere perceptible par tous les utilisateurs
2. Utilisable : les composants d'interface doivent etre utilisables par tous
3. Comprehensible : l'information et l'utilisation de l'interface doivent etre comprehensibles
4. Robuste : le contenu doit etre suffisamment robuste pour etre interprete par les technologies d'assistance

Vue d'ensemble des 13 thematiques

Avant de detailler chaque thematique, voici la repartition des 106 criteres :

| # | Thematique | Nombre de criteres | |---|---|---| | 1 | Images | 9 | | 2 | Cadres | 2 | | 3 | Couleurs | 3 | | 4 | Multimedia | 13 | | 5 | Tableaux | 8 | | 6 | Liens | 2 | | 7 | Scripts | 5 | | 8 | Elements obligatoires | 10 | | 9 | Structuration de l'information | 4 | | 10 | Presentation de l'information | 14 | | 11 | Formulaires | 13 | | 12 | Navigation | 11 | | 13 | Consultation | 12 |

Thematique 1 : Images (9 criteres)

La thematique Images couvre toutes les images presentes dans le contenu : images informatives, decoratives, complexes (graphiques, schemas), images texte et les zones cliquables.

Criteres cles

Critere 1.1 : Chaque image porteuse d'information a-t-elle une alternative textuelle ?

Non conforme :

<img src="promo-soldes.jpg">

Conforme :

<img src="promo-soldes.jpg" alt="Soldes d'ete : jusqu'a -50% sur toute la collection">

Critere 1.2 : Chaque image de decoration est-elle correctement ignoree par les technologies d'assistance ?

Non conforme :

<img src="decorative-line.png" alt="ligne decorative">

Conforme :

<img src="decorative-line.png" alt="" role="presentation">

Critere 1.6 : Chaque image porteuse d'information a-t-elle, si necessaire, une description detaillee ?

Pour les images complexes (infographies, graphiques), un attribut alt court ne suffit pas. Une description detaillee doit etre fournie via longdesc, aria-describedby ou un lien adjacent.

Thematique 2 : Cadres (2 criteres)

Les cadres (<iframe>) doivent etre identifies et decrits pour les technologies d'assistance.

Criteres cles

Critere 2.1 : Chaque cadre a-t-il un titre de cadre ?

Non conforme :

<iframe src="https://maps.google.com/embed"></iframe>

Conforme :

<iframe src="https://maps.google.com/embed" title="Carte Google Maps de notre agence a Paris"></iframe>

Thematique 3 : Couleurs (3 criteres)

Cette thematique verifie que l'information n'est pas transmise uniquement par la couleur et que les contrastes sont suffisants.

Criteres cles

Critere 3.2 : Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arriere-plan est-il suffisamment eleve ?

Les ratios minimaux sont :

• 4.5:1 pour le texte de taille normale (inferieur a 24px ou 18.5px en gras)
• 3:1 pour le texte de grande taille (superieur ou egal a 24px ou 18.5px en gras)

Non conforme :

/* Ratio de contraste : 2.3:1 */
.text-light {
  color: #999999;
  background-color: #ffffff;
}

Conforme :

/* Ratio de contraste : 7.4:1 */
.text-accessible {
  color: #595959;
  background-color: #ffffff;
}

Critere 3.1 : L'information ne doit pas etre donnee uniquement par la couleur. Par exemple, un champ de formulaire en erreur ne doit pas etre signale uniquement par une bordure rouge : un message textuel ou une icone doivent accompagner l'indication visuelle.

Thematique 4 : Multimedia (13 criteres)

La thematique la plus fournie en criteres couvre les contenus audio, video, et les medias temporels.

Criteres cles

Critere 4.1 : Chaque media temporel pre-enregistre a-t-il, si necessaire, une transcription textuelle ou une audiodescription ?

Critere 4.3 : Chaque media temporel synchronise pre-enregistre a-t-il des sous-titres synchronises ?

Non conforme :

<video src="presentation.mp4" controls></video>

Conforme :

<video src="presentation.mp4" controls>
  <track kind="subtitles" src="sous-titres-fr.vtt" srclang="fr" label="Francais" default>
  <track kind="descriptions" src="audiodescription-fr.vtt" srclang="fr" label="Audiodescription">
</video>

Critere 4.13 : Chaque media temporel et non temporel est-il compatible avec les technologies d'assistance ? Les lecteurs multimedia doivent etre navigables au clavier et exposer leurs controles aux technologies d'assistance.

Thematique 5 : Tableaux (8 criteres)

Les tableaux de donnees doivent etre correctement structures pour etre comprehensibles par les technologies d'assistance.

Criteres cles

Critere 5.1 : Chaque tableau de donnees complexe a-t-il un resume ?

Critere 5.6 : Pour chaque tableau de donnees, chaque en-tete de colonne et chaque en-tete de ligne sont-ils correctement declares ?

Non conforme :

<table>
  <tr>
    <td>Produit</td>
    <td>Prix</td>
    <td>Stock</td>
  </tr>
  <tr>
    <td>Widget A</td>
    <td>29,90 EUR</td>
    <td>En stock</td>
  </tr>
</table>

Conforme :

<table>
  <caption>Liste des produits et disponibilites</caption>
  <thead>
    <tr>
      <th scope="col">Produit</th>
      <th scope="col">Prix</th>
      <th scope="col">Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>29,90 EUR</td>
      <td>En stock</td>
    </tr>
  </tbody>
</table>

Thematique 6 : Liens (2 criteres)

Malgre un nombre reduit de criteres, cette thematique est cruciale : les liens sont l'element de navigation fondamental du web.

Criteres cles

Critere 6.1 : Chaque lien est-il explicite ?

Non conforme :

<a href="/offres">Cliquez ici</a>

Conforme :

<a href="/offres">Decouvrir nos offres d'accessibilite</a>

Critere 6.2 : Chaque lien ayant un intitule visible a-t-il un nom accessible pertinent ? Le nom accessible (expose aux technologies d'assistance) doit contenir au minimum l'intitule visible du lien.

Thematique 7 : Scripts (5 criteres)

Les scripts JavaScript doivent etre accessibles : les composants interactifs crees en JavaScript doivent etre utilisables au clavier et compatibles avec les technologies d'assistance.

Criteres cles

Critere 7.1 : Chaque script est-il, si necessaire, compatible avec les technologies d'assistance ?

Critere 7.3 : Chaque script est-il controlable par le clavier et par tout dispositif de pointage ?

Non conforme :

<div onclick="toggleMenu()">Menu</div>

Conforme :

<button type="button" aria-expanded="false" aria-controls="menu-principal" onclick="toggleMenu()">
  Menu
</button>
<nav id="menu-principal" role="navigation" aria-label="Menu principal" hidden>
  <!-- contenu du menu -->
</nav>

Thematique 8 : Elements obligatoires (10 criteres)

Cette thematique couvre les elements HTML fondamentaux que chaque page doit posseder.

Criteres cles

Critere 8.1 : Chaque page web est-elle definie par un type de document ?

Critere 8.3 : Dans chaque page web, la langue par defaut est-elle presente ?

Critere 8.6 : Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?

Non conforme :

<html>
<head>
  <title>Page 1</title>
</head>

Conforme :

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Audit d'accessibilite web - WebConforme</title>
</head>

Thematique 9 : Structuration de l'information (4 criteres)

La structure semantique du document est essentielle pour la navigation par les technologies d'assistance.

Criteres cles

Critere 9.1 : Dans chaque page web, l'information est-elle structuree par l'utilisation appropriee de titres ?

Critere 9.2 : Dans chaque page web, la structure du document est-elle coherente ?

Non conforme :

<div class="titre-principal">Nos services</div>
<div class="sous-titre">Audit accessibilite</div>
<p>Description du service...</p>

Conforme :

<h1>Nos services</h1>
<h2>Audit accessibilite</h2>
<p>Description du service...</p>

Les landmarks ARIA (<main>, <nav>, <header>, <footer>, <aside>) doivent egalement etre utilises pour structurer les zones principales de la page.

Thematique 10 : Presentation de l'information (14 criteres)

C'est la deuxieme thematique en nombre de criteres. Elle traite de la facon dont le contenu est visuellement presente et de son adaptabilite.

Criteres cles

Critere 10.1 : Dans chaque page web, les feuilles de styles sont-elles utilisees pour controler la presentation de l'information ?

Critere 10.4 : Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caracteres est augmentee jusqu'a 200% ?

Critere 10.7 : Dans chaque page web, pour chaque element recevant le focus, la prise de focus est-elle visible ?

Non conforme :

*:focus {
  outline: none;
}

Conforme :

*:focus-visible {
  outline: 3px solid #4A90D9;
  outline-offset: 2px;
}

Thematique 11 : Formulaires (13 criteres)

Les formulaires sont un point de friction majeur en accessibilite. Chaque champ doit etre identifie, les erreurs signalees de maniere accessible, et les aides a la saisie fournies.

Criteres cles

Critere 11.1 : Chaque champ de formulaire a-t-il une etiquette ?

Critere 11.10 : Dans chaque formulaire, le controle de saisie est-il utilise de maniere pertinente ?

Critere 11.13 : La finalite de chaque champ de saisie peut-elle etre deduite pour faciliter le remplissage automatique ?

Non conforme :

<input type="text" placeholder="Votre email">

Conforme :

<label for="email">Adresse email</label>
<input type="email" id="email" name="email" autocomplete="email"
       aria-describedby="email-aide" required>
<p id="email-aide">Format attendu : nom@domaine.fr</p>

Thematique 12 : Navigation (11 criteres)

Cette thematique verifie que l'utilisateur peut naviguer efficacement dans le site, quels que soient ses moyens d'interaction.

Criteres cles

Critere 12.1 : Chaque ensemble de pages dispose-t-il de deux systemes de navigation differents au moins ?

Par exemple : un menu de navigation principal ET un moteur de recherche, OU un menu ET un plan du site.

Critere 12.7 : Un lien d'evitement ou d'acces rapide a la zone de contenu principal est-il present ?

Non conforme : absence de lien d'evitement.

Conforme :

<body>
  <a href="#contenu" class="skip-link">Aller au contenu principal</a>
  <header><!-- navigation --></header>
  <main id="contenu">
    <!-- contenu principal -->
  </main>
</body>

Thematique 13 : Consultation (12 criteres)

La derniere thematique couvre les aspects lies a la consultation du contenu : documents telechargeables, limites de temps, contenus en mouvement, changements brusques.

Criteres cles

Critere 13.1 : Pour chaque page web, l'utilisateur a-t-il le controle de chaque limite de temps modifiant le contenu ?

Critere 13.7 : Les documents bureautiques en telechargement sont-ils accessibles ?

Critere 13.8 : Le contenu propose est-il accessible quelles que soient les technologies utilisees ?

Chaque document PDF, Word ou Excel propose en telechargement doit lui-meme etre accessible. Dans le cas contraire, une version accessible alternative doit etre proposee.

Ce qui est testable automatiquement vs manuellement

Un point essentiel pour les developpeurs et les agences : tous les criteres ne sont pas verifiables de la meme maniere.

Tests automatises (~30% des criteres)

Environ 30 des 106 criteres peuvent etre detectes par des outils automatises :

• Presence d'attributs alt (mais pas leur pertinence)
• Ratios de contraste
• Presence de labels sur les formulaires
• Structure des titres (hierarchie des balises H)
• Langue de la page
• Attribut title des iframes
• Doctype et validite HTML

L'outil d'analyse automatise de WebConforme couvre l'ensemble de ces criteres testables automatiquement. Il permet d'obtenir en quelques secondes un premier diagnostic fiable et priorise. C'est le point de depart recommande avant tout audit approfondi.

Tests manuels (~70% des criteres)

Les 70% restants necessitent un examinateur humain :

• Pertinence des alternatives textuelles
• Coherence de la navigation
• Qualite des sous-titres
• Comprehensibilite des messages d'erreur
• Compatibilite reelle avec les lecteurs d'ecran
• Utilisabilite au clavier sur l'ensemble des parcours
• Pertinence des descriptions detaillees

Un audit complet RGAA combine donc toujours outils automatises et expertise humaine.

RGAA v5 : ce qui arrive fin 2026

La version 5 du RGAA, attendue pour fin 2026, devrait s'aligner sur le WCAG 2.2. Les principaux ajouts concernent :

• Focus non masque : le focus clavier ne doit pas etre entierement cache par d'autres elements
• Taille minimale des cibles : les zones cliquables doivent faire au moins 24x24 pixels CSS
• Aide coherente : les mecanismes d'aide doivent apparaitre de maniere coherente sur l'ensemble du site
• Authentification accessible : les methodes d'authentification ne doivent pas reposer sur des tests cognitifs

Se mettre en conformite avec le RGAA 4.1 aujourd'hui est une base solide qui facilitera considerablement la transition vers la version 5.

Conclusion : une demarche progressive, pas un big bang

Avec 106 criteres, le RGAA peut sembler intimidant. Mais la mise en conformite est une demarche progressive. La strategie la plus efficace consiste a commencer par un diagnostic automatise pour identifier les defauts les plus evidents, puis a corriger par ordre de priorite avant de passer a un audit manuel complet.

La majorite des non-conformites critiques (contrastes, alternatives textuelles, labels, structure) sont corrigeables en quelques jours de developpement. Le reste releve d'une integration progressive de l'accessibilite dans les processus de conception et de developpement.

La premiere etape : lancez un scan gratuit avec WebConforme pour savoir ou en est votre site. En 30 secondes, vous aurez une cartographie claire de vos non-conformites et un plan d'action priorise.