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.
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) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "10. Présentation de l'information" de la Barre AccessiWeb, activer le critère 10.2.
La page s'affiche sans ses feuilles de style (CSS désactivé).
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) :
Cliquer sur le menu "CSS", puis sur l'option "CSS désactivée".
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...)
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) :
Activer le sous-menu "Désactiver les styles css" du menu "CSS", puis cliquer sur l'option "Tous les styles".
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...].
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.
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é.
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 ?