• Un lien expressif

• Les liens avec l'attribut title

• Lien ouvrant une nouvelle fenêtre (l'attribut target)

• Clé d'accès à un lien ou raccourci (l'attribut accesskey)

• Ordre des tabulations (l'attribut tabindex)

• Liens accompagnés par des puces

• L'accessibilité selon le W3C

Il faut prêter une attention particulière à l'accessibilité qui représente un élément indispensable pour la réussite de tout projet web, dans ce chapitre on va connaître quelques éléments nécessaires pour améliorer l'accessibilité des liens.

Un lien expressif

Il faut toujours prendre soin du texte des liens, il faut que ce dernier soit largement significatif quant au contenu de la page à visiter. Un bon texte de lien est celui qui nous permet d'avoir un avant-goût sur ce que va comporter la page de destination. Voici deux exemples de liens qui proposent un cours sur les liens :

• pour apprendre à créer des liens cliquez ici ;
• créer des liens.

Dans le premier exemple le texte du lien est "ici", or ceci ne signifie rien. Les gens abusent beaucoup de la mention "cliquez ici". Comme si les lecteurs ne savent pas qu'il faut cliquer sur un lien

Par contre le libellé du deuxième lien est "Créer des liens". On gagne plus en clarté n'est-ce pas les gars la bonne désignation des liens nous permet d'atteindre un double objectif :

• rendre les liens plus accessibles et plus compréhensibles ce qui réconforte davantage la navigation des internautes ;
• mettre à la disposition des robots d'indexation davantage de mots-clés ce qui facilitent leurs travail d'indexation et améliore énormément le référencement d'un site (consultez les deux articles "Astuces pour améliorer le référencement" et "Le principe du PageRank et sa relation avec les liens").

Les liens avec l'attribut title

On peut ajouter un autre attribut "title", exemple :

<a href="destination.html" title="ceci est un lien">
lien pour se rendre à la page destination.html</a>

Lorsqu'on va passer la souris au dessus du lien, une info bulle va apparaître contenant la valeur de l'attribut "title" dans cet exemple "ceci est un lien".

Cet attribut permet d'améliorer l'accessibilité des liens car ça permet aux internautes d'avoir un avant-goût sur la ressource de destination et ainsi de se décider avant de cliquer sur le lien. Il faut pas associer à cet attribut une pub mensongère par exemple "téléchargement gratuit" ou "recevez des milliers de cadeaux" alors que ceci n'est pas réel.

Lien ouvrant une nouvelle fenêtre (l'attribut target)

Par défaut, lorsqu'on clique sur un lien le navigateur charge la page dans la même fenêtre en écrasant l'ancienne page qui comporte le lien, le problème c'est que parfois on fait des liens vers des sites étrangers ce qui pourra transporter nos chers visiteurs si durement attirés vers un site étranger (à moins qu'ils ne fassent demi-tour par le bouton "back" ou "page précédente"). Comment faire pour garder les visiteurs dans notre site ?

Il y a un attribut "target" (cible) qui permet de spécifier si la page doit être chargée dans la même fenêtre ou dans une nouvelle fenêtre. Vous pouvez lui assigner les deux valeurs suivantes :

• "_blank" (vide, c'est-à-dire nouvelle page). Exemple :

  <a href="http://www.wikipedia.com" target="_blank">l'encyclopédie libre</a> 

• "_self" (soi, c'est-à-dire la même page), ça correspond à la valeur par défaut donc soit que vous la mentionnez ou non, ça change rien.

Avoir plusieurs fenêtres ouvertes en même temps peut causer des ennuis aux internautes surtout ceux qui souffrent d'une défaillance physique (personnes handicapées ou personnes non-voyantes). C'est pour cela le W3C (World Wide Web Consortium) qui s'occupe de la standardisation et de l'accessibilité des technologies web s'est décidé d'autoriser l'attribut "target" seulement dans les deux variantes "transitional" et "frameset". Si vous avez opté pour le dtd strict vous n'aurez plus la possibilité de vous en servir.

Personnellement je suis tout à fait d'accord avec cette décision qui est largement justifiée : seul l'internaute qui est habilité à décider si la page doit s'ouvrir dans une nouvelle fenêtre (ou onglet) ou non, ceci est simple : il suffit de cliquez sur le lien avec le bouton droit pour afficher le menu contextuel (on l'appel ainsi car il change selon le contexte), puis faites votre choix :

• ouvrir le lien dans une nouvelle fenêtre (open in new window), vous pouvez utiliser le raccourci "MAJ (Shift) + clic" pour Firefox ou Internet Explorer 6 et 7 ;
• ouvrir le lien dans un nouvel onglet (open in new tab), vous pouvez utiliser le raccourci "CTRL + clic" pour Firefox ou Internet Explorer 7 (Internet Explorer 6 ne permet pas la navigation par onglets ).

Si vous avez choisi le dtd strict, vous ne devez pas utiliser l'attribut "target" sinon votre document xhtml ne sera pas validé (le validateur w3c et la validation des documents html, xhtml et css). Pour remédier à cela pensez à vous servir de la fonction "open()" du JavaScript qui permet d'ouvrir un pop-up (mais faites attention, car l'internaute peut désactiver le Javascript).

Clé d'accès à un lien ou raccourci (l'attribut accesskey)

L'attribut "accesskey" (touche de raccourci) a pour rôle de définir une touche de raccourci qui permet d'exécuter un lien sans recourir à la souris ou à la recherche par tabulateur (la touche Tab), cet attribut doit recevoir comme valeur la touche du clavier qui, combinée à une ou deux autres touches (selon le navigateur) servira de raccourci. Voici un exemple :

<a href="http://www.monSite.com/help.html" accesskey="h">page d'aide</a>

Les touches complémentaires à la clé d'accès selon les navigateurs :

• ALT + accesskey : sous Internet Explorer 6 et 7, la combinaison "ALT + accesskey" permet de placer le focus sur le lien en question, il ne reste plus qu'à appuyer sur la touche "Entrée" pour exécuter le lien. Dans notre exemple appuyez simultanément sur "ALT + h" ensuite appuyez sur la touche Entrée pour se rendre à la page "help.html".
• Shift + ALT + accesskey : sous Firefox, Netscape, Mozilla, K-Meleon et Safari. Dans notre exemple Shift + ALT + h.
• Shift + Esc (escape : échapper) : sous Opera, cela va afficher une petite fenêtre qui contient tous les raccourcis définis dans la page ainsi que les URL qui lui sont associées, cliquez sur l'un de ces raccourcis pour exécuter le lien. Dans notre exemple ça va afficher une petite fenêtre qui contient : (h) http://www.monSite.com/help.html. Il suffit de cliquer sur la touche "h" pour exécuter le lien.

Il faut éviter les raccourcis qui sont déjà réservés à d'autres directives. Par exemple pour tous les navigateurs la combinaison "ALT + F" permet de faire dérouler le menu fichier (file), si vous mettez dans votre lien accesskey="F", ça va écraser la directive inhérente à la combinaison "ALT + F" (dérouler le menu fichier), ceci pourra être évité pour les navigateurs "Firefox" et "Opera" mais pas pour Internet Explorer 6 et 7 et Netscape car ils font appelle à la touche "Alt" plus la touche de raccourci pour exécuter le lien.

Notez que la valeur de "accesskey" est insensible à la casse : que vous mettez accesskey="a" ou accesskey="A" ça change rien.

Ordre des tabulations (l'attribut tabindex)

Notez que vous pouvez naviguer entre certains éléments d'une page web (les liens, les éléments de formulaires, l'élément object seulement pour Internet Explorer 6 et 7 et certains éléments de l'interface du navigateur) grâce à la touche Tab et lorsque vous atterrissez sur un élément de votre choix vous pouvez y effectuer une action (liens : exécuter avec la touche entrée, éléments d'un formulaire : taper du texte, cocher, sélectionner etc.).

L'attribut "tabindex" permet d'attribuer l'ordre de recherche par la touche tabulation aux liens et éléments du formulaire. Exemple :

<a href="tuto.html" tabindex="20">tutoriel</a>

La touche Tab permet de se rendre à l'élément suivant, Tab + MAJ (Shift) permet de revenir à l'élément précédent. Par défaut l'ordre de tabulation est défini par l'ordre d'apparition des éléments (liens, éléments de formulaires, élément object) dans le code xhtml, cependant vous pouvez changer ce réglage par défaut grâce à l'attribut "tabindex" auquel vous devez spécifier une valeur allant de 0 à 32767. Lorsque vous cliquez sur la touche Tab, le navigateur va donner la priorité à l'élément ayant le "tabindex" le plus faible et ainsi de suite.

Vous n'êtes pas obligé de donner des valeurs successives comme : 1, 2, 3 etc. mais vous pouvez aussi mettre 10, 20, 30 etc. ou bien 100, 200, 300 etc. l'essentiel c'est d'éviter les doublons et les valeurs qui ne figurent pas dans l'intervalle autorisé [0-32767]. Pensez à mettre des valeurs qui ne se suivent pas comme 10, 20, 30 etc. pour faciliter l'ajout potentiel d'un autre élément (vous n'aurez pas de problèmes lorsque vous allez lui attribuer un "tabindex" car vous aurez un large choix entre par exemple 10 et 20 ou entre 20 et 30 mais imaginez vous si vous vous êtes basé sur une numérotation de 1, 2, 3).

Si deux éléments ont le même "tabindex" le premier dans le flux xhtml qui sera activé en premier lieu.
D'autres éléments externes au canevas (domaine d'affichage) peuvent être activés par la touche Tab par exemple la barre d'adresse (ça diffère d'un navigateur à un autre).

