Liens "Lire la suite" pour des actualités. Soulignés ?

Salut à tous,

Je me penche sérieusement sur l'accessibilité pour le site d'une mairie. Une des questions que je me pose, est il nécessaire de souligner les liens "Lire la suite" pour une zone d'actualité ?

Le texte est en noir et les liens en bleu. Partant de là j'affirmerai que oui mais il me faut un argumentaire sûr pour faire passer l'idée au graphiste : "désolé je suis obligé de modifier cela sur ta maquette".

Merci

Bonjour,

L'important est de réserver les soulignements pour les liens, mais le soulignement en lui-même n'est pas une obligation. Il faut seulement s'assurer que l'utilisateur peut facilement différencier les liens du reste du texte.

Tu peux faire une recherche sur Opquast pour voir les bonnes pratiques concernant les hyperliens.
Modifié par Tony Monast (28 Oct 2010 - 13:14)

Hello,
Tout dépend du noir, et tout dépend du bleu...

Non, plus sérieusement, je pense que si la couleur entre les deux est assez marquante, cela peut suffire. Si les couleurs sont très proches, alors il faut trouver une "marque" supplémentaire, du style un soulignement, une icone...

Pour avoir une idée de la différence de couleur, il existe des outils sur le web (mais j'ai plus les noms la), ou sinon recul toi de l'écran et essaie de distinguer les différences de couleurs entre les liens et le texte.
Modifié par vdo93 (28 Oct 2010 - 13:14)

Bonjour,

J'ajoute au commentaire de Tony que si les autres liens de la page sont soulignés, il vaudrait mieux que ceux-ci le soient aussi (un élément ayant le même comportement doit avoir le même aspect).

Salut,

En termes d'accessibilité, il n'est pas nécessaire de souligner les liens si le rapport de contraste entre la couleur du lien (ton bleu) et la couleur du texte environnant (ton noir) est égal ou supérieur à 3:1. Tel est l'esprit du critère 10.6 d'Accessiweb 2.1 sur les liens dont la nature n'est pas évidente, comme c'est le cas d'un lien signalé uniquement par la couleur. Le test 7.10 du RGAA ne dit pas autre chose (même s'il ajoute une exigence de distinction supplémentaire au focus).
Modifié par Victor BRITO (28 Oct 2010 - 13:30)

Merci à tous pour réponses, j'apprécie de trouver autant d'aide sur le sujet .

J'ai mis en ligne mon intégration en cours, il s'agit de la zone centrale. Le contraste n'est donc pas assez fort, j'opte donc pour le souligné.

Tant que vous y êtes, je suis ouvert aux critiques et remarques sur ce qui a déjà été fait.

Merci.

dldstyle a écrit :
Tant que vous y êtes, je suis ouvert aux critiques et remarques sur ce qui a déjà été fait.

Il y a un salon pour ça.

Bonjour,

Petite remarque en passant, si tu t'intéresses à l'accessibilité je suis pas sur que des intitulés de liens "lire la suite" soit pertinent.

Lire <a href="mon_article.html">Titre de mon article</a>

Serait mieux je pense

knarf a écrit :
Bonjour,

Petite remarque en passant, si tu t'intéresses à l'accessibilité je suis pas sur que des intitulés de liens "lire la suite" soit pertinent.

Lire <a href="mon_article.html">Titre de mon article</a>

Serait mieux je pense

Dans l'idéal, oui. Cela dit, il est possible de laisser un lien de type « Lire la suite » tel quel si le contexte permet de l'expliciter. Par exemple :

<h2>Titre de l'article</h2>
<p>Chapeau</p>
<p><a href="mon_article.html">Lire la suite</a></p>

ou bien :

<p><a href="mon_article.html" title="Lire la suite de l'article Titre de l'article">Lire la suite</a></p>

Victor BRITO a écrit :

Dans l'idéal, oui. Cela dit, il est possible de laisser un lien de type « Lire la suite » tel quel si le contexte permet de l'expliciter.

T'es certain de ça? Je croyais qu'avec un synthèse vocale, on pouvait extraire tous les liens de la page pour en faire une liste, et dans un tel cas, le contexte est bien entendu absent, d'où l'intérêt de construire ses liens de façon explicite sans se fier au contexte.

Tony Monast a écrit :
T'es certain de ça? Je croyais qu'avec un synthèse vocale, on pouvait extraire tous les liens de la page pour en faire une liste, et dans un tel cas, le contexte est bien entendu absent, d'où l'intérêt de construire ses liens de façon explicite sans se fier au contexte.

