Améliorer les nuages de mots ?

Par Sébastien Billard, 20/03/2006 :: Accessibilité et standards :: #209 :: rss

Les nuages de mots, ou "tag clouds" sont à la mode. On peut en voir ici ou là, et nombreux sont les blogs qui arborent leurs propres nuages de tags.

Aussi interessants soient-il en matière de visualisation, les nuages de mots pourraient éventuellement voir leur accessibilité et leur sémanticité améliorées :

Le point 10.5 des WCAG et la fiche 176 du référentiel Opquast recommandent que les liens adjacents soient séparés par au moins un caractère imprimable ou une image, pour éviter que 2 liens consécutifs soient interprétés comme un seul et même lien. Mettre en place cette directive améliorerait l'accessibilité des nuages.
Les mots composant un nuage sont finalement une liste non ordonnée. Pourquoi donc ne pas utiliser le balisage adequat <ul> ? La mise en oeuvre de cette balise réglerait également le problème des liens adjacents évoqué au dessus.
Le poids des mots est représenté habituellement par la taille des caractères, éventuellement par les couleurs. Il ne s'agit que de présentation, et définir la taille des textes via CSS ne transmet aucune information d'ordre sémantique. Pourquoi ne pas utiliser les 3 niveaux d'emphases que permet le HTML : texte normal, emphase simple et emphase forte ?
Les grands nuages de mots peuvent représenter une quantité importante de liens, rendant leur lecture pénible dans les navigateurs vocaux. L'intégration de liens d'évitement permettrait aux utilisateurs de tels navigateurs de "sauter" le nuage.

Commentaires

1. Le 20/03/2006, par mr_go

Excellent rappel.

J'ajouterai que l'on voit apparaître ce type d'outil dans des sites ou blog à faible contenu, ce qui constitue plus un moyen de "dispersion" de l'internaute qu'un réel apport en terme de navigation.

2. Le 20/03/2006, par obi

le billet de Sébastien est très interessant, concernant le Le poids des mots il serait peut-etre plus simple des mettres en ordre ( les mots important n°1, 2 etc...)

L'intégration de liens d'évitement, voir indispensable :).

3. Le 20/03/2006, par 20cent :: site

Quid de <big> et de ?

4. Le 20/03/2006, par David Duret :: site

Pour ma part, je ne vois pas ce que peut apporter ce type de "fonctionnalités" sinon perdre l'internaute qui n'est probalement pas au fait du web 2.0, des tags et de tout ce qui va avec... pour ce qui est des points énoncés pour l'amélioration, c'est interessant et indispensable, oui.

5. Le 20/03/2006, par Sebastien Billard :: site

Effectivement, la 1ère question à se poser est bien sûr celle de la pertinence de la représentation en nuage, comme le soulignent justement Mr_go et David. A mon avis ce type de représentation devrait être limité à des usage bien spécifiques, comme l'analyse d'un univers sémantique par exemple. Le nuage de point ne devrait amha pas être utilisé comme élément de navigation (ou alors en tant que gagdget accessoire).

20cent : Ces balises sont effectivement valides en HTML 4.01, pas en XHTML strict. Il s'agit de balise de présentation, sans valeur sémantique.

Obi : Un tri des mots par ordre d'importance me paraît également très pertinent.

6. Le 20/03/2006, par David Duret :: site

Les balises "big" et "small" n'ont pas de valeur sémantique mais sont bien présentes dans la DTD XHTML 1.0 Strict ;)

7. Le 20/03/2006, par Thibaud

Bonjour,

Utiliser une liste <ul> me semble de bonne augure en matière de tag mieux d'ailleurs que <ol> car les tags sont souvent organisé de manière alphabétique par soucis esthétique. Par contre, je pense qu'il pourrait être sémantiquement intéressant d'utilise une suite de balise , par exemple tag3 qui donne une plus grande liberté dans l'échelle des dimensions.

8. Le 20/03/2006, par Sebastien Billard :: site

David : effectivement, merci de la correction

Thibaud : je n'avais pas pensé à des "emphases d'emphases", ça semble valide j'ai un peu peur cependant de l'interpretation par les moteurs qui pourraient penser à du spam...

9. Le 20/03/2006, par Thibaud

utilisé entre autre par : www.technorati.com/tag

10. Le 21/03/2006, par Stephane :: site

Bonjour,

Excuez moi, mais je suis un petit nouveau et je comprends pas grand chose... J'essaire modestement d'animer mon blog pro et je me rends compte qu'il y a sans doute plein de choses à faire, mais je ne comprends tous ces mots compliqués en anglais. Simplement, quel est l'intérêt ?

11. Le 21/03/2006, par Henri K :: site

En dehors de l'aspect technique évoqué dans la note, je trouve fort utiles ces nuages de mots qui permettent de trouver des angles d'accès dans un blog. L'amélioration consisterait +tôt à éliminer les mêmes mots (singulier/pluriel) ou des mots de liaison sans intérêt.
Bravo pour la "nomination" Stratégies". Ton blog le mérite bien comme dit l'Oréal...
Henri kaufman

