Ne pas souligner les liens hypertextes, c'est mal ou c'est pas grave - Forum Alsacréations : CSS et Standards Web

Auteur
audrasjb	# 24 Aug 2008 - 19:36:39
aka redpeppers 153 Posts	Hello hello, La lecture récente de ce billet m'amène à me poser certaines questions quant au soulignement des liens hypertextes en mode normal (c'est à dire lorsque ils ne sont ni actifs, ni "visited", ni survolés). L'auteur de cet article exhorte les webmasters à toujours souligner les liens hypertextes car sinon l'internaute lambda ne comprendra la plupart du temps pas qu'il s'agit bien d'un lien.. Je ne suis pas vraiment d'accord : à mon sens, il suffit de différencier suffisamment les liens par rapport au texte normal pour que l'internaute se rende compte qu'il s'agit bien d'un lien hypertexte. Par exemple, sur mon blog, le texte est en gris et les liens en rose (non souligné). Je pense que la différence est suffisante, non ? D'autant que lorsque le visiteur survole ou met le "focus" sur le lien, celui-ci se souligne.. Qu'en pensez vous ? Je n'ai pas vraiment trouvé de discussion sur ce thème dans le salon accessibilité, à part peut être une réponse de Laurent Denis qui préconisait d'utiliser les border-bottom au lieu du text-decoration: underline pour plus de lisibilité (trait de soulignement normal rendant la lecture difficile à certaines personnes). Modifié par audrasjb (24 Aug 2008 - 19:39) There's no place like 127.0.0.1 ;)
aka redpeppers 153 Posts
Yasashii	# 24 Aug 2008 - 20:26:37
147 Posts	Je ne pense pas qu'il faille TOUJOURS souligner les liens. Mais il est vrai que cela aide beaucoup à les différencier. Le problème de n'avoir qu'un changement de couleurs pour indiquer un lien est que cela n'est pas parlant. De plus utiliser uniquement une couleurs sera problématique pour certains utilisateurs. En général quand les liens sont dans le "contenu" de la page, je préfère les souligner ; et quand ils sont dans un élément de navigation clairement identifiable comme tel, je m'en abstiens pour plus de lisibilité. L'exemple de Free, cité dans l'article, montre bien que le soulignement manque, car il n'y a vraiment aucune différence (hors menu) entre les liens et le contenu. Pour les deux lignes : Vous avez oublié votre mot de passe ? Cliquez ici Vous n'êtes pas encore abonné ? Cliquez ici Je m'attendrais à ce que toute la ligne soit un lien, mais non. Bien que le cliquez ici semble "évident", mon expérience d'utilisateur casse bonbon me dit que je dois aussi pouvoir cliquer sur le reste de la ligne, mais non...
147 Posts
Tony Monast	# 27 Aug 2008 - 20:29:12
Fusionnez à froid ! Modérateur 2291 Posts	Bonjour, Je recommande fortement de souligner les liens du contenu. Je vais d'ailleurs prendre ton blog comme exemple : - La couleur des titres est relativement semblable à celle des liens. Cela peut porter à confusion. (le titre est-il cliquable?, ou tel mot est-il seulement un titre?) - Dans les commentaires, les mots entourants le lien de l'auteur du commentaire sont pratiquement de la même couleur (envoyé par, la date). Encore une fois, confusion possible - Dans le cas où il y aurait une énumération de liens séparés par une virgule, sans soulignement, il serait difficile de distinguer chaque lien. Cela pourrait donner l'impression qu'il ne s'agit que d'un seul grand lien (à tester sur ton blog) - Cela pourrait poser problème à ceux ayant des problèmes visuels. Les daltoniens peut-être? Après tout, les feux de circulation n'utilisent pas seulement la couleur, mais aussi des formes. - Le soulignement des liens est un certain standard dans le Web. Il est même recommandé de ne jamais souligner des mots dans les documents écrits car cela donne l'impression que ce sont des liens. C'est donc quelque chose dont les utilisateurs sont habitués, contrairement aux mots colorés qui peuvent parfois, sur certains sites Web, n'être que purement esthétique ou pour mettre en évidence des mots qui ne sont pas forcément des liens. - L'idée est de faciliter la vie des gens. Rendre les repères évident. Ne pas mettre de soulignement enlève une facilité aux gens. C'est tout le contraire qu'il faut faire. Modifié par Tony Monast (27 Aug 2008 - 20:31) Une seule pensée constructive, vaut mieux qu'une heure d'efforts futiles.
Fusionnez à froid ! Modérateur 2291 Posts
audrasjb	# 28 Aug 2008 - 17:21:03
aka redpeppers 153 Posts	Pas forcément d'accord avec toi sur le fait que les gens soient habitués aux soulignement des liens.. C'est pas évident du tout puisque je sais pas si la majorité des sites web arborent des liens soulignés.. Par contre pour les histoires d'accessibilité (aux daltoniens notamment), je suis déjà plus d'accord... Sauf à la limite si la couleur des liens présente un contraste suffisant d'avec le reste du texte.. Pour le cas de mon blog, suis d'accord avec toi pour l'adresse du site web des commentateurs (oui là c'est clair qu'on les voit pas ), mais pas vraiment pour les liens dans le texte. Je les trouve suffisamment contrastés avec le texte ...et j'avoue que je trouve le soulignement vraiment inésthètique et que personnellement il gène ma lecture. Après peut être que je fais erreur mais je ne suis pas encore vraiment convaincu There's no place like 127.0.0.1 ;)
aka redpeppers 153 Posts
Tony Monast	# 28 Aug 2008 - 18:03:48
Fusionnez à froid ! Modérateur 2291 Posts	Bonjour, audrajb a écrit : Pas forcément d'accord avec toi sur le fait que les gens soient habitués aux soulignement des liens.. C'est quand même une convention sur le Web et le style par défaut dans les navigateurs Web. Ce n'est pas 100% des sites qui utilisent cette convention, je l'admet, mais c'est un haut pourcentage. Puis prenons les deux cas suivants : - Avec les liens soulignés, les utilisateurs reconnaissent tout de suite que ce sont des liens, à moins de n'avoir jamais été sur Internet de leur vie. - Avec des liens non-soulignés, là le repérage n'est pas certain. C'est un risque à prendre. Si les liens soulignés gênent ta lecture et que tu les trouve inesthétique, essaye en éliminant le underline des liens, et en ajoutant un padding-bottom et border-bottom au teint plus pâle que le lien lui-même. Bref, faire en sorte que le soulignement soit plus discret que le mot. J'ai même déjà vu sur un site le soulignement en image, avec un style très particulier. C'était à la fois créatif, esthétique et ergonomique. Modifié par Tony Monast (28 Aug 2008 - 18:14) Une seule pensée constructive, vaut mieux qu'une heure d'efforts futiles.
Fusionnez à froid ! Modérateur 2291 Posts
Yasashii	# 28 Aug 2008 - 21:51:40
147 Posts	audrasjb a écrit : Par contre pour les histoires d'accessibilité (aux daltoniens notamment), je suis déjà plus d'accord... Sauf à la limite si la couleur des liens présente un contraste suffisant d'avec le reste du texte.. En fait c'est assez difficile de dire si tu as tord ou non. Mais, entre deux textes qui se ressemble mais qui ont une différence de contraste pour seule différence de présentation: lequel est le lien ? Oui en passant la souris une fois sur les deux bouts de texte on trouve, mais on perd également du temps. (J'avais utilisé l'exemple du formulaire de contact du site de l'AFP dans ma thèse à ce sujet, en haut du formulaire était écris en gras noir : Les champs en rouge doivent être remplis, dans le formulaire les intitulés étaient tous en gras et en rouge et noir. étant bête et méchante j'ai commenté que, si on prend comme référence l'instruction en gras noir, les champs obligatoire et facultatifs sont donc inversé pour l'utilisateur daltonien).
147 Posts
knarf	# 28 Aug 2008 - 23:04:03
920 Posts	Bonjour, Pas forcément d'accord avec toi sur le fait que les gens soient habitués aux soulignement des liens.. C'est pas évident du tout puisque je sais pas si la majorité des sites web arborent des liens soulignés.. J'aurai tendance à penser également que si (comme Tony) car sinon cette bonne pratique n'existerait pas. http://fr.opquast.com/bonnes-pratiques/fiche/163 Si elle est là c'est que justement cela peut être confondu avec des liens par une grande partie des internautes. Modifié par knarf (29 Aug 2008 - 00:38)
920 Posts
Florent V.	# 29 Aug 2008 - 00:22:45
On va manger des chips. Modérateur 13462 Posts	audrasjb a écrit : à mon sens, il suffit de différencier suffisamment les liens par rapport au texte normal pour que l'internaute se rende compte qu'il s'agit bien d'un lien hypertexte Cette analyse est erronée. Un texte en gras ne sera pas analysé, au premier abord, comme un lien hypertexte. De même qu'un texte en italiques, ou en grands ou petits caractères, ou en capitales ou petites capitales, etc. Tout est histoire de conventions et d'usages. Le texte en gras ou en italique correspondent à des conventions typographiques bien établies, de même que le texte en grand caractères (titres, accroches...). On a bien du texte qui se différencie du texte «normal», mais les conventions existantes orientent l'analyse: tiens, un titre; tiens, du texte important; tiens, une nuance de discours. Pour les liens, il existe plusieurs conventions et usages (il me semble que l'on ne peut parler de conventions que si elles sont très bien établies, faudrait que je vérifie dans le bouquin d'Amélie Boucher). Les plus établies sont les suivantes: - texte souligné; - texte en bleu. Si on regarde les sites du Top 10 donné par Alexa, on a 2-3 sites qui soulignent les liens, 2-3 qui soulignent seulement certains liens (notamment les liens un peu isolés, mais ça n'est pas toujours très maitrisé), et les autres ne les soulignent pas. Par contre, tous utilisent du bleu (avec peu de variations de couleurs) pour la couleur des liens. Le combo gagnant, en termes de reconnaissance des liens, c'est le bleu + souligné (cf. Google). Par contre, lorsqu'on présente de nombreux liens très proches les uns des autres, le soulignement va gêner la lecture, et on optera alors pour du bleu non souligné (cf. Yahoo, côté portail). On a ensuite des usages qui ne sont pas des conventions, mais qui sont assez courants pour que l'utilisateur se dite «tiens, c'est peut-être un lien (faut voir...)». Notamment: - texte dans une couleur vive autre que le bleu; - couleur de fond sur une série de caractères; - texte accompagné d'une icone ou d'un pictogramme. Seul le premier me semble se rapprocher d'une convention. Et encore: l'utilisateur devra passer le pointeur de la souris sur le texte pour vérifier s'il s'agit d'un lien (à ce moment, de bons styles au survol permettront de «rattraper» en partie la faiblesse ergonomique de la mise en forme des liens). Et je ne reviens pas sur la démonstration de Tony sur les confusions possibles entre liens colorés non soulignés et autres textes colorés. Lisez les specs! Et aussi: Ressources en intégration web (HTML et CSS)
On va manger des chips. Modérateur 13462 Posts
6l20	# 29 Aug 2008 - 23:22:45
Chasseur de 1/2 Kiwiz Modérateur 1371 Posts	Florent a écrit : Pour les liens, il existe plusieurs conventions et usages (il me semble que l'on ne peut parler de conventions que si elles sont très bien établies, faudrait que je vérifie dans le bouquin d'Amélie Boucher). Les plus établies sont les suivantes: - texte souligné; - texte en bleu. Amélie Boucher (citant Jakob Nielsen) a écrit : - Vous avez affaire à un standard lorsque plus de 80% des sites utilisent le même principe. - Vous avec affaire à une convention lorsque 50 à 79% des sites utilisent le même principe. Autrement dit, on peut dire que, lorsque les internautes voient quelque chose sur plus de la moitié des sites web, ils s'attendent à retrouver le même modèle sur d'autres sites. etc... Parlant des "liens historiques" (donc bleus (#0000FF) et soulignés): AB a écrit : ...au vu des capacités perceptives de l'être humain, cette couleur très saturée n'est pas la meilleure pour l'oeil...peu indiquée pour la lecture... (Mais) Le fait que les internautes associent les liens de ce type à des élements cliquables prime sur toute autre considération ... L'ergonomie doit s'adapter à l'utilisateur dans ce qui fait sa spécificité, au delà de sa nature d'être humain. Vous devez donc prendre en compte les connaissances antérieures de vos internautes. "Enfin" : AB a écrit : Aujourd'hui, les connaissances et attentes des internautes sont tout autres. Petit à petit, les formats de présentations des liens ont glissé vers d'autres couleurs et d'autres styles. A l'heure actuelle, c'est davantage la différence de format entre les liens et le reste du texte qui permet de les indicer en tant que tels (autrement dit, on repère un lien parce qu'il est différent du reste du texte) Ergonomie Web d'Amélie Boucher, à lire absolument Cela ne retire rien aux analyses de Tony et de Florent que je partage A noter que les habitudes de surf de vos visiteurs (les sites qu'ils visitent régulièrement en plus du votre) devraient également influer sur la manière dont vous présentez vos liens (pour ne pas les dérouter ou les perturber dans leurs habitudes) Cdt, Sylvain XHTML: structure. CSS: présentation. Javascript: comportement.
Chasseur de 1/2 Kiwiz Modérateur 1371 Posts
Muad'Dib	# 30 Aug 2008 - 21:46:32
34 Posts	Florent V. a écrit : Cette analyse est erronée. Un texte en gras ne sera pas analysé, au premier abord, comme un lien hypertexte. De même qu'un texte en italiques, ou en grands ou petits caractères, ou en capitales ou petites capitales, etc. Tout est histoire de conventions et d'usages. Le texte en gras ou en italique correspondent à des conventions typographiques bien établies, de même que le texte en grand caractères (titres, accroches...). On a bien du texte qui se différencie du texte «normal», mais les conventions existantes orientent l'analyse: tiens, un titre; tiens, du texte important; tiens, une nuance de discours. Pour les liens, il existe plusieurs conventions et usages (il me semble que l'on ne peut parler de conventions que si elles sont très bien établies, faudrait que je vérifie dans le bouquin d'Amélie Boucher). Les plus établies sont les suivantes: - texte souligné; - texte en bleu. Si on regarde les sites du Top 10 donné par Alexa, on a 2-3 sites qui soulignent les liens, 2-3 qui soulignent seulement certains liens (notamment les liens un peu isolés, mais ça n'est pas toujours très maitrisé), et les autres ne les soulignent pas. Par contre, tous utilisent du bleu (avec peu de variations de couleurs) pour la couleur des liens. Le combo gagnant, en termes de reconnaissance des liens, c'est le bleu + souligné (cf. Google). Par contre, lorsqu'on présente de nombreux liens très proches les uns des autres, le soulignement va gêner la lecture, et on optera alors pour du bleu non souligné (cf. Yahoo, côté portail). On a ensuite des usages qui ne sont pas des conventions, mais qui sont assez courants pour que l'utilisateur se dite «tiens, c'est peut-être un lien (faut voir...)». Notamment: - texte dans une couleur vive autre que le bleu; - couleur de fond sur une série de caractères; - texte accompagné d'une icone ou d'un pictogramme. Seul le premier me semble se rapprocher d'une convention. Et encore: l'utilisateur devra passer le pointeur de la souris sur le texte pour vérifier s'il s'agit d'un lien (à ce moment, de bons styles au survol permettront de «rattraper» en partie la faiblesse ergonomique de la mise en forme des liens). Et je ne reviens pas sur la démonstration de Tony sur les confusions possibles entre liens colorés non soulignés et autres textes colorés. Salux à tous, je suis arrivé ici par un lien de florent. Qui ne trouvait pas "correct" que certains mots étaient soulignés dans mon site et que ces mots n'étaient pas des liens. Soit. Cependant, dans ce post, je m'aperçois que vous conseillez de souligner les liens pour faciliter le surf. Je ne sais pas si vous parlez des liens des menus et ou de ceux qui sont éventuellement éparpillés dans le corps du texte de l'ensemble d'un site. Ceci étant dit, je me permets, sans vouloir offenser qui que ce soit, de souligner que sur le site d'alsacreations (donc ici même) aucun lien n'est souligné. Sur la page d'accueil, il faut bien observer et ensuite passer le curseur sur l'ensemble de la page pour "comprendre" que ce sont la des liens. Pour conclure, je suis entièrement d'accord pour faciliter le surf des visiteurs en leur indiquant rapidement où se trouve les liens. Et c'est tout à fait normal. Je m'efforce de le faire sur mon site. En ce qui concerne les mots soulignés, j'ai précisé sur me page d'accueil que les légendes soulignés permettent d'agrandir les photos. Mes autres liens dans le corps du texte sur l'ensemble du site sont entre strong et ont tous une couleur contrastée. De toute évidence, que ce soit en navigant avec lynx, opéra, konqueror ou firefox (ce sont les quatre que je peux vérifier tout de suite) les liens sont de toutes façon soulignés quand on est en mode "aucun style" ou en mode accessibilité ou un autre mode, hors le mode auteur. Chaque lien est souligné. Donc, quelque soit le visiteur (avec ou sans handicape) les liens sont bien identifiés. Le surf est facilité. Tout ça pour dire, que je vais tout de même essayer de trouver un moyen de ne pas souligner mes légendes. Amicalement. « La fiabilité d'une machine est inversement proportionnelle au nombre de logiciels Microsoft qui y tournent. »
34 Posts
Florent V.	# 31 Aug 2008 - 10:59:23
On va manger des chips. Modérateur 13462 Posts	Muad'Dib a écrit : Qui ne trouvait pas "correct" que certains mots étaient soulignés dans mon site et que ces mots n'étaient pas des liens. Il ne s'agit pas de correction (ou d'exactitude), mais d'éviter une erreur ergonomique. Le soulignement est une convention qui signifie «lien cliquable» dans une page web. L'utiliser pour du texte non cliquable est bien sûr possible, mais c'est risqué. Muad'Dib a écrit : Ceci étant dit, je me permets, sans vouloir offenser qui que ce soit, de souligner que sur le site d'alsacreations (donc ici même) aucun lien n'est souligné. Comme sur tout site web, on peut trouver sur Alsacréations des erreurs ergonomiques, un design parfois discutable, des informations pas toujours pertinentes, des fautes de langue, de grammaire et d'orthographe, des problèmes d'accessibilité, des erreurs de validation du code HTML et CSS, etc. Il n'y a pas de référence absolue du «site qu'il est bien fait». Lisez les specs! Et aussi: Ressources en intégration web (HTML et CSS)
On va manger des chips. Modérateur 13462 Posts
Citron.mecanik	# 09 Sep 2008 - 15:41:09
48 Posts	Bonjour, Pour ma part il est évident que souligner les liens facilite la compréhension d'un utilisateur. Comme l'a "souligné" Florent V je dirai qu'il n'y a pas plus explicite qu'un lien bleu souligné. Bien sûr on ne va pas faire tout nos site en Times sur fond blanc avec les liens bleu ... il n'empêche que c'est ce qu'il y a de plus conventionnel. Et (tristement) en matière d'ergonomie web , rester conventionnel est une valeur sûre. L'ergonomie doit s'adapter à l'utilisateur dans ce qui fait sa spécificité, au delà de sa nature d'être humain. Vous devez donc prendre en compte les connaissances antérieures de vos internautes. Je pense que 95% des internautes , aussi novice du net qu'ils soient, sont familiariser à Google (ou à Yahoo) où les liens des résultats de la recherche sont en bleu souligner ... Sans parler de site comme wikipedia (qui devient un incontournable) ou ce standard est bien souvent utilisé. Modifié par Citron.mecanik (09 Sep 2008 - 15:42)
48 Posts
Pandore	# 10 Sep 2008 - 17:32:50
Ange Gardien 441 Posts	Je partage les avis de Tony Monast et de Florent V. audrasjb a écrit : Par exemple, sur mon blog, le texte est en gris et les liens en rose (non souligné). Je pense que la différence est suffisante, non ? Pour en remettre une couche, je citerai ceci : Directives pour l'accessibilité aux contenus Web (version 1.0) a écrit : Directive 2. Ne pas s’en remettre exclusivement aux couleurs. S’assurer que les textes et graphiques sont compréhensibles quand on les visualise sans couleur. Si les couleurs seules sont utilisées pour convoyer l’information, les personnes qui ne peuvent pas distinguer certaines couleurs et les utilisateurs équipés de périphériques à affichage non-multicolore ou non-visuel ne la recevront pas. source : W3C - Directive 2. Ne pas s’en remettre exclusivement aux couleurs. Il est clair que dans ton cas, quand on les visualise sans couleur, on ne distingue plus le texte brut des liens. Bref, le soulignement du texte reste une indication pour marquer la présence d'un lien. Après pour la couleur, faut voir. Il est vrai que par défaut, c'est en bleu. Mais en même temps, la C.S.S. est faite pour faire de la mise en forme. Sur certains de mes sites, je laisse les liens en bleu souligné alors que sur d'autres je les mets en vert souligné. Le tout est d'être homogène : les liens devrait toujours être présentés de la même façon sur un même site. On ne devrait pas avoir des fois en bleu, des fois en vert, des fois soulignés, des fois non-soulignés, ... " Plus les choses changent, plus elles restent les mêmes ... "
Ange Gardien 441 Posts
audrasjb	# 11 Sep 2008 - 21:19:25
aka redpeppers 153 Posts	zut zut zut : je lance un sujet, et je l'oublie ensuite.... La mémoire dès fois... Désolé, surtout pour ceux qui ont pris le temps de me répondre. Ok, tout cela me semble assez pertinent, sauf que j'ai toujours du mal avec le soulignement par défaut, esthétiquement parlant principalement. Pourtant je suis bien convaincu que c'est préférable, mais comme le dit Pandore, les css sont faites pour mettre en forme le balisage HTML... Pour le cas de mon blog, ok, effectivement, mauvais exemple, car une fois les contrastes désactivés, c'est assez mauvais. Je vais donc changer tout ça et me plier à vos conseils.... There's no place like 127.0.0.1 ;)
aka redpeppers 153 Posts
Tony Monast	# 11 Sep 2008 - 21:24:43
Fusionnez à froid ! Modérateur 2291 Posts	audrasjb a écrit : Ok, tout cela me semble assez pertinent, sauf que j'ai toujours du mal avec le soulignement par défaut, esthétiquement parlant principalement. Comme je l'ai mentionné, tu pourrais essayer avec un border-bottom et un padding-bottom sur tes liens, avec une couleur plus discrète. Peut-être que tu y trouverais un bon compromis entre esthétisme et ergonomie. Une seule pensée constructive, vaut mieux qu'une heure d'efforts futiles.
Fusionnez à froid ! Modérateur 2291 Posts
audrasjb	# 11 Sep 2008 - 22:09:09
aka redpeppers 153 Posts	C'est juste exactement ce que je compte faire, Tony Thanks Modifié par audrasjb (11 Sep 2008 - 22:09) There's no place like 127.0.0.1 ;)
aka redpeppers 153 Posts
Gatsu35	# 23 Sep 2008 - 05:35:21
206 Posts	audrasjb a écrit : C'est juste exactement ce que je compte faire, Tony Thanks En parlant de lien pas vraiment visibles du tout, est-ce qu'il y aurait moyen d'améliorer la visibilité d'un lien sur le forum, afin qu'on puisse clairement le différencier du texte ?
206 Posts
Prévenir un modérateur