N'oubliez pas que l'élément object et les éléments du formulaire (zone de texte, cases à cocher, liste déroulante etc.) sont aussi pris en compte (les formulaires et l'attribut tabindex). Lorsque vous atterrissez dans le lien voulu appuyer sur la touche "Entrée" pour l'exécuter. A noter que l'élément object est navigable par la touche tabulation seulement avec les deux navigateurs Internet Explorer 6 et 7. Les trois autres navigateurs ne lui ont pas prévu la navigation par la touche Tab et ne lui reconnaissent aucun attribut tabindex.

Les cartes cliquables côté client peuvent aussi être parcourues grâce à la touche Tab, pour spécifier l'ordre des tabulations vous devez mettre l'attribut tabindex pour chacune des balises <area /> qui représente une zone réactive de l'image. Les images cliquables côté serveur sont un cauchemar pour l'accessibilité car elles ne permettent pas la spécification de l'attribut alt et ne supportent pas la navigation par la touche tab ce qui justifie leur abandon.

Liens accompagnés par des puces

Il est judicieux de mettre à côté (de préférence à gauche) de certains liens des petites images qui permettent aux internautes de connaître d'emblée de quoi s'agit-il sans lire le texte du lien par exemple :

• une petite maison à gauche du lien "accueil" (home en anglais qui veut dire maison) ;
• un petit livre à gauche du lien "livre d'or" (guestbook) ;
• une loupe à gauche du lien "recherche" (search) ;
• une imprimante à gauche du lien "imprimer" (print) ;
• Je vous laisse le reste, employez un petit peu votre imagination

Accessibilité selon le W3C

Si vous appliquez mes conseils à la lettre vous allez aider plusieurs gens à consulter aisément votre site, le web est ouvert à tous les gens, mais ces derniers ne jouissent pas des mêmes capacités physiques, c'est pourquoi nous devons contribuer tous ensemble à rendre le web facilement consultable. Parmi les défaillances éventuelles telles qu'elles ont été citées dans le site du W3C :

They may not be able to see, hear, move, or may not be able to process some types of information easily or at all.

Les internautes peuvent ne pas voir, entendre, bouger, ou manipuler et traiter quelques informations facilement.

They may have difficulty reading or comprehending text.

Ils peuvent avoir des difficultés à lire ou à comprendre le texte.

They may not have or be able to use a keyboard or mouse.

Ils peuvent être incapables de se servir du clavier ou de la souris (par exemple un manchot ou un handicapé).

They may have a text-only screen, a small screen, or a slow Internet connection.

Ils peuvent avoir un écran à texte seul, un petit écran ou bien une connexion internet faible.

They may not speak or understand fluently the language in which the document is written.

Ils peuvent ne pas savoir couramment le langage que le document est écrit avec.

They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.).

Ils peuvent être dans une situation où leurs yeux, oreilles ou bras sont trop occupés (exemples : conduire la voiture pour se rendre au travail, travailler dans un environnement défavorable où il y a beaucoup de bruit).

They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

Ils peuvent avoir un ancien navigateur, un browser complètement différent, un navigateur à synthèse vocale ou un autre système d'exploitation.

Avez-vous besoin de quelques raffinements en matière de liens hypertextes ? Vous avez frappé à la bonne porte Rendez-vous au prochain chapitre : les ancres (signets) et les liens de messagerie (mailto).