DIV
des blocs principaux (barre de navigation, zone de contenu).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.
Ce critère est implémenté par le développeur HTML.
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.
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 :
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é.
<!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:
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é.