Les points de contrôle classés par thèmes

LISTE DES THÈMES.

MISE EN FORME.

3.3 (P2)
Source	Formulation
WCAG 1.0 version anglaise	Use style sheets to control layout and presentation.
WCAG 1.0 version française officielle	Utiliser des feuilles de style pour contrôler la mise en page et la présentation.
WCAG 1.0 version 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 anglaise	1.3.3 When the sequence of the content affects its meaning, that sequence can be programmatically determined. (level 1)
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 ?

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

Voir aussi A-Prompt : 3.3 et Technique 3.3 [anglais].

6.1 (P1)
Source	Formulation
WCAG 1.0 version anglaise	Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.
WCAG 1.0 version française officielle	6.1 Organiser les documents de manière à ce qu'ils puissent être lus sans feuilles de style. Par exemple, lorsque un document HTML est restitué sans la feuille de style lui étant associée, il doit rester lisible.
WCAG 1.0 version française d'AccessibilitéWeb	Organiser les documents de manière à ce qu'ils puissent être lus sans feuilles 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 anglaise	This is baseline-dependent: if style sheets are not in your baseline, then WCAG 1.0 checkpoint 6.1 is required at Level 1 (as it maps to Guideline 1.3 L1)
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 ?

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

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 styles du concepteur par celle de l'utilisateur pour obtenir un environnement visuel mieux adapté à certains types de limitations.

Quand la feuille de styles 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 A-Prompt : 6.1 et Technique 6.1 [anglais].

2.1 (P1)
Source	Formulation
WCAG 1.0 version anglaise	Ensure that all information conveyed with color is also available without color, for example from context or markup.
WCAG 1.0 version française officielle	S’assurer que toute information convoyée par des couleurs est également accessible sans couleur, par exemple à partir du contexte ou de balises.
WCAG 1.0 version 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 anglaise	1.3.2 Any information that is conveyed by color is also visually evident without color. (level 1)
AccessiWeb	Fiche 3.1 : L'information donnée par la couleur est-elle aussi lisible lorsque les couleurs sont désactivées ?

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 A-Prompt : 2.1 et Technique 2.1 [anglais].

7.1 (P1), 7.2 (P2) et 7.3 (P2)
Source	Formulation
WCAG 1.0 version anglaise	7.1 : Until user agents allow users to control flickering, avoid causing the screen to flicker. 7.2 : Until user agents allow users to control blinking, avoid causing content to blink (i.e., change presentation at a regular rate, such as turning on and off). 7.3 : Until user agents allow users to freeze moving content, avoid movement in pages.
WCAG 1.0 version française officielle	7.1 : Jusqu'à ce que les agents-utilisateurs permettent à l'utilisateur de contrôler les changements brusques de luminosité, il convient d'éviter de causer de tels changements sur l'écran 7.2 : Jusqu'à ce que les agents-utilisateurs permettent de désactiver le clignotement, éviter de faire clignoter le contenu (par ex. Changer une présentation à intervalles régulier, comme une activation ou une désactivation). 7.3 : Jusqu'à ce les agents-utilisateurs permettent de geler le contenu mobile, éviter les mouvements sur les pages.
WCAG 1.0 version 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 anglaise	7.1 : 2.3.1 Content does not violate the general flash threshold or the red flash threshold. (Level 1) 2.3.2 Web units do not contain any components that flash more than three times in any 1-second period. (Level 3) 7.2 : 2.2.2 Content does not blink for more than three seconds, or a method is available to stop all blinking content in the Web unit or authored component. (level 2) Note: For requirements related to flickering or flashing content, refer to Guideline 2.3 Allow users to avoid content that could cause seizures due to photosensitivity . 7.3 : The "until user agents" clause has been satisfied, so it is no longer necessary to avoid movement altogether, as long as authors do not do anything to interfere with the user's ability to pause the content. The prohibition has therefore been replaced with this success criterion 2.2.3 2.2.3 Content can be paused by the user unless the timing or movement is part of an activity where timing or movement is essential.
AccessiWeb	7.1, 7.2 et 7.3 : Fiche 13.7 : Est-ce que la présentation spécifique d'une information n'entrave pas l'accès à son contenu ?

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'écrrire ces lignes) définissent ainsi le seuil à ne pas franchir :

Red flash or general flash threshold :

A transition to or from a saturated red or
A sequence of flashes or rapidly changing image sequences where all three of the following occur:

the combined area of flashes occurring concurrently (but not necessarily contiguously) occupies more than one quarter of any 341 x 256 pixel rectangle anywhere on the displayed screen area when the content is viewed at 1024 x 768 pixels;

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

