Généralement, les designers ou les clients détestent ces liens vécus comme une insupportable contrainte en terme de design.
Il n'y a pas de réponse toute faite; deux compromis s'offrent à vous :
6.1- Liens semi-visibles :
Cette technique est à réserver exclusivement aux seuls liens d'accès rapide; ne l'employez surtout pas pour les liens d'évitement et de navigation interne car elle aura un effet très perturbant.
La technique est simple à comprendre : il s'agit de cacher les liens et les faire apparaître au survol, au moyen de CSS.
Vous pouvez les cacher en leur attribuant une couleur de police identique à celle de la couleur de fond ou en les rejetant en dehors de la zone d'affichage avec une technique comme celle de Paul Bohman.
Le plus important est de ne surtout pas oublier de traiter, pour les faire réapparaîtrent, les deux événements : hover (souris) et focus (tabulation) :
a.aide:hover, a.aide:focus{
color:#000;
}
Certains, comme Mike Cherim (accessites.org) poussent la logique jusqu'à habiller ces liens et la méthode d'apparition.
Ce compromis, s'il est satisfaisant du point de vue de l'intégration graphique, pose néanmoins un problème : on ne sait pas que les liens existent au chargement de la page et leur apparition/disparition peut être perturbante. Quoi qu’il en soit, si c’est la seule solution à votre portée, utilisez là sans état d’âme, toute considération de confort mis à part, l’essentiel sera préservé.
6.2- Liens iconographiques :
Vous pouvez également décider de les intégrer dans le graphisme en employant des images iconographiques.
<a href="#top" title="retour en haut de page"><img src="top.gif" width="10" height="10" alt="retour en haut de page" /></a>
Cette technique est très élégante et valorisante pour les designers, bien acceptée par les clients; elle fonctionne très bien pour les utilisateurs de lecteurs d'écran. Oui.. mais... elle pose un redoutable problème, comme d'habitude, si j'ose dire, pour les utilisateurs de la tabulation clavier : malheureusement, l'affichage du title d'un lien ne réagit que sur l'événement "hover", ce qui signifie qu'un utilisateur de la navigation clavier ne verra pas s'afficher le title et ignorera la fonction du lien.
Vous n'avez pas beaucoup de solutions à votre disposition :
- Vous trouvez des icones suffisamment explicites : Une petite maison ou une flèche vers le haut est généralement bien compris pour le lien "retour en haut de page". De même, une "flèche droite" pourrait être envisagée pour les liens d'évitement. En revanche, pour les liens aller au "menu/contenu", il serait fort étonnant que vous trouviez une iconographie universellement reconnue.
- Vous implémentez une méthode pour informer visuellement l’utilisateur de la fonction du lien. Je vous en propose deux :
1. La méthode javascript consiste à reprendre le contenu de l’attribut title du lien et l’insérer dans un élément créé dynamiquement.
Les méthodes de l’objet node nous fournissent le moyen de le faire proprement : pour javascript il faut deux fonctions que vous pouvez implémenter dans le head de la page.
function showTitle(elm){
if(document.createElement){
span=document.createElement("span");
txt=document.createTextNode(elm.getAttribute("title"));
span.appendChild(txt);
span.className="tooltip";
elm.appendChild(span);
}
}
function hideTitle(elm){
elm.removeChild(elm.lastChild);
}
Associées à une classe CSS :
.tooltip {
display:block;
font-size:0.9em;
width:8em;
color:#4b4b4b;
position:relative;
margin:-15px 0 0 5px;
padding:3px;
background-color:#fffff4;
border:1px solid #cacaca;
text-decoration:none;
}
Et pour le html, les deux appels de fonctions sur les événements focus et blur :
<a href="#" title="Ceci est un essai" onfocus="showTitle(this)" onblur="hideTitle(this)"><img src="icn_recherche.gif" alt="ceci est un essai" width="17" height="17" /></a>
Ce qui nous donne en pratique :
Rien ne vous empêche d’externaliser ces fonctions et surtout de traiter les événements focus et blur avec une routine d’initialisation afin de préserver un code html propre.
Cette méthode est avantageuse car elle ne s’appuie que sur du contenu existant, elle fonctionne bien sur la plupart des navigateurs (IE5+, Gecko, Opera…). Oui mais voilà, pas de javascript, pas de bulle d’aide !
2. La seconde méthode est 100% CSS :
Elle nécessite l’implémentation d’un élément qui va reprendre le contenu de l’attribut title.
Du point de vue de l’accessibilité ce n’est pas formidable, le risque est important de provoquer une double lecture du lien par les lecteurs d’écran. Nous verrons plus bas comment tenter de contourner ce problème, intéressons nous pour l’heure à la technique d’implémentation :
Pour le html, nous rajoutons un élément span associé à deux classes et une classe alternative pour IE, qui ne comprend pas la pseudo-classe focus pour les liens (ce qui est proprement scandaleux) :
<a href="#summary" accesskey="4" title="Aller à la recherche"><img src="icn_recherche.gif" alt="Aller à la recherche" width="17" height="17" /><span class="hidden">Aller à la recherche </span></a>
La classe CSS pour cacher par défaut la bulle d’aide (version Paul Bohman) :
.hidden {
position:absolute;
left:0;
margin-top:-1000px;
width:1px;
height:1px;
overflow:hidden;
}
La classe CSS pour faire apparaitre la bulle d’aide en s’appuyant sur un simple sélecteur enfant :
a:focus span.hidden {
display:block;
font-size:0.9em;
width:8em;
height:1em;
color:#4b4b4b;
position:relative;
margin:-15px 0 0 5px;
padding:3px;
background-color:#fffff4;
border:1px solid #cacaca;
text-decoration:none;
Pour IE nous utiliserons une classe appelée avec un commentaire conditionnel en utilisant la pseudo-classe active qui, bug de circonstance, produira le même effet :
a:active span.hidden { … }
Le résultat est plus robuste que la méthode javascript pour plusieurs raisons :
- Cela fonctionne tout le temps
- Lorsque CSS est désactivé, le texte du span supplémentaire apparaît à coté de l’icône ce qui est particulièrement utile !
En revanche, comme nous l’avons dit, le risque existe de provoquer une double lecture par les lecteurs d’écran. Pour contourner ce problème nous allons utiliser un comportement habituel de ces aides techniques.
La plupart d’entres elles restitue en effet le texte le plus long qu’elles vont trouver entre le title, le alt et le contenu. Il nous suffit donc de créer un texte de title plus long que le contenu du span pour assurer au mieux qu’il sera le seul contenu restitué pour le lien. En passant, et comme je suis sûr que vous aimez le travail bien fait, n’oubliez pas que les images sont toujours susceptibles d’être désactivées; Lorsque ce sera le cas, c’est le contenu de l’attribut alt qui sera affiché. Donc contentez vous d’un simple mot, ce sera suffisant à la compréhension et limitera les risques de superposition en mode "images désactivées".
Au final, notre lien html devra ressembler à ceci :
<a href="#summary" accesskey="4" title="Aller à la recherche"><img src="icn_recherche.gif" alt="Rechercher" width="17" height="17" /><span class="hidden">Rechercher </span></a>
Le contenu long de title sera restitué en priorité par les lecteurs d’ écrans, le alt sera suffisamment court pour être lisible en mode "images désactivées" et le span assurera la bulle d’aide pour la navigation clavier. Cette méthode à été testée avec succès avec les principaux lecteurs d’écrans, notamment jaws et window eyes.
Le seul petit soucis concerne la restitution sur les navigateurs en mode texte qui afficheront, imperturbablement les deux textes (le alt et le span). Il n’y a malheureusement pas de solution, mais ce défaut me semble acceptable eu égard aux bénéfices pour la navigation clavier.
Vous pouvez voir ce dispositif en action sur webonorme.org (NDLR : le site dont il est question n'est plus en ligne, du moins plus sous cette forme).
Pour en terminer sur le chapitre des icones : n'oubliez pas de décrire dans votre page d'aide, la fonction de chacune des icones; ce qui viendra parfaire le dispositif.