Comment affiner votre site Web WordPress existant pour l'accessibilité • WPShout

By | décembre 17, 2019

trouver un expert WordPress

La création de sites Web accessibles à tous les utilisateurs est devenue un objectif majeur de notre industrie. Non seulement nous devons nous assurer que nos créations ont fière allure sur différents navigateurs et appareils, mais elles doivent également bien fonctionner avec des technologies d'assistance comme les lecteurs d'écran.

Ce n'est pas seulement un impératif moral, mais aussi de plus en plus juridique. Même dans les pays (comme les États-Unis) qui n'ont pas de règles concrètes pour l'accessibilité des sites Web, les entreprises peuvent toujours être jugées responsables de faux pas importants. Vous n'avez qu'à regarder jusqu'à l'étui Domino’s Pizza pour un exemple.

Idéalement, chaque site Web que nous construisons serait accessible dès le départ. Malheureusement, ce n'est pas toujours le cas. Les sites Web plus anciens peuvent souffrir de diverses lacunes dans ce domaine. Et, si une refonte n'est pas dans le budget, il peut sembler que vous êtes coincé avec ces problèmes.

Cependant, tout n'est pas perdu. Il existe un certain nombre de mesures que vous pouvez prendre pour rendre un site Web existant plus accessible. Dans cet esprit, voici quelques idées pour améliorer l'accessibilité de votre site Web WordPress.

Tout d'abord, effectuez un audit d'accessibilité

La première étape pour améliorer l'accessibilité sur votre site Web existant consiste à déterminer les problèmes auxquels vous devez faire face. Cela peut être accompli avec un audit de base.

Il existe plusieurs façons de mener un audit d'accessibilité et elles doivent être effectuées en tandem. Le premier consiste à utiliser un outil automatisé et le second est une approche plus manuelle. Jetons un regard plus profond.

Outils automatisés

Un certain nombre d'outils automatisés ont été développés pour analyser votre site Web afin de détecter d'éventuels problèmes d'accessibilité. Certains visent à être une suite globale, tandis que d'autres offrent plus de fonctionnalités de niche. Si vous souhaitez voir ce qui est disponible, le W3C a mis en place une longue liste d'options.

Pour nos besoins, l'outil gratuit d'accessibilité Web WAVE est un bon choix pour obtenir un aperçu de votre site. Il fournit un balisage interactif de votre site Web – avec une liste d'erreurs, d'avertissements et d'informations connexes. Encore mieux sont les extensions de navigateur gratuites pour Chrome et Firefox. Ils vous permettent de tester la page que vous visitez en un seul clic.

WAVE signalera des problèmes tels qu'un faible contraste des couleurs, un texte alternatif manquant sur les images et même des fonctionnalités redondantes qui peuvent rendre la navigation du lecteur d'écran plus difficile. Vous trouverez également un aperçu de la structure des pages et des libellés ARIA.

Une fois que vous aurez les résultats du test automatisé, vous aurez une liste d'éléments spécifiques à vérifier. Étant donné que WAVE est un outil visuel, il est assez facile de simplement cliquer sur les erreurs et les alertes qu'il a tracées sur votre écran. Cela peut vous fournir suffisamment d'informations sur l'opportunité de plonger plus profondément dans des indicateurs particuliers.

audit d'accessibilité wordpress

Il convient toutefois de noter que certains éléments signalés comme «Erreurs» ou «Alertes» ne sont pas nécessairement problématiques. Par exemple, le W3C indique que les images décoratives n'ont pas besoin de texte alternatif. Ainsi, bien que WAVE puisse crier à la faute sur n'importe quelle image avec un attribut alt vide, ce n'est pas toujours un motif d'alarme. La leçon ici est de prendre le rapport avec un grain de sel.

Mais, alors que les outils automatisés sont parfaits pour détecter les problèmes directement liés au code, qu'en est-il de certaines des lacunes de l'expérience utilisateur les plus difficiles à trouver?

Test manuel

Certains problèmes d'accessibilité sont mieux détectés en inspectant manuellement votre site Web. Parmi les éléments que vous souhaitez vérifier:

Navigation au clavier

Les fonctionnalités du site Web telles que les liens, les champs de formulaire et les boutons doivent être accessibles via un clavier. Pour tester, chargez une page dans votre navigateur Web et appuyez plusieurs fois sur la touche Tab. Vous devriez pouvoir parcourir les différents éléments de la page dans un ordre logique.

De plus, une pseudo-classe: focus doit être appliquée dans votre CSS pour aider les utilisateurs à identifier l'élément actuel dans l'index de l'onglet (comme souligné dans la capture d'écran améliorée ci-dessous). Autrement dit, si vous ne pouvez pas dire où vous êtes sur une page lorsque vous naviguez via le clavier, vos visiteurs ne le peuvent pas non plus.

audit du clavier d'accessibilité wordpress

Éléments intuitifs

Jetez un œil à votre site Web et portez une attention particulière aux éléments interactifs tels que les liens et les boutons. Sont-ils intuitifs? Leur objectif est-il clair pour l'utilisateur final?

Évitez d'utiliser des éléments qui dépendent uniquement de la couleur, de la forme ou d'une icône. Assurez-vous que chaque élément interactif est clairement marqué quant à ce qu'il fait. Le but ici est de supprimer les conjectures lors de l'exécution de diverses tâches afin que les utilisateurs puissent se déplacer plus facilement.

Typographie

La typographie est un vaste sujet, donc nous ne creuserons pas trop profondément. Mais il est important de revoir les choix de police, le dimensionnement et l'espacement de votre site Web. Vous devez vous assurer que votre texte est lisible et que les éléments tels que les en-têtes se distinguent facilement du reste du contenu de la page.

