Pratique exemplaire

Couleur

  • Assurez-vous que l’information véhiculée par les différences de couleur est également disponible en texte.
  • Incluez un indice textuel pour les étiquettes de formulaire en couleur.
  • Assurez-vous qu’il y a des indices visuels supplémentaires lorsque des différences de couleur de texte sont utilisées pour transmettre de l’information.
  • Assurez-vous que le rapport de contraste par rapport au texte environnant est de 3:1 et utilisez un indice visuel supplémentaire en cas de sélection de liens ou de commandes lorsque seule leur couleur les distingue.

Contraste

  • Assurez-vous que le rapport de contraste du texte en petits caractères (police ordinaire de moins de 18 points ou caractères gras de moins de 14 points) est d’au moins 4,5:1 par rapport à l’arrière-plan.
  • Assurez-vous que le rapport de contraste du texte en gros caractères (police standard d’au moins 18 points ou caractères gras de 14 points) est d’au moins 3:1 par rapport à l’arrière-plan.
  • Assurez-vous que le rapport de contraste des composants actifs de l’interface utilisateur (c.-à-d. les commandes), leurs états et les graphiques significatifs est d’au moins 3:1 par rapport aux couleurs adjacentes.
  • Dans la mesure du possible, augmentez le contraste et visez les valeurs maximales de 7:1 pour les textes en petits caractères et de 4,5:1 pour ceux en gros caractères.

Proximité visuelle des étiquettes

  • Placez les étiquettes relatives aux champs du formulaire immédiatement avant ceux-ci:
    • soit au-dessus du champ (privilégié par le Guide de style de la BOEW);
    • soit à gauche du champ, aligné à droite (privilégié par le Guide de style de la BOEW lorsqu’il faut conserver un espace vertical).
  • Placez les étiquettes des boutons radio et des cases à cocher après le champ.

Espacement des textes

Votre conception doit être suffisamment souple pour conserver son contenu et sa fonctionnalité lorsque l’utilisateur modifie l’espacement des textes, en tenant compte de ces contraintes:

  • hauteur de ligne (espacement des lignes) à au moins 1,5 fois la taille de la police;
  • espacement suivant les paragraphes d’au moins 2 fois la taille de la police;
  • interlettrage (approche de groupe) d’au moins 0,12 fois la taille de la police;
  • espacement entre les mots d’au moins 0,16 fois la taille de la police.

Pour contourner l’espacement des textes dans votre conception :

  • N’utilisez pas de contenants fixes dans vos styles de CSS.
  • Veiller à ce que le contenu s’affiche sans chevauchement ou perte de texte.
  • Utilisez des unités relatives de taille de police, de hauteur de ligne, d’espaces entre les caractères, les mots, les lignes et les paragraphes.

Contenu produit par une CSS

  • Masquer le contenu décoratif généré par des feuilles de style en cascade des lecteurs d’écrans en utilisant l’attribut aria-hidden="true".
  • Ne pas utiliser du texte généré par des feuilles de style en cascade.
    • Exception : Utiliser du texte généré par des feuilles de style en cascade pour afficher les éléments mark, del, ins et s aux utilisateurs de lecteur d’écran.
  • Concernant les icônes d’information générées par des feuilles de style en cascade :
    • Configurer l’icône sur un élément <span>, et :
      • Le masquer sur le lecteur d’écran des utilisateurs avec l’attribut aria-hidden.
      • Ajouter une étiquette visible pour les utilisateurs de souris en utilisant l’attribut title.
    • Ajouter une étiquette pour les utilisateurs de lecteur d’écran dans un deuxième élément <span> , masqué visuellement avec la classe CSS de la BOEW .wb-inv.

Masquer un contenu

Il peut l’être pour trois groupes d’utilisateurs:

  • Pour tous les utilisateurs, en utilisant l’attribut display:none ou visibility:hidden de la CSS. Lorsque vous masquez du contenu inactif, comme les fenêtres modales non déclenchées et les sous-menus non sélectionnés, vous devez le masquer pour tous les utilisateurs.
  • Pour les utilisateurs d’une technologie d’aide, au moyen de l’attribut aria-hidden="true" pour supprimer l’élément de l’API d’accessibilité;
  • Pour les utilisateurs voyants, par l’entremise de la classe .wb-inv de CSS de la BOEW pour masquer le contenu.

Affichage d’un contenu lorsqu’on le survole avec le pointeur ou qu’on le sélectionne avec le clavier

Lorsque vous affichez un contenu masqué à l’aide du pointeur, assurez-vous que ce contenu satisfait aux trois critères suivants:

Peut être ignoré
L’utilisateur peut ignorer le contenu affiché sans déplacer le pointeur de la souris ou annuler la sélection avec le clavier, habituellement en appuyant sur la touche Escape.
Peut être survolé
L’utilisateur peut placer le pointeur de la souris sur le contenu affiché.
Persistant
Le contenu affiché ne disparaît pas tant que le pointeur ne l’a pas dépassé ou que la sélection avec le clavier n’est pas annulée.
Haut de la page