Etape 4 : Apport de styles par CSS aux balises de structure at Accessibilité-web.com - Formation open-source sur l’accessibilité Web

Etape 4 : Apport de styles par CSS aux balises de structure

Le 9 août 2006 par tanguy.romey

1. Appels des CSS externes dans les pages HTML

L’étape 3 nous a permis de structurer les contenus en utilisant les balises XHTML adéquates.
Pour autant, la page ainsi créée ne dispose d’aucun design.
L’apport de styles par CSS va nous permettre d’aborder la mise en page graphique du site.

Deux CSS :

default.css
home.css

La CSS « home.css » ne contient que ce qui est nécessaire à la page d’accueil, et qui diffère des pages intérieures : mise en trois colonnes + zone bas du contenu.

Il existe deux moyens de lier une CSS à une page HTML :

La balise LINK :

<link href="./default.css" rel="stylesheet" type="text/css"/>
<link href="./home.css" rel="stylesheet" type="text/css"/>

L’ordre @import

<style type="text/css" media="screen">
@import url(./default.css);
</style>
<style type="text/css" media="screen">
@import url(./home.css);
</style>
</pre>

Nota : pour les syntaxes respectives des balises STYLE et LINK, se reporter à la documentation du W3C (http://www.w3.org/TR/html401/index/elements.html). Dans la suite de ce document, la règle @import sera utilisée. Squelettes après appels des CSS Fichiers : home.5.html et inner.5.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css" media="screen">@import url(./default.css);</style>
    <style type="text/css" media="screen">@import url(./home.css);</style>
  </head>
  <body>

2. Faire disparaître un élément

Certaines informations ou fonctionnalités ne sont utiles qu’à certaines populations d’internautes. Parmi ces populations, les personnes non voyantes sont celles pour lesquelles le plus d’aménagements sont –généralement- prévus.

Les deux squelettes présentent un élément qui n’est destiné qu’aux personnes non voyantes ; il s’agit de la barre de « navigation rapide » qui contient des ancres internes vers les différentes parties de la page.

Jusqu’à récemment, les éléments à cacher se voyaient attribuer un « display: none; » par CSS, ce qui avait pour effet de ne leur attribuer aucun rendu graphique.

Cette méthode est à éviter ABSOLUMENT.

Elle entraîne deux conséquences fâcheuses :

1. Tout fragment affublé d’un « display: none; » se voit considéré par Google comme une tentative de cacher du contenu, donc potentiellement de truquer l’indexation. Un site qui y recoure aura donc un « pagerank » minoré.

2. Le fragment ainsi stylé devient invisible pour les synthèses vocales destinées généralement aux personnes non voyantes.

Utiliser un « visibility:hidden; » est également préjudiciable, pour les mêmes raisons.

Une autre technique consiste à faire « sortir » l’élément de l’écran en lui affectant des valeurs de marges négatives. La page « CSS in Action: Invisible Content Just for Screen Reader Users » :


.hidden
{
 position:absolute;
 left:0px;
 top:-500px;
 width:1px;
 height:1px;
 overflow:hidden;
 }

Le but est de réduire l’élément à une boite de 1×1 pixel, et de l’envoyer en dehors de l’écran. C’est oublier que les aides techniques qui analysent le buffer d’écran … n’y accèderont pas ; l’élément devient dans ce cas inaccessible. Cette méthode est également à éviter.

La méthode à utiliser consiste à transformer l’élément considéré en une boite de 1×1 pixel, puis de la replier sur elle-même. Les ordres « !important » permettent de bloquer tout héritage contradictoire.

.hiddenStructure
{
display:block !important;
background-color:transparent !important;
background-image:none !important;
border:none !important;
width:1px !important;
height:1px !important;
overflow:hidden !important;
padding:0 0 0 0 !important;
margin:-1px 0 0 -1px !important;
list-style:none !important;
float:none !important;
/* IE 6 will otherwise show an empty line. */
position: absolute;
}
/* Compliant browsers. */
*[class=hiddenStructure]{position:relative !important;}

Cette « navigation rapide » doit être cachée via cette méthode :

<div id="fastNavigation" class="hiddenStructure">

Elle n’a pour l’instant pas été prise en défaut en ce qui concerne son accessibilité, mais elle pourrait l’être dans l’avenir. Une tendance des WCAG 2.0, qui, à terme, remplaceront les WCAG 1.0 veut que rien ne soit caché, quelque soit le but recherché.

3. Disposition générale et positionnement des blocs

La maquette demande une mise en page centrée de 800 pixels de large. Les « margin » et « padding »
de chaque entrée de CSS sont calculés afin de produire un rendu compatible avec les différents
navigateurs.

Le centrage s’effectue de façon classique entre le BODY et le “wrapper”. A noter :

La hauteur de la navigation primaire « primaryNavigation » est fixée à 29 pixels, puis, toute la zone est remontée de 29 pixels par-dessus le « header ».
Les blocs positionnés côte à côte « flottent ». Ceci est obtenu par l’utilisation de la propriété « float ».

Nota : Un fond blanc, des bordures de couleur et un padding/margin ont été ajoutés afin de
matérialiser les blocs sur les captures d’écran qui suivent.
Ne pas tenir compte des entrées de feuille de styles qui correspondent à ces effets. A toutes fins utiles, cette feuille de styles se trouve à l’adresse http://tutoriel.kinoa.com/resources/forScreenshots.css.

Feuille de styles « default.css » Fichier default.1.css

body
{width:100%;margin: 0;padding: 0;text-align: center; }
#wrapper
{width: 770px;margin: 0 auto;text-align: left;}
#wrapper #header
{width: 770px;height:161px;margin: 0;padding: 0; }
#wrapper #header #upperNavigation
{position: absolute; top: 15px;margin: 0;padding: 0;}
#wrapper #primaryNavigation
{padding: 0; margin: -29px 0 0 0;width:100%; height: 29px;}
#wrapper #main
{width: 770px;padding: 0;margin: 0;}
#wrapper #main #secondaryNavigation
{float: left;padding: 0;margin: 0;}
#wrapper #main #content
{float: right;width: 562px;margin: 0;padding: 0;}
#wrapper #footer
{clear: both;margin: 0;padding: 0;}
#wrapper #colophon
{padding: 0;margin: 0;}

Nota : le « clear :both ; » sur le pied de page arrête les flottaisons des deux blocs « secondaryNavigation » et « content ».
Nota : dans les captures d’écran qui suivent, le rendu est brouillé par les structures de listes qui n’ont pas à ce stade été rendue horizontales.

Restitution de la page intérieure

Restitution de la page intérieure

Feuille de styles « home.css » Fichier home.1.css

#wrapper #content.home
{padding:0;margin:0;}
#wrapper #content.home #homeLeft
{float:left;width:229px;padding:5px;margin:7px;}
#wrapper #content.home #homeMiddle
{float:left;width:229px;padding:5px;margin:7px;}
#wrapper #content.home #homeRight
{float:right;width:229px;padding:5px;margin:7px;}
#wrapper #content.home #homeBottom
{clear:both;padding:0;margin:0;}

Restitution de la page d’accueil

4. Restitution horizontale des listes à puce

La restitution horizontale des éléments de listes à puces et a numéros s’obtient :

Soit au travers du sélecteur « float :left ; » appliqué à la balises LI
Soit au travers du sélecteur « display :inline; »

Nota : Les deux méthodes ne sont pas équivalentes :

La première méthode laisse les éléments de type « block », ce qui permet un contrôle plus précis sur le rendu
que la deuxième. Cette méthode impose d’utiliser un « display :inline; » sur le conteneur parent UL ou OL afin de supprimer des marges non justifiées.
Le fait que tous les éléments enfants LI « flottent » empêche le calcul correct du parent UL ou OL, qui reste « plat ».
Ceci est facilement matérialisable en positionnant une bordure sur le parent UL ou OL.
La deuxième méthode fait totalement disparaître la puce dans la plupart des navigateurs.

Nota : Utiliser des propriétés « float » de façon répétée implique d’utiliser des propriétés « clear » de façon également répétée.
Nota : afin d’améliorer la lisibilité :

Nous avons ajouté un « padding » sur le lien du « header » afin de descendre le logo.
Afin de bloquer l’héritage des marges sur les balises A, nous devons créer une entrée sur les liens de la navigation haute.
Un « display :inline ; » est également nécessaire pour éviter l’héritage du « display :block » du lien du logo (#wrapper #header a).

Feuille de styles : « default.css » Fichier default.2.css

body
{width:100%;margin: 0;padding: 0;text-align: center;}
#wrapper
{width: 770px;margin: 0 auto;text-align: left;}
#wrapper #header
{width: 770px;height:161px;margin: 0;padding: 0; }
#wrapper #header a
{display:block;padding: 4em 0 0 0.5em;}
#wrapper #header #upperNavigation
{position: absolute;top: 15px;margin: 0;padding: 0;}
#wrapper #header #upperNavigation ul
{display:inline;margin: 0;padding: 0;}
#wrapper #header #upperNavigation ul li
{float:left;margin: 0;padding: 0;list-style:none;}
#wrapper #header #upperNavigation ul li a
{display:inline;margin: 0;padding: 0;}
#wrapper #primaryNavigation
{padding: 0;margin:  -29px 0 0 0;width:100%;height: 29px;}
#wrapper #primaryNavigation ul
{display:inline;padding: 0;margin: 0;height: 29px;}
#wrapper #primaryNavigation ul li
{float:left;padding: 0;margin: 0;list-style:none;}
#wrapper #main
{clear:left;width: 770px;padding: 0;margin: 0;}
#wrapper #main #secondaryNavigation
{float: left;padding: 0;margin: 0;}
#wrapper #main #content
{width: 562px;margin: 0;padding: 0;}
#wrapper #footer
{clear: both;margin: 0;padding: 0;}
#wrapper #footer ul
{display:inline;}
#wrapper #footer ul li
{display:block;float:left;margin: 0;padding: 0;list-style:none;}
#wrapper #colophon
{padding: 0;margin: 0;}
#wrapper #colophon ul
{display:inline;}
#wrapper #colophon ul li
{clear:float;float:left;padding: 0;margin: 0;list-style:none;}

Feuille de styles : « home.css » Fichier home.2.css

#wrapper #content.home
{padding:0;margin:0;}
#wrapper #content.home #homeLeft
{float:left;width:229px;padding:5px;margin:7px;}
#wrapper #content.home #homeMiddle
{float:left;width:229px;padding:5px;margin:7px;}
#wrapper #content.home #homeRight
{float:right;width:229px;padding:5px;margin:7px;}
#wrapper #content.home #homeBottom
{clear:both;padding:0;margin:0;}
#wrapper #content.home #homeBottom ol
{display:inline;padding: 0;margin: 0;}
#wrapper #content.home #homeBottom ol li
{display:block;float:left;padding: 0;margin: 0;list-style:none;}

Restitution de la page d’accueil

Restitution de la page d’accueil

Important : compatibilité «multi-navigateurs »

Lorsque l’on fonde une structure de page sur les CSS, la restitution des pages dépend du navigateur utilisé, bien plus que lors de la mise en œuvre d’une structure « ancienne manière », à base de tableaux imbriqués et de HTML 3.2.

Les rendus de codes HTML sont stables dans les navigateurs Internet Explorer 5.5 (PC), Internet Explorer 6 (PC), Opera 8 (PC), Firefox 1.5 (PC), Safari 1.3 (Mac), Internet Explorer 5.2 (Mac) et Konqueror 3.4 (Linux).

Cette « stabilité des rendus » ne signifie pas « identité des rendus ». Des différences mineures subsistent. Ceci ne doit en aucun cas être considéré comme une erreur.

(4 votes, note : 4.75 sur 5)

Loading ...

Tags : No Tags.

Bookmarkez cet article :

Imprimer cette page Recommander cet article !

0 Réponses to “Etape 4 : Apport de styles par CSS aux balises de structure”

Flux RSS pour cet article Lien Trackback

Pas de commentaires

Laisser un commentaire

Les Etapes de la Formation

Tags
accessibilité accessiweb balises xhtml charset css div doctype flux html formation iso 8859 1 listes à puces open source sémantique standards ul utf8 validation du code w3c wai xhtml

Commentaires Récents
- Chris: Bonjour, Je remarque que le tutoriel " tatatouille et Cie" date de décembre 2007. Va t-il y avoir la suite ?...
- Clement: Sympa, mais il manque l'étape 4 avec l'ajout des images dans le site maintenant ....

Lectures

Sondage
Ce blog vous paraît-il :
- Très utile
- Utile
- Peu utile
- Inutile
Voir les résultats
Loading ...

$Accessibilité-Web.com : Formation open-source sur l\’accessibilité Web$

Recherche