Contenu | Menu | Rechercher :
Le réseau des étudiants | Plan du site | A propos | Contact
Vous êtes ici : Le réseau social des étudiants ==> Des liens accessibles

Des liens accessibles

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 :

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 liens

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

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". améliorer l'accessibilité grâce à l'attribut title

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 liens 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 :

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 :

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 :

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 tabindex-liens 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 :

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).