Liens de news : lire la suite ou texte?

Bonjour,

Je n'arrive pas à trouver la meilleure solution pour les liens de news.

Imaginons un site internet qui contient en page d'accueil une série d'informations (actualités, derniers articles publiés...). Quelle est la meilleure solution au niveau accessibilité pour faire ces liens?

- Le début du sujet (quelques lignes) en texte, suivi d'un lien "Lire la suite" pour chaque actualité
- Le début du sujet (quelques lignes) directement cliquable ?

==>Il est recommandé d'avoir des liens "parlant" => donc pas de "Lire la suite" ou "en savoir plus"
==>Il n'est pas recommandé d'avoir une phrase complète en lien (on devrait se limiter à quelques mots)

Entre 2 maux, il faut choisir le moindre, quel est votre avis/recommandation?

Bonjour eauriol,

Si le lien est précédé (directement ou indirectement) d'un titre (éléments Hn) il devient alors explicite (il faut bien sûr également que le titre le soit) :

<h1>Mon article</h1>
<p>Description de mon article ...</p>
<p><a href="monarticle.html">Lire la suite</a></p>

Dans le cas contraire, tu peux ajouter un attribut title sur le lien pour l'expliciter.

Expliciter l'intitulé est une autre solution.

Bon continuation.
Romain

Salut,

AMHA, Je dirais qu'un lien "lire la suite de [titre de l'article]" serait plus approprié, car il contient l'action "lire", et indique l'objet de cette lecture.

yodaswii a écrit :
Si le lien est précédé (directement ou indirectement) d'un titre (éléments Hn) il devient alors explicite (il faut bien sûr également que le titre le soit)

Il ne l'est à priori pas pour quelqu'un qui va naviguer au clavier à l'aide d'une synthèse vocale, car il n'aura que les "lire la suite" sans les titres qui les précèdent il me semble (à confirmer).
Modifié par Mikachu (27 Jul 2010 - 10:52)

Mikachu a écrit :
Il ne l'est à priori pas pour quelqu'un qui va naviguer au clavier à l'aide d'une synthèse vocale, car il n'aura que les "lire la suite" sans les titres qui les précèdent il me semble (à confirmer).

<edit>Il existe des raccourcis clavier sur ces technologies d'assistance permettant d'avoir le contexte du lien.</edit>

Après, tout dépend du niveau d'accessibilité souhaité. Sinon, on est d'accord pour dire que ce lien n'est pas explicite hors contexte .
Modifié par yodaswii (27 Jul 2010 - 11:01)

Il n'est pas prévu de titre spécifique pour ces actualités.

1)
<p>Ceci est le début du texte de mon premier article...</p>
<p><a href="monarticle.html">Lire la suite</a></p>

<p>Ceci est le début du texte de mon second article...</p>
<p><a href="monarticle2.html">Lire la suite</a></p>

2)
<p><a href="monarticle.html">Ceci est le début du texte de mon premier article...</a></p>
<p><a href="monarticle2.html">Ceci est le début du texte de mon second article...</a></p>

Salut,

Si l'on tient compte du fait que les dernières versions des lecteurs d'écran offrent un mécanisme permettant d'expliciter le contexte d'un lien (titre de section précédent, attribut title du lien, ou bien paragraphe, élément li ou élément td contenant le lien, sans oublier l'élément th auquel est associé l'élément td contenant le lien), il est envisageable d'avoir la solution suivante :

<h2><a href="article.html">Intitulé de l'article</a></h2>
<p>Texte d'introduction qui met en appétit.</p>
<p><a href="article.html">Lire la suite</a></p>

ou bien celle-ci :

<h2><a href="article.html">Intitulé de l'article</a></h2>
<p>Texte d'introduction qui met en appétit.</p>
<p><a href="article.html" title="Intitulé de l'article, lire la suite">Lire la suite</a></p>

Ces deux solutions sont conformes aux WCAG 2.0 au niveau A et il n'est pas interdit d'employer un lien intitulé « lire la suite » ou « en savoir plus », à partir du moment où des informations supplémentaires (ici, le contenu de l'élément h2 ou l'attribut title du lien en question) permettent d'en expliciter le contexte.

En revanche, si tu vises le niveau AAA des WCAG 2.0, chaque lien doit être explicite hors contexte, ce qui implique une solution semblable à la suivante :

<h2><a href="article.html">Intitulé de l'article</a></h2>
<p>Texte d'introduction qui met en appétit.</p>
<p><a href="article.html">Lire la suite de l'article <em>Intitulé de l'article</em></a></p>

Dans tous les cas, il ne convient pas de faire du texte d'introduction un simple lien, ce qui serait difficilement digeste. Cela dit, ce n'est plus un problème d'accessibilité, puisque les WCAG 2.0 n'imposent aucune limite de caractères aux liens ; autrement dit, la digestion d'un lien très long relève plus de l'ergonomie.

S'il n'est pas prévu de titre spécifique pour présenter le chapeau de chaque article (ce qui est un tort), je ne vois pas d'autre solution satisfaisante que celle-ci (niveau A des WCAG 2.0) :

