Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

Grille de correspondances entre les recommandations HTML et CSS 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 HTML et CSS 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 Niveau Critère Niveau
1. Structure générale
1.1. Régions, titres et menus de navigation
1.1.1. Identifier les principales zones de la page avec l'attribut role 2.4.1 A
1.1.2. Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6> 1.3.1, 2.4.1, 2.4.6, 2.4.10 H69, G130, H42, G141 A, AA, AAA 9.1 Bronze 10.1, 10.2, 10.3, 10.4 A
1.1.3. Structurer les menus de navigation avec des listes 1.3.1 H48 A 9.2 Bronze
1.2. Ordre du flux HTML
1.2.1 Écrire le code HTML en suivant la logique de l'ordre de lecture 1.3.2, 2.4.3 G59, F1 A 10.3 Bronze 7.2 A
1.2.2. Veiller à la cohérence de l'ordre du flux HTML d'une page à l'autre 3.2.3 G61, F66 AA 12.2 Argent 6.22 AA
2. Métadonnées
2.1. Titre de la page
2.1.1. Renseigner un <title> précis sur chaque page 2.4.2 G88, H25, F25 A 8.5, 8.6 Bronze 9.6, 9.7 A
2.2. Encodage
2.2.1. Veiller au bon codage de tous les caractères
3. Langues
3.1. Langue de la page
3.1.1. Renseigner la langue principale de la page avec l'attribut lang sur la balise <html> 3.1.1 H57 A 8.3, 8.4 Bronze 9.8 A
3.2. Changements de langue
3.2.1. Utiliser l'attribut lang pour signaler les changements de langue 3.1.2 H58 AA 8.7, 8.8 Argent 12.1, 12.2 AA
4. Grammaire HTML et sémantique
4.1. Conformité
4.1.1. Écrire un code HTML valide selon les règles de grammaire du DOCTYPE utilisé 4.1.1, 4.1.2 G134, G192, H74, H75, H88, F70, F77 A 8.1, 8.2 Bronze 9.1, 9.2, 9.3, 9.4, 9.5 A
4.2. Usage des attributs et balises HTML
4.2.1. Ne pas utiliser d'attributs ou de balises HTML destinés exclusivement à la mise en forme 1.3.1 G140, C22 A 10.1 Bronze 7.8 A
4.2.2. Employer les balises HTML pour leur valeur sémantique 1.3.1 G115, F43 A 8.9 Bronze 7.9 A
5. Images
5.1. Images décoratives et illustratives
5.1.1. Utiliser une alternative vide (alt="") sur les images décoratives et illustratives 1.1.1 H37, H67, F38, F39, F65 A 1.1, 1.2 Bronze 4.1, 4.5 A
5.2. Images informatives
5.2.1. Ne pas utiliser CSS pour afficher les images porteuses d'informations 1.1.1, 1.3.1 F3, F87 A 10.2 Bronze 7.1 A
5.2.2. Renseigner l'attribut alt sur les images informatives 1.1.1 G73, G74, G92, G94, G95, G196, H37, F30, F38, F65, F67 A 1.1, 1.2 Bronze 4.1, 4.3, 4.4, 4.7, 4.8 A
5.3. Images mappées
5.3.1. Renseigner l’attribut alt de chaque image mappée et de ses balises <area /> 1.1.1 G94, G95, H24, H37, F30, F38, F65 A 1.3, 6.1, 6.4, 6.6, 11.9 Bronze 4.2, 4.3, 6.13, 6.15, 6.16 A
5.3.2. Intégrer les balises <map> et <area /> juste après chaque image mappée dans le flux HTML
6. Liens et boutons
6.1. Intitulés des liens et des boutons
6.1.1. Rédiger des intitulés explicites pour les liens et les boutons 1.1.1, 2.4.4, 4.1.2 G91, G94, G197, H30, F30, F89 A 1.3, 6.1, 6.4, 6.6, 11.9 Bronze 4.2, 4.3, 6.13, 6.15, 6.16 A
6.1.2. Utiliser en dernier recours l’attribut title pour expliciter les intitulés de liens et de boutons qui ne peuvent pas être rendus explicites 2.4.4, 4.1.2 H33 A 6.2, 6.4, 11.9 Bronze 6.13, 6.15 A
6.2. Documents en téléchargement
6.2.1. Intégrer le poids et le format des fichiers dans chaque lien et bouton permettant de les télécharger 2.4.4 H33 A 13.6 Bronze 6.26, 6.27, 6.28 A
6.3. Nouvelles fenêtres
6.3.1. Signaler l'ouverture des nouvelles fenêtres 2.4.4 H33, H83 A 13.2 Bronze 6.2, 6.3 A
7. Formulaires
7.1. Intitulés et champs
7.1.1. Utiliser la balise <label> ainsi que les attributs for et id pour associer les champs à leurs intitulés 1.1.1, 1.3.1, 2.4.6, 3.2.4, 3.3.2, 4.1.2 G131, H44, H65, F17, F31, F82, F86 A, AA 11.1, 11.2, 11.3 Bronze, Argent 3.10, 3.11, 3.12, 4.11 A, AA
7.1.2. Intégrer les informations utiles à la saisie directement dans les balises <label>
7.2. Regroupement et tri des informations
7.2.1. Regrouper et titrer les champs de même nature avec <fieldset> et <legend> 1.3.1, 3.3.2 H71 A 11.5, 11.6, 11.7 Bronze 3.4, 3.5, 3.6 A
7.2.2. Ordonner les options de manière logique dans les listes déroulantes
7.3. Titre de la page
7.3.1. Mettre à jour le <title> de la page quand un formulaire renvoie une erreur ou un message de confirmation 2.4.2 G88, H25, F25 A 8.5, 8.6, 11.10 Bronze 9.6, 9.7 A
7.4. CAPTCHA (systèmes anti-spam)
7.4.1. Indiquer dans l'alternative des CAPTCHA graphiques où trouver la version non graphique du CAPTCHA 1.1.1 G100, G143 A 1.4 Bronze 4.10 A
8. Listes et citations
8.1. Listes
8.1.1. Baliser les listes non ordonnées avec <ul> et <li> 1.3.1 H48 A 9.2 Bronze 10.5 A
8.1.2. Baliser les listes ordonnées avec <ol> et <li> 1.3.1 H48 A 9.2 Bronze 10.6 A
8.1.3. Baliser les listes de définitions avec <dl>, <dt> et <dd> 1.3.1 H40, H48 A 9.2 Bronze 10.7 A
8.2. Citations
8.2.1. Baliser les blocs de citations avec <blockquote> 1.3.1 H49 A 9.5 Bronze 10.8 A
9. Tableaux
9.1. Tableaux de mise en forme
9.1.1. Veiller à l'ordre de lecture des tableaux de mise en forme 1.3.2 F49 A 5.3 Bronze 11.6 A
9.1.2. Ne pas utiliser de balises ou d'attributs propres aux tableaux de données dans les tableaux de mise en forme 1.3.1 F46 A 5.8 Bronze 11.4 A
9.2. Tableaux de données
9.2.1. Donner un titre à chaque tableau de données avec la balise <caption> 1.3.1 H39 A 5.4, 5.5 Bronze 11.7, 11.9 A
9.2.2. Baliser chaque cellule d'entête de ligne et de colonne avec <th> 1.3.1 H51 A 5.6 Bronze 11.1 A
9.2.3. Utiliser l'attribut scope pour associer les cellules aux entêtes des tableaux de données simples 1.3.1 H63 A 5.7 Bronze 11.2 A
9.2.4. Utiliser les attributs headers et id pour associer les cellules aux entêtes des tableaux de données complexes 1.3.1 H43 A 5.7 Bronze 11.2, 11.3 A
10. Usage des CSS
10.1. Contenus masqués
10.1.1. Ne pas utiliser les propriétés CSS display ou visibility pour masquer un contenu qui ne peut pas être affiché par l'utilisateur 4.1.2 A 10.13 Bronze 7.18 A
10.2. Modification de l’apparence et de la taille du texte
10.2.1. Utiliser CSS pour mettre en forme les textes 1.4.5, 1.4.9 G140, C22, C30 AA 1.8, 1.9 Argent, Or 7.6, 7.7 AA, AAA
10.2.2. Utiliser uniquement des tailles relatives (em, %, small, etc.) pour les polices de caractères 1.4.4 C14, F80 AA 10.4 Argent 7.14 AA
10.2.3. Garantir la lisibilité des contenus même lorsque la taille du texte est doublée 1.4.4 F69, F80, G179 AA 10.4 Argent 7.13 AA
10.3. Accès à l’information
10.3.1. Garantir la lisibilité des contenus lorsque les images ne sont pas affichées 1.1.1, 1.3.1 A 10.2 Bronze 7.3 A
10.3.2. Garantir la compréhension de l'information même lorsque CSS est désactivé 1.3.1, 1.3.2 G59, F1, F87 A 10.2, 10.3 Bronze 7.1, 7.2, 7.3 A
11. Navigation au clavier
11.1. Ordre de tabulation
11.1.1. Veiller à ce que l'ordre de tabulation suive la logique de l'ordre de lecture 2.4.3 G59, H4, C27, F44 A 12.13 Bronze 6.24, 8.6 A
11.1.2. Mettre en place des liens d'évitement 2.4.1 G1, G123, G124 A 12.11 Bronze 6.31, 6.32, 6.33 A, AA
11.2. Visibilité de la prise de focus
11.2.1. Garantir la visibilité de la prise de focus au clavier 1.4.1, 2.4.7 G165, G183, G195, C15, F78 A, AA 10.7 Bronze 7.10, 7.11 A
12. Contenus embarqués
12.1. Contenus multimédia
12.1.1. Prévoir une alternative à chaque contenu multimédia (<video>, <audio>, <object>, etc.) 1.1.1, 1.2.1, 1.2.3, 1.2.8, 1.2.9 G58, G69, G150, G151, G158, G159, H27, H35, H46, H53, F67, F74 A, AAA 4.1, 4.2, 4.5, 4.6, 4.13, 4.14, 4.16, 4.17 Bronze, Argent, Or 5.2, 5.3, 5.4, 5.11, 5.12, 12.3 A
12.1.2. Ne pas utiliser le paramètre wmode avec les valeurs transparent ou opaque 4.1.2 A 4.22 Bronze 5.16 A
Recommandations additionnelles
Niveau A (WCAG) ou Bronze (AccessiWeb)
Baliser les citations en ligne avec <q> 1.3.1 H49 A 9.5 Bronze 10.8 A
Résumer le contenu et la structure de chaque tableau de données avec l'attribut summary 1.3.1 H73 A 5.1, 5.2 Bronze 11.8, 11.10 A
Renseigner l'attribut title sur chaque <iframe> 4.1.2 H64 A 2.1, 2.2 Bronze 1.1, 1.2 A
Renseigner l'attribut title sur chaque <frame> 4.1.2 H64 A 2.1, 2.2 Bronze 1.1, 1.2 A
Regrouper les options de même nature avec <optgroup> dans les <select> 1.3.1 H85 A 11.8 Bronze 3.7, 3.8, 3.9 A
Indiquer la langue de chaque document en téléchargement rédigé dans une langue étrangère 13.6 Bronze 6.28 A
Doubler les images dotées d'un attribut ismap avec des liens alternatifs 2.1.1, 2.1.3 F54 A 6.5 Bronze 6.1 A
Renseigner le sens de lecture principal de la page avec l'attribut dir="ltr" (gauche à droite) ou dir="rtl" (droite à gauche) sur la balise <html> 1.3.2 H56 A 8.10 Bronze
Utiliser l'attribut ''dir'' pour signaler les changements de sens de lecture dans le corps de la page 1.3.2 H56 A 8.10 Bronze
Identifier les principales zones de la page avec l'attribut id ou une ancre nommée 12.10 Bronze 6.30 A
Niveau AA (WCAG) ou Argent (AccessiWeb)
Aucune recommandation additionnelle au niveau AA (WCAG) ou Argent (AccessiWeb).
Niveau AAA (WCAG) ou Or (AccessiWeb)
Prévoir des intitulés de liens et de boutons explicites hors contexte et sans l'utilisation de l'attribut title 2.4.9 G91 AAA 6.3 Or 6.14 AAA
Baliser les définitions avec <dfn> 3.1.3 H54 AAA 13.9, 13.10 Or 12.4 AAA
Baliser les abréviations avec <abbr> 3.1.4 H28 AAA 9.3, 9.4 Or 10.9, 10.11 AAA
Baliser les abréviations avec <acronym> 3.1.4 H28 AAA 9.3, 9.4 Or 10.10, 10.12 AAA
Limiter la largeur des textes à 80 caractères, quelle que soit la taille du texte 1.4.8 H87, C20 AAA 10.11 Or 7.16 AAA
Prévoir un interligne d'au moins 1,5 fois la taille du texte, quelle que soit la taille du texte 1.4.8 C21 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, quelle que soit la taille du texte 1.4.8 C21 AAA 10.12 Or 7.17 AAA
Garantir l'absence de barre de défilement horizontale même lorsque la taille du texte est doublée par l'utilisateur 1.4.8 C26, C24 AAA 10.10 Or 7.15 AAA
Garantir des longueurs de lignes inférieures à 80 caractères lorsque l'utilisateur réduit la largeur de la fenêtre du navigateur 1.4.8 C26, C24 AAA 10.11 Or 7.16 AAA
notices/html-css/grille-de-correspondances-wcag-accessiweb-rgaa.txt · Dernière modification: Le 06/03/2013 à 16:34 (modification externe)
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :