Vous pourriez préférer naviguer sur la version spécifique iPhone / iPod Touch de ce site...

Comment faire un tag cloud (nuage de tags, ou d’étiquettes) accessible ?

Date de publication
19/mars
2006
Commentaires
13 commentaires
Tags
, , ,

Vous avez déjà sans doute vu sur un site un « nuage d’étiquettes » — tag cloud en anglais — représentant la liste des sujets abordés, en mettant en avant les sujets les plus courants par un effet de grossissement.

Si ce n’est pas le cas, voici un exemple de tag cloud sur Flickr, qui représente les tags les plus utilisés depuis le lancement du service :

Sur Gastero Prod, j’ai mis en place ce mécanisme assez astucieux de listage des thèmes abordés, à la fois dans la colonne de navigation, et sur une page dédiée aux tags :

Sur cette page, je peux lister les tags par ordre alphabétique, ce qui est l’usage classique, mais aussi par ordre d’importance, c’est à dire selon le nombre d’articles auxquels ils sont associés, ce qui est plus pratique sans doute pour les utilisateurs de synthèses vocales ou autres outils non graphiques de navigation.

C’est que je m’interroge justement sur la façon optimale de rendre accessible ces fameux tag clouds.

La plupart des solutions implémentées ne sont à mon avis pas satisfaisantes de ce point de vue, pour différentes raisons :

Une liste, déjà, ce serait pas mal...

Certains n’utilisent tout simplement pas des éléments de type listes — <ul> ou <ol> [1] — pour lister les tags, mais se contentent de mettre les tags les uns après les autres.

La taille, c’est une information purement visuelle

Certains utilisent bien des listes, mais jouent sur l’importance relative des éléments en affectant directement une taille à chacun, via un attribut style en ligne, ce qui n’apporte aucune information sémantique — et donc plus accessible — d’importance relative.

Près du but

Certains autres, enfin, apportent un début de sémantisation du contenu en montrant l’importance relative de chaque élément avec des balises <em> imbriqués, mais je ne pense pas qu’une imbrication de plusieurs balises identiques ait un réel intérêt pour l’accessibilité.

Est-ce qu’une synthèse vocale fera la différence entre les deux éléments suivants :

  • <em><em>tag1</em></em>
  • <em><em><em>tag2</em></em></em>

Je n’en suis pas sûr...

L’unique solution ?

La meilleure solution que j’ai trouvée à ce jour, c’est d’exploiter le fait que la balise <strong> permet comme son nom l’indique de marquer une strong emphasis [2], alors que la balise <em> a pour objectif de marquer une emphase simple.

Il m’est donc possible de différencier trois niveaux d’importance relative des éléments de ma liste :

  • Minimum : <li>tag</li>
  • Moyen : <li><em>tag</em></li>
  • Maximum : <li><strong>tag</strong></li>

C’est sûr, c’est moins joli que les solutions qui utilisent beaucoup plus de variantes de tailles, mais au moins c’est censé être plus accessible.

Une petite amélioration reste possible

Maintenant que le contenu est relativement accessible, rien n’empêche de rajouter de l’information en plus pour les heureux utilisateurs de navigateurs graphiques, en ajoutant par exemple des informations de taille aux éléments.

Cette information a bien un sens pour ceux qui peuvent l’exploiter, donc je ne pense pas que l’on puisse m’accuser de poluer le contenu avec de la présentation. Parfois, la présentation donne un sens.

Restent tout de même quelques questions

  • Est-ce que tout ça est vraiment accessible, ou est-ce que je me prends la tête pour rien ?
  • Est-ce que, si la solution est bonne, elle peut être améliorée en ajoutant un niveau utilisant l’imbrication <strong><em>tag</em></strong> [3] ?

Quoi qu’il en soit, voici une nouvelle preuve que la quête de l’accessibilité est loin d’être simple, et c’est toujours en tatonnant qu’on arrive à déterminer pragmatiquement les solutions les plus pertinentes.

Notes

[1] Lequel selon vous, est le plus pertinent ?

[2] Et non de mettre en gras, attention !

[3] Est-ce que cela sera bien interprété différemment des balises seules dans au moins un outil de navigation ?

RSS

Commentaires

