Skip to content. Skip to navigation
You are here: Home → Base de connaissances sur l'accessibilité → Les règles d'accessibilité → Les règles 2.0 → PERCEPTIBLE : Règle 1.4 Distinguable

PERCEPTIBLE : Règle 1.4 Distinguable

by Jean-Marie D'Amour — last modified 2009-09-02 16:20

Règle 1.4 Distinguable : Faciliter la perception visuelle et auditive du contenu par l'utilisateur, notamment en séparant l’avant-plan de l’arrière-plan.

Comprendre la règle 1.4 (en anglais)

Le règle 1.4 couvre aussi plusieurs aspects touchant à la perception.

Table des matières

Utilisation de la couleur

Le problème

La couleur est parfois utilisée pour communiquer de l’information qui ne sera pas perceptible pour un bon nombre des personnes ayant une incapacité visuelle. Les personnes aveugles n’en n’auront évidemment pas connaissance, mais beaucoup de personnes malvoyantes ont un problème de perception des couleurs. Il y a aussi les daltoniens qui représentent 8,5 % de la population masculine.

Il existe plusieurs formes de daltonisme partiel (dyschromatopsie), la plus fréquente étant la confusion du vert et du rouge. Les autres formes de daltonisme sont nettement plus rares, comme la confusion du bleu et du jaune, la plus rare de toutes étant la déficience totale de la perception des couleurs (achromatopsie), où le sujet ne perçoit que des nuances de gris.

La solution

  • Dans les consignes données ou les mécanismes de navigation, vous ne devez pas vous en remettre seulement aux couleurs, car une personne qui ne perçoit pas les couleurs doit pouvoir se fier sur des indices textuels redondants, la couleur étant un indice supplémentaire pour ceux qui la perçoivent ;
  • Par exemple, il ne suffit pas de mettre les champs obligatoires d'un formulaire en rouge, car ceux-ci doivent aussi être indiqués par une icône comportant un alt explicite ou un texte visible pour tous ;
  • Si des différences de couleurs ont une signification dans une image, ces informations doivent être données dans le texte de remplacement de l'image ;
  • Il est important que les éléments de navigation soit facilement identifiables par un autre moyen que la couleur, ce qui s’applique aux menus mais aussi aux liens que l’on trouve à l’intérieur du texte ;
    • Un contraste de 3 pour 1 est exigé entre la couleur du texte environnant et la couleur du lien.
  • La meilleure pratique pour l’identification des liens est le soulignement, au moins au survol de la souris et au focus.

Les règles qui s’appliquent

WCAG 2.0

1.4.1 Utilisation de la couleur : la couleur n'est pas utilisée comme la seule façon de véhiculer de l'information, d'indiquer une action, de solliciter une réponse ou de distinguer un élément visuel. (Niveau A)

Note : ce critère de succès traite spécifiquement de la perception des couleurs. Les autres formes de perception sont traitées à la règle 1.3 comme l'accès à la couleur par programme informatique et les autres formes de codage de la présentation visuelle.

Comment satisfaire à 1.4.1 (en anglais) | Comprendre 1.4.1 (en anglais

SGQRI

008-01 : Accessibilité d'un site Web
  • 10 b) Lorsqu'un contenu fait appel à une perception sensorielle pour communiquer une information, indiquer une action, solliciter une réponse ou distinguer un élément visuel, cette même information est aussi disponible en texte.
  • 12 a) Un élément de navigation doit pouvoir être identifié comme tel.
008-02 : Accessibilité d'un document téléchargeable
  • 10 a) Lorsqu'un contenu fait appel à une perception sensorielle pour communiquer une information, indiquer une action, solliciter une réponse ou distinguer un élément visuel, cette même information est aussi disponible en texte.
  • 11 a) Un élément de navigation doit pouvoir être identifié comme tel.
008-03 : Accessibilité du multimédia dans un site Web
  • 11. En matière de présentation dans un objet multimédia :
    • a) lorsqu'un contenu fait appel à une perception sensorielle pour communiquer une information, indiquer une action, solliciter une réponse ou distinguer un élément visuel, cette même information est aussi disponible en texte.
  • 14. En matière de navigation dans une animation vectorielle :
    • a) un élément de navigation doit pouvoir être identifié comme tel.

Contrastes visuels et sonores

Le problème

Le contraste visuel est un élément très important de la lisibilité aussi bien pour les couleurs de texte et de fond de la page que des images contenant du texte souvent utilisées pour le système de navigation ou pour de la publicité.

Les personnes malvoyante et la population vieillissante sont particulièrement sensibles au niveau de contraste. Pour les personnes malvoyantes, cela va un peu de soi, mais pour la population vieillissante il est intéressant de noter que dans le processus normal de vieillissement de l’œil, même d’un œil en bonne santé, une personne de 65 ans a besoin d’un niveau de luminosité 4 fois supérieur à celui nécessaire à une personne de 20 ans. Et à 80 ans, ce n’est plus 4 fois mais 10 fois plus de lumière qui est nécessaire.

Il est également important de noter que des caractères gras ou plus gros peuvent compenser pour un contraste plus faible.

D'autre part, dans un clip audio pré-enregistré, les personnes ayant des limitations auditives, peuvent avoir de la difficulté à percevoir la parole lorsqu'un fond sonore trop présent n'offre pas de contraste sonore suffisant avec la parole au premier plan.

Notons également que pour les personnes ayant des limitations visuelles ou cognitives, un fond sonore démarrant automatiquement sur une page Web vient en concurrence avec la synthèse vocale et nuit à la compréhension de celle-ci. Le problème ici n’est donc pas de rendre ce son perceptible mais de s’assurer que la synthèse vocale sera perceptible malgré ce fond sonore.

La solution

  • Pour améliorer le contraste visuel, il faut agir sur l’une des deux couleurs ou sur les deux pour les rendre plus foncées ou plus pâles ;
  • Si un page ne peut offrir un contraste visuel suffisant, un bouton offrant un contraste suffisant devrait être offert pour basculer vers une feuille de style offrant un contraste suffisant ;
  • Si du texte réel est superposé à une image d'arrière-plan, vous devez vous assurer que le contraste est suffisant ;
  • WCAG 2.0 considère comme un échec le fait de définir une couleur de texte sans définir en même temps une couleurs d'arrière-plan et inversement ;
  • Heureusement nous disposons d’outils qui permettent de mesurer le rapport de contraste visuel et qui nous permettent donc de nous baser sur des données objectives ;
  • Option logicielle pour mesure le contraste visuel :
  • Autres options pour mesure le contraste visuel :
  • Contraste sonore :
    • Dans un clip audio pré-enregistré, le fond sonore doit être éliminé, on doit donner la possibilité de le désactiver ou il doit être minimisé en assurant un contraste d'au moins 20 dB, soit un fond sonore 4 fois plus faible que la parole au premier plan.
  • Contrôle du son :
    • Il faut minimiser l'impact d'un fond sonore qui démarre automatiquement en limitant celui-ci à 3 secondes ou en permettant à l’utilisateur de l’arrêter facilement en plaçant un bouton au début de la page permettant d'arrêter le son.

Les règles qui s'appliquent

WCAG 2.0

1.4.3 Contraste (minimum) : la présentation visuelle du texte et du texte sous forme d'image a un rapport de contraste d'au moins 4,5:1, sauf dans les cas suivants : (Niveau AA)

  • Texte agrandi : le texte agrandi et le texte agrandi sous forme d'image ont un rapport de contraste d'au moins 3:1;
  • Texte décoratif : aucune exigence de contraste pour le texte ou le texte sous forme d'image qui fait partie d'un composant d'interface utilisateur inactif, qui est purement décoratif, qui est invisible pour tous ou qui est une partie d'une image contenant un autre contenu significatif.
  • Logotypes : aucune exigence de contraste pour le texte faisant partie d'un logo ou d'un nom de marque.

Comment satisfaire à 1.4.3 (en anglais) | Comprendre 1.4.3 (en anglais)

