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

Date de publication
19/mars
2006
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

Partager

Pour faire un lien vers cet article, vous pouvez utiliser soit son URL canonique soit son URL courte :

http://gasteroprod.com/a556

Billets avec les mêmes tags

Derniers billets

  • Faut-il continuer à supporter Internet Explorer 6 ?

    Article initialement publié dans le blog de Clever Age.

    On ne va pas ergoter sans fin, tout le monde doit maintenant savoir que Internet Explorer 6 — IE6 pour les intimes — est un navigateur obsolète et dangereux. Et pourtant, certains continuent à l’utiliser. Faut-il les en dissuader, refuser de leur fournir son support, aller même jusqu’à leur empêcher l’accès, ou faut-il continuer à supporter (les faiblesses de) ce navigateur ?

    Date de publication
    22/juillet
    2010
    Tags
    Clever Age, Internet Explorer, standards

  • Les inscriptions à Paris Web 2010 sont ouvertes !

    Paris Web 2010, c’est la cinquième édition de ce rendez-vous français annuel, devenu incontournable, pour se tenir informé des bonnes pratiques de développement Web. Go go go !

    Date de publication
    2/juillet
    2010
    Tags
    Paris Web, qualité, standards

  • Faciliter la reprise de tweets (les retweets) à l’ancienne sur Twitter

    Même si Twitter a mis en place depuis maintenant un certain temps un mécanisme natif de retweets1, je préfère souvent continuer à utiliser les « RT » traditionnels, qui laissent la possibilité de commenter le tweet initial, ce que ne permet pas le retweet officiel. Une règle qui me paraît essentielle pour faciliter le retweet à l’ancienne, c’est de prévoir une taille de tweet suffisamment faible pour que le retweeteur voit son travail facilité, surtout si le tweet initial ne contient que très peu de mots inutiles.

    Date de publication
    14/juin
    2010
    Tags
    Twitter

Derniers commentaires