Le « skip content » en HTML est une technique d’accessibilité web qui vise à améliorer l’expérience des utilisateurs ayant des besoins particuliers, tels que les utilisateurs de lecteurs d’écran. Le « skip content » permet à ces utilisateurs de sauter rapidement le contenu répétitif ou de navigation d’une page web pour accéder directement au contenu principal, sans avoir à écouter ou à parcourir tout le reste à chaque visite de page.
Voici comment fonctionne généralement le « skip content » en HTML :
- Balise de saut (Skip Link) : Vous créez une balise de saut en haut de la page, généralement juste après le début de votre <body>.
<a href="#content" class="skip-link">Passer au contenu principal</a>
L’attribut
hrefdoit pointer vers l’ID de l’élément que vous souhaitez que les utilisateurs atteignent (dans cet exemple, l’ID est « content » – assurez-vous d’avoir un élément avec cet ID dans votre contenu principal). - Styles CSS (optionnels) : Vous pouvez ajouter des styles CSS pour rendre ce lien visible lorsque le focus est dessus, mais normalement il est caché visuellement.
.skip-link {
position: absolute;
left: -999px;
}
Cela déplace le lien hors de la vue de la plupart des utilisateurs, mais il reste accessible pour les lecteurs d’écran.
- JavaScript (optionnel) : Pour une meilleure expérience utilisateur, vous pouvez ajouter un peu de JavaScript pour permettre au lien de devenir visible lorsqu’il est activé, par exemple, en ajoutant une classe CSS pour le rendre visible.
document.querySelector('.skip-link').addEventListener('click', function () {
var content = document.querySelector('#content');
content.tabIndex = -1;
content.focus();
});
Cela signifie que lorsque l’utilisateur clique sur le lien « Passer au contenu principal », le focus est déplacé vers l’élément avec l’ID « content », ce qui permet à l’utilisateur de commencer à lire le contenu principal de la page.
En utilisant cette technique, vous améliorez considérablement l’accessibilité de votre site web, car vous aidez les utilisateurs de lecteurs d’écran à naviguer plus facilement dans votre contenu, en évitant les éléments de navigation répétitifs et en accédant rapidement à l’essentiel de la page. Cela contribue à rendre votre site plus inclusif et convivial pour un public plus large.
Photo de Justin Morgan sur Unsplash
