ARCHIVÉ - Solutions pour la création de liens d'initiatives accessibles

Avertissement Cette information est archivée parce qu'elle est désuete et n'est plus pertinente.

Contenu archivé

Information archivée dans le Web à des fins de consultation, de recherche ou de tenue de documents. Cette dernière n’a aucunement été modifiée ni mise à jour depuis sa date de mise en archive. Les pages archivées dans le Web ne sont pas assujetties aux normes qui s’appliquent aux sites Web du gouvernement du Canada. Conformément à la Politique de communication du gouvernement du Canada, vous pouvez obtenir cette information dans un autre format en communiquant avec nous.

Table des matières

1.0 Introduction

Au gouvernement du Canada, on utilise souvent des liens colorés et attrayantes pour aider à promouvoir les initiatives. Plusieurs de ces liens sont créés à l'aide d'images qui contiennent du texte. Il est indéniable que les images servant de liens sont effectivement colorées et attrayantes, mais elles peuvent nuire à l'accessibilité de l'information.

Dans la plupart des cas, les images servant de liens ne peuvent être mises à l'échelle du reste du texte dans la page, ce qui peut occasionner des problèmes pour les clients dont la vision est faible. En effet, il arrive assez souvent que ces personnes n'arrivent pas à lire les petits caractères intégrés à une image. Même dans le cas d'images agrandissables, les clients dont la vision est faible seront rapidement confrontés au phénomène de la dégradation par pixelisation, ce qui en compliquera la lecture.

Les images servant de liens peuvent aussi éviter que les clients changent les combinaisons de couleurs de premier plan et de fond pour répondre à leurs besoins en matière d'accessibilité. Par ailleurs, pour certains clients, il se peut que la combinaison de couleurs choisie pour les images servant de liens ne soit pas assez contrastante.

Pour arriver à créer un concept visuel agréable qui soit accessible, on doit séparer le texte et l'image pour que les deux éléments puissent être gérés séparément. Pour ce faire, on peut définir une image de fond pour du texte de premier plan à l'aide des feuilles de style CSS (Cascading Style Sheets ou feuilles de style en cascade). Cette solution offre une plus grande accessibilité, car le texte peut être mis à l'échelle, et le lecteur peut changer la combinaison des couleurs de premier plan et de fond.

Nota : Cette solution ne fonctionne qu'avec la trousse de modèles de Normalisation des sites Internet du Gouvernement du Canada. Le code CSS de base qui est essentiel à cette solution est compris des les fichiers des modèles CSS.

2.0 Création d'un lien accessible vers les initiatives

Pour être accessibles, les liens d'initiatives doivent comporter trois parties : l'image de fond, le code (X)HTML propre à l'initiative et le code CSS propre à l'initiative.

2.1 L'image de fond

2.1.1 Création de l'image de fond

La taille d'affichage du contenant du lien d'initiative est de 191 pixels de largeur sur 66 pixels de hauteur. Pour que le contenant du lien d'initiative puisse être agrandi quand l'utilisateur augmente la taille de la police, les dimensions de l'image de fond doivent mesurer au moins 210 pixels de largeur sur 100 pixels de hauteur. L'image doit être optimisée pour que son centre d'intérêt soit affiché en 191 pixels sur 66 pixels lorsque la taille de la police est celle qui est définie par défaut.

Le centre d'intérêt de l'image doit être conçu de sorte qu'il soit suffisamment grand pour afficher le texte de premier plan lorsque la taille de la police est celle qui est définie par défaut. Pour s'assurer que le texte de premier plan puisse être lu facilement, la zone d'image sous-jacente doit être le moins complexe possible et ses couleurs doivent contraster avec le texte de premier plan.

2.1.2 Installation de l'image de fond

Copiez l'image dans un endroit central auquel toutes les pages Web peuvent faire référence (par exemple, /images).

2.2 Nom de classe CSS propre à l'initiative

Donnez un nom unique aux classes CSS qui seront propres à l'initiative. Il vaut mieux créer un nom de classe qui reprend en partie le nom de l'initiative. Vous éviterez ainsi les conflits avec les classes CSS des autres initiatives (p. ex., recruitInit)..

2.3 Code (X)HTML propre à l'initiative

2.3.1 Création du code (X)HTML propre à l'initiative

Pour tous les liens d'initiatives, le code (X)HTML sera semblable. En effet, le code (X)HTML suivant doit être utilisé pour chacun des liens d'initiatives :

<div class="gcinit">
<div class="recruitInit">
<a href="#" title="Recrutement - Joignez-vous aux Forces canadiennes ">
<span class="fontSize130">Recrutement </span>
</a>
</div>
</div>