<p>Texte d'introduction qui met en appétit. <a href="article.html">Lire la suite</a></p>
<!-- Le lien se trouve dans le même paragraphe que le texte d'introduction -->

ou celle-ci (niveau A des WCAG 2.0) :

<p>Texte d'introduction qui met en appétit.</p>
<p><a href="article.html" title="Intitulé de l'article, lire la suite">Lire la suite</a></p>
<!-- S'il y a possibilité de récupérer l'intitulé de l'article -->

ou celle-ci (niveau AAA des WCAG 2.0) :

<p>Texte d'introduction qui met en appétit.</p>
<p><a href="article.html">Lire la suite de l'article <em>Intitulé de l'article</em></a></p>
<!-- S'il y a possibilité de récupérer l'intitulé de l'article -->

Cela dit, je préfère de loin la solution combinant titre de section (avec lien), texte d'introduction (sans lien) et lien « lire la suite ».
Modifié par Victor BRITO (27 Jul 2010 - 11:15)

eauriol a écrit :
Il n'est pas prévu de titre spécifique pour ces actualités.

C'est à mon sens une erreur, car même si ce sont des titres de niveaux 3 ou 4, ces informations mériteraient d'être mises en valeur, pour une meilleure lecture rapide et certainement aussi pour le référencement (dans la mesure ou le titre devrait exister pour la news complète).
Modifié par Mikachu (27 Jul 2010 - 11:20)

Mikachu a écrit :
C'est à mon sens une erreur, car même si ce sont des titres de niveaux 3 ou 4, ces informations mériteraient d'être mises en valeur, pour une meilleure lecture rapide et certainement aussi pour le référencement (dans la mesure ou le titre devrait exister pour la news complète).

Sans oublier que les lecteurs d'écran offrent la possibilité de lister tous les titres de section présents dans la page, ainsi que leur niveau, et de naviguer titre de section par titre de section (fonctionnalité également présente dans Opera lorsque les raccourcis compatibles avec les versions antérieures à 9.5 sont activés).

Bonjour,
tu auras d'autre réponses pertinentes sur ce topic : http://forum.alsacreations.com/topic-6-48810-1-Masquer-un-lien-uniquement-aux-lecteurs-decrans.html

A partir de quelle version d'aides techniques le listage du contexte est opérationnel ?

a écrit :


Quel est le taux de pénétration de la version 11 ?

Comme elle n’est disponible qu’en anglais, le taux de pénétration est inférieur à 1% chez les francophones, mais environ 60% chez les anglophones.

a écrit :

Quelle version de Jaws est la plus utilisée actuellement ?

C’est difficile à dire, mais cela se situe certainement entre les version 8 à 10.

Source : Jaws : Questions et réponses

Si ce mécanisme n'est possible que sur des versions très récentes et que seulement un pourcentage minime d'utilisateurs en est équipé je préfère dans le doute être plus royaliste que le roi sur le coup et invalider les liens qui ne sont pas explicites hors contexte même si le niveau A le permet.

Je ne connais pas la politique des anglo-saxons sur l'aide aux personnes en situation de handicap mais en France je ne suis pas sur que la majorité des internautes ayant besoin d'une aide technique aient les moyens de suivre les mises à jour d'un logiciel comme JAWS.
Modifié par knarf (27 Jul 2010 - 18:50)

QuentinC a écrit :
Que pensez-vous de :

<h2><a href="...">Titre de l'article</a></h2>
<p>Chapeau</p>
<a href="...">Lire la suite <span class="text-indent:-1000000px">de titre de l'article</span></a></p>

Note : j'ai volontairement mis un CSS en ligne pour préciser mes pensées... en réalité il faut bien sûr la mettre à part.

Le lien « Lire la suite » est parfaitement explicite, y compris hors contexte. Cela dit, il peut être judicieux (notamment pour ne pas mettre de côté les utilisateurs utilisant une loupe d'agrandissement ou ayant besoin d'agrandir de beaucoup la taille de police, du moins suffisamment pour que le contexte soit en parti perdu sans avoir à remonter dans la page ou à la faire défiler) d'annuler l'effet de text-indent lorsqu'on survole le lien ou que ce dernier reçoit le focus.

a:hover span, a:focus span, a:active span {
  text-indent: 0;
}

J'ai jaws 11 en anglais et en aucun cas il ne lit le titre précédent quand on navigue avec la touche tab, et ça n'a jamais été le cas avant non plus. Par contre il fait parfois ça avec les tableaux.

Pour information, l'association ceciaa est en train de finaliser la traduction ces temps-ci.... mais le frein principal à l'installation de mises à jour restera de toute façon quand même la politique de l'éditeur, qu'il y ait une version françAise ou non. Certains sont toujours bloqués à la version 7 ou 8 par faute de moyens.

Par contre en ce qui concerne les standards du web, j'ai le sentiment que NVDA est en avance sur jaws, donc il y a peut-être cette fonctionnalité dans les derniers snapshots.

