Skip-link
Présentation
Permet d'afficher un groupe de liens d'accès rapides aux éléments menu, contenu, recherche.
Ces liens sont nécessaires à l'accessibilité d'un site, ils permettent aux utilisateurs naviguant au clavier ou avec une aide technique de naviguer plus vite vers les zones importantes de la page.
Un script javascript permet, s'il est activé, de ne faire apparaître ces liens que lorsqu'ils prennent le focus lors de la tabulation.
Utilisation
Placer le code html en début de page, de préférence juste après l'ouverture du body
.
Les styles présents dans le module sont les styles minimaux pour le bon fonctionnement du module.
Configuration
Les variables proposées dans ce module sont :
$enable-skip-link-js
: activation du module, sa valeur par défaut esttrue
$skip-link-bg
: couleur de fond, sa valeur par défaut estblack
$skip-link-color
: couleur des liens, sa valeur par défaut estwhite
Script associé
Pour un affichage uniquement à la tabulation, appeler le script associé dans le pied de page, avant la fermeture du body
et activer le setting en passant la valeur de skip-link-js
à true
dans le fichier _skip-link.scss.
Pour que ce script fonctionne correctement, le bloc de liens doit porter la class skip-link
.
Note : copier le script présent dans le module à l'endroit où sont rangés les autres scripts.
Exemple d’utilisation
<div class="skip-link">
<div id="top">
<ul class="container">
<li><a href="#main">Aller au contenu</a></li>
<li><a href="#nav-main">Aller à la navigation</a></li>
<li><a href="#search">Aller à la recherche</a></li>
</ul>
</div>
</div>
Démo
Tabuler jusqu'à ce bloc puis continuer pour faire apparaître les liens d'accès rapide.