L'accessibilité web signifie construire des sites web que les personnes handicapées peuvent utiliser efficacement. Cela inclut les personnes qui utilisent des lecteurs d'écran, la navigation uniquement au clavier, le contrôle vocal, les agrandisseurs d'écran, ou qui ont des limitations de vision des couleurs. Dans l'écosystème WordPress, l'accessibilité est à la fois une exigence légale dans de nombreuses juridictions et un moyen pratique d'atteindre un public plus large—plus d'un milliard de personnes dans le monde ont une forme de handicap.
Dans ce guide, nous couvrons des étapes pratiques pour rendre votre site WordPress accessible, en suivant les Directives pour l'accessibilité des contenus web (WCAG) 2.2 au niveau AA—la norme la plus couramment requise par les lois sur l'accessibilité, y compris l'ADA (États-Unis), l'EAA (UE) et l'AODA (Canada).
Comprendre les principes de WCAG 2.2
WCAG est organisé autour de quatre principes, connus sous le nom de POUR :
| Principe | Ce que cela signifie | Exemples WordPress |
|---|---|---|
| Perceptible | Les utilisateurs peuvent percevoir le contenu par la vue, l'ouïe ou le toucher | Texte alternatif pour les images, sous-titres pour les vidéos, contraste de couleur suffisant |
| Opérable | Les utilisateurs peuvent naviguer et interagir avec l'interface | Navigation au clavier, liens de contournement, pas de pièges au clavier |
| Compréhensible | Les utilisateurs peuvent comprendre le contenu et comment utiliser l'interface | Langage clair, navigation cohérente, messages d'erreur |
| Robuste | Le contenu fonctionne sur différents navigateurs, appareils et technologies d'assistance | HTML valide, rôles ARIA appropriés, balisage sémantique |
Choisir un thème accessible
La structure HTML et le CSS de votre thème WordPress forment la base de l'accessibilité de votre site. Lors de la sélection d'un thème WordPress, évaluez ces facteurs d'accessibilité :
- HTML sémantique : Le thème utilise des éléments HTML5 appropriés (header, nav, main, article, aside, footer) au lieu de divs génériques pour tout
- Hiérarchie des titres : H1 → H2 → H3 suit un ordre logique sans sauter de niveaux
- Liens de contournement : Un lien "Passer au contenu" est présent comme le premier élément focalisable, permettant aux utilisateurs de clavier de contourner la navigation
- Navigation au clavier : Tous les éléments interactifs (liens, boutons, formulaires) sont accessibles et utilisables avec la touche Tab
- Indicateurs de focus : Les éléments en focus ont un contour ou une surbrillance visible (non supprimés avec outline: none)
- Contraste des couleurs : Le texte respecte les ratios de contraste WCAG AA (4.5:1 pour le texte normal, 3:1 pour le texte large)
Les thèmes étiquetés "accessibilité prête" sur WordPress.org ont passé un examen d'accessibilité de base. Cependant, cette étiquette indique un point de départ, pas une conformité totale aux WCAG. Parmi les thèmes populaires, GeneratePress est particulièrement bien codé avec un HTML sémantique propre et des repères ARIA appropriés.
Accessibilité des images
Texte alternatif
Chaque image significative nécessite un texte alternatif descriptif. WordPress rend cela simple—le champ de texte alternatif est disponible dans la Bibliothèque de médias et lors de l'insertion d'images dans le contenu.
| Type d'image | Approche du texte alternatif | Exemple |
|---|---|---|
| Photo de produit | Décrire le produit | "Sac bandoulière en cuir rouge avec boucle dorée, vue de face" |
| Capture d'écran | Décrire ce que montre la capture d'écran | "Tableau de bord WordPress montrant la page des Plugins avec 12 plugins actifs" |
| Infographie | Résumer les informations clés | "Tableau comparatif : fonctionnalités d'Elementor vs Gutenberg. Elementor a plus de 100 widgets, Gutenberg a plus de 90 blocs" |
| Image décorative | Texte alternatif vide (alt="") | Motifs de fond, diviseurs, icônes purement décoratives |
| Graphique | Décrire la tendance ou le point de données clé | "Graphique linéaire montrant une augmentation du trafic du site web de 45 % de janvier à décembre 2025" |
Optimisation des images pour l'accessibilité
- Ne pas utiliser d'images de texte—utiliser du texte réel stylé avec CSS à la place
- Assurez-vous que le texte intégré dans les images respecte les exigences de contraste
- Fournir des descriptions longues pour les images complexes (graphiques, diagrammes) en utilisant un paragraphe adjacent ou l'attribut longdesc
- Assurez-vous que les images ont des dimensions appropriées afin qu'elles ne causent pas de décalages de mise en page (CLS)
Navigation au clavier
De nombreux utilisateurs naviguent sur les sites web entièrement avec
un clavier—Tab pour avancer, Shift+Tab pour reculer, Entrée pour activer les liens/boutons, Espace pour basculer les cases à cocher et cliquer sur les boutons, et Échap pour fermer les modales.
Problèmes courants d'accessibilité au clavier
- Pièges de focus : Dialogues modaux qui ne permettent pas de revenir au contenu principal (les modales doivent piéger le focus à l'intérieur de la modale, et Échap doit les fermer)
- Indicateurs de focus manquants : CSS qui supprime le contour par défaut sur les éléments en focus (ne jamais utiliser *:focus { outline: none } globalement)
- Éléments non interactifs avec des gestionnaires de clic : Divs ou spans avec des événements onClick qui ne sont pas accessibles au clavier (utiliser des boutons ou des liens à la place)
- Menus déroulants qui s'ouvrent uniquement au survol : Les utilisateurs de clavier ne peuvent pas déclencher les états de survol. Les menus doivent également s'ouvrir au focus/Entrée
- Composants personnalisés sans ARIA : Onglets, accordéons et carrousels construits sans rôles ARIA appropriés et gestionnaires de clavier
Couleur et Contraste
Les WCAG AA exigent ces rapports de contraste minimum :
| Élément | Ratio Minimum | Exemple (Réussite) | Exemple (Échec) |
|---|---|---|---|
| Texte normal (<18px) | 4.5:1 | #333 sur #fff (12.6:1) | #999 sur #fff (2.8:1) |
| Texte large (≥18px ou ≥14px en gras) | 3:1 | #555 sur #fff (7.4:1) | #aaa sur #fff (2.3:1) |
| Composants UI (boutons, champs de saisie) | 3:1 | Bouton bleu #2563eb (4.6:1) | Bouton bleu clair #93c5fd (1.8:1) |
| Contenu non textuel (icônes, bordures) | 3:1 | Icône sombre sur fond clair | Icône gris clair sur blanc |
Utilisez des outils comme le Vérificateur de Contraste de WebAIM ou l'extension de navigateur axe pour vérifier les rapports de contraste. Ne vous fiez pas uniquement à la couleur pour transmettre des informations—utilisez des étiquettes textuelles, des motifs ou des icônes en plus du codage couleur.
Accessibilité des Formulaires
Les formulaires sont l'un des domaines les plus critiques pour l'accessibilité. Que vous utilisiez les blocs Gutenberg, Gravity Forms, ou WPForms :
- Étiquetez chaque champ : Utilisez l'élément <label> associé à chaque champ via l'attribut for/id. Le texte d'espace réservé n'est pas un substitut aux étiquettes
- Groupez les champs connexes : Utilisez <fieldset> et <legend> pour les groupes de champs connexes (par exemple, les champs d'adresse de livraison)
- Fournissez des messages d'erreur : Lorsque la validation échoue, identifiez quel champ a l'erreur et décrivez comment la corriger. Utilisez aria-describedby pour associer les messages d'erreur à leurs champs
- Indiquez les champs obligatoires : Utilisez l'attribut required et indiquez visuellement les champs obligatoires avec du texte (pas seulement un astérisque)
- Supportez l'autocomplétion : Ajoutez des attributs d'autocomplétion appropriés (nom, email, tel, adresse-ligne1) afin que les navigateurs puissent remplir automatiquement les données du formulaire
Accessibilité du Contenu
Structure des Titres
Une hiérarchie de titres appropriée aide les utilisateurs de lecteurs d'écran à comprendre la structure de la page et à naviguer entre les sections. Règles :
- Un H1 par page (le titre de la page/article)
- H2 pour les sections principales
- H3 pour les sous-sections dans un H2
- Ne jamais sauter de niveaux (H2 → H4 sans H3 est incorrect)
- Ne pas utiliser des titres pour le style visuel—utiliser des classes CSS à la place
Texte des Liens
Évitez le texte de lien générique qui n'a pas de sens hors contexte :
| Mauvais Texte de Lien | Texte de Lien Accessible |
|---|---|
| "Cliquez ici" | "Lisez le guide de sécurité WordPress" |
| "En savoir plus" | "Lisez l'avis complet sur Elementor Pro" |
| "Apprenez-en plus" | "Découvrez comment optimiser le paiement WooCommerce" |
| "Ici" | "Téléchargez le rapport sur les benchmarks de performance" |
Tableaux
Les tableaux de données doivent inclure :
- <thead> avec des éléments <th> pour les en-têtes de colonne (avec scope="col")
- <th scope="row"> pour les en-têtes de ligne
- Un élément <caption> décrivant l'objectif du tableau
- Une structure simple—évitez les cellules fusionnées lorsque cela est possible, car elles sont difficiles à interpréter pour les lecteurs d'écran
Tester l'Accessibilité de Votre Site
| Outil | Type | Ce qu'il teste |
|---|---|---|
| axe DevTools | Extension de navigateur | WCA automatisé |
| Détection de violation G | ||
| WAVE | Extension de navigateur / web | Évaluation de l'accessibilité visuelle avec annotations en ligne |
| Lighthouse | Chrome DevTools | Audit d'accessibilité avec scores et recommandations |
| Test de clavier | Manuel | Naviguer sur l'ensemble du site en utilisant uniquement Tab, Entrée et Échap |
| Lecteur d'écran | Manuel | Tester avec VoiceOver (Mac), NVDA (Windows) ou TalkBack (Android) |
Les outils automatisés détectent environ 30 à 50 % des problèmes d'accessibilité. Des tests manuels avec un clavier et un lecteur d'écran sont nécessaires pour identifier les problèmes liés à l'interaction que les outils automatisés ne peuvent pas détecter.
Plugins WordPress pour l'accessibilité
- WP Accessibility : Ajoute des liens de saut, corrige les problèmes d'accessibilité courants, ajoute une barre d'outils pour les préférences utilisateur
- One Click Accessibility : Ajoute une barre d'outils d'accessibilité en frontend (taille de police, contraste, surlignage des liens)
- Modèles de démarrage avec accessibilité : Astra et GeneratePress ont tous deux de solides fondations en matière d'accessibilité dans leurs thèmes de base
Remarque : Les plugins de superposition d'accessibilité (qui ajoutent un widget flottant avec des boutons "corriger") sont largement critiqués par la communauté de l'accessibilité. Ils ne rendent pas un site web accessible ; ils ajoutent une couche superficielle qui peut en réalité interférer avec la technologie d'assistance. Concentrez-vous sur l'intégration de l'accessibilité dans votre thème et votre contenu plutôt que de compter sur des superpositions.
Pour plus de détails, consultez la documentation officielle : Directives WCAG, Équipe d'Accessibilité WordPress.
Questions Fréquemment Posées
WordPress est-il accessible dès le départ ?
Le cœur de WordPress s'est considérablement amélioré en matière d'accessibilité. Le panneau d'administration est en grande partie navigable au clavier, et l'éditeur de blocs inclut des étiquettes ARIA. Cependant, l'accessibilité de votre site dépend fortement du thème et des plugins que vous utilisez. Un thème avec une mauvaise structure HTML compromettra les fonctionnalités d'accessibilité intégrées de WordPress.
Ai-je légalement besoin d'un site web accessible ?
Dans de nombreuses juridictions, oui. L'ADA (États-Unis), la Loi européenne sur l'accessibilité (UE, entrée en vigueur en juin 2025), l'AODA (Canada) et des lois similaires exigent que les sites web soient accessibles. Les exigences spécifiques dépendent de votre emplacement, du type d'entreprise et du public. Consultez un professionnel du droit pour connaître les exigences spécifiques à votre situation.
L'accessibilité affecte-t-elle le SEO ?
Oui, il existe un chevauchement significatif. Une structure de titres appropriée, un texte alternatif descriptif, un HTML sémantique, un chargement rapide des pages et une convivialité mobile bénéficient à la fois à l'accessibilité et au SEO. Les sites qui suivent les directives WCAG ont tendance à mieux se classer car ils offrent une expérience utilisateur fondamentalement meilleure. Pour les meilleures pratiques SEO, consultez notre liste de contrôle.
Les constructeurs de pages peuvent-ils créer des sites web accessibles ?
Elementor et d'autres constructeurs de pages peuvent créer un contenu accessible s'ils sont utilisés correctement. La clé est d'assurer une hiérarchie de titres appropriée, d'ajouter du texte alternatif aux images, d'utiliser des widgets sémantiques (boutons au lieu de divs stylisés) et de tester la navigation au clavier. Le constructeur lui-même ne détermine pas l'accessibilité, mais la façon dont vous l'utilisez le fait.
Quelle est l'erreur d'accessibilité la plus courante sur les sites WordPress ?
Le texte alternatif manquant ou inadéquat sur les images est la violation WCAG la plus fréquemment signalée. La deuxième erreur la plus courante est le contraste de couleur insuffisant. Les deux sont faciles à corriger ; elles nécessitent de l'attention et une pratique constante plutôt que des compétences techniques.
Comment rendre WooCommerce accessible ?
Les modèles par défaut de WooCommerce ont une accessibilité raisonnable. Les domaines clés à vérifier : texte alternatif des images de produits, étiquettes de formulaire sur les champs de paiement, navigabilité au clavier du panier et du processus de paiement, et messages d'erreur accessibles pour les échecs de validation de formulaire. Utiliser un thème accessible comme base réduit considérablement le travail spécifique à WooCommerce nécessaire.
Construire des sites WordPress accessibles
Commencez avec une base de thème accessible. Parcourez des thèmes légers et bien codés qui priorisent le HTML sémantique et la conformité aux WCAG.
Parcourir les thèmes accessibles →
