Bénéfice 1 :
Dans les tableaux de mise en forme, les informations doivent être ordonnées de telle manière qu'elles puissent être affichées dans un ordre équivalent lors d'une lecture linéaire de la page.
En effet, la lecture du contenu d'un tableau de mise en forme avec des navigateurs textuels de type Lynx par exemple ou avec les logiciels de lecture d'écrans comme Jaws se fait de manière linéaire: cellule par cellule, de gauche à droite puis de haut en bas.
L'organisation de l'information à l'intérieur d'un tableau de mise en page doit donc faire l'objet de beaucoup d'attention. Les outils actuels de développement HTML ont tendance à imbriquer les tableaux les uns dans les autres. Il en résulte parfois des différences entre le rendu visuel de l'information sur un navigateur graphique et le rendu linéaire fourni par un navigateur textuel ou par un lecteur d'écran. Cette différence entre les deux types d'affichage entraîne une lecture incohérente de la page pour certains utilisateurs.
Valeur ajoutée pour le site
Bénéfice 1 :
La présence de tableaux de mise en page ralentit son chargement.
Ce critère n'est pas évaluable par le code source.
Par l'utilisation d'outils
Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.
Evaluer avec la barre AccessiWeb (version 1.0) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "5. Tableaux" de la Barre AccessiWeb, activer le critère 5.6.
La page est linéarisée (suppression des tableaux).
Comparer la présentation des contenus avant et après linéarisation.
Note : Dans les tableaux de mise en forme, les informations doivent être ordonnées de telle manière qu'elles puissent être affichées dans un ordre équivalent lors d'une lecture linéaire de la page.
Note : Pour supprimer la linéarisation, recharger la page en cliquant sur la touche F5.
Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Cliquer sur l'option "Linéariser (Supprimer les tableaux)" du menu "Structure".
Comparer la présentation des contenus avant et après linéarisation. Note : Dans les tableaux de mise en forme, les informations doivent être ordonnées de telle manière qu'elles puissent être affichées dans un ordre équivalent lors d'une lecture linéaire de la page.
Evaluer avec la Barre d'Outils Web Developper pour Firefox (version
1.0.2 en français) :
Activer l'option "Linéariser la page" du menu "Divers".
Comparer la présentation des contenus avant et après linéarisation. Note : Dans les tableaux de mise en forme, les informations doivent être ordonnées de telle manière qu'elles puissent être affichées dans un ordre équivalent lors d'une lecture linéaire de la page.
Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Dès le chargement de la page, la lecture se fait automatiquement. Ecouter la page et vérifier que les informations sont lues dans le même ordre que lorsqu'elles sont lues à l'aide d'un navigateur graphique classique.
Il est possible de se faire une idée de l'ordre d'apparition des cellules du tableau en se déplaçant manuellement d'une cellule à l'autre à l'aide des flèches de direction "haut" et "bas". Les informations de chaque cellule sont alors prononcées par la synthèse vocale et affichées dans la fenêtre de l'afficheur braille.
Le développeur doit s'assurer que les informations contenues dans un tableau de mise en forme demeurent correctement ordonnées une fois linéarisées.
Implémentation
Il est préférable d'utiliser les feuilles de style pour la mise en page et le positionnement des éléments du contenu. Si les tableaux pour la mise en page sont cependant nécessaires, il faut s'assurer que le contenu du tableau est facile à comprendre lorsqu'il est linéarisé; c'est à dire que le contenu de chaque cellule est alors organisé en paragraphe l'un en dessous de l'autre, suivant l'ordre des cellules de gauche à droite puis de haut en bas.
Exemple de mauvaise pratique
Voici un exemple de tableau de mise en page qui pose problème lors de sa linéarisation (les bordures sont présentes uniquement pour montrer l'organisation des cellules) :
Ce tableau de mise en page pose des
Le contenu n'est donc pas cohérent
problèmes quand il est linéarisé.
pour certains utilisateurs.
Voici le code correspondant :
<table width="50%" summary="" border="1"> <tr> <td width="25%" >Ce tableau de mise en page pose des</td> <td width="25%" >Le contenu n’est donc pas cohérent </td> </tr> <tr> <td width="25%">problèmes quand il est linéarisé.</td> <td width="25%">pour certains utilisateurs.</td> </tr> </table>
Voici ce que lira un utilisateur avec un lecteur d'écran ou un navigateur non-visuel qui traite un tableau ligne par ligne :
"Ce tableau de mise en page pose des Le contenu n'est donc pas cohérent problèmes quand il est linéarisé. pour certains utilisateurs."
Exemple de bonne pratique
Il y a deux solutions pour que ce tableau puisse être linéarisé de façon cohérente:
1. En fusionnant les deux cellules de chaque colonne:
Ce tableau de mise en page pose des problèmes quand il est linéarisé.
Le contenu n’est donc pas cohérent pour certains utilisateurs.
Voici le code correspondant:
<table width="50%" summary="" border="1"> <tr> <td width="25%" >Ce tableau de mise en page pose des problèmes quand il est linéarisé.</td> <td width="25%" >Le contenu n’est donc pas cohérent pour certains utilisateurs.</td> </tr> </table>
2. En modifiant l'organisation du contenu dans les cellules:
Ce tableau de mise en page pose des
problèmes quand il est linéarisé.
Le contenu n’est donc pas cohérent
pour certains utilisateurs.
Voici le code correspondant:
<table width="50%" summary="" border="1"> <tr> <td width="25%" >Ce tableau de mise en page pose des</td> <td width="25%" >problèmes quand il est linéarisé. </td> </tr> <tr> <td width="25%">Le contenu n'est donc pas cohérent</td> <td width="25%">pour certains utilisateurs.</td> </tr> </table>
Le même rendu visuel peut être obtenu en utilisant une feuille de style:
Code dans le fichier HTML:
<div id="col1">Ce tableau de mise en page pose des problèmes quand il est linéarisé.</div> <div id="col2">Le contenu n'est donc pas cohérent pour certains utilisateurs.</div>
Note : pour lire les extraits sonores au format mp3 proposés sur ce guide, vous devez
disposer d'un lecteur capable de lire ce type de fichier.
Les enregistrements ont été réalisés à partir soit de la synthèse vocale utilisée par Jaws, soit celle utilisée par Home Page Reader.
Pour plus d'informations sur le
téléchargement de lecteurs de fichiers mp3, consulter le paragraphe Lecteurs multimédia de la page Outils d'aide à
l'évaluation de ce guide.
Voici ce que Jaws dit :
"Ce tableau de mise en page pose des Le contenu n'est donc pas cohérent problèmes quand il
est linéarisé. pour certains utilisateurs."
Voici ce que Jaws dit :
"Ce tableau de mise en page pose des problèmes quand il est linéarisé. Le contenu n'est donc
pas cohérent pour certains utilisateurs."
Fiche 10.2 : Avec les feuilles de style désactivées, l'information est-elle toujours présente ?
Fiche 10.3 : Avec les feuilles de style désactivées, l'ordre d'apparition de l'information est-il respecté par rapport à l'ordre d'apparition initialement défini ?
Fiche 11.3 : Est-ce que la disposition des champs de formulaire par rapport aux textes qui leur sont associés ne pose aucune ambiguïté ?