retour vers le site AccessiWeb

Guide AccessiWeb


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

Fiche 10.2 : Avec les feuilles de style désactivées, l'information est-elle toujours présente ?

Carte d'identité

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

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. Rechercher dans les feuilles de styles (CSS), la présence de l'attribut position ayant pour valeur "absolute".
    Les feuilles de styles pouvant être réparties dans plusieurs fichiers, il convient de vérifier chaque fichier.
    Attention cependant, seules les CSS destinées au media "screen" et "projection" sont concernées.
    Note : ce critère est à considérer quand les feuilles de styles sont désactivées ou quand des feuilles de style personnalisées sont utilisées.

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.2.
  3. La page s'affiche sans ses feuilles de style (CSS désactivé).
  4. Vérifier alors qu'il n'y a pas de perte d'information (information donnée par la couleur, lien devenus invisibles, chevauchement de texte etc...).
    Note : Pour réactiver les feuilles de style (CSS), cliquer sur le critère 10.2.

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 alors qu'il n'y a pas de perte d'information (information donnée par la couleur, lien devenus invisibles, chevauchement de texte etc...)
  3. Pour réactiver les feuilles de style, il suffit de réactualiser la page en appuyant sur la touche F5 ou en cliquant sur le bouton "actualiser" de Internet Explorer.

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 alors qu'il n'y a pas de perte d'information [information donnée par la couleur, contenu généré par CSS (textes ou images avec du information), lien devenus invisibles, etc...].
  3. Pour réactiver les feuilles de style, il suffit de réactualiser la page en appuyant sur la touche F5 ou en cliquant sur le bouton "Actualiser la page courante" de Firefox.

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 en concertation avec le graphiste.

Implémentation

Dans les feuilles de styles (CSS), l'utilisation de "position: absolute" est à proscrire. Cependant, les autres valeurs de positionnement (autres valeurs que "absolute" pour "position:" sont toujours utilisables). De fait, l'utilisation de "overflow ("contrôle du débordement", qui n'est utilisé qu'avec "position: absolute") ne doit pas être présent dans la CSS.

Exemple de mauvaise 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.2: contre-exemple</title>
<style type="text/css">
#nav {
position: absolute;
top: 1%;
left: 1%;
width: 25%;
background: #fffff0;
border: 1px solid #f79a10;
}
#contenu {
margin-left: 26%;
background: #eff8fa;
border: 1px solid #0c449e;
}
</style>
</head>
<body>
<div id="nav">
<h1>Critère AccessiWeb 10.2: contre-exemple</h1>
<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>
</body>
</html>

Dans ce contre-exemple, l'augmentation de la taille des textes fait déborder le texte du menu de navigation sur la zone de contenu. Dans ce cas, le critère est invalidé.

Exemple de bonne pratique

Il n'y a pas d'exemple pour cette rubrique.

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.1 Fiche suivante : fiche 10.3

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