Comment créer un site web accessible RGAA ?

Illustration d’une femme en fauteuil roulant travaillant sur un ordinateur portable, avec en arrière-plan des éléments graphiques représentant la conception d’un site web, des icônes d’accessibilité, de loupe, de roue dentée et de code HTML, symbolisant la création d’un site accessible.

L'accessibilité web n'est pas une option, c'est une obligation ! En tant qu'expert en accessibilité web et SEO depuis plus de 18 ans, je constate quotidiennement que trop de sites ignorent encore les normes RGAA (Référentiel Général d'Amélioration de l'Accessibilité). Résultat : des sites inaccessibles à 15-20% de la population et des entreprises exposées à des risques juridiques majeurs. Si vous êtes arrivé sur cet article, c'est que vous ne savez pas comment procéder. Je vais vous expliquer simplement en appliquant ici la méthode FALC . C'est pour cela que je privilégie la structure de l'information.

Ce que vous devez savoir sur le RGAA

Le RGAA est la déclinaison française des normes internationales WCAG. Sa version actuelle (RGAA 4.1) comprend 106 critères répartis en 13 thématiques. Pour être conforme, votre site doit respecter au minimum 50 critères obligatoires.

Point important : depuis 2019, les organismes publics et les grandes entreprises sont légalement tenus de respecter ces normes. Les amendes pour non-conformité peuvent atteindre 20 000€.

La méthode que j'applique pour garantir l'accessibilité RGAA

1. Pensez accessibilité dès la conception

L'erreur classique : considérer l'accessibilité comme une couche à ajouter en fin de projet. Grave erreur. J'intègre systématiquement l'accessibilité dès les wireframes et la définition de l'arborescence.

Actions concrètes :

  • Définir une structure de navigation simple et cohérente
  • Concevoir des templates avec une hiérarchie visuelle claire
  • Prévoir les alternatives textuelles pour chaque contenu non-textuel

2. Construisez une base HTML solide

Un HTML propre et sémantique résout 60% des problèmes d'accessibilité. Je n'utilise que des balises appropriées à leur contexte :


<!-- À proscrire -->
<div class="title">Mon titre</div>

<!-- À adopter -->
<h1>Mon titre</h1>

Éléments critiques à implémenter :

  • Structure correcte des titres (h1-h6) sans sauter de niveau
  • Attribut lang sur l'élément HTML
  • Attributs alt pertinents sur toutes les images
  • Balisage approprié des listes et tableaux

3. Rendez les formulaires utilisables par tous

Les formulaires sont souvent le point faible de l'accessibilité. J'applique ces règles sans exception :

  • Association explicite des labels avec leurs champs via for et id
  • Messages d'erreur liés aux champs concernés avec aria-describedby
  • Ordre de tabulation logique (attribut tabindex rarement nécessaire)
  • Instructions claires avant les champs complexes

4. Garantissez l'accessibilité au clavier

25% des utilisateurs en situation de handicap naviguent exclusivement au clavier. Pour eux, je m'assure que :

  • Tous les éléments interactifs sont accessibles via Tab
  • L'indicateur de focus est clairement visible (jamais de outline: none sans alternative)
  • Les pièges au clavier sont éliminés (modales, menus déroulants)
  • Les raccourcis clavier sont documentés et non conflictuels

5. Assurez des contrastes suffisants

Le ratio de contraste minimum est de 4.5:1 pour le texte standard et 3:1 pour le texte agrandi. J'utilise systématiquement des outils comme Contrast Finder pour vérifier ces ratios.

Pour les daltoniens, j'évite de transmettre une information uniquement par la couleur.

6. Rendez les médias accessibles

Pour chaque contenu audio ou vidéo, je fournis :

  • Sous-titres pour les vidéos
  • Transcriptions textuelles pour l'audio
  • Audiodescription pour les contenus visuels importants

7. Utilisez ARIA avec parcimonie

ARIA peut résoudre certains problèmes, mais son utilisation inappropriée crée souvent plus de difficultés qu'elle n'en résout. Ma règle : n'utiliser ARIA que lorsque le HTML natif ne suffit pas.

Exemple d'utilisation pertinente :


<!-- Mauvaise pratique : aria-label inutile -->
<button aria-label="Envoyer">Envoyer</button>

<!-- Bonne pratique : texte visible suffisant -->
<button>Envoyer</button>

<!-- Cas où aria-label est pertinent : icône sans texte -->
<button aria-label="Fermer">
  <svg>...</svg> <!-- Icône X -->
</button>

8. Testez rigoureusement

Je ne déploie jamais sans tests approfondis :

  • Tests automatisés avec des outils comme Axe ou Wave
  • Tests manuels sur la base des critères RGAA
  • Tests avec des lecteurs d'écran (NVDA, JAWS, VoiceOver)
  • Tests utilisateurs avec des personnes en situation de handicap

9. Documentez votre démarche accessibilité

Une déclaration d'accessibilité n'est pas qu'une obligation légale, c'est un outil de communication et d'amélioration. J'y inclus :

  • Le niveau de conformité visé et atteint
  • Les dérogations éventuelles (avec justification)
  • Le plan d'amélioration pour les non-conformités
  • Un canal de signalement des problèmes d'accessibilité

Ce que je déconseille formellement

  • Se limiter aux tests automatiques qui ne détectent que 30% des problèmes
  • Implémenter l'accessibilité uniquement en fin de projet
  • Négliger la formation des équipes de production de contenu