Commenter cet article

  • 13 avril 2006 13h58, Stephane Deschamps

    Un petit coup de titles ?

    Merci d’avoir partagé ça, je me posais la question « à vide » parce que je n’utilise pas les tags, mais c’est toujours intéressant de se poser des questions théoriques :)

    Il y aurait peut-être moyen de passer par les titles, aussi, pour raffiner le résultat.

    Mettons qu’on ait non pas trois niveaux mais des pourcentages (parce que tu dois, j’imagine, partir de ce genre de système) ou n’importe quel système de gradation. Et si en plus de ton calcul j’associais des titles sur les liens ?

    Par exemple, quelque chose comme ça :

    • rendu sémantique HTML :
      • 0-33% : rien
      • 34-66% : em
      • 67-100% : strong
    • code de titles :
      • 0-15% : <a href="..." title="tag: très peu utilisé">tag</a>
      • 16-33% : <a href="..." title="tag: assez peu utilisé">tag</a>
      • 34-50% : <em><a href="..." title="tag: peu utilisé">tag</a></em>
      • 51-66% : <em><a href="..." title="tag: moyennement utilisé">tag</a></em>
      • 67-85% : <strong><a href="..." title="tag: assez utilisé">tag</a></strong>
      • 86-100% : <strong><a href="..." title="tag: très utilisé">tag</a></strong>

    Question qui n’a (presque) rien à voir : tu utilises la contribution « mots partout » pour gérer facilement tes mots-clés spip, ou tu fais tout « à l’ancienne » ?

    PS : c’est bien mieux de ne pas être obligé de s’authentifier à chaque passage sur ton site pour laisser un commentaire... :)

    Répondre à ce commentaire

    • 19 juin 2006 10h55, Olivier G.

      Un petit coup de titles ?

      Et pourquoi ne pas tout simplement mettre l’information de fréquence ’en dur’ après le tag (par exemple : SPIP <span>95/100</span>), puis cacher se span (display : none) dans la feuille de styles screen (et projection, handheld).

      Répondre à ce commentaire

      • 21 juin 2006 19h27, Nicolas Hoizey

        Un petit coup de titles ?

        Je trouve cela moins pertinent que ce que je propose, notamment parce qu’avec un grand nombre de contenus, le pourcentage sera faible pour tous les tags, ce qui au final ne voudra rien dire...

        Répondre à ce commentaire

        • 21 juin 2006 19h39, Nicolas Hoizey

          Un petit coup de titles ?

          Mais c’est vrai qu’une alternance de termes plus ou moins mis en emphase ne sera pas forcément interprétée très simplement par l’utilisateur d’un terminal braille ou d’une synthèse vocale, qui « lisent » en séquence et ne permettent pas un apperçu global en un coup d’oeil.

          La meilleure approche pour les accès non visuels est donc sans doute la liste ordonnée, mais comment déterminer si l’accès est visuel ou non ?

          Répondre à ce commentaire

          • 23 septembre 2006 16h39, têtue

            Plutôt une liste ordonnée !

            Un truc me gêne dans l’ajout de la mention du poids du mot en title : ça ne rend pas compte de l’ordre de lecture des tags.
            En effet, le nuage de tags distingue visuellement les mots les plus ’importants’ en les affichant + gros, ce qui m’amène à les lire en premier. Je ne m’intéresse aux autres mots que dans un second temps.
            Ceci m’amène à préférer, pour une lecture non visuelle, une liste ordonnée des mots les plus importants aux moins importants.

            Répondre à ce commentaire

    • 21 juin 2006 19h26, Nicolas Hoizey

      Un petit coup de titles ?

      Et si en plus de ton calcul j’associais des titles sur les liens ?

      C’est une idée, mais j’ai peur que ça fasse au final trop d’information à « lire », alors que l’idée des nuages de tags est de simplifier l’apperçu des thématiques fortes.

      Question qui n’a (presque) rien à voir : tu utilises la contribution « mots partout » pour gérer facilement tes mots-clés spip, ou tu fais tout « à l’ancienne » ?

      Je fais tout à l’ancienne, et j’avoue que ça commence à devenir compliqué. Je n’ai jamais testé « mots partout », mais je crois avoir lu que ce n’est pas finalisé.

      PS : c’est bien mieux de ne pas être obligé de s’authentifier à chaque passage sur ton site pour laisser un commentaire... :)

      Pour l’instant je n’ai pas trop de SPAM, donc ça reste comme ça, heureux que ça plaise... ;-)

      Répondre à ce commentaire

      • 30 juillet 2006 22h03

        Un petit coup de titles ?

        o la la , ça existe pas tout fait ? genre une page à télécharger ? pour savoir comment faire !

        K

        Répondre à ce commentaire

        • 10 août 2006 22h53, Genzo

          Un petit coup de titles ?

          Tout dépend comment tu gères la chose. Soit avec un champ pour chaque enregistrement (tags séparés par des virgules), soit dans une table spécifique, avec une clé étrangère correspondant à l’enregistrement auquel le tag se réfère. La première solution est bien meilleure niveau volumétrie. Mais elle impliquera obligatoirement une table pour les tags, car les urls doivent être purgés de caractères spéciaux.

          Répondre à ce commentaire

  • 15 septembre 2006 11h08, NOche

    Comment faire un tag cloud (nuage de tags, ou d’étiquettes) accessible ?

    Pourquoi ne pas non plus utiliser les balises de titres h1, h2, h3 (ou suivants) comme ça il y a une notion d’importance sémantique pour l’accessibilité et la présentation peut être facilement gérée.

    Répondre à ce commentaire

    • 15 septembre 2006 11h29, Nicolas Hoizey

      Comment faire un tag cloud (nuage de tags, ou d’étiquettes) accessible ?

      Parce que :

      • d’une part, le nuage est en général présent dans une page où se trouvent déjà ces éléments hiérarchiques
      • et surtout, d’autre part, parce qu’ils permettent d’exprimer une hiérarchie, et non une importance relative. Un h2 doit être dans un h1, alors qu’un tag est plus ou moins important qu’un autre, mais pas forcément "inclus" sémantiquement

      Répondre à ce commentaire

  • 10 décembre 2007 16h49, Guizmow

    Comment faire un tag cloud (nuage de tags, ou d’étiquettes) accessible ?

    Il suffit pour cela d’utiliser les balises H1 H2 etc de jouer sur la taille de la typo car google prends en compte ces infos de mailleure façon que les balises li ou em imbriquées.

    Répondre à ce commentaire

RSS

Derniers articles

Derniers commentaires