Quels balisages pour un nuage de tag accessible ?

Quels balisages pour un nuage de tag accessible ?

Les nuages de tags est un type de menu qui a mis du temps à s’imposer comme mode de navigation. L’article de Sébastien Billard d’avril 2008 montrent bien la difficulté que le nuage de tag à eu pour rentrer dans les habitudes de navigations.

Il faut bien avouer que j’étais également très rétissant au départ sur ce mode de navigation. Pourtant, il présente de nombreux avantages et plus particulièrement dans le monde des blogs, il permet de savoir d’un seul coup d’oeil sur quelles thématiques le blog veut se faire référencer.

Par voir de conséquence, on connaît également l’activité de l’auteur sur ces thématiques. Il a également l’avantage de fournir une structure de menus avec beaucoup d’élément de premier niveau sans trop chargé la page. Dans toutes autres organisations, on ne pourrait pas se permettre d’avoir 60 entrées au premier niveau. On aurait forcément une arborescence plus complexe avec des titres de catégories souvent très générique et ne reflétant pas réellement le contenu.

Mais, les nuages de tags ont la particularité d’être visuelle, mais dans le cadre dans d’un site accessible comment transmettre cette information ? On trouve souvent un balisage par des listes à puces (ul) ou des listes numérotés (ol), c’est déja un bon début, mais cela ne traduit pas la notion de poids que véhicule les différentes tailles.

On peut donc rajouter un attribut title sur chaque lien du menu pour indiquer le nombre de lien se trouvant derrière le tag. Les balises strong et em qui ont pour sémantique respectivement emphase forte et emphase simple permette de préciser au moins en partie 3 grands groupes de liens dans les nuages de tags. On a donc un code qui ressembles à :

<ul> 
    <li><a href="..." title="Tag de faible importance (12 articles)">Tag de faible importance</a></li> 
    <li><em><a href="..." title="Tag de faible importance (25 articles)">Tag d'importance moyenne</a></em> </li> 
    <li><strong><a href="..." title="Tag de faible importance (50 articles)">Tag de forte importance</a></strong></li> 
</ul> 

Cependant, cette structure limite le nombre de niveau à 3. Nous ne disposons pas d’autre balise pour marqué la hiérarchie de l’importance des tags. La seule solution pour avoir plus de niveau est d’introduire des classes CSS, elle n’aura pas d’influence sur la sémantique mais permet de donner une information plus complète pour ceux qui ont la chance de voir correctement.

On aura finalement un code du genre :

 
<ul> 
    <li><a href="..." title="Tag de très faible importance (12 articles)">Tag de très faible importance</a></li> 
    <li><em class="faible"> <a href="..." title="Tag de faible importance (12 articles)">Tag de faible importance</a></em></li>
    <li><em class="moyen"> <a href="..." title="Tag d'importance moyenne (25 articles)">Tag d'importance moyenne</a></em></li> 
    <li><strong class="important"><a href="..." title="Tag de forte importance (50 articles)">Tag de forte importance</a></strong></li> 
    <li><strong class="tres-important"><a href="..." title="Tag de très forte importance (50 articles)">Tag de très forte importance</a></strong></li> 
</ul> 
</pre>
comments powered by Disqus

Voir aussi

CMS basé sur des frameworks

CMS basé sur des frameworks

Le début des années 2000 à marqué l’avènement des CMS. A cette époque, il pouvait être considéré comme les seules solutions viables pour des …

Quel approche adopter pour faire un site Web accessible ?

Quel approche adopter pour faire un site Web accessible ?

L’accessibilité des sites Web est enfin prise en compte lors de la conception. Or, est-il possible de faire un site Web accessible comme on …

Javascript, flash et synthèse vocale

Javascript, flash et synthèse vocale

Pour les non-voyants, je vais mettre une alternative au javascript et aux flash que je vais cacher le contenu en css. Voila une phrase que j’ai …

Premier pas avec la synthèse vocale

Premier pas avec la synthèse vocale

Depuis pas mal de temps, je m’intéresse à la problématique de l’accessibilité des sites Web. On trouve aujourd’hui plus en plus de …

A la une
  • Rencontre du numérique 2019 - Nîmes
  • référencement naturel d'un hôtel
  • Développeur eZ Platform
  • Tech lead Symfony
  • Expert Qualité Web

Copyright - Sylvain FIX

2009 - 2019