1.4.6 Contraste (amélioré) : la présentation visuelle du texte et du texte sous forme d'image a un rapport de contraste d'au moins 7:1, sauf dans les cas suivants : (Niveau AAA)

  • Texte agrandi : le texte agrandi et le texte agrandi sous forme d'image ont un rapport de contraste d'au moins 4,5:1;
  • Texte décoratif : aucune exigence de contraste pour le texte ou le texte sous forme d'image qui fait partie d'un composant d'interface utilisateur inactif, qui est purement décoratif, qui est invisible pour tous ou qui est une partie d'une image contenant un autre contenu significatif.
  • Logotypes : aucune exigence de contraste pour le texte faisant partie d'un logo ou d'un nom de marque.

Comment satisfaire à 1.4.6 (en anglais) | Comprendre 1.4.6 (en anglais)

1.4.7 Arrière-plan sonore de faible volume ou absent : pour un contenu seulement audio pré-enregistré qui (1) contient principalement de la parole au premier plan, (2) n'est pas un CAPTCHA ou un logo sonore et (3) qui n'est pas une vocalisation dont l'intention est principalement d'être musicale comme une chanson ou un rap, au moins l'une des conditions suivantes est vraie : (Niveau AAA)

  • Sans arrière-plan : le contenu audio ne contient pas d'arrière-plan sonore.
  • Désactivation : l'arrière-plan sonore peut être désactivé.
  • 20 dB : l'arrière-plan sonore est au moins 20 décibels plus faible que le contenu parlé au premier plan sauf pour certains effets sonores occasionnels durant seulement une ou deux secondes.

    Note : par la définition du « décibel » , le volume de l'arrière-plan sonore correspondant à cette exigence est approximativement quatre fois plus faible que le contenu parlé au premier plan.

Comment satisfaire à 1.4.7 (en anglais) | Comprendre 1.4.7 (en anglais)

1.4.2 Contrôle du son : si du son sur une page Web est audible automatiquement pendant plus de 3 secondes, un mécanisme est disponible pour le mettre en pause, l'arrêter ou pour en contrôler le volume de façon indépendante du niveau de volume du système général. (Niveau A)

Note : puisque tout contenu ne satisfaisant pas à ce critère de succès peut interférer avec la capacité de l'utilisateur à exploiter la page entière, tout le contenu présent dans la page Web (qu'il soit utilisé pour satisfaire à d'autres critères de succès ou non) doit satisfaire à ce critère de succès. Voir l'exigence de conformité 5 : Non-interférence.

Comment satisfaire à 1.4.2 (en anglais) | Comprendre 1.4.2 (en anglais)

SGQRI

008-01 : Accessibilité d'un site Web
  • 10 c) À l’exclusion de texte décoratif, le rapport de contraste entre le texte, représenté ou non sous forme d'image, et son arrière-plan doit :
    • être au moins de 5 pour 1, ou de 3 pour 1 dans le cas de texte agrandi, OU
    • en plus de la feuille de style de base de la page Web, offrir deux feuilles de style de remplacement respectant ces niveaux de contraste, l’une en polarité normale et l’autre en polarité inversée.
  • 10 l) Une page Web est exempte de fond sonore ou offre un moyen de l'arrêter facilement dès l'entrée dans la page Web si ce fond sonore dure plus de trois secondes.
008-02 : Accessibilité d'un document téléchargeable
  • 10 b) À l’exclusion de texte décoratif, d’un logo ou d’un nom de marque, le rapport de contraste entre le texte, représenté ou non sous forme d'image, et son arrière-plan doit être au moins de 5 pour 1, ou de 3 pour 1 dans le cas de texte agrandi.
  • 10 e) Un document téléchargeable est exempt de fond sonore ou offre un moyen de l'arrêter facilement si ce fond sonore dure plus de trois secondes.
008-03 : Accessibilité du multimédia dans un site Web
  • 11. En matière de présentation dans un objet multimédia :
    • b) À l’exclusion de texte décoratif, d’un logo ou d’un nom de marque, le rapport de contraste entre le texte, représenté ou non sous forme d'image, et son arrière-plan doit être au moins de 5 pour 1, ou de 3 pour 1 dans le cas de texte agrandi.
  • 12. En matière de présentation dans une animation vectorielle :
    • e) En présence d’un fond sonore, un moyen doit être offert pour l'arrêter facilement si ce fond sonore dure plus de trois secondes.

La présentation visuelle du texte

