Table des matières
- Le problème
- La solution
- Les règles qui s'appliquent à la présentation visuelle du texte
- L'évaluation de conformité
- La comparaison entre les standards SGQRI et WCAG 2.0
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 les caractères définis 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 (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, ainsi que l'espacement entre les lignes et les paragraphes, qui facilite aussi la lecture.
Retour en haut de pageLa 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 (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 alors, le texte pourrait simplement être présenté immédiatement avant (au-dessus) ou immédiatement après (au-dessous) 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...
- 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. Il est évidemment souhaitable que le texte grossi à 200 % se redistribue harmonieusement. Par ailleurs, si on se fie seulement sur le zoom du navigateur, il faut que chaque bloc de texte n'excéde pas 50 % de la largeur de la page, si l'on veut se conformer au niveau triple A des WCAG qui exigent qu'il n'y ait pas de défilement horizontal.
- Vous pouvez offrir des boutons permettant d'agrandir la taille de la police jusqu'à 200 %. Vous devrez alors vérifier qu'aucun contenu ne se chevauchera, ni 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 gérer la longueur des lignes de texte, il suffit d'offrir un mécanisme 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.
Retour en haut de pageLes règles qui s'appliquent à la présentation visuelle du texte
| SGQRI 008-01 (site Web) |
SGQRI 008-02 (doc. téléchargeable) |
SGQRI 008-03 (multimédia) |
WCAG 2.0 |
|---|---|---|---|
| 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 17. |
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)
Note : les logotypes sont considérés comme essentiels (le texte qui fait partie d'un logo ou d'un nom de marque). |
||
|
15. Pour les exigences particulières applicables à la navigation, tout site Web doit : j) permettre de redimensionner jusqu’à 200 % tout élément de navigation sans perte de lisibilité; 17. Toute page Web doit être présentée en : g) spécifiant la taille d’une police de caractères avec une unité de mesure en em ou en pourcentage de la taille par défaut du navigateur ou au moyen des valeurs xx-small, x-small, small, medium, large, x-large et xx-large; 17. Toute page Web doit être présentée en : h) conservant, lorsqu’un bloc de texte est grossi jusqu’à 200 %, son contenu et ses fonctionnalités et ce, sans que ce bloc n’en chevauche un autre. |
11. Tout sous-titre d’un contenu vidéo doit pouvoir être redimensionné jusqu’à 200 % sans perte de lisibilité. 13. Pour les exigences particulières applicables à la navigation, toute animation Web doit : i) permettre de redimensionner jusqu’à 200 % tout élément de navigation sans perte de lisibilité. 15. Toute animation Web doit être présentée en : f) conservant, lorsqu’un bloc de texte est grossi jusqu’à 200 %, son contenu et ses fonctionnalités et ce, sans que ce bloc n’en chevauche un autre. |
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) | |
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.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. |
L'évaluation de conformité
| SGQRI 008-01 (site Web) |
SGQRI 008-02 (doc. téléchargeable) |
SGQRI 008-03 (multimédia) |
WCAG 2.0 Grille AccessiWeb 2.1 de Braillenet (suivre ce lien pour voir les tests rattachés à chaque critère) |
|---|---|---|---|
La présentation visuelle du texte est-elle toujours gérée par la feuille de style (SW-11.1) ? En désactivant le code CSS, l'ordre d'affichage du contenu demeure-t-il logique (SW-11.2 et SW 17e) ? En désactivant le code CSS, le rapport de contraste de luminosité entre le texte et son arrière-plan est-il de 4,5 pour 1 ou de 3 pour 1 dans le cas de texte agrandi (SW-11.3 et SW 17e) ?
|
Critère 1.8 [Argent] Chaque image texte, en l'absence d'un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ? | ||
Tout élément de navigation peut-il être redimensionné jusqu’à 200 % sans perte de lisibilité (SW-15j) ? La taille d’une police de caractères est-elle spécifiée avec une unité de mesure en em, en pourcentage ou au moyen des valeurs xx-small, x-small, small, medium, large, x-large et xx-large (SW-17g) ?
Lorsqu’un bloc de texte est grossi jusqu’à 200 %, conserve-t-il son contenu et ses fonctionnalités, et ce, sans que ce bloc n’en chevauche un autre (SW-17h) ? |
Tout élément de navigation peut-il être redimensionné jusqu’à 200 % sans perte de lisibilité (M-13i) ? Tout élément de navigation peut-il être redimensionné jusqu’à 200 % sans perte de lisibilité (M-13i) ? Lorsqu’un bloc de texte est grossi jusqu’à 200 %, conserve-t-il son contenu et ses fonctionnalités, et ce, sans que ce bloc n’en chevauche un autre (M-15f) ? |
Critère 10.4 [Argent] Dans chaque page Web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu'à 200%, au moins ? | |
Critère 10.8 [OR] Dans chaque page Web, le choix de la couleur de fond et de police du texte est-il contrôlable par l'utilisateur ? Critère 10.9 [OR] Pour chaque page Web, le texte ne doit pas être justifié. Cette règle est-elle respectée ? Critère 10.10 [OR] Pour chaque page Web, en affichage plein écran et avec une taille de police à 200%, chaque bloc de texte reste-t-il lisible sans l'utilisation de la barre de défilement horizontal ? Critère 10.11 [OR] Pour chaque page Web, les blocs de texte ont-ils une largeur inférieure ou égale à 80 caractères (hors cas particuliers) ? Critère 10.12 [OR] Pour chaque page Web, l'espace entre les lignes et les paragraphes est-il suffisant ? |
La comparaison entre les standards SGQRI et WCAG 2.0
Pour la présentation visuelle du texte, dans le standard SGQRI sur l'accessibilité d'un site Web, l'exigence portant sur l'utilisation d'une feuille de style est une application du critère de succès 1.4.5 bien que l'on ne retienne pas l'exception sur la personnalisation du texte présenté sous forme d'image étant donné son application technique difficile. Quant aux exigences correspondant au critère de succès 1.4.4, elles sont des applications plus concrètes de ce critère de succès même si, là aussi on n'a pas retenu les exceptions prévues par les WCAG 2.0.
Un site Web conforme aux standards SGQRI est donc également conforme au WCAG 2.0 pour les critères de succès de niveau AA. Toutefois, un site Web qui offrirait seulement un mécanisme permettant de personnaliser le texte sous forme d'image ou qui ne permettrait pas le redimensionnement des sous-titres, ne serait pas conforme aux standards SGQRI.
Voir aussi :
- Comprendre la règle 1.4 [Distinguable]
- Comprendre le critère de succès 1.4.4 [Redimensionnement du texte]
- Comprendre le critère de succès 1.4.5 [Texte sous forme d'image]
- Comprendre le critère de succès 1.4.8 [Présentation visuelle]
- Comprendre le critère de succès 1.4.9 [Texte sous forme d'image (sans exception)]
Retour en haut de page