Mise en forme

by admin — last modified 2008-10-08 09:26

Liste des points de contrôle

Feuille de style
Lisibilité sans feuille de style
Information transmise par les couleurs
Fluctuations lumineuse, clignotement et mouvement
Contrastes suffisants
Unités relatives
Illustration ASCII

Utiliser des feuilles de style pour contrôler la mise en page et la présentation. 3.3 (P2)

WCAG 1.0, traduction française d'AccessibilitéWeb

Utiliser des feuilles de style pour contrôler la mise en page et la présentation.

Section 508 version anglaise

[No equivalent.]

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

[No equivalent.]

Projet de standard du gouvernement du Québec

01 - 8, a : La présentation des éléments textuels d’une page Web doit être effectuée à l’aide d’une feuille de style.

RGAA

3.3 Privilégier l'utilisation des feuilles de styles par rapport au balisage pour la présentation

Test 3.3.1 : Absence d'attributs ou d'éléments HTML de présentation.

Test 3.3.2 : Absence d'éléments HTML utilisés à des fins de présentation.

AccessiWeb

Fiche 10.1 : Le contenu de la page est-il séparé de sa présentation ?

Fiche 10.6 : Est-ce que les polices de caractères présentes sur la page appartiennent à la famille de polices de caractères sans sérif ?

Clientèles visées

Personnes ayant une incapacité visuelle.

Explication

Tous les effets de présentation doivent être contrôlés par une ou plusieurs feuilles de style CSS.

Voir aussi Technique 3.3 in WCAG 1.0.

Organiser les documents de manière à ce qu'ils puissent être lus sans feuille de style. 6.1 (P1)

WCAG 1.0, traduction française d'AccessibilitéWeb

Organiser les documents de manière à ce qu'ils puissent être lus sans feuille de style. Par exemple, quand un document HTML est interprété sans les feuilles de style associées, il doit rester lisible.

Section 508 version anglaise

1194.22 (d) Documents shall be organized so they are readable without requiring an associated style sheet.

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

1.3.2 (niveau A)
Ordre séquentiel logique :
Lorsque l’ordre de présentation du contenu affecte sa signification, une séquence de lecture correcte peut être déterminée par programmation.

Erreurs à éviter :

F46 : Utiliser une balise <th> ou <caption> ou un attribut summary non vide dans un tableau de mise en page.
F48 : Utiliser la balise <pre> pour présenter un tableau.
F33 et F34 : Utiliser des espaces pour formater un texte en colonnes ou en tableau.

F49 : Utiliser un tableau de présentation HTML qui ne se linéarise pas dans un ordre logique.

F33 et F34 : Utiliser des espaces pour formater un texte en colonnes ou en tableau.
F32 : Utiliser des espaces pour contrôler l’espacement entre les lettres d’un même mot.
F1 : Modifier la signification en positionnant l’information par CSS.

Projet de standard du gouvernement du Québec

01 - 8, 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.

RGAA

6.1 Maintenir la lisibilité et la compréhension des contenus lorsque les styles sont désactivés

Test 6.1.1 : Génération de contenus via les feuilles de styles.

Test 6.1.2 : Altération de la compréhension d'un bloc d'informations.

Test 6.1.3 : Styles appliqués via du code javascript.

Test 6.1.4 : Accessibilité des informations affichées comme fonds d'éléments via les styles CSS.

AccessiWeb

Fiche 10.2 : Avec les feuilles de style désactivées, l'information est-elle toujours présente ?

Fiche 10.3 : Avec les feuilles de style désactivées, l'ordre d'apparition de l'information est-il respecté par rapport à l'ordre d'apparition initialement défini ?

Clientèles visées

Personnes ayant une incapacité visuelle.

Explication

Bien que les règles d'accessibilité recommandent l'utilisation des feuilles de style CSS pour contrôler la mise en page et la présentation, vous devez vous assurer que vos pages demeurent lisibles sans feuille de style.

Le but recherché est la compatibilité avec les anciens navigateurs toujours en usage ainsi que les nouveaux appareils mobiles (téléphones, assistants personnels, etc.) et la possibilité de désactiver ou de remplacer la feuille de style du concepteur par celle de l'utilisateur pour obtenir un environnement visuel mieux adapté à certains types de limitations.

