retour vers le site AccessiWeb

Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Présentation de l'information > Critère 10.5

Critère 10.5 : Dans les feuilles de styles du site Web, des valeurs relatives sont-elles toujours utilisées pour contrôler la présentation de l'information ?

revenir en haut de la page

Carte d'identité du critère 10.5 [niveau AccessiWeb : Argent]

Test(s) AccessiWeb permettant de vérifier le critère 10.5

Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].

  • Test 10.5.a [Argent] : Dans les feuilles de styles du site Web, les unités non relatives (pt, pc, mm, cm, in) ne doivent pas être utilisées. Cette règle est-elle respectée ?
  • Test 10.5.b [Argent] : Dans chaque page Web, l'augmentation de la taille des caractères ne doit pas provoquer de perte d'information. Cette règle est-elle respectée ?

Autre(s) fiche(s) AccessiWeb à consulter en relation avec cette fiche

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

revenir en haut de la page

Comprendre

Comprendre le critère

Dans toutes les feuilles de styles du site Web, des valeurs relatives doivent toujours être utilisées pour contrôler la présentation de l'information.

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

revenir en haut de la page

Comment évaluer

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

  1. Sélectionner le(s) élément(s) à tester :
    • Ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants (exemple de code source : <style type="text/css"> -- Définition des styles; --></style>) :
      • feuilles de style du document (déclaré entre les balises <style> et </style)
      • feuilles de style en ligne, (déclaré en temps qu'attribut des balises : <balise style="style:valeur;"> ... </balise)
      • feuilles de style externe, (déclaré dans un fichier externe dont l'extension est .css : <link rel=stylesheet href="styles.css" type="text/css">)
      • feuilles de style importé, (déclaré dans un fichier externe dont l'extension est .css : @import url (url de la feuille à importer); entre les balises <style> et </style)
    • Ouvrir la page Web dans un navigateur graphique
    • Augmenter la taille du texte à "La plus grande" dans le navigateur Internet Explorer.


  2. Appliquer le(s) test(s) suivant(s) :
    • Test 10.5.a [Argent] : Dans les feuilles de styles du site Web, les unités non relatives (pt, pc, mm, cm, in) ne doivent pas être utilisées. Cette règle est-elle respectée ?
    • Test 10.5.b [Argent] : Dans chaque page Web, l'augmentation de la taille des caractères ne doit pas provoquer de perte d'information. Cette règle est-elle respectée ?

  3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.


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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :
  • Pour le test 10.5.a [Argent] :
    1. Sous Internet Explorer, ouvrir la page à analyser.
    2. Dans le menu "CSS" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir les CSS".
    3. La liste des feuilles de styles utilisées s'affiche dans une nouvelle fenêtre.
    4. Dans chaque feuilles de styles, vérifier que les unités non relatives (pt, pc, mm, cm, in) ne sont pas utilisées.
    5. Si c'est le cas, le test est validé.

  • Pour le test 10.5.b [Argent] :
    1. Sous Internet Explorer, ouvrir la page à analyser.
    2. Dans le menu "IE" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Taille du texte" puis l'option "La plus grande".
    3. Vérifier que l'augmentation de la taille des caractères ne provoque pas de perte d'information.
    4. Si c'est le cas, le test est validé.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :
  • Pour le test 10.5.a [Argent] :
    1. Sous Firefox, ouvrir la page à analyser.
    2. Dans le menu "CSS" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir les CSS".
    3. La liste des feuilles de styles utilisées s'affiche dans une nouvelle fenêtre
    4. Dans chaque feuilles de styles, vérifier que les unités non relatives (pt, pc, mm, cm, in) ne sont pas utilisées.
    5. Si c'est le cas, le test est validé.

  • Pour le test 10.5.b [Argent] :
    1. Sous Firefox, ouvrir la page à analyser.
    2. Dans le menu "Redimensionner" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Zoom" puis l'option "Zomm + ctrl+maj+z".
    3. Vérifier que l'augmentation de la taille des caractères ne provoque pas de perte d'information.
    4. Si c'est le cas, le test est validé.

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.


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".
  • Pour les polices de caractères, utiliser les valeurs en pourcentage ("%") ou des unités comme "em".

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 */
P { font-size: 90% } /* % */

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

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.


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

revenir en haut de la page

Fiche précédente : fiche du critère 10.4 Fiche suivante : fiche du critère 11.1

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.