Comment améliorer l'accessibilité de votre site WordPress

Avez-vous déjà imaginé visiter un site web et constater que vous ne pouviez pas lire le texte, utiliser les menus, ou comprendre quoi que ce soit ? C'est difficile à croire, mais c'est la réalité pour de nombreuses personnes handicapées chaque jour.

Lorsque les gens créent des sites web, l'accessibilité est quelque chose qui est souvent négligé. Mais cela ne devrait pas l'être, car cela peut créer une barrière entre votre contenu et bon nombre de vos visiteurs. D'après notre expérience, lorsqu'un site web n'est pas accessible, il peut sembler très peu accueillant et même exclusif.

S'assurer que votre site est accessible ne consiste pas seulement à suivre les règles, il s'agit aussi de s'assurer que tout le monde a une excellente expérience sur votre site. Il s'agit d'être inclusif et de fournir une expérience utilisateur exceptionnelle à tous vos visiteurs, quelles que soient leurs besoins ou leurs capacités.

Donc, si vous êtes prêt à rendre votre site web accueillant pour tous, nous allons vous montrer comment améliorer l'accessibilité de votre site WordPress étape par étape.

Pourquoi l'accessibilité est-elle importante pour mon site WordPress ?

Dans la conception web, l'accessibilité fait référence aux techniques utilisées pour rendre un site web plus facile à utiliser pour les personnes handicapées. Certains visiteurs utilisent des technologies d'assistance pour naviguer sur le web, comme les lecteurs d'écran pour les personnes malvoyantes et la navigation au clavier pour ceux qui ne peuvent pas utiliser de souris.

Il existe des bonnes pratiques courantes recommandées par les experts pour rendre les sites web plus accessibles. Elles contribuent à rendre les sites plus inclusifs et plus conviviaux pour tous, quelle que soit leur capacité.

En donnant la priorité à l'accessibilité, davantage de personnes pourront naviguer sur votre site web WordPress et explorer votre contenu. Si vous gérez une boutique en ligne, vous augmenterez également vos chances de convertir les utilisateurs en clients.

L'accessibilité est également importante pour l'optimisation pour les moteurs de recherche (SEO). Google valorise les sites web offrant une bonne convivialité. En plus de rendre votre site web plus réactif pour les appareils mobiles, vous pouvez également donner la priorité à l'inclusivité dans la conception de votre site web pour améliorer votre classement.

De plus, si vous êtes propriétaire d'un site web d'entreprise et que la partie visible de votre site est inaccessible, vous pourriez faire face à des conséquences juridiques.

L'Americans with Disabilities Act (ADA) stipule que les consommateurs peuvent déposer une plainte si un site ne respecte pas les directives d'accessibilité. De plus, votre réputation pourrait être ruinée, ce qui pourrait entraîner des pertes financières.

Comment WordPress rend-il mon site web plus accessible ?

WordPress dispose de plusieurs fonctionnalités intégrées pour aider les utilisateurs à rendre leurs sites Web WordPress accessibles. Par exemple, par défaut, vous pouvez ajouter du texte alternatif (texte alt) et des attributs de titre aux images afin que les lecteurs d'écran puissent les lire à voix haute pour les utilisateurs malvoyants.

WordPress a également rendu obligatoire que tout nouveau code ou code mis à jour dans WordPress suive ses normes de codage d'accessibilité. Ceci afin de garantir que les développeurs WordPress respectent les meilleures pratiques en matière d'accessibilité lors de la création de thèmes et de plugins.

Par ailleurs, WordPress inclut des fonctionnalités qui permettent aux utilisateurs handicapés de créer facilement leurs propres sites Web, comme le mode d'accessibilité pour l'ajout de widgets.

Pour plus d'informations, nous vous recommandons de suivre la balise Accessibilité sur la page Make WordPress Core pour plus d'informations.

Avec tout cela à l'esprit, WordPress n'est pas entièrement accessible dès l'installation. En tant que propriétaire de site web, il est important de prendre des mesures supplémentaires pour aider votre site à respecter les normes d'accessibilité.

Nous avons divisé ce guide en quelques conseils simples pour améliorer l'accessibilité de votre site WordPress. Vous pouvez utiliser ces liens rapides pour naviguer vers une section spécifique :

