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

Vous souhaitez améliorer l’accessibilité de votre site WordPress ?

Lors de la Version d’un site web, l’accessibilité est souvent négligée, ce qui peut créer une mauvaise expérience utilisateur (UX). Idéalement, vous souhaitez que votre site WordPress soit simple/simple d’utilisation et inclusif pour tous les utilisateurs/utilisatrices, quels que soient leurs besoins.

Dans cet article, nous allons vous afficher comment améliorer l’accessibilité de votre site WordPress.

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

Dans le domaine de la conception de sites web, l’accessibilité fait référence aux techniques utilisées pour faciliter l’utilisation d’un site par les personnes handicapées. Certains internautes utilisent des technologies d’assistance pour naviguer sur le web, comme les lecteurs d’écran pour les personnes souffrant de déficiences visuelles et la navigation au clavier pour les personnes qui ne peuvent pas utiliser de souris.

Il existe certaines bonnes pratiques communes recommandées par les experts pour rendre les sites plus accessibles. Elles aident à rendre les sites plus inclusifs et plus faciles à utiliser pour tout le monde, quelles que soient les capacités de chacun.

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

L’accessibilité est également importante pour l’optimisation pour les moteurs de recherche (SEO). Google accorde de l’importance aux sites qui sont conviviaux. En plus de rendre votre site plus responsive pour les appareils mobiles, vous pouvez également donner la priorité à l’inclusivité dans votre conception web pour améliorer le classement.

En outre, si vous êtes propriétaire d’un site commercial et que l’interface publique de votre site est inaccessible, vous risquez de subir 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 règles d’accessibilité. De plus, votre réputation pourrait être entachée, ce qui pourrait entraîner des pertes financières.

Comment WordPress rend-il mon site plus accessible ?

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

WordPress a également rendu obligatoire le respect de ses normes de codage en matière d’accessibilité pour tous les codes nouveaux et mis à jour dans WordPress. Cette mesure vise à garantir que les développeurs/développeuses WordPress respectent les meilleures pratiques en matière d’accessibilité lors de la création de thèmes et d’extensions.

À part cela, WordPress comprend des fonctionnalités qui permettent aux utilisateurs/utilisatrices handicapés de créer facilement leur propre site, comme le mode d’accessibilité pour l’ajout de widgets.

En savoir plus, nous vous recommandons de suivre l’évolution de l’identifié d’accessibilité sur la page Make WordPress Core pour plus d’informations.

Cela étant, WordPress n’est pas entièrement accessible dès sa sortie de l’emballage. En tant que propriétaire de site, il est important de prendre des mesures supplémentaires pour aider votre site à respecter les normes d’accessibilité.

Nous avons décomposé ce guide en quelques astuces faciles à mettre en œuvre pour améliorer l’accessibilité de votre site WordPress. Vous pouvez utiliser ces liens rapides pour naviguer vers une section spécifique :

1. Se familiariser avec les lignes directrices pour l’accessibilité des contenus web (WCAG)

Tout d’abord, nous vous recommandons de lire les lignes directrices pour l’accessibilité des contenus web (WCAG). Il s’agit des normes définies par l’initiative pour l’accessibilité du Web (WAI) du W3C pour permettre aux utilisateurs/utilisatrices de rendre leurs sites plus accessibles.

Pour commencer, vous pouvez consulter les mises à jour des WCAG 2.1 et WCAG 2.2. Si ces deux documents vous semblent trop longs à lire, n’hésitez pas à ajouter cette référence rapide à vos favoris.

2. Utiliser un thème WordPress adapté à l’accessibilité

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

L’utilisation d’un thème WordPress accessible ne signifie pas que votre site Web sera automatiquement conforme à tous les Prérequis en matière d’accessibilité, car vous devez encore procéder à quelques ajustements par vous-même. Cependant, il peut vous donner un coup de pouce pour rendre votre site plus accessible.

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

• Menus dans lesquels on peut naviguer à l’aide du seul clavier.
• Un bon contraste de couleurs qui rend le contenu lisible pour les utilisateurs/utilisatrices ayant des déficiences visuelles.
• HTML sémantiquement correct, qui aide les technologies d’assistance à comprendre le contenu et la structure d’une page web.

Si vous souhaitez aller plus loin, vous pouvez é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 encore plus facile à naviguer pour les technologies d’assistance.