Je n'ai pas eu le temps tout à l'heure de donner mon avis sur la proposition qui consiste à mettre en lien toute une phrase : je pense que ce n'est pas une bonne idée, parce que la fonction du lien est alors très vague. IL y a ça sur VDM.... je n'ai jamais osé cliquer sur le texte d'une VDM, parce que je ne sais pas où ça mène, personne ne me dit que ce n'est pas de la publicité. Bon d'accord, VDM n'est pas un site de référence en ce qui concerne les standards et l'accessibilité, mais c'est juste pour donner un exemple.

Là je comprends pas.

Victor BRITO a écrit :


En revanche, si tu vises le niveau AAA des WCAG 2.0, chaque lien doit être explicite hors contexte, ce qui implique une solution semblable à la suivante :

<h2><a href="article.html">Intitulé de l'article</a></h2>
<p>Texte d'introduction qui met en appétit.</p>
<p><a href="article.html">Lire la suite de l'article <em>Intitulé de l'article</em></a></p>

Donc pour le niveau AAA on considère un lien "lire la suite" non explicite hors contexte.

Et

Victor BRITO a écrit :

Le lien « Lire la suite » est parfaitement explicite, y compris hors contexte.

@knarf : je pense que lorsque Victor dit "Le lien « Lire la suite » est parfaitement explicite, y compris hors contexte.", il se réfère à l'exemple donné (une recommandation de WCAG d'ailleurs) par Quentin :

<a href="...">Lire la suite <span class="text-indent:-1000000px">de titre de l'article</span></a>

Qui, pour le coup, est explicite hors contexte (même si visuellement ça reste "Lire la suite").
Modifié par yodaswii (27 Jul 2010 - 20:47)

Ha ba oui pour le coup le contexte je l'ai zappé

QuentinC a écrit :

Que pensez-vous de :

<h2><a href="...">Titre de l'article</a></h2>
<p>Chapeau</p>
<a href="...">Lire la suite <span class="text-indent:-1000000px">de titre de l'article</span></a></p>

Le choix entre le TITLE du lien et un contenu caché a fait l'objet de diverses polémiques lors de l'élaboration des techniques WCAG2, et n'a pas été tranché dans le cadre de la WAI.

En revanche, côté méthodes d'application française et surtout Accessiweb, la solution du contenu caché est, disons, déconseillée. Sur le fond, elle ne règle pratiquement aucun des problèmes soulevé à propos de TITLE, elle se prête à de très fréquentes erreurs d'implémentation (display:none au lieu du déplacement hors de la zone de visualisation), c'est un bricolage, et enfin, elle n'autorise aucune adaptation du rendu par le biais des configurations d'aides techniques.

Par ailleurs, concernant les liens explicites en contexte : même dans les versions récentes des aides techniques, seule une partie des contextes sont effectivement exploitables actuellement. Ceux qui le sont souffrent de problèmes ergonomiques. Et tous s'avèrent assez difficiles à évaluer pour de nombreux experts en accessibilité (Victor se souvient d'un récent séminaire accessiweb sur la question ).

Bref, TITLE, c'est loin d'être parfait dans les implémentations actuelles (accès clavier, amélioration de la personnalisation du rendu visuel et typographique déjà possible via la configuration de l'OS), mais c'est beaucoup mieux qu'un contenu caché...

Sinon, pour compléter ce qui a été bien dit plus haut par Victor : structurer cette liste de news à l'aide de titres de sections est très utile, mais à défaut, ce sera une liste UL plutôt qu'une série de paragraphes...

Et pour conclure sur des perspectives intéressantes: ARIA permettra d'évacuer tout cela... ou bien reconduira une partie des mêmes questions (faut-il utiliser aria-labelledby avec le titre, avec le paragraphe d'exrait de la news, avec une partie de celui-ci ?)
Modifié par Laurent Denis (28 Jul 2010 - 09:21)

QuentinC a écrit :
Le gros problème de title est qu'il est complètement ignoré dans la configuration par défaut de jaws. Du coup, il ne sert à rien pour la plupart des utilisateurs !

Si je peux me permettre, Quentin, et sans nier l'intérêt évident de ton retour sur le sujet, ce n'est pas tout à fait ça : tu illustres le problème très délicat des tests utilisateurs en accessibilité, très bien expliqué par la WAI dans Involving Users in Evaluating Web Accessibility : ce que tu dis ci-dessus est un des retours à prendre en compte, mais il ne peut être décisif à lui seul, outre qu'il concerne l'utilisabilité d'un logiciel donné, et non un problème d'accessibilité à proprement parler.

C'est loin d'être simple. Rapidement, je dirai qu'un des points décisifs en faveur du TITLE est que ses implémentations sont améliorables, alors que le contenu caché... n'a même pas d'implémentation. Mais, comme je le disais plus haut, ARIA aura son mot à dire également.
Modifié par Laurent Denis (29 Jul 2010 - 09:52)