Le document aborde les principes de conception visuelle accessible, en mettant l'accent sur l'utilisation appropriée des couleurs, le contraste de luminosité et les caractéristiques sensorielles, afin de s'assurer que le contenu est compréhensible pour tous les utilisateurs. Il souligne l'importance de permettre le redimensionnement du texte et de faciliter la présentation visuelle, ainsi que de gérer les éléments en mouvement ou clignotants. De plus, il impose des contraintes sur les éléments clignotants pour éviter des risques de crises visuelles.

1. Conception visuelle
accessible
María Inés LAITANO
mariaines.laitano@univ-paris13.fr
1

2. 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.
2
Sans daltonisme Protanopie Deutéranopie Tritanopie

3. Inaccesible Accesible
Champs obligatoires

4. Graphiques
5

5. 1.4.3 Contraste de luminosité
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 :
• 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
• Logotypes
6
Outil pour déterminer le taux de contraste

6. 1.3.3 Caractéristiques sensorielles
Les instructions données pour la compréhension et l'utilisation du
contenu ne doivent pas reposer uniquement sur les caractéristiques
sensorielles des éléments comme la forme, la taille, l'emplacement
visuel, l'orientation ou le son.
7

7. 1.3.3 Caractéristiques sensorielles (suite)
8

8. 1.4.4 Redimensionnement du texte
A 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é.
h1 { font-size: 120%}
h1 { font-size: xx-large}
h1 { font-size: 2em}

9. 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 :
• Les couleurs de premier 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 CJK).
• Le texte n'est pas justifié (aligné simultanément à droite et à gauche).
• 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.
• 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.
10

10. Utiliser les en-têtes et l'espacement pour
regrouper le contenu associé
11

11. 2.2.2 Mettre en pause, arrêter, masquer
Déplacement, clignotement, défilement :
pour toute information en mouvement,
clignotante ou défilante qui
1. démarre automatiquement,
2. dure plus de cinq secondes et
3. est présentée conjointement avec un
autre contenu,
il y a un mécanisme à la disposition de
l'utilisateur pour la mettre en pause,
l'arrêter ou la masquer […]
12
Tutoriel : carrousel accessible

12. 2.2.2 Mettre en pause, arrêter, masquer
Mise à jour automatique : pour toute
information mise à jour
automatiquement qui
1. démarre automatiquement
2. et est présentée conjointement avec
un autre contenu,
il y a un mécanisme à la disposition de
l'utilisateur pour la mettre en pause,
l'arrêter ou pour en contrôler la
fréquence des mises à jour […]
13

13. 2.3.1 Pas plus de trois flashs
Une page Web doit être exempte
de tout élément qui flashe plus de
trois fois dans n'importe quel
intervalle d'une seconde ou ce
flash doit se situer sous le seuil de
flash générique et le seuil de flash
rouge.
14
Outil pour identifier les risques de crise