Feuilles de style en cascade (CSS) côté client visant à accroître l'accessibilité

Table des matières

• Comment créer un fichier CSS côté client
• Comment configurer votre navigateur pour utiliser un fichier CSS côté client
  • Internet Explorer pour Windows
  • Internet Explorer pour Mac
  • Mozilla Firefox, Netscape (6.0 et versions ultérieures) et Mozilla
  • Opera 8 et versions ultérieures
  • Opera 7
  • Safari

Comment créer un fichier CSS côté client

Pour créer une feuille de style côté client, créez un fichier-texte en clair portant l'extension de fichier « CSS » à l'aide d'un éditeur de texte en clair ou d'un éditeur CSS. Utilisez la syntaxe CSS dans votre feuille de style en cascade côté client afin de contrôler la présentation visuelle des pages Web.

Pour accroître davantage l'accessibilité des pages Web dans ce site Web, vous pouvez inclure une combinaison des feuilles de style en cascade côté client suivantes dans votre fichier CSS côté client.

• Liens « Saut de navigation » visibles par défaut
• Page extensible
• Soulignement de tous les liens
• Couleurs uniformes des liens
• Bannière à contraste élevé de page de contenu
• Zone de message à contraste élevé de la page d'accueil
• Liens consultés/actifs/en évidence à contraste élevé

Liens « Saut de navigation » visibles par défaut

div.navaid {
position: static !important;
font-size: 100% !important;
float: none !important;
overflow: visible !important;
width: auto !important;
height: auto !important;
max-width: auto !important;
margin-left: 0px !important;
margin-right: 0px !important;
padding-left: 0px !important;
color: #000 !important;
}

div.navaid a {
color: #00F !important;
padding: 5px !important;
line-height: 150% !important;
border: none !important;
position: static !important;
zoom: 0 !important;
}

div.page div.core div.navaid a:hover,
div.page div.core div.navaid a:active,
div.page div.core div.navaid a:focus {
color: #00F !important;
border: none !important;
background-color: #FFF !important;
}

Page extensible

div.page {
width : 100% !important;
}

Soulignement de tous les liens

a:link, a:visited, a:hover, a:active, a:focus{
text-decoration: underline !important;
}

Couleurs uniformes des liens

a:link, a:visited, a:hover, a:active, a:focus {
background-color: #FFF !important;
font-weight: normal !important;
font-style: normal !important;
font-variant: normal !important;
padding: 0px 0px 2px 2px !important;
}

a:link {
color: #00F !important;
}

a:visited {
color: #009 !important;
}

a:hover, a:active, a:focus {
color: #C00 !important;
}

Les couleurs mentionnées dans l'exemple ci‑dessus peuvent être modifiées et sont attribuées comme suit :

Propriété du lien	Nom de la classe	Propriété de la classe	Couleur (codes hexadécimaux)	Couleur
Couleur d'arrière‑plan	a:link, a:visited, a:hover, a:active, a:focus	background-color	#FFF	Blanc
Couleur de lien normal	a:link	color	#00F	Bleu
Couleur de lien normal	a:visited	color	#009	Bleu foncé
Couleur de lien consulté	a:hover, a:active, a:focus	color	#C00	Rouge

Bannière à contraste élevé de page de contenu

div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra {
background: none !important;
border-top: 1px solid #000 !important;
border-left: 1px solid #000 !important;
border-right: 1px solid #000 !important;
min-height: 5.58em !important;
margin-top: 3.14em !important;
padding-bottom: 0.67em !important;
}

* html img.coa, * html img.lf {
margin-top: -2.84em !important;
}

div.banner-lfcoa-eng img.coa, div.banner-lfcoa-eng img.lf, div.banner-lfcoa-fra img.coa, div.banner-lfcoa-fra img.lf {
display: inline !important;  
}

div.banner-eng p.main, div.banner-fra p.main, div.banner-lfcoa-eng p.main, div.banner-lfcoa-fra p.main, div.banner-eng p.siteuri, div.banner-fra p.siteuri, div.banner-lfcoa-eng p.siteuri, div.banner-lfcoa-fra p.siteuri {
position: static !important;
font-size: 100% !important;
float: none !important;
overflow: visible !important;
width: auto !important;
height: auto !important;
}

div.banner-eng p.main, div.banner-fra p.main, div.banner-lfcoa-eng p.main, div.banner-lfcoa-fra p.main {
font-family: "times new roman", sans-serif !important;
font-weight: bold !important;
font-size: 185% !important;
margin: 0 !important;
padding: 0 !important;
}

div.banner-eng p.siteuri, div.banner-fra p.siteuri, div.banner-lfcoa-eng p.siteuri, div.banner-lfcoa-fra p.siteuri {
font-family: Arial, Helvetica, sans-serif !important;
background-color: transparent !important;
font-weight: lighter !important;
font-size: 110% !important;
margin: 0 !important;
padding: 0 !important; 
}

