Lien « Skip to content » / invisible mais accessible.

Pourquoi et comment rédiger un lien « skip to content » (« accéder directement au contenu ») de manière optimale pour tous. Compétences: html + css.

Aujourd’hui c’est dimanche, jour du Seigneur. Cela tombe bien, je voulais justement vous parler de charité chrétienne appliquée au web design: le lien « skip to content » (« Aller directement au contenu »).

Vous l’avez peut-être déjà aperçu lors de vos pérégrinations sur la toile, surtout si vous développez pour le web: on le croise de temps en temps sans y prêter trop attention, sans savoir exactement à quoi il sert, ce lien qui vous invite à « passe directement au contenu ». Etrange, non?

En vérité, je vous le dis, il sert bien à quelque chose: permettre aux malvoyants utilisant un screen reader de ne pas devoir attendre que le lecteur ait terminé de lire l’entièreté du contenu de l’entête (contenant souvent un menu conséquent) et de passer directement à ce qui l’intéresse dans la page: le contenu.

Comment coder son lien « skip to content »?

Vous veillerez à placer le lien « skip to content » directement après l’ouverture de la balise <body>.

Voilà, rien de bien méchant. Fonctionnellement c’est suffisant pour améliorer l’expérience des malvoyants… Et abîmer celle des autres, qui n’ont pas besoin de ce lien. Son affichage ajoute donc un peu de bruit graphique, il vaut mieux le supprimer visuellement… Sauf, astuce, pour ceux d’entre nous qui n’utilisent pas de souris mais naviguent exclusivement au clavier. Linux power. Voici comment:

De la sorte, le lien est invisible, mais lorsqu’il reçoit le focus (via la touche TAB), il apparait. Wow.

Source: webaim.org

6 pensées sur “Lien « Skip to content » / invisible mais accessible.”

  1. tiens, est-ce qu’il n’y avait pas une histoire avec les offsets énormes (genre 10.000 pixels hors de l’écran) qui ralentissent l’affichage sur mobile ? peut-être que le width/height à 1px et l’overflow: hidden suffisent.
    (à vérifier, quoi)

    1. Wow, j’ai un lecteur! Eh bob, j’ai aussi entendu cette histoire, mais je serais bien en peine de tester cela. A mon avis, on discute sur un coût de 0.000002 secondes, donc je ne m’en ferais pas trop. Que le seigneur soit avec ton esprit, amen, et bon appétit.

    1. Nicolas Gallagher, il joue dans Oasis? :D

      Merci, connaissais pas. Je l’intègre au code exposé.

    2. D’après mes tests, et tel quel, le :focus ne prend pas. Le browser le considère donc qu’il doit le considérer « display:none ». Vais tout de même le tweaker pour voir si je peux arriver à éviter de dessiner une box de la taille de la voie lactée.

Les commentaires sont fermés.