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

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

- Bénéfice 1 :
  Si le contenu n'est pas séparé de la présentation, certains internautes ne pourront pas voir la page En effet, certains visiteurs utilisent des feuilles de styles personnalisées pour adapter la mise en page ou la mise en forme à leur handicap visuel. Certains vont augmenter fortement la taille des caractères; d'autres vont remplacer certaines couleurs qu'ils discernent mal par des nuances qu'ils voient distinctement. La séparation du contenu et de la présentation offre donc aux utilisateurs malvoyants la simple possibilité de consulter le site.
- Bénéfice 2 :
  Cette séparation de la forme et du fond permet également aux navigateurs textuels d'extraire plus facilement la structure logique du document.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  Ceci permet de gagner du temps lors de la conception d'un site car les feuilles de styles constituent un gabarit de présentation qui peut s'appliquer à l'ensemble des pages
- Bénéfice 2 :
  En cas de modification de la charte graphique, par exemple, il est plus facile en terme de maintenance, d'actualiser une feuille de style dont les changements s'appliqueront à toutes les pages auxquelles elle est reliée, plutôt que de modifier l'aspect des multiples pages du site une à une.

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 :

- Index of the HTML 4 Elements
- Index of the HTML 4 Attributes
- Element Prohibitions

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

- Fiche 10.2 : Avec les feuilles de style désactivées, l'information est-elle toujours présente ?
- 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 ?
- Fiche 10.4 : Des valeurs relatives sont-elles utilisées pour dimensionner les tableaux et définir la taille des polices de caractère ?
- Fiche 10.5 : Si des valeurs absolues sont utilisées, le sont-elles sans conséquence sur l'affichage de l'information ?
- Fiche 13.8 : La présentation de la page est-elle réalisée sans détourner certaines balises de leur fonction d'origine ?

#### Autres ressources

- html Techniques (section 3.4) : Markup and style sheets rather than images
- html specifications Style sheets in html documents
- CSS specifications
- Listes des éléments html (page en anglais. Les éléments dépréciés sont suivis d'une astérisque).
- Listes des attributs html (page en anglais)
- Par Christophe Jablonski : La séparation de contenu et de mise en page

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