1. Familiarisez-vous avec les Web Content Accessibility Guidelines (WCAG)
2. Utilisez un thème WordPress prêt pour l'accessibilité
3. Installez un plugin d'accessibilité WordPress
4. Vérifiez le contraste des couleurs de votre site web
5. Ajoutez du texte alternatif et des attributs de titre aux images
6. Ajoutez des étiquettes à tous les champs de formulaire
7. Utilisez des balises de titre appropriées dans votre contenu
8. Utilisez un texte d'ancrage descriptif
9. Ajoutez des légendes ou des transcriptions au contenu vidéo et audio
10. Effectuez des tests d'utilisabilité et d'accessibilité
11. Guides d'experts sur l'accessibilité WordPress

1. Familiarisez-vous avec les Web Content Accessibility Guidelines (WCAG)

Tout d'abord, nous vous recommandons de lire les Web Content Accessibility Guidelines (WCAG). Ce sont les normes définies par la W3C Web Accessibility Initiative (WAI) pour que les utilisateurs rendent leurs sites web plus accessibles.

Vous pouvez consulter les mises à jour WCAG 2.1 et WCAG 2.2 pour commencer. Si les deux documents vous semblent trop longs à lire, n'hésitez pas à mettre en favori cette référence rapide à la place.

2. Utilisez un thème WordPress prêt pour l'accessibilité

Les thèmes prêts pour l'accessibilité ont respecté les normes d'accessibilité minimales définies par l'équipe de révision des thèmes WordPress.

L'utilisation d'un thème WordPress accessible ne signifie pas que votre site web sera automatiquement conforme à toutes les exigences d'accessibilité, car vous devrez toujours apporter quelques ajustements vous-même. Cependant, cela peut vous donner un coup de pouce pour rendre votre site web plus accessible.

Au minimum, un thème prêt pour l'accessibilité aura :

• Des menus qui peuvent être navigués uniquement au clavier.
• Un bon contraste de couleurs qui rend le contenu lisible pour les utilisateurs malvoyants.
• Un HTML sémantiquement correct, ce qui aide les technologies d'assistance à comprendre le contenu et la structure d'une page web.

Si vous souhaitez aller plus loin, vous voudrez peut-être également vérifier si le thème contient des attributs ARIA. Ces attributs sont comme des informations supplémentaires qui complètent le HTML de votre thème pour rendre un site web encore plus facile à naviguer pour les technologies d'assistance.

La manière la plus simple de rechercher un thème prêt pour l'accessibilité est d'aller dans Apparence » Thèmes sur votre tableau de bord WordPress. Ensuite, cliquez sur « Ajouter un nouveau thème ».

À partir d'ici, sélectionnez « Filtre de fonctionnalités » et choisissez « Accessibilité prête ».

N'hésitez pas à ajouter d'autres filtres pour trouver le thème qui correspond exactement à vos besoins.

Faites maintenant défiler vers le bas et cliquez sur « Appliquer les filtres ».

Vous verrez alors des thèmes prêts pour l'accessibilité à l'écran.

Pour plus de recommandations de thèmes, consultez notre sélection d'experts des meilleurs thèmes WordPress.

3. Installer un plugin d'accessibilité WordPress

Un plugin d'accessibilité WordPress ajoute des fonctionnalités utiles pour les visiteurs handicapés afin de naviguer sur votre site web.

Un plugin d'accessibilité WordPress que nous recommandons est WP Accessibility. Voici quelques-unes des choses que ce plugin peut faire :

• Ajouter une barre d'outils d'accessibilité
• Détecter si votre thème est prêt pour l'accessibilité
• Suivre l'utilisation des fonctionnalités d'accessibilité sur votre site web afin de pouvoir les évaluer

Tout d'abord, vous devez installer et activer le plugin sur WordPress.

Après l'activation, vous devez aller dans Réglages » WP Accessibility pour configurer le plugin.

Examinons chaque section de la page des réglages.

Ajouter des liens de saut

Dans la première section des réglages du plugin, vous pouvez utiliser des liens de saut sur votre site web, et ce réglage est activé par défaut. Un lien de saut permet aux utilisateurs de sauter directement à la section de contenu d'un article ou d'une page.

C'est une fonctionnalité extrêmement utile pour les personnes utilisant des lecteurs d'écran. Sans lien de saut, elles devront écouter tout ce qui est affiché sur votre site web, y compris vos menus de navigation, avant d'atteindre la partie contenu.

