En savoir plus sur l'accessibilité des sites Web WordPress • WPShout

Vous avez donc lu le post d'Eric Karkovack sur l'accessibilité de WordPress, et maintenant vous voulez rendre accessibles les futurs sites sur lesquels vous travaillez. Génial!

Le projet WordPress s'engage sur l'accessibilité dans Core.

Les normes de codage d'accessibilité s'engagent à:

Tout code nouveau ou mis à jour publié dans WordPress doit être conforme aux directives WCAG 2.0 au niveau AA.

Comment accessible un WordPress site Cela dépend de trois facteurs:

1. Thème
2. Plugins
3. Contenu

Les concepteurs, les développeurs et les propriétaires de sites influencent tous l'accessibilité du produit final.

Les développeurs ont un rôle particulièrement important à jouer dans le mix d'accessibilité. Le code inaccessible est généralement invisible pour l'utilisateur moyen. Ses défauts peuvent ne pas être découverts tant que quelqu'un ne se plaint pas de ne pas voir ou faire quelque chose sur le site Web.

Que peuvent faire les développeurs WordPress pour rendre les sites qu'ils créent plus accessibles?

La meilleure approche consiste à développer dès le départ l'accessibilité. Résoudre les problèmes d'accessibilité après le lancement d'un site est toujours plus long et coûteux à faire (mais parfois vous n'avez pas le choix).

1. Choisissez un thème prêt pour l'accessibilité

L'utilisation d'un thème prêt pour l'accessibilité est une bonne base pour un site accessible. Un thème étiqueté prêt à l'accessibilité a passé l'examen du thème de WordPress.org et dispose d'un certain nombre de fonctionnalités accessibles supplémentaires intégrées.

Tous les thèmes par défaut de WordPress.org sont prêts pour l'accessibilité, y compris le thème Twenty Twenty nouvellement publié et acclamé.

Il n'y a qu'un petit nombre d'autres thèmes disponibles qui ont la balise de thème prête à l'accessibilité sur WordPress.org. Quelques autres sont disponibles dans le commerce, comme certains des thèmes enfant Genesis Framework.

Alternativement, vous pouvez créer votre propre thème. Il y a un excellent guide de l'équipe Make WordPress Accessible sur la façon de préparer un thème accessible.

2. Choisissez des plugins qui sont codés pour produire du contenu accessible

La plupart d'entre nous recherchent un plugin pour toute fonctionnalité qui n'est pas dans WordPress Core. Malheureusement, il n'y a pas d'équivalent prêt à l'accessibilité pour les plugins. Donc, trouver ceux qui n'entraînent pas de problèmes d'accessibilité est souvent un cas d'essais et d'erreurs.

Ne comptez pas sur les plugins qui remédient à l'accessibilité pour corriger tous les maux. Comme Eric l'a souligné dans son article, le plugin WP Accessibility peut résoudre certains problèmes d'accessibilité, mais ce n'est pas une panacée. La même chose s'applique à de nombreux autres plugins liés à l'accessibilité sur WordPress.org.

Si vous développez des plugins qui créent du contenu frontal, pourquoi ne pas en rendre accessibles? Cela bénéficiera à la fois à vos projets et aux autres.

3. Éduquer les clients à ajouter du contenu de manière accessible

Vous pouvez créer un site Web parfaitement accessible et lui faire passer tous vos tests avec brio. Ensuite, vous le remettez à un client, et quelques semaines plus tard, vous remarquez que l'accessibilité échoue…

Comme un site Web lui-même, l'accessibilité est une entreprise permanente. Pour obtenir les meilleurs résultats, vous devez travailler en tandem avec votre client, en lui enseignant les bonnes pratiques d'accessibilité et en soulignant les avantages de maintenir un site accessible.

Gagner avec WCAG

Le W3C est l'organisme de normalisation du World Wide Web et publie les directives pour l'accessibilité du contenu Web (WCAG), actuellement dans l'itération 2.1.

Les lignes directrices suivent 4 principes:

1. Perceptible
2. Opérable
3. Compréhensible
4. Robuste

Chaque ligne directrice a un niveau de priorité: A (doit faire), AA (devrait faire) et AAA (peut faire).

WCAG 2.1 AA est considéré comme le standard pragmatique et celui auquel la plupart des entreprises et organisations aspirent.

Pour un aperçu de WCAG 2.1, consultez:

Pour les débutants, les directives peuvent sembler écrasantes.

