Mercredi 29/06/11

Lire la suite... et la génération de contenu en CSS

@emmanuelc idée saugrenue : une extension #firefox qui remplacerait les "lire la suite" et consorts par leur title explicite si présent.

"Lire la suite" est le texte typique généré par un CMS lorsqu'il tronque un article de page d'accueil. En voici un bon exemple sur le site de mon académie préférée...

C'est à ce tweet d'Emmanuel que je me suis dit que si un webmestre se donnait la peine de renseigner un title, peut-être qu'une propriété dans sa feuille de style pourrait être ajoutée pour que celui-ci s'affiche.

Et comme charité bien ordonnée commence par soi-même, je me suis empressée de rajouter ceci à ma CSS :

p.suite a:after { 
content: " " attr(title);
}

Ce code a pour effet d'afficher le contenu des title de ma page d'accueil.

Explications

Quel intérêt ?

L'intérêt n'est pas seulement de faire plaisir à Emmanuel, même si cela permet de joindre l'utile à l'agréable ;-)

Les règles d'accessibilité indiquent que lorsque 2 destinations de liens sont différentes, alors que le texte des liens est identique pour les 2, il faut compléter l'information via l'attribut title. Cela apporte un confort de navigation évident pour tout le monde, et la présence du title est importante car elle est lue par les lecteurs d'écrans qu'utilisent les mal voyants.

Bien que la génération de contenu soit à utiliser en général avec précaution pour l'accessibilité, son utilisation va ici au contraire l'améliorer.

Donc, on récapitule :

Et voilà, ça prend 2 minutes, et tout le monde est content !

Carrément chouette ton astuce Pascale ! Je note qu'il faut précieusement garder les idées saugrenues, elles peuvent germer là ou le vent les portent sourire.

Emmanuel - 29-06-2011 - 20:56

Ca ne répond tout de même pas vraiment à ton idée d'extension ! Mais bon, comme tu dis, qui sème des idées récolte des réponses clin d'oeil. Mais bien entendu ceci ne peut-être utile qu'avec un CMS.
Sinon, comme le faisait remarquer @kozlika, autant écrire le texte du lien directement !

Pascale - 29-06-2011 - 21:08

Outre que le contenu soit généré en CSS, je suis pas fan de cette solution car elle peut donner des libellés de liens pas forcément compréhensibles (Lire la suite ... Et si on allait à Sud Web ? - écoutez le une fois lue par une synthèse vocale) ou amener à un détournement de l'attribut title qui devrait reprendre l'intitulé du lien et ajouté une information supplémentaire (Lire la suite de l'article intitulé 'Et si on allait à Sud Web ?").

Et puis le critère 2.4.4 de WCAG 2.0 nous dit bien que le contexte compte aussi et qu'un logiciel d'assistance comme Jaws a un raccourci clavier qui lui permet d'accéder
http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms
Tous les cas de figures sont décrits dans les conditions d'application de ce critère
et plus précisément l'exemple 3 de la technique H80 (http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H80)

On parle donc plus de lisibilité que d'accessibilité là non ?

Mes 2 cents.

Frank Taillandier - 29-06-2011 - 21:31

Pour moi c'est de l'incitation à l'accessibilité si cela incite à prendre soin de mettre un contenu au title.

Maintenant, ce soin doit être aussi apporté à la cohérence de l'intitulé bien sûr.

Génération de contenu ou pas, cela ne change rien avec un lecteur d'écran n'est-ce pas ?
Donc, si je prends encore l'exemple de la page d'accueil de l'ac-rouen, que lit le lecteur d'écran ?
- Lire la suite après la 3ème ;
- Lire la suite C'est l'été découvre un métier ;
- Lire la suite Information épreuve de mathématiques de la série S du baccalauréat
- Lire la suite ZoscarZ ceremony : and the winner is....

Je serais plutôt tentée de dire, en lisant cela, que la génération du contenu aurait l'avantage de montrer au webmestre que les intitulés ne sont peut-être pas des plus judicieux au contraire !

Quant aux détournements, sans doute. Il y en a toujours des suffisamment tordus pour imaginer des choses pas possibles. Mais ont-ils besoin de cela pour le faire ? clin d'oeil

(sinon, faudrait me suivre si tu veux que je réponde à tes messages privés sur twitter !...)

Pascale - 29-06-2011 - 23:39

Hello,

Je ne sais pas encore vraiment par quoi commencer, j'ai plusieurs remarques autour de cet article (pas forcément liées à l'accessibilité, hein :))

- L'idée saugrenue de @emmanuelc
J'adore ! Excellente idée, qui devrait être assez simple à réaliser.
(Hors sujet : j'ai toujours voulu me pencher un peu sur les extensions pour Firefox, je crois que je vais finir par le faire parce que j'ai un paquet de petites idées à faire germer. Quelqu'un connait de bonnes ressources ?)


- Le pseudo-élément after
Je l'utilise déjà depuis plusieurs années pour mettre en avant dans les liens des informations fournies via des attributs HTML. Par exemple, lorsque je renseigne hreflang="" sur un lien, la valeur de celui-ci est affichée (exemple http://tentatives-accessibles.eu/)

Notons cependant qu'actuellement les aides techniques (surtout les lecteurs d'écran) ne restituent pas les informations remontées via le pseudo-élément after.
L'information sera donc annoncée à l'utilisateur seulement si l'attribut est géré par l'aide technique (c'est bien le cas de l'attribut title sur les liens, ce n'est pas le cas de l'attribut hreflang sur les liens).


