Aide à l'accessibilité

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

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 :

  1. Comment créer un fichier CSS côté client
  2. Comment configurer votre navigateur pour utiliser un fichier CSS côté client

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.

Rendre les liens des sauts de navigation visibles

Ajoutez le code CSS suivant à la feuille de style en cascade CSS côté client :

#cn-skip-head a:link, #cn-skip-head a:visited {
overflow: visible !important;
color: #000 !important;
position: static;
clip: auto;
height: auto !important;
width: auto !important;
margin: inherit !important;
opacity: 1 !important;
filter: alpha(opacity = 100) !important;
}

* html #cn-skip-head a:link, * html #cn-skip-head a:visited {
white-space: nowrap;
}

Rendre la page Web extensible

Ajoutez le code CSS suivant à la feuille de style en cascade CSS côté client :

#cn-body-inner-3col, #cn-body-inner-2col, #cn-body-inner-2col-right, #cn-body-inner-1col {
padding: 0 !important;
width: auto !important;
}

#cn-msg-space {
margin: auto;
}

* html body {
width: auto !important;
}

.box .header {
background: #006699;
padding: 0 0 10px;
}

Souligner tous les liens

Ajoutez le code CSS suivant à la feuille de style en cascade CSS côté client :

#cn-body-inner-1col a, #cn-body-inner-2col a, #cn-body-inner-2col-right a, #cn-body-inner-3col a {
text-decoration: underline !important;
}

#cn-body-inner-1col a:hover, #cn-body-inner-1col a:focus, #cn-body-inner-1col a:active, #cn-body-inner-2col a:hover, #cn-body-inner-2col a:focus, #cn-body-inner-2col a:active, #cn-body-inner-2col-right a:hover, #cn-body-inner-2col-right a:focus, #cn-body-inner-2col-right a:active, #cn-body-inner-3col a:hover, #cn-body-inner-3col a:focus, #cn-body-inner-3col a:active {
text-decoration: underline !important;
}

Changer toutes les couleurs des liens

Ajoutez le code CSS suivant à la feuille de style en cascade CSS côté client :

#cn-body-inner-1col a, #cn-body-inner-2col a, #cn-body-inner-2col-right a, #cn-body-inner-3col a {
background: #FFF !important;
font-weight: normal !important;
font-style: normal !important;
font-variant: normal !important;
}

#cn-body-inner-1col a:link, #cn-body-inner-2col a:link, #cn-body-inner-2col-right a:link, #cn-body-inner-3col a:link {
color: #00F !important;
}

#cn-body-inner-1col a:visited, #cn-body-inner-2col a:visited, #cn-body-inner-2col-right a:visited, #cn-body-inner-3col a:visited {
color: #009 !important;
}

#cn-body-inner-1col a:hover, #cn-body-inner-1col a:active, #cn-body-inner-1col a:focus, #cn-body-inner-2col a:hover, #cn-body-inner-2col a:active, #cn-body-inner-2col a:focus, #cn-body-inner-2col-right a:hover, #cn-body-inner-2col-right a:active, #cn-body-inner-2col-right a:focus, #cn-body-inner-3col a:hover, #cn-body-inner-3col a:active, #cn-body-inner-3col a:focus {
color: #C00 !important;
}

#cn-left-col #cn-search-box #cn-search-submit {
background: #FFF !important;
color: #000 !important;
font-weight: bold !important;
}

#cn-left-col, #cn-left-col-gap {
background: #FFF !important;
}

Utiliser une bannière à contraste élevé pour la page de contenu

Ajoutez le code CSS suivant à la feuille de style en cascade CSS côté client :

#cn-banner, #cn-banner-eng, #banner-fra {
background: none !important;
border: 1px solid #000 !important;
}

#cn-banner #cn-banner-text, #cn-banner-eng #cn-banner-text, #cn-banner-fra #cn-banner-text, #cn-banner p, #cn-banner-eng p, #cn-banner-fra p {
color: #000 !important;
}

Utiliser une zone de message à contraste élevé pour la page d'accueil

Ajoutez le code CSS suivant à la feuille de style en cascade CSS côté client :

#cn-msg-space {
border: 1px solid #000 !important;
}

#cn-msg-space, #cn-upper-msg, #cn-lower-msg, #cn-lower-msg p, #cn-left-msg, #cn-right-msg {
background: none !important;
color: #000 !important;
}

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 « OKM ».

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 ».