Passer au contenu | Passer aux liens institutionnels

Liens de la barre de menu commune

Liens institutionnels

SCRS

Liens rapides

Transparence

Aide à l'accessibilité

Feuilles de style en cascade (CSS) côté client visant à accroître l'accessibilité
Comment créer un fichier CSS côté client
Comment configurer votre navigateur pour utiliser un fichier CSS côté client

Haut de la page

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

Les mécanismes de conception de pages Web du présent site Web offrent suffisamment de souplesse pour vous permettre de configurer la présentation visuelle de manière à répondre à vos besoins en matière d'accessibilité à l'aide d'un fichier de feuilles de style en cascade (CSS) côté client. La plupart des navigateurs permettent de définir un fichier CSS côté client, qui peut ensuite être appliqué à chaque page Web que vous consultez. Pour ce faire, veuillez procéder aux étapes suivantes.

Haut de la page

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 (http://www.w3.org/Style/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.

Haut de la page

Comment rendre visibles les liens de saut de navigation

1. Ouvrez votre fichier CSS côté client et insérez-y les bribes de code suivantes :

div.navaid {

	position: static  !important;

	font-size: 100%  !important;

	float: none  !important;

	overflow: visible  !important;

	width: auto  !important;

	height: auto  !important;

}

div.navaid a {

	color: #00F  !important;

	padding: 5px  !important;

	line-height: 150%  !important;

}

2. Sauvegardez votre fichier CSS et rafraîchissez votre navigateur.

Votre navigateur devrait maintenant afficher les messages « Passer au contenu » et « passer aux liens institutionnels ».

Haut de la page

Comment rendre les pages extensibles sur toute la largeur de l'écran?

1. Ouvrez votre fichier CSS côté client et insérez-y les bribes de code suivantes :

div.page {

	width : 100%  !important;

}

2. Sauvegardez votre fichier CSS et rafraîchissez votre navigateur

Votre navigateur devrait maintenant afficher les pages sur toute la largeur de l'écran.
Comment faire en sorte que tous les liens soient soulignés

Haut de la page

Comment faire un lien souligné au complet?

1. Ouvrez votre fichier CSS côté client et insérez-y les bribes de code suivantes :

	a:link, a:visited, a:hover {

	text-decoration: underline !important;

}

2. Sauvegardez votre fichier CSS et rafraîchissez votre navigateur.

Votre navigateur devrait maintenant souligner tous les liens à l'écran.

Haut de la page

Comment faire en sorte que les couleurs des liens à l'avant-plan et à l'arrière-plan soient uniformes

1. Ouvrez votre fichier CSS côté client et insérez-y les bribes de code suivantes :


a:link, a:visited, a:hover {

	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 {

	color: #F00 !important;

}

Veuillez prendre note que les couleurs mentionnées dans l'exemple ci-dessus peuvent être modifiées et sont attribuées comme suit :

Caractéristiques du lien	Nom de la catégorie	Caractéristiques de la catégorie	Couleur (hex)	Couleur
Couleur de fond	`a:link, a:visited, a:hover`	`background-color`	`#FFF`	`Blanc`
Couleur normale du lien	`a:link`	`color`	`#00F`	`Bleu`
Couleur du lien visité	`a:visited`	`color`	`#009`	Bleu foncé
Couleur du lien au passage du curseur	`a:hover`	`color`	`#F00`	`Rouge`

2. Sauvegardez votre fichier CSS et rafraîchissez votre navigateur.

Les couleurs de tous les liens à l'avant-plan et à l'arrière-plan de votre navigateur devraient maintenant être uniformes.

Haut de la page

Comment ajouter plus de contraste à la bannière de la page de contenu

Ouvrez votre fichier CSS côté client et insérez-y les bribes de code suivantes :


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;

}

2. Sauvegardez votre fichier CSS et rafraîchissez votre navigateur.

Votre navigateur a maintenant désactivé la couleur ou l'image originale à l'arrière-plan de la bannière et l'a remplacée par un ensemble de couleurs d'avant-plan et d'arrière-plan à contraste élevé.

Haut de la page

Comment ajouter plus de contraste à la zone de message de la page d'accueil

1. Ouvrez votre fichier CSS côté client et insérez-y les bribes de code suivantes :


.msgarea, .msgareaalt {

	background: none !important;

	border-top: 1px solid #000 !important;

	border-left: 1px solid #000 !important;

	border-right: 1px solid #000 !important;

}

.msgareaalt {

	border-bottom: 1px solid #000 !important;

}

* html .msgarea, 

* html .msgareaalt {

	width: 99.7% !important;

}

* html .msgarea {

	height: 129px !important;

}

* html .msgareaalt {

	height: 248px !important;

}

.msgarea h1, .msgareaalt h1 {

	color: #000 !important;

}

.msgarea h1.hidden, .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;

}

.headcontainer {

	background-color: #FFF !important;

	color: #000 !important;

	border: 1px solid #000 !important;

}

* html .headcontainer {

	width: 99.7% !important;

	height: 118px !important;

}

2. Sauvegardez votre fichier CSS et rafraîchissez votre navigateur.

Votre navigateur a maintenant désactivé la couleur ou l'image originale à l'arrière-plan de la zone de message de la page d'accueil et l'a remplacée par un ensemble de couleurs d'avant-plan et d'arrière plan à contraste élevé.

Haut de la page

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

Haut de la page

Internet Explorer pour Windows

Sélectionnez « Options Internet » dans le menu « Outils ».
Appuyez sur le bouton « Accessibilité ».
Cochez la case « Mettre les documents en forme en utilisant ma feuille de style ».
Utilisez le bouton « Parcourir » pour sélectionner votre fichier CSS côté client.
Confirmez les changements en appuyant sur le bouton « OK ».

Haut de la page

Internet Explorer pour Mac

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

Haut de la page

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

Renommez votre fichier CSS « userContent.css ».
Copiez le fichier dans le sous-dossier « chrome » du dossier de votre profil de navigateur. Pour trouver le dossier de votre profil, consultez le site Web de Mozilla ( http://www.mozilla.org/support/firefox/edit#profile). Le sous-dossier « chrome » devrait contenir les fichiers «userContent-example.css » et « userChrome-example.css ».
Redémarrez le navigateur.

Haut de la page

Opera 8 et versions ultérieures

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

Haut de la page

Opera 7

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

Haut de la page

Safari

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