J'ai déjà eu l'occasion d'en parler dans ce salon, notamment ici et là (la flemme de me répéter ).

Ça me va parfaitement comme précision! Merci Victor!
Modifié par Tony Monast (28 Oct 2010 - 22:19)

Bonjour,

dldstyle a écrit :
Tant que vous y êtes, je suis ouvert aux critiques et remarques sur ce qui a déjà été fait.

j'en ai une sur ce qu'il a été prévu de faire, à savoir la #flashzone "emplacement bandeau flash" / "Bandeau de défilement de communications importantes".
On va imaginer que ce sera du Flash (et j'ai pas eu besoin de ma boule de cristal pour ça) et qu'il faudra surtout pas que le visiteur rate les informations qu'on lui a mis exprès tout en haut dans un splendiiiide <marquee>, informations relatives aux Fêtes du pruneau, du maïs et de la tomate.
Il sera accessible ce flash ? Est-il prévu une alternative par exemple à la fin de la balise object, une alternative mise à jour en même temps que le flash et pas manuellement tous les 3 mois au début puis plus du tout ?
Ce serait dommage qu'un non-voyant rate une info comme "demain le Lot est en crue, barrez-vous" n'est-ce pas ?

Une fois que c'est fait, existe-t'il un mécanisme permettant de mettre en pause ce *@#£ de défilement que j'ai pas le temps de lire parce que je suis malvoyant ou qui me donne des nausées parce que je souffre de vertiges ?
Et de reprendre le défilement quand c'est en pause.

Titres> pour la colonne centrale c'est nickel. Par contre tes h4 viennent après le titre du dossier du mois en h3, or ils n'en dépendent pas. Ces h4 devraient donc être tous des h2.

Contraste> le blanc sur vert n'a probablement pas un contraste suffisant mais j'ai pas mesuré avec Color Contrast Analyser

Agrandissement à 200% (6 coups de zoom dans Fx)> pas mal , il n'y a que les h2 À la Une et Dossier qui sont en blanc sur blanc. Dommage ce sont des titres importants mais que le reste supporte le zoom à 200% est bon signe

Formulaire> le bouton OK ... OK quoi ? Tu peux rajouter un title="Rechercher sur le site" mais le mieux reste un bouton "Rechercher"

Liens d'évitement> tu aurais la place pour 2 liens Aller au contenu / Aller au menu au-dessus de la date (je dirais même à la place de la date m'enfin si le client veut sa date ... ) avec la même méthode qu'ici. Au survol c'est pas top mais pour ceux qui naviguent au clavier (ceux qui ont vraiment besoin de ces liens !) les liens restent affichés même après qu'on les ait quitté. Il faut évidemment que ces liens viennent en tout premier dans le code HTML quitte à les faire flotter à droite.
Inconvénient : on va louper les infos "ultra-importantes" de la zone Flash

Plan du site> j'en vois pas.

Fil d'Ariane > y en a-t-il dans les gabarits de pages de contenu ?

Langue > aucune indication. lang="oc" ou lang="fr" ?

vdo93 a écrit :

