Comment utiliser les liens de saut pour rendre votre site WordPress plus accessible

Dans notre série d'introduction à l'accessibilité, nous avons parlé de la base des diverses directives pour l'accessibilité des contenus Web (WCAG). Il est maintenant temps de passer à l'étape suivante en examinant certaines des principales directives et en vous montrant comment rendre votre site plus accessible. Commençons par les blocs de contournement, plus communément appelés liens de saut.

Qu'est-ce qu'un lien de saut ?

Un lien de saut est un lien spécial qui est caché sur votre site jusqu'à ce qu'il entre en :focus via la touche de tabulation ou un lecteur d'écran. Leur but est de donner aux utilisateurs de technologies alternatives (personnes utilisant des claviers et des lecteurs d'écran) la possibilité de sauter des blocs de contenu. En direct des normes :

"Un mécanisme est disponible pour contourner les blocs de contenu qui se répètent sur plusieurs pages Web." – Norme WCAG 2.4.1 – Blocages de contournement

2.4.1 est une norme de niveau A. Cela signifie qu'il est couvert par l'article 508 et requis par la loi. Vous devez avoir des liens de saut.

Pouvez-vous deviner à quoi s'applique le bloc de liens de saut de contenu le plus courant ? Si vous avez deviné "le menu", vous auriez raison. Les menus apparaissent sur à peu près toutes les pages d'un site. Les utilisateurs voyants et les utilisateurs de souris ont tendance à défiler juste à côté d'eux, car c'est l'un de ces éléments de site auxquels vous vous attendez à être là. Mais les menus de navigation ne sont pas les seuls blocs qui nécessitent des liens de saut.

Une zone souvent négligée pour les liens de saut est les barres latérales de gauche (ou les barres latérales de droite pour les sites dans des langues de droite à gauche comme l'arabe). En raison de l'endroit où ils ont tendance à tomber dans l'ordre sémantique, les utilisateurs auront besoin d'un moyen de sauter la barre latérale régulièrement répétée afin d'accéder directement au contenu.

Il en va de même pour les blocs de publications en vedette qui s'affichent en dehors de la page d'accueil. Certaines conceptions de sites comportent des sections de publication ou des curseurs en vedette sur les pages intérieures. À moins que le contenu de ces sections ne change, c'est-à-dire les pages de catégories ou d'archives, il devrait y avoir un lien de saut en place.

Comment ajoutez-vous des liens de saut ?

Maintenant que vous savez ce qu'est un lien de saut, il est temps de les ajouter à votre site. Il existe plusieurs façons de résoudre ce problème. Le moyen le plus simple (et pour vous non-codeurs, le seul moyen), est d'installer un plugin. Le plus difficile est de les coder vous-même dans votre thème.

Utiliser un plug-in

Un plugin que nous recommandons lorsqu'il s'agit de sauter des liens : WP Accessibility par Joe Dolson. Il résout plusieurs problèmes d'accessibilité, y compris l'ajout de liens de saut de base pour vous.

Codez-le vous-même

Votre autre option consiste à coder vous-même les liens de saut. Le code lui-même est assez simple et ne nécessite que quelques connaissances de base en HTML et CSS, mais vous devrez être à l'aise avec le fonctionnement des thèmes et des modèles WordPress avant d'essayer cette méthode. À partir de ce moment, nous supposerons que vous savez comment trouver les fichiers référencés et comment les modifier.

Nous commencerons par écrire les liens de saut réels en premier. Cela permettra un copier-coller facile dans les fichiers de modèle. Rappelant les connaissances HTML, vous devrez écrire une balise d'ancrage. Notez que le formatage ici est pour la lisibilité.

 <a href=”[don't fill this in yet]” class=”skip-link”> Skip to Main Content </a>

Nous avons volontairement laissé l'attribut href vide. C'est parce que nous devons définir où notre lien de saut sera lié. Pour cet exemple, nous utiliserons l'élément <main> comme cible. Comme nous ne pouvons pas créer de lien direct vers un élément sans ID, nous devons nous assurer que notre élément <main> en a un. Votre élément <main> se trouvera probablement dans header.php , mais pas toujours. Une fois que vous avez localisé l'élément, vous devez vous assurer qu'il a un ID. Si ce n'est pas le cas, ajoutez-en un comme ceci :

 <main id=”main-content”> [a bunch more code below]

La valeur spécifique de l'ID n'est pas importante, mais vous devrez vous en souvenir. Maintenant, vous voudrez mettre à jour votre code de lien de saut avec la valeur d'identification.

 <a href=”#main-content” class=”skip-link”> Skip to Main Content </a>

Maintenant que vous avez créé votre lien de saut, revenez à votre fichier header.php ou à l'endroit où se trouve la balise d'ouverture <body> de votre thème. La balise <body> est un emplacement essentiel pour les liens de saut car ils doivent être la première chose absolue qui entre en jeu :focus pour les utilisateurs de clavier et de lecteur d'écran.

Juste après la balise <body> , après votre code HTML terminé. Ce qui suit montre un exemple plus détaillé avec plusieurs liens de saut. Si vous souhaitez ajouter plusieurs liens vers votre site, assurez-vous que les identifiants sont correctement appliqués.

 <body> <a href=”#left-sidebar” class=”skip-link”>Skip to Sidebar</a> <a href=”#featured-posts-block” class=”skip-link”>Skip to Featured Posts</a> <a href=”#main-content” class=”skip-link”>Skip to Main Content</a> [Header navigation goes here]

Vous avez maintenant des liens de saut dans votre code, mais vous n'avez pas encore terminé ! Si vous chargez votre page maintenant, vous verrez les liens de saut en haut. Il est temps d'ajouter du CSS. Le style des liens de saut est assez simple, en utilisant l'exemple ci-dessous :

 .skip-link { position: absolute; top: 0; z-index: 9999; right: 100%; padding: 5px; padding: 0.5rem; font-size: 20px; font-size: 2rem; color: #000; background: #FFF; } .admin-bar .skip-link { top: 32px; } .skip-link:focus { right: auto; }

Ce que vous ne voyez pas, c'est l'utilisation de display: none . L'utiliser entraînera un lecteur d'écran à ignorer complètement le lien, ce qui va à l'encontre de l'objectif. Le masquage se fait en plaçant le texte hors écran en utilisant right: 100% et en le décalant vers right: auto on :focus .

Avec votre CSS appliqué, vous êtes prêt. Vos liens de saut sont en place, mais masqués. Lorsqu'un utilisateur de clavier ou un lecteur d'écran charge votre page à initiates :focus , vos liens de saut leur permettront d'accéder directement au contenu pour lequel ils sont venus.

Envelopper

Les liens de saut sont un exemple parfait d'une fonctionnalité d'accessibilité qui semble demander beaucoup de travail, mais qui ne l'est vraiment pas. Tout ce que nous avons fait du côté du code a été d'ajouter quelques lignes de HTML et de CSS. Pour l'approche non technique, nous avons installé un plugin. Aucune des deux méthodes ne prend très longtemps, ce qui est important à noter puisque les liens de saut sont une norme de niveau A pour WCAG 2.0 (les normes WCAG les plus récentes). Vous êtes tenupar la loi de les avoir sur votre site.Ne vous mettez pas en danger; ajoutez vos liens de saut aujourd'hui !