p.main, p.main span, p.siteuri, p.siteuri span {
color: #000 !important;
}

* html p.main, * html p.main span, * html p.siteuri, * html p.siteuri span {
width: 99.5% !important;
}

p.main img, p.siteuri img {
display: none !important;
}

Zone de message à contraste élevé de la page d'accueil

div.msgarea, div.msgareaalt {
background: none !important;
border-top: 1px solid #000 !important;
border-left: 1px solid #000 !important;
border-right: 1px solid #000 !important;
}

div.wp-pa-bkg {
background: none !important;
}

div.msgareaalt {
border-bottom: 1px solid #000 !important;
}

* html div.msgarea, * html div.msgareaalt {
width: 99.7% !important;
}

* html div.msgarea {
height: 129px !important;
}

* html div.msgareaalt {
height: 248px !important;
}

div.msgarea h1, div.msgareaalt h1, div.headtitleLft, div.headtitleRgt, div.headcontainer, div.msgarea, div.msgareaalt {
color: #000 !important;
}

div.msgarea h1.hidden, div.msgareaalt h1.hidden {
position: static !important;
font-size: 200% !important;
float: none !important;
overflow: visible !important;
width: 100% !important;
height: auto !important;
font-weight: bold !important;
}

div.headcontainer {
background-color: #FFF !important;
border: 1px solid #000 !important;
}

* html div.headcontainer {
width: 99.7% !important;
height: 118px !important;
}

Liens consultés/actifs/en évidence à contraste élevé

a:hover, a:active, a:focus {
color: #000 !important;
background-color: #FFF !important;
}

Dans l'exemple suivant, les couleurs peuvent être modifiées et assignées comme suit :

Propriété du lien	Nom de la classe	Propriété de la classe	Couleur (codes hexadécimaux)	Couleur
Couleurs des liens consultés / actifs / en évidence	a:hover, a:active, a:focus	color	#000	Noir
Couleur de l'arrière-plan	a:hover, a:active, a:focus	background-color	#FF0	Jaune

Comment configurer votre navigateur pour utiliser un fichier CSS côté client

Internet Explorer pour Windows

1. Sélectionnez « Internet Options » (« Options Internet ») dans le menu « Tools » (« Outils »).
2. Appuyez sur le bouton « Accessibility » (« Accessibilité »).
3. Cochez la case « Format documents using my style sheet » (Mettre les documents en forme en utilisant ma feuille de style »).
4. Utilisez le bouton « Browse » (« Parcourir ») pour sélectionner votre fichier CSS côté client.
5. Confirmez les changements en appuyant sur le bouton « OK ».

Internet Explorer pour Mac

1. Sélectionnez « Preferences » dans le menu « Explorer ».
2. Sélectionnez la section « Web Content » dans la liste « Web Browser » (étendre la liste « Web Browser » au besoin).
3. Cochez les cases « Show style sheets » et « Use my style sheet ».
4. Appuyez sur le bouton « Select Style Sheet » pour sélectionner votre fichier CSS côté client.
5. Confirmez les changements en appuyant sur le bouton « OK ».

Mozilla Firefox, Netscape (6.0 et versions ultérieures) et Mozilla

1. Renommez votre fichier CSS à « userContent.CSS »
2. Copiez le fichier dans le sous-dossier « chrome » du dossier de votre profil de navigateur. Instructions pour trouver le dossier de votre profil (disponible en anglais seulement). Le sous‑dossier « chrome » devrait contenir les fichiers « userContent-example.CSS » et « userChrome-example.CSS ».
3. Relancez votre navigateur.

Opera 8 et versions ultérieures

1. Sélectionnez « Preferences » dans le menu « Tools ».
2. Sélectionnez l'onglet « Advanced ».
3. Sélectionnez l'option « Content » dans la liste.
4. Appuyez sur le bouton « Style options ».
5. Appuyez sur le bouton « Choose » pour sélectionner votre fichier CSS côté client.
6. Confirmez les changements en appuyant sur le bouton « OK ».

Opera 7

1. Sélectionnez « Preferences » dans le menu « File ».
2. Sélectionnez « Page Style ».
3. Appuyez sur le bouton « Choose » pour sélectionner votre fichier CSS côté client.
4. Confirmez les changements en appuyant sur le bouton « OK ».

Safari

1. Sélectionnez « Preferences » dans le menu « Safari ».
2. Sélectionnez « Advanced ».
3. Appuyez sur le bouton « Other » pour sélectionner votre fichier CSS côté client.
4. Confirmez les changements en appuyant sur le bouton « OK ».