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

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

- Bénéfice 1 :
  Beaucoup d'utilisateurs mal-voyants ajoutent leur propre feuille de style à celles du site consulté. L'utilisation typique d'une telle feuille de style est l'augmentation significative de la taille des caractères. Dans un tel cas, il est important qu'aucun texte (ou aucune zone) ne se chevauche, sous peine de perdre de l'information. Quand ce critère est validé, les utilisateurs peuvent consulter le site sans perte d'information, même quand les caractères sont de très grande taille, et quelque soit la taille de la fenêtre du navigateur.

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

- Fiche 10.1 : Le contenu de la page est-il séparé de sa présentation ?
- 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 ?

#### Autres ressources

- html Techniques (section 3.4) : Markup and style sheets rather than images
- html specifications Style sheets in html documents
- CSS specifications
- 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

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