FICHE 4

LES FEUILLES DE STYLE

(CASCADING STYLE SHEETS)

1.Rappel des recommandations 3 et 6 des WCAG 1.0 :

Recommandation 3 :
"Utiliser le balisage et les feuilles de style de manière appropriée."

Point de contrôle : 3.3 (Priorité 2)
" Utilisez les feuilles de style pour contrôler la présentation et la mise en page. "

Point de contrôle : 3.4 (Priorité 2)
" Utilisez des unités relatives plutôt qu'absolues dans les valeurs d'attributs du langage de balisage et les valeurs des propriétés des feuilles de style. "

Recommandation 6 :
"Veiller à ce que les pages qui utilisent les nouvelles technologies se transforment de façon élégante."

Point de contrôle : 6.1 (Priorité 1)
" Organisez les documents de façon à ce qu'ils puissent être lus sans feuilles de style. Par exemple, quand un document HTML est interprété sans les feuilles de style associées, il doit toujours être possible de lire le document. "

Raisons de cette recommandation

Chaque navigateur est libre d'utiliser ou non les indications de forme (taille des caractères, fontes, styles,...). Dans le cas des logiciels pour aveugles et malvoyants, ces indications sont le plus souvent inutiles. Il faut simplement veiller à ce que les documents soient utilisables par un navigateur ne supportant pas ces feuilles de styles (il suffit pour cela de placer la feuille de style dans un fichier ".css" ou bien de placer les styles dans un commentaire au début du document).

2. Ce qu'il faut faire

La règle générale

L'utilisation de feuilles de style améliore efficacement l'accessibilité en séparant la forme du fond, tout en permettant de gagner du temps lors de la conception d'un site.
La structure du document et sa forme doivent être traitées séparément. La structure est spécifiée grâce aux éléments et attributs HTML (titres, sous- titres, paragraphes, images,...), la mise en page à l'aide de feuilles de style (choix typographiques, couleurs, espacements...). Cette séparation nette de la forme et du fond permet aux navigateurs non visuels d'extraire plus facilement la structure logique du document. Elle offre aussi plus de liberté aux concepteurs de pages visuelles dans la mise en page (les feuilles de style offrent beaucoup plus de possibilités que HTML).
En HTML, les feuilles de style peuvent être spécifiées de façon externe par l'élément LINK, dans l'entête du document par l'élément STYLE ou pour un élément spécifique par l'attribut style.

Les feuilles de style permettent de contrôler les caractéristiques des polices : "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", et "font-weight" ; les couleurs : "color", pour la couleur de premier plan du texte, "background-color", pour les couleurs de fond, "border-color", "outline-color" pour les couleurs de bordure (pour les couleurs de liens, voir les pseudo classes : link, : visited, et : active) ; les images de fond : "background-image", "background-repeat" ; les marges : "margin-left", "margin-right", "margin-top", "margin-bottom" ; les images intégrées aux puces de listes : "list-style" ; et de très nombreuses autres propriétés....

Le site http://www.w3.org donne la spécification complète des feuilles de styles .

3.Exemples rencontrés sur les sites évalués

Le site de l'Agence Nationale pour l'Emploi (www.anpe.fr) et le site du Ministère de l'Environnement (www.environnement.gouv.fr) présentent deux bons exemples d'utilisation des feuilles de style.

retour aux fiches