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

Date de publication
19/mars
2006
Commentaires
17 commentaires
Tags
accessibilité, blog, Gastero Prod, tag

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 emphasis2, 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 ?

Commentaires

Commenter ce billet

RSS

Commentaires déjà déposés

  • 13 avril 2006 à 13h58
    Commentaire de Stephane Deschamps

    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 message

    • 19 juin 2006 à 10h55
      Commentaire de Olivier G.

      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 message

      • 21 juin 2006 à 19h27
        Commentaire de Nicolas Hoizey

        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 message

        • 21 juin 2006 à 19h39
          Commentaire de Nicolas Hoizey

          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 message

          • 23 septembre 2006 à 16h39
            Commentaire de têtue

            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 message

    • 21 juin 2006 à 19h26
      Commentaire de Nicolas Hoizey

      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 message

      • 30 juillet 2006 à 22h03
        Commentaire d'un anonyme

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

        K

        Répondre à ce message

        • 10 août 2006 à 22h53
          Commentaire de Genzo

          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 message

  • 15 septembre 2006 à 11h08
    Commentaire de NOche

    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 message

    • 15 septembre 2006 à 11h29
      Commentaire de Nicolas Hoizey

      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 message

  • 10 décembre 2007 à 16h49
    Commentaire de Guizmow

    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 message

  • 23 octobre 2008 à 16h53
    Commentaire de Valentin

    “La taille, c’est une information purement visuelle”
    Faux ! Les mots sont dans des balises jouent une grande importance en terme de référencement (le but d’un nuage ^^)

    Répondre à ce message

  • 30 janvier 2009 à 13h38
    Commentaire d'un anonyme

    Salut !
    Moi, les nuages de tags ça me fout hors de moi. Comment faire pour les bloquer. J’en ai marre que ça pollue MON navigateur...

    Répondre à ce message

Backtweets

Avec les mêmes tags

Derniers billets

Derniers commentaires