Contenu | Menu | Rechercher :
Le réseau des étudiants | Plan du site | A propos | Contact
Vous êtes ici : Le réseau social des étudiants ==> Des tableaux accessibles

Des tableaux accessibles

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 ?

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

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 :

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 :

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>
Pays Capitale Monnaie
Japon Tokyo Yen
Maroc Rabat Dirham

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>
Téléchargements scripts Tutoriels
PHP PHP
JavaScript JavaScript

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>
Téléchargements scripts PHP JavaScript
Tutoriels PHP JavaScript

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 :

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