J'ai souligné ci-dessous quelques-uns des plus importants, ainsi que les personnes qu'ils aident et la manière dont ils se rapportent aux conditions préalables de l'examen des thèmes prêt pour l'accessibilité. De plus, j'ai énuméré quelques étapes pour une meilleure accessibilité que les développeurs et les créateurs de contenu peuvent prendre.

1. Décrire des images, des icônes, etc.

Qu'est-ce que cela signifie

Le contenu pictural doit avoir une alternative textuelle qui le décrit avec des mots, sauf lorsqu'il est décoratif (n'ajoute aucun sens supplémentaire).

Directive WCAG

1.1.1: Contenu non textuel (niveau A)

Qui cela aide

Utilisateurs aveugles et malvoyants.

Ce que les développeurs peuvent faire

Les exigences du thème prêt pour l'accessibilité spécifient les éléments suivants:

Inclure des images décoratives dans des thèmes ou des plugins via CSS

Vingt-dix-sept insère ses images de panneau de page d'accueil en tant qu'images d'arrière-plan, afin qu'elles n'aient pas besoin de texte alternatif.

Assurez-vous que toutes les images présentées dans les thèmes ont des attributs alt avec le texte approprié

Il peut s'agir d'un attribut alt nul alt = "" si l'image est là pour des raisons esthétiques.

Spécifications pour les icônes et les polices d'icônes

Lorsque vous utilisez des icônes ou des polices d'icônes, incluez texte de secours pour indiquer la signification de l'icône si l'icône est utilisée sans texte d'accompagnement. Si une icône contient un texte explicatif, masquez l'icône des lecteurs d'écran. Vous obtenez des points bonus pour l'utilisation de SVG de préférence aux polices d'icônes.

Dans le thème Twenty Twenty, le texte du menu et l'icône à trois points sont enveloppés dans un bouton bascule. Parce qu'il y a du texte visible, l'icône n'a pas besoin d'une description textuelle.

Le code est:

Menu

Voici deux autres attributs SVG notables:

• role = ”img”: indique à un lecteur d'écran qu'il s'agit d'un graphique
• aria-hidden = "true": indique à un lecteur d'écran d'ignorer cet élément

Le menu des liens sociaux dans Twenty Twenty utilise également des icônes SVG.

Voici le code d'un élément de menu Facebook:

Facebook

Cette fois, le nom de l'icône est placé dans un avec la classe écran-lecteur-texte. Ce texte n'est pas visible et n'est lu que sur les lecteurs d'écran.

Ce que les auteurs de contenu peuvent faire

Ajoutez un texte alternatif pour chaque image téléchargée sur le site, sauf si l'image est purement décorative.

Il y a un lien vers un arbre de décision alt dans l'éditeur qui est très pratique si vous ne savez pas quand utiliser un texte alternatif ou non.

2. Hiérarchie des informations

Qu'est-ce que cela signifie

Le contenu de la page doit circuler dans un ordre significatif.

Les titres et les étiquettes doivent être descriptifs.

Lignes directrices connexes des WCAG

1.3.1: Information et relations (niveau A)

2.4.6 En-têtes et étiquettes (niveau AA)

Qui cela aide

Tout le monde, mais en particulier les utilisateurs aveugles et malvoyants, car ils peuvent naviguer sur la page via des en-têtes dans un lecteur d'écran.

Le texte conçu pour ressembler à un en-tête n'a aucune signification sémantique pour un lecteur d'écran. Il ne peut donc pas être utilisé de la même manière.

Ce que les développeurs peuvent faire

Si vous créez votre propre thème prêt pour l'accessibilité, ajoutez-y des repères ARIA pour indiquer les différentes régions d'une page. Les utilisateurs de lecteurs d'écran peuvent les utiliser pour accéder à la zone souhaitée.

Vous trouverez plus d'informations sur l'utilisation des repères dans cet exemple de repères ARIA, ou vous pouvez étudier le code d'un thème comme Twenty Nineteen.

Le module complémentaire Firefox Repères affiche les repères de ce thème.

De plus, suivez le guide de Rian Rietveld pour baliser correctement les titres dans un thème.

Ce que les auteurs de contenu peuvent faire:

Utilisez des titres – pas seulement plus grands ou du texte!

Utilisez des en-têtes du niveau correct dans le contenu du message. Le titre du post sera toujours un titre 1. Les titres suivants devraient suivre dans l'ordre sans sauter de niveau.

Si vous utilisez l'éditeur de blocs, vous pouvez utiliser le bouton Structure de contenu pour vérifier la séquence des en-têtes que vous utilisez lors de la rédaction d'un article.

