On a traité pas mal de choses à propos des tableaux que ça soit la syntaxe XHTML ou l'habillage par les CSS. Maintenant on va passer au côté 'accessibilité des tableaux'

• Pourquoi parler de l'accessibilité des tableaux ?

• Des tableaux plus accessibles grâce à une légende (caption)

• Des tableaux plus accessibles grâce à un résumé (summary)

• Des tableaux plus accessibles grâce aux en-têtes 'th' (table header)

• Des en-têtes avec les attributs scope ou id et header

  • L'attribut scope

  • Les attributs id et header

• Abréger les en-têtes longs par l'attribut abbr (abréviation)

• Tableaux de mise en page accessibles

• Des tableaux plus accessibles grâce à une taille relative

Pourquoi parler de l'accessibilité des tableaux ?

On évoque généralement l'accessibilité des tableaux, pour les raisons suivantes :

• un navigateur textuel peut ne pas aligner correctement les lignes et les colonnes du tableau. Exemple sous Lynx : Remarquez le tableau, il est un peu difficile à consulter, les cellules 'Total' et '75' apparaissent un peu décalées vers la droite, du fait que le navigateur text-seul Lynx centre horizontalement les en-têtes 'th' ;
• la compréhension d'un tableau peut s'avérer difficile dans un lecteur d'écran, d'où la nécessité d'un titre, résumé et en-têtes ;
• un navigateur vocal lit le contenu du tableau de façon séquentielle : la restitution du contenu des tableaux avec les lecteurs d'écran se fait de manière linéaire : cellule par cellule, de gauche à droite et de haut en bas ;
• un lecteur braille analyse le tableau de façon séquentielle ;
• un petit écran (PDA, Téléphones portables etc.) affiche une petite portion du tableau ;
• les tableaux définis en taille absolue peuvent poser des problèmes de sortie visuelle dans les navigateurs graphiques.

Des tableaux plus accessibles grâce à une légende (caption)

L'élément caption est un outil excellemment fiable, qui permet de passer un titre concis et significatif aux tableaux. La légende permet de remplir plusieurs rôles :

• améliorer l'accessibilité des tableaux dans les navigateurs non graphiques :
  • le navigateur text-seul 'lynx' restitue la légende avec une couleur différente et le mot-clé CAPTION (ou TITRE en français).
  • les navigateurs vocaux prononcent la légende du tableau ce qui rende sa compréhension plus aisée. Par exemple Jaws ou Home Page Reader (HPR) liront :
    "Légende de la table : le taux d'analphabétisme en France".
• les moteurs de recherche indexent le contenu de la légende, ce qui permet de bien positionner vos tableaux.

Des tableaux plus accessibles grâce à un résumé (summary)

L'heure est venue de vous parler de l'attribut summary (résumé), que vous pouvez spécifier à l'élément table. Le contenu de l'attribut summary est destiné strictement aux navigateurs vocaux, et il est généralement lu après la légende du tableau. Supposons le code XHTML suivant :

<table summary="Les répercussions des investissements étrangers sur le niveau d'emploi au Maroc.">
<legend>Les investissements étrangers au Maroc.</legend>
  <tr>
    <td>Bla Bla</td>
    <td>Bla Bla</td>
  </tr>
  <tr>
    <td>Bla Bla</td>
    <td>Bla Bla</td>
  </tr>
</table>

la sortie sonore de ce bout de code XHTML, sous Jaws ou Home Page Reader (HPR) sera :
Légende de la table : Les investissements étrangers au Maroc. Sommaire : Les répercussions des investissements étrangers sur le niveau d'emploi au Maroc."

Notez que le contenu de l'attribut summary n'est pas repris par les navigateurs graphiques. Par contre il est restitué par les navigateurs vocaux et indexé par les moteurs de recherche.

Evitez de dupliquer le titre du tableau (caption) dans son résumé (summary). Car ce dernier doit fournir une information complémentaire à la légende, enrichie et plus longue.

