Cet exemple sert à illustrer l'article de blog Des liens sur la même page qui fonctionnent pour tout le monde
Ci-dessous deux liens vers deux paragraphes qui se trouvent plus bas:
Aller à la suite de l'exemple (1)
Aller à la suite de l'exemple (2)
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, 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.
Lien test : retour vers l'article de blog
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 à 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">
L'addition de Javascript est nécessaire pour que cela fonctionne dans Safari sur Windows.
Un peu de texte avec un lien.
Un peu de texte avec un autre lien.