La version 0.2 du plugin est disponible en téléchargement et dispose désormais d’une page dédiée.

Obligé de passer sous Windows Vista — pré-installé sur le dernier ordinateur que j’ai acheté — je ne peux plus tester la compatibilité avec Internet Explorer 6 des sites que je développe. Selon MSDN, le code de ce navigateur est trop dépendant du noyau Windows pour pouvoir fonctionner sous Vista. En d’autres termes, le premier logiciel totalement incompatible avec le nouveau système de Microsoft est… conçu par Microsoft !

Le problème est que Vista a encore peu pénétré les entreprises, la plupart sont sous XP et utilisent encore Explorer 6 (voire IE5.5, dans le pire des cas). Microsoft semble dire  : tant pis pour eux (et tant pis pour les concepteurs de sites) ! Le cynisme et la capacité de nuisance de Microsoft ne cesse de me sidérer. L’entreprise ne mériterait qu’une chose, c’est que plus personne dans le monde n’utilise Explorer (oh, comme tout serait simple alors, et comme le web y gagnerait en qualité !)

La seule alternative proposée est l’installation d’un PC virtuel avec une image de Windows XP (de 640 Mo tout de même, et limitée dans le temps qui plus est) permettant de faire tourner IE6 : solution d’une lourdeur effarante quand il est juste question de tester la présentation d’un site sous le plus mauvais navigateur qui soit (après IE5, il est vrai).

Les développeurs des autres navigateurs, Firefox, Opera et compagnie doivent être de véritables génies pour parvenir à sortir des logiciels fonctionnant aussi bien sur XP que Vista !

J’ajouterais que, du point de vue ergonomique, modifier l’aspect des éléments de formulaire est une erreur. Certes, ils ne sont pas toujours très esthétiques et la tentation est grande d’en adapter l’apparence au décor de la page. Mais une règle fondamentale de l’ergonomie veut que l’on présente aux utilisateurs les éléments d’interface sous l’aspect qui leur est le plus familier. Ce n’est plus le cas si chaque concepteur s’amuse à redéfinir le style des contrôles (avec le succès mitigé que l’on sait).

Il me semble plus raisonnable de laisser le navigateur gérer lui-même leur aspect et de se contenter de les mettre en page proprement. Comme souvent, la solution la plus simple est la plus pertinente. Il ne faut pas oublier qu’une page web n’est pas du print et — n’en déplaise aux purs graphistes et agences de communication — qu’il est illusoire, et parfois même non souhaitable, de vouloir en gérer précisément tous ses aspects.

Le site est pour l’instant partiellement déployé : seules sont traitées les questions d’accessibilité des sites web. Mais il est prévu à terme d’y adjoindre des recommandations concernant la téléphonie et la télévision.

Un appel à commentaires est lancé sur le site, afin que chacun puisse faire des remarques et apporter ainsi sa contribution à cette très bonne initiative.

Je vois une double utilité à ce site : il pourra servir de référence aux prestataires, mais également sensibiliser les commanditaires aux questions d’accessibilité. Ce devrait déjà être le cas — la loi sur l’égalité des droits, et notamment des droits d’accès à l’information numérique, étant entrée en vigueur depuis deux ans — mais à voir la piètre qualité (pour rester courtois) de la plupart des sites publics et leur ignorance des règles les plus élémentaires d’accessibilité, on mesure le chemin qu’il reste à parcourir !

N’oublions pas non plus, ainsi que le souligne très justement Élie Sloïm, que l’accessibilité des sites internet publics est une obligation morale avant d’être une obligation légale.

J’ai récemment été amené à travailler sur le graphisme et l’ergonomie d’un logiciel basé sur le dōjō toolkit. Outre des temps de chargement et d’initialisation assez conséquents (qui peuvent paraît-il être un peu réduits en fonction des réglages choisis), le code HTML généré est déplorable. J’ai dû me pencher sur ce code afin de mettre au point mes feuilles de style, et plus d’une fois je me suis écrié « quelle horreur ! »

Petite illustration : l’application utilise des onglets auxquels j’ai appliqué la technique bien connue des sliding doors, décrite en détail dans deux articles d’A List Apart¹. Pour créer ce type d’onglet, le code HTML nécessaire et suffisant est le suivant :

1. <div id=”tabs”>
2. <ul>
3. <li><a href=”…”>Accueil</a></li>
4. <li class=”current”><a href=”…”>Informations</a></li>
5. <li><a href=”…”>Produits</a></li>
6. </ul>
7. </div>

Voici maintenant le code généré par dōjō pour obtenir les mêmes onglets :