La façon 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. Cliquez ensuite sur  » Ajouter un nouveau thème « .

À partir de là, sélectionnez « Filtre de fonctionnalité » et choisissez « Prêt pour l’accessibilité ».

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

Défilez ensuite vers le bas et cliquez sur « Appliquer les filtres ».

Vous verrez alors apparaître à l’écran des thèmes prêts pour l’accessibilité.

Pour plus de recommandations de thèmes, consultez nos choix d’experts des meilleurs thèmes WordPress.

3. Installer une extension WordPress pour l’accessibilité

Une extension d’accessibilité WordPress ajoute des fonctionnalités avant que les internautes handicapés puissent naviguer sur votre site.

Une extension WordPress que nous recommandons est WP Accessibility. Certaines des choses que cette extension peut faire incluent :

• Ajout d’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é de votre site afin de pouvoir les évaluer.

Tout d’abord, vous devez installer et activer l’extension sur WordPress.

Une fois activé, vous devez vous rendre dans Réglages  » WP Accessibility pour configurer l’extension.

Examinons chaque section de la page des Réglages.

Ajouter des liens Aller à/au

Dans la première section des Réglages du plugin, vous pouvez utiliser des liens Aller à/au sur votre site, et ce paramètre est activé par défaut. Un lien de saut permet aux utilisateurs/utilisatrices de passer directement à la section de contenu d’une publication ou d’une page.

Il s’agit d’une fonctionnalité extrêmement utile pour les personnes utilisant des lecteurs d’écran. Sans Aller à/au, ils devront écouter tout ce qui est affiché sur votre site, y compris vos menus de navigation, avant d’atteindre la partie du contenu.

Si votre thème utilise déjà des liens d’Aller à/au, vous verrez une notification le confirmant.

Barre d’outils d’accessibilité

L’extension WP Accessibility est livrée avec une barre d’outils d’accessibilité.

Lorsque vous l’activez, l’extension ajoute une barre d’outils sur votre site web où les utilisateurs/utilisatrices peuvent redimmensionner les polices ou voir votre site en mode de couleurs à contraste élevé.

Cela permet à vos utilisateurs/utilisatrices de sélectionner les options dont ils/elles ont besoin pour faciliter la lecture de la page.

Pour activer la barre d’outils, il suffit de cocher les cases « Taille de la police » et « Contraste ».

Des réglages permettent également de contrôler la taille et l’emplacement de la police de la barre d’outils.

Si vous apportez des modifications à ces réglages, n’oubliez pas de cliquer sur le bouton « Mettre à jour les réglages de la barre d’outils » pour stocker vos réglages.

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

Corrigés de l’accessibilité

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

Certains réglages 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 envoyez une entrée de recherche vide et retirent 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 le confirmant en haut de la section.

N’oubliez pas de cliquer sur le bouton « Mettre à jour les réglages divers » pour stocker vos modifications.

Fonctionnalités d’accessibilité

L’extension propose également quelques options pour aider à rendre votre contenu plus accessible.

Le premier groupe de réglages facilite la manipulation des images pour les utilisateurs de lecteurs d’écran.

Il existe également des options permettant d’afficher des résumés en haut de vos publications et de vos pages. Cela permet à ceux qui utilisent des lecteurs d’écran d’entendre un résumé du contenu avant de décider d’écouter l’article en entier.

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

Expérience en matière de tests et d’administration

Vous trouverez ensuite des Réglages qui vous permettront d’améliorer l’accessibilité de la zone d’administration de WordPress et vous aideront à effectuer des tests.

Cette section étant plus technique, veillez à consulter la documentation de l’extension avant de cocher les cases.

Confirmez-vous que vous avez cliqué sur le bouton « Mettre à jour les outils d’accessibilité » pour enregistrer vos modifications.

Retirer les attributs du titre

Cette section vous permet de retirer l’attribut title des nuages d’identifiants.

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

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

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

Le contraste des couleurs désigne la différence entre la couleur du texte et celle de l’arrière-plan. Il s’agit d’un élément très important de l’accessibilité des sites web, car il peut influer sur la lisibilité du contenu de votre site pour les personnes malvoyantes ou daltoniennes.

