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 style en cascade (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

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 Normalisation des sites Internet (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 extensibl

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;
}

Haut de la page

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: #F00 !important;
}

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

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 {
      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;
      color: #000 !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: #FFF !important;
}

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