Recommandations additionnelles pour la conception graphique▲
Dans un objectif d'être pragmatiques et directement opérationnels, plusieurs critères d'accessibilité présents dans les référentiels d'accessibilité n'ont pas été conservés dans les recommandations de cette notice. Il s'agit de critères rarement applicables dans un projet web ou de critères moins prioritaires. Ils sont cependant listés ci-dessous et seront détaillés ultérieurement sur ce wiki.
Recommandations additionnelles pour l'atteinte du niveau A (WCAG) ou Bronze (AccessiWeb)▲
- Limiter l'utilisation d'effets de Flash.
- Prévoir un titre ou un résumé pour chaque contenu interactif dont l'information n'est perceptible que via un seul des « cinq sens ».
Recommandations additionnelles pour l'atteinte du niveau AA (WCAG) ou Argent (AccessiWeb)▲
- Prévoir un moyen de contrôler la taille du texte.
- Prévoir une table des matières sur les pages à fort volume de contenus.
- Prévoir des liens vers des pages de même niveau, si nécessaire.
- Permettre le contrôle des données à caractère personnel, juridique ou financier saisies.
Recommandations additionnelles pour l'atteinte du niveau AAA (WCAG) ou Or (AccessiWeb)▲
- Prévoir un glossaire pour expliciter les contenus complexes, si nécessaire.
- Indiquer la prononciation des mots lorsque leur signification est ambigüe dans le contexte.
- Prévoir un moyen de vocaliser les contenus textuels.
- Prévoir une zone d'affichage pour la traduction en langue des signes des contenus complexes.
- Limiter la largeur des textes à 80 caractères.
- Prévoir un interligne d'au moins 1,5 fois la taille du texte.
- Prévoir une marge entre les paragraphes d'au moins 1,5 fois la valeur de l'interligne.
- Assurer un contraste optimal entre les contenus et l'arrière-plan ou proposer une alternative contrastée.
- Prévoir un moyen de personnaliser les couleurs de l'affichage.
- Prévoir un intitulé parfaitement explicite pour chaque lien.
- Permettre le contrôle de la totalité des données saisies.
- Prévoir pour chaque média en direct une alternative ou une transcription.
- Prévoir pour chaque lecteur l'écoute d'audiodescriptions étendues.
- Prévoir pour chaque lecteur l'affichage d'une interprétation en langue des signes.
Grille de correspondances entre les recommandations graphiques et WCAG/AccessiWeb/RGAA▲
L'ensemble des recommandations présentées dans ce document est tiré des référentiels d'accessibilité WCAG, AccessiWeb et RGAA.
Afin d'obtenir un niveau de lecture selon les niveaux de ces référentiels (A, AA, AAA ou Bronze, Argent, Or) une grille de correspondance entre les recommandations graphiques d'AcceDe Web et les critères de ces référentiels est maintenue sur ce wiki.
| Recommandations AcceDe Web | WCAG | AccessiWeb | RGAA | ||||
|---|---|---|---|---|---|---|---|
|  | Critère | Technique | Niveau | Critère | Technique | Critère | Technique |
| Navigation | |||||||
| Navigation globale | |||||||
| Prévoir un fil d'Ariane | 2.4.8 | G65 | AAA | 12.8, 12.9 | Or | 6.20 | AAA |
| Prévoir au moins deux moyens de navigation parmi un menu principal, un plan du site et un moteur de recherche | 2.4.5, 2.4.8 | G63, G125, G126, G161, G185 | AA, AAA | 12.1, 12.4, 12.5 | Argent | 6.17, 6.18, 6.19, 6.21, 6.34 | AA |
| Différencier visuellement la position courante dans les menus | 2.4.8 | G128 | AAA | 12.12 | Or | 6.36 | AAA |
| Assurer la cohérence visuelle de la navigation | 3.2.3 | G61 | AA | 12.2, 12.3, 12.5, 12.6, 12.11 | Argent | 6.22, 6.23 | AAA |
| Aides à la navigation | |||||||
| Prévoir une page d'aide | 3.3.5 | G71, G193 | AAA |  |  |  |  |
| Prévoir des liens d'évitement | 2.4.1 | G1, G123, G124 | A | 12.11 | Bronze | 6.31 | A |
| Textes et symboles | |||||||
| Textes | |||||||
| Conserver les accents sur les lettres capitales | 3.1.6 | Â | AAA | Â | Â | Â | Â |
| Ne pas justifier le texte | 1.4.8 | G169 | AAA | 10.9 | Or | 7.12 | AAA |
| Veiller à ce que les polices puissent être intégrées sous forme de texte | 1.4.5, 1.4.9 | G140 | AA, AAA | 1.8, 1.9 | Argent, Or | 7.6, 7.7 | AA, AAA |
| Symboles | |||||||
| Associer un texte à chaque symbole ambigu | 1.1.1 | G82, G94 | A |  |  |  |  |
| Couleurs et formes | |||||||
| Contrastes | |||||||
| Assurer un contraste suffisant entre les contenus et l'arrière-plan ou proposer une alternative contrastée | 1.4.3 | G18, G145, G174 | AA | 3.3 | Argent | 2.5, 2.6, 2.7, 2.8, 2.9, 2.10 | AA |
| Sens véhiculé par la couleur | |||||||
| Assurer la compréhension de l'information, même en l'absence de couleurs | 1.4.1 | G14, G111, G182 | A | 3.1 | Bronze | 2.1, 2.2, 2.4 | A |
| Liens | |||||||
| Intitulés des liens | |||||||
| Prévoir un intitulé explicite pour chaque lien | 2.4.4 | G23, G91, G189 | A | 6.1 | Bronze | 6.13 | A |
| Signaler chaque lien qui déclenche l'ouverture d'une nouvelle fenêtre | 3.2.1, 3.2.2 | G201 | A | 13.2 | Bronze | 6.2, 6.3, 6.4, 6.25 | A, AAA |
| Identification des liens | |||||||
| Différencier visuellement les liens du texte environnant | 1.4.1 | G182, G183 | A | 10.6 | Bronze | 7.10 | A |
| Documents | |||||||
| Documents en téléchargement | |||||||
| Indiquer le poids et le format de chaque document en téléchargement | 2.4.4 | G91, G53 | A | 13.6 | Bronze | 6.26, 6.27 | A |
| Indiquer la langue de chaque document en téléchargement rédigé dans une langue étrangère | 2.4.4 | G91, G53 | A | 13.6 | Bronze | 6.28 | A |
| Tableaux | |||||||
| Titres des tableaux | |||||||
| Prévoir un titre pour chaque tableau de données | 1.3.1 | H39 | A | 5.4 | Bronze | 11.7 | A |
| Formulaires | |||||||
| Intitulés et champs | |||||||
| Prévoir un intitulé explicite pour chaque champ de formulaire | 3.3.2 | G131 | A | 11.1, 11.2 | Bronze | 3.11, 3.12 | A |
| Prévoir des intitulés identiques pour les champs dont la fonction est identique | 3.2.4 | G197 | AA | 11.3 | Argent | 4.11 | AA |
| Positionner chaque intitulé à proximité de son champ | 1.3.1, 3.3.2 | G162, G167 | A | 11.4 | Bronze | 3.3 | A |
| Regrouper et titrer les champs de même nature dans les formulaires longs | 1.3.1, 3.3.2 | H71 | A | 11.5, 11.6, 11.7 | Bronze | 3.4, 3.6 | A |
| Boutons | |||||||
| Positionner un bouton de soumission à la fin de chaque formulaire | 3.2.2 | G80 | A |  |  |  |  |
| Prévoir un intitulé explicite pour chaque bouton de formulaire | 2.4.6 | G131 | AA |  |  |  |  |
| Messages d'information | |||||||
| Indiquer clairement les champs obligatoires | 3.3.2, 3.3.5 | G184 | A, AAA | 11.10 | Bronze | 3.2 | A |
| Prévoir des aides à la saisie | 3.2.2, 3.3.5 | G89, G184, G194 | A, AAA | 11.14, 11.15 | Or | 3.16 | AAA |
| Prévoir des messages d'erreurs explicites et des suggestions de correction | 3.3.1, 3.3.2, 3.3.3 | G83, G84, G85, G177 | A, AA | 11.10, 11.11 | Bronze, Argent | 3.1, 3.13 | A, AA |
| Prévoir un message de confirmation | 3.3.1, 3.3.3, 3.3.4, 3.3.6 | G199 | A, AA, AAA |  |  |  |  |
| Formulaires à étapes multiples | |||||||
| Indiquer clairement le nombre total d'étapes ainsi que l'étape en cours | 2.4.8 | G128 | AAA | 12.12 | Or | 6.36 | AAA |
| Prévoir un moyen pour revenir aux étapes précédentes | 3.3.4, 3.3.6 | G98 | AA, AAA | 11.12, 11.13 | Argent, Or | 3.14, 3.15 | AA, AAA |
| Prévoir un récapitulatif des données renseignées avant la soumission finale du formulaire | 3.3.4, 3.3.6 | G168 | AA, AAA | 11.12, 11.13 | Argent, Or | 3.14, 3.15 | AA, AAA |
| CAPTCHA (systèmes anti-spam) | |||||||
| Prévoir une alternative pour chaque CAPTCHA uniquement visuel ou sonore | 1.1.1 | G144 | A | 1.5 | Bronze | 4.10 | A |
| Prévoir une solution de rafraîchissement pour chaque CAPTCHA |  |  |  |  |  |  |  |
| Multimédia | |||||||
| Vidéos | |||||||
| Prévoir un titre et/ou un résumé pour chaque vidéo | 1.1.1 | G68, G100 | A | 4.15 | Bronze | 5.1 | A |
| Prévoir un moyen d'accès à la transcription textuelle de chaque vidéo | 1.2.1, 1.2.3, 1.2.8 | G58, G69, G158, G159, G190 | A, AAA | 4.1, 4.13 | Bronze, Or | 5.2, 5.4 | A |
| Prévoir des moyens pour contrôler l'avancement et le volume sonore de chaque vidéo | 2.2.1, 2.2.2 | G4 | A | 4.20 | Bronze |  |  |
| Prévoir un moyen d'afficher les sous-titres | 1.2.2, 1.2.4, 1.2.9 | G9, G87, G93 | A, AA, AAA | 4.3, 4.5 | Bronze, Argent | 5.9, 5.18 | A, AA |
| Prévoir une mise en forme des sous-titres qui permet de garantir leur lisibilité | 1.4.3 | G18, G145 | AA | 3.3 | Argent | 2.5, 2.6, 2.7, 2.8, 2.9, 2.10 | AA |
| Prévoir un moyen d'activer l'audiodescription | 1.2.3, 1.2.5 | G78, G173 | A, AA | 4.1, 4.7 | Bronze, Argent | 5.4, 5.8 | A, AA |
| Contenus audio | |||||||
| Prévoir un titre ou un résumé pour chaque contenu audio | 1.1.1 | G68, G100 | A | 4.15 | Bronze | 5.1 | A |
| Prévoir un moyen d'accès à la transcription textuelle de chaque contenu audio | 1.2.1, 1.2.3, 1.2.8 | G58, G69, G158, G159, G190 | A, AAA | 4.1, 4.13 | Bronze, Or | 5.2, 5.4 | A |
| Prévoir des moyens pour contrôler l'avancement et le volume sonore de chaque contenu audio | 2.2.1, 2.2.2 | G4 | A |  |  |  |  |
| Animations et sons (bannières, contenus défilants, musique d'ambiance, etc.) | |||||||
| Prévoir un moyen pour stopper chaque contenu animé | 2.2.1, 2.2.2 | G4, G11, G186, G191 | A | 13.17 | Bronze | 5.20, 5.21, 5.22, 5.24, 5.25, 5.26 | A |
| Prévoir un moyen pour stopper chaque son lancé automatiquement | 1.4.2 | G60, G170, G171 | A | 4.18 | Bronze | 5.29 | A |
| Recommandations additionnelles | |||||||
| Niveau A (WCAG) ou Bronze (AccessiWeb) | |||||||
| Limiter l'utilisation d'effets de flash | 2.3.1, 2.3.2 | G15, G19, G176 | A, AAA | 13.15, 13.16 | Bronze, Or | 5.13, 5.14, 5.15, 5.17 | A, AAA |
| Prévoir un titre ou un résumé pour chaque contenu interactif dont l'information n'est perceptible que via un seul sens | 1.1.1 | G68, G100 | A | 4.15 | Bronze | 5.1 | A |
| Niveau AA (WCAG) ou Argent (AccessiWeb) | |||||||
| Prévoir un moyen de contrôler la taille du texte | 1.4.4 | G178 | AA | 1.4.4 | Argent | 7.13 | AA |
| Prévoir une table des matières sur les pages à fort volume de contenus | 2.4.5 | G64 | AA |  |  |  |  |
| Prévoir des liens vers des pages de même niveau, si nécessaire | 2.4.5 | G125 | AA | 12.7 | Argent | 6.35 | AA |
| Permettre le contrôle des données à caractère personnelles, juridiques ou financières saisies | 3.3.4 | G98, G155, G164, G168 | AA | 11.12 | Argent | 3.14 | AA |
| Niveau AAA (WCAG) ou Or (AccessiWeb) | |||||||
| Prévoir un glossaire pour expliciter les contenus complexes, si nécessaire | 3.1.3, 3.1.4 | G62 | AAA |  |  |  |  |
| Indiquer la prononciation des mots lorsque leur sens est ambigu dans le contexte | 3.1.6 | G62, G163 | AAA | 13.13 | Or | 12.10 | AAA |
| Prévoir un moyen de vocaliser les contenus textuels | 3.1.5 | G79 | AAA | 13.14 | Or | 12.10 | AAA |
| Prévoir une zone d'affichage pour la traduction en langue des signes des contenus complexes | 3.1.5 | G160 | AAA | 13.14 | Or | 12.10 | AAA |
| Limiter la largeur des textes à 80 caractères | 1.4.8 |  | AAA | 10.11 | Or | 7.16 | AAA |
| Prévoir un interligne d'au moins 1,5 fois la taille du texte | 1.4.8 | G188 | AAA | 10.12 | Or | 7.17 | AAA |
| Prévoir une marge entre les paragraphes d'au moins 1,5 fois la valeur de l'interligne | 1.4.8 | G188 | AAA | 10.12 | Or | 7.17 | AAA |
| Assurer un contraste optimal entre les contenus et l'arrière-plan ou proposer une alternative contrastée | 1.4.6 | G17, G18, G174 | AAA | 3.4 | Or | 2.11, 2.12, 2.13, 2.14, 2.15, 2.16 | AAA |
| Prévoir un moyen de personnaliser les couleurs de l'affichage | 1.4.8 | G175 | AAA | 10.8 | Or | 5.34 | AAA |
| Prévoir un intitulé parfaitement explicite pour chaque lien | 2.4.9 | G91, G189 | AAA | 6.3 | Or | 6.14 | AAA |
| Permettre le contrôle de la totalité des données saisies | 3.3.6 | G98, G155, G164, G168 | AAA | 11.13 | Or | 3.15 | AAA |
| Prévoir pour chaque média en direct une alternative ou une transcription, si nécessaire | 1.2.9 | G150, G151 | AAA | 4.5 | Or |  |  |
| Prévoir pour chaque lecteur l'écoute d'audiodescriptions étendues, si nécessaire | 1.2.7 | G8 | AAA | 4.11 | Or | 5.7 | AAA |
| Prévoir pour chaque lecteur l'affichage d'une interprétation en langue des signes, si nécessaire | 1.2.6 | G54, G81 | AAA | 4.9 | Or | 5.31 | AAA |