Seules cinq parties du code ci-dessus peuvent être personnalisées, c'est-à-dire :

  1. Le nom de classe du deuxième élément « div » ("recruitInit") doit être remplacé par le nom de classe qui a été défini dans la section 2.2 (Nom de classe CSS propre à l'initiative).

  2. L'URL du lien (« # ») doit être remplacé par l'URL de la page de l'initiative ciblée.

  3. Le titre du lien (« Recrutement - Joignez-vous aux Forces canadiennes ») doit être remplacé par un titre qui aide à mettre en contexte le texte du lien. Le titre doit commencer par le texte du lien (précisé à l'étape 5) et être suivi d'un trait d'union et d'une description texte qui fournit des renseignements contextuels additionnels.

  4. Le nom de classe de la balise « span » (« fontSize130 ») doit être remplacé par le nom de classe de l'une des classes de taille de police définies dans la section 8.1 (classes de taille de police) dans la trousse de modèles de Normalisation des sites Internet du Gouvernement du Canada.

  5. Le texte du lien (« Recrutement ») doit être remplacé par le texte voulu.

2.3.2 Installation du code (X)HTML propre à l'initiative dans une page Web

Le code (X)HTML propre à l'initiative doit être placé seulement dans le menu de droite ou dans le corps de la page Web.

2.3.2.1 Menu de droite

Pour installer le code (X)HTML dans le menu de droite, il suffit de coller le code (X)HTML propre à l'initiative entre la balise <div id="right"> et sa balise fermante </div>.

2.3.2.2 Corps de la page

L'affichage des liens propres à l'initiative diffère selon que les liens soient placés dans le corps de la page ou dans le menu de droite. Dans le corps de la page, la zone disponible est plus large. On peut donc inscrire plus d'un lien d'initiative sur la même ligne. Pour ce faire, il faut utiliser le code de « retour à la ligne automatique ». Tous les liens d'initiatives qui sont inscrits dans le corps de la page doivent être compris à l'intérieur du même code de « retour à la ligne automatique ».

Ce code commence par <div class="gcinits"> et se termine par </div><div>&#160;</div>, comme dans l'exemple ci-dessous :

<div class="gcinits">
... Code (X)HTML propre à l'initiative 1 ...
... Code (X)HTML propre à l'initiative 2 ...
... Code (X)HTML propre à l'initiative 3 ...
... Code (X)HTML propre à l'initiative 4 ...
</div>
<div>&#160;</div>

Haut de la page

2.4 Code CSS propre à l'initiative

2.4.1 Création du code CSS propre à l'initiative

Pour tous les liens d'initiatives, le code CSS sera semblable. En effet, le code CSS suivant doit être utilisé pour chacun des liens d'initiatives :

.recruitInit {
      text-align: left;
      background: url(../images/rec/af_dp_3_200.jpg) #006 no-repeat center center;
}
.recruitInit span {
      position: relative;
      top: 5%;
      left: 5%;
      color: #FF0;
      font-family: inherit;
      font-style: normal;
      font-variant: normal;
      font-weight: bold;
      line-height: normal;
      letter-spacing: normal;
      word-spacing: normal;
      background-color: transparent;
}

Le nom de chacune des classes ci-dessus (« recruitInit ») doit être remplacé par le nom de classe qui a été défini dans la section 2.2 (Nom de classe CSS propre à l'initiative)..

Les tableaux suivants définissent la façon dont on peut configurer les classes ci-dessus :

Propriétés modifiables de la classe « <class_name> » (p. ex. .recruitInit)
Propriété Choix de valeurs Description
text-align left, center, right Ces valeurs définissent l'alignement du texte dans son contenant.
background
(URL de l'image)		 url(.../images/.../image.jpg) La valeur doit être remplacée par l'URL de l'image qui a été créée et installée à la section 2.1 (L'image de fond).
background (couleur) couleur recommandée pour le Web (p. ex. #006) La valeur doit être remplacée par une des couleurs recommandées pour le Web. Cette valeur détermine la couleur de fond du contenant au cas où la taille de la police ferait en sorte que les dimensions du contenant dépassent celles de l'image.


Propriétés modifiables de la classe « <class_name> span » (p. ex. .recruitInit span)
Propriété Choix de valeurs Description
top Unité relative (p. ex. 5%) Cette propriété définit en pourcentage l'espace vertical à insérer entre le texte du lien et son contenant. La valeur doit être remplacée par un pourcentage qui positionne le texte du lien correctement par rapport à la disposition verticale.
left Unité relative (p. ex. 5%) Cette propriété doit être réservée aux cas où la valeur « right » ou « center » a été attribuée à la propriété text-align.

Cette propriété définit en pourcentage l'espace à insérer à droite du texte du lien par rapport à la largeur du contenant. La valeur doit être remplacée par un pourcentage qui positionne le texte du lien correctement par rapport à la disposition horizontale.
right Unité relative (p. ex. 5%) Cette propriété doit être réservée aux cas où la valeur « right » ou « center » a été attribuée à la propriété text-align.

Cette propriété définit en pourcentage l'espace à insérer à gauche du texte du lien par rapport à la largeur du contenant. La valeur doit être remplacée par un pourcentage qui positionne le texte du lien correctement par rapport à la disposition horizontale.
color Couleur recommandée pour le Web (p. ex. #FF0) Cette propriété définit la couleur du texte du lien. La valeur doit être remplacée par une couleur recommandée pour le Web. La couleur du texte du lien doit contraster vivement avec l'image de fond.
font-family inherit, catégorie de police Cette propriété définit la catégorie de police du texte du lien. Dans la plupart des cas, il faut utiliser la valeur « inherit ». Si on souhaite utiliser une autre catégorie de police, il faut définir une police sans-serif auxiliaire (p. ex. « arial, sans-serif »).
font-style normal, italic, oblique Cette propriété définit le style du texte du lien. Il peut être normal, en italique ou oblique.
font-variant normal, small-caps Pour les lettres qui ne sont pas en majuscules, cette propriété définit la casse des lettres. Elles peuvent être en lettres minuscules ou en petites majuscules.
font-weight normal, bold Cette propriété détermine si le texte du lien est affiché normalement ou en gras.
line-height normal, unité relative (p. ex. 100%) Cette propriété détermine la hauteur de chacune des lignes du texte du lien. Dans la plupart des cas, il faut utiliser la valeur « normal ». Pour changer la hauteur des lignes, il faut utiliser une unité relative.
letter-spacing normal, unité relative (p. ex. 0.2em) Cette propriété définit l'espace entre les lettres du texte du lien. Dans la plupart des cas, il faut utiliser la valeur « normal ». Pour changer l'espacement entre les lettres, il faut utiliser une unité relative.
word-spacing normal, unité relative (p. ex. 0.2em) Cette propriété définit l'espace entre les mots dans le texte du lien. Dans la plupart des cas, il faut utiliser la valeur « normal ». Pour changer l'espace entre les mots, il faut utiliser une unité relative.
background-color transparent, couleur recommandée pour le Web (p. ex. #FFF) Cette propriété définit la couleur de fond du texte du lien. Dans la plupart des cas, il faut utiliser la valeur « transparent ». Si on souhaite utiliser une couleur de fond pour le texte de premier plan, il faut choisir une des couleurs recommandées pour le Web.

2.4.2 Installation du code CSS propre à l'initiative

Copiez et collez le code CSS propre à l'initiative dans le fichier institution.css de la trousse de modèles de NSI du GC.

3.0 Exemples de liens d'initiatives

3.1 Exemples précis de liens d'initiative

3.1.1 Exemple de lien propre à une initiative de recrutement

3.1.1.1 Code (X)HTML propre à l'initiative

<div class="gcinit">
<div class="recruitInit">
<a href="#" title="Recrutement - Joignez-vous aux Forces canadiennes">
<span class="fontSize130">Recrutement</span>
</a>
</div>
</div>

3.1.1.2 Code CSS propre à l'initiative

.recruitInit {
      text-align: left;
      background: url(../images/rec/af_dp_3_200.jpg) #006 no-repeat center center;
}
.recruitInit span {
      position: relative;
      top: 5%;
      left: 5%;
      color: #FF0;
      font-family: inherit;
      font-style: normal;
      font-variant: normal;
      font-weight: bold;
      line-height: normal;
      letter-spacing: normal;
      word-spacing: normal;
      background-color: transparent;
}

3.1.1.3 Résultat
Recrutement

3.1.2 Exemple de lien d'initiative sur les espèces menacées

3.1.2.1 Code (X)HTML propre à l'initiative

<div class="gcinit">
<div class="endSpecInit">
<a href="#" title="Espèces menacées - Information au sujet des espèces menacées au Canada">
<span class="fontSize110">Espèces<br/>menacées</span>
</a>
</div>
</div>

3.1.2.2 Code CSS propre à l'initiative

.endSpecInit {
      text-align: right;
      background: url(../images/env/spp157p1.jpg) #333 no-repeat center center;
}
.endSpecInit span {
      position: relative;
      top: 23%;
      right: 2%;
      color: #FFC;
      font-family: inherit;
      font-style: normal;
      font-variant: normal;
      font-weight: bold;
      line-height: normal;
      letter-spacing: normal;
      word-spacing: normal;
      background-color: transparent;
}

3.1.2.3 Résultat
Espèces
menacées

3.2 Exemple de liens d'initiative groupés

3.2.1 Corps de la page

3.2.1.1 Code (X)HTML

<div class="gcinits">
<div class="gcinit">
<div class="recruitInit">
<a href="#" title="Recrutement - Joignez-vous aux Forces canadiennes">
<span class="fontSize130">Recrutement</span>
</a>
</div>
</div>
<div class="gcinit">
<div class="endSpecInit">
<a href="#" title="Espèces menacées - Information au sujet des espèces menacées au Canada">
<span class="fontSize110">Espèces<br/>menacées</span>
</a>
</div>
</div>
</div>
<div>&#160;</div>

3.2.1.2 Résultat
Recrutement
Espèces
menacées
 

3.2.2 Menu de droite

Haut de la page
3.2.2.1 Code (X)HTML

<div class="gcinit">
<div class="recruitInit">
<a href="#" title="Recrutement - Joignez-vous aux Forces canadiennes">
<span class="fontSize130">Recrutement</span>
</a>
</div>
</div>
<div class="gcinit">
<div class="endSpecInit">
<a href="#" title="Espèces menacées - Information au sujet des espèces menacées au Canada">
<span class="fontSize110">Espèces<br/>menacées</span>
</a>
</div>
</div>

3.2.2.2 Résultat final
Recrutement
Espèces
menacées

4.0 Augmenter l'accessibilité à l'aide de feuilles de style en cascade CSS côté client

Pour les liens d'initiatives, il faut une conception visuelle spéciale. Lorsque les circonstances le justifient, il faudra peut-être offrir une solution de contournement pour accroître l'accessibilité de l'information. Grâce à ses feuilles de style en cascade CSS côté client, le modèle de lien organisationnel offre aux clients la souplesse nécessaire pour configurer la présentation visuelle de façon à répondre aux besoins d'accessibilité.

La plupart des navigateurs offrent la possibilité d'appliquer une feuille de style personnalisée à toutes les pages Web consultées par un client. Dans le but de tirer profit de cette caractéristique, il suffit de créer une feuille de style personnalisée et de donner au navigateur la consigne de l'utiliser.

Pour créer une feuille de style personnalisée, le client doit savoir comment on développe les CSS et les pages Web. Dans Internet, il existe bon nombre de feuilles de style d'application générale pour accroître l'accessibilité des pages Web. Toutefois, la plupart des clients trouveraient cela probablement trop difficile de créer une feuille de style personnalisée qui active certaines fonctions d'accessibilité à l'intérieur du modèle.

Pour faciliter la tâche des clients qui doivent accroître l'accessibilité des pages Web à l'aide de la solution du lien organisationnel, le SCT offre des feuilles de style CSS côté client qu'on peut facilement ajouter aux feuilles de style personnalisées. Ces feuilles de style CSS devraient être disponibles à partir de la page d'aide organisationnelle afin que les clients puissent les télécharger.

4.1 Lien organisationnel à contraste élevé sans image de fond

Pour répondre aux exigences en matière d'esthétisme et d'accessibilité, il faut afficher le texte d'un lien sur une image de fond. Selon la taille de police et les couleurs choisies, le manque de contraste entre le texte au premier plan et l'image de fond peut restreindre la lecture pour certaines personnes.

Pour s'assurer que le contraste des liens d'initiatives est suffisamment élevé, les clients doivent désactiver l'image de fond, sélectionner les valeurs par défaut pour les propriétés du texte et définir une combinaison de couleurs de premier plan et de fond à contraste élevé en intégrant les CSS côté client suivantes dans les feuilles de style personnalisées :

.gcinit div {
      background: none #FFF !important;
}
.gcinit span {
      color: #00F !important;
}
.gcinit a, .gcinit a:visited, #center .gcinit a, #center .gcinit a:visited {
      text-decoration: underline !important;
      text-transform: capitalize;
      color: #00F !important;
      font-family: Verdana, Arial, Helvetica, Sans-serif !important;
      font-style: normal !important;
      font-variant: normal !important;
      font-weight: bold !important;
      line-height: normal !important;
      letter-spacing: normal !important;
      word-spacing: normal !important;
      background-color: transparent !important;
}