Quand la feuille de style est désactivée, le contenu doit répondre aux conditions suivantes :

Tout le contenu est conservé,
La séquence demeure logique,
Les contrastes texte/arrière-plan demeurent suffisants.

Voir aussi Technique 6.1 in WCAG 1.0.

S'assurer que toute information transmise par les couleurs est également disponible sans couleur. 2.1 (P1)

WCAG 1.0, traduction française d'AccessibilitéWeb

S'assurer que toute information transmise par les couleurs est également disponible sans couleur, par exemple à partir du contexte ou du balisage.

Section 508 version anglaise

194.22 (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

1.3.3 (niveau A)
Caractéristiques sensorielles :
Les instructions données pour la compréhension et l’utilisation du contenu ne doivent pas reposer seulement sur les caractéristiques sensorielles des éléments comme la forme, la taille, l’emplacement visuel, l’orientation ou le son.

1.4.1 (niveau A)
Utilisation des couleurs : La couleur n’est pas utilisée comme la seule façon de communiquer une information, d’indiquer une action, de solliciter une réponse ou de distinguer un élément visuel.
Note : Ce critère de réussite concerne spécifiquement la perception des couleurs. Les autres formes de perception sont traitées à la règle 1.3, incluant l’accès par programmation aux couleurs et aux autres indices visuels de la présentation.

Erreurs à éviter :

F33 : Un texte de remplacement qui n’inclut pas l’information véhiculée par les différences de couleur dans l’image.
F73 : Créer des liens qui ne sont pas visuellement évidents sans vision des couleurs.
F81 : Identifier les champs obligatoires ou en erreur seulement par la différence de couleur.

Projet de standard du gouvernement du Québec

01 - 8, b et 02 - 11, a et 03 - 9, a: Toute information reposant sur une perception sensorielle autre que la couleur est aussi donnée en texte.

RGAA

2.1 Ne pas utiliser uniquement la couleur pour donner accès à l'information

Test 2.1.1 : Information donné par la mention d'une couleur dans un élément textuel.

Test 2.1.2 : Accessibilité des informations données par la couleur dans un élément non-textuel

Test 2.1.3 : Doublement de l'information donnée par la couleur via des attributs HTML.

Test 2.1.4 : Informations données par la couleur par le biais de styles.

Test 2.1.5 : Accessibilité des couleurs dans les éléments non textuels.

AccessiWeb

Fiche 3.1 : L'information donnée par la couleur est-elle aussi lisible lorsque les couleurs sont désactivées ?

Clientèles visées

Personnes ayant une incapacité visuelle.
Personnes ayant une incapacité cognitive.

Explication

Dans les consignes données ou les mécanismes de navigation, vous ne devez pas vous en remettre seulement aux couleurs. 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. Ceux-ci doivent également être indiqués par une icône comportant un alt explicite ou un texte visible pour tous.

Voir aussi Use of Color in WCAG 2.0.

Éviter les fluctuations lumineuse, le clignotement et le mouvement. 7.1 (P1), 7.2 (P2) et 7.3 (P2)

WCAG 1.0, traduction française d'AccessibilitéWeb

7.1 : Jusqu'à ce que les agents utilisateurs permettent de contrôler l'oscillation, éviter de créer des phénomènes d'oscillations à l'écran.

7.2 : Jusqu'à ce que les agents utilisateurs permettent le contrôle du clignotement, éviter le clignotement du contenu (i.e., changement de la présentation à un taux régulier, comme ouvert et fermé).

7.3 : Jusqu'à ce que les agents utilisateurs permettent de figer le contenu mobile, éviter le mouvement dans les pages.

Section 508 version anglaise

7.1 : Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

7.2 : [Aucun équivalent.]

7.3 : [Aucun équivalent.]

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

2.3.1 (niveau A)
Trois clignotements ou sous le seuil critique :
Une page Web doit être exempte de tout élément qui clignote plus de trois fois à la seconde ou ce clignotement doit se situer sous le seuil général de clignotement et le seuil prévu pour le clignotement rouge.

Note : Étant donné qu’un contenu qui ne satisfait pas ce critère de réussite peut interférer avec la capacité du visiteur à utiliser l’ensemble de la page, tout le contenu de la page (qu’il satisfasse ou non à d’autres critères de réussite) doit satisfaire à ce critère particulier. Voir l’item 5 des exigences de conformité : Non interférence.

2.3.2 (niveau AAA)
Trois clignotements :
Une page Web doit être exempte de tout élément qui clignote plus de trois fois à la seconde.

2.2.2 (niveau AA)
Pause, arrêt, masque :
Pour tout mouvement, clignotement, défilement ou pour toute mise à jour automatique de l’information toutes les conditions suivantes sont vraies :

Mouvement, clignotement, défilement :
Tout mouvement, clignotement ou défilement de l’information qui 1) démarre automatiquement, 2) dure plus de 5 secondes et 3) est présenté simultanément avec un autre contenu, il y a un mécanisme qui permet à l’utilisateur de le figer ou de le masquer à moins que le mouvement, le clignotement ou le défilement fasse partie d’une activité où ils sont essentiels et;

