Correspondance entre le RGAA 4.1.2 et AcceDe Web (version 4.1.2)

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. Iframes
  14. Règles supplémentaires

1. Structure générale

Correspondance entre le RGAA et la thématique Structure générale de la notice AcceDe Web HTML et CSS
Règles AcceDe Web Critères RGAA 4
1.1. Structurer la zone d’entête principale avec <header role="banner"> 9.2, 12.6
1.2. Identifier le moteur de recherche avec role="search" 12.6
1.3. Structurer la zone de contenu principal avec <main role="main"> 9.2, 12.6
1.4. Structurer les informations relatives au site avec <footer role="contentinfo"> 9.2, 12.6
1.5. Structurer les menus de navigation principaux et secondaires avec <nav role="navigation"> 9.2, 12.6
1.6 Structurer les menus de navigation avec des listes 9.3
1.7. Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6> 9.1

2. Titre de la page

Correspondance entre le RGAA et la thématique Titre de la page de la notice AcceDe Web HTML et CSS
Règle AcceDe Web Critère RGAA 4
2.1. Renseigner un <title> précis sur chaque page 8.5, 8.6

3. Langues

Correspondance entre le RGAA et la thématique Langues de la notice AcceDe Web HTML et CSS
Règles AcceDe Web Critères RGAA 4
3.1. Renseigner la langue principale de la page avec l’attribut lang sur la balise <html> 8.3, 8.4
3.2. Utiliser l’attribut lang pour signaler les changements de langue 8.7, 8.8

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 et CSS
Règles AcceDe Web Critères RGAA 4
4.1. Écrire un code HTML valide selon les règles de grammaire du DOCTYPE utilisé 8.1, 8.2
4.2. Employer les balises HTML pour leur valeur sémantique 8.9

5. Liens et boutons

Correspondance entre le RGAA et la thématique Liens et boutons de la notice AcceDe Web HTML et CSS
Règles AcceDe Web Critères RGAA 4
5.1. Différencier les boutons des liens 7.1, 8.9
5.2. Compléter les liens et les boutons non explicites avec aria-label ou title 6.1, 7.1
5.3. Ne pas utiliser les attributs aria-label et title sur des liens ou boutons explicites 6.1, 7.1

6. Images et icônes

Correspondance entre le RGAA et la thématique Images et icônes de la notice AcceDe Web HTML et CSS
Règles AcceDe Web Critères RGAA 4
6.1. Gérer l’attribut alt des balises <img /> et <input type="images" /> 1.1, 1.2, 1.3, 6.1, 11.9
6.2. Gérer l’alternative des SVG (images vectorielles) 1.1, 1.2, 1.3, 6.1
6.3. Gérer l’alternative des icônes insérées via les CSS 1.1, 1.2, 1.3, 6.1
6.4. Baliser les images légendées avec <figure role="figure"> et <figcaption> 1.9

7. Formulaires

Correspondance entre le RGAA et la thématique Formulaires de la notice AcceDe Web HTML et CSS
Règles AcceDe Web Critères RGAA 4
7.1. Utiliser la balise <label> ainsi que les attributs for et id pour étiqueter les champs avec intitulé visible 11.1, 11.2
7.2. Utiliser title pour étiqueter les champs sans intitulé visible 11.1, 11.2
7.3. Utiliser l’attribut autocomplete pour faciliter le remplissage automatique des champs 11.13
7.4. Intégrer les aides à la saisie directement dans les balises <label> 11.10
7.5. Intégrer required ou aria-required="true" dans les champs obligatoires 11.10
7.6. Intégrer les messages d’erreur et les suggestions de correction directement dans les balises <label> 11.10, 11.11
7.7. Regrouper et titrer les champs de même nature avec <fieldset> et <legend> 11.5, 11.6, 11.7

8. Listes

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

9. Tableaux

Correspondance entre le RGAA et la thématique Tableaux de la notice AcceDe Web HTML et CSS
Règles AcceDe Web Critères RGAA 4
9.1. Baliser le titre des tableaux de données avec la balise <caption> 5.4, 5.5
9.2. Baliser chaque cellule d’entête de ligne et de colonne avec <th> 5.6
9.3. Utiliser l’attribut scope pour associer les cellules aux entêtes des tableaux de données simples 5.7
9.4. Intégrer role="presentation" dans chaque balise <table> de mise en forme 5.3

