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 :
Menus
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.
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 ;
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.
