10. USAGE DES CSS

Table des matières

10.1 Contenus masqués

10.1.1 Ne pas utiliser les propriétés CSS « display » ou « visibility » pour masquer un contenu qui ne peut pas être affiché par l'utilisateur

Lorsque des éléments sont présents dans le code HTML, mais ne sont pas affichés par défaut à l’écran, deux cas se présentent.

Cas 1 : Ces éléments sont masqués, mais peuvent être affichés par une action de l’utilisateur.

Concernant le premier cas, il peut s’agir, par exemple, du contenu d’une pop-in, d’un menu déroulant, ou encore des différents panneaux d’un carrousel dynamique.Pour savoir comment prendre en compte l’accessibilité de ces éléments, se référer à la notice d’accessibilité interfaces riches et JavaScript :

Menus déroulants
Accordéons (plier/déplier)
Onglets
Carrousels (slideshow)
Fenêtre modale (lightbox)

Cas 2 : Ces éléments sont masqués, mais ne seront jamais affichés.

Les éléments masqués, mais qui ne seront jamais affichés peuvent être également classés en deux sous-types.

Cas 2.1 : Les éléments inutiles pour tous les utilisateurs.

Les éléments inutiles pour tous les utilisateurs doivent, par ordre de priorité :

Être supprimés du code HTML.
Si cela n’est pas possible, être masqués à l’aide des propriétés CSS display: none; ou visibility: hidden;.

Cas 2. 2 : Les éléments qui sont utiles pour les utilisateurs de lecteurs d’écran, mais inutiles pour les autres utilisateurs.

Les éléments utiles aux utilisateurs de lecteurs d’écran doivent être rendus invisibles ou sortis de l’écran à l’aide des propriétés CSS.Voici les propriétés proposées pour sortir la balise de l’écran :

.hidden-tag { //Balise caché
    border: 0;
    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    padding: 0;    
    width: 1px;
}

Voici les propriétés proposées pour masquer le texte sans changer la position de la balise :

.text-overflow{ //Texte caché avec image visible
    font-size: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;  
    /* La hauteur doit être spécifié avec le padding. 
       Exemple, si la hauteur est 30px : padding-top: 30px; 
       OU si vous avez un pseudo-élément :after ou :before, 
       il faut écraser le height: 0 par votre valeur. */ 
}
 
OU
 
.hide-text { 
    text-indent: 100%; //Important, ne pas utiliser -9999px (problème de performance)
    white-space: nowrap;
    overflow: hidden;
}

REMARQUES

Si vous utilisez les variables SCSS d'ICI.radio-canada.ca, voici les classes (aussi utilisé en mixin) qui sont à utiliser :

.hidden-tag : Cette classe masque complètement la balise.
.hide-text et .text-overflow : Cache le texte à l'intérieur de la balise, mais ne change pas la position de celle-ci (utile lorsqu'on affiche un logo en police de caractère et qu'on veut masquer son intitulé).

Il peut s’agir, par exemple, d’indications servant à faciliter la navigation dans les pages, de liens d’évitement, etc.

10.2 Modification de l’apparence et de la taille du texte

10.2.1 Utiliser les CSS pour mettre en forme les textes

Outre les logos et autres éléments distinctifs appartenant à une charte graphique et qui ne sont pas à prendre en compte dans le cadre de cette recommandation, utiliser les CSS pour mettre en forme les textes. Utiliser des images-textes qu’en dernier recours.

En priorité, utiliser des fontes web (Arial, Verdana, Helvetica, etc.) ou google fonts. Seules les polices officielles de Radio-Canada sont utilisées avec la propriété CSS3 @font-face. (Exemple : Rubrik).
Par défaut, font-family: idéal, commun, générique (Exemple : Rubrik, Arial, sans-serif;).
Tous textes en majuscule doivent être transformés avec CSS uniquement. Certain lecteur d’écran pourrait lire le mot comme un accronym s’ils sont entrées en majuscule dans le HTML.
L’utilisation d’étiquettes superposées à une image doit aussi être faite en CSS, afin de s’assurer que l’étiquette est lisible par un lecteur d’écran. (Voir la capture d’écran de l’exemple 1)

REMARQUES