10. Usage des CSS

Correspondance entre le RGAA et la thématique Usage des CSS de la notice AcceDe Web HTML et CSS
Règles AcceDe Web Critères RGAA 4
10.1. Utiliser CSS pour mettre en forme les textes 1.8, 10.1
10.2. Garantir la lisibilité des contenus lorsque les images ne sont pas affichées 10.5
10.3. Garantir la compréhension de l’information même lorsque CSS est désactivé 10.1, 10.2, 10.3, 10.9, 10.10

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 et CSS
Règles AcceDe Web Critères RGAA 4
11.1. Utiliser uniquement des tailles relatives (rem, em, %, etc.) pour les polices de caractères 10.4
11.2. Garantir la lisibilité des contenus même lorsque la taille du texte est doublée 10.4

12. Navigation au clavier

Correspondance entre le RGAA et la thématique Navigation au clavier de la notice AcceDe Web HTML et CSS
Règles AcceDe Web Critères RGAA 4
12.3. Garantir la visibilité de la prise de focus au clavier 10.7
12.1. Garantir le fonctionnement de l’interface à la souris et au clavier 4.11, 4.12, 7.3, 10.13, 10.14, 12.9, 12.11
12.2. Veiller à ce que l’ordre de tabulation suive la logique de l’ordre de lecture 12.8
12.4. Mettre en place un lien d’évitement 12.6, 12.7

13. Iframes

Correspondance entre le RGAA et la thématique Iframes de la notice AcceDe Web HTML et CSS
Règle AcceDe Web Critères RGAA 4
13.1. Renseigner l’attribut title sur chaque <iframe> 2.1, 2.2

14. Règles supplémentaires

Correspondance entre le RGAA et les règles supplémentaires de la notice AcceDe Web HTML et CSS
Règles AcceDe Web Critères RGAA 4
Assurer la compréhension de l’information même en l’absence de couleurs 3.1
Garantir la lisibilité des contenus même lorsque les propriétés d’espacement du texte sont personnalisées 10.12
Intégrer le résumé de chaque tableau de données complexe dans la balise <caption> 5.1, 5.2, 5.4
Fournir une alternative textuelle à chaque balise <canvas>, <embed> et <object> informative 1.1, 1.3, 1.4, 1.6
Fournir une alternative textuelle à chaque balise <canvas>, <embed> et <object> servant de lien ou de bouton 6.1, 6.2, 7.1, 11.9
Masquer chaque balise <canvas>, <embed> et <object> décoratives ou illustratives aux technologies d’assistance 1.2
Ne pas lancer d’action tant que l’élément déclencheur est dans l’état « pressé » 13.11
Permettre l’anticipation du comportement de l’interface 7.4
Regrouper les options de même nature avec <optgroup> dans les <select> 11.8
Renseigner l’attribut title sur chaque <frame> 2.1, 2.2
Utiliser l’attribut dir pour signaler les changements de sens de lecture 8.10
Veiller à utiliser correctement les techniques de masquage de contenu 10.8
Baliser les blocs de citations avec <blockquote> 9.4
Baliser les citations en ligne avec <q> 9.4
Écrire le code HTML en suivant la logique de l’ordre de lecture 10.3
Indiquer dans l’alternative des CAPTCHA graphiques où trouver la version non graphique du CAPTCHA 1.4
Ne pas utiliser de balises ou d’attributs propres aux tableaux de données dans les tableaux de mise en forme 5.8
Prévoir une alternative à chaque contenu multimédia (<video>, <audio>, <object>, <embed>, etc.) 4.1, 4.8, 4.9
Renseigner l’attribut alt de chaque image mappée et de ses balises <area /> 1.1, 1.2, 1.3
Utiliser les attributs headers et id pour associer les cellules aux entêtes des tableaux de données complexes 5.7
Veiller à la cohérence de l’ordre du flux HTML d’une page à l’autre 12.2
Veiller à l’ordre de lecture des tableaux de mise en forme 5.3

Commentaires

Mises à jour

28/08/2024
Mise à jour des tableaux et des références.

Haut de page