Correspondance RGAA et AcceDe Web (HTML, CSS et JavaScript)

Le respect des bonnes pratiques AcceDe Web permet de garantir la conformité d’un site avec le Référentiel Général d’Accessibilité pour les Administrations (RGAA) dans sa version 3 2017.

Sommaire

  1. Structure générale.
  2. Titre de la page.
  3. Langues.
  4. Grammaire HTML et sémantique.
  5. Liens et boutons.
  6. Images et icônes.
  7. Formulaires.
  8. Listes.
  9. Tableaux.
  10. Usage des CSS.
  11. Zoom et taille de texte.
  12. Navigation au clavier.
  13. Scripts.

1. Structure générale

Correspondance entre le RGAA et la thématique Structure générale de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
1.1. Structurer la zone d’entête principale avec <header role="banner"> 9.2, 12.10 A
1.2. Identifier le moteur de recherche avec role="search" 12.10 A
1.3. Structurer la zone de contenu principal avec <main role="main"> 9.2, 12.10 A
1.4. Structurer les informations relatives au site et à son auteur avec <footer role="contentinfo"> 9.2, 12.10 A
1.5. Structurer les menus de navigation principaux et secondaires avec <nav role="navigation"> 9.2, 12.10 A
1.6 Structurer les menus de navigation avec des listes 9.3 A
1.7. Identifier la position courante dans les systèmes de navigation avec aria-current 12.12 AAA La technique aria-current n’est pas traitée par le RGAA. Il n’y a donc pas de correspondance directe. Toutefois, l’utilisation de cet attribut peut participer à la validation du critère 12.12.
1.8. Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6> 9.1 A
1.9. Écrire le code HTML en suivant la logique de l’ordre de lecture 5.3, 10.3 A
1.10. Veiller à la cohérence de l’ordre du flux HTML d’une page à l’autre 12.2 AA

2. Titre de la page

Correspondance entre le RGAA et la thématique Titre de la page de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
2.1. Renseigner un <title> précis sur chaque page 8.5, 8.6 A

3. Langues

Correspondance entre le RGAA et la thématique Langues de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
3.1. Renseigner la langue principale de la page avec l’attribut lang sur la balise <html> 8.3, 8.4 A
3.2. Utiliser l’attribut lang pour signaler les changements de langue 8.7, 8.8 AA
3.3. Veiller à traduire les contenus masqués Sujet non traité par le RGAA. Intégré dans AcceDe Web suite à de nombreuses constatation terrain.

4. Grammaire HTML et sémantique

Correspondance entre le RGAA et la thématique Grammaire HTML et sémantique de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
4.1. Écrire un code HTML valide selon les règles de grammaire du DOCTYPE utilisé 8.1, 8.2 A
4.2. Employer les balises HTML pour leur valeur sémantique 8.9 A

5. Liens et boutons

Correspondance entre le RGAA et la thématique Liens et boutons de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
5.1. Différencier les boutons des liens 7.1, 8.9 A
5.2. Compléter les liens et les boutons non explicites avec aria-label ou title 6.1, 6.2, 7.1, 7.4 A
5.3. Ne pas utiliser les attributs aria-label et title sur des liens ou boutons explicites 6.2 A
5.4. Intégrer le poids et le format des fichiers dans chaque lien et bouton permettant de les télécharger 13.6 A
5.5. Signaler l’ouverture des nouvelles fenêtres 13.2 A
5.6. Regrouper les boutons ou les liens adjacents déclenchant la même action 14.9 A Thématique additionnelle du RGAA : Mobile/Tactile.

6. Images et icônes

Correspondance entre le RGAA et la thématique Images et icônes de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
6.1. Gérer l’alternative des polices d’icônes (Icon Fonts) 1.1, 1.2, 1.3, 6.1, 7.1, 7.4, 11.9 A La technique des polices d’icônes n’est pas traitée par le RGAA. Il n’y a donc pas de correspondance directe. Toutefois, ces polices d’icônes peuvent être assimilées à des images.
6.2. Gérer l’alternative des SVG (images vectorielles) 1.1, 1.2, 1.3, 6.1, 7.1, 7.4, 11.9 A
6.3. Gérer l’attribut alt des balises <img /> et <input type="image" /> 1.1, 1.2, 1.3, 6.1, 7.1, 7.4, 11.9 A
6.4. Baliser les images légendées avec <figure role="group"> et <figcaption> 1.10 A
6.5. Ne pas utiliser CSS pour afficher les images porteuses d’informations 10.2 A

