< Retour au blog

Une extension pour améliorer l’accessibilité d’un site WordPress

Publié le

dans la catégorie

,

Cet article présente une de mes extensions, agrémentée au fil de projets, qui propose quelques corrections automatiques et réglages additionnels, afin d’améliorer l’accessibilité d’un site WordPress.

Ce n’est pas un outil magique qui fera le job à votre place pour que les contenus de votre site soient accessibles.

Certains éléments, comme le fait de pouvoir définir un attribut aria-label depuis l’interface d’édition, nécessitent forcément que les personnes amenées à l’utiliser soient formées. Dans le cas contraire, cela pourrait se montrer tout à fait contre productif.
Je publie un outil, à vous, qui l’utiliserez ou le proposerez à vos clients, d’en faire bon usage !
Si vous l’utilisez, vos retours et avis sont les bienvenus dans les commentaires.

Cette extension est disponible en téléchargement sur mon GitHub, et voici ce qu’elle fait :

Plusieurs petites choses sont ajoutées aux menus afin qu’ils soient structurellement plus accessibles :

  • Suppression du champ de menu « Attribut de titre », l’attribut title n’étant pas correctement retranscrit par tous les outils d’assistance ;
  • Ajout automatique d’un attribut aria-label aux liens qui s’ouvrent dans un nouvel onglet, composé de : « titre de la navigation (nouvel onglet) » ;
  • Remplacement automatique des liens vides (href="#") par des span ;
  • Ajout d’un champ Aria label (optionnel) aux éléments de menu ;

Éditeur de blocs

Général

Mise à disposition d’un nouveau type de format « Masqué visuellement » dans la barre d’outils des blocs, qui permet de masquer visuellement une partie d’un texte (avec la classe .screen-reader-text). Utile par exemple pour proposer un libellé de lien plus complet aux personnes utilisant un lecteur d’écran.

Capture d'écran d'un lien dont le libellé est "Voir la documentation", et qui se compose d'un ajout non visible à l'écran et donnant plus d'informations : "(nouvel onglet, PDF, 350Ko).

Bloc Bouton

  • Ajout automatique d’un attribut aria-label au lien du bouton s’il s’ouvre dans un nouvel onglet, composé de : « texte du bouton (nouvel onglet) » ;
  • Ajout d’un réglage Aria label (optionnel) dans la barre d’outils du bloc ;
Capture d'écran d'un bloc bouton ayant pour libellé seulement le texte "Twitter" et faisant un lien vers un profil Twitter. Le champ Aria label permet dans cet exemple de définir un libellé bien plus complet : "Visiter le profil de twitter de Marie Comet".

Bloc Image (contenant un lien)

  • Ajout automatique d’un attribut aria-label au lien de l’image s’il s’ouvre dans un nouvel onglet, composé de : « texte alternatif de l’image (nouvel onglet) » ;
  • Ajout d’un réglage Aria label (optionnel) dans la barre d’outils du bloc ;

Bloc Séparateur

Ajout d’un attribut aria-hidden="true" à l’élément <hr> du bloc séparateur, afin qu’il ne soit pas lu par les outils d’assistance.


J’essaierai de publier les ajouts et modifications faits à l’extension au fil du temps.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.