Le guide ultime de l’accessibilité et de WordPress


Vous souhaitez donc créer un site WordPress accessible? Félicitations – votre site sera accessible au public le plus large possible!

Vous ne savez pas pourquoi l’accessibilité est précieuse? Les sites accessibles ont des avantages, notamment une vitesse de chargement plus rapide, un meilleur référencement et un bon rapport qualité-prix. De plus, créer un site accessible est la bonne chose à faire.

15% de la population mondiale avoir un handicap. Penser à l’accessibilité n’est donc pas uniquement la responsabilité du webmaster. Tout le monde, des propriétaires de sites Web aux gestionnaires de projets numériques, aux concepteurs, aux éditeurs, aux rédacteurs de contenu et à toute autre personne impliquée dans le site Web devrait penser à l’accessibilité du Web.

Certains problèmes courants qui doivent être résolus lors de la création d’un site Web accessible comprennent la convivialité de l’écran de texte, y compris le texte alternatif approprié pour les images, la garantie d’un contraste de couleur optimal, l’ajout de sous-titres aux vidéos et la vérification de la navigation sur le clavier de votre site Web.

En poursuivant votre lecture, n’oubliez pas qu’il plus à l’accessibilité de WordPress qu’à la conformitéet les conseils suivants vous aideront à bien suivre votre chemin.

Thèmes WordPress prêts pour l’accessibilité

Un excellent point de départ pour les thèmes WordPress prêts pour l’accessibilité est le Répertoire des thèmes WordPress sur wordpress.org.

Capture d'écran du répertoire de thèmes WordPress sur WordPress.org
Répertoire des thèmes WordPress (WordPress.org)

Le répertoire de thèmes WordPress fournit un filtre de fonctionnalités qui permet aux utilisateurs de rechercher dans sa base de données de thèmes gratuits des thèmes prêts à l’accessibilité.

Répertoire de thèmes WordPress mettant en évidence l'option de filtre de fonctionnalité et de filtre prêt pour l'accessibilité.
Utilisez le filtre de fonctionnalités du répertoire de thèmes WordPress pour trouver des thèmes prêts pour l’accessibilité.

Une recherche de thèmes «Accessibility Ready» dans le répertoire de thèmes WordPress fait apparaître des dizaines de thèmes accessibles. Vous pouvez également utiliser le filtre de fonctionnalités pour rechercher des thèmes «Accessibility Ready» triés par mise en page, fonctionnalités ou sujet et affiner et affiner votre recherche à l’aide d’autres paramètres de filtre, ou en tapant des mots clés dans la barre de recherche, tels que «WCAG» .

Capture d'écran des résultats du répertoire de thèmes WordPress pour les thèmes WordPress prêts pour l'accessibilité.
Résultats du répertoire de thèmes WordPress pour les thèmes WordPress prêts pour l’accessibilité.

Pour que les thèmes WordPress soient inclus dans le répertoire des thèmes avec la balise «Accessibility Ready», le thème doit respecter plus d’une douzaine d’exigences d’accessibilité définies par le Équipe d’examen des thèmes WordPress.

Capture d'écran du thème WordPress du répertoire de thèmes WordPress avec balise d'accessibilité.
Les thèmes doivent répondre aux exigences d’accessibilité de WordPress Theme Directory pour utiliser la balise d’accessibilité.

Les directives d’accessibilité requises et recommandées incluent la navigation au clavier, les commandes, les liens de saut, les liens de contenu, les formulaires, les en-têtes, les contrastes, les images, les médias et le texte du lecteur d’écran (discutés plus loin ci-dessous).

Capture d'écran des exigences d'accessibilité du manuel de thème WordPress.
Exigences d’accessibilité du manuel de thème WordPress.

Les thèmes qui ne répondent pas aux critères de l’équipe d’examen des thèmes ne reçoivent pas la balise «accessibilité prête» dans le répertoire des thèmes WordPress.