the flashing is below 50 Hz.

Note 1: For the general flash threshold, a flash is defined as a pair of opposing changes in brightness of 10% or more of full scale white brightness, where brightness is calculated as 0.2126 * ((R / FS) ^ 2.2) + 0.7152 * ((G / FS) ^ 2.2) + 0.0722 * ((B / FS) ^ 2.2). R, G, and B are the red, green, and blue RGB values of the color; FS is the maximum possible full scale RGB value for R, G, and B (255 for eight bit color channels); and the "^" character is the exponentiation operator. An "opposing change" is an increase followed by a decrease, or a decrease followed by an increase. This applies only when the brightness of the darker image is below .80 of full scale white brightness.

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 A-Prompt : 7.1 et A-Prompt : 7.2, Technique 7.1 [anglais], Technique 7.2 [anglais] et Technique 7.3 [anglais].

2.2 (P2 et P3*)
Source	Formulation
WCAG 1.0 version anglaise	Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
WCAG 1.0 version française officielle	S’assurer que la combinaison de couleurs entre le premier plan et l’arrière-plan utilise suffisamment de contraste lorsqu’elle est utilisée par des personnes souffrant d’un déficit de perception des couleurs ou sur un écran noir et blanc. [Priorité 2 pour les images, Priorité 3 pour le texte].
WCAG 1.0 version 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 anglaise	1.4.1 Text or diagrams, and their background, have a luminosity contrast ratio of at least 5:1. (Level 2) 1.4.3 Text or diagrams, and their background, have a luminosity contrast ratio of at least 10:1. (Level 3)
AccessiWeb	Fiche 3.2 : Les différences de contrastes entre les couleurs sont-elles suffisamment élevées ?

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 10 pour 1 en priorité 3.

Pour être fidèle à la lettre et à l'esprit de ce point de contrôle, nous recommandons donc de combiner les deux algorithmes et donc d'être conforme aux trois critères suivants :

Une différence d'intensité de 125,
Une différence de couleurs de 500,
Une différence de luminosité de 5 pour 1.

Ces seuils devraient être appliqués aux images et aux textes en priorité 2 et 3.

Le seuil de 10 pour 1 en priorité 3 suggéré pour les WCAG 2.0 est beaucoup plus contraignant que ce qui est demandé par WCAG 1.0 même en priorité 3 et ne sera peut-être pas retenu dans la version finale.

L'ajout du seuil de luminosité de 5 pour 1 a pour avantage d'améliorer le contraste des rouges et des verts. Par contre, l'utilisation d'un seuil de luminosité de 10 pour 1 aurait pour effet de proscrire pour ainsi dire l'utilisation des rouges et des verts sur tout autre arrière-plan que des couleurs très pâles. De plus, à ce niveau de contraste, beaucoup de personnes ayant un problème de perception des couleurs, ne verront plus aucune différence entre le rouge et le vert, même lorsque placés côte à côte.

Exemples sur fond blanc :

Rouge selon notre recommandation.
Rouge avec un seuil de luminosité de 10 pour 1.
Vert selon notre recommandation.
Vert avec un seuil de luminosité de 10 pour 1.

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 styles 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.

Vous pouvez télécharger l'Outil d'analyse des contrastes de couleurs version 1.1 (en anglais), il permet d'utiliser les trois mesures, contrairement à celui inclus avec la Web Accesibility Toolbar.

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

Voir aussi A-Prompt : 2.2 et Technique 2.2 [anglais].

3.4 (P2)
Source	Formulation
WCAG 1.0 version anglaise	Use relative rather than absolute units in markup language attribute values and style sheet property values.
WCAG 1.0 version française officielle	Utiliser des unités relatives plutôt qu’absolues dans les valeurs d’attributs du langage et les valeurs de propriétés des feuilles de style.
WCAG 1.0 version 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 anglaise	This maps to an advisory technique (Using readable fonts) for Guideline 1.4.
AccessiWeb	Fiche 10.4 : Des valeurs relatives sont-elles utilisées pour dimensionner les tableaux et définir la taille des polices de caractère ? Fiche 10.5 : Si des valeurs absolues sont utilisées, le sont-elles sans conséquence sur l'affichage de l'information ?

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.

C'est aussi l'avis des rédacteurs de WCAG 2.0 (toujours en version de travail) qui relèguent cette question à une technique conseillée pour la lisibilité des polices de caractères uniquement..

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 150 %.

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 Extrait des techniques [français] : 3.4 et Technique 3.4 [anglais].

Dernière mise à jour : 2006-10-29

Revenir au début de la page.

Contactez-nous !
Plan du site
Politique d'accessibilité