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 :
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.
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;
}
Votre navigateur devrait maintenant afficher les messages « Passer au contenu » et « Passer aux liens institutionnels ».
div.page {
width : 100% !important;
}
Votre navigateur devrait maintenant afficher les pages sur toute la largeur de l'écran.
a:link, a:visited, a:hover {
text-decoration: underline !important;
}
Votre navigateur devrait maintenant souligner tous les liens à l'écran.
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;
}
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 |
background-color |
#FFF |
Blanc |
Couleur de lien consulté | a:link |
color |
#00F |
Bleu |
Couleur de lien du bouton sensitif | a:visited |
color |
#009 |
Bleu foncé |
Couleur de lien du bouton sensitif | a:hover |
color |
#F00 |
Rouge |
Les couleurs de tous les liens à l'avant‑plan et à l'arrière‑plan de votre navigateur devraient maintenant être uniformes.
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;
}
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é.
.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;
}
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é.