3. Couleur et contraste

Qu'est-ce que cela signifie

Si le contraste des couleurs entre le premier plan et l'arrière-plan d'une page Web est trop faible, certaines personnes ne pourront pas lire les mots de la page.

Attention également à utiliser la couleur comme seulement moyen de distinguer les informations. Ce qui ressemble à un lien vers une personne peut ne pas être visible pour une autre. C'est pourquoi le soulignement des liens est recommandé et constitue l'une des conditions requises pour créer un thème prêt pour l'accessibilité.

Lignes directrices connexes des WCAG

1.4.1 Utilisation de la couleur (niveau A)

1.4.3 Contraste (minimum) (niveau AA)

1.4.11 Contraste non textuel (niveau AA)

Qui cela aide

Les utilisateurs ayant une déficience visuelle ou un daltonisme, également les utilisateurs en plein soleil.

Ce que les développeurs peuvent faire

Mettre en œuvre des combinaisons de couleurs accessibles

Lors de la création d'un jeu de couleurs pour un site Web, assurez-vous que les couleurs de premier plan et d'arrière-plan répondent au niveau de contraste minimum requis. C'est un rapport de contraste de 4,5: 1 pour le texte standard et de 3: 1 pour le texte volumineux.

Si un site Web a déjà défini des couleurs de marque, vous pourrez peut-être marchander avec le concepteur pour utiliser une couleur problématique comme couleur d'accent.

Alternativement, vous pouvez accepter d'assombrir ou d'éclaircir légèrement une couleur pour respecter le contraste minimum.

Vous pouvez utiliser un outil comme Couleurs accessibles qui calculera le rapport de contraste entre deux couleurs. Si votre combinaison de couleurs ne réussit pas, elle suggérera des couleurs conformes alternatives.

Utilisez des icônes ainsi que la couleur pour indiquer des états comme le succès et l'échec

Ceci est probablement plus pertinent pour les plugins où une entrée utilisateur est requise.

Un exemple est la gestion des erreurs de Ninja Forms. Ils marquent les champs obligatoires qui sont incomplets lors de la soumission avec une bordure rouge, une icône de point d'exclamation et un message d'erreur:

Mettre en œuvre le lien souligne dans le contenu du corps

Tous les liens d'un thème n'ont pas besoin d'être soulignés. La convention est que les collections d'éléments de liste dans une barre de navigation ou une barre latérale sont supposées être des liens.

Cependant, avec le contenu des articles et des pages, c'est une autre histoire.

Dans la capture d'écran de démonstration du thème ci-dessous, la couleur du lien # 000000 est tellement similaire à la couleur du texte # 757575 qu'il est difficile de dire quels sont les liens. Ce n'est que lorsque vous les survolez ou vous concentrez sur eux que c'est clair.

Notez la différence que cela fait lorsque les liens sont soulignés:

Changer la couleur du lien aiderait à rendre les liens plus clairs, dans ce cas.

Le soulignement de lien est obligatoire pour réussir la vérification de thème prête à l'accessibilité:

Le soulignement est la seule méthode acceptée pour indiquer les liens dans le contenu. Le texte en gras, en italique ou différencié par couleur est ambigu et ne passera pas.

Ce que les auteurs de contenu peuvent faire

Regardez lorsque vous ajoutez du contenu où la signification est indiquée exclusivement par la couleur.

Regardez ce graphique circulaire, vu par une personne ayant une vision normale:

Avec la protanopie, une forme de daltonisme, il est plus difficile de distinguer certains segments:

La solution est lors de la création du graphique, étiquetez chaque segment avec le nom ainsi que la valeur.

4. Accessibilité du clavier

Qu'est-ce que cela signifie

Toutes les fonctionnalités de la page doivent être accessibles via le clavier.

L'ordre de mise au point doit être logique et un indicateur de mise au point doit être visible sur la page pour indiquer où se trouve un utilisateur du clavier à un moment donné.

Lignes directrices connexes des WCAG

2.1.1 Clavier (niveau A)

2.4.3 Ordre de mise au point (niveau A)

2.4.7 Mise au point visible (niveau AA)

Qui cela aide

Quiconque ne peut pas utiliser une souris, généralement les personnes ayant une déficience motrice qui affecte leur adhérence. Les personnes qui utilisent un lecteur d'écran pour lire la page dépendent des raccourcis clavier, ce qui leur profite également.

Les utilisateurs de clavier à vue utilisent généralement la touche Tab pour parcourir une page et la touche Entrée pour activer des boutons ou des liens. De plus, les boutons peuvent être activés par la barre d'espace.

