Lien d'évitement

Ajouter des liens d’évitement pour l’accessibilité

Cet article a été réactualisé il y a 1 an jours. Il n'est pas nécessairement obsolète, mais gardez son ancienneté en tête lors de sa lecture.

Quand on navigue au clavier, ou en lecture de page web, on est obligé de passer par tous les liens pour avancer dans la page. On peut proposer un confort de navigation à ce niveau là.

Le but ici est de diminuer les « passages » obligés comme passer les liens du menu principal afin d’aller directement au contenu de la page, c’est ce qu’on appelle des liens d’évitement.

Ajouter des liens d’évitement sur son site

Ces liens sont très simples à mettre en place. Il suffit de créer des ancres vers la partie que l’on souhaite viser.

Au niveau du template header.php,  je les ai ajoutés sous forme de liste vu que j’en crée deux.

PHP

Le style des liens en général

Quand un lien prend le focus dans une page, les navigateurs ajoutent par défaut un liseret autour du lien pour le différencier des autres, cela permet de visualiser où on se situe. Cet ajout de style sur les focus est absolument nécessaire, surtout lors d’une navigation au clavier. Pour des raisons de design, d’esthétique, certains le suppriment :

// A ne jamais faire !
:focus {
  outline: 0;
}

Le style par défaut peut effectivement ne pas convenir, de plus il diffère selon les navigateurs, dans ce cas, on peut le styliser à sa façon.

Styliser les liens d’évitement

Ici, pour les liens d’évitement, j’ai pris l’option de leur attribuer un style différent de ceux communs dans une page. J’ai réutilisé le style appliqué dans wp sur la classe .screen-reader-text.

J’ai fait le choix aussi qu’ils soient rendus visuellement uniquement si on utilise la tabulation pour naviguer. Ils sont audibles si on utilise NVDA, VoiceOver, …

CSS

Ajouter une aide d’accessibilité pour la navigation clavier

Ce script JS proposé par  David A. Kennedy voir lien Github : https://github.com/wpaccessibility/a11ythemepatterns/tree/master/skip-link est présent sur le Starter Thème Undescrores  « _s » auquel il contribue, et a été mis à jour depuis, c’est donc celui là que j’utilise : https://github.com/Automattic/_s/blob/master/js/skip-link-focus-fix.js

Si votre thème n’est pas basé sur _s ou un thème wordpress par défaut (les twenty) récupérez le !

Ajouter du visuel sur les transitions entre les liens en focus

Une amélioration visuelle pour les voyants qui naviguent au clavier trouvée sur Github : Flying Focus que j’ai ajoutée ici sur Pixi.

Ce script proposé par Nikita Vasilyev permet d’ajouter un effet de transition qui attire l’attention pour suivre les éléments en focus : Utiliser la ressource Flying Focus

Récupérer son code sur le lien Github fourni. L’ajouter ensuite via le functions.php