Audit accessibilité Drupal : méthode RGAA et correctifs

Ce que le cœur de Drupal vous apporte

Les thèmes livrés avec le cœur, Olivero pour le site public et Claro pour l'administration, ont été conçus avec l'accessibilité comme exigence. Le cœur fournit aussi des outils aux développeurs : la classe visually-hidden pour masquer un texte à l'écran sans le cacher aux lecteurs d'écran, le lien d'évitement dans le gabarit html.html.twig, et l'API JavaScript Drupal.announce() pour faire lire un message par les technologies d'assistance.

Ce qui casse la conformité

Dans les audits, les non-conformités viennent presque toujours de ce qui a été ajouté au cœur :

• un thème sur mesure qui retire le style du focus, réduit les contrastes ou supprime le lien d'évitement ;
• des templates Twig réécrits à la main qui perdent l'attribut alt des images ou la hiérarchie des titres ;
• des modules contribués (carrousels, onglets, menus déroulants) qui ne gèrent pas le clavier ;
• le contenu éditorial : images sans alternative, liens « cliquez ici », titres choisis pour leur taille et non pour leur niveau.

1. Choisir l'échantillon de pages

Prenez au moins une page par gabarit : accueil, page de base, article, liste générée par une View (avec ses filtres et sa pagination), page de recherche, formulaire Webform, page d'authentification, ainsi que les pages obligatoires (mentions légales, déclaration d'accessibilité, contact).

2. Lancer un scan automatique

Un scan rend chaque page dans un vrai navigateur et repère en quelques secondes les anomalies mesurables : contrastes, images sans alternative, champs sans étiquette, langue de la page, rôles ARIA invalides. Conformly indique pour chacune le critère RGAA concerné et les éléments en cause. C'est un premier état des lieux, pas un audit complet.

3. Vérifier le thème et les templates Twig

Passez en revue les templates surchargés dans votre thème (dossier templates/) : chaque surcharge est un endroit où le balisage du cœur a pu être perdu. Vérifiez la présence du lien d'évitement, la structure des régions (header, nav, main, footer), l'ordre des titres et le style du focus.

4. Tester Views, Webform et Layout Builder au clavier

Débranchez la souris. Parcourez chaque page avec Tab, Maj+Tab, Entrée et les flèches : tout doit être atteignable, dans un ordre logique, avec un focus toujours visible. Insistez sur les filtres exposés des Views, la pagination en AJAX, les étapes des Webform et les blocs ajoutés avec Layout Builder.

5. Tester au lecteur d'écran

Avec NVDA (gratuit, Windows) ou VoiceOver (macOS), vérifiez que les titres, les listes et les liens sont annoncés correctement, que les messages d'erreur des formulaires sont lus, et que le résultat d'un filtre en AJAX est signalé.

6. Calculer le taux et publier la déclaration

Le taux de conformité se calcule sur les critères applicables, selon la méthode officielle. Pour un organisme soumis à l'obligation, il alimente la déclaration d'accessibilité, à publier et à tenir à jour sur le site.

Images sans alternative dans un template Twig (critère 1.1)

Un template qui construit la balise img à la main à partir de l'URL du fichier perd l'alternative saisie dans le champ image. Rendez le champ avec son formateur : Drupal produit alors l'attribut alt saisi par le contributeur.