Mise à jour automatique : Pour toute mise à jour automatique de l’information qui 1) démarre automatiquement, 2) dure plus de 5 secondes et 3) est présentée simultanément avec un autre contenu, il y a un mécanisme qui permet à l’utilisateur de figer, de masquer ou de contrôler la fréquence de la mise à jour à moins que la mise à jour automatique ne fasse partie d’une activité où ils sont essentiels.

Note 1 :
Pour les exigences relatives aux fluctuations lumineuses ou au clignotement du contenu, voir la règle 2.3.

Note 2 :
Étant donné qu’un contenu qui ne satisfait pas ce critère de réussite peut interférer avec la capacité du visiteur à utiliser l’ensemble de la page, tout le contenu de la page (qu’il satisfasse ou non à d’autres critères de réussite) doit satisfaire à ce critère particulier. Voir l’item 5 des exigences de conformité : Non interférence.

Note 3 :
Pour un contenu qui est mis à jour à partir d’un processus ou d’un flux de données en temps réel ou en différé, il n’est pas exigé de conserver ou de présenter l’information générée ou reçue entre l’activation de la pause et le recommencement de la présentation, compte tenu que cela n’est pas techniquement possible et que dans plusieurs cas cela peut donner de fausses indications.

Note 4 :
Une animation faisant partie intégrante d’une phase de préchargement ou qui est utilisée dans une situation similaire peut être considérée comme essentielle si aucune interaction n’est possible durant cette phase pour tous les utilisateurs et si la non indication d’une progression pourrait créer de la confusion pour l’utilisateur ou l’amener à croire que ce contenu est gelé ou endommagé.

Erreurs à éviter :

F16 : Un contenu défilant qui n'est pas essentiel à l'activité sans un mécanisme pour figer et relancer le défilement.
F47 : Utiliser la balise .
F4 : Utiliser la propriété text-decoration:blink sans un mécanisme pour l'arrêter dans moins de 5 secondes.
F50 : Un script qui cause un effet de clignotement sans un mécanisme pour l'arrêter en 5 secondes ou moins.
F7 : Un objet ou un applet, java ou Flash, qui présente du contenu clignotant sans un mécanisme pour figer ce contenu qui clignote pendant plus de 5 secondes.

2.2.3 (Niveau AAA)
Sans limite temporelle :
Aucune limite temporelle n’est essentielle à l’événement ou à l’activité présentée par le contenu sauf pour un contenu multimédia synchronisé mais non interactif et pour un événement en temps réel.

2.2.4 (niveau AAA)
Interruptions :
Les interruptions peuvent être reportées ou supprimées par l’utilisateur, sauf les interruptions impliquant une urgence.

Erreurs à éviter :

F40 : Utiliser meta redirect avec une limite temporelle.
F41 : Utiliser meta refresh avec une limite temporelle.

2.2.5 (niveau AAA)
Ré-authentification :
Quand une session authentifiée expire, l’utilisateur peut poursuivre l’activité sans perte de donnée après s’être ré-authentifié.

Erreurs à éviter :

