Aller au contenu

Liens externes accessibles


Monique

Sujets conseillés

Bonjour,

Il est important de donner un maximum d'informations sur la cible des liens proposés à vos visiteurs.

Quand un non-voyant consulte la liste des liens, il ne dispose pas des informations éventuellement fournies par le contexte d'un lien sur la page. L'accès à un site externe sans en être prévenu risque particulièrement de le perturber.

Simple, accessible external links (en anglais, mais avec plus de code que de texte donc simple à comprendre ;) )

La réflexion de Russ Weakley part de cette directive

Identifier clairement la cible de chaque lien. [Priorité 2]

Les liens textes devraient être suffisemment explicites pour être compréhensibles même lorsque on les lit en dehors de leur contexte - de manière isolée ou parmi d'autres liens. Les liens textes doivent également être concis.

Il attire l'attention sur l'efficacité très relative de l'attribut title souvent utilisé, faisant référence à une excellente présentation (en anglais) sur les problèmes liés à cet attribut en fonction des logiciels utilisés (navigateurs ou aides techniques), The Trouble with the Title attribute.

Je n'ai pas encore testé personnellement, mais il y a un exemple en fin d'article... j'ai donc pu vérifier l'intérêt de cette astuce B)

En complément

Outre la destination de la cible, il est très utile aussi d'en signaler la langue, surtout si elle diffère de celle de la page d'origine.

Je vous invite à consulter cette discussion sur le Hub : Attribut hreflang, pour les liens

Lien vers le commentaire
Partager sur d’autres sites

Je suis tombé sur l'article de Weakly cette semaine en fouillant dans les archives des "Links for light reading". J'ai été sur le coup vraiment étonné de la simplicité et de l'ingéniosité de la technique. Parfois, il n'est pas nécessaire de chercher midi à quatorze heures. On prend deux ou trois techniques éprouvées, on les brasse dans un grand bol et hop!, on arrive avec une nouvelle solution qui règle avec génie certains problèmes.

Dans ce cas-ci, le problème de validité associé à l'utilisation de CSS-3 pour identifier les liens externes. IL n'y avait pas moyen de respecter la règle Opquast[1] sans perdre la validité des CSS ce qui, malheureusement, contrevenait également à une autre règle Opquast[2]. Avec la technique de Weakly, le problème est réglé, tous les navigateurs récents le supportent et on n'a pas à crocheter notre CSS.

Génial.

[1] http://www.opquast.com/bonnes-pratiques/fiche/50/

[2] http://www.opquast.com/bonnes-pratiques/fiche/10/

Lien vers le commentaire
Partager sur d’autres sites

La technique est je trouve assez intéressante, comme quoi la solution n'est pas toujours très loin. Par contre un petit point me gène. Cela concerne sa façon de ne pas afficher la span.

Il précise que tout les navigateurs ne supporte pas la propriété display: none; pour ne pas afficher une balise. Certes, mais les CSS sont déjà en grande partie constitué de hack, bidouilles, techniques et autres, pourquoi encore en rajouter une couche ? Obtenir à tout prix un affichage identique sur tout les navigateur est, de un, utopique, et de deux, inutile. Le display: none; est quand même supporté par les principaux navigateurs [1 et 2] Pourquoi s'éventrer à rajouter une bidouille de plus ?

La technique vaut quand même le coup d'oeil et je serais presque partisant de laisser tomber le non-affichage du span. Je trouve que dans la lecture, une notification du type de liens la facilite. Maintenant, il est vrai que couplé à la langue du document cela commence à faire beaucoup.

Au notera au passage que la technique est tout à fait applicable aux différentes langues dans les liens. Permettant ainsi l'affichage de la langue dans des navigateurs qui ne supporte pas les CSS avec gestion des attributs (je parle bien évidement de IE).

Mais vaux-t'il mieux un lien tel que Cliquez-ici (liens externe) (fr) ou rien du tout ?

[1] http://wiki.media-box.net/documentation/css/display

[2] http://juicystudio.com/article/invisible-form-prompts.php - Seul JAWS et Window Eyes ne supportent pas (plus de détail en 3)

[3] http://www.webaim.org/techniques/articles/hiddentext

Lien vers le commentaire
Partager sur d’autres sites

Mais vaux-t'il mieux un lien tel que Cliquez-ici (liens externe) (fr) ou rien du tout ?

Un lien avec un libellé aussi descriptif que "Cliquez ici" vaudra toujours mieux que pas de lien du tout, c'est clair... du moins pour moi, qui ne suis pas non-voyant et qui peut reconstituer globalement le contexte d'une page. Pour un aveugle ou une persoone ne voyany qu'une portion de la page à la fois, tomber sur une page contenant 350 liens vers autant de nouvelles ou d'actualités affublées du significatif et intuitif libellé "Cliquez ici", ce serait probablement autre chose!

Lien vers le commentaire
Partager sur d’autres sites