Si votre thème utilise déjà des liens de saut, vous verrez une notification le confirmant.

Barre d'outils d'accessibilité

Le plugin WP Accessibility est livré avec une barre d'outils d'accessibilité.

Lorsque vous l'activez, le plugin ajoutera une barre d'outils sur votre site web où les utilisateurs peuvent redimensionner les polices ou afficher votre site en mode couleur à contraste élevé.

Cela permet à vos utilisateurs de sélectionner les options dont ils ont besoin pour rendre la page plus facile à lire.

Pour activer la barre d'outils, cochez simplement les cases « Taille de la police » et « Contraste ».

Il existe également des paramètres où vous pouvez contrôler la taille de la police et le placement de la barre d'outils.

Si vous apportez des modifications à ces paramètres, assurez-vous de cliquer sur le bouton « Mettre à jour les paramètres de la barre d'outils » pour enregistrer vos paramètres.

Voici à quoi ressemble la barre d'outils sur notre site web de test.

Corrections d'accessibilité

WP Accessibility fournit également plusieurs corrections d'accessibilité qui pourraient résoudre des problèmes potentiels sur votre site. Vous pouvez examiner chaque option et voir si vous en avez besoin.

Certains paramètres recommandés seront cochés par défaut. Ces options empêchent les liens de s'ouvrir dans de nouvelles fenêtres, affichent une erreur lorsque vous soumettez une recherche vide et suppriment l'attribut HTML tabindex lorsqu'il n'est pas nécessaire pour simplifier la navigation au clavier.

Si vous utilisez un thème adapté à l'accessibilité qui a déjà activé certaines de ces fonctionnalités, vous verrez un message confirmant cela en haut de la section.

N'oubliez pas de cliquer sur le bouton « Mettre à jour les paramètres divers » pour enregistrer vos modifications.

Fonctionnalités d'accessibilité

Le plugin fournit également quelques options pour aider à rendre votre contenu plus accessible.

Le premier groupe de paramètres rend les images plus faciles à gérer pour les utilisateurs de lecteurs d'écran.

Il existe également des options pour afficher des résumés en haut de vos articles et pages. Cela permet aux utilisateurs de lecteurs d'écran d'entendre un résumé du contenu avant de décider d'écouter l'article entier.

Si vous modifiez l'une de ces options, n'oubliez pas de cliquer sur le bouton « Mettre à jour les fonctionnalités d'accessibilité ».

Expérience de test et d'administration

Ensuite, vous trouverez des paramètres qui vous permettront d'améliorer l'accessibilité de votre zone d'administration WordPress et d'aider aux tests.

Cette section est plus technique, assurez-vous donc de consulter la documentation du plugin avant de cocher les cases.

Assurez-vous de cliquer sur le bouton « Mettre à jour les outils d'accessibilité » pour enregistrer vos modifications.

Supprimer les attributs de titre

Cette section vous permet de supprimer l'attribut de titre des nuages de tags.

L'attribut de titre est considéré comme inutile par certains experts en accessibilité. La plupart des lecteurs d'écran ignorent généralement l'attribut de titre et lisent plutôt le texte d'ancrage.

Ce paramètre est activé par défaut, mais si vous le modifiez, assurez-vous de cliquer sur le bouton « Mettre à jour les paramètres des attributs de titre ».

4. Vérifiez le contraste des couleurs de votre site Web

Le contraste des couleurs signifie la différence entre la couleur du texte et la couleur d'arrière-plan. C'est une partie très importante de l'accessibilité du site Web car cela peut affecter la lisibilité du contenu de votre site Web pour les personnes malvoyantes et daltoniennes.

Pour répondre aux normes d'accessibilité Web, le texte normal doit avoir un contraste élevé d'au moins 4,5 pour 1. Cela signifie que le texte doit être 4,5 fois plus lumineux que l'arrière-plan.

Pour le texte plus grand, l'exigence est un peu moins élevée, à 3 pour 1. Cela signifie qu'un contraste légèrement plus faible est acceptable. La même règle s'applique aux graphiques et aux éléments de l'interface utilisateur, tels que les bordures des champs de formulaire.

Le plugin WP Accessibility dispose d'un vérificateur de contraste des couleurs intégré que vous pouvez utiliser.

Dans les paramètres du plugin, faites simplement défiler jusqu'à la section Testeur de contraste des couleurs et choisissez une couleur de premier plan (la couleur que vous utiliserez pour votre texte) et sa couleur d'arrière-plan.