Le problème

Un texte présenté sous forme d’image devient flou lorsqu’il est agrandi 4 fois, 8 fois ou 12 fois à l’aide d’un logiciel de grossissement utilisé par les personnes malvoyantes. C’est pourquoi il faut en limiter l’usage.

De plus, jusqu’à la version 6 d’Internet Explorer, il était impossible de grossir la taille des caractères qui était définie avec une taille fixée en pixels ou en points. Cette rigidité de la présentation pose problème aux personnes malvoyantes en les obligeant à recourir constamment à un logiciel de grossissement même pour un agrandissement minime du texte. Dans la plupart des autres navigateurs, et maintenant aussi dans Internet Explorer 7 et plus, l’utilisateur dispose d’une fonction zoom intégrée au navigateur lui-même, ce qui peut poser des problèmes de chevauchement de texte sur certaines pages Web lorsqu’on agrandit la page jusqu’à 200 %. De plus, certaines personnes doivent pouvoir modifier les couleurs pour obtenir une présentation plus facile à lire.

Pour améliorer la lisibilité d’une page pour les personnes ayant une incapacité cognitive, il faut aussi considérer d’autres aspects comme :

  • la longueur des lignes de texte parce que des colonnes plus étroites sont plus facile à lire ;
  • la justification (alignement à droite et à gauche) qui fait varier l’espacement entre les mots et rend la lecture plus difficile ;
  • l’espacement entre les lignes et entre les paragraphes qui facilite aussi la lecture.

La solution

  • À l’exclusion d’un logo ou d’une image de marque, il faut éviter autant que possible d’utiliser du texte sous forme d’image ;
    • Au niveau AA, WCAG 2.0 demande que du texte soit utilisé chaque fois qu’une présentation visuelle similaire peut être réalisée avec du texte et une feuille de style CSS ;
    • Au niveau AAA, WCAG 2.0 limite l’utilisation de texte sous forme d’image à du texte purement décoratif ou à une présentation jugée essentielle (p. ex. un logo, une image de marque ou la représentation d’une police de caractères).
  • Il est aussi possible d'offrir un élément d'interface qui permette de basculer entre une présentation en image de texte et une présentation en texte ;
  • Dans plusieurs cas, du véritable texte pourrait être superposé à une image de fond ou le texte pourrait simplement être présenté immédiatement avant (au-dessus) ou immédiatement après (au-dessous) de l’image où il était inscrit ;
  • Pour la présentation visuelle du texte :
    • Vous devez utiliser des mesures de taille de polices en pourcentages, en « em » ou les tailles prédéfinies comme medium, large, etc. ;
    • Vous devez vous assurer qu'aucun contenu ne se chevauchera, ne sera masqué ou tronqué, lorsque l'on grossira le texte avec la Taille d'affichage la plus grande de IE 6 ainsi qu'avec un facteur de zoom de 200 % ;
      • Cela doit aussi s'appliquer à la taille des champs textuels d'un formulaire.
  • Vous pouvez aussi offrir des boutons permettant d'agrandir la taille de la police jusqu'à 200 %. Vous devrez alors vérifier qu'aucun contenu ne se chevauchera, ne sera masqué ou tronqué. Cela doit aussi s'appliquer à la taille des champs textuels d'un formulaire ;
  • Pour permettre le changement des couleurs, vous devez gérez celles-ci via la feuille de styles CSS en prenant soin de toujours définir une couleur d’arrière-plan chaque fois que vous définissez une couleur de texte ;
    • Cela peut se faire en tenant compte des couleurs héritées par l’effet de cascade.
  • Pour la gérer la longueur des lignes de texte, il suffit d’offrir un mécanismes qui permet d’obtenir cette présentation. Ce peut être simplement l’une des deux options suivantes :
    • Une feuille de style alternative ;
    • Une conception fluide qui permette à l’utilisateur d’ajuster la largeur des colonnes en modifiant la taille de la fenêtre de son navigateur.
  • Pour l’interlignage et l’alignement à droite ou à gauche, vous pouvez adopter ce style dans tout le site Web ou proposer une feuille de style alternative ;
  • Dans tous les cas, vous devriez vérifier que votre page demeure lisible sans la feuille de style, sans perte de contenu informatif ni dérangement de l’ordre de lecture logique. En effet, un utilisateur peut vouloir désactiver votre feuille de style ou la remplacer pour obtenir une présentation qui réponde mieux à ses besoins.

