# 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 ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### 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

- Bénéfice 1 :
  L'emploi systématique de valeurs relatives pour définir la dimension des caractères et celle des éléments de bloc permet aux utilisateurs ayant des difficultés de perception visuelles, de modifier la taille des caractères à leur convenance sans perte d'information. Lorsque des valeurs relatives sont appliquées, le navigateur réorganise l'affichage, en ajoutant des ascenseurs de défilement, par exemple, de sorte que l'utilisateur puisse toujours accéder à toute l'information.
- Bénéfice 2 :
  Les utilisateurs d'appareil ne disposant que de petits écran (ordinateur de poche, téléphone portable), peuvent être amenés à agrandir les éléments d'une page pour un meilleur confort de lecture. Ils ne peuvent le faire que si les polices de caractères ont une taille proportionnelle.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  L'utilisation de tailles de polices et d'éléments de bloc relatives permet une plus grande souplesse de gestion des tailles via la feuille de style.
- Bénéfice 2 :
  Cela permet aussi une utilisation maximale de l’espace visible de la fenêtre du navigateur quelque soit la résolution d'écran définie.
- Bénéfice 3 :
  Les valeurs relatives s'adaptent à n'importe quel type de périphérique (palm, pocket pc, téléphones portables...) et rendent le contenu réutilisable sur plusieurs plateformes.

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

- Pour tous les éléments de structure de page de type « blocs » tels que `TABLE`, `DIV`, `P`, etc. utiliser des valeurs relatives en pourcentage («%») ou des unités comme «em» ou "px".
- Utiliser pour les polices de caractères les valeurs en pourcentage («%») ou des unités comme «em» ou "px".

#### 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

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.

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

- Fiche 1.9 : Il convient de remplacer un texte sous forme d'image par un texte mis en forme. Cette règle est-elle respectée ?
- Fiche 10.1 : Le contenu de la page est-il séparé de sa présentation ?
- Fiche 10.5 : Si des valeurs absolues sont utilisées, le sont-elles sans conséquence sur l'affichage de l'information ?

#### Autres ressources

- Web content Accessibility Curriculum (section 3.4) : Use relative rather than absolute units values
- yoyodesign.org - (section 4.3) : La syntaxe de CSS2 et les types de données de base
- Plongez dans l'accessibilité (jour 26) : Utilisez des tailles de police relatives

revenir au sommaire de la fiche

revenir en haut de la page

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