Des tableaux plus accessibles grâce aux en-têtes 'th' (table header)

C'est vrai qu'on peut simuler facilement des en-têtes aux tableaux en passant outre les balises 'th'. En terme d'accessibilité ça n'ajoute aucune valeur, car les en-têtes effectifs sont mieux restitués que les en-têtes fictifs dans les navigateurs vocaux. Faisons la comparaison entre les deux tableaux suivant :

En-têtes fictifs

<table>
  <tr>
    <td><strong>Nom</strong></td>
    <td><strong>Age</strong></td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>30</td>
  </tr>
  <tr>
    <td>François</td>
    <td>40</td>
  </tr>
</table>

Le navigateur vocal, ignorant complètement la structure relationnelle du tableau, lira les données tabulaires d'une façon linéaire :
Nom, Age, Peter, 30, François, 40.

En-têtes effectifs

<table>
  <tr>
    <th>Nom</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>30</td>
  </tr>
</table>

Cette fois-ci, le navigateur n'aura pas de problème à appréhender l'organisation structurelle du tableau, et va le restituer d'une manière facile à suivre par les mal-voyants :
Nom, Peter, Age, 30, Nom, François, Age, 40.

Des en-têtes avec les attributs scope ou id et header

Il est parfois opportun de mentionner explicitement aux navigateurs vocaux, les relations existant entre les en-têtes et les cellules de données tabulaires, surtout dans le cas de tableaux plus ou moins compliqués, dont la compréhension par les lecteurs d'écran n'est pas garantie.

Pour remplir cette mission vous avez le choix entre l'attribut scope qu'on a déjà vu, ou bien la paire id et header. Ces attributs permettent aux lecteurs d'écran de connaître les cellules qui sont couvertes par tel ou tel en-tête.

L'attribut scope

Cet attribut est reconnu par les deux éléments 'th' et 'td', sauf qu'il généralement utilisé avec les en-têtes 'th'. Il accepte deux valeurs : row (ligne) ou col (colonne). Exemple :

• <th scope="col"> : signifie que l'en-tête courant couvre toute la plage de cellules se trouvant dans la même colonne ;
• <th scope="row"> : signifie que l'en-tête courant est associé à toute la plage de cellules se trouvant dans la même ligne.

L'attribut scope peut remplacer avantageusement le couple id et header pour les tableaux dont la structure est régulière (en-têtes de tableaux 'th' avec l'attribut scope).

Les attributs id et header

Pour déclarer qu'un en-tête est relié à telle ou telle cellule, vous devez tout d'abord identifier l'élément 'th' en lui attribuant un id, puis mentionner grâce à l'attribut header les cellules concernées par l'en-tête, en lui affectant l'id de ce dernier.

Exemple : pour relier la cellule 'Japon' à l'en-tête 'pays', mettez : <th id="pays">Pays</th> ..... <td header="pays">Japon</td>. Vous pouvez aussi lier une cellule à deux ou plusieurs en-têtes, en séparant par des espaces les id passés à l'attribut header. Exemple complet :

<table>
  <tr>
    <th id="pays">Pays</th>
    <th id="capitale">Capitale</th>
    <th id="monnaie">Monnaie</th>
  </tr>
  <tr>
    <th headers="pays" id="japon">Japon</th>
    <td headers="japon capitale">Tokyo</td>
    <td headers="japon monnaie">Yen</td>
  </tr>
  <tr>
    <th headers="pays" id="Maroc">Maroc</th>
    <td headers="maroc capitale">Rabat</td>
    <td headers="maroc monnaie">Dirham</td>
  </tr>
</table>

Un navigateur vocal tel que Jaws ou HPR lira : Pays, Japon, Capitale, Tokyo, Monnaie, Yen, Pays, Maroc, Capitale, Rabat, Monnaie, Dirham.

Les attributs id et header sont opportuns dans le cas de tableaux complexes où il y a par exemple des cellules fusionnées.

Abréger les en-têtes longs par l'attribut abbr (abréviation)

