Acessibilité des tableaux

Si tableaux de mise en page...

Pas de tableaux pour la mise en page à moins qu'il ne garde un sens une fois linéarisé

Exemples

À tester avec Web Developer (Divers > Linéariser la page) :

Rappel : formulaire mis en forme avec <table> et qui se linéarise de façon catastrophique (ex. cours 1er semestre)

Tableaux de données

Particulièrement complexes à consulter avec Jaws (et autres synthèses vocales) s'il sont mal structurés.

L'attribut "summary"

- Fournit aux utilisateurs de navigateurs vocaux et lecteurs d'écran un résumé des informations contenues dans le tableau.
C'est la première information qui sera lue lors de la lecture d'un tableau.
- Permet à l’utilisateur de se représenter la fonction et la structure du tableau. Sans cela, l’interprétation des tables aux structures relativement complexes (et la navigation en leur sein) peut s'avérer difficile et/ou pénible pour les personnes n’ayant qu’une présentation linéaire du contenu
- Permet un meilleur référencement 

Exemple sonore :
http://www.accessiweb.org/fr/guide_accessiweb/guide-accessiweb-fiche-5-4.html

L'attribut "caption"

Fournit à l'utilisateur, de manière synthétique, une information sur les données qu'il présente.
Permet aussi de les différencier les uns des autres lorsqu'une page contient plusieurs tableaux.

"th" spécifie les en-têtes de colonnes ou de lignes.

Permet aux utilisateurs de navigateurs vocaux et lecteurs d'écran de connaître le titre de la ligne ou de la colonne dans laquelle ils se trouvent. Les personnes aveugles ont une lecture linéaire des tableaux. Aussi, le marquage des en-têtes de colonnes constitue-t-il un point de repère essentiel.

"headers" et "id"

Permettent de relier le contenu d'une cellule au titre de la colonne ou de la ligne à laquelle il est associé. Une personne n'ayant qu'une vision linéaire de ce tableau pourra donc en permanence savoir à quel en-tête est attaché la cellule dans laquelle elle se trouve. Ceci s'applique également aux tableaux à plusieurs entrées.

Exemple sonore

http://www.accessiweb.org/fr/guide_accessiweb/guide-accessiweb-fiche-5-4.html

Code exemple

Techniques pour les règles d'accessibilité du contenu Web 1.0 

http://www.la-grange.net/w3c/WAI-WEBCONTENT-TECHS/#tables

<table 
summary="Température des 5 premiers jours de la semaine pour 3 villes">
    <caption>températures de la semaine en fonction de la ville</caption>
<!-- ligne 1: entête des colonnes, ville + les 5 premiers jours -->
    <thead>
        <tr>
            <th id="ville">ville</th>
            <th id="lundi">lundi</th>
            <th id="mardi">mardi</th>
            <th id="mercredi">mercredi</th>
            <th id="jeudi">jeudi</th>
            <th id="vendredi">vendredi</th>
        </tr>
    </thead>
    <tbody>
<!-- ligne 2: nom de la ville, données corespondantes -->
        <tr>
            <td headers="ville" id="paris">paris</td>
            <td headers="paris lundi">10c°</td>
            <td headers="paris mardi">8c°</td>
            <td headers="paris mercredi">10c°</td>
            <td headers="paris jeudi">12c°</td>
            <td headers="paris vendredi">10c°</td>

        </tr>
<!-- ligne 3: nom de la ville, données corespondantes -->
        <tr>[...]</tr><br />
    </tbody>
</table>

En savoir +

http://web.accessibilisation.net/www.maxdesign.com.au/presentation/workshop/slide20.htm

http://www.pompage.net/pompe/autableau/