Pour avoir une idée de la différence de couleur, il existe des outils sur le web (mais j'ai plus les noms la), ou sinon recul toi de l'écran et essaie de distinguer les différences de couleurs entre les liens et le texte.

Voici deux liens pour récupérer Colour Contrast Analyzer qui est très pratique :
http://www.wat-c.org/tools/CCA/1.1/
http://www.paciellogroup.com/resources/contrast-analyser.html#download
Modifié par Jordi (29 Oct 2010 - 10:58)

Merci à tous tout d'abord pour vos réponses. Ma demande d'avis sur le code était plus liée à l'accessibilité qu'à sa structure, c'est pour cela que je me suis permis de demander ici

J'avais déjà parcouru le forum pour cette histoire de lien "Lire la suite" et j'ai placé un title dessus.

<h3><a href="#">Titre article</a></h3>
<p>Lorem ipsum dolores</p>
<div class="News"><a href="#" title="Titre article, lire la suite">Lire la suite</a></div>

Pour répondre aux points soulevés par Felipe :
> Je ne suis pas emballé par le flash mais le graphiste y tient. J'ai lu qu'il était possible d'ajouter du texte d'évitement pour le contenu du flash, c'est ce qui sera proposé. Quant à la question de la mise à jour régulière, j'espère que cela sera le cas mais ce sera à la mairie de le faire depuis leur interface d'administration et même s'ils seront sensibilisés lors de la formation au CMS, rien ne garantit que cela sera fait (comme le alt sur les images et compagnie )

J'avais lu les contraintes liées au animations sur le texte, je demanderai à ce que le flash dispose d'un "bouton" pour arrêter / reprendre le défilement.

> Les titres h4 qui devraient être des h2. En fait ce sont les titres des menus, ils n'ont aucun niveau hiérarchique avec le h2 du "Dossier du mois". Comme ce sont des contenus récurrents, qui n'ont pas forcément de rapport direct avec le contenu principal de chacune des pages, je pensais qu'il ne fallait pas les mettre en h2 justement, pas sûr non plus qu'il faille les mettre en Hn. Si ce n'est pas le cas, comment les coder ?


> Concernant le texte blanc sur fond blanc en zoomant à 200%, j'ai trouvé une astuce mais il faut modifier le design du background comme j'ai fait, je dois faire valider cela par le graphiste. Merci d'avoir mis le doigt dessus. Ce que j'ai appris, c'est l'histoire du zoom à 200% qui correspond à 6 coups de zoom dans FF

> Le bouton du formulaire de recherche, je trouve cela un peu lourd, il y a déjà le label, j'ai donc ajouté un title, je pensais que le alt="Rechercher sur le site" suffisait.

> Liens d'évitement : je les ai placé avec la même technique que sur Alsacréations

> Plan du site : j'en mettrai un en footer

> Le fil d'ariane, son emplacement est prévu dans les pages intérieures, à la place de "Bienvenue..."

> La langue oubliée dans le code, la honte sur moi , je l'ai placée.

Merci beaucoup

Donc Victor on en reviens aux même constat.

J'ai une version récente je peux, malgré certains problèmes d'après Laurent-Denis avoir le contexte et si je n'ai pas les moyens d'avoir une version à jour je me tape les liens "lire la suite" incompréhensible vu qu'il n'y a pas de possibilité d'avoir le contexte.

En fait c'est le cul entre deux chaises ou je suis WCAG2 et je valide des liens "lire la suite" avec contexte sachant que je risque de mettre une catégories d'utilisateurs dans l'embarras ou j'invalide sachant pertinemment que WCAG2 me l'autorise.

Les experts accessiweb ont quel retour là dessus c'est quoi la tendance ? Vous suivez WCAG2 et validez ?
Modifié par knarf (29 Oct 2010 - 18:44)

knarf a écrit :
En fait c'est le cul entre deux chaises ou je suis WCAG2 et je valide des liens &quot;lire la suite&quot; avec contexte sachant que je risque de mettre une catégories d'utilisateurs dans l'embarras ou j'invalide sachant pertinemment que WCAG2 me l'autorise.

Ma préférence irait à valider. Au bout d'un moment il faut arrêter d'optimiser pour les anciens UA, et récupérer du temps et de l'énergie pour exploiter les possibilités des nouveaux UA (genre le support d'ARIA).

Bien sûr tout est une question de mesure. Je pense par exemple que le schéma classique suivant ne devrait pas poser problème:

<hn><a>Titre de l'article 1</a></hn>
<p>Intro de l'article 1</p>
<a>Lire la suite</a>
<hn><a>Titre de l'article 2</a></hn>
<p>Intro de l'article 2</p>
<a>Lire la suite</a>

Les "lire la suite" ne sont pas compréhensibles hors contexte. Mais c'est un problème très relatif si la liste des liens donne ceci:

- Titre de l'article 1
- Lire la suite
- Titre de l'article 2
- Lire la suite

Le contexte est pour ainsi dire restitué.
Donc la solution la plus simple à mon avis est de s'assurer qu'on a un lien également sur un texte explicite, en général avant le lien à l'intitulé générique.
Si on a uniquement des liens «lire la suite», là je serais d'avis d'invalider. Car même avec un lecteur d'écran moderne, on va probablement avoir un résultat dont l'utilisabilité sera faible.

(Je dis tout ça en tant que néophyte, pas expert AccessiWeb, RGAA ou WCAG2.)
Modifié par Florent V. (29 Oct 2010 - 19:33)

Florent V. a écrit :

Au bout d'un moment il faut arrêter d'optimiser pour les anciens UA, et récupérer du temps et de l'énergie pour exploiter les possibilités des nouveaux UA (genre le support d'ARIA).

Le problème est que changer la version d'un navigateur est gratuit changer la version d'un JAWS par exemple c'est loin de l'être et vu comment le handicap est considéré en France j'ai un peu des doutes sur la mise à niveau du parc actuel de n'importe quelle aide technique payante.