Ce que les développeurs peuvent faire

Les éléments suivants sont tous requis pour un thème prêt pour l'accessibilité.

Menus déroulants accessibles au clavier

Assurez-vous que dans le thème que vous sélectionnez, les éléments des menus déroulants peuvent être vus et sélectionnés via le clavier.

Si un menu déroulant ne peut être utilisé qu'avec la souris et qu'il n'y a pas de navigation secondaire ou de plan du site, vous venez d'exclure certains de vos visiteurs d'une partie de votre site!

Si vous parcourez le site de Hodge Bank avec le clavier, vous verrez que vous pouvez parfaitement accéder à tous les éléments du menu déroulant.

Ignorer les liens

Ce sont des liens spéciaux qui ne sont visibles que lorsqu'ils sont concentrés sur l'utilisation du clavier. Ils profitent aux utilisateurs voyants du clavier en leur permettant de contourner les menus de navigation sur chaque page. (Les utilisateurs de lecteurs d'écran ont d'autres méthodes pour arriver rapidement où ils le souhaitent.)

Le site de la City University de New York propose un lien de saut en haut à gauche de l'écran lorsque vous passez à travers, ce qui permet à l'utilisateur de parcourir les cinquante liens de menu. (Bien que je pense que le contraste du lien de saut pourrait être meilleur!)

Clavier visible mettant l'accent sur les liens, les boutons et les éléments de formulaire

Le Takoyaki de papa peut avoir une nourriture très délicieuse, mais il est difficile de voir quel élément de menu est sélectionné ici. Il n'y a pas de contour autour et il y a un subtil changement d'opacité.

L'utilisation d'un module complémentaire de navigateur qui ajoute un contour autour de l'élément focalisable actuel, c'est beaucoup plus clair.

Ce n'est pas le pire exemple que j'ai vu – certains sites Web n'ont aucun style de focus! Ce problème provient généralement d'une réinitialisation CSS, qui inclut généralement cette règle de style:

:concentrer 
contour: 0;

Le contour est généralement une ligne pointillée qui entoure les liens, les boutons et les entrées de formulaire lorsque quelqu'un utilise l'onglet pour naviguer. Le supprimer empêche les navigateurs d'afficher les contours à leur manière.

L’intention est que les développeurs définir leurs propres styles de focus. Mais souvent, ils ne le font pas.

Sans styles de mise au point clairs, c'est comme envoyer quelqu'un faire l'épicerie dans un magasin sans aucun signe dans les allées ou les étagères. Bien sûr, ils pourraient avoir de la chance et ramasser quelques articles qu'ils voulaient, mais ils sont beaucoup plus susceptibles d'abandonner et d'aller ailleurs.

Très souvent, vous pouvez utiliser le même style de mise au point qu'un style de survol. Pour les boutons, le style de survol est souvent l'inverse de l'état non pressé.

Mettre en œuvre un ordre de mise au point logique

Si l'ordre de mise au point ne correspond pas à l'ordre visuel sur la page, cela peut dérouter ou désorienter les utilisateurs.

Voici le site Unicef ​​UK:

L'ordre des premiers liens sur la page ressemble à ceci:

1. Logo
2. Notre travail
3. Soutenez-nous
4. Magasin
5. Contact
6. Chercher
7. Faire un don à l'Unicef

Mais l'ordre de tabulation est en fait le suivant:

1. Logo
2. Faire un don à l'Unicef
3. Invisible (va à la page des résultats de recherche)
4. Invisible (censé fermer le champ de recherche, mais ne fait rien s'il n'est pas visible)
5. Notre travail
6. Soutenez-nous
7. Magasin
8. Contact
9. Chercher

Cela se produit parce que le lien Donate est codé avant la navigation dans le HTML – et flottait à droite avec CSS. Je peux voir pourquoi l'équipe Web aurait voulu mettre l'accent sur le don en premier, mais ce n'est pas une bonne pratique.

Ce que les auteurs de contenu peuvent faire

Soyez prudent en utilisant des plugins qui génèrent des pop-ups ou des lightboxes. Certains d’entre eux ouvrent des fenêtres modales qui ne peuvent être fermées que si vous utilisez une souris.

5. Comportement des liens

Qu'est-ce que cela signifie

Les liens sont compréhensibles par tout le monde et cliquer sur l'un d'eux ne conduit pas à un comportement inattendu.

Lignes directrices connexes des WCAG

2.4.4 Objet du lien (en contexte) (niveau A)