F12 : Un délai de fin de session sans un mécanisme pour enregistrer les données de l’utilisateur et les restaurer suite à la ré-authentification.

Projet de standard du gouvernement du Québec

01 - 8, i et 02 - 11, c et 03 - 9, c : Une page Web doit éviter de présenter une fluctuation lumineuse ou un clignotement à un rythme supérieur à trois fois à la seconde pour une durée de plus de cinq secondes.

01 - 8, j et 02 - 11, d et 03 - 9, d : À l’exception d’une animation de préchargement, une page Web doit éviter de présenter un élément en mouvement pour une durée de plus de cinq secondes à moins que ne soit offert un moyen de l'arrêter facilement.

RGAA

7.1 Eviter les changements brusques de luminosité

Test 7.1.1 : Absence d'éléments provoquant des changements brusques de luminosité ou des effets de flash.

Test 7.1.2 : Absence de code javascript provoquant des changements brusques de luminosité ou des effets de flash.

Test 7.1.3 : Absence de styles CSS ou de l'attribut HTMLbackground provoquant des changements brusques de luminosité ou des effets flash.

7.2 Eviter les clignotements des éléments

Test 7.2.1 : Absence de l'élément blink.

Test 7.2.2 : Absence d'éléments provoquant des clignotements ne pouvant pas être stoppés.

Test 7.2.3 : Absence de code javascript provoquant des clignotements ne pouvant pas être stoppés.

Test 7.2.4 : Absence de styles CSS ou de l'attribut HTMLbackground provoquant des clignotements ne pouvant pas être stoppés.

7.3 Eviter les mouvements de contenus

Test 7.3.1 : Absence d'élément marquee.

Test 7.3.2 : Absence d'éléments affichant des mouvements ne pouvant pas être stoppés.

Test 7.3.3 : Absence de code javascript provoquant des mouvements ne pouvant pas être stoppés.

Test 7.3.4 : Absence de styles CSS ou de l'attribut HTMLbackground provoquant des mouvements ne pouvant pas être stoppés.

AccessiWeb

Fiche 13.7 : Est-ce que la présentation spécifique d'une information n'entrave pas l'accès à son contenu ?

Clientèles visées

Personnes ayant une incapacité cognitive.

Explication