Si vous choisissez d’utiliser des thèmes WordPress freemium, premium ou payants, assurez-vous que votre thème dispose de fonctionnalités d’accessibilité intégrées. Et si vous décidez de créer un site Web personnalisé pour votre entreprise ou organisation, consultez d’abord le développeur Web pour vous assurer que tout problème d’accessibilité est discuté et examiné avant de commencer votre projet. Un bon point de départ si vous construisez votre propre thème est le Souligne thème de démarrage, qui suit les normes du Web et a un certain nombre de fonctionnalités d’accessibilité intégrées.

Il est important de noter que bien que thèmes étiquetés comme étant accessibles à l’accessibilité sur WordPress.org ont non seulement respecté les directives habituelles d’examen des thèmes, mais également réussi des vérifications d’accessibilité supplémentaires, telles que Consignes d’accessibilité du contenu Web 2.0 (WCAG 2.0) niveau AA, l’utilisation d’un thème accessible ne vous dégage pas de la responsabilité de rendre votre contenu, la navigation sur le site et les autres zones de votre site accessibles.

Capture d'écran de l'avis d'accessibilité de l'équipe d'examen des thèmes WordPress.
Avis d’accessibilité de l’équipe d’examen des thèmes WordPress.

Comme l’a souligné l’équipe d’examen des thèmes dans le Accessibilité section de leur manuel,

“Les thèmes étiquetés comme prêts pour l’accessibilité ont respecté les directives requises énumérées ici et ne doivent pas être interprétés comme répondant à un quelconque niveau d’exigences formelles en matière d’accessibilité.”

Liste de contrôle des fonctionnalités d’accessibilité du thème WordPress

Alors, quelles fonctionnalités devrait avoir un bon thème WordPress prêt pour l’accessibilité?

Voici tout ce que nous allons couvrir. Cliquez sur le lien pour accéder à cette section spécifique.

Texte alternatif approprié pour les images
Liens et menus accessibles au clavier
Styles de mise au point visible
Contraste des couleurs
HTML natif pour les boutons et les liens
Ignorer les liens
Rubriques HTML sémantiques
Texte du lecteur d’écran
Aucun média de lecture automatique
Étiquettes de formulaire explicites
Rôles marquants de l’ARIA
Typographie claire
Choses non autorisées dans les thèmes d’accessibilité
Valeurs tabindex positives
Accesskeys
Ressources utiles et outils de test d’accessibilité

Texte alternatif approprié pour les images

Les lecteurs d’écran ont besoin d’un texte alternatif pour aider les malvoyants ou les utilisateurs ayant des troubles d’apprentissage à comprendre les images incluses dans le contenu.

Toutes les images en ligne incluses dans votre thème doivent avoir un texte alternatif. Cela comprend les images en vedette. Même si le code est présent pour afficher les attributs alt, cependant, un texte alternatif correctement conçu doit encore être entré pour ces images.

Les images d’arrière-plan ne nécessitent pas d’attribut alt. Des images purement décoratives comme des images d’arrière-plan et d’autres contenus non textuels doivent être ajoutées via CSS afin que les technologies d’assistance puissent les ignorer.

Texte alternatif: Oui

Le thème WordPress par défaut est livré avec des fonctionnalités prêtes à l’accessibilité intégrées.

dans le Vingt-dix-neuf thème, par exemple, lorsque vous spécifiez une page comme page d’accueil de votre site, WordPress crée automatiquement un texte alternatif en utilisant le titre de la page.

Capture d'écran du thème WordPress 2019 avec la balise alt Image sélectionnée en surbrillance.
Thème WordPress 2019 avec la balise alt Image en surbrillance mise en évidence.

dans le Vingt-dix-sept thème, le texte alternatif de l’image d’en-tête correspond au titre du site.

Le texte alternatif de l’image sélectionnée correspond à ce que l’utilisateur a entré.

Mise en œuvre du texte alternatif par vingt-dix-sept thèmes.
Mise en œuvre du texte alternatif par vingt-dix-sept thèmes.

S’il n’y a pas de texte alternatif présent, le texte alternatif par défaut est alt = “”. C’est en fait assez sensé, car un attribut alt vierge est meilleur qu’un texte alt non pertinent.

Pour en savoir plus sur l’utilisation des balises alt pour l’accessibilité, consultez notre guide complet sur la façon de créer des balises alt d’image parfaites pour l’accessibilité dans WordPress.