Pour répondre aux normes d’accessibilité du web, un texte normal doit présenter un contraste élevé d’au moins 4,5 pour 1, ce qui signifie que le texte doit être 4,5 fois plus lumineux que l’arrière-plan.

Pour les textes de grande taille, la règle est un peu moins stricte, avec un rapport de 3 à 1, ce qui signifie qu’un contraste légèrement inférieur est acceptable. La même règle s’applique aux graphiques et aux éléments de l’interface utilisateur, tels que les bordures des formulaires.

L’extension WP Accessibility dispose d’un vérificateur de contraste de couleurs intégré que vous pouvez utiliser.

Dans les Réglages de l’extension, il suffit de défiler jusqu’à la section Test de contraste des couleurs et de choisir une couleur de premier plan (la couleur que vous utiliserez pour votre texte) et sa couleur d’arrière-plan.

Cliquez ensuite sur « Vérifier le contraste des couleurs ».

L’extension vous indiquera alors si les couleurs passent ou non le test de contraste.

Voici le résultat :

Vous pouvez également utiliser le vérificateur de contraste gratuit de WebAIM. Comme pour l’outil précédent, vous devrez uniquement sélectionner une couleur de premier plan et une couleur d’arrière-plan.

Cet outil teste uniquement le contraste de vos couleurs, mais il vous affiche également l’aspect des couleurs du texte normal et du texte en gros caractères, ainsi que des objets graphiques et des composants de l’interface utilisateur.

Pour plus de détails, vous pouvez consulter notre guide sur la façon de choisir le jeu de couleurs parfait pour votre site WordPress.

5. Ajouter un texte alternatif aux images

Outre son utilité pour les moteurs de recherche, le texte alt est utile aux lecteurs d’écran pour décrire les images aux personnes souffrant de déficiences visuelles.

Nous avons mentionné précédemment que WordPress dispose d’une fonctionnalité avant d’ajouter du texte alt. Le processus est assez simple, et vous pouvez tout savoir sur la façon de le configurer dans les guides abonnés :

• Guide du débutant pour le SEO des images – Optimiser les images pour les moteurs de recherche
• Image Alt Text vs Image Title dans WordPress – Quelle est la différence ?

6. Ajouter des libellés à tous les champs du formulaire

Si votre site comporte des formulaires, vous devez veiller à utiliser les libellés appropriés pour chaque élément du formulaire. Il s’agit des champs de formulaire, des boutons, des menus, etc.

Les WCAG recommandent d’ajouter des libellés à tous les éléments du formulaire afin que les outils d’assistance puissent plus facilement les identifier et transmettre des informations sur chacun d’entre eux aux utilisateurs/utilisatrices.

Ajouté à cela, l’ajout de libellés clairs et descriptifs est une bonne pratique de conception web. En aidant les utilisateurs/utilisatrices à comprendre à quoi sert chaque champ du formulaire, les erreurs d’utilisation sont moins susceptibles de se produire et un plus grand nombre de personnes seront en mesure d’envoyer leur formulaire.

Si vous n’êtes pas sûr de savoir comment créer de superbes formulaires, alors nous vous recommandons de jeter un coup d’œil à WPForms. C’est le meilleur constructeur de formulaires WordPress qui rend super facile de personnaliser les formulaires à vos besoins exacts, y compris en les améliorant pour l’accessibilité.

Vous pouvez en savoir plus sur WPForms dans notre Avis sur WPForms. Consultez également ces guides sur la création de formulaires sur WordPress :

• Comment créer un formulaire de contact sur WordPress (étape par étape)
• Comment créer un formulaire de réservation dans WordPress
• Comment créer un formulaire d’inscription personnalisé pour les utilisateurs/clientes dans WordPress ?

7. Utiliser les bons titres identifiés dans votre contenu

Les balises Titre sont des balises HTML qui permettent d’identifier les titres ou sous-titres d’une page web. De cette manière, votre contenu est beaucoup plus organisé et plus facile à suivre.

Ces identifiants aident également les outils tels que les lecteurs d’écran à générer un plan navigable pour les utilisateurs/utilisatrices ayant des déficiences visuelles. Cela leur permet de passer d’une section à l’autre et de comprendre la structure globale de votre contenu.

Si vous ne savez pas comment tirer parti des identifiants de titre, vous pouvez lire notre guide sur l’utilisation correcte des identifiants de titre dans WordPress.

