Technique

Comment rendre un site WordPress accessible RGAA

Rendez votre site WordPress conforme au RGAA : thèmes accessibles, plugins, bonnes pratiques et checklist. Scannez votre site gratuitement.

3 février 202611 min de lecture

WordPress propulse plus de 40 % des sites web dans le monde, ce qui en fait le CMS le plus répandu. Cependant, la facilité d'utilisation de WordPress peut créer un faux sentiment de sécurité en matière d'accessibilité. Un site WordPress n'est pas automatiquement conforme au RGAA, loin de là. Le thème, les plugins, le contenu éditorial et la configuration jouent tous un rôle déterminant.

Ce guide vous accompagne pas à pas pour rendre votre site WordPress conforme au RGAA, depuis le choix du thème jusqu'aux tests finaux.

WordPress et l'accessibilité : état des lieux

WordPress a fait de l'accessibilité une priorité affichée depuis plusieurs années. Le projet dispose d'une équipe dédiée à l'accessibilité (Make WordPress Accessible) et les standards de développement du core exigent la conformité WCAG 2.1 AA. Le dashboard d'administration est raisonnablement accessible aux technologies d'assistance.

Cependant, la réalité du terrain est plus nuancée. Les thèmes et plugins tiers, qui constituent la majorité de l'écosystème WordPress, ne respectent pas systématiquement ces standards. Un site WordPress accessible nécessite donc des choix éclairés et une configuration soignée.

Pour comprendre les exigences précises du RGAA, consultez notre guide complet.

Choisir un thème accessible

Le thème est la fondation de votre site. Un thème mal conçu peut rendre impossible la conformité RGAA, quelle que soit la qualité de votre contenu.

Le label "Accessibility Ready"

Le répertoire officiel WordPress propose un filtre "Accessibility Ready". Les thèmes portant ce label ont passé une revue spécifique vérifiant :

La navigation clavier fonctionnelle
La présence de liens d'évitement (skip links)
Les contrastes de couleurs suffisants
Le balisage sémantique correct
L'utilisation appropriée des attributs ARIA
La gestion correcte du focus

Attention : ce label est un bon point de départ, mais il ne garantit pas la conformité RGAA complète. Il couvre les aspects techniques fondamentaux mais pas la totalité des 106 critères.

Thèmes recommandés

Voici des thèmes reconnus pour leur qualité en matière d'accessibilité :

Twenty Twenty-Four / Twenty Twenty-Five — Les thèmes par défaut de WordPress sont parmi les plus accessibles. Ils sont développés par l'équipe core avec une attention particulière à l'accessibilité.
Flavor — Thème Starter minimaliste conçu dès l'origine pour l'accessibilité, avec une structure HTML exemplaire. Disponible aussi en version Blocktheme pour l'éditeur Gutenberg.

Points de vigilance lors du choix

Lors de l'évaluation d'un thème, vérifiez manuellement :

La navigation au clavier — Parcourez l'ensemble du site sans souris. Tous les éléments interactifs doivent être atteignables et le focus doit être visible.
La structure des titres — Inspectez le HTML. Le thème doit produire une hiérarchie de titres logique (h1 unique, pas de sauts de niveaux). Testez avec notre validateur de titres.
Les contrastes — Vérifiez les combinaisons texte/fond par défaut avec notre calculateur de contraste.
Le responsive — Le contenu doit être lisible sans défilement horizontal à 320px de large et avec un zoom à 200%.

Plugins essentiels pour l'accessibilité

WP Accessibility

WP Accessibility de Joe Dolson est le plugin de référence. Il ajoute et corrige de nombreux éléments d'accessibilité :

Ajout automatique de liens d'évitement (skip links) si le thème n'en fournit pas
Correction du focus outline supprimé par certains thèmes
Ajout d'attributs aria-current sur les menus de navigation
Suppression de l'attribut tabindex inapproprié ajouté par certains thèmes
Forçage de l'attribut lang sur la balise <html>
Option pour retirer les attributs title redondants des images

