Correspondance entre le RGAA 4 et AcceDe Web (version 4)
Sommaire
- Structure générale
- Titre de la page
- Langues
- Grammaire HTML et sémantique
- Liens et boutons
- Images et icônes
- Formulaires
- Listes
- Tableaux
- Usage des CSS
- Zoom et taille de texte
- Navigation au clavier
- Iframes
- Règles supplémentaires
1. Structure générale
| Règles AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
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
| Règle AcceDe Web | Critère RGAA 4 | Commentaires |
|---|---|---|
2.1. Renseigner un <title> précis sur chaque page |
8.5, 8.6 |
3. Langues
| Règles AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
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
| Règles AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
| 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
| Règles AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
| 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
| Règles AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
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 polices d’icônes (Icon Fonts) | 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
| Règles AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
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.11 | |
7.7. Regrouper et titrer les champs de même nature avec <fieldset> et <legend> |
11.5, 11.6, 11.7 |
8. Listes
| Règles AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
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
| Règles AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
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
| Règles AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
| 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.2, 10.1, 10.3, 10.9, 10.10 |
11. Zoom et taille de texte
| Règles AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
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
| Règles AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
| 12.1. Garantir le fonctionnement de l’interface à la souris et au clavier | 4.11, 4.12, 7.3, 10.14, 12.11 | |
| 12.2. Veiller à ce que l’ordre de tabulation suive la logique de l’ordre de lecture | 12.8 | |
| 12.3. Garantir la visibilité de la prise de focus au clavier | 10.7 | |
| 12.4. Mettre en place un lien d’évitement | 12.6, 12.7 |
13. Iframes
| Règle AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
13.1. Renseigner l’attribut title sur chaque <iframe> |
2.1, 2.2 |
14. Règles supplémentaires
| Règles AcceDe Web | Critères RGAA 4 | Commentaires |
|---|---|---|
| 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.4, 1.3, 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.8, 4.9 | |
Renseigner l’attribut alt de chaque image mappée et de ses balises <area /> |
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 |