Les règles qui s’appliquent

WCAG 2.0

1.4.5 Texte sous forme d'image : si les technologies utilisées peuvent réaliser la présentation visuelle, du texte est utilisé pour véhiculer l'information plutôt que du texte sous forme d'image sauf dans les cas suivants : (Niveau AA)

  • Personnalisable : le texte sous forme d'image peut être personnalisé visuellement selon les exigences de l'utilisateur;
  • Essentielle : une présentation spécifique du texte est essentielle à l'information véhiculée.

Note : les logotypes sont considérés comme essentiels (le texte qui fait partie d'un logo ou d'un nom de marque).

Comment satisfaire à 1.4.5 (en anglais) | Comprendre 1.4.5 (en anglais)

1.4.9 Texte sous forme d'image (sans exception) : le texte sous forme d'image est utilisé seulement pour du texte purement décoratif ou lorsqu'une présentation spécifique du texte est essentielle à l'information véhiculée. (Niveau AAA)

Note : les logotypes (le texte qui fait partie d'un logo ou d'un nom de marque) sont considérés comme essentiels.

Comment satisfaire à 1.4.9 (en anglais) | Comprendre 1.4.9 (en anglais)

1.4.4 Redimensionnement du texte : à l'exception des sous-titres et du texte sous forme d'image, le texte peut être redimensionné jusqu'à 200 pour cent sans l'aide d'une technologie d'assistance et sans perte de contenu ou de fonctionnalité. (Niveau AA)

Comment satisfaire à 1.4.4 (en anglais) | Comprendre 1.4.4 (en anglais)

1.4.8 Présentation visuelle : pour la présentation visuelle des blocs de texte, un mécanisme est disponible permettant de réaliser ce qui suit : (Niveau AAA)

  1. Les couleurs de premier plan et d'arrière-plan peuvent être choisies par l'utilisateur.
  2. La largeur n'excède pas 80 caractères ou glyphes (40 si CJK).
  3. Le texte n'est pas justifié (aligné simultanément à droite et à gauche).
  4. L'espacement entre les lignes (interlignage) est d'une valeur d'au moins 1,5 dans les paragraphes et l'espacement entre les paragraphes est au moins 1,5 fois plus grand que la valeur de l'interligne.
  5. La taille du texte peut être redimensionnée jusqu'à 200 pour cent sans l'aide d'une technologie d'assistance et sans que l'utilisateur soit obligé de faire défiler le texte horizontalement pour lire une ligne complète dans une fenêtre plein écran.

Comment satisfaire à 1.4.8 (en anglais) | Comprendre 1.4.8 (en anglais)

SGQRI

008-01 : Accessibilité d'un site Web
  • 12 b) un élément de navigation doit pouvoir être redimensionné par l’internaute sans perte de lisibilité.
  • 10 a) La présentation des éléments textuels d’une page Web doit être effectuée à l’aide d’une feuille de style.
  • 10 e) La taille d’une police de caractères doit être spécifiée avec une unité de mesure relative.
  • 10 g) Lorsqu’il est grossi à 200 %, un bloc de texte doit éviter d’en chevaucher un autre
  • 10 h) Lorsqu'une feuille de style est désactivée, la page Web doit présenter le même contenu, visible ou non, organisé selon un ordre séquentiel logique en respectant le contraste défini à l’alinéa (d) du présent article.
008-02 : Accessibilité d'un document téléchargeable
  • S.O.
008-03 : Accessibilité du multimédia dans un site Web
  • 12. En matière de présentation dans une animation vectorielle :
    • a) la taille d’une police de caractères doit pouvoir être modifiée sans perte de lisibilité.
  • 13. En matière de présentation d’un objet vidéo, l’utilisateur doit pouvoir modifier, sans perte de lisibilité, la taille d’affichage de la police de caractères du sous-titrage jusqu’à une taille équivalant à 200 % de la taille normale .

Aide à la navigation