Les effets stroboscopiques peuvent générer des crises chez les personnes épileptiques dites « photosensibles ». Les rédacteurs de WCAG 2.0 (encore en version de travail au moment d'écrire ces lignes) définissent ainsi le seuil à ne pas franchir :

General flash and red flash thresholds is a sequence of flashes or rapidly changing image sequences where all three of the following occur:

there are more than three flashes within any one-second period; and

the flashing is below 50 Hz; and

the combined area of flashes occurring concurrently and contiguously occupies more than a total of .006 steradians (25% of any 10 degree visual field on the screen).

For the general flash threshold, a flash is defined as a pair of opposing changes in relative luminance of 10% or more and the relative luminance of the darker image is below 0.80. An "opposing change" is an increase followed by a decrease, or a decrease followed by an increase.

For the red flash threshold, a flash is defined as any transition to or from a saturated red.

Note 1: For general Web content, using a 341 x 256 pixel rectangle anywhere on the displayed screen area when the content is viewed at 1024 x 768 pixels will provide a good estimate of a 10 degree visual field for standard screen sizes and viewing distances.

Le mouvement peut être trop distrayant pour les personnes ayant des limitations cognitives. Il est donc à éviter ou à ralentir considérablement. Il est cependant acceptable, si l'utilisateur dispose d'un moyen simple de l'arrêter.

Voir un exemple de fluctuation lumineuse rapide.

Voir aussi Blinking in WCAG 2.0, Pausing in WCAG 2.0, Three Flashes or Below Threshold in WCAG 2.0 et Three Flashes in WCAG 2.0.

Assurer des contrastes suffisants. 2.2 (P2 et P3*)

WCAG 1.0, traduction française d'AccessibilitéWeb

S'assurer que les combinaisons de couleurs de premier plan et d'arrière-plan donnent suffisamment de contraste lorsqu'elles sont utilisées par des personnes ayant une déficience de perception des couleurs ou sur un écran noir et blanc. [Priorité 2 pour les images, Priorité 3 pour le texte]

Section 508 version anglaise

[No equivalent.]

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

1.4.3 (niveau AA)
Contraste (minimum) :
La présentation visuelle du texte et des images de texte a un contraste d’au moins 5 pour 1, sauf dans les cas suivants :
Texte agrandi : le texte ou les images de texte agrandi ont un contraste d’au moins 3 pour 1. (Le texte agrandi est défini comme un texte d’au moins 14 points gras ou de 18 points non gras.)

Texte non significatif :
Aucun contraste minimum n’est exigé pour le texte ou les images de texte qui font partie d’un composant d’interface inactif, qui sont purement décoratifs, qui constituent du texte non significatif dans une image ou qui sont invisibles pour tous.

Logo :
Aucun contraste minimum n’est exigé pour le texte faisant partie d’un logo ou d’un nom de marque.

Erreurs à éviter :

F24 : Spécifier une couleur d’avant-plan sans spécifier une couleur d’arrière plan ou inversement.
F83 : Utiliser une image d’arrière-plan qui n’offre pas un contraste suffisant avec le texte d’avant-plan (ou image de texte).

1.4.6 (niveau AAA)
Contraste (amélioré) :
La présentation visuelle du texte et des images de texte a un contraste d’au moins 7 pour 1, sauf dans les cas suivants :

Texte agrandi : le texte ou les images de texte agrandi ont un contraste d’au moins 5 pour 1. (Le texte agrandi est défini comme un texte d’au moins 14 points gras ou de 18 points non gras.)

Texte non significatif :
Aucun contraste minimum n’est exigé pour le texte ou les images de texte qui font partie d’un composant d’interface inactif, qui sont purement décoratifs, qui constituent du texte non significatif dans une image ou qui sont invisibles pour tous.

Logo :
Aucun contraste minimum n’est exigé pour le texte faisant partie d’un logo ou d’un nom de marque.

1.4.2 (niveau A)
Contrôle sonore :
Si du son démarre automatiquement sur une page Web et dure plus de 3 secondes, ou un mécanisme est offert pour le figer ou l’arrêter, ou pour un mécanisme est offert pour en contrôler le volume de façon indépendante du niveau de volume du système.

Note :
Étant donné qu’un contenu qui ne satisfait pas ce critère de réussite peut interférer avec la capacité du visiteur à utiliser l’ensemble de la page, tout le contenu de la page (qu’il satisfasse ou non à d’autres critères de réussite) doit satisfaire à ce critère particulier. Voir l’item 5 des exigences de conformité : Non interférence.

1.4.7 (niveau AAA)
Arrière-plan sonore de faible volume ou absent :
Pour un contenu sonore qui n’est pas 1) un CAPTCHA sonore et 2) qui contient de le contenu parlé à l’avant-plan, au moins l’une des conditions suivantes est vraie :
Sans arrière-plan :
Le contenu audio n’a 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 d’au moins 20 décibels plus faible que le contenu parlé en avant-plan sauf pour certains effets sonores occasionnels.

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

Projet de standard du gouvernement du Québec

01 - 8, d et 03 - 9, b et 02 - 11, b : À 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 d'au moins 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.

01 - 8, l et 02 - 11, f et 03 - 9, e: 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.

RGAA

2.2 Proposer des contrastes de couleurs suffisants

Test 2.2.1 : Contraste des éléments non textuels porteurs d'information.

Test 2.2.2 : Contraste des contenus non textuels porteurs d'information, affichés comme fonds d'éléments HTML.

Test 2.2.3 : Contraste des éléments textuels porteurs d'information.

AccessiWeb

Fiche 3.2 : Les différences de contrastes entre les couleurs sont-elles suffisamment élevées ?

Clientèles visées

Personnes ayant une incapacité visuelle.

Explication

Le contraste des couleurs doit être suffisant pour permettre une bonne 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.

Un bon contraste est important pour les personnes ayant une limitation visuelle ou un problème de perception des couleurs.