Bien sûr, il y a un certain nombre d'autres choses à rechercher. Consultez la Référence rapide du WGAC pour les éléments supplémentaires que vous souhaitez inspecter.

Résoudre les problèmes d'accessibilité du site Web WordPress

Savoir que votre site Web présente des lacunes en matière d'accessibilité est la moitié de la bataille. L'autre moitié met en œuvre des solutions.

Une grande partie de ce que vous trouvez grâce aux tests automatisés et manuels peut être corrigée en modifiant les styles de votre site. Selon votre thème, il peut être question de visiter un panneau de paramètres ou le personnalisateur WordPress pour changer des choses telles que la typographie et les couleurs.

Sinon, il vous faudra peut-être parcourir la feuille de style de votre thème et apporter manuellement les modifications nécessaires. C'est là que les outils d'inspection de votre navigateur peuvent être d'une grande aide pour déterminer exactement les styles à modifier.

styles de changement d'accessibilité wordpress

Quand les plugins se mettent en travers

Une chose très pratique qu'un outil d'inspection de navigateur peut vous aider est de déterminer si un bit particulier de HTML ou CSS provient de votre thème WordPress ou d'un plugin. Il suffit de regarder à droite du style en question pour voir d'où il provient.

Le processus d'ajustement des thèmes est assez simple. Les plugins, cependant, peuvent être un peu plus difficiles.

Si vous constatez qu'un plug-in que vous utilisez interfère avec l'accessibilité de votre site Web, vous avez quelques options. Vous pourriez:

  • Essayez de remplacer tout CSS gênant via la feuille de style de votre thème;
  • Utilisez des crochets ou des filtres WordPress pour modifier la sortie du plugin;
  • Contactez l'auteur et demandez-lui de corriger tout problème d'accessibilité;
  • Arrêtez d'utiliser le plugin;

Cette dernière option n'est pas idéale et n'est pas toujours facile à faire. Par conséquent, il est préférable d’épuiser d’abord toutes les autres voies.

Utilisez un plugin WordPress pour améliorer l'accessibilité du site Web

La communauté des développeurs WordPress cherche toujours à combler un besoin, et l'accessibilité ne fait pas exception. Un certain nombre de plugins ont été publiés qui peuvent vous aider à accomplir diverses tâches. Ici, nous allons nous concentrer sur un couteau virtuel suisse de fonctionnalités accessibles: WP Accessibility.

Le plugin peut vous aider à résoudre un certain nombre de problèmes courants. Par exemple, il ajoutera un lien "sauter" (si votre thème n'en inclut pas), ce qui permet aux utilisateurs du clavier de contourner la navigation et d'accéder directement au contenu de la page. Vous trouverez également la possibilité d'ajouter des contours de focus aux liens et autres éléments, une longue balise de description pour les images, ainsi que la suppression d'éléments qui peuvent avoir un impact négatif (cibles de lien, attributs de titre sur les images, attributs tabindex, etc. ).

L'une des fonctionnalités les plus uniques de WP Accessibility est sa barre d'outils. Cet ensemble de boutons se fixera sur le côté de votre site Web (ou tout autre élément auquel vous l'assignez). Il permet aux utilisateurs d'augmenter la taille du texte et d'activer un jeu de couleurs sombres. Les administrateurs de site obtiennent également une vue en niveaux de gris facultative, que vous pouvez utiliser pour vous assurer que votre site ne dépend pas trop de la couleur seule.

changements css d'accessibilité de wordpress

Notez que la barre d'outils fait de son mieux pour s'adapter aux styles existants de votre site. Cependant, vous devrez peut-être encore modifier quelques éléments de votre thème pour la meilleure expérience possible.

Sont également inclus des outils pour tester les rapports de contraste des couleurs, appliquer des attributs alt aux images et un diagnostic CSS qui affichera les problèmes potentiels dans l'éditeur visuel ou sur le front-end de votre site Web.

WP Accessibility ne résoudra pas tous les problèmes. Mais cela peut aider dans les situations où vous devez apporter des améliorations rapidement. Et ce n'est pas la seule option. Jetez un œil à travers le référentiel de plugins WordPress pour plus de plugins d'accessibilité.

Il n'est jamais trop tard pour ajouter des fonctionnalités accessibles à votre site WordPress

Quel que soit son âge, tout site Web WordPress peut être rendu plus accessible. La bonne nouvelle est que, dans la plupart des cas, le processus ne doit pas être excessivement difficile ou coûteux.

Il existe un certain nombre d'outils qui peuvent vous aider à déterminer les problèmes potentiels. À partir de là, il s'agit d'examiner chaque élément de la liste et d'appliquer les correctifs nécessaires. Et, bien que certains problèmes d'accessibilité puissent être difficiles à corriger, pratiquement aucun n'est impossible.

Les problèmes structurels tels que ceux trouvés en CSS ou l'utilisation du HTML sémantique sont généralement simples à changer. Selon la taille de votre site et la composition de votre thème, vous pourrez peut-être supprimer ces correctifs dans un après-midi.

À l'autre extrémité du spectre, des éléments tels que la fourniture de transcriptions pour le contenu audio ou vidéo peuvent être plus lourds. Ils peuvent avoir besoin de l'aide d'un service extérieur, qui pourrait être un buster de budget.

Cependant, tout investissement visant à rendre votre site Web plus accessible doit être considéré comme judicieux. Cela aide non seulement à créer une meilleure relation avec les visiteurs, mais c'est aussi la bonne chose à faire.