retour vers le site AccessiWeb

Guide AccessiWeb

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

Critère 10.1 : Dans le site Web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l'information ?

revenir en haut de la page

Carte d'identité du critère 10.1 [niveau AccessiWeb : Argent]

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

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

  • Test 10.1.a [Argent] : Dans le site Web, les balises servant à la présentation de l'information ne doivent pas être présentes dans le code source des pages. Cette règle est-elle respectée ?
  • Test 10.1.b [Argent] : Dans le site Web, les attributs servant à la présentation de l'information ne doivent pas être présents dans le code source des pages. Cette règle est-elle respectée ?

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

Un site Web doit utiliser des feuilles de styles pour contrôler la présentation de l'information.

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

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 : ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants :
    • les balises servant à la présentation de l'information
    • les attributs servant à la présentation de l'information


  2. Appliquer le(s) test(s) suivant(s) :
    • Test 10.1.a [Argent] : Dans le site Web, les balises servant à la présentation de l'information ne doivent pas être présentes dans le code source des pages. Cette règle est-elle respectée ?
    • Test 10.1.b [Argent] : Dans le site Web, les attributs servant à la présentation de l'information ne doivent pas être présents dans le code source des pages. Cette règle est-elle respectée ?

  3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.


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.1.a [Argent] et le test 10.1.b [Argent] :
  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. Note : si un mise en page particulière (polices de caractères différentes, fonds de couleur) reste présente dans la page Web, il est probable que des balises / attributs servant à la présentation de l'information sont présents dans le code source.
  4. Vérifier que les balises et les attributs servant à la présentation de l'information ne sont pas présentes dans le code source de la page
  5. 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.1.a [Argent] et le test 10.1.b [Argent] :
  1. Sous Firefox, 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. Note : si un mise en page particulière (polices de caractères différentes, fonds de couleur) reste présente dans la page Web, il est probable que des balises / attributs servant à la présentation de l'information sont présents dans le code source (Note : en activant dans le du menu "Entourer" l'option "Entourer les éléments déconseillés", les éléments dépréciés comme la balise font seront affichés dans la page (entourés d'un liseret rouge). Sélectionner ensuite l'information entourée et vérifier dans le code source l'attribut ou la balise déconseillée.).
  4. Vérifier que les balises et les attributs servant à la présentation de l'information ne sont pas présentes dans le code source de la page.
  5. 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 qui conçoit les feuilles de style en fonction des contraintes graphiques.

Implémentation

Le code de la page HTML ne doit pas contenir d'informations de mise en forme, surtout quand celles-ci peuvent être contenues dans les feuilles de style.
Exemples de balises de mise en forme : font, b, i
Exemples d'attribut de mise en forme : size, align, width, height, cellpadding, border, background, bgcolor.
L'application d'une feuille de style à une page s'effectue par l'intermédiaire de la balise link située entre les balises head et /head, comme suit :

<head>
[...]
<link href="mon-style.css" rel="stylesheet" type="text/css" />
</head>

Exemple de mauvaise pratique

Il ne faut pas utiliser des éléments et attributs de mise en forme dépréciés.

<p>
<font face="Arial, Helvetica, sans-serif" color="blue">
Bonjour ! monde cruel...
</font>
</p>

Pour connaître le statut des éléments et attributs consulter :

Il faut surtout bannir tout attribut ou balise de mise en forme dans le code source de la page html et définir la mise en page via une feuille de style reliée à la page de contenu. Ainsi, le code suivant, directement inséré dans le code source de la page ne satisfait pas le critère. Ceci aura pour effet d'empêcher l'utilisateur d'appliquer sa propre mise en forme.

<h2><font color="blue">Un titre en bleu</font></h2>
<p align="center"><b>Du texte en gras et centré</b></p>

Exemple de bonne pratique

Appuyez-vous sur les propriétés des CSS pour contrôler vos styles. Si vous devez utiliser des éléments HTML, ne prenez que ceux qui ne sont pas dépréciés.
En reprenant les deux lignes de code citées en mauvais exemple, il est possible de séparer complètement le contenu de sa mise en page.

  1. Créer un fichier texte avec l'extension css, par exemple, "monstyle.css", et le placer dans un répertoire nommé css. Ce fichier est la feuille de style où seront définis toutes les instructions de mise en page.
  2. Dans le fichier html renfermant le contenu, déclarer l'utilisation de la feuille de style grâce à la baslie link à insérer entre les balises head et /head, comme ceci :

    <head>
    <link rel="stylesheet" type="text/css" href="css/monstyle.css" media="screen" />
    </head>

    L'attribut href indique le chemin du fichier de la feuille de style.
  3. Via la feuille de style, pour tous les titres de niveau 2, on définit les propriétés de la balise h2, précisant la couleur de police. Pour tous les paragraphes centrés et en gras, on déclare une classe "parag_centre", par exemple. Voici le code de la feuille de style :

    h2 { text-color : blue; }
    .parag_centre {
    text-align : center;
    font-weight : bold;
    }

  4. En modifiant légèrement le code de la partie "exemple de mauvaise pratique, on obtient la page html suivante :

    <html>
    <head>
    <title>Séparation du fond de la forme</title>
    <link rel="stylesheet" type="text/css" href="css/monstyle.css" media="screen" />
    </head>
    <body>
    <h2>Un titre en bleu</h2>
    <p class="parag_center">Du texte en gras et centré</p>
    </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 9.10 Fiche suivante : fiche du critère 10.2

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