Une attention particulière a dû être portée sur la faisabilité de ce point dès la phase de conception graphique.

ATTENTION

Une attention particulière est requise aux fontes ou aux icônes créées par des logiciels comme icomoon, cufón ou sIFR, qui ne sont pas détectées par des lecteurs d'écran. L'intitulé qui vient avec l'icône doit alors être clair.

<a href="http://www.google.ca" class="icon-externe" title="Google (Nouvelle fenêtre)">
   Google
</a>

CAPTURES D'ÉCRAN

(Exemple 1 : L’étiquette “Arts” par dessus l’image est entrée en HTML et affichée par dessus en CSS )

(Exemple 2 : Le titre a une police particulière (google font). Elle est entrée en HTML et la police est changée en CSS. Le texte est sélectionner pour montrer que ce n’est pas une image.

10.2.2 Utiliser uniquement des tailles relatives (em, %, small, etc.) pour les polices de caractères

Pour définir les tailles des polices de caractères, utiliser uniquement des unités relatives pour la propriété CSS font-size comme, par exemple em, %, rem, les mots-clés x-small, small, etc.

Ne pas utiliser d’unités absolues comme pt, cm, etc.

Nous préconisons l’utilisation de l’unité « rem » (pour “root em”), qui correspond à un ratio de la valeur par défaut. Sur Radio-Canada, nous utilisons le radio 1 rem = 16px qui est la valeur par défaut du rem. De cette façon, le calcul est plus simple pour transposer les valeurs reçu en px vers sa version rem.

REMARQUES

L’utilisation du pixel (px) comme unité de taille de police est interdite dans les référentiels AccessiWeb et RGAA mais pas dans le WCAG 2.0. Pour garantir la conformité avec ceux-ci, il faudra utiliser une autre unité de taille relative pour la propriété font-size.

ASTUCES

Pour les utilisateurs de la librairie Bunker, une mixin .less a été créée pour calculer l'unité rem par rapport à l'unité px.

/*
- Par défaut, la variable @size est à 16px. La valeur n'est pas obligatoire
- Pour supporter tous les <em>browsers</em>, la propriété <em>font-size</em> est appelée deux fois.
  Dès que l'unité <em>rem</em> sera supportée partout, la mixin pourra être mise à jour.
*/
.px-to-rem(@size : 16){
   @pxValue: @size;
   @remValue: (@size / 16);
   font-size: ~"@{pxValue}px"; 
   font-size: ~"@{remValue}rem";
}

Exemple d'utilisation:

.body{
   .px-to-rem(14); //14 est en px
}

10.2.3 Garantir la lisibilité des contenus même lorsque la taille du texte est doublée

Garantir la lisibilité des contenus, même lorsque l’utilisateur double la taille du texte dans son navigateur. Éviter ainsi le chevauchement de texte, la disparition de texte de l’écran, etc.

Voici comment garantir au maximum le bon respect de cette recommandation :

Ne pas utiliser d’unités (px, pt, %, em, etc.) avec la propriété CSS line-height. L’unité en ratio sera l’unité utilisée. Les normes pour le line-height se situent entre 1.3 et 1.9 de ratio. Sur Radio-Canada, le line-height par défaut est de 1.5 pour les documents simples. Pour les titres ou les situations avec peu de texte, par exemple les lineups ou la une de Première, un line-height de 1.3 est utilisé. (http://24ways.org/examples/css-for-accessibility/lineheight.html).
Prévoir une marge entre les paragraphes d’au moins 1,5 fois la valeur de l’interligne, quelle que soit la taille du texte. Pour ce faire, l’utilisation de l’unité « em » ou « rem » est recommandée.
Ne pas définir de hauteur fixe sur les éléments susceptibles d’accueillir du contenu textuel, notamment les champs de formulaires. Dans ce cas, utiliser plutôt min-height.

Exemple :

.p{ 
   .px-to-rem(14); //mixin qui transforme l'unité px en rem (librairie Bunker) 
   line-height: 1.5; 
   margin-bottom: 1.5em; 
   min-height: 30px;
}

ASTUCES

Pour tester ce critère :

Avec Chrome, utiliser les raccourci clavier CTRL et + (pour agrandir) ou CTRL et - (pour rapetisser)
Avec Firefox, dans le menu Affichage puis Zoom, cocher Zoom texte seulement, puis doubler la taille du texte en faisant six fois le raccourci clavier CTRL et + ( CTRL et 0 ) permet de revenir à la taille par défaut).
Avec Internet Explorer, dans le menu Affichage puis Taille du texte, choisir La plus grande.

ASTUCES - BONIFICATION

Prévoir un interligne d'au moins 1,5 fois la taille du texte si ce grand espacement sert bien le style graphique (titres, paragraphes, accueil de microsite, etc.).

RESSOURCES

Voir aussi Garantir la lisibilité des contenus sur un site web (Design graphique)
Voir aussi Permettre la redimension de la page (HTML et CSS)

10.3 Accès à l’information

10.3.1 Garantir la lisibilité des contenus lorsque les images ne sont pas affichées

Lorsque les images ne sont pas affichées, les contenus textuels de la page doivent rester visibles et lisibles. Aucune information ne doit être perdue, et le contraste entre la couleur du texte et la couleur d’arrière-plan doit être suffisamment élevé.

C’est-à-dire que tous les contenus doivent pouvoir être lus :

Même lorsque les images intégrées en CSS ne sont pas chargées dans la page.
Même lorsque les images intégrées en HTML sont remplacées par le contenu de leur attribut « alt ».

ASTUCES

Chaque fois qu’un texte est superposé à une image d’arrière-plan, veiller à mettre en place une couleur de remplacement, qui garantira la lisibilité du texte en l’absence de l’image. Dans le cas d’une image à fort contraste, éviter de faire passer du texte en négatif et en positif à la fois, dans le but d’assurer la lisibilité sur la couleur de remplacement qui elle, est uniforme.

background: black url(../images/fond-sombre.png) repeat-x;

Cette couleur de remplacement peut être héritée d’un élément parent.

ATTENTION

Une attention particulière doit être portée sur la lisibilité des alternatives textuelles des images intégrées dans le code HTML, lorsque les images ne sont pas affichées.

Si le texte alternatif est plus long que l’image et que les propriétés height et width sont fixes, le texte ne s’affichera pas au complet. Dans ce cas, il faudrait soit utiliser les valeurs 100 % ou auto sur l'une des propriétés height et width, soit les enlever. Dans les deux cas, l'espace pour l'image va s'agrandir pour afficher le texte complet.

CAPTURES D'ÉCRAN

Capture 1 : Exemple d’une image dont les propriétés height et width n’empêche pas le texte alternatif de s’afficher complètement.

Capture 2 : Exemple d’une image dont les propriétés background-color ou color n’ont pas été spécifié et qui s’affiche sur un fond foncé.

10.3.2 Garantir la compréhension de l'information même lorsque les CSS sont désactivés

Veiller à ce que l’information reste compréhensible même lorsque les CSS sont désactivés, notamment lorsque des couleurs, des tailles ou des positions sont vecteurs d’informations.

Dans cet exemple, une flèche tournée vers le bas marque que l’élément peut être déplié (« ICI Info »), une flèche tournée vers le haut marque l’élément déplié du menu (« ICI Première ») tandis que la couleur du texte et le fond de couleur marque l’élément de la page courante (« Accueil »).

Lorsque les CSS sont désactivés, la flèche et les couleurs de fond disparaissent. Cependant, les sous-sections d’« ICI Info » et d’« ICI Première » sont indentés, et « Accueil » est le seul élément sans lien <a>, l’information reste donc compréhensible.

REMARQUES

Plusieurs solutions s'offrent à nous pour cette norme. Nous aurions pu aussi : ajouter un texte caché avec l'information (rubrique courante) sur la rubrique courante :

<a href="…">
   Investisseurs
   <span class="hidden-tag">(rubrique courante)</span>
</a>

ou ajouter l'information dans l'attribut « title » du lien et ajouter la balise <strong> sur la rubrique courante :

<a href="…" title="Investisseurs (rubrique courante)">
   <strong>Investisseurs</strong>
</a>

RESSOURCES

Voir aussi Mettre en place des solutions de remplacement à Javascript (Javascript et interface riche)