7. Formulaires

Correspondance entre le RGAA et la thématique Formulaires de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
7.1. Utiliser la balise <label> ainsi que les attributs for et id pour étiqueter les champs avec intitulé visible 11.1, 11.2 A
7.2. Utiliser aria-label ou title pour étiqueter les champs sans intitulé visible 11.1, 11.2 A
7.3. Intégrer les aides à la saisie directement dans les balises <label> 11.10 A
7.4. Intégrer required ou aria-required="true" dans les champs obligatoires 11.10 A
7.5. Intégrer les messages d’erreurs et les suggestions de correction directement dans les balises <label> 11.10, 11.11 A, AA
7.6. Mettre à jour le <title> de la page quand celle-ci se recharge pour afficher une erreur ou un message de confirmation 11.10 A
7.7. Regrouper et titrer les champs de même nature avec <fieldset> et <legend> 11.5, 11.6, 11.7 A
7.8. Ordonner les options de manière logique dans les listes déroulantes 11.8 A
7.9. Identifier l’étape courante des formulaires à étapes multiples avec aria-current="step" 12.12 AAA La technique aria-current n’est pas traitée par le RGAA. Il n’y a donc pas de correspondance directe. Toutefois, l’utilisation de cet attribut peut participer à la validation du critère 12.12.

8. Listes

Correspondance entre le RGAA et la thématique Listes de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
8.1. Baliser les listes non ordonnées avec <ul> et <li> 9.3 A
8.2. Baliser les listes ordonnées avec <ol> et <li> 9.3 A
8.3. Baliser les listes de descriptions avec <dl>, <dt> et <dd> 9.3 A

9. Tableaux

Correspondance entre le RGAA et la thématique Listes de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
9.1. Donner un titre à chaque tableau de données avec la balise <caption> 5.4, 5.5 A
9.2. Baliser chaque cellule d’entête de ligne et de colonne avec <th> 5.6 A
9.3. Utiliser l’attribut scope pour associer les cellules aux entêtes des tableaux de données simples 5.7 A
9.4. Utiliser les attributs headers et id pour associer les cellules aux entêtes des tableaux de données complexes 5.7 A
9.5. Intégrer role="presentation" dans chaque balise <table> de mise en forme 5.3 A
9.6. Ne pas utiliser de balises ou d’attributs propres aux tableaux de données dans les tableaux de mise en forme 5.8 A
9.7. Veiller à l’ordre de lecture des tableaux de mise en forme 5.3 A

10. Usage des CSS

Correspondance entre le RGAA et la thématique Usage des CSS de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
10.1. Utiliser CSS pour mettre en forme les textes 1.8 AA
10.2. Garantir la lisibilité des contenus lorsque les images ne sont pas affichées 3.3, 10.5 AA
10.3. Garantir la compréhension de l’information même lorsque CSS est désactivé 3.1, 3.2, 10.2, 10.3, 10.14, 10.15 A

11. Zoom et taille de texte

Correspondance entre le RGAA et la thématique Zoom et taille de texte de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
11.1. Utiliser uniquement des tailles relatives (em, %, small, etc.) pour les polices de caractères 10.4 AA
11.2. Garantir la lisibilité des contenus même lorsque la taille du texte est doublée 10.4 AA
11.3. Ne pas brider le zoom avec la propriété user-scalable 14.2 AA Thématique additionnelle du RGAA : Mobile/Tactile.

12. Navigation au clavier

Correspondance entre le RGAA et la thématique Navigation au clavier de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
12.1. Veiller à ce que l’ordre de tabulation suive la logique de l’ordre de lecture 12.13, 12.14 A
12.2. Mettre en place des liens d’évitement 12.11 A
12.3. Garantir la visibilité de la prise de focus au clavier 10.7 A

13. Scripts

Correspondance entre le RGAA et la thématique Scripts de la notice AcceDe Web HTML, CSS et JavaScript
Recommandations AcceDe Web RGAA 3 2017 Commentaires
Critères Niveau
13.1. Permettre le contrôle des scripts à la fois à la souris et au clavier 7.3, 12.14 A

Commentaires

Haut de page