Liens d’évitement

Accès direct au contenu principal (et autres zones) pour le clavier et les lecteurs d’écran.

Un lien

Appuyez sur Tab pour révéler le lien.

Aller au contenu
<div class="bj-skiplinks">
  <div class="bj-skiplinks__list">
    <a class="bj-skiplinks__link" href="#main">Aller au contenu</a>
  </div>
</div>

Plusieurs cibles

Le composant Vue enveloppe les liens dans bj-skiplinks__list ; même structure recommandée en HTML statique.

Aller au contenuAller à la navigationAller au pied de page
<div class="bj-skiplinks">
  <div class="bj-skiplinks__list">
    <a class="bj-skiplinks__link" href="#main">Aller au contenu</a>
    <a class="bj-skiplinks__link" href="#nav">Aller à la navigation</a>
    <a class="bj-skiplinks__link" href="#footer">Aller au pied de page</a>
  </div>
</div>

Classes CSS

ClasseDescription
bj-skiplinksConteneur.
bj-skiplinks__listListe des liens d’évitement.
bj-skiplinks__linkLien hors écran jusqu’au focus.

Accessibilité

Placez les liens en tête de document ; la cible id doit exister.