2.4.9 Objectif du lien (lien uniquement) (niveau AAA)

3.2.5 Changement sur demande (niveau AAA)

Qui cela aide

Les personnes ayant une déficience visuelle comptent sur une description précise des liens. Si le texte du lien n'est pas clair, les utilisateurs ne leur rendront pas visite.

Ouvrir des liens dans de nouveaux onglets sans avertissement peut confondre les utilisateurs plus âgés ou ceux ayant une déficience cognitive, car ils ne peuvent pas utiliser le bouton Retour pour revenir. Donc, ne faites pas cela si possible.

Ce que les développeurs peuvent faire

Le thème AeonBlog suit les recommandations du thème prêt pour l'accessibilité. Il insère le titre du message dans une plage du lien Continuer la lecture avec le texte du lecteur d'écran de la classe. Cela ne change rien visuellement mais ajoute un contexte supplémentaire pour les utilisateurs de lecteurs d'écran.

Voici la partie pertinente du code, à partir du fichier template-parts / content.php d'AeonBlog:

Ce que les auteurs de contenu peuvent faire

Évitez d'utiliser un texte de lien tel que «cliquez ici» ou «plus» qui n'a aucun sens hors contexte.

Ne définissez pas les liens à ouvrir dans un nouvel onglet, sauf si vous en avertissez d'abord l'utilisateur dans le texte du lien.

Si un lien ouvre un fichier tel qu'un PDF, incluez-le dans le texte du lien. C'est encore mieux si vous mentionnez également la taille du fichier, car un utilisateur peut ne pas vouloir télécharger un fichier s'il est volumineux.

6. Aide à la saisie

Qu'est-ce que cela signifie

Dans tout type d'entrée utilisateur, assurez-vous que:

1. Les utilisateurs connaissent le nom et la fonction des commandes.
2. Les étiquettes des contrôles sont correctement associées.
3. Des messages d'erreur appropriés sont donnés pour permettre aux utilisateurs de corriger leurs erreurs.

Lignes directrices connexes des WCAG

3.3.2 Identification des erreurs (niveau A)

3.3.2 Étiquettes ou instructions (niveau A)

4.1.2 Nom, rôle, valeur (niveau A)

Qui cela aide

Cela profite à tout le monde. Les groupes les plus aidés sont les personnes malvoyantes et les personnes ayant des problèmes cognitifs, par ex. Perte de mémoire à court terme.

Ce que les développeurs peuvent faire

Utilisez des éléments HTML natifs et sémantiques de préférence aux éléments personnalisés

Ne réinventez pas la roue. Utilisez le élément pour boutons et élément pour les liens (pas

et , S'il vous plaît).

Les éléments natifs ont des comportements prévisibles. Les éléments personnalisés nécessitent davantage de codage pour qu'ils agissent de la même manière.

Il s'agit d'une exigence de thème prête pour l'accessibilité.

Utiliser des étiquettes visibles sur les formulaires

Dans ce formulaire de commentaire, des espaces réservés sont utilisés, pas des étiquettes. Le problème avec les espaces réservés est que dès que quelqu'un tape du texte dans le champ du formulaire, l'espace réservé disparaît – de sorte que le visiteur peut oublier les informations qu'il était censé remplir.

Le code est:

Comparez avec le formulaire de commentaires sur le thème Twenty Twenty, qui est prêt pour l'accessibilité:

Le formulaire de commentaire de Twenty Twenty comporte des étiquettes visibles, il n'y a donc aucun danger de disparition du texte. Il utilise également correctement les mêmes for et id d'auteur pour associer l'étiquette à l'entrée:

Nom *

Ce que les auteurs de contenu peuvent faire

Prenez soin de choisir des plugins qui capturent les entrées utilisateur ou qui ont des contrôles personnalisés. Idéalement, effectuez des tests utilisateur pour vous assurer qu'ils sont accessibles.

Lors de la création de formulaires avec des plugins, assurez-vous que les utilisateurs connaissent les champs de formulaire requis. Ne les faites pas deviner!

Emballer

Construire et maintenir un site WordPress accessible peut sembler être une grande montagne à gravir, mais une fois que vous absorbez les principes et les raisons, cela devient plus facile.

Si vous souhaitez plus de conseils et d'assistance, rejoignez l'équipe Make WordPress Accessible. Ils ont un groupe Slack avec une réunion hebdomadaire régulière. Vous trouverez un groupe de personnes dévouées et utiles qui partagent le même objectif de rendre WordPress et le Web plus accessibles.

[ad_2]

Partager :

• Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
• Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)