Comment intégrer l'accessibilité Web dans votre site WordPress

Publié: 2020-02-15

WordPress est la plateforme de création de sites Web la plus populaire. Selon W3techs, 35,7 % de tous les sites Web utilisent WordPress, ce qui le porte à 62,5 % de la part de marché mondiale du système de gestion de contenu (CMS).

Lors de la création d'un site Web WP, cependant, l'accessibilité Web est probablement la dernière chose à laquelle vous pensez.

Mais, les normes de codage d'accessibilité de WordPress stipulent que « tout code nouveau ou mis à jour publié dans WordPress doit être conforme aux directives d'accessibilité du contenu Web 2.0 au niveau AA. ”

En d'autres termes, l'accessibilité est un facteur critique si vous avez un site Web WP.

Heureusement, rendre votre site Web WP accessible n'est pas impossible. Mais, avant de discuter de la façon de le faire, comprenons ce qu'est l'accessibilité Web.

A. Les quatre piliers de l'accessibilité du Web

Le World Wide Web Consortium (W3C), qui élabore des normes internationales pour le Web, a déjà défini les quatre principes d'accessibilité Web suivants :

Perceptible : Vous devez présenter toutes les informations et tous les éléments de votre site Web de manière à ce que tout le monde puisse les percevoir.
Opérable : Tous vos éléments navigables et interactifs doivent pouvoir être utilisés par différents utilisateurs.
Compréhensible : tout le monde doit être capable de comprendre les informations et l'interface utilisateur de votre site Web.
Robuste : différents types de technologies d'assistance et d'utilisateurs doivent pouvoir lire le contenu de votre site Web.

B. Meilleures pratiques d'accessibilité Web WordPress

En gardant à l'esprit les principes ci-dessus, vous pouvez suivre les étapes suivantes pour rendre votre site WordPress accessible aux personnes handicapées :

Améliorer l'accessibilité du texte

Tout le monde, y compris les malvoyants, devrait pouvoir lire le texte de votre site Web. Bien que vous puissiez utiliser des polices de grande taille par défaut, fournir du texte redimensionnable augmentera encore la lisibilité. Les utilisateurs malvoyants peuvent augmenter la taille de la police selon leur convenance en utilisant cette fonctionnalité.

Assurez-vous également d'ajouter des alternatives de texte telles que des balises Alt chaque fois que nécessaire. WP Accessibility est l'un des plugins d'accessibilité WordPress qui peut vous aider à ajouter du texte redimensionnable, un contraste de couleur, à ajouter des titres de publication pour lire plus de liens et à fournir un texte alternatif approprié.

Front et Back End structurés

Chacune de vos pages Web doit avoir un front et un back-end bien structurés. Cela augmente non seulement la lisibilité globale de votre contenu, mais permet également aux outils d'assistance de transmettre plus facilement le message aux utilisateurs handicapés. Vous pouvez utiliser des éléments HTML tels que des balises d'en-tête sémantiques et des méta-descriptions pour améliorer le back-end.

Assurez-vous d'utiliser des listes à puces, des paragraphes courts et un contenu bien organisé et précis qui devrait aider à améliorer le front-end. Vous devez également utiliser des titres et des titres appropriés pour définir les différentes sous-sections de contenu. Évitez d'utiliser des animations flashy et des GIF car ils ne sont pas adaptés à l'accessibilité.

Ajoutez également des liens de saut pour faciliter la navigation dans le contenu pour les utilisateurs de lecteurs d'écran. Cette fonction d'accessibilité simple permet aux utilisateurs de passer d'une section du contenu à l'autre sans avoir à passer par du matériel inutile.

Navigation au clavier pour une meilleure interaction

Vous devez également vous assurer que votre site Web est navigable au clavier. Il devrait inclure des liens et des menus, en particulier des menus déroulants. Tous les utilisateurs doivent pouvoir accéder à des éléments tels que des liens, des menus, des boutons et des formulaires à l'aide de Tab (en avant) et Maj+Tab (en arrière).