12. Le 23/03/2006, par Matthieu Faure :: site

La bonne solution pour implémenter les nuages de mots-clés est d'utiliser du balisage sémantique, les listes non ordonnées sont effectivement les plus appropriées.

Par contre, les caractères de séparation ne sont pas une bonne idée.

Pour implémenter de manière correcte "l'intensité" d'un mot-clé, l'accummulation de ou balise assimilées est vain. Cela ne produira rien d'exploitable dans une synthèse vocale par exemple.

C'est Blogmarks qui a trouvé la bonne voie: il faut utiliser l'attribut title sur le lien du mots-clés et indiquer une quantification.

Il ne manque à l'implémentation de blogmarks qu'un détail, bien utiliser le title. Le title doit reprendre l'intitulé du lien (critère 6.4 www.accessiweb.org/fr/gui... ) et c'est ce qui manque chez blogmarks. La raison d'être de ce critère est que des aides techniques remplacent l'intitulé du lien par son title, donc si le title ne reprend pas l'intitulé, il y a perte d'information.

Reprenons l'exemple de blogmarsks... argh, l'implémentation de blogmarks a changé entre hier soir et ce matin :(

Bon voici un exemple from scratch alors:

<a href="..." title="accessibilité: tag utilisé par 162 utilisateurs">Accessibilité</a>

Matthieu
PS: le carré mapsurface qui apparait régulièrement sur la zone de saisie est un tantinet énervant (doux ephémisme :) )

13. Le 23/03/2006, par Sebastien Billard :: site

Matthieu : tu dis "Par contre, les caractères de séparation ne sont pas une bonne idée". Peux tu développer ? La solution des listes est bien entendue idéale. Mais si l'on refuse (à tort) d'utiliser des listes, l'usage de caractères de séparation me semble préférable à aucune séparation non ?

PS : quand le carré apparait-il ?? il ne devrait être visible qu'en tappant alt+x

14. Le 23/03/2006, par Matthieu Faure :: site

"Peux tu développer ?": pour une liste courte de liens (et en refusant d'utiliser la sémantique, idiot mais soit), cette technique peut convenir. Pour une liste longue, comme c'est souvent le cas pour les nuages de mots, cela devient vite très énervant.

C'est comme les title de liens qui contiennent systématiquement "aller sur le site qui parle de...". Ca n'apporte rien et ça alourdit considérablement la navigation en synthèse vocale.

PS: mapsurface se déclanche à chaque fois que je tape un caractère accentué (firefox 1.0.7, mandriva 2006). Il encore faudra expliquer aux anglo-saxons qu'il n'y pas que l'anglais dans le monde :(

15. Le 23/03/2006, par Sebastien Billard :: site

Merci Matthieu. Je suis tout à fait d'accord pour l'abus des attributs title. Pour les caractères de séparation je continue de penser que leur usage est préférable à rien du tout, bien que l'usage de listes soit évidement la solution qui s'impose.

16. Le 29/03/2006, par David Duret :: site

Via snook.ca, une idée nouvelle d'implémentation visuelle d'un nuage de mot : commentisfree.guardian.co...

En jouant sur un dégradé de couleurs et en associant le nombre d'occurence de chaque mot, on arrive à quelque chose de très lisible. En revanche, une fois le style enlevé, on perd le sens de l'info, puisque les mots ne sont plus dans l'ordre logique et linéaire qu'on s'attendrait a trouver.

Néanmoins l'idée reste tres interessante et en jouant avec des listes non ordonnées (pour la sémantique) et ensuite un peu de javascript, on pourrait transformer ces listes en tableau tel qu'il apparait dans l'exemple du site.

17. Le 7/04/2006, par katsoura :: site

Pour ton info, on en parle sur ce blog: aixtal.blogspot.com/2006/...

18. Le 7/05/2006, par Olivier :: site

Ma p'tite contribution suite à vos remarques et à mon point de vue perso :
olivier-patry.net/essai/t...

On pourrait encore affiner la chose en donnant une class aux <li> en fonction du "poids" du tag pour dissocier les valeurs en plus des , , /.

Pour récapituler :
* liste non ordonnée ;
* caractères de séparation ajoutés via CSS ;
* changement de taille (pour les daltoniens par exemple) ;
* changement de couleurs (pour accentuer la distinction) ;
* attribut title="nomDuTag : nbOcc occurences" sur le lien ;
* nombre d'occurence ajouté dans un (facilement masquable via CSS si besoin).

Je pense que le résultat est facilement utilisable, donne une bonne indication visuelle, ne prend pas trop de place.

Dans l'exemple ici, il n'y a que 3 niveaux différents, mais c'est bien sûr facilement modifiable.

19. Le 7/05/2006, par Olivier :: site

Oups, désolé, j'ai oublié un point important dans mon truc :

* sémantisation du poids des tags grâce aux balises et (ou rien) ;

20. Le 7/05/2006, par Olivier :: site

Oups, désolé, j'ai oublié un point important dans mon truc :

* sémantisation du poids des tags grâce aux balises et (ou rien) ;

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.

Référencement, Design et Cie