Utilisation de technologies obsolètes et détournement de balisage : l'exemple du formulaire d'inscription du Grenelle du Très Haut Débit
Par Victor Brito, le lundi 25 août 2008, à 19h56 - Accessibilité - Lien permanent
Tristan Nitot est très remonté contre le formulaire d'inscription en ligne du site du Grenelle du Très Haut Débit : dans un billet publié tout à l'heure, il rapporte qu'il lui est impossible d'utiliser le formulaire d'inscription en ligne et découvre, non sans consternation, que l'inscription en ligne est optimisée pour IE 7
! 
Le fait que le formulaire d'inscription est optimisé pour un seul navigateur (et, qui plus est, pour une seule version dudit navigateur) est un manque flagrant d'accessibilité : quand bien même Internet Explorer serait le navigateur le plus répandu et quand bien même la version 7 tendrait à dépasser, cette année, la version 6, il ne faut jamais oublier qu'il existe bon nombre d'utilisateurs suffisamment bien informés et éclairés sur les nouvelles technologies pour naviguer sous d'autres navigateurs, comme Firefox ou Opera, voire adopter un système d'exploitation autre que Windows, où Internet Explorer est, bien entendu, inexistant.
Et ce n'est pas tout. En jetant un rapide coup d'œil au code source de la page du formulaire d'inscription, on constate que le doctype utilisé (HTML 4.01 transitionnel) est tronqué (l'URL de la DTD n'y figure pas), ce qui signifie qu'IE (à partir de la version 6) bascule en mode Quirks
: autrement dit, il se comporte comme IE 5.5 pour le modèle de boîte (inclusion des marges intérieures et des bordures dans la largeur et la hauteur des blocs, quoi qu'en dise le modèle de boîte standard) et les marges automatiques (qui sont alors ignorées, obligeant à recourir à text-align: center, une propriété CSS qu'IE interprète mal, en l'appliquant aux éléments de bloc, alors que cette propriété ne permet que de centrer du contenu au fil du texte). Bref, cela n'est pas sans rappeler la directive 11.2 des WCAG 1.0 : Avoid deprecated features of W3C technologies.
(en français : Éviter d'utiliser les options des technologies du W3C qui ne sont plus supportées.
). En outre, on constate que la mise en page est à l'ancienne, sous forme de tableaux, une pratique que la directive 5.3 des WCAG 1.0 demande d'éviter : Do not use tables for layout unless the table makes sense when linearized.
(en français : Ne pas utiliser les tables pour la mise en page, à moins qu'elles n'aient un sens lorsqu'elles sont déchiffrées en mode linéaire.
).
Et je ne parle pas de l'absence de l'attribut alt dans l'image du bandeau d'en-tête ni de l'absence d'association explicite des champs de contrôle du formulaire et de leur intitulé… Bref, consternant, comme le dit si bien Tristan Nitot. 


Commentaires
... et le formulaire est inutilisable sans javascript...
... et la désactivation des CSS fait apparaître des ** Erreur ** plutôt bizarres...
Par contre une fois linéarisée la page semble toujours consultable donc l'utilisation de tableaux n'est pas l'erreur la plus gênante.
Et elle le serait encore moins si le développeur responsable connaissait l'élément label...
Je voudrais réagir par rapport à la directive 5.3 des WCAG 1.0 qui est correctement citée, mais mal interprétée.
La directive demande à ce que si on fait un layout à l'aide de tableau, alors on s'assure de la bonne linérarisation des informations (en gros que l'ordre de lecture des cellules permettent de comprendre le sens).
Les problématiques de layouts sont beaucoup plus complexe que cela et il est impossible de demander aujourd'hui de ne pas utiliser du tout de tableau pour du layout (le problème est que de nombreux comportements de layout ne sont possible qu'en utilisant des tableaux).
Pour certains comportements de layout (comme le fait d'aligner deux blocs de façon à ce qu'il forment deux colonnes côte à côte de même hauteur, par exemple), il est tout à fait possible de les reproduire sans utiliser de tableau pour la mise en forme, grâce aux CSS et à la propriété
)…
displayassociée à des valeurs commetable-cell, et ce avec succès sous Firefox, Opera et Safari. Pour IE (jusqu'à la version 7), bien entendu, il faut trouver une autre parade, que je laisse deviner (vu que ce n'est pas le sujet du billetToujours est-il qu'un tableau en HTML, sémantiquement parlant, doit contenir des données qui sont naturellement présentées sous forme de tableau, ce qui, à mon avis, est loin d'être le cas pour le formulaire dont il est question.
[un peu d'humour]
Et qui plus est, ça pique aux yeux tellement c'est... "pas beau"...
Pas accessible à ma vue :s
[/un peu d'humour]