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.

Je partage tout à fait les soucis de Laurent de différencier les documents et les applications, et je vois bien l’intérêt de la plateforme XUL / XPFE de Mozilla ou de ses cousins XAML / Avalon [1] chez Microsoft, MXML / Flex chez Macromedia [2] ou OpenLaszlo.

Mais comme l’indique bien cette liste — pourtant non exhaustive — de solutions disponibles, le principal problème est une fois de plus de trouver laquelle de ces technologies répond le mieux et le plus durablement à un besoin et des contraintes donnés.

Si l’on parle d’accessibilité, la possibilité d’accéder à une application via le Web depuis n’importe quel navigateur est un critère important, et là XUL / XPFE [3] et XAML / Avalon [4] sont écartés d’office [5], alors que MXML / Flex a l’avantage de s’appuyer sur la très largement répendue plateforme cliente Flash. Mais c’est une solution propriétaire... Reste alors son challenger logiciel libre OpenLaszlo, qui semble bien prometteur.

Dans un même temps, l’usage des technologies standards du Web évolue très rapidement [6], et la déferlante AJAX qui redonne des couleurs vives au HTML vieillissant n’est pas près de s’essoufler. On en reparle prochainement...

C’est un autre Nicolas, Nicolas Tallet, qui m’a donné envie d’écrire cela, avec son compte-rendu simple mais si intéressant sur une session de navigation avec Yasmina et JAWS.

Ce Nicolas là, je l’ai découvert parce qu’il a commenté très sympathiquement une discussion que j’ai eu sur la liste des Pompeurs avec Sam Latchman, à propos du design du nouveau site que je viens de (presque) finir pour Jacqueline, Marketing Planet.

Revenons à nos moutons...

Yasmina, donc, est documentaliste à la bibliothèque municipale de Chambéry, à la Médiathèque Jean-Jacques Rousseau pour être plus précis, dans l’espace déficients visuels du pôle sciences et loisirs. Elle est aveugle, Yasmina, et Nicolas en parle régulièrement, mais c’est dans cet article qu’il relate l’intéressante expérience de navigation avec Yasmina et son JAWS, c’est à dire son logiciel de synthèse vocale qu’elle utilise pour naviguer sur Internet.

Et c’est là que l’on se rend compte de l’importance de vérifier quelques principes de base pour permettre réellement à tout un chacun d’accéder au web, principes très clairement expliqués dans ce qui reste à ce jour la meilleure référence en la matière, « plongez dans l’accessibilité ».

Allez, je vais aller rapidement faire un tour sur mes différents sites pour vérifier ce qu’ils donnent ... Normalement, Marketing Planet s’en sort bien à ce niveau, comme c’est expliqué sur sa page standards et accessibilité.

L’interview de Lhorens Marie, Directeur Web et Technologies de Cosmosbay-Vectis par le Journal du Net est intéressante, puisqu’elle montre que l’accessibilité est enfin un sujet dont il est possible de parler dans les parutions « grand public ».

Elle permet de donner aux lecteurs des indications sur l’état du marché, tout comme la chronique que nous avons publiée très récemment sur ce même sujet : Usabilité, Accessibilité et ... réalité.

Par contre, ses réponses aux questions concernant d’éventuels projets pilotes et la disponibilité d’outils de gestion de contenu respectant les standards montrent qu’il n’a peut-être pas encore collecté toutes les informations nécessaires à ce sujet. A moins qu’il ne profite tout simplement de cette tribune pour le terrain pour sa société qui va « commercialiser une offre dans le courant de l’été pour pâlier à ce manque ».

Il ne parle ainsi pas du tout de l’association BrailleNet, dont les travaux ont pourtant justement été repris par l’ADAE qu’il site.

De plus, il ne parle pas du projet SPIP-Agora initié par le SIG [1]], dont l’objectif est de fournir aux administrations, et de manière plus large à tout le monde en le livrant en open source, un outil de gestion de contenus web répondant aux directives de l’ADAE, dont l’accessibilité.

Clever Age travaille depuis deux ans avec le SIG sur ce projet, dans le respect des recommandations de BrailleNet.

