retour vers le site AccessiWeb

Guide AccessiWeb

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

Critère 10.3 : Dans chaque page Web, l'information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?

revenir en haut de la page

Carte d'identité du critère 10.3 [niveau AccessiWeb : Bronze]

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

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

  • Test 10.3.a [Bronze] : Dans chaque page Web, l'ordre de lecture de l'information dans le code source est-il cohérent ?

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

L'information de toutes les pages Web doit rester compréhensible lorsque les feuilles de styles sont désactivées.

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

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 :

  2. Appliquer le(s) test(s) suivant(s) :
    • Test 10.3.a [Bronze] : Dans chaque page Web, l'ordre de lecture de l'information dans le code source est-il cohérent ?

  3. Valider le critère : le critère est validé si vous répondez oui au test applicable précédent.


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.3.a [Bronze] :
  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 "Désactiver les CSS"
  3. Vérifier que l'ordre de lecture de l'information est cohérent
  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.3.a [Bronze] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "CSS" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Désactiver les CSS" puis l'option "Tous les styles".
  3. Vérifier que l'ordre de lecture de l'information est cohérent.
  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é ?

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 l'information reste compréhensible. Il faut veiller à ce que l'ordre d'implémentation des blocs d'informations dans le code source soit cohérent.

Exemple de mauvaise pratique

Dans l'exemple suivant, trois blocs d'information se succèdent à l'affichage dans un ordre logique et naturel.

<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-language" content="fr" />
<style type="text/css">
#sample{
width:91%;
background-color:#f5f5f5;
}
#a,#b,#c{
margin:0 30px 0 30px;
text-align:justify;
}
#a,#c{
width:30%;
}
#a{
float:left;
}
#c{
float:right;
}
</style>
<title>Untitled</title>
</head>
<body>
<div id="sample">
<div id="a">
<p>Bloc 1</p>
</div>
<div id="c">
<p>Bloc 3</p>
</div>
<div id="b">
<p>Bloc 2</p>
</div>
</div>
</body>
</html>

Or, dans le code source, les blocs 1 et 3 sont situés avant le bloc 2 ce qui rend incompréhensible tout discours.

Exemple de bonne pratique

A partir de l'exemple précédent : dans le code source, les trois blocs se succèdent dans l'ordre naturel de lecture.
Lorsque les feuilles de styles sont activées, les blocs se succèdent bien dans un ordre normal sous la forme de texte en trois colonnes.
Lorsque les feuilles de styles sont désactivées dans le navigateur, l'information reste bien compréhensible.

<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-language" content="fr" />
<style type="text/css">
#sample2{
width:91%;
background-color:#f5f5f5;
}
#a2,#b2,#c2{
margin:0 30px 0 30px;
text-align:justify;
}
#a2,#b2#c2{
width:25%;
}
#a2,#b2,#c2{
float:left;
}
</style>
<title>Untitled</title>
</head>
<body>
<div id="sample2">
<div id="a2">
<p>Bloc 1</p>
</div>
<div id="b2">
<p>Bloc2</p>
</div>
<div id="c2">
<p>Bloc 3</p>
</div>
</div>
</body>
</html>

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

revenir en haut de la page

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

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