accessibilite rgaa guide

RGAA et Drupal : checklist d'accessibilité pour votre site

Comment rendre votre site Drupal conforme au RGAA 4.1 ? Voici une checklist pratique des points clés à vérifier et les modules Drupal recommandés.

L'accessibilité numérique n'est plus une option. En France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) s'impose à tous les sites publics et à de plus en plus d'acteurs privés. Bonne nouvelle : Drupal est l'un des CMS les mieux préparés pour l'accessibilité.

Voici notre checklist pour rendre votre site Drupal conforme au RGAA 4.1.

Qu'est-ce que le RGAA ?

Le RGAA est le référentiel français d'accessibilité numérique. Il s'appuie sur les WCAG (Web Content Accessibility Guidelines) et définit 106 critères répartis en 13 thématiques.

Qui est concerné ?

  • Secteur public : toutes les administrations, collectivités, établissements publics
  • Grandes entreprises : chiffre d'affaires > 250 M€ en France
  • Délégation de service public : entreprises mandatées par l'État

Les niveaux de conformité

  • Niveau A : exigences de base
  • Niveau AA : niveau légal requis en France
  • Niveau AAA : niveau maximal (rarement atteignable à 100%)

Checklist par thématique

1. Images

  • [ ] Toutes les images ont un attribut alt
  • [ ] Les images décoratives ont un alt vide (alt="")
  • [ ] Les images porteuses d'information ont un alt descriptif
  • [ ] Les images complexes (graphiques, schémas) ont une description détaillée

Drupal : Configurez le champ alt comme obligatoire dans les types de médias.

# Rendre l'alt obligatoire sur les images
field.field.media.image.field_media_image:
  required: true

2. Cadres (iframes)

  • [ ] Chaque iframe a un attribut title descriptif
  • [ ] Le contenu des iframes est accessible

3. Couleurs

  • [ ] Le contraste texte/fond respecte les ratios WCAG (4.5:1 pour le texte, 3:1 pour les grands textes)
  • [ ] L'information n'est jamais véhiculée uniquement par la couleur

Outil : Utilisez un vérificateur de contraste comme Contrast Checker.

4. Multimédia

  • [ ] Les vidéos ont des sous-titres
  • [ ] Les contenus audio ont une transcription
  • [ ] Les médias peuvent être mis en pause/arrêtés
  • [ ] Pas de contenu qui clignote plus de 3 fois par seconde

5. Tableaux

  • [ ] Les tableaux de données ont des en-têtes (<th>)
  • [ ] L'attribut scope identifie les en-têtes de lignes/colonnes
  • [ ] Les tableaux complexes utilisent headers et id
  • [ ] Les tableaux de mise en page sont évités

6. Liens

  • [ ] Chaque lien a un intitulé explicite (pas de "cliquez ici")
  • [ ] Les liens identiques mènent à la même destination
  • [ ] Les liens ouvrant une nouvelle fenêtre le signalent
<!-- Bon exemple -->
<a href="/contact/">Contactez-nous</a>

<!-- Mauvais exemple -->
<a href="/contact/">Cliquez ici</a>

7. Scripts

  • [ ] Les composants JavaScript sont utilisables au clavier
  • [ ] Les changements de contexte sont signalés
  • [ ] Les messages d'erreur sont accessibles

Drupal : Utilisez les composants JavaScript de Drupal core qui sont déjà accessibles (Drupal.announce, etc.).

8. Éléments obligatoires

  • [ ] Chaque page a un title unique et pertinent
  • [ ] La langue principale est déclarée (<html lang="fr">)
  • [ ] Les changements de langue dans le contenu sont signalés
  • [ ] Les balises sont utilisées conformément aux spécifications

9. Structuration de l'information

  • [ ] La page utilise des titres (<h1> à <h6>) hiérarchiques
  • [ ] Les listes sont balisées correctement (<ul>, <ol>, <dl>)
  • [ ] La structure est logique et cohérente
<!-- Structure de titres correcte -->
<h1>Titre principal</h1>
  <h2>Section 1</h2>
    <h3>Sous-section 1.1</h3>
  <h2>Section 2</h2>

10. Présentation de l'information

  • [ ] Le site reste utilisable à 200% de zoom
  • [ ] Le contenu reste lisible sans CSS
  • [ ] Les liens sont distinguables du texte environnant
  • [ ] Les focus sont visibles

Drupal : Le thème Olivero (thème par défaut) est conçu avec l'accessibilité en tête.