8. Utiliser un texte d’ancrage descriptif

Le texte d’ancrage ou texte de lien est essentiellement constitué de mots ou de phrases cliquables dans un lien. Vous pouvez généralement savoir quel texte est lié parce qu’il est d’une couleur différente.

Souvent, les blogueurs utilisent le texte du lien « cliquez ici » ou « en savoir plus » pour diriger les internautes vers une page.

Ce n’est pas une bonne pratique pour l’accessibilité car cela ne donne aucune information sur la destination du Link. Il est donc difficile pour les personnes utilisant des technologies d’assistance de comprendre l’objet du lien.

C’est pourquoi il est préférable d’utiliser un texte d’ancrage descriptif. Il s’agit d’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 découvrir les meilleurs services d’hébergement WordPress du marché « .

Au lieu d’ajouter le lien à  » Suivez ce guide  » ou n’importe où ailleurs dans cette phrase, vous devriez l’insérer dans « meilleurs services d’hébergement WordPress« . De cette manière, le compte obtient un aperçu de ce qu’il trouvera dans le contenu lié

En savoir plus sur les liens et le texte d’ancrage, consultez notre guide du débutant sur les liens dans WordPress.

9. Ajouter des sous-titres ou des transcriptions aux contenus vidéo et audio

L’une des principales difficultés rencontrées par les utilisateurs/utilisatrices souffrant d’un handicap auditif est l’incapacité à comprendre le contenu parlé des vidéos et des fichiers audio. C’est pourquoi de nombreux créateurs de contenu vidéo et podcasters ajoutent des sous-titres ou des transcriptions.

Chez WPBeginner, nous vous déconseillons fortement de téléverser des vidéos sur votre propre site, car elles peuvent ralentir votre site. Il est préférable d’utiliser des services tels que 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 pouvez envisager de faire appel à un service de transcription pour convertir facilement la parole en texte. Ainsi, 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 en savoir plus.

10. Effectuer des tests d’utilisabilité et d’accessibilité

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

Ces tests peuvent vous aider à identifier les problèmes restants et vous aider à rendre votre site simple/simple d’utilisation et accessible à tous.

WebAIM dispose d’un outil d’évaluation de l’accessibilité du Web (WAVE) que vous pouvez utiliser gratuitement.

Il suffit de saisir le nom de domaine de votre site pour que l’outil identifie pour vous les problèmes liés à l’accessibilité.

Vous pouvez également utiliser un scanner d’accessibilité. Nous vous recommandons de consulter Accessibility Checker d’Equalize Digital. Il est également livré avec une version d’extension gratuite pour scanner un nombre illimité de publications et de pages sur votre site.

Après avoir installé l’extension, il vous suffit de vous rendre dans les éditeurs/éditrices de blocs de votre page ou publication. Si vous défilez vers le bas jusqu’à la section Meta box, 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 pour voir s’il offre une bonne expérience utilisateur. Il vous suffit de vous rendre sur notre guide d’audit UX pour en savoir plus.

Dernier point, mais non des moindres, nous vous encourageons à demander le retour de vos utilisateurs/utilisatrices. Si les tests permettent d’obtenir des résultats, les commentaires des internautes qui utilisent les fonctionnalités d’accessibilité de votre site peuvent fournir des informations beaucoup plus précises.

UserFeedback est la meilleure extension pour ce travail. Il vous permet de créer des enquêtes pour recueillir les opinions et les pensées de vos utilisateurs/utilisatrices. Il existe également des modèles pour les retours sur la conception du site, de sorte que vous n’aurez pas à créer l’enquête à partir de zéro.

En savoir plus, il suffit de consulter notre guide sur la façon d’obtenir un retour sur la conception d’un site dans WordPress.

Guides d’experts sur l’accessibilité de WordPress

Maintenant que vous savez comment améliorer l’accessibilité de votre site, vous pouvez consulter d’autres guides liés aux problèmes d’accessibilité de WordPress :

• Comment ajouter des widgets WordPress en mode accessibilité
• Comment choisir un jeu de couleurs parfait pour votre site WordPress
• Comment ajouter un redimensionnement 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 du débutant)
• Image Alt Text vs Image Title dans WordPress – Quelle est la différence ?

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.