1. <div style=”width: 100%; height: 100%;” class=”dojoTabContainer dojoLayoutContainer”>
2. <div style=”left: 0px; top: 0px; bottom: auto; right: auto; width: 595px;” class=”dojoTabLabels-top dojoAlignTop” role=”wairole:tablist” wairole=”tablist” dojoattachevent=”onKey”>
3. <div dojoinsertionindex=”0″ class=”dojoTab current” dojoattachevent=”onClick”>
4. <div dojoattachpoint=”innerDiv”>
5. <span style=”-moz-user-select: none;” role=”wairole:tab” dojoattachpoint=”titleNode” tabindex=”0″ wairole=”tab”>Accueil</span>
6. <span dojoattachpoint=”closeButtonNode” class=”close closeImage” style=”display: none;” dojoattachevent=”onMouseOver:onCloseButtonMouseOver; onMouseOut:onCloseButtonMouseOut; onClick:onCloseButtonClick”></span>
7. </div>
8. </div>
9. <div dojoinsertionindex=”1″ class=”dojoTab” dojoattachevent=”onClick”>
10. <div dojoattachpoint=”innerDiv”>
11. <span style=”-moz-user-select: none;” role=”wairole:tab” dojoattachpoint=”titleNode” tabindex=”-1″ wairole=”tab”>Informations</span>
12. <span dojoattachpoint=”closeButtonNode” class=”close closeImage” style=”display: none;” dojoattachevent=”onMouseOver:onCloseButtonMouseOver; onMouseOut:onCloseButtonMouseOut; onClick:onCloseButtonClick”></span>
13. </div>
14. </div>
15. <div dojoinsertionindex=”2″ class=”dojoTab” dojoattachevent=”onClick”>
16. <div dojoattachpoint=”innerDiv”>
17. <span style=”-moz-user-select: none;” role=”wairole:tab” dojoattachpoint=”titleNode” tabindex=”-2″ wairole=”tab”>Produits</span>
18. <span dojoattachpoint=”closeButtonNode” class=”close closeImage” style=”display: none;” dojoattachevent=”onMouseOver:onCloseButtonMouseOver; onMouseOut:onCloseButtonMouseOut; onClick:onCloseButtonClick”></span>
19. </div>
20. </div>
21. </div>
22. </div>

On constate le recours systématique à des balises sans signification (<div> et <span>), la présence de nombreux attributs non standards et de styles imbriqués. Le code généré par dōjō est non seulement incroyablement lourd, mais il n’est pas proprement structuré, ne respecte pas les standards HTML et n’établit pas de séparation claire entre le contenu et sa présentation.

Ce n’est qu’un cas parmi d’autres et mon propos n’est pas de dénigrer dōjō en particulier. Cet exemple est simplement destiné à mettre en évidence les défauts inhérents à ce type de frameworks, qui produisent certes des applications rutilantes estampillées « web 2.0 », mais qui font frémir d’horreur si l’on soulève le capot !

Un autre défaut de ces galeries est de se consacrer exclusivement aux sites internet, passant sous silence tout un pan du design web qui concerne les intranets et les interfaces web d’applications. Ce sont pourtant des domaines très intéressants, avec des lois différentes, des problèmes spécifiques qui aboutissent parfois des solutions très ingénieuses. Je suis assez régulièrement amené à travailler dans ce domaine que j’apprécie car il requiert une bonne part de réflexion sur l’ergonomie, tout en offrant davantage de liberté sur le plan graphique (moins de contraintes sur la taille des images, possibilité d’utiliser des fontes non standards, etc.)

Ces jours-ci encore, un client m’a confié la conception de l’interface d’un de ses logiciels et j’ai plaisir à imaginer diverses manières de présenter l’application. Mais j’ai rencontré au départ un peu d’incompréhension lorsque j’ai parlé d’ergonomie. Certains de mes contacts pensaient qu’un joli décor suffisait, alors que chaque élément doit être pensé pour guider l’utilisateur et l’assister dans son travail. Il suffit d’ailleurs parfois de peu de choses : bien positionner un élément, lui attribuer une forme ou une couleur particulière peut faire toute la différence.

Sans changer fondamentalement l’aspect du site, le parti-pris de cette nouvelle présentation est d’allier la modernité au classicisme, dans un esprit conforme à celui de l’écrivain. Cette option se reflète notamment dans le choix des caractères : le Georgia pour le corps des articles et les titres, le Verdana pour toutes les autres parties (navigation, contenus annexes, pied de page). Certes, les caractères à empattement ne sont pas du meilleur effet sur un écran, mais le Georgia, avec son gros œil, demeure assez lisible en corps 12 ou 13 avec un interlignage généreux.

Pour qui se soucie de typographie, l’Internet engendre bien des frustrations : caractères grossièrement définis, manque de contrôle sur leur taille et leur crénage, impossibilité d’effectuer des césures, etc. Mais le web offre en contrepartie des avantages sur l’édition papier : hypertexte, recherche de mots clés, contenu facile à modifier. Il faut donc accepter les compromis et faire au mieux avec les limitations du support.

Si vous utilisez Firefox, vous pouvez installer l’extension Dublin Core Viewer, qui affiche les métadonnées qu’il rencontre sur une page web. (j’ai constaté que certains éléments ne sont pas reconnus par cette extension, notamment publisher.url et rights.rightsHolder).

Qu’est-ce que le Dublin Core ?

La Dublin Core Metadata Initiative (DCMI) publie, documente et normalise un format ouvert permettant de décrire de façon simple et non ambiguë des documents sur internet. On qualifie ces informations de métadonnées car elles ne font pas partie du contenu, mais fournissent des renseignements sur le contenu. Ainsi, pour chaque article de ce site, on trouvera des indications sur son titre, son auteur, sa date de création, sa licence d’utilisation, etc.

À quoi servent les métadonnées ?

Les métadonnées Dublin Core, en décrivant le contenu des ressources documentaires, contribuent à améliorer leur visibilité et leur traitement par certains moteurs de recherche ou d’autres logiciels qui comprennent leur syntaxe. Elles constituent à ce titre une ébauche – encore limitée mais assez répandue – de web sémantique.

En plus des bonnes pratiques applicables à tout site internet, on trouve sur ce document des recommandations pour les services web proposés par le site : e-commerce, syndication, newsletter.

Bref, un mémento bien utile à ceux qui se soucient des question d’accessibilité.

Remarque : le seul (léger) reproche que je ferais à cette plaquette concerne le choix d’un fond bordeaux foncé, qui nuit quelque peu à la lisibilité du texte, imprimé dans un corps assez petit. Du coup, ce mémento n’est pas aussi « accessible » qu’il se devrait de l’être.