{# À éviter : l'alternative saisie est perdue #}
<img src="{{ file_url(node.field_image.entity.fileuri) }}">

{# Correct : le formateur d'image restitue l'attribut alt #}
{{ content.field_image }}

Lien d'évitement supprimé (critère 12.7)

Les thèmes sur mesure retirent souvent le lien « Aller au contenu principal » du gabarit html.html.twig. Il doit exister et être le premier élément atteignable au clavier, visible au moment où il reçoit le focus.

<a href="#main-content" class="visually-hidden focusable skip-link">
  {{ 'Skip to main content'|t }}
</a>
{# … puis, dans page.html.twig : <main id="main-content" tabindex="-1"> #}

Focus invisible (critère 10.7)

Un outline: none ajouté pour des raisons esthétiques rend la navigation au clavier impossible. Donnez au focus un style net, contrasté, sur tous les éléments interactifs.

:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

Résultats de Views en AJAX non annoncés (critère 7.5)

Quand un filtre exposé ou la pagination recharge la liste en AJAX, une personne qui utilise un lecteur d'écran ne sait pas que le contenu a changé. Annoncez le résultat avec Drupal.announce(), en déclarant la dépendance core/drupal.announce dans la bibliothèque de votre thème.

(function (Drupal, once) {
  Drupal.behaviors.viewsAnnounce = {
    attach(context) {
      once('views-announce', '.view-content', context).forEach((list) => {
        const count = list.querySelectorAll('.views-row').length;
        Drupal.announce(Drupal.formatPlural(count, '1 résultat', '@count résultats'));
      });
    },
  };
})(Drupal, once);

Champs de formulaire sans étiquette visible (critères 11.1 et 11.2)

Dans un formulaire Webform ou un formulaire personnalisé, une étiquette masquée avec #title_display « none » disparaît aussi pour les lecteurs d'écran. Utilisez « invisible » si le design l'exige vraiment : l'étiquette reste dans le code, masquée visuellement. Mieux encore, gardez une étiquette visible.

$form['email'] = [
  '#type' => 'email',
  '#title' => $this->t('Adresse e-mail'),
  // 'none' supprime l'étiquette ; 'invisible' la garde pour les lecteurs d'écran.
  '#title_display' => 'invisible',
];

Langue absente ou erronée (critères 8.3 et 8.7)

Sur un site multilingue, la langue de la page vient de la négociation de langue de Drupal : vérifiez que l'attribut lang de la balise html change bien avec la traduction. Pour un passage dans une autre langue au sein d'un contenu, activez le bouton « Langue » de CKEditor 5 dans le format de texte.

Titres choisis pour leur taille (critère 9.1)

Les contributeurs choisissent souvent un « Titre 4 » parce qu'il est plus petit. Limitez les niveaux de titre proposés dans le format de texte de CKEditor 5, et formez l'équipe éditoriale à la hiérarchie des titres.

Images de l'éditeur sans alternative (critère 1.1)

Dans CKEditor 5, l'insertion d'une image demande une alternative textuelle, ou de déclarer l'image décorative. Ne contournez pas ce garde-fou : ajoutez plutôt une consigne dans le format de texte pour expliquer ce qu'est une bonne alternative.

Drupal est-il accessible par défaut ?

Le cœur de Drupal et ses thèmes Olivero et Claro sont conçus avec l'accessibilité comme exigence, mais un site n'est conforme au RGAA que si son thème, ses modules et son contenu le sont aussi. La conformité se vérifie site par site.

Combien de pages faut-il auditer sur un site Drupal ?

Le RGAA demande un échantillon représentatif : au moins une page par gabarit (types de contenu, Views, Webform, recherche), plus les pages obligatoires comme la déclaration d'accessibilité. Sur un site institutionnel, cela représente souvent une quinzaine à une vingtaine de pages.

Editoria11y remplace-t-il un audit RGAA ?

Non. Editoria11y aide les contributeurs à éviter les erreurs de contenu au moment où ils les commettent. Il ne vérifie pas le thème, les modules ni le fonctionnement au clavier, et ne produit pas de taux de conformité.

Peut-on rendre un site Drupal accessible sans refonte ?

Le plus souvent, oui : la majorité des corrections portent sur les templates Twig, la feuille de style du thème, la configuration de l'éditeur et le contenu. Une refonte ne s'impose que si le thème est trop éloigné des bonnes pratiques.

Mon site Drupal public doit-il publier une déclaration d'accessibilité ?

Oui. Les organismes soumis au RGAA doivent publier une déclaration d'accessibilité à jour, indiquant le niveau de conformité et les contenus non accessibles. Son absence est sanctionnable.

Combien coûte un audit d'accessibilité Drupal ?

Un audit manuel complet par un prestataire se chiffre en jours de travail et dépend de la taille de l'échantillon. Un premier état des lieux automatique est gratuit avec le scan ci-dessus ; il permet de corriger le plus visible avant un audit, et d'en réduire la durée.