Les règles d'accessibilité ne précisaient pas ce qu'est un « contraste suffisant ». Par la suite, cependant, le W3C a proposé un algorithme permettant une évaluation automatique du contraste. Cette formule de calcul fixe un seuil de 500 pour la différence de couleurs et un seuil de 125 pour la différence d'intensité.

Plus récemment encore, les rédacteurs de WCAG 2.0 (toujours en version de travail au moment d'écrire ces lignes) ont proposé un nouvel algorithme basé, cette fois, sur la différence de luminosité et proposent une différence de luminosité de 5 pour 1 en priorité 2 et de 7 pour 1 en priorité 3.

Compte tenu que le premier algorithme n'a pas été retenu par les rédacteurs de WCAG 2.0 et qu'il n'a jamais été inclus dans la version 1.0, nous recommandons d'appliquer uniquement une différence de luminosité de 5 pour 1.

Ce seuil devrait être appliqué aux images et aux textes en priorité 2 alors qu'un contraste de 7 pour 1 est requis en priorité 3.

Note : Une page Web qui n'atteindrait pas ces seuils, mais offrirait un bouton facile d'accès pour basculer dans une autre feuille de style qui appliquerait ces seuils serait considérée comme conforme à ce point de contrôle. Si vous choisissez cette approche, pourquoi ne pas offrir deux feuilles de styles alternative, l'une en polarité normale et l'autre en polarité inversée.

Il est possible d’analyser le contraste des couleurs d’une page Web en utilisant les outils gratuits suivants en français : Analyse des couleurs, version pour Windows, Analyse des couleurs, version pour MAC, Analyse des couleurs, extension pour Firefox (cet outil est aussi inclus dans la barre d'outils Accessibilité du Web 2.0 pour IE). Deux mesures sont généralement disponibles ; celle qui nous intéresse est le Contraste de luminosité selon l’algorithme proposé par WCAG 2.0. Attention, la version pour Firefox n’analyse que les contrastes textuels. Elle n’analyse pas les images et ne tient pas compte du contraste obtenu par un texte qui se superpose à une image de fond. Pour ces deux situations, vous aurez besoin de l’application pour Windows ou pour MacOS

Vous pouvez consulter la page d'exemples de contrastes de Juicy Studio sur 213 couleurs d'arrière-plan différentes.

La version de travail de WCAG 2.0 ainsi que le Projet de standard du gouvernement du Québec ajoutent aux exigences concernant le contraste des couleurs des exigences concernant le contraste sonore qui est très important pour les personnes mal-entendantes.

Voir aussi Audio Turnoff in WCAG 2.0, Contrast (Minimum) in WCAG 2.0, Contrast (Enhanced) in WCAG 2.0 et Low or No Background Audio in WCAG 2.0.

Utiliser des unités relatives plutôt qu'absolues. 3.4 (P2)

WCAG 1.0, traduction française d'AccessibilitéWeb

Utiliser des unités relatives plutôt qu'absolues dans les valeurs d'attributs du langage de balisage et les valeurs de propriétés des feuilles de style.

Section 508 version anglaise

[No equivalent.]

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

1.4.4 (niveau AA)
Agrandissement du texte :
Le taille du texte (mais non des images de texte) peut être
agrandie jusqu’à 200 % sans l’aide d’une technologie d’adaptation et sans perte de contenu ou de fonctionnalité.

Erreurs à éviter :

F69 : Lors d’un agrandissement à 200 %, du texte, une image ou un composant sont rognés, tronqués ou embrouillé.
F80 : Les boutons texte d’un formulaire ne sont pas redimensionnés quand le texte est agrandi à 200 %.

1.4.5 (niveau AA)
Images de texte :
Si la technologie utilisée peut réaliser la présentation visuelle, du texte est utilisé pour communiquer l’information plutôt que des images de texte. Sauf pour les situations suivantes :
Images personnalisables :
L’image de texte peut être visuellement personnalisée selon les exigences de l’utilisateur.

Images essentielles :
Un présentation spécifique du texte est essentielle à la communication de l’information.

Note :
Le texte qui fait partie d’un logo ou d’un nom de marque est considéré comme essentiel.

1.4.8 (niveau AAA)
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 glyphe (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.)

1.4.9 (niveau AAA)
Images de texte (sans exception) :
Les images de texte sont utilisées seulement pour du texte purement décoratif ou lorsque qu’une présentation particulière du texte est essentielle à la transmission de l’information.
Note :
Logo : le texte faisant partie d’un logo ou d’un nom de marque est considéré comme essentiel.

Projet de standard du gouvernement du Québec

01 - 8, e : La taille d’une police de caractères doit être spécifiée avec une unité de mesure relative.

01 - 8, g : Lorsque grossi à 200 %, un bloc de texte doit éviter d’en chevaucher un autre.

03 - 10, a : Une police de caractères doit permettre à l’utilisateur d’en modifier la taille sans perte de lisibilité.

RGAA

13.4 Fournir des mécanismes de navigation cohérents

Test 13.4.1 : Cohérence de la position des menus et barres de navigation dans le code source de la structure HTML.

Test 13.4.2 : Cohérence de la présentation des menus et barres de navigation.

Test 13.4.3 : Comportement homogène des menus et barres de navigation.

AccessiWeb

Fiche 10.4 : Des valeurs relatives sont-elles utilisées pour dimensionner les tableaux et définir la taille des polices de caractères ?

Fiche 10.5 : Si des valeurs absolues sont utilisées, le sont-elles sans conséquence sur l'affichage de l'information ?

Clientèles visées

Personnes ayant une incapacité visuelle.

Explication

L'utilisation d'unités relatives, pour les tailles de police ou les zones de contenus (tableaux de mise en page ou div), en em ou en pourcentage, permet à ceux-ci de s'ajuster à la taille de la fenêtre, à la résolution de l'écran ou à la taille de la police de caractères utilisée.

Pour ce qui est des tailles de polices, ce point de contrôle est impératif. Vous devez donc utiliser des mesure en pourcentages, en em ou les tailles prédéfinies comme medium, large, etc.

En ce qui concerne la taille des pavés de texte ou des tableaux, l'utilisation de mesures absolues est permise compte tenu des impératifs souvent liés au design.

Vous devez toutefois vous assurer que le texte ne se chevauchera pas, lorsque l'on grossit le texte avec la Taille d'affichage la plus grande de IE 6 ou avec un facteur de zoom de 200 %.

Dans la mesure du possible, vous êtes tout de même invités à utiliser une mise en page fluide afin que votre mise en page s'adapte à différentes tailles d'écran. Ainsi, même avec un zoom de 300 %, la mise en page devrait demeurer adéquate.

Voir aussi Resize text in WCAG 2.0 et Resize and Wrap in WCAG 2.0.

Fournir un moyen de passer une illustration ASCII de plusieurs lignes. 13.10 (P3)

WCAG 1.0, traduction française d'AccessibilitéWeb

Fournir un moyen de passer une illustration ASCII de plusieurs lignes.

Section 508 version anglaise

[No equivalent.]

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

This item is not required by any Success Criterion in WCAG 2.0. ASCII art is considered non-text content and is therefore covered by SC 1.1.1.

Projet de standard du gouvernement du Québec

01 - 8, k et 02 - 11, e et 03 - 10, b : À l’exclusion d’un dessin présenté sous forme d’image, une page Web doit exclure tout dessin réalisé à l'aide de caractères.

RGAA

13.10 Fournir un moyen de passer l'art graphique textuel

Test 13.10.1 : Moyen de passer l'art Ascii multi-ligne.

AccessiWeb

Fiche 12.4 : Y a-t-il des liens facilitant la navigation dans la page ?

Clientèles visées

Personnes ayant une incapacité visuelle.

Personnes ayant une incapacité cognitive.

Explication

Les illustrations ASCII semblent une curiosité du passé. Comme il s'agissait d'illustrations créées à partir de caractères ou de symboles, elles étaient pénibles à lire en braille ou en synthèse vocale. Elles devaient donc être précédées d'un lien vers une cible placée après l'illustration afin d'en permettre le contournement.

Pour éviter toute résurgence de cette mode, ce type de présentation est interdit par les auteurs du Projet de standard du gouvernement du Québec.

Voir aussi Technique 13.10 in WCAG 1.0.

Liste des thèmes.

Revenir au début de la page.