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

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

- Bénéfice 1 :
  Ce critère répond notamment aux attentes de personnes malvoyantes, en particulier celles qui appliquent des feuilles de style personnalisées, mieux adaptées à leur vision. Dans ce cas, l'ordre d'apparition des informations peut s'en trouver modifier et perturber les visiteurs

#### 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`):

- l'en-tête, identifié comme #en-tête
- la zone de navigation, identifiée comme #nav
- la zone de contenu, identifiée comme #contenu
- le pied de page, identifié comme #pieddepage

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

- Fiche 10.1 : Le contenu de la page est-il séparé de sa présentation ?
- Fiche 10.2 : Avec les feuilles de style désactivées, l'information est-elle toujours présente ?
- Fiche 10.5 : Si des valeurs absolues sont utilisées, le sont-elles sans conséquence sur l'affichage de l'information ?

#### Autres ressources

- html Techniques (section 3.4) : Markup and style sheets rather than images
- Web Content Accessibility Curriculum (section 6.1) : Organize documents so they may be read without style sheets
- Plongez dans l'accessibilité : Jour 10 : Présenter votre contenu principal en premier
- open-s.com : Dix questions pour Joe Clark
- Conférence de Douglas Bowman (diapos 54 à 57) : Pushing Your Limits
- De Eric Meyer : Containing floats
- Recommandations CSS 2.0 : Le modèle de mise en forme visuel
- html specifications Style sheets in html documents
- CSS specifications

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