SPIP-Agora est déjà utilisé pour gérer plusieurs sites gouvernementaux :

• http://www.retraite.gouv.fr/
• http://www.europe.gouv.fr/
• http://www.forums.gouv.fr/
• etc.

Mais il est aussi déjà utilisé par d’autres acteurs non négligeables, dont l’ANPE.

L’accessibilité a encore du chemin à faire, mais il semble que la bonne voie soit maintenant prise, même si nombreux seront sans doute ceux qui essairont de tirer profit plus que de raison de la nouveauté du sujet pour beaucoup de leurs clients.

L’accessibilité devient petit à petit incontournable.

Outre ses avantages directs en terme d’élargissement d’audience des sites, elle a tendance dans sa mise en oeuvre à favoriser l’usage de technologies standards, ce qui a de nombreux autres avantages.

Mais il ne suffit pourtant pas d’utiliser des standards pour atteindre l’accessibilité, encore faut-il bien les utiliser, en respectant avant tout une sémantique correcte.

Il faut aussi surtout ne pas croire que l’accessibilité ne soit dédiée qu’aux handicapés, elle est une problématique générale avant destinée à donner la chance à tout utilisateur d’accéder à un contenu.

Quelques principes appliqués sur Gastero Prod

Le nouveau code du site est constitué de contenus structurés en XHTML 1.0 Transitional valide et mis en forme à l’aide de feuilles de styles CSS 2.0.

Cela permet notamment d’être sûr que ceux qui ne peuvent pas (ou ne veulent pas) exploiter les feuilles de style, peuvent tout de même consulter le site sans problème :

Sans feuille de style

Affichage dans Mozilla Firebird avec la feuille de styles désactivée

En mode texte

Affichage dans Lynx, navigateur en mode texte

Mais cela n’empêche pas pour autant ceux qui en ont la capacité de profiter d’un site avec une identité graphique qui lui est propre et qui n’est pas forcément la plus minimale qui soit :

Normal

Affichage dans Mozilla Firebird avec la feuille de style

Enfin, qui dit graphisme ne signifie pas forcément contrainte sur les tailles de tous les éléments, il est tout à fait possible de laisser le choix à l’utilisateur de sa taille de police par défaut.

En caractères agrandis

Affichage dans Mozilla Firebird avec une taille de police supérieure et des colonnes ajustées en conséquence

Un peu d’usabilité

Des « raccourcis » clavier vous permettent d’accéder rapidement, sans utiliser votre souris, à des éléments du site :

Elément concerné	Touche
Page d’accueil	a
Moteur de recherche	r

Voici la procédure à employer pour utiliser par exemple la touche a :

• sous Windows, avec la combinaison alt + a
• sous Macintosh, avec la combinaison ctrl + a ou pomme + a

Pas de styles alternatifs

Gastero Prod ne propose pas de feuilles de styles alternatives.

Je préfère largement le rendre réellement accessible en laissant la possibilité à l’internaute d’utiliser un outil spécialisé ou de configurer son navigateur traditionnel.

Je ne comprends pas cette tendance actuelle de fournir une tonne de mises en pages alternatives en faisant croire que c’est là pour accroître l’accessibilité, alors que c’est surtout un moyen de montrer la compétence en CSS du développeur.

Si le site n’est pas naturellement accessible avec sa mise en page par défaut, il y a de bonnes chances pour que ce style switcher ne soit même pas exploitable par quelqu’un ayant cette problématique d’accessibilité.

Cela ne m’empêche pas de penser comme beaucoup que css Zen Garden est très intéressant, mais je ne vois pas l’intérêt que chaque site devienne un tel laboratoire en puissance.

Au boulot !

Cette refonte ayant permis d’enfin séparer comme il faut le contenu et le contenant, mais ayant consommé pas mal de temps, il devient nécessaire de se reconcentrer sur les contenus pour accroître la fréquence de publication !

Et si vous souhaitez être tenu au courant des publications, n’hésitez pas à exploiter le flux RSS, il est maintenant au format RSS 2.0.