C'est bien gentil de vouloir toujours être au top du hype mais je trouve que là, c'est bien une réaction de valide "pfff! z'ont qu'à mettre leur JAWS à jour je vais pas perdre 5 minutes à mettre les bons intitulés de liens" en tout cas c'est comme cela que je le ressens et je ne suis pas en situation de handicap.

Maintenant si je classe tes liens dans un ordre alphabétique j'ai quoi ?

Faut ce titre
Je veux ce titre
Lire la suite
Lire la suite
Lire la suite
Lire la suite
Pourquoi ce titre ?
Quoi il est pas bien mon titre ?

La restitution est déjà plus la même.

Maintenant on prends la structure suivante

<h2>Intitulé d'un article</h2> 
<p>Court texte d'introduction.</p> 
<p><a href="URL-de-l-article.html">Lire la suite</a></p>

Si je suis le début de ton intervention je valide vu qu'il faut arrêter d'optimiser pour les anciens UA.

Mais vu que l'on se retrouve avec que des liens "lire la suite" (fin de ton intervention) je ne valide pas.

C'est pas un peu contradictoire tout ça ?


Donc sous prétexte d'évolution, une pratique non validée auparavant peux l'être maintenant quitte à poser des problèmes.

Donc c'est pour ça que je voulais savoir ce que faisait en général les experts accessiweb.

Suivent-ils WCAG2 à la lettre ou invalident-ils vu qu'il semblerait d'après Laurent-Denis qu'il y ai eu des discussions à ce sujet ?
Modifié par knarf (30 Oct 2010 - 05:02)

knarf a écrit :
C'est bien gentil de vouloir toujours être au top du hype mais je trouve que là, c'est bien une réaction de valide "pfff! z'ont qu'à mettre leur JAWS à jour je vais pas perdre 5 minutes à mettre les bons intitulés de liens" en tout cas c'est comme cela que je le ressens et je ne suis pas en situation de handicap.

Ce n'est ni un effet de mode ni un quelconque mépris des utilisateurs (ne suivant pas les mises à jour couteuses ou autres).

On est tous d'accord pour dire qu'un lien explicite hors contexte est préférable à un lien explicité en contexte. Mais c'est selon le niveau d'accessibilité visé. Il me semble des plus logiques de s'extraire des défauts et autres manquements des technologies d'assistance (WCAG != UAAG).

knarf a écrit :
Donc c'est pour ça que je voulais savoir ce que faisait en général les experts accessiweb. Suivent-ils WCAG2 à la lettre ou invalident-ils vu qu'il semblerait d'après Laurent-Denis qu'il y ai eu des discussions à ce sujet ?

Avec le référentiel AW 2.1 (et en tant qu'EAE) : je valide le critère 6.1 (Bronze) : "Chaque lien est-il explicite (hors cas particuliers) ?" et invalide le critère 6.3 (Or) : "Chaque intitulé de lien seul est-il explicite hors contexte (hors cas particuliers) ?".

Des précisions sur ces discussions évoquées (lien à ta disposition) ?
Modifié par yodaswii (31 Oct 2010 - 02:06)

dldstyle a écrit :
J'avais lu les contraintes liées au animations sur le texte, je demanderai à ce que le flash dispose d'un &quot;bouton&quot; pour arrêter / reprendre le défilement.

Si tu cherches de bons exemples existants, tu as la galerie des sites labellisés par Accessiweb (ce ne sont évidemment pas les seuls, mais là il n'y a que de bons exemples )
http://www.accessiweb.org/fr/Label_Accessibilite/galerie_sites_web_accessibles/
Les tout récents sont labellisés Accessiweb 2 (WCAG 2), l'immense majorité selon AW 1.1 (WCAG 1)

dldstyle a écrit :
&gt; Le bouton du formulaire de recherche, je trouve cela un peu lourd, il y a déjà le label, j'ai donc ajouté un title, je pensais que le alt=&quot;Rechercher sur le site&quot; suffisait.

Aargh j'avais pas vu. C'était tout à fait suffisant avec le alt que tu avais, désolé. Tu peux enlever ton title, il n'apporte rien à ton alt.

dldstyle a écrit :
&gt; Liens d'évitement : je les ai placé avec la même technique que sur Alsacréations

Je préfère la version où les liens restent affichés si on a commencé à tabuler dessus, par contre j'ai pas d'exemple montrable (c'est un projet pas encore abouti, mais il doit y avoir d'autres exemples j'ai rien inventé). Bon yapluka faire un tuto et déjà l'implémenter ici