Certains utilisateurs à mobilité réduite ne peuvent pas utiliser de souris. Ils s’appuient sur le clavier (ou des périphériques de type clavier) pour naviguer dans les fonctionnalités interactives d’une page. La touche Tab est utilisée pour avancer dans les éléments., Et Maj + Tab pour revenir en arrière.

Vous devriez pouvoir accéder aux éléments suivants en tabulant sur la page:

  • Liens
  • Les menus
  • Boutons
  • Champs de formulaire

Souvent, avec les menus, les éléments de menu de niveau supérieur seront accessibles au clavier, mais pas les sous-menus déroulants!

Exemple: menus déroulants accessibles

Doucement Le thème implémente les menus déroulants de manière accessible, car ils peuvent être atteints par le clavier ou la souris.

Le thème délicat a un menu déroulant accessible au clavier montrant la mise au point du clavier.
Le thème délicat a un menu déroulant accessible au clavier montrant la mise au point du clavier.

Si vous créez votre propre thème, Underscores a des menus déroulants accessibles au clavier intégrés, ou vous pouvez essayer ce tutoriel: Création de menus déroulants accessibles.

Styles de mise au point visible (indicateurs de mise au point)

Les utilisateurs de clavier ont besoin de quelque chose de visuel pour leur montrer où ils se trouvent sur la page lors de la tabulation. S’il n’y a pas style de mise au point, il leur est difficile de dire avec quoi ils interagissent.

Essayez d’utiliser le clavier pour parcourir la page Web suivante que vous visitez.

Pouvez-vous dire quel lien est lequel?

Les thèmes réinitialisent souvent le style de mise au point par défaut. Vous le verrez souvent dans style.css des dossiers:

Malheureusement, ce code réduit l’accessibilité et les développeurs ne pensent souvent pas à définir leur propre style de focus.

Le style de mise au point peut inclure un arrière-plan de couleur – mais il doit également respecter les directives de contraste des couleurs.

Styles de mise au point visible: Oui

le manchot Le thème implémente les styles de focus de différentes manières, mais il est facile de savoir quel lien est le lien actuel.

Thème prêt pour l'accessibilité Pingouin montrant le style de mise au point du clavier postmeta blanc sur bleu.
Thème prêt pour l’accessibilité Pingouin montrant le style de mise au point du clavier postmeta blanc sur bleu.
Thème prêt pour l'accessibilité Pingouin avec un style de focus de clavier de lien montrant un contour.
Thème prêt pour l’accessibilité Pingouin avec un style de focus de clavier de lien montrant un contour.

Contraste des couleurs suffisant

Les personnes ayant une déficience visuelle peuvent avoir du mal à lire le texte sur un faible contraste Contexte. Même la lecture sur un ordinateur portable en plein soleil peut s’avérer difficile pour quelqu’un sans problèmes de vue.

La recommandation est la même que celle WCAG 2.0 niveau AA: un rapport de contraste de 4,5: 1 pour le texte normal et de 3: 1 pour le texte volumineux (défini comme 14 points (généralement 18,66 pixels) et gras ou plus grand, ou 18 points (généralement 24 pixels) ou plus), et un rapport de contraste d’au moins au moins 3: 1 pour les graphiques et les composants d’interface utilisateur (tels que les bordures d’entrée de formulaire). Le niveau AAA nécessite un rapport de contraste d’au moins 7: 1 pour le texte normal et de 4,5: 1 pour le texte volumineux.

Contraste des couleurs: Non

le Outil d’accessibilité Web WAVE WebAIM révèle que le thème ZBlackbeard a de nombreuses zones de faible contraste de couleurs.

Erreurs de contraste de couleur du thème ZBlackbeard surlignées en rouge par l'outil WAVE de WebAIM.
Erreurs de contraste de couleur du thème ZBlackbeard surlignées en rouge par l’outil WAVE de WebAIM.

Un balisage incorrect empêchera vos utilisateurs d’utiliser des contrôles personnalisés. Par exemple, un utilisateur peut ne pas être en mesure de tabuler ou d’appuyer sur un bouton personnalisé.

Si vous voulez que le bouton se comporte comme un bouton, le moyen le plus simple consiste à utiliser

Close Menu