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.
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.
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) :
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.1.
La page s'affiche sans ses feuilles de style (CSS désactivé).
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) :
Cliquer sur le menu "CSS", puis sur l'option "CSS désactivée".
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é.
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 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é.
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.
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 :
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.
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.
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 :
L'attribut href indique le chemin du fichier de la feuille de style.
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 :
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>
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 ?