[résolu] Comment signaler des liens externes de manière accessible ?

Bonjour à tous,

En discutant avec un de mes amis, nous nous sommes rendu compte que nous avions deux manières différentes de signaler les liens externes, chacun ayant ses arguments. Pouvez-vous nous aider à trancher ?

Solution 1:
Signaler un lien externe en incluant un pictogramme après le lien, ayant un alt="(lien externe)"

Ce qui, dans le code html donne:

<a href="http://www.lemonde.fr" title="Aller sur le site du Monde">Site du Monde</a> <img src="lien_externe.jpg" alt="(lien externe)" />

Ainsi, un lecteur d'écran peut lire l'information, de la même manière qu'un utilisateur affichant les images le fait.

Solution 2:
Mettre le pictogramme dans la css et signaler le lien externe dans le title.

Ce qui donne:

<a href="http://www.lemonde.fr" title="Aller sur le site du Monde (lien externe)" class="lien_externe">Site du monde</a>

Le pictogramme est dans la css, ce qui est un peu plus propre, mais sommes nous certain que le lecteur d'écran va lire le title plutot que le contenu "Site du monde" ?

Par avance:
- veuillez m'excuser si ma question vous paraît complètement idiote
- veuillez m'excuser si la question a été posée. J'ai effectué une recherche sur les mots "liens externes" et je n'ai pas trouvé de sujet correspondant dans la rubrique accessibilité.

Merci pour vos réponses !

EDIT: [résolu]
Modifié par thomasp (28 Sep 2006 - 15:44)

Hello thomasp et bienvenue ici

a écrit :
Le pictogramme est dans la css, ce qui est un peu plus propre

En quoi est-ce plus "propre" ? L'information "lien externe" est importante. Il s'agit de contenu et non de mise en forme. Il est assez peu recommandé d'employer CSS pour afficher du contenu pertinent :
http://forum.alsacreations.com/faq/#item72

Il existe de bien nombreuses possibilités pour signaler un lien externe, tu en as recensé quelques unes :

1- indiquer dans un title
L'inconvénient est que le title n'est pas obligatoirement lu par toutes les synthèses. De plus, title n'est qu'un complément facultatif au contenu du lien.

2- indiquer par une image picto avec un alt="(lien externe)"

3- mettre un picto en background en CSS
Inconvénient : les CSS sont une surcouche et peuvent ne pas être disponibles sur certains agents utilisateurs.

4- utiliser un javascript qui détecte les liens externes et modifie leur comportement
Inconvénient : idem que les CSS, il s'agit d'une surcouche donc pas obligatoirement disponible partout

5- ajouter du contenu généré automatiquement en CSS (:content)
Ne fonctionne pas sur tous les navigateurs (par ex IE6) et nécessite d'avoir CSS actif.

Dans les tutoriels, tu trouveras une méthode qui cumule à la fois title + JavaScript + CSS, ce qui permet de fonctionner même lorsque l'une des technologies n'est pas présente.

Pour conclure : la meilleure méthode restera toujours d'indiquer "en dur", directement dans le document HTML l'information pour être sûr qu'elle soit restituée dans tous les cas.

En clair :

<a href="http://www.lemonde.fr" title="Aller sur le site du Monde">Site du Monde (lien externe)</a> <img src="lien_externe.jpg" alt="lien externe" />

EDIT : je viens de comprendre l'utilité de ton image que tu as nommée "lien externe". Je pensais qu'il s'agissait d'une sorte de bouton pour aller sur le site du Monde mais ce n'est pas le cas. Il s'agit d'un "picto" qui indique que le lien est externe.
A partir du moment où ce picto est un "vrai" contenu, une balise <img>, comme dans ton cas, cela est une bonne façon de procéder.
Modifié par Raphael (28 Sep 2006 - 15:07)

Merci beaucoup pour ta réponse !

Une dernière question, dans ton code tu écris:

<a href="http://www.lemonde.fr" title="Aller sur le site du Monde">Site du Monde (lien externe)</a> <img src="lien_externe.jpg" alt="lien externe" />

Ne faut-il pas plutôt écrire:

<a href="http://www.lemonde.fr" title="Aller sur le site du Monde">Site du Monde </a> <img src="lien_externe.jpg" alt="(lien externe)" />

Pour éviter de lire deux fois de suite l'information "(lien externe)" ?

Et merci aussi pour le "bienvenue"

thomasp a écrit :

Pour éviter de lire deux fois de suite l'information "(lien externe)" ?

Eh bien disons que l'information véhiculée par texte est toujours plus accessible, mais c'est vrai qu'un doublon n'est pas forcément mieux.
Dans tous les cas, il n'y a pas de recette miracle et universelle. A priori il est préférable de placer du texte "en dur" qu'un picto avec alt.
Mais c'est déjà très très bien d'avoir un picto

Bonjour,

Juste quelques remarques :

La pertinence d'indiquer qu'un lien pointe une ressource extérieure dépends du contexte.

Il ne faut pas confondre deux choses :

- L'indication qu'un lien pointe sur une ressource externe
- L'indication qu'un lien externe s'ouvre dans une nouvelle fenêtre (ce qui est le sujet du tutoriel donné en référence par Raphael).

Il ne faut surtout pas penser, qu'en conséquence, il est obligatoire d'indiquer systématiquement qu'un lien est "externe".

Nottament : Ce n'est pas une recommandation WCAG, cela relève de l'ergonomie et de l'utilisabilité.

Au delà de la méthode, la question principale est donc :
- Pourquoi as tu besoin d'indiquer que ces liens pointent vers une ressource extérieure au site ?

Jean-pierre
Modifié par jpv (28 Sep 2006 - 16:06)

Bonjour,

a écrit :
la meilleure manière de la signaler c'est de la mettre en dur dans le document :

Oui chaque fois que c'est possible.

En revanche il est important que les indications supplémentaires soient dans le lien lui-même :

<p>
<a href="">Intitulé lien [b](lien ayant ceci ou cela de particulier...)[/b]</a> 
</p>

sinon elles seront perdues dans le cas de l'utilisation de la liste des liens affichée par les outils.

jpv a écrit :

En revanche il est important que les indications supplémentaires soient dans le lien lui-même :

<p>
<a href="">Intitulé lien [b](lien ayant ceci ou cela de particulier...)[/b]</a> 
</p>

sinon elles seront perdues dans le cas de l'utilisation de la liste des liens affichée par les outils.

Sans contredire aucunement, ce point peut s'avérer très difficile à gérer dans la mesure ou il doit se combiner avec une exigence de concision.

De manière très concrète avec opera, à titre d'exemple, l'extraction des liens dans la sidebar s'accomode assez mal d'intitulés long pour les dits liens.

Mais bon, quadrature du cercle peut être...
Modifié par clb56 (28 Sep 2006 - 18:12)

Bonjour,

Oui....

Lorsqu'on décide de donner une information supplémentaire pour un lien c'est qu'on à jugé que l'intitulé seul était insuffisant.

Afficher la liste des liens c'est afficher l'intitulé seul d'un lien.

Partant de là, l'information supplémentaire doit fait partie de l'intitulé lui-même.

La manière dont cet intitulé va être utilisé par un outil n'à pas d'importance, ou plus exactement nous n'avons pas à le présupposer.

En revanche la problématique des liens (concis ET préçis) est effectivement un vrai casse-tête...

Jean-Pierre