Ensuite, cliquez sur « Vérifier le contraste des couleurs ».

Le plugin vous indiquera alors si les couleurs réussissent ou échouent au test de contraste.

Voici à quoi ressemble le résultat :

Alternativement, vous pouvez utiliser le contrasteur de couleurs WebAIM gratuit. Comme avec l'outil précédent, vous n'aurez qu'à sélectionner une couleur de premier plan et une couleur d'arrière-plan.

Cet outil ne teste pas seulement votre contraste de couleurs, mais vous montre également à quoi les couleurs peuvent ressembler en tant que texte normal et grand, ainsi que les objets graphiques et les composants de l'interface utilisateur.

Pour plus de détails, vous pourriez aimer consulter notre guide sur comment choisir le schéma de couleurs parfait pour votre site WordPress.

5. Ajouter du texte alternatif aux images

En plus d'être utile pour les moteurs de recherche, le texte alternatif aide les lecteurs d'écran à décrire les images aux personnes malvoyantes.

Auparavant, nous avons mentionné que WordPress dispose d'une fonctionnalité intégrée pour ajouter du texte alternatif. Le processus est assez simple, et vous pouvez tout lire sur sa configuration dans les guides suivants :

• Guide pour débutants sur le SEO des images – Optimisez les images pour les moteurs de recherche
• Texte alternatif d'image vs Titre d'image dans WordPress – Quelle est la différence ?

6. Ajouter des étiquettes à tous les champs de formulaire

Si vous avez des formulaires sur votre site web, vous voudrez vous assurer d'utiliser les étiquettes appropriées pour chaque élément du formulaire. Cela inclut les champs de formulaire, les boutons, les menus, etc.

Le WCAG recommande d'ajouter des étiquettes à tous les éléments de formulaire pour permettre aux outils d'assistance d'identifier et de transmettre plus facilement des informations sur chacun d'eux aux utilisateurs.

De plus, l'ajout d'étiquettes claires et descriptives est une bonne pratique de conception web. En aidant les utilisateurs à comprendre à quoi sert chaque champ de formulaire, les erreurs d'utilisation sont moins susceptibles de se produire, et plus de personnes pourront soumettre leurs formulaires.

Si vous n'êtes pas sûr de la manière de créer d'excellents formulaires, nous vous recommandons de consulter WPForms. C'est le meilleur créateur de formulaires WordPress qui permet de personnaliser très facilement les formulaires selon vos besoins exacts, y compris pour améliorer leur accessibilité.

Vous pouvez en savoir plus sur WPForms dans notre avis sur WPForms. Consultez également ces guides sur la manière de créer des formulaires dans WordPress :

• Comment créer un formulaire de contact dans WordPress (étape par étape)
• Comment créer un formulaire de réservation dans WordPress
• Comment créer un formulaire d'inscription utilisateur personnalisé dans WordPress

7. Utilisez des balises de titre appropriées dans votre contenu

Les balises de titre sont des balises HTML qui peuvent marquer les titres ou sous-titres d'une page Web. De cette façon, votre contenu est beaucoup plus organisé et plus facile à suivre.

Ces balises aident également les outils tels que les lecteurs d'écran à générer un plan de navigation pour les utilisateurs malvoyants. Cela leur permettra de passer d'une section à l'autre et de comprendre la structure générale de votre contenu.

Si vous n'êtes pas sûr de la manière de tirer parti des balises de titre, vous pouvez lire notre guide sur comment utiliser correctement les balises de titre dans WordPress.

8. Utilisez un texte d'ancre descriptif

Le texte d'ancre ou texte de lien est essentiellement les mots ou phrases cliquables dans un lien. Vous pouvez généralement savoir quel texte est lié car il sera d'une couleur différente.

Souvent, les blogueurs utiliseront le texte de lien « cliquez ici » ou « en savoir plus » pour diriger les visiteurs vers une page.

Ce n'est pas une bonne pratique pour l'accessibilité car cela ne donne aucune information sur la destination du lien. Cela rend difficile pour les personnes utilisant des technologies d'assistance de comprendre le but du lien.

C'est pourquoi il est préférable d'utiliser un texte d'ancre descriptif à la place. Cela signifie utiliser des mots qui décrivent le contenu lorsque vous cliquez sur le lien.