Pour ma part, ce qui me gêne est de :

- devoir rajouter de la structure (span) à un lien qui devrait se suffire

- répéter manuellement à chaque fois cette opération (écrire <span>bla bla bla </span>

J'utilise une autre technique, qui n'est pas parfaite non-plus mais qui a l'avantage de cumuler plusieurs méthodes et qui ne nécessite pas d'écrire manuellement les informations.

Lien vers le commentaire
Partager sur d’autres sites

En fait l'idéal serait d'utiliser les sélecteurs CSS3 [1] qui eux sont prévu pour cela.

Le code deviendrai [2]

a[href^="http://"]:after,  a[href^="https://"]:after {
content: "\0000a0[\2197]";
}

Et là, c'est propre, valide mais non fonctionnel sur tout les navigateurs. (en fait, je pense que aucun navigateur ne prendra cette syntaxe en charge... y'a encore du travail)

Le problème en ajoutant des span c'est que l'on mélange contenu et mise en forme. Le fait d'afficher une information sur le liens ne relève pas vraiement de contenu mais plutot de mise en page.

[1] http://www.w3.org/TR/2005/WD-css3-selectors-20051215/

[2] je vous accorde que le code CSS est beau :fou:

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Le problème en ajoutant des span c'est que l'on mélange contenu et mise en forme. Le fait d'afficher une information sur le liens ne relève pas vraiement de contenu mais plutot de mise en page.

<{POST_SNAPBACK}>

Pas vraiment d'accord ;)

Indiquer que le lien est externe (ou la langue du lien, le format ou le poids du fichier...), ce sont des informations sur la nature du contenu.

Par contre, la manière de l'indiquer peut relever de la mise en forme.

Si ces informations sont données dans le contexte de l'intitulé du lien ou via une mise en forme CSS classique, l'internaute non-voyant abordant une page via la liste de liens lira "Mon-opquast".

Avec une méthode comme celle qui est proposée, il lira par exemple "Mon-opquast (lien externe - fr)". Ce sont donc bien des informations sur le contenu dont il disposera.

Lien vers le commentaire
Partager sur d’autres sites

Je trouve que c'est plutot une crise de spanite aigue... Autant l'afficher comme le lien normal non ?

<{POST_SNAPBACK}>

Pour avoir déjà vu à quel point des utilisateurs non-voyants (même très habitués) peuvent être perturbés quand ils se retrouvent sur un autre site sans en avoir été prévenus, je considère le marquage des liens vers des sites externes (de manière que cela apparaisse dans la boîte de liste des liens, qui est abondamment utilisée par ces internautes) comme indispensable (alors que l'indication de langue serait plutôt un confort supplémentaire).

Il existe plusieurs méthodes pour le faire, aucune ne semble parfaite... le choix n'est donc pas si facile.

Lien vers le commentaire
Partager sur d’autres sites

D'autant plus que la gestion par css n'est pas nécessairement prise en compte par les navigateurs textes. Penses-tu que si les navigateurs textes prenaient en compte les CSS3, le code ci dessus les aiderait ou bien serait de toute façon désactivé ? Dans le cas d'une réponse négative, il vaut mieux l'afficher dans le liens, avec ou sans span :)

Lien vers le commentaire
Partager sur d’autres sites

D'autant plus que la gestion par css n'est pas nécessairement prise en compte par les navigateurs textes. Penses-tu que si les navigateurs textes prenaient en compte les CSS3, le code ci dessus les aiderait ou bien serait de toute façon désactivé ? Dans le cas d'une réponse négative, il vaut mieux l'afficher dans le liens, avec ou sans span :)

<{POST_SNAPBACK}>

Que te répondre... ni oui, ni non :huh:

Cela pourrait être oui si tous les logiciels (navigateurs, lecture d'écran...) réagissaient de la même façon, ce qui est loin d'être le cas (quel beau rêve :rolleyes: ).

Lien vers le commentaire
Partager sur d’autres sites

Personnelement, je pense que ce serait à tester sur plusieurs navigateurs ... Quels sont les principaux ? mis à part Lynx (que je possède et utilise en console :D ) je n'en connais pas d'autres... Aurais-tu quelque part dans les méandres de tes bookmarks une petite liste ?

Lien vers le commentaire
Partager sur d’autres sites

J'ai l'impression que le problème est moins lié aux navigateurs textes qu'aux aides techniques (lecteurs d'écran, loupes d'écran...).

Cela est apparu clairement lors de tests à propos de display:none;

The problem is that the technique does not always work as expected. Some screen readers do not speak material that is marked display:none. Others do. Others do or don't depending on how the style is specified. We have yet to see all the variations compared, or to find a technique that works consistently.

(Source URL: http://eleaston.com/bob/screenreader-visibility.html )

Navigateurs textes (que je n'ai jamais testés) :

- Links

- ELinks

- W3M

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...