XHTML, CSS, accessibilité : confusions et amalgames

Exploiter les feuilles de style ne veut pas dire obligatoirement réaliser des contenus sémantiquement corrects ou accessibles, ou vouloir lutter contre les tableaux. Décryptage de certaines idées préconçues.

L'utilisation des éléments (X)HTML (DIV en général) associés aux styles CSS devient le nouveau courant d'intégration et de mise en forme des documents pour de nombreuses raisons.

Cette nouvelle "mode" apporte son lot de fanatismes et surtout d'incompréhensions et de mauvaises utilisations. Exemple le plus classique : les concepteurs retirent les tableaux et les remplacent par des divs (et se retrouvent avec autant de divs que de cellules de tableaux...).

Confusions de termes et amalgames

Il ne faut pas confondre CSS, XHTML, Anti-Tableaux, Sémantique et Accessibilité. La mode des CSS se développe tellement vite qu'elle s'accompagne de nombreux amalgames de ce genre.

CSS ne signifie pas obligatoirement "Anti-Tableaux" (tableless)

La Sémantique et l'Accessibilité existaient dès la création du Web : avant même les CSS et XHTML, le web avait pour but de structurer des informations (sémantique) et d'être universel (accessibilité).

Dire : "je me mets aux CSS (ou au XHTML) donc je supprime les tableaux pour la mise en page" est une faute de logique car il n'y a aucune relation directe entre les Feuilles de Style et les tableaux.

Les tableaux ne sont qu'un lot de balises (TABLE, TR, TD, ...) qui appartient au langage HTML et prévu pour structurer des données tabulaires.

Les Validateurs ne sont pas des baguettes magiques

Le W3C déconseille effectivement l'utilisation de tables pour les mises en pages, mais ne l'interdit pas pour autant. Pour preuve, un document structuré sous tableaux peut être Valide en XHTML Strict.

Mais CSS ne signifie pas obligatoirement "Anti-Tableaux" : on ne supprime pas les tableaux pour une question de langage (CSS, XHTML), mais pour une question de Sémantique (les tableaux sont fait pour la structuration de données) et, surtout, pour une question d'Accessibilité (une mise en page tabulaire, surtout imbriquée, n'offre pas de "vision d'ensemble" aux handicapés, notamment aux aveugles)

CSS ne signifie pas obligatoirement "Sémantique"

Dire que "Se mettre au CSS c'est obligatoirement se mettre a créer des documents sémantiquement corrects" est également faux.

Depuis que le HTML existe, rien ne nous a empêché de faire des documents sémantiquement corrects. Le XHTML n'a rien inventé de ce côté.
Les Validateurs ne sont pas des baguettes magiques

A l'inverse vous pouvez très bien concevoir un site Valide XHTML Strict qui n'est pas sémantique pour un sou. Tout simplement parce que les Validateurs ne sont pas des baguettes magiques : ils vérifient si la syntaxe est bonne, si les balises sont propres.

Par contre, il leur est impossible de vérifier si vous avez utilisé les bonnes balises au bon endroit. Ni de savoir si votre paragraphe (p) est bien un paragraphe et non un titre (Hn), etc.

Par exemple, vous pouvez très bien définir un bloc qui fait 70000px de haut. C'est propre et Valide, mais ça ne ressemble à rien. Bref, la sémantique est un travail à part, qui n'est pas automatique en codant en XHTML / CSS

CSS ne signifie pas obligatoirement "Accessibilité"

Comme la Sémantique, l'Accessibilité n'est pas inhérente au XHTML/CSS. Elle suit des normes spécifiques et une liste de points à vérifier. Elle dispose également de Validateurs spécifiques.

Notons quand-même que la démarche de rigueur générale de XHTML ainsi que la prise en compte de la sémantique des balise s'accompagnent souvent d'une facilitation de l'accessibilité des documents Web.

Pour finir : les différences entre XHTML et HTML

Ne pas croire que XHTML est obligatoirement synonyme de CSS. Pour information, je rappelle que les seules différences fondamentales entre HTML et XHTML sont de l'ordre de la rigueur :

- Toute balise ouvrante doit être fermée,

- Balises et propriétés en minuscules,

- Valeurs entre quotes (apostrophes) ou double quotes (guillemets),

- Chaque propriété doit avoir une valeur (pas de propriété vide comme checked, qui doit être écrit checked="checked")

- Les balises doivent être correctement imbriquées C'est tout ! Comme vous le voyez, aucune notion de tableaux, de CSS, de sémantique ni d'accessibilité : ces termes et domaines existent déjà en HTML

Conclusion

Ce petit explicatif est très loin d'être exhaustif, il n'est pas fait pour servir de référence. Il est simplement un petit rappel pour ne pas faire de confusions hâtives entre différents domaines qui, bien que proches, ne sont pas obligatoirement synonymes.

Ce contenu a été réalisé par le Collectif Alsacreations sous licence Creative Commons.