Nouvel article accessibilité : les liens d'évitement

Actualitéalsacréations

Publié par le , mis à jour le (9374 lectures)

Les visiteurs d'Alsacréations connaissent certainement les liens "Aller au menu", "Aller au contenu", "Retour en haut de page", placés tout en haut de page et que l'on appelle Liens d'évitement.

Jean-Pierre Villain a concocté un article très complet sur le sujet.

L'article de Jean-Pierre fait le tour de ce concept de liens d'évitement : leur historique, leur mise en place concrète, leurs bénéfices apportés.

Un véritable dossier sur la question vous attend dans la rubrique Accessibilité.

Merci à Jean-Pierre pour ce gros travail accompli !

Commentaires

Bien intéressant, bien résumé et assez exhaustif. Seule ombre au tableau: le recours à <a href="#" id="contenu"></a> au lieu de <h2 id="contenu">Contenu</h2> (par exemple) alourdit le code. De plus, je ne sais pas si c'est vraiment idéal, au vu des standards, de laisser un élément a vide.

@Victor :

IE pose deux problèmes :

1. Il ne gère pas le focus de la tabulation pour les éléments pourvus d'un id si ces derniers n'ont pas le layout.

La solution de contournement la plus simple consiste à utiliser des ancres <a>

2. Dans ce cas, second problème, si l'ancre cible est dépourvus de href cela désynchronise la gestion simultanée du focus "pointeur" et du focus "tabulation".

La conséquence est que ce scénario d'usage, très répandu, devient inopérant :

Prendre le focus sur un formulaire PUIS utiliser la tabulation pour tabuler les champs du formulaire.

D'où la recommandation d'implémenter un href sur les ancres cibles malgrés, de fait, la création génante de "liens vides", notamment pour l'utilisation de la liste des liens par les lecteurs d'écran.

J'ai privilégié la méthode du href dans cet article parce qu'elle est simple, compréhensible par tous, notamment un néophyte et qu'elle fonctionne pour tous les modes de restitution.

La gêne occasionnée par la présence de liens vides pour la restitution de la liste des liens par un lecteur d'écran peut être contrebalancé par l'utilisation d'un title explicite et la surcharge du href sur le modèle :
<a href="#contenu" name="contenu" title="ancre du contenu"></a>.

Je n'ai pas voulu entrer dans ces détails pour un article de synthèse.

L'utilisation de liens vides est génante, mais constitue un compromis acceptable.

L'article de Jim Tatcher, qui se focalise sur l'analyse de ces problèmes, est un prolongement naturel pour ceux qui voudront aller plus loin.


Jean-Pierre

Bonjour
il y a quelque chose que je ne comprends pas sur ce point :
" Il ne gère pas le focus de la tabulation pour les éléments pourvus d'un id si ces derniers n'ont pas le layout. La solution de contournement la plus simple consiste à utiliser des ancres <a> "

Quel est donc la différence avec Firefox par exemple ? Si j'utilise la tabulation avec ce dernier, le focus ne porte que sur les liens (et sur les éléments avec overflow autre que visible), mais pas du tout sur les éléments avec un ID.
Donc j'obtiens la même chose qu'avec Internet Explorer, non ? J'ai du mal à saisir

"Quel est donc la différence avec Firefox par exemple ?"

En fait tu obtiens bien le focus sur tout élément pourvu d'un identifiant DOM, mais ce n'est pas le problème ici.

Fais cette expérience : Un lien <a href="#contenu">contenu</a> pointe sur une ancre <a id="contenu" name="contenu"></a> (implémente plusieurs autres liens après ces deux là pour bien comprendre).

Partant de cette structure teste ce scénario d'usage qui, je le précise, n'est pas exceptionnel :

1. Je clique avec la souris sur le lien "contenu" PUIS je tabule.

Sur Gecko et consorts tu obtiendras le focus sur l'ancre et tu pourras continuer à tabuler à partir de cette position.

Sur IE tu n'obtiens pas le focus sur l'ancre et donc tu devras tabuler autant de fois que nécessaire pour parvenir jusqu'à l'ancre : Les deux méthodes (focus du pointeur et focus de la tabulation ) sont désynchronisées.

Le moyen d'y remédier, donc de les synchroniser, est de conférer un état layout à l'ancre ou d'y implémenter un href.

N'hésites pas reposter si c'est encore obscur.

Jean-Pierre

Merci pour cette réponse,

Ce que me pose problème, c'est la différence quand la cible est du type <div id="contenu">.

J'ai beau essayer et tout se passe pareil avec Firefox et Internet Explorer, testé avec ou sans feuille de style, que ce soit à la souris ou au clavier.

Si je clique sur le lien href="#contenu", j'arrive bien à <div id="contenu">, puis, si je tabule, ça continue bien sur les liens suivants à partir de ce point.

La seule différence que j'ai vu, c'est avec <body id="top"> qui ne marche pas avec IE5.x (mais très bien avec IE6).

D'après mes essais concernant Internet Explorer, seul IE3 nous obligerait à faire des ancres cible avec des liens comme indiqué (d'un intérêt très limité donc !)
Hors d'après l'article, j'ai l'impression qu'il y aurait d'autres raisons, mais je n'arrive à voir lesquelles ?

Oups, j'avais du mal faire mes essais.

En restestant sans feuille de style (et donc sans HasLayout puisque non activé par défaut pour DIV), je viens de me rendre compte du problème qui est effectivement assez génant.

Désolé et merci pour l'article intéressant.

Commentaires clos