Le critère de succès 1.4.8 – Présentation visuelle est de niveau de priorité AAA et se lit comme suit :

1.4.8 (niveau AAA)

Présentation visuelle : Pour la présentation visuelle des blocs de texte, un mécanisme est offert pour répondre aux conditions suivantes :

  • les couleurs d’avant-plan et d’arrière-plan peuvent être choisies par l’utilisateur ;
  • la largeur n’excède pas 80 caractères ou glyphes (40 si chinois, japonais ou coréen) ;
  • le texte n’est pas justifié (aligné simultanément à droite et à gauche) ;
  • à l’intérieur d’un paragraphe, l’interligne est d’une valeur d’au moins 1,5, et entre les paragraphes, d’au moins 1,5 fois plus que la valeur de l’interligne ;
  • la taille du texte peut être agrandie jusqu’à 200 % sans l’aide d’une technologie d’adaptation et sans que l’utilisateur ne soit obligé de faire défiler le texte horizontalement pour lire une ligne complète dans une fenêtre en plein écran. (Sur un écran de taille normale pour un ordinateur de table ou portable.)

Ce critère est de niveau AAA parce qu’il pose des contraintes importantes sur le plan de la présentation visuelle du contenu. Il se subdivise en 5 conditions : les couleurs configurables, la largeur des colonnes de texte, l’alignement du texte, l’interlignage et l’agrandissement du texte. Heureusement, il est précisé dès le départ que ce critère peut être respecté par l’utilisation d’un « mécanisme » qui peut très bien être une feuille de style de rechange. Ce qui veut dire que la présentation de base du site Web n’est pas obligée de respecter toutes ces conditions même si elle a avantage à s’en inspirer.

Comme ces conditions touchent à la présentation visuelle du contenu, on pourrait croire que la clientèle visée est constituée des personnes ayant une basse vision et cela est vrai. Il faut toutefois ajouter une autre clientèle qui bénéficie autant, sinon plus, de ces dispositions. Il s’agit des personnes ayant une incapacité cognitive. En effet, le choix des couleurs, la longueur des lignes de texte, l’espace constant entre les mots et un espacement suffisant entre les lignes et les paragraphes sont autant de dispositions qui facilitent la lecture pour les personnes ayant des problèmes d’apprentissage ou d’attention.

Les techniques d’application proposées par les WCAG 2.0 nous permettent de mieux comprendre chacune de ces conditions.

1) Couleurs configurables

Lorsque les couleurs d’avant-plan et d’arrière-plan sont toutes deux définies ou non définies dans la feuille de style CSS, l’utilisateur peut activer certaines options d’accessibilité de son navigateur Web pour passer outre aux couleurs choisies par le concepteur et imposer au contenu ses propres chois de couleur. Il peut aussi le faire en désactivant la feuille de style afin de revenir aux couleurs de base définies dans son système d’exploitation.

Le concepteur du site peut aussi offrir un outil permettant de choisir les couleurs d’avant-plan et d’arrière-plan dans une palette de 64, 128 ou 256 couleurs. Cette dernière méthode étant plus conviviale pour les utilisateurs qui sont moins familiers avec les possibilités de configuration de leur navigateur ou de leur système d’exploitation.

2) Largeur des colonnes de texte

L’objectif à atteindre est que chaque ligne de texte compte un maximum de 80 caractères. Même pour un utilisateur sans incapacité visuelle ou cognitive, des lignes de texte plus longues rendent la lecture malaisée et désagréable. C’est pourquoi la plupart des pages Web disposent le texte sur deux ou plusieurs colonnes afin de faciliter la lecture en présentant des lignes de textes plus courtes.

Pour atteindre cet objectif, le concepteur peut définir les largeurs de colonnes en pourcentage ou en em de telle sorte que l’utilisateur puisse toujours obtenir des colonnes plus étroites en diminuant la largeur de la fenêtre de son navigateur.

3) Espacement constant entre les mots

L’alignement simultané du texte à gauche et à droite crée, d’une ligne à l’autre, des espacements de taille variable entre les mots qui nuisent à la lisibilité.

Il s’agit donc simplement d’aligner le texte à gauche ou à droite ou de prévoir un mécanisme pour désactiver la justification.

4) Espacement plus grand entre les lignes et les paragraphes

Un interligne de 1,5 augmente la lisibilité du texte pour tous les visiteurs mais est particulièrement important pour les personnes ayant des incapacités visuelles ou cognitives.

Le concepteur peut donc adopter un interligne de 1,5 à l’intérieur des paragraphes et un espacement de 2,25 (1,5 multiplié par 1,5) entre les paragraphes, ce qui donnera un texte plus aéré ou offrir un mécanisme (une feuille de style, par exemple) pour obtenir une telle présentation.

5) Agrandissement du texte sans défilement horizontal

Le critère 1.4.4, de niveau AA prévoit déjà que l’utilisateur puisse augmenter la taille du texte jusqu’à 200% sans perte de contenu ou de fonctionnalité en utilisant les fonctions d’agrandissement intégrées à son navigateur. Le critère 1.4.8 vient cependant préciser que l’affichage résultant ne doit pas nécessiter le défilement horizontal pour lire une ligne de texte dans une fenêtre en plein écran sur un écran de taille normale.

Pour ce faire, le concepteur doit utiliser des tailles de polices en mesures relatives (pourcentage, em ou tailles nommées) et des conteneurs de texte en valeurs relatives (pourcentage ou em). Ce résultat peut également être obtenu par programmation ou en offrant une feuille de style conçue pour une mise en page fluide.

En conclusion

Le critère 1.4.8, traitant de la présentation visuelle, pouvait paraître un peu trop exigeant à première vue. Une lecture des techniques d’application permet toutefois de constater que les conditions qui y sont énoncées sont faciles à atteindre. Si on ne souhaite pas appliquer toutes ces conditions à la conception de base du site, une simple feuille de style de rechange bien conçue peut très bien répondre à toutes ces conditions.

Pour demeurer dans le domaine de la présentation, le prochain article traitera des contrastes visuels et sonores.