retour vers le site AccessiWeb

Guide AccessiWeb


vous êtes ici : Accueil > Fiches AccessiWeb : Présentation de l'information > Fiche 10.4

Fiche 10.4 : Des valeurs relatives sont-elles utilisées pour dimensionner les tableaux et définir la taille des polices de caractère ?

Carte d'identité

  • Critère AccessiWeb : 10.4
  • Niveau AccessiWeb : argent
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 3.4

revenir en haut de la page

Comprendre

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

revenir en haut de la page

Comment évaluer

Par le code source

Pour les blocs, c'est-à-dire, les balises de type TABLE, DIV ou P :

  1. Vérifier que le code ne contient pas des valeurs fixes pour les attributs de type width, height ou size, par exemple, width="200".
  2. Ou vérifier, le cas échéant, les valeurs utilisées dans la feuille de style pour ces mêmes attributs, par exemple (width:200).

Pour les polices de caractère :
  1. Vérifier l'emploi d’attributs de dimensionnement des caractères tels que size ou weight, par exemple ainsi que les unités de valeurs relatives en pourcentage ou "px" adoptées.
  2. Ou vérifier les unités de valeurs utilisées dans la feuille de styles, pour les éléments de type font-size, par exemple. Celles-ci peuvent être en pourcentage, en "em" ou en pixel "px", par exemple.

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) :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "10. Présentation de l'information" de la Barre AccessiWeb, activer le critère 10.4 et choisisser la taille de caractère "La plus grande".
  3. Si des valeurs relatives ont été utilisées, la page s'affiche avec une taille de caractère plus grande.
  4. Vérifier visuellement que cette augmentation de la taille des caractères n'entraîne pas une perte d'information. En particulier, vérifier que des ascenseurs permettent le défilement du texte.
    Note : Pour revenir à la taille de caractère initiale, cliquer sur le critère 10.4 et choisisser la taille de caractère initiale.

Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
  1. Cliquer sur le menu "Options IE", puis sur l'option "Taille du texte".
  2. Changer la taille actuelle.
  3. Vérifier visuellement que, la taille "La plus grande", par exemple, n'entraîne pas une perte d'information ; En particulier, que des ascenseurs permettent le défilement du texte.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :
  1. Activer le sous-menu "Zoom" du menu "Redimensionner", puis cliquer sur l'option "Zoom +".
  2. Changer la taille actuelle.
  3. Vérifier visuellement que la taille supérieure, par exemple, n'entraîne pas une perte d'information. En particulier, vérifier que des ascenseurs permettent le défilement du texte.

Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Ce critère n'est pas évaluable par le lecteur d'écran Jaws.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

Le développeur doit veiller au respect de ce critère.

Implémentation

Exemple de mauvaise pratique

La mauvaise pratique consiste à imposer des tailles fixes en utilisant des unités de taille absolues, soit dans le code de la page, soit par l'intermédiaire des feuilles de style. Les unités de taille absolues sont, par exemple, le point (pt), et le centimètre (cm). Exemple d'une feuille de style qui fixe la taille de la police de caractères à 12 points.

body {font-size : 12pt; }

Exemple d'un tableau dont les dimensions sont figées

<table width="400pt"> <tr>
<td width="100pt"> ... </td> <td width="390pt"> ... </td><td> </td>
</tr>
</table>

Exemple de bonne pratique

Il convient d'utiliser des unités de taille relatives telles que "em", "ex", "px" (pixel), ou encore des valeurs en pourcentage.

Dans les feuilles de style :

H1 { margin: 0.5em } /* em */
H1 { margin: 1ex } /* ex */
P { font-size: 12px } /* px */

Dans le dimensionnement des tableaux :

<table width="400px">
<tr>
<td width="100px"> ... </td> <td width="390px"> ... </td><td> </td>
</tr>
</table>

ou

<table width="400px">
<tr>
<td width="30%"> ... </td> <td width="65%"> ... </td><td> </td>
</tr>
</table>

revenir en haut de la page

Illustrations

Un tableau avec largeur fixe, sans perte d'information

Cette capture d'écran montre un tableau dont la largeur est fixe. Il s'agit de la page d'origine, telle qu'elle a été conçue. Il n'y a donc pas de perte d'information.

Un tableau agrandi avec largeur fixe et perte d'information

Cette capture d'écran montre le même tableau que sur la première image, avec une police de caractère agrandie. Du fait que le tableau ait une largeur de colonne fixe, il y a perte d'information car le texte est tronqué.

revenir en haut de la page

Références

Autres fiches à consulter

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 10.3 Fiche suivante : fiche 10.5

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact