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.
Pour les blocs, c'est-à-dire, les balises de type TABLE, DIV ou P :
Vérifier que le code ne contient pas des valeurs fixes pour les attributs de type width, height ou size, par exemple, width="200".
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 :
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.
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) :
Sous Internet Explorer, ouvrir la page à analyser.
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".
Si des valeurs relatives ont été utilisées, la page s'affiche avec une taille de caractère plus grande.
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) :
Cliquer sur le menu "Options IE", puis sur l'option "Taille du texte".
Changer la taille actuelle.
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) :
Activer le sous-menu "Zoom" du menu "Redimensionner", puis cliquer sur l'option "Zoom +".
Changer la taille actuelle.
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.
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
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é.