Des liens sur la même page qui fonctionnent pour tout le monde

Mise à jour le 22 septembre 2016: le problème est résolu dans la plupart des navigateurs mais reste d'actualité dans IE11 et Edge.

J'ai découvert récemment que les liens sur la même page ne fonctionnent pas dans tous les navigateurs. Je parle bien des liens du type <a href="#contenu">Aller au contenu</a> que l'on utilise par exemple pour construire un lien d'évitement.

Les liens d'évitement sont utiles aux personnes qui naviguent sans souris car ils permettent d'arriver directement au contenu. Sans lien d'évitement, il faut passer d'abord par tous les liens de la navigation en utilisant la touche TAB du clavier, avant de pouvoir atteindre les liens du contenu.

Les liens sur la même page sont également utilisés pour créer une table des matières sur une page un peu longue (par exemple un tutoriel sur l'accessibilité des documents Word), ou dans des mini-sites où tout le contenu se trouve sur une seule longue page.

C'est pour les utilisateurs du clavier (sans souris) que ce type de liens est le plus utile. Malheureusement c'est aussi pour ces mêmes utilisateurs que ces liens ne fonctionnent pas. Heureusement la solution n'est pas très compliquée.

Exemples

Dans cet exemple il y a deux liens vers des paragraphes qui se trouvent plus bas.

<p><a href="#suite1">Aller a la suite de l'exemple (1)</a></p>
<p><a href="#suite2">Aller a la suite de l'exemple (2)</a></p>

Lorsque l'on utilise ces liens, que ce soit avec le clavier ou la souris, il faut qu'il se passe deux choses: un défilement de la page pour que le paragraphe en question soit visible et un déplacement du focus vers ce paragraphe.

Si vous utilisez Firefox, les deux liens se comportent de la même manière. Si vous utilisez un autre navigateur, le premier lien ne se comporte pas comme prévu.

Pour voir la différence, dans la page exemple, utilisez le TAB pour atteindre le lien 'Aller à la suite de l'exemple (1)' puis faites 'ENTER'. La page défile pour afficher le paragraphe 'Exemple (suite 1)'. Ensuite faites de nouveau TAB pour atteindre le lien 'lien' qui se trouve dans ce paragraphe. Dans Firefox vous arrivez directement sur le lien 'lien'. Dans les autres navigateurs vous remontez au lien 'Aller à la suite de l'exemple (2)' qui se trouve ci-dessus.

Le lien 'Aller à la suite de l'exemple (2)' fait défiler la page pour afficher le paragraphe 'Exemple (suite 2)', et déplace également le focus au début de ce paragraphe. Le prochain TAB vous amènera donc vers les premier lien de ce paragraphe ('autre lien'). C'est le comportement attendu.

Code

Quelle est la différence entre les deux liens? Voici le code du premier lien, qui ne fonctionne pas bien partout:

<a href="#suite">Aller a la suite de l'exemple (1)</a>

La destination du lien est un titre de niveau 2 avec id="suite":

<h2 id="suite" >Exemple (suite 1)</h2>

Qu'est-ce qu'il a fallu faire pour que le deuxième lien se comporte comme voulu?

• Ajouter un attribut tabindex="-1" sur l'élément qui sert de destination au lien:

  <h2 id="suite" tabindex="-1" >Exemple (suite 2)</h2>

  La valeur "-1" de l'attribut tabindex fait en sorte que l'élément (ici h2) n'entre pas dans l'ordre de tabulation, mais par contre il est possible d'y déplacer le focus.

  L'ajout de l'attribut tabindex à lui seul suffit dans Chrome, Opera, Internet Explorer et Safari (pour Mac), en tous cas leurs versions récentes.

• Inclure les bibliothèques Jquery, ainsi qu'un script qui utilise la fonction focus():

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  
  <script>
    $(document).ready(function() {
      // ajouter un 'click handler' pour tous les liens
      // dont la cible est sur la meme page (href="#...")		
      $("a[href^='#']").click(function() {
        // trouver l'attribut href du lien,
        // en supprimer le premier caractere (#)
        // ce qui donne la valeur de l'attribut id de la cible
        $("#"+$(this).attr("href").slice(1)+"")
          // donner le focus a l'element avec cet id (pour les navigateurs qui ne le font pas)
          .focus();
      });
    });
  </script>

  L'addition de Javascript est nécessaire pour que cela fonctionne dans Safari sur Windows.

Voir l' article très complet de Terril Thomson sur le skip link (en anglais) dont vient cette technique. Il y décrit également des techniques pour accentuer le focus et la transition du focus.

Note sur les lecteurs d'écran

• Avec JAWS et NVDA Les liens sur la même page fonctionnent correctement de manière standard : le focus se déplace vers la destination du lien. La lecture reprend à cet endroit et si l'on utilise le TAB, il n'y a pas de problème non plus.
• Avec Voiceover le même problème se pose pour le focus du clavier, et la solution proposée fonctionne également.

Conclusion

Les liens sur la même page ne fonctionnent pas toujours correctement au clavier. Pour qu'ils fonctionnent toujours il faut utiliser l'attribut tabindex="-1" sur la destination du lien, et ajouter un petit peu de Javascript. C'est très important pour ceux qui naviguent sans souris. Pensez-y donc lorsque vous créez une table des matières ou des liens d'évitement.