- L'attribut title et l'accessibilité
Pour l'accessibilité (puisque tu en parles dans ton article), il est toujours préférable d'afficher un intitulé de lien explicite directement entre <a> et </a>.
Notamment parce que très souvent le title ne s'affichera pas (navigation clavier, certains navigateurs mobiles...) et en fonction des restitutions le lien ne sera pas clair pour tous (petit écran où le contexte du lien n'est que peu visible, styles désactivés...).

Ton idée est donc tout à fait intéressante !

Mais, penchons-nous plus en détails sur le cas des lecteurs d'écran.
Au-delà les normes et référentiel existants, l'utilisation de l'attribut title doit être faite avec parcimonie. Un exemple, avec le lecteur d'écran Jaws, j'ai au moins 5 possibilités de réglages :
1. Lire seulement l'intitulé des liens ;
2. Lire seulement le title des liens s'il est présent ;
3. Lire le plus long des deux (intitulé ou title) ;
4 et 5. Lire les deux dans l'ordre que l'on souhaite.

Il est donc impossible de savoir avec exactitude ce qui sera retourné à l'utilisateur et c'est pour ça qu'il est préférable de limiter au maximum l'utilisation de title="" sur les liens quand c'est possible.


- Pourquoi faire simple quand on peut faire compliqué ? (KISS)

(j'arrive au bout :))
Je trouve intéressante l'idée d'Emmanuel, parce qu'elle permettrait à un utilisateur d'afficher des intitulés plus explicites sur des sites qui ont préféré afficher les "Lire la suite" seuls.

L'idée que tu proposes Pascale, est géré au niveau de l'éditeur du site.
Si les propriétaires du site (ou les contributeurs) sont prêts à afficher clairement l'intitulé du lien à tous leurs visiteurs, alors pourquoi ne pas le faire directement entre et ?

Sur ta page d'accueil, pourquoi ne pas écrire directement "Lire la suite sur la propriété @font-face" (sachant que cela reste également automatisable) ?


Sébastien.

PS : je n'ai pas répondu au commentaire de Franck, mais la récupération du contexte d'un lien avec les aides techniques est pour l'instant un doux rêve qui ne fonctionne que sur Jaws (et seulement dans quelques cas particuliers). Pour l'instant, je conseille de continuer à rendre ses liens explicites.

Sébastien Delorme - 30-06-2011 - 08:13

Je vais commencer par répondre à ta dernière question Sébastien : ces lieux sont un laboratoire où le code change et évolue au gré de mes expériences et de mes envies. Certaines choses sont automatisées, d'autre non, et en tout cas tout est de moi ! Ce qui explique qu'il y a régulièrement des pétouilles qu'il faut que je corrige (comme dans ces commentaires par exemple !)
Donc cette application, réalisée ici, n'a que l'exemple en vertu et il ne faut le prendre que comme tel clin d'oeil.

Donc, cette méthode n'est bien sûr, en pratique, valable que pour un CMS. Il est parfaitement évident qu'en cas contraire il est plus simple de modifier directement le code.
Donc là je pense à quelqu'un qui utiliserait SPIP sans savoir modifier un squelette par exemple. Je ne sais pas si JOOMLA fait la même chose, mais cela pourrait être valable aussi pour lui, etc.

En ce qui concerne les lecteurs d'écran, le problème est toujours le même : on ne peut jamais savoir comment l'utilisateur a configuré son interface et donc comment cela va être transcrit. Ce problème est aussi valable pour quelqu'un qui définit sa propre feuille de style. A aucun moment le webmestre et/ou le rédacteur n'a de pouvoir là dessus.
On aura donc toujours des contre exemples.

Là j'aurais donc envie de dire (attention, troll inside tire la langue ) : "j'ai prévu pour le fonctionnement standard des configurations par défaut. Si l'utilisateur a changé cette config il sait que cela peut engendrer des désagréments, il faut qu'il les assume".
Quel est le fonctionnement par défaut de JAWS ou NVDA ? texte de lien + title ? Si oui, il faut faire en fonction de ça, mais si c'est lien tout seul alors il faut porter l'effort sur le texte mis en lien.
Donc celui qui configure title + lien... wouah ! mais comment veux-tu qu'on puisse prévoir une combinaison de textes qui fonctionnerait dans les 2 sens (lien+title ou title+lien) dans le cas de la présence d'un title ? Mission impossible, faut faire des choix.

Bon, je dis ça pour faire de la provoc clin d'oeil mais je suis entièrement d'accord avec toi sur tous les points que tu as indiqué :
- l'utilisation de ::after et ::before est limitée par son implémentation qui n'est pas à 100%. Donc il ne faut les utiliser que si cela donne un plus qui n'enlève rien à l'information ou aux fonctionnalités en cas de non restitution (j'ai d'ailleurs les mêmes utilisations que toi sur le hreflang par ex.).
- Rien ne vaut un lien bien explicite quand cela est possible sourire

Pascale - 30-06-2011 - 13:05

Les commentaires de ce billet sont fermés.

| Avant | Archives | Haut de page |