Dans le cas où les en-têtes sont dotés de contenu trop long (par exemple 20 caractères ou plus), il convient de les abréger pour réconforter la lecture aux personnes non-voyantes. Il serait trop gênant de répéter à chaque fois un en-tête trop long. Exemple :

<tr>
<th abbr="pays">pays</th>
<th id="pib">produit intérieur brut</th>
</tr

Les navigateurs vocaux liront : 'PIB' au lieu de 'produit intérieur brut'. Notez que l'attribut abbr est aussi valable pour les éléments 'td'.

Tableaux de mise en page accessibles

Des tableaux de mise en page sans en-têtes, légende et résumé

Les tableaux destinés à la mise en page et la disposition du contenu, doivent être formés uniquement avec les éléments : table, tr et td ainsi que les propriétés CSS (formatage et mise en forme des tableaux avec les styles CSS) ou les attributs XHTML dépréciés. Si vous mettez des en-têtes, une légende (caption) et un résumé (summary), ils seront restitués par les navigateurs non graphiques, ce qui pourra être source de gêne, étant donné que ces tableaux ne sont pas destinés à présenter des données tabulaires.

L'ordonnancement du contenu des tableaux de mise en page

Comme je viens de le mentionner en haut, la lecture du contenu des tableaux par les lecteurs d'écran se fait de manière linéaire et séquentielle : cellule par cellule, de gauche à droite, de haut en bas. Pour mieux comprendre prenons l'exemple suivant :

<table>
    <tr>
      <td>Téléchargements scripts</td>
      <td>Tutoriels</td>
    </tr>
    <tr>
      <td>PHP</td>
      <td>PHP</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>JavaScript</td>
    </tr>
</table>

Le tableau sans quadrillage ci-dessus est utilisé pour l'agencement des deux menus 'Téléchargements scripts' et 'Tutoriels' ne pose pas de problèmes dans les navigateurs graphiques. Mais dans les navigateurs vocaux, il sera lu d'une façon trop gênante :
Téléchargements scripts, Tutoriels, PHP, PHP, JavaScript, JavaScript.

Il convient de recoder le tableau de cette manière :

<table>
    <tr>
      <td >Téléchargements scripts</td>
      <td >PHP</td>
      <td >JavaScript</td>
    </tr>
    <tr>
      <td >Tutoriels</td>
      <td >PHP</td>
      <td >JavaScript</td>
    </tr>
</table>

Restitution vocale : Téléchargements scripts, PHP, JavaScript, Tutoriels, PHP, JavaScript.

Des tableaux plus accessibles grâce à une taille relative

Ce dernier tuyau se rapporte aux navigateurs graphiques. En fait l'utilisation des unités absolues (px, cm, mm, pica etc.) peut poser certains problèmes :

• lorsque vous redimensionnez la fenêtre du navigateur, la largeur du tableau ne s'adapte pas à la nouvelle largeur de la fenêtre, ce qui peut faire cacher une partie du tableau et faire apparaître la barre de défilement horizontale. Cela va rendre la consultation du tableau plus pénible, car il faut se servir de l'ascenseur horizontal pour voir le reste du tableau qui a été masqué.

• les tableaux ayant une largeur absolue, ne s'adaptent non plus à la résolution de l'écran, ce qui peut poser le même problème précité. Pour vous faire apprendre davantage, supposons que vous voulez créer un tableau qui occupe presque toute la largeur de la fenêtre. Vous allez mettre "width: 1000px", ça va épuiser toute la largeur de l'écran s'il est ajusté sur une résolution de 1024 x 768. Lorsque le même tableau tourne dans un écran dont la résolution est 800 x 600, le tableau sera coupé. pour consulter sa partie droite, il faut utiliser la barre de défilement horizontale.

  Par contre si vous lui avez spécifié la largeur en unité relative "width: 100%", il tournera sans aucun problème sous les deux écrans.

Dans le prochain chapitre on va apprendre à formater les listes à puces et les listes numérotées avec les propriétés CSS.