retour vers le site AccessiWeb

Guide AccessiWeb


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

Fiche 10.1 : Le contenu de la page est-il séparé de sa présentation ?

Carte d'identité

  • Critère AccessiWeb : 10.1
  • Niveau AccessiWeb : bronze
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 3.3

revenir en haut de la page

Comprendre

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

revenir en haut de la page

Comment évaluer

Par le code source

  1. Vérifier d'une part que la page est reliée à une feuille de style par l'intermédiaire de la balise LINK située entre les balises HEAD et /HEAD.
  2. Si la première condition est respectée, vérifier, néanmoins dans le code source l'absence d'éléments de mise en forme codées directement dans la page (Ex : FONT, B, I, ...). Si ces balises sont présentes, le critère n'est pas respecté.

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.1.
  3. La page s'affiche sans ses feuilles de style (CSS désactivé).
  4. Vérifier alors qu'il ne reste pas de mise en page particulière (polices de caractères différentes, couleurs différentes). Si tel est le cas, il est probable que des balises de mise en forme soient présentes directement dans la page. Le critère n'est alors pas respecté.
    Note : Pour réactiver les feuilles de style (CSS), cliquer sur le critère 10.1.

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 ne reste pas de mise en page particulière (polices de caractères différentes, couleurs différentes). Si tel est le cas, il est probable que des balises de mise en forme soient présentes directement dans la page. Le critère n'est alors pas respecté.
  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 ne reste pas de mise en page particulière (polices de caractères différentes, couleurs différentes). Si tel est le cas, il est probable que des balises de mise en forme soient présentes directement dans la page. Le critère n'est alors pas respecté.
  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.
    Note : en activant les options "Afficher le nom de l'élément entouré" et "Entourer les éléments déconseillés" du menu "Entourer", les éléments dépréciés comme la balise FONT seront affichés dans la page (entourés d'un liseret rouge avec le nom de la balise écrite).

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 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 présentation dépréciés.

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

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

Il faut surtout banir 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

Autres fiches à consulter

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 9.8 Fiche suivante : fiche 10.2

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