Par exemple, disons que vous souhaitez ajouter un lien vers un article sur le meilleur hébergement WordPress dans cette phrase : « Suivez ce guide pour en savoir plus sur les meilleurs services d’hébergement WordPress du marché ».

Au lieu d’ajouter le lien à « Suivez ce guide » ou ailleurs dans cette phrase, vous devriez l’insérer dans « meilleurs services d’hébergement WordPress ». De cette façon, l’utilisateur obtient un aperçu de ce qu’il trouvera dans le contenu lié.

Pour plus d’informations sur les liens et le texte d’ancrage, consultez notre guide pour débutants sur l’ajout de liens dans WordPress.

9. Ajoutez des légendes ou des transcriptions au contenu vidéo et audio

L’une des principales difficultés pour les utilisateurs malentendants est l’incapacité de comprendre le contenu parlé dans les vidéos et l’audio. C’est pourquoi de nombreux créateurs de contenu vidéo et podcasteurs ajoutent des légendes ou des transcriptions.

Chez WPBeginner, nous vous déconseillons fortement de télécharger des vidéos sur votre propre site Web car elles peuvent ralentir votre site. Il est plutôt préférable d’utiliser des services comme YouTube ou Vimeo, qui disposent tous deux d’outils intégrés pour ajouter des légendes.

En ce qui concerne le contenu audio, vous pourriez envisager d’utiliser un service de transcription pour convertir facilement la parole en texte. De cette façon, vous n’aurez pas besoin de créer manuellement une version écrite de votre contenu audio.

Consultez notre liste des meilleurs services de transcription pour plus d'informations.

10. Effectuez des tests d'utilisabilité et d'accessibilité

Si vous avez mis en œuvre tous les conseils de ce guide, la dernière étape consiste à effectuer des tests d'utilisabilité et d'accessibilité sur votre site Web WordPress.

Ces tests peuvent vous aider à identifier les problèmes restants et à rendre votre site Web convivial et accessible à tous.

WebAIM propose un outil d'évaluation de l'accessibilité Web (WAVE) que vous pouvez utiliser gratuitement.

Tapez simplement le nom de domaine de votre site Web, et l'outil identifiera tous les problèmes liés à l'accessibilité pour vous.

Vous pouvez également utiliser un scanner d'accessibilité. Nous vous recommandons de consulter Accessibility Checker by Equalize Digital. Il est également livré avec une version gratuite du plugin pour scanner un nombre illimité d'articles et de pages sur votre site Web.

Après avoir installé le plugin, vous pouvez simplement accéder à l'éditeur de blocs de votre page ou article. Si vous faites défiler jusqu'à la section des métadonnées, vous trouverez un vérificateur d'accessibilité qui identifie vos problèmes d'accessibilité.

Une autre option consiste à effectuer un audit UX, ce qui signifie essentiellement vérifier votre site Web pour voir s'il offre une bonne expérience utilisateur. Consultez notre guide d'audit UX pour plus d'informations.

Enfin, et surtout, nous vous encourageons à demander les commentaires de vos utilisateurs. Bien que les tests puissent vous donner des résultats, obtenir des commentaires de visiteurs réels qui utilisent les fonctionnalités d'accessibilité de votre site peut fournir des informations beaucoup plus précises.

UserFeedback est le meilleur plugin pour cette tâche. Il vous permet de créer des sondages pour recueillir les opinions et les réflexions de vos utilisateurs. Il existe également des modèles pour les commentaires sur la conception de sites Web, vous n'aurez donc pas à créer le sondage à partir de zéro.

Pour plus d'informations, consultez notre guide sur comment obtenir des commentaires sur la conception de sites Web dans WordPress.

Guides d'experts sur l'accessibilité WordPress

Maintenant que vous savez comment améliorer l'accessibilité de votre site, vous aimerez peut-être consulter d'autres guides liés aux problèmes d'accessibilité de WordPress :

• Comment ajouter des widgets WordPress en mode accessibilité
• Comment choisir une palette de couleurs parfaite pour votre site WordPress
• Comment ajouter un redimensionneur de police dans WordPress pour l'accessibilité
• Comment ajouter facilement un attribut de titre aux images dans WordPress
• Comment surligner du texte dans WordPress (Guide pour débutants)
• Texte alternatif d'image vs Titre d'image dans WordPress – Quelle est la différence ?

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.