Ce plugin ne rend pas un site magiquement accessible, mais il corrige les erreurs techniques les plus courantes introduites par les thèmes.

One Click Accessibility

One Click Accessibility offre un widget en surcouche permettant aux utilisateurs de :

Agrandir la taille du texte
Modifier les contrastes
Surligner les liens
Afficher une police adaptée à la dyslexie

Important : ce type de widget en surcouche (overlay) est controversé dans la communauté accessibilité. Il ne remplace en aucun cas une conception accessible native. L'approche recommandée est de concevoir le site correctement dès l'origine plutôt que de proposer un mode alternatif. Ce plugin peut servir de mesure transitoire mais ne doit pas être considéré comme une solution définitive.

Autres plugins utiles

Jesuspended Content Warning — Avertit les utilisateurs avant les contenus susceptibles de déclencher des crises (animations clignotantes).
WP Accessibility Helper — Fournit des outils d'audit intégrés au dashboard pour identifier les problèmes courants directement depuis l'interface d'administration.
Jepack (module accessibilité) — Propose quelques optimisations d'accessibilité dans sa suite de fonctionnalités.

Images et alternatives textuelles

Les images sont la source d'erreurs d'accessibilité la plus fréquente sur WordPress. Le RGAA exige un traitement précis selon le type d'image.

Images informatives

Toute image qui transmet une information doit avoir un texte alternatif pertinent dans le champ "Texte alternatif" de la médiathèque WordPress. Ce texte doit :

Décrire le contenu ou la fonction de l'image
Être concis (idéalement moins de 150 caractères)
Ne pas commencer par "Image de..." ou "Photo de..." (le lecteur d'écran annonce déjà qu'il s'agit d'une image)
Transmettre l'information équivalente à celle perçue visuellement

Exemple : Pour un graphique montrant une hausse de 15% du chiffre d'affaires, l'alt ne devrait pas être "graphique" mais "Graphique : hausse du chiffre d'affaires de 15% entre 2024 et 2025".

Images décoratives

Les images purement décoratives (ornements, séparateurs, photos d'ambiance sans valeur informative) doivent avoir un alt vide (alt=""). Dans WordPress, laissez simplement le champ "Texte alternatif" vide. Le lecteur d'écran ignorera alors l'image.

Images complexes

Pour les infographies, graphiques complexes ou schémas, un simple texte alternatif ne suffit pas. Le RGAA exige une description détaillée accessible, par exemple :

Un paragraphe de description immédiatement après l'image
Un lien vers une page dédiée contenant la description complète
L'utilisation de l'attribut longdesc (peu supporté, à éviter)

Formulaires accessibles

Les formulaires WordPress (Contact Form 7, Gravity Forms, WPForms) doivent respecter plusieurs critères RGAA.

Étiquetage des champs

Chaque champ de formulaire doit avoir une étiquette visible et associée programmatiquement :

<!-- Correct -->
<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email">

<!-- Incorrect : placeholder seul -->
<input type="email" placeholder="Adresse e-mail">

Avec Contact Form 7, utilisez systématiquement la balise <label> :

<label>Adresse e-mail
    [email* your-email]
</label>

Messages d'erreur

Les messages d'erreur doivent être :

Explicites — "Le champ e-mail est requis" plutôt que "Erreur dans le formulaire"
Associés au champ concerné (via aria-describedby ou proximité dans le DOM)
Annoncés aux technologies d'assistance (via role="alert" ou aria-live="assertive")

Regroupement logique

Les champs liés doivent être regroupés avec <fieldset> et <legend> :

<fieldset>
  <legend>Adresse de livraison</legend>
  <label for="rue">Rue</label>
  <input type="text" id="rue">
  <label for="ville">Ville</label>
  <input type="text" id="ville">
</fieldset>

Navigation et structure

Liens d'évitement

Les liens d'évitement permettent aux utilisateurs de clavier de passer directement au contenu principal sans parcourir tous les menus. C'est un critère RGAA obligatoire (thématique 12).

Si votre thème ne les inclut pas, le plugin WP Accessibility peut les ajouter automatiquement. Vérifiez leur présence avec notre générateur de liens d'évitement.

Structure des titres

WordPress génère automatiquement la balise <h1> pour le titre de la page ou de l'article. Dans votre contenu, utilisez les blocs "Titre" de Gutenberg en respectant la hiérarchie :

h1 — Titre principal (un seul par page, généré par le thème)
h2 — Sections principales de votre contenu
h3 — Sous-sections
h4 à h6 — Niveaux suivants si nécessaire

Ne sautez jamais un niveau (pas de h2 suivi directement d'un h4). Utilisez les titres pour la structure, jamais pour le style visuel.

Navigation par landmarks

Assurez-vous que votre thème utilise les landmarks HTML5 :

<header> pour l'en-tête du site
<nav> pour les zones de navigation (avec un aria-label si plusieurs navigations)
<main> pour le contenu principal
<footer> pour le pied de page
<aside> pour les contenus complémentaires (sidebar)

Ces éléments permettent aux utilisateurs de lecteurs d'écran de naviguer rapidement entre les grandes zones de la page.

Fil d'Ariane

Le fil d'Ariane est un repère de navigation recommandé par le RGAA. Les plugins de SEO comme Yoast SEO ou Rank Math proposent cette fonctionnalité nativement. Assurez-vous que le fil d'Ariane est balisé avec <nav aria-label="Fil d'Ariane"> et utilise une liste ordonnée <ol>.

Le contenu éditorial : la responsabilité des rédacteurs

Un site techniquement accessible peut devenir inaccessible par son contenu. Les rédacteurs jouent un rôle crucial.

Rédaction des liens

Les intitulés de liens doivent être explicites hors contexte :

Correct : "Consulter le rapport annuel 2025 (PDF, 2.5 Mo)"
Incorrect : "Cliquez ici" ou "En savoir plus"

Langue du contenu

Si un passage de texte est dans une langue différente de la langue principale du site, balisez-le avec l'attribut lang :

<span lang="en">Web Content Accessibility Guidelines</span>

Dans Gutenberg, vous pouvez utiliser le bloc HTML personnalisé pour ajouter cet attribut.

Documents en téléchargement

Les PDF et documents téléchargeables doivent eux aussi être accessibles. Pour chaque document :

Indiquez le format et le poids dans l'intitulé du lien
Proposez une alternative HTML si possible
Assurez-vous que le document PDF est balisé (tagged PDF) et non une simple image scannée

Tester l'accessibilité de votre site WordPress

Tests automatisés

Les tests automatisés détectent environ 30 à 40 % des problèmes d'accessibilité. Ils constituent un excellent premier filtre :

Scanner RGAA — Utilisez notre outil gratuit pour obtenir un diagnostic rapide de votre site WordPress. Le scan analyse les critères RGAA automatiquement testables.
axe DevTools — Extension navigateur pour des tests page par page, directement dans les outils de développement.
WAVE — Outil en ligne de WebAIM qui fournit un retour visuel sur les problèmes détectés.

Tests manuels essentiels

Les tests automatisés ne suffisent pas. Voici les vérifications manuelles indispensables :

Navigation clavier — Parcourez l'intégralité de votre site avec la touche Tab. Vérifiez que :

Tous les éléments interactifs sont atteignables
L'ordre de tabulation est logique
Le focus est toujours visible
Il n'y a pas de "piège au clavier" (impossible de sortir d'un élément)

Lecteur d'écran — Testez avec au moins un lecteur d'écran :

NVDA (gratuit, Windows)
VoiceOver (intégré, macOS/iOS)
TalkBack (intégré, Android)

Zoom — Agrandissez la page à 200% et vérifiez que tout le contenu reste lisible et fonctionnel sans défilement horizontal.

Checklist WordPress RGAA

Avant chaque publication de contenu, vérifiez :

Toutes les images ont un texte alternatif approprié (informatif ou vide)
La structure des titres est correcte et sans sauts de niveaux
Les liens ont des intitulés explicites
Les formulaires ont des étiquettes associées
Les contrastes de couleurs respectent les ratios minimaux
La page est utilisable au clavier
Les changements de langue sont balisés
Les médias (vidéos, audios) ont des alternatives (sous-titres, transcription)

Erreurs fréquentes spécifiques à WordPress

Le piège des page builders

Les constructeurs de pages (Elementor, Divi, WPBakery) génèrent souvent du HTML sur-complexe avec des <div> imbriqués à l'excès, des rôles ARIA incorrects et une navigation clavier problématique. Si vous utilisez un page builder :

Privilégiez Elementor qui a fait des efforts significatifs en accessibilité
Évitez les structures trop complexes (accordéons dans des onglets dans des sliders)
Testez systématiquement au clavier et au lecteur d'écran

Les sliders et carrousels

Les carrousels d'images en page d'accueil sont un cauchemar d'accessibilité récurrent. Ils posent des problèmes de contrôle automatique, de navigation clavier et d'annonce aux technologies d'assistance. Si vous devez en utiliser un :

Ajoutez des boutons pause/lecture accessibles
Assurez-vous que les contrôles (précédent/suivant) sont atteignables au clavier
Fournissez des alternatives textuelles pour chaque slide

La recommandation générale reste d'éviter les carrousels et de privilégier un contenu statique bien structuré.

Les popups et modales

Les popups (newsletter, cookies, promotions) sont souvent inaccessibles :

Le focus n'est pas déplacé vers la modale à son ouverture
Le fond de page reste interactif au clavier
Le bouton de fermeture n'est pas atteignable ou n'a pas d'intitulé
Échap ne ferme pas la modale

Assurez-vous que vos plugins de popup respectent le pattern de dialogue modal ARIA : piégeage du focus dans la modale, restauration du focus à la fermeture, bouton de fermeture accessible.

Conclusion

Rendre un site WordPress conforme au RGAA est un travail méthodique mais tout à fait réalisable. Les clés du succès sont :

Un thème accessible comme fondation solide
Des plugins ciblés pour corriger les lacunes techniques
Une discipline éditoriale pour maintenir la qualité du contenu
Des tests réguliers combinant automatisation et vérification manuelle

Commencez par scanner votre site WordPress pour obtenir un diagnostic initial, puis attaquez les corrections par ordre de priorité. Pour approfondir les aspects techniques spécifiques à WordPress (hooks PHP, templates, Gutenberg), consultez notre guide accessibilité WordPress. L'accessibilité est un investissement qui bénéficie à tous vos utilisateurs et vous protège des sanctions juridiques croissantes.

Questions fréquentes

WordPress est-il accessible par défaut ?

Partiellement. Le core de WordPress et les thèmes par défaut (Twenty Twenty-Four, Twenty Twenty-Five) sont raisonnablement accessibles. Mais la plupart des thèmes tiers et plugins ne respectent pas les critères RGAA. Le choix du thème et des plugins est déterminant.

Quel plugin de formulaire est le plus accessible ?

Gravity Forms offre le meilleur support natif d'accessibilité avec des labels corrects, des messages d'erreur associés et une navigation clavier fonctionnelle. Contact Form 7 est léger mais nécessite des ajustements manuels.

Comment rendre un site WordPress conforme au RGAA ?

Choisissez un thème accessibility-ready, utilisez des plugins accessibles, vérifiez le contraste et les alternatives textuelles, et testez la navigation clavier. Lancez un scan automatisé pour identifier les problèmes prioritaires.

Testez l'accessibilité de votre site

Analysez votre site en quelques secondes avec notre scanner RGAA automatisé.

Lancer un scan gratuit