<C²: webløg />

Courriel - email address

Avatar Denis

lundi 13 janvier 2003
par Denis Boudreau

Accessibiliser les tableaux HTML

Contrairement à ce que certains seraient tout à fait en droit de penser par les temps qui courent, le recours aux tableaux HTML n'est pas un crime condamnable par la loi. Lorsqu'ils sont utilisés pour organiser des données tabulaires (comme pour un calendrier), les tableaux HTML sont complètement indiqués. Comment pourrait-on en effet structurer plus logiquement un tel type d'information? Avec la tendance actuelle à vouloir évacuer tous les tableaux HTML au profit des CSS, on créé un mouvement de balancier dans nos habitudes qui inévitablement finit par revenir sur lui-même. Si le vôtre est présentement complètement du côté " CSS-ou-mourrir ", je vous conseille de le ramener vers le centre, vers la voie de la raison. Les tableaux HTML ne sont pas une incarnation du diable. C'est seulement lorsqu'ils sont utilisés comme outils de mise en page qu'ils causent des tords difficilement réparables pour les utilisateurs souffrant de limitations physiques. Dans le cas d'un calendrier, l'usage d'un tableau HTML est tout à fait convenable, voire même idéal. Mais encore faut-il le rendre accessible.

La deuxième vague de modifications pour rendre CYBERcodeur.net plus accessible en accord avec les enseignements de " Dive Into Accessibility " consistait à épurer et assainir l'usage de cet unique tableau HTML servant à présenter le survol mensuel de mes carnets. Voici en un coup d'oeil les modfications qui y furent apportées.

  1. Remplacer la première rangée par l'élément <caption> et le placer juste entre les éléments <table> et <tr> pour donner un sens réel au titre du tableau en créant une entête chargée sémantiquement. Ajustement CSS pour lui redonner ses airs de noblesse.
  2. Utilisation de l'attribut "summary" dans l'élément <table> pour indiquer aux agents utilisateurs alternatifs à quoi sert le tableau HTML en question (dans le cas qui m'intéresse, spécifier que le tableau sert à présenter un mois de l'année).
  3. Insertion des attributs "abbr" et "id" dans l'élément <th> pour créer une structure interne logique. Par exemple, la colonne correspondant à Di (dimanche) a son attribut "id" auquel je passe la valeur "dim" et son attribut "abbr" auquel je passe la valeur "Dimanche". L'identifiant est ensuite réutilisé à travers les différentes rangées du tableau pour jumeller les attributs "headers" et "id", tous deux associés à la valeur "dim"... vous êtes toujours là? :)

Outre l'information recueillies dans le document de Mark Pilgrim, je me suis également référé à un article dont j'ai fait mention par le passé, publié sur evolt.org, " Building accessible tables " par wiseguysonly.

Denis Boudreau | 2003.01.13 @ 00:08

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

Ce carnet n'a pas encore été commenté. Avez-vous envie de briser la glace ?

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)