Vous devez également utiliser un indicateur de focus visible, qui montre aux utilisateurs handicapés où ils se trouvent sur une page Web. Les thèmes WordPress peuvent souvent réinitialiser le style de focus par défaut. Assurez-vous d'utiliser un thème WordPress qui ne réinitialise pas cette fonctionnalité. Le thème d'accessibilité Divi peut vous aider à configurer une navigation conviviale pour le clavier avec des menus déroulants accessibles et des contours visuels pour les éléments focalisables.

Ajouter des repères ARIA

ARIA signifie Accessible Rich Internet Applications. Avec un rôle de point de repère ARIA, vous pouvez définir différentes régions d'une page Web, permettant aux utilisateurs de technologies d'assistance de naviguer facilement sur votre site Web.

Les rôles de point de repère ARIA les plus courants incluent une bannière, un élément principal, un complément, des informations sur le contenu, une recherche et une navigation.

Bannière : définit l'en-tête du site, tel que le logo, le nom de l'entreprise ou le titre du site Web.
Principal : définit le contenu principal de la page Web.
Complémentaire : Détecte le contenu de support qui est une partie essentielle du contenu principal.
Informations sur le contenu : fournit des informations sur les documents parents, telles que les notes de bas de page, les droits d'auteur et les déclarations de confidentialité.
Recherche : Désigne le formulaire de recherche de votre site.
Navigation : marque les éléments de navigation d'une page Web.

Le meilleur avantage de l'utilisation des points de repère ARIA est qu'ils peuvent fonctionner avec des éléments HTML5 déjà sémantiques. Par conséquent, vous pouvez les utiliser avec des éléments HTML5 dans des thèmes WordPress existants.

Éléments interactifs : contraste des couleurs

Pour les éléments interactifs tels que les CTA et les formulaires, utilisez toujours des couleurs à contraste élevé comme arrière-plan du texte. Alors que WCAG 2.0 niveau AA nécessite un rapport de contraste d'au moins 4:5:1 pour le texte normal et 3:1 pour le texte de grande taille, le niveau AAA nécessite un rapport de contraste d'au moins 7:1 pour le texte normal et 4:5 : 1 pour les gros textes.

Habituellement, le texte noir sur fond blanc offre le meilleur contraste de couleur. Vous pouvez également utiliser du texte noir sur fond jaune et vice versa. Cependant, évitez les combinaisons telles que le texte vert sur fond rouge ou le texte rouge sur fond vert.

Mots d'adieu

L'accessibilité du site Web s'étend également à d'autres éléments interactifs, tels que le multimédia, sur votre site Web. Assurez-vous qu'aucun des éléments multimédias tels que la vidéo, l'audio, les curseurs ou les carrousels n'a l'option de lecture automatique par défaut, car il s'agit d'un obstacle important pour les utilisateurs handicapés. Au lieu de cela, tout le contenu multimédia ne devrait commencer à jouer qu'après l'interaction de l'utilisateur.

En plus des transcriptions vidéo, des descriptions audio et des sous-titres, assurez-vous d'utiliser des lecteurs multimédias accessibles. Vous pouvez utiliser un plugin comme Able Player, qui vous permet d'ajouter des vidéos et des audios inclus dans un lecteur multimédia accessible sur n'importe quelle page de votre site WordPress.

Rendre votre site Web WordPress accessible vous obligera à modifier son flux de conception et de développement et peut se faire via un processus manuel avec un conseiller. Une solution d'accessibilité Web automatique nécessite un petit investissement de temps et de ressources apportera de nombreux avantages, notamment une image de marque positive, une portée de marché plus large, un meilleur classement de recherche et, sans oublier, une augmentation des ventes.

Si vous avez encore des doutes sur la façon de rendre votre site WordPress accessible, n'hésitez pas à déposer vos questions dans les commentaires.