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 2010-07-12 10:56

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.

Toute information transmise par la couleur doit donc aussi être transmise sous forme de texte.

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

Techniques suffisantes

Situation A: If the color of particular words, backgrounds, or other content is used to indicate information:

  1. G14: Ensuring that information conveyed by color differences is also available in text
  2. H92: Including a text cue for colored form control labels (HTML)
  3. G182: Ensuring that additional visual cues are available when text color differences are used to convey information
  4. G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them

Situation B: If color is used within an image to convey information:

  1. G111: Using color and pattern
  2. G14: Ensuring that information conveyed by color differences is also available in text
Échecs fréquents à éviter

SGQRI

008-01 : Accessibilité d'un site Web
  • 15 a) permettre d’identifier facilement tout élément de navigation ;
  • 17 a) offrant un texte ou une image avec un texte de remplacement pour tout contenu faisant appel à une perception sensorielle pour communiquer une information, indiquer une action, solliciter une réponse ou distinguer un élément visuel ;
008-02 : Accessibilité d'un document téléchargeable
  • 10 a) Lorsque la couleur est utilisée pour communiquer une information, indiquer une action, solliciter une réponse ou distinguer un élément visuel, la 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
  • 9 a) Lorsque la couleur est utilisée pour communiquer une information, indiquer une action, solliciter une réponse ou distinguer un élément visuel, la même information est aussi disponible en texte.
  • 12. 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)

Échecs fréquents à éviter

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)

Techniques suffisantes
Échecs fréquents à éviter

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)

Techniques suffisantes

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)

Techniques suffisantes
  1. G60: Playing a sound that turns off automatically within three seconds
  2. G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically
  3. G171: Playing sounds only on user request
  4. FLASH18: Providing a control to turn off sounds that play automatically in Flash (Flash)
  5. FLASH34: Using screen reader detection to turn off sounds that play automatically (Flash)
Échecs fréquents à éviter

SGQRI

008-01 : Accessibilité d'un site Web
  • 17 d) permettant d’arrêter facilement, dès l'entrée dans la page Web, un fond sonore qui dure plus de trois secondes ;
  • 17 e) comportant, à l’exception d’un texte uniquement décoratif, d’un logo ou d’un nom de marque, un rapport de contraste de luminosité satisfaisant à l’une des exigences suivantes :
    • i. le rapport de contraste de luminosité entre le texte, présenté ou non dans une image, et son arrière-plan doit être au moins de 4,5 pour 1, ou de 3 pour 1 dans le cas de texte agrandi ;
    • ii. la page Web doit offrir deux feuilles de style de remplacement respectant ces niveaux de contraste de luminosité, l’une en polarité normale et l’autre en polarité inversée, en plus de la feuille de style de base de la page Web ;
  • 17 f) permettant de déterminer explicitement les couleurs de texte et d'arrière-plan d’un même élément de texte dans une page Web de façon à satisfaire à l'une des exigences prévues au paragraphe e) ;
008-02 : Accessibilité d'un document téléchargeable
  • 10 c) À 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 g) 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
  • 9 c) À 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. 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 et 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)

Techniques suffisantes
  1. C22: Using CSS to control visual presentation of text (CSS)
  2. C30: Using CSS to replace text with images of text and providing user interface controls to switch (CSS)
  3. G140: Separating information and structure from presentation to enable different presentations

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)

Techniques suffisantes

Voir 1.4.5.

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)

Techniques suffisantes
  1. G142: Using a technology that has commonly-available user agents that support zoom
  2. Ensuring that text containers resize when the text resizes AND using measurements that are relative to other measurements in the content by using one or more of the following techniques:
  3. G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent
  4. G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not resize
Échecs fréquents à éviter

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)

Third Requirement: Techniques to ensure text is not justified (aligned to both the left and the right margins)

  1. C19: Specifying alignment either to the left OR right in CSS (CSS) OR
  2. G172: Providing a mechanism to remove full justification of text OR
  3. G169: Aligning text on only one side

Fourth Requirement: Techniques to ensure line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing

  1. G188: Providing a button on the page to increase line spaces and paragraph spaces OR
  2. C21: Specifying line spacing in CSS (CSS)

Fifth Requirement: Techniques to ensure text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window

  1. Not interfering with the user agent's reflow of text as the viewing window is narrowed (General, Future Link) OR
  2. G146: Using liquid layout AND using measurements that are relative to other measurements in the content by using one or more of the following techniques:
  3. C26: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text (CSS)
Échecs fréquents à éviter

SGQRI

008-01 : Accessibilité d'un site Web
  • 11) Toute page Web doit utiliser une feuille de style pour gérer la présentation de tout élément textuel.
    Toutefois, si cette feuille est désactivée, la page Web doit présenter le même contenu organisé selon un ordre séquentiel logique respectant le contraste de luminosité décrit au paragraphe e) du premier alinéa de l’article 16.
  • 15 j) permettre de redimensionner jusqu’à 200 % tout élément de navigation sans perte de lisibilité ;
  • 17 g) spécifiant la taille d’une police de caractères avec une unité de mesure relative ;
  • 17 h) conservant, lorsqu’un bloc de texte est grossi jusqu’à 200 %, son contenu et ses fonctionnalités et sans que ce bloc n’en chevauche un autre.
008-02 : Accessibilité d'un document téléchargeable
  • S.O.
008-03 : Accessibilité du multimédia dans un site Web
  • 10. 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é.
  • 11. 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.

Aide à la navigation