retour vers le site AccessiWeb

Guide AccessiWeb


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

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 ?

Carte d'identité

  • Critère AccessiWeb : 10.3
  • Niveau AccessiWeb : bronze
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 1 de WAI) : 6.1
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 3 de WAI) : 9.4

revenir en haut de la page

Comprendre

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

Il n'y a pas d'élément d'information pour cette rubrique.

revenir en haut de la page

Comment évaluer

Par le code source

  1. Identifier les balises DIV des blocs principaux (barre de navigation, zone de contenu).
  2. Etudier leurs attributs de positionnement dans la feuille de style.

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.3.
  3. La page s'affiche sans ses feuilles de style (CSS désactivé).
  4. Vérifier l'ordre d'apparition des blocs en le comparant à la situation précédente.
    Note : Pour réactiver les feuilles de style (CSS), cliquer sur le critère 10.3.

Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
  1. Cliquer sur le menu "CSS", puis sur l'option "CSS désactivée".
  2. Vérifier l'ordre d'apparition des blocs en le comparant à la situation précédente.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :
  1. Activer le sous-menu "Désactiver les styles css" du menu "CSS", puis cliquer sur l'option "Tous les styles".
  2. Vérifier l'ordre d'apparition des blocs en le comparant à la situation précédente.

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

Ce critère est implémenté par le développeur HTML.

Implémentation

Certaines techniques permettent de construire la page HTML avec des feuilles de style. Lorsque les feuilles de style sont désactivées par l'utilisateur, il faut que la structure logique de la page soit respectée. Il faut veiller à ce que l'ordre d'apparition des divisions DIV, par exemple, soit équivalent entre l'affichage sur un navigateur graphique et l'affichage sur un navigateur en mode textuel.

Exemple de mauvaise pratique

Pour l'exemple et le contre-exemple, la page est composée de quatre parties (balises DIV):

La mise en page est gérée par la feuille de style. (Les informations de style sont volontairement sommaires pour se concentrer sur l'essentiel.)

L'ordre de lecture à considérer est " de gauche à droite" et "de haut en bas".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Critère AccessiWeb 10.3: contre-exemple</title>
<style type="text/css">
#entete { background-color: #f79a10;}
#nav {
width: 25%;
float: right;
background: #fffff0;
border: 1px solid #f79a10;
}
#contenu {
margin-right: 26%;
background: #eff8fa;
border: 1px solid #0c449e;
}
#pieddepage { background-color: silver;}
</style>
</head>

<body>
<div id="entete">
<h1>Critère AccessiWeb 10.3: contre-exemple</h1>
</div>

<div id="nav">
<h2>Zone de Navigation</h2>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>

<div id="contenu">
<h2>Zone de contenu</h2>
<p>Phasellus id ipsum. Sed luctus augue ac velit. Aliquam erat volutpat. In eu wisi. Curabitur non mi. Vestibulum in mauris. Integer in tellus vitae orci pulvinar commodo. Aliquam ac dui quis sapien dictum convallis. Donec bibendum, justo sed porttitor porttitor, velit risus blandit pede, nec rutrum magna ligula rutrum metus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam elit. Nulla facilisi. Vivamus nec sapien. Ut pretium, massa in tincidunt pellentesque, velit est pulvinar lectus, at dapibus nulla magna at tortor. Ut tempor.</p>

</div>

<div id="pieddepage">
<p>Pied de page</p>
<p>Validité <a href="http://validator.w3.org/check/referer" title="Vérifier la validité de la page">XHTML Strict</a>
et <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Vérifier la validité de la feuille de styles">CSS</a>.</p>
</div>
</body>
</html>

Avec les feuilles de style activées, et selon l'ordre de lecture défini, les quatre zones de la page sont présentées dans l'ordre suivant :

  1. En-tête
  2. contenu
  3. navigation
  4. pied de page

Dans ce cas, la navigation est affichée après le contenu. Or, si on linéarise la page (ou si on observe l'ordre des DIV dans le code source) la navigation est avant le contenu. Dans ce cas, le critère est invalidé.

Exemple de bonne pratique

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Critère AccessiWeb 10.3: exemple</title>
<style type="text/css">
#entete { background-color: #f79a10;}
#nav {
width: 25%;
float: left;
background: #fffff0;
border: 1px solid #f79a10;
}
#contenu {
margin-left: 26%;
background: #eff8fa;
border: 1px solid #0c449e;
}
#pieddepage { background-color: silver;}
</style>
</head>
<body>
<div id="entete">
<h1>Critère AccessiWeb 10.3: exemple</h1>
</div>
<div id="nav">
<h2>Zone de Navigation</h2>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
<div id="contenu">
<h2>Zone de cotenu</h2>
<p>Phasellus id ipsum. Sed luctus augue ac velit. Aliquam erat volutpat. In eu wisi. Curabitur non mi. Vestibulum in mauris. Integer in tellus vitae orci pulvinar commodo. Aliquam ac dui quis sapien dictum convallis. Donec bibendum, justo sed porttitor porttitor, velit risus blandit pede, nec rutrum magna ligula rutrum metus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam elit. Nulla facilisi. Vivamus nec sapien. Ut pretium, massa in tincidunt pellentesque, velit est pulvinar lectus, at dapibus nulla magna at tortor. Ut tempor.</p>
</div>
<div id="pieddepage">
<p>Pied de page</p>
<p>Validité <a href="http://validator.w3.org/check/referer" title="Vérifier la validité de la page">XHTML Strict</a>
et <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Vérifier la validité de la feuille de styles">CSS</a>.</p>
</div>
</body>
</html>

Avec les CSS activées, et selon l'ordre de lecture défini, les quatre zones de la page sont présentées dans l'ordre suivant:

  1. Entête
  2. navigation
  3. contenu
  4. pied de page

Avec les feuilles de style désactivées (ou lorsque la page est linéarisée avec la barre d'outils WebDeveloper), cet ordre de lecture est le même que celui du code source. Dans ce cas, le critère est validé.

revenir en haut de la page

Illustrations

Il n'y a pas d'illustration pour cette fiche.

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.2 Fiche suivante : fiche 10.4

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