Chez Qode, nous apportons de la beauté à WordPress. C’est littéralement notre devise. Mais cela ne signifie pas que nous privilégions le style avant le fond. Concevoir pour l’accessibilité est une considération importante. Que votre contenu soit spécifiquement destiné aux personnes handicapées ou non, ménager une pensée pour les visiteurs aux capacités différentes qui pourraient néanmoins apprécier ce que vous avez à offrir ne peut jamais être une mauvaise chose. Dans cet article, nous discuterons de plusieurs choses que vous pouvez faire pour augmenter l’accessibilité de votre site WordPress. Mais avant d’en venir aux choses sérieuses, disons quelques mots sur la conception de l’accessibilité dans WordPress.
En général, l’accessibilité du Web signifie que les concepteurs de sites Web prennent des mesures pour s’assurer que personnes handicapées, qu’elles soient cognitives, visuelles, auditives, neurologiques ou autres, peut utiliser le site.
Concrètement, concevoir pour l’accessibilité signifie prendre en compte les visiteurs qui ont des handicaps qui pourraient les empêcher de profiter de toutes les fonctionnalités de votre site Web, au moins, ou même les empêcher d’accéder à votre contenu, au maximum. L’essentiel est que la conception accessible signifie être UX-forward pour les personnes handicapées.
Les meilleures pratiques en matière de conception incluent désormais plusieurs techniques qui vous permettent d’améliorer l’accessibilité et de rendre votre site Web WordPress plus facile à utiliser pour les personnes qui ne peuvent pas l’utiliser sans aide. Cela ne signifie pas que la conception pour l’accessibilité ne profitera qu’à vos visiteurs handicapés. Il peut également bénéficier aux personnes handicapées temporaires, comme ceux qui ont pu se casser un bras ou qui ont perdu temporairement la vision à cause d’une chirurgie oculaire, les personnes qui ont une connexion très lente ou les personnes qui préfèrent simplement leur texte sous forme audio.
Tout cela signifie que la conception accessible ne s’adresse pas à une minorité handicapée, mais offre plutôt une meilleure expérience utilisateur globale – et une augmentation potentielle de l’audience.
Vous pouvez tester l’accessibilité de vos pages Web à l’aide de l’un des plusieurs outils Web d’évaluation de l’accessibilité, tel que EAF, Achecker ou VAGUE. Parmi ceux-ci, nous avons trouvé que WAVE était le plus rapide et le plus convivial. Collez simplement l’adresse de la page Web dans le champ d’adresse et cliquez sur l’icône en forme de flèche pour obtenir le rapport.
Nous avons publié un rapport sur un article de l’édition internationale de The Guardian, et nous pouvons facilement voir quels domaines doivent être améliorés, car ils sont étiquetés avec des icônes. Pour obtenir un aperçu détaillé du problème, cliquez simplement sur l’icône et lisez l’info-bulle. C’est ainsi que vous saurez comment résoudre chaque problème.
Les développeurs de WAVE ont également fourni extensions pour Chrome et Firefox, que vous pouvez utiliser pour renvoyer un rapport d’accessibilité sans envoyer de données aux serveurs WAVE, ce qui le rend aussi sécurisé que possible.
Les développeurs WordPress ont mis en place normes d’accessibilité pour tout nouveau code et un les meilleures pratiques manuel pour les codeurs, avec des exemples de code. Mais vous n’avez pas besoin de savoir coder pour rendre votre site Web plus accessible.
En-têtes
Par exemple, une bonne structure de titre est très importante aux personnes utilisant des logiciels tels que des lecteurs d’écran. Faire du texte gros et gras ne fera pas comprendre au lecteur d’écran que le texte est un titre. Utiliser un Titre block dans Gutenberg, un élément Heading dans Elementor ou des balises de titre telles que
dans l’éditeur classique. Le Titre 1 est le titre principal de la page et ne doit pas être utilisé pour autre chose.
La structure interne du texte doit être subdivisée à l’aide des titres 2 à 6, sans sauter de niveaux. Vous devez également éviter d’ajouter des fonctionnalités supplémentaires aux rubriques, telles que des liens. Inversement, vous ne devriez pas utiliser des titres à des fins purement esthétiques. C’est à cela que servent la taille et le style de la police. Une bonne structure de titre n’aidera pas simplement les utilisateurs avec les lecteurs d’écran, cela signifiera également un meilleur score de référencement.
Liens
Lors de la création de liens, vous devez assurez-vous qu’il ressort clairement du contexte ce qui est et n’est pas un lien. Si un lien est entouré d’un autre texte, les meilleures pratiques signifient qu’il doit être souligné et dans une couleur différente.
Ajout d’attributs Alt aux images
L’ajout d’attributs alt aux images les rend « lisibles » pour les logiciels de lecture d’écran, et c’est très simple à faire. Tout ce que vous avez à faire est d’accéder à n’importe quelle image de votre médiathèque.
Dans le menu de droite, vous trouverez la zone de texte Alt. Il suffit de faire une description significative de l’image, qui dans notre cas est une photographie de paysage destinée à un but purement décoratif, et ne nécessite rien de plus qu’une simple description.
Une personne utilisant un lecteur de site Web aura désormais la description textuelle de l’image. Cette fonction de vos fichiers multimédias est quelque chose que vous ne devriez pas négliger – elle peut affecter votre score de référencement. Si vous voulez en savoir plus, nous avons tout un guide détaillé sur les titres de texte alternatif et d’image.
Certaines palettes de couleurs peuvent causer des problèmes aux utilisateurs souffrant de mauvaise vue, de daltonisme et de conditions similaires. En général, plus il y a de contraste, mieux c’est, même si trop de contraste peut causer des problèmes aux personnes ayant les yeux sensibles. Cela s’applique non seulement au texte et à l’arrière-plan, mais également aux éléments (tels que les boutons, icônes, menus et autres) et les effets de survol. Pour en savoir plus sur la modification des couleurs de texte dans WordPress, consultez notre guide détaillé.
Le rapport de contraste de luminosité de l’arrière-plan et du premier plan recommandé est de 4,5:1 pour le texte normal ou de 3:1 pour les grands. Il existe un grand nombre d’outils que vous pouvez utiliser pour vérifier vos taux de contraste, tels que le Vérificateur de contraste WebAIM. VAGUE, étant un outil complet, mettra également en évidence les problèmes de contraste dans la conception de votre site Web.
Les formulaires sont une partie importante de l’interaction Web. Il y a plusieurs choses que vous pouvez faire pour les rendre plus accessibles.
Premièrement, un bon étiquetage est important. Étiquetez tous vos champs correctement et clairement. Deuxièmement, utiliser un texte d’espace réservé – des exemples de texte que vos visiteurs doivent saisir dans des formulaires. Par exemple, si vous attendez une URL, utilisez quelque chose comme www.votresite.com pour un espace réservé. Finalement, un ensemble complet d’instructions sur la façon de remplir un formulaire pourrait être d’une grande aide pour les malvoyants.
Il n’est pas surprenant qu’il existe un certain nombre d’outils que vous pouvez utiliser pour vous aider à résoudre certains des problèmes courants rencontrés par les sites Web WordPress en matière d’accessibilité. Le plugin que nous avons trouvé potentiellement le plus utile est WP Accessibilité. Nous vous guiderons vers certaines de ses caractéristiques importantes.
Une fois que vous avez installé et activé le plugin, vous devez le configurer. Aller vers Paramètres d’accessibilité du Plugins installés écran sur votre tableau de bord.
Afin de rendre votre site Web plus accessible aux lecteurs du site Web, vous pouvez ajouter sauter des liens. Les liens sautés permettent aux lecteurs de se concentrer sur le contenu, plutôt que d’avoir à lire d’abord tous les menus et les données d’en-tête. La configuration de skiplinks demande un peu de connaissances en code, nous n’entrerons donc pas dans les détails ici. Il fournit à vos utilisateurs un bouton qu’ils peuvent utiliser pour ignorer le contenu inutile et aller directement au cœur du problème. Il vous suffit d’attribuer un attribut ID à l’endroit où vous souhaitez que le lien conduise votre visiteur.
Ensuite, il y a les Paramètres de la barre d’outils d’accessibilité. Si vous vérifiez Ajouter une barre d’outils d’accessibilité avec réglage de la taille de la police et basculement du contraste, votre utilisateur verra une barre d’outils sur le côté de son écran.
Ils peuvent l’utiliser pour afficher une version à contraste élevé de votre site Web…
…ou pour agrandir la police principale.
Nous n’entrerons pas dans les détails des paramètres de la barre d’outils, mais vous pouvez tester plusieurs options avant de les activer pour vos visiteurs.
Ensuite, vous avez le Paramètres divers section.
Vous pouvez parcourir chacun d’entre eux individuellement et voir ceux qui fonctionnent le mieux pour votre site Web. Par exemple, votre site Web peut utiliser un langage de texte RTL (de droite à gauche) – le plugin et le lecteur de site Web doivent le savoir. Vous voudrez peut-être que vos images aient des descriptions plus longues, et il existe également une option pour cela.
Trois de ces cases à cocher sont cochées par défaut : les liens ne portent aucun attribut cible, le site Web renvoie une erreur de recherche lorsque le champ de recherche ne contient pas de chaîne et tabindex est supprimé des éléments pouvant être focalisés.
Ensuite, vous avez le Supprimer les attributs de titre section. Cela sert à indiquer au lecteur du site Web que certains éléments de la mise en page ne sont pas des titres. Nous vous suggérons de parcourir cela et de supprimer l’attribut title de tout ce qui n’en a pas besoin.
Vous disposez également d’un outil pratique de contrôle du contraste. Choisissez simplement les couleurs que vous utilisez ou collez leurs codes hexadécimaux dans les champs appropriés, et vérifiez si vos rapports de contraste sont ceux dont vous avez besoin.
En conclusion
Comme nous l’avons montré, il y a beaucoup de choses que vous pouvez faire pour rendre votre site Web plus accessible. Évitez l’écueil de considérer le design accessible comme un simple hébergement pour une minorité. Sans oublier que certaines de ces techniques pourraient améliorer considérablement votre score de référencement. Pourquoi ne voudriez-vous pas en profiter ?
Soutenez notre effort ❤️
Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.
