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

Les normes de la NSI exigent une conception visuelle particulière qui peut nécessiter le recours à une solution de rechange pour accroître l'accessibilité lorsque les circonstances le justifient. Le concept du modèle offre la souplesse voulue pour permettre aux clients de configurer la présentation visuelle de manière à obtenir l'accessibilité dont ils ont besoin en faisant usage de feuilles de style CSS côté client.

La plupart des navigateurs permettent de définir une feuille de style personnalisée qui est appliquée par la suite à chaque page Web que consulte le client. Pour profiter de la fonction, le client n'a qu'à définir une feuille de style personnalisée et à donner instruction au navigateur d'en faire usage.

Pour pouvoir définir une feuille de style personnalisée, le client doit connaître à la fois les feuilles de style CSS et la technique de développement de pages Web. Il existe de nombreuses feuilles de style personnalisées à télécharger en ligne qui permettent d'améliorer l'accessibilité aux pages Web en général, mais il est probable que la plupart des clients jugent excessivement difficile la création d'une telle feuille de style qui active des fonctions d'accessibilité particulières du modèle.

Pour que les clients puissent améliorer leur accessibilité aux pages Web en faisant usage du modèle de page NSI du gouvernement du Canada, des feuilles de style CSS côté client ont été conçues, lesquelles peuvent être incluses aisément parmi les feuilles de style personnalisées. Celles-ci sont listées ci-dessous :

Liens « Saut de navigation » visibles par défaut

Il a fallu rendre invisibles les éléments « Saut de navigation » par défaut pour répondre aux exigences de la conception visuelle. Cette façon de faire est sans conséquence pour les clients qui utilisent un lecteur d'écran et les éléments « Saut de navigation » deviennent visibles lorsque le pointeur de la souris les survole ou lorsqu'ils sont choisis au moyen d'un clavier ou d'autre périphérique d'entrée. Cependant, les liens peuvent être difficiles de trouver au début puisque ils sont invisibles par défaut.

Bien que la NSI n'autorise pas l'affichage par défaut de liens « Saut de navigation » visibles, les clients peuvent les faire apparaître par défaut en ajoutant la feuille de style CSS côté client suivante à leurs feuilles de style personnalisées :

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

Il a fallu fixer à 760 pixels la largeur du modèle pour satisfaire aux exigences de la conception visuelle. Un modèle extensible améliore l'accessibilité aux pages Web ou leur potentiel d'utilisation pour certains clients.

Bien que la NSI n'autorise pas l'extensibilité du modèle par défaut, les clients peuvent rendre extensibles les pages Web au moyen d'un modèle en ajoutant la feuille de style CSS côté client suivante à leurs feuilles de style personnalisées :

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

Soulignement de tous les liens

Il a fallu supprimer le soulignement des liens présentés dans le menu latéral et la barre de menu commune pour satisfaire aux exigences de la conception visuelle. Certains clients peuvent avoir de la difficulté à reconnaître des liens qui ne sont pas soulignés ou préférer que tous le soient, peu importe l'effet du soulignement sur la conception visuelle.

Bien que la NSI n'autorise pas le soulignement par défaut des liens figurant dans le menu latéral et la barre de menu commune, les clients peuvent opter pour le soulignement de tous les liens en ajoutant la feuille de style CSS côté client suivante à leurs feuilles de style personnalisées :

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

Couleurs uniformes des liens

Il a fallu fixer des couleurs d'avant–plan et d'arrière–plan des liens dans certaines zones de la page pour satisfaire aux exigences de la conception visuelle. Certains clients peuvent avoir de la difficulté à repérer les liens si les couleurs ne sont pas uniformes dans l'ensemble de la page.

Bien que la NSI n'autorise pas l'établissement par défaut de couleurs d'avant–plan et d'arrière–plan uniformes de tous les liens, les clients peuvent les définir en ajoutant la feuille de style CSS côté client suivante à leurs feuilles de style personnalisées :

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

Les modèles affichent le texte d'avant–plan de la bannière de page de contenu soit sur une couleur soit sur une image d'arrière–plan afin de satisfaire aux exigences de conception visuelle et d'accessibilité. Certains clients peuvent juger insuffisant le contraste entre le texte d'avant–plan et l'arrière–plan, selon la taille de police et les couleurs utilisées.

Le client peut afficher une bannière à contraste élevé de page de contenu en désactivant la couleur ou l'image d'arrière–plan et en définissant un ensemble de couleurs d'avant–plan et d'arrière–plan contrastantes. Il lui suffit d'ajouter la feuille de style CSS côté client suivante à ses feuilles de style personnalisées :

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

Les modèles affichent le texte d'avant–plan à la fois sur une couleur et une image d'arrière–plan pour satisfaire aux exigences de la conception visuelle et de l'accessibilité. Certains clients peuvent juger le contraste insuffisant entre le texte d'avant–plan et l'arrière–plan, selon la taille de police et les couleurs utilisées.

Le client peut afficher une zone de message à contraste élevé de page d'accueil en désactivant la couleur et l'image d'arrière–plan, et en définissant un ensemble de couleurs d'avant–plan et d'arrière–plan à contraste élevé. Il lui suffit d'ajouter la feuille de style CSS côté client suivante à ses feuilles de style personnalisées :

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

Dans le but de répondre à la fois aux exigences de la conception visuelle et de l'accessibilité, les couleurs de lien ou d'arrière-plan des liens ne pourront pas changer lorsque le pointeur de la souris survole le lien ou lorsqu'un lien est choisi au moyen du clavier ou d'un autre périphérique d'entrée. Selon la façon dont le navigateur surligne les liens, la taille de la police courante et les couleurs utilisées, certains clients peuvent avoir de la difficulté à déterminer quel lien ils sont sur le point de sélectionner.

Afin qu'il soit plus facile de déterminer quel lien ils sont sur le point de sélectionner, les clients peuvent préciser une couleur d'avant-plan et d'arrière-plan pour les liens lorsque le pointeur de la souris survole un lien ou lorsqu'un lien est choisi au moyen du clavier ou d'un autre périphérique d'entrée. Il leur suffit d'ajouter la feuille de style CSS côté client à leurs feuilles de style personnalisées :

a:hover, a:active, a:focus {
      color: #000 !important;
      background-color: #FF0 !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