11. Formulaires

  • [ ] Chaque champ a un label associé
  • [ ] Les champs obligatoires sont signalés
  • [ ] Les messages d'erreur sont explicites et associés aux champs
  • [ ] L'aide à la saisie est fournie si nécessaire
<!-- Formulaire accessible -->
<label for="email">Adresse email (obligatoire)</label>
<input type="email" id="email" name="email" required aria-required="true">
<span class="error" role="alert">Veuillez saisir une adresse email valide</span>

12. Navigation

  • [ ] Deux moyens de navigation minimum (menu, recherche, plan du site)
  • [ ] Le menu est cohérent sur toutes les pages
  • [ ] Les liens d'évitement sont présents ("Aller au contenu")
  • [ ] L'ordre de tabulation est logique

Drupal : Ajoutez un bloc "Skip to main content" en haut de page.

13. Consultation

  • [ ] Les documents téléchargeables sont accessibles (PDF, Word...)
  • [ ] Les limites de temps peuvent être supprimées
  • [ ] Le rafraîchissement automatique peut être contrôlé
  • [ ] Les contenus en mouvement peuvent être arrêtés

Modules Drupal pour l'accessibilité

Editoria11y

Vérifie l'accessibilité du contenu directement dans l'interface d'édition. Signale les problèmes courants (images sans alt, titres mal structurés...).

A11y (Accessibility)

Fournit des outils et améliorations d'accessibilité pour Drupal.

Automatic Alternative Text

Génère des textes alternatifs automatiques pour les images (à utiliser comme base, puis à affiner).

Block ARIA Landmark Roles

Ajoute des rôles ARIA aux blocs pour améliorer la navigation des lecteurs d'écran.

Processus de mise en conformité

1. Audit initial

Évaluez l'état actuel de votre site :

  • Audit automatisé (axe, WAVE, Lighthouse)
  • Audit manuel sur un échantillon de pages
  • Tests avec lecteur d'écran (NVDA, VoiceOver)
  • Tests de navigation clavier

2. Plan de correction

Priorisez les corrections :

  1. Bloquants (empêchent l'accès à l'information)
  2. Majeurs (gênent fortement l'utilisation)
  3. Mineurs (inconfort mais contournable)

3. Corrections techniques

  • Thème : structure HTML, CSS, JavaScript accessible
  • Configuration : modules, permissions, formulaires
  • Formation : sensibiliser les contributeurs

4. Déclaration de conformité

Publiez votre déclaration d'accessibilité :

  • Niveau de conformité atteint
  • Contenus non accessibles et raisons
  • Contact pour signaler un problème
  • Plan d'amélioration

Outils de test

Automatisés

  • axe DevTools : extension navigateur
  • WAVE : évaluation en ligne
  • Lighthouse : audit intégré Chrome

Manuels

  • NVDA : lecteur d'écran gratuit (Windows)
  • VoiceOver : lecteur d'écran intégré (Mac/iOS)
  • Navigation clavier : tab, entrée, flèches

FAQ

Drupal est-il accessible par défaut ?

Drupal core est conçu avec l'accessibilité en tête. Le problème vient souvent des thèmes custom et des contenus mal structurés.

Combien coûte une mise en conformité ?

Ça dépend de l'écart entre l'état actuel et la cible. Un audit initial permet d'estimer la charge. Comptez entre 5 et 20 jours de travail.

Faut-il former les contributeurs ?

Oui, c'est crucial. Un site techniquement accessible peut devenir inaccessible si les contributeurs ajoutent des images sans alt ou des contenus mal structurés.

Quelle est la sanction en cas de non-conformité ?

Pour le secteur public : jusqu'à 20 000 € par site et par an. Les plaintes de citoyens sont aussi possibles.

Conclusion

L'accessibilité n'est pas un coût, c'est un investissement. Un site accessible touche plus de monde, améliore l'expérience de tous, et respecte les obligations légales.

Drupal fournit une excellente base. À vous de la compléter avec un thème accessible, une configuration soignée et des contributeurs formés.

Besoin d'un audit ou d'une mise en conformité RGAA ? Nos experts Drupal vous accompagnent. Parlons de votre projet.

Experts Drupal

Besoin d'aide avec Drupal ?

Nos développeurs seniors sont disponibles pour vos projets de migration, maintenance, refonte ou développement sur mesure.

Trouver un expert Drupal →

Ce qu'on propose

  • Migration vers Drupal 10 ou 11
  • Maintenance mensuelle sécurisée
  • Renfort technique ponctuel
  • Audit et optimisation
Discuter de votre projet
← Retour au blogue