Lien texte externe et accessibilité

Bonjour à tous,

Je me suis penché sur la meilleure façon de prévenir les personnes en cas de liens externes de type texte. J'ai repris l'idée de mettre une petite image à côté du lien pour signaler que le lien faisait quitter le site. Comme sur Wikipédia par exemple.

Par contre, je ne suis pas entièrement sur de la méthode pour coder ...

Dans un soucis d'optimisation du code, histoire de ne pas alourdir trop le code, j'avais pensé dans un premier temps à passer par une classe avec un background-image associé à un padding pour afficher l'image. Ce qui donne un truc dans ce goût là :

pour le xHTML :

<a href="http://www.lien-externe/" class="ext">lien externe</a>

pour le CSS :

.ext 
{
background:url('ext.png') center right no-repeat;
padding: 0 15px 0 0;
}

Mais est-ce la bonne méthode ???

Merci d'avance de vos remarques ^^

@+

Il y a plusieurs méthodes. Celle que tu cites, où l'on rajoute une classe pour signaler un lien externe.

On peut aussi, en pur CSS, utiliser les sélecteurs qui vont bien (pas supportés par IE6, à voir pour IE7 mais j'ai un doute), quitte à doubler ça par du javascript.

Par contre, il reste à savoir si tu veux que cette information soit accessible à tous, ou si tu estimes qu'il s'agit d'une information complémentaire mais pas strictement indispensable (c'est à dire : si ça marche pour l'utilisateur, tant mieux, sinon tant pis).

Le plus accessible, c'est l'image de contenu avec attribut alt disant "(lien externe)".

<a href="http://www.monculprod.org/">Bla bla <img src="..." alt="(lien externe)" /></a>

Hello,

Les possibilités évoquées par mpop (css doublé par du javascript + doublage par une infobulle) sont évoquées dans un tuto Alsa :
http://css.alsacreations.com/Accessibilite-du-Web/liens-externes-nouvelle-fenetre
Modifié par Raphael (09 Dec 2006 - 13:02)

Salut,

mpop a écrit :

Le plus accessible, c'est l'image de contenu avec attribut alt disant "(lien externe)".

<a href="http://www.monculprod.org/">Bla bla <img src="..." alt="(lien externe)" /></a>

Si on prend en compte l'accessibilité cognitive le mieux c'est vraiment :

<a href="http://www.monculprod.org/">Bla bla (lien externe)</a>

Comme ça on n'embête personne.

PS : ceci est une considération reposant sur ma propre expérience utilisateur. J'ai horreur de me demander ce que signifient ces minuscules logos trucmuche qui suivent (ou précèdent), où pas, les liens.

Ceci est un lien
. externe
. s'ouvrant dans une nouvelle fenêtre
. vers une page déjà visitée
. vers un fil rss 2.0
. vers un fil rss 1.0
. vers un fil atom

Pfiouf...

A tout le moins si l'info n'est pas en texte dur je pense que c'est bien de la mettre en title du lien.
Modifié par clb56 (09 Dec 2006 - 14:21)

Pandore a écrit :
Quelles sont les inconvénients de la méthode que j'ai décrite dans mon premier post ???

Comme précisé précédemment, c'est qu'elle n'est accessible que dans le cas CSS activées / images activées. Comme le dit mpop, à toi de voir quelle importance tu accordes à cette information.

Pandore a écrit :
Quelles sont les inconvénients de la méthode que j'ai décrite dans mon premier post ???

Un seul, tu souhaites transmettre une information dont tu sais quelle ne sera pas reçue par tout le monde.

C'est tout

Pandore a écrit :
Merci pour ton lien Raphaël mais je ne crois que tu n'as pas bien compris ce que je voulais faire

En effet, je ne cherche pas à contourner un target blank. Le "but du jeu", c'est tout simplement de pouvoir prévenir la personne qui va cliquer sur le lien que c'est un lien qui fait quitter le site. Libre à lui de quitter définitivement le site ou d'ouvrir une nouvelle fenêtre ou un nouvel onglet pour ce lien

Si si, il me semble avoir compris, sauf que la méthode décrite, outre le fait de proposer des solutions pour montrer que le lien est externe, permet en plus d'ouvrir le lien dans une nouvelle fenêtre.
Cependant, comme tu l'auras compris, ce tutoriel n'est pas parfait à 100%. Il n'y a effectivement que le texte "véritable" qui puisse être accessible à tous.

Mais l'on peut aller encore plus loin : si ta page est pleine de liens externes, la lecture de texte peut devenir complexe si on se heurte souvent à des textes répétitifs "lien externe".

Bref, il faut peut-être un juste milieu, sachant pertinement qu'aucune technique ne sera accessible à 100%
Modifié par Raphael (09 Dec 2006 - 15:28)

Raphael a écrit :

Mais l'on peut aller encore plus loin : si ta page est pleine de liens externes, la lecture de texte peut devenir complexe si on se heurte souvent à des textes répétitifs "lien externe".

Si un texte est encombré d'un nombre excessif de liens venant s'y immiscer alors c'est que les choses ont sans doute été mal pensées dès le départ. Apporter en texte dur les précisions souhaitables n'alourdira les choses que d'autant que le mal est déjà fait.
Modifié par clb56 (09 Dec 2006 - 15:40)

clb56 a écrit :
Si un texte est encombré d'un nombre excessif de liens venant s'y immiscer alors c'est que les choses ont sans doute été mal pensées dès le départ.

Bien vu.

Sur les pages pleines de liens : ça n'est pas forcément un signe de « mauvaise conception » éditoriale, si cela répond à un besoin ou une fonction. La page d'index/d'annuaire est un bon exemple de page pleine de lien répondant à un objectif concret.

Donc, comme toujours : « ça dépend ».
(J'ai l'impression de me transformer en Laurent Denis quand je fais ce genre de remarque...)


Pour Pandore > Je pense que le plus simple est effectivement de décider quel niveau d'importance tu dois accorder à l'information « lien externe ».

Imagines que tu puisse n'avoir que deux niveau d'impact de l'information : information absente (0) ou information présente dans le texte (1). Qu'est-ce qui est préférable ?

a écrit :
Premier lien, deuxième lien, troisième lien, quatrième lien, cinquième lien, sixième lien, septième lien, huitième lien, neuvième lien.

Premier lien (lien externe), deuxième lien (lien externe), troisième lien (lien externe), quatrième lien (lien externe), cinquième lien (lien externe), sixième lien (lien externe), septième lien (lien externe), huitième lien (lien externe), neuvième lien (lien externe).

(et encore, là on triche : du texte entre parenthèses c'est plus du niveau 0.8 que du niveau 1...

Bref, soit l'information est absolument capitale, et tu utilises la deuxième formulation, qui sera la plus accessible.
Soit tu estimes que la lourdeur de la deuxième formulation est contre-productive, et que dans ce cas, s'il n'est pas possible d'avoir quelque chose de plus subtil, autant avoir l'intitulé du lien seul.

Le problème de la subtilité, c'est qu'il y a des moyens d'être subtil qui seront interprétables par un public, mais pas par un autre.

Pour un public valide, utiliser des icônes est un bon moyen de faire passer une information (qui certes ne sera pas perçue par tous les lecteurs), sans que cette information vienne perturber le discours. C'est une solution intermédiaire intéressante, et que l'on a tout à fait le droit d'utiliser (manquerait plus que ça...). Par contre, ce genre de subtilité ne sera pas possible avec un lecteur d'écran. Hors les indications visuelles, on se retrouve plus ou moins à faire du binaire : soit je mets l'information dans le texte (à la rigueur entre parenthèses ou autres moyens qui feront que, au moins pour certains types d'utilisation, l'information sera un peu moins envahissante), soit je ne la mets pas.

Au final, vu les difficultés à faire passer certaines subtilités informationnelles avec certains types d'accès au document, on peut très bien décider que tant pis, l'information secondaire ne sera pas présente pour certains.
Enfin moi ça ne me choque pas (<troll>mais je ne suis pas un ayatollah de l'accessibilité...</troll>).

Bonjour,

Pour apporter de l'eau au moulin de mes petits camarades :

1. L'indication "lien externe" ne doit jamais être envisagée de manière systématique.

2. L'utilisation d'un icone associé à un lien peut être particulièrement génante si ce principe est utilisé dans le corps d'un texte.
On induit nécessairement une rupture au niveau de la lecture.
Lorsqu'il y en à trop cela tue le système : on aide en rendant illisible...

Il faut donc privilégier d'autres solutions par exemple "lire la fiche machin sur le site bidule" en clair dans le texte si possible, ou par l'intermédiaire de l'attribut title du lien comme l'explique clb.

Une autre méthode consiste à produire une "infobulle" sur le modèle suivant :

<a href="www.site.com" class="externe" >texte  <span class="infobulle"> (lien externe)</span></a>

avec une règle pour cacher par défaut l'indication :

.infobulle{
 position:relative;
 display:block;
 margin-top:-1000px;
 width:1px;
 heigth:1px;
 overflow:hidden
}

une règle pour la faire apparaitre pour Gecko et les navigateur conforme :
externe:hover span.infobulle,
externe:focus span.infobulle {
 style de l'infobulle
}

IE ne comprenant pas focus sur les liens, il faut doubler avec un commentaire conditionnel
en utilisant active qui aura un effet identique :

externe:hover span.infobulle,
externe:active span.infobulle {
  style de l'infobulle
}

De cette manière, l'information sera bien donnée à la représentation CSS, CSS désactivé et aux lecteur d'écrans.

Enfin, au lieu d'un "lien externe" particulièrement pauvre, pourquoi ne pas utiliser quelque chose comme "( sur le site truc muche), c'est tout aussi parlant et plus précis...

Jean-pierre

jpv a écrit :

Enfin, au lieu d'un "lien externe" particulièrement pauvre, pourquoi ne pas utiliser quelque chose comme "( sur le site truc muche), c'est tout aussi parlant et plus précis...

Oui, mais question difficile je trouve car cela excède largement les liens externes. Voir la liste que j'ai donnée ci dessus, un nombre conséquent de ces points apparaissent dans les Bonnes Pratiques (BP) Opquast qui pourtant se définissent elles même comme un simple "a minima consensuel".

ah oui au fait dans la liste j'avais oublié l'indication de langue si besoin est du document lié.
<hors sujet>
Chose qui est très peu respectée dans ce forum au fait (comme ça en passant).
</hors sujet>
Modifié par clb56 (10 Dec 2006 - 00:50)

a écrit :
Oui, mais question difficile je trouve car cela excède largement les liens externes.

La question d'origine concernant l'indication des liens externes, je me suis contenté d'apporter mon grain de sel sur ce sujet précis.

Rendre les liens explicites et utilisables est, effectivement, un sujet plus vaste...

jean-pierre

La pseudo-classe :after peut aussi être envisagée ici mais comme d'habitude, exit ie...

Benjamin D.C. a écrit :
La pseudo-classe :after peut aussi être envisagée ici mais comme d'habitude, exit ie...

Et exit eb... Si css inactives.

<note>
eb = everybody
</note>
Modifié par clb56 (10 Dec 2006 - 01:12)