AcceDe Web recommendations | WCAG | AccessiWeb | RGAA |
Criterion | Technique | Level | Criterion | Level | Criterion | Level |
1. General structure |
1.1. Regions, headings and navigation menus |
1.1.1. Identify the main regions of the page with the role attribute | 2.4.1 | | A | | | | |
1.1.2. Implement a logical and thorough hierarchy of headings using the tags <h1> to <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. Structure navigation menus with lists | 1.3.1 | H48 | A | 9.2 | Bronze | | |
1.2. Order of content in the HTML source code |
1.2.1 Write the HTML source code by following the logical reading order | 1.3.2, 2.4.3 | G59, F1 | A | 10.3 | Bronze | 7.2 | A |
1.2.2. Ensure the consistency of the HTML order from one page to the next | 3.2.3 | G61, F66 | AA | 12.2 | Silver | 6.22 | AA |
2. Metadata |
2.1. Page title |
2.1.1. Enter an accurate <title> on each page | 2.4.2 | G88, H25, F25 | A | 8.5, 8.6 | Bronze | 9.6, 9.7 | A |
2.2. Character encoding |
2.2.1. Ensure the correct encoding of all characters | | | | | | | |
3. Languages |
3.1. Page language |
3.1.1. Use the lang attribute in the <html> tag to define the main language of the page | 3.1.1 | H57 | A | 8.3, 8.4 | Bronze | 9.8 | A |
3.2. Change of language |
3.2.1. Use the lang attribute to indicate a change in the language | 3.1.2 | H58 | AA | 8.7, 8.8 | Silver | 12.1, 12.2 | AA |
4. HTML grammar and semantics |
4.1. Conformity |
4.1.1. Write valid HTML code according to the grammar rules of the DOCTYPE used | 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 of HTML tags and attributes |
4.2.1. Do not use HTML attributes or tags designed exclusively for formatting | 1.3.1 | G140, C22 | A | 10.1 | Bronze | 7.8 | A |
4.2.2. Use HTML tags for their semantic value | 1.3.1 | G115, F43 | A | 8.9 | Bronze | 7.9 | A |
5. Images |
5.1. Illustrative and decorative images |
5.1.1. Use an empty alternate text (alt="") for decorative and illustrative images | 1.1.1 | H37, H67, F38, F39, F65 | A | 1.1, 1.2 | Bronze | 4.1, 4.5 | A |
5.2. Informative Images |
5.2.1. Do not use CSS to display informative images | 1.1.1, 1.3.1 | F3, F87 | A | 10.2 | Bronze | 7.1 | A |
5.2.2. Enter the alt attribute for informative images | 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. Image maps |
5.3.1. Enter the alt attribute to each image map and corresponding <area /> tags | 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. Include <map> and <area> tags just after each image map in the HTML code | | | | | | | |
6. Links and buttons |
6.1. Link and button headings |
6.1.1. Write meaningful texts for links and buttons | 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. As a last resort, use the title attribute to make link and button texts explicit that cannot be made clear otherwise | 2.4.4, 4.1.2 | H33 | A | 6.2, 6.4, 11.9 | Bronze | 6.13, 6.15 | A |
6.2. Download documents |
6.2.1. Indicate the size and format of each document that can be downloaded | 2.4.4 | H33 | A | 13.6 | Bronze | 6.26, 6.27, 6.28 | A |
6.3. New windows |
6.3.1. Indicate the opening of new windows | 2.4.4 | H33, H83 | A | 13.2 | Bronze | 6.2, 6.3 | A |
7. Forms |
7.1. Labels and form controls |
7.1.1. Use the <label> tag as well as the “for” and “id” attributes to associate form controls with their text labels | 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, Silver | 3.10, 3.11, 3.12, 4.11 | A, AA |
7.1.2. Include information about expected field values directly in <label> tags | | | | | | | |
7.2. Grouping and sorting information |
7.2.1. Group and title fields of the same type with <fieldset> and <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. Order drop-down list options in a logical way | | | | | | | |
7.3. Page title |
7.3.1. Update the page <title> when a page returns an error or a confirmation message | 2.4.2 | G88, H25, F25 | A | 8.5, 8.6, 11.10 | Bronze | 9.6, 9.7 | A |
7.4. CAPTCHA (anti-spam system) |
7.4.1. Indicate in the alt attribute of the CAPTCHA image where the user can find the non-graphic CAPTCHA version | 1.1.1 | G100, G143 | A | 1.4 | Bronze | 4.10 | A |
8. Lists and quotations |
8.1. Lists |
8.1.1. Tag unordered lists with <ul> and <li> | 1.3.1 | H48 | A | 9.2 | Bronze | 10.5 | A |
8.1.2. Tag ordered lists with <ol> and <li> | 1.3.1 | H48 | A | 9.2 | Bronze | 10.6 | A |
8.1.3. Tag definition lists with <dl>, <dt> and <dd> | 1.3.1 | H40, H48 | A | 9.2 | Bronze | 10.7 | A |
8.2. Quotations |
8.2.1. Tag quotation blocks with <blockquote> | 1.3.1 | H49 | A | 9.5 | Bronze | 10.8 | A |
9. Tables |
9.1. Formatting tables |
9.1.1. Ensure the correct reading order of formatting tables | 1.3.2 | F49 | A | 5.3 | Bronze | 11.6 | A |
9.1.2. Do not use tags or attributes that are specific to data tables in formatting tables | 1.3.1 | F46 | A | 5.8 | Bronze | 11.4 | A |
9.2. Data tables |
9.2.1. Provide a title for each data table with the <caption> tag | 1.3.1 | H39 | A | 5.4, 5.5 | Bronze | 11.7, 11.9 | A |
9.2.2. Tag each row header and column header cell with <th> | 1.3.1 | H51 | A | 5.6 | Bronze | 11.1 | A |
9.2.3. Use the scope attribute to associate cells with the headers in simple tables | 1.3.1 | H63 | A | 5.7 | Bronze | 11.2 | A |
9.2.4. Use the headers and id attributes to associate cells with table header cells in complex data tables | 1.3.1 | H43 | A | 5.7 | Bronze | 11.2, 11.3 | A |
10. CSS usage |
10.1. Hidden content |
10.1.1. Do not use the CSS properties display or visibility to hide content that cannot be displayed by the user | 4.1.2 | | A | 10.13 | Bronze | 7.18 | A |
10.2. Changing the appearance and size of text |
10.2.1. Use CSS to format text | 1.4.5, 1.4.9 | G140, C22, C30 | AA | 1.8, 1.9 | Silver, Gold | 7.6, 7.7 | AA, AAA |
10.2.2. Only use relative sizes (em, %, small, etc.) for typefaces | 1.4.4 | C14, F80 | AA | 10.4 | Silver | 7.14 | AA |
10.2.3. Ensure the readability of content even if the text size is doubled | 1.4.4 | F69, F80, G179 | AA | 10.4 | Silver | 7.13 | AA |
10.3. Access to information |
10.3.1. Make sure content is readable when images are not displayed | 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. Navigating with the keyboard |
11.1. Tab order |
11.1.1. Make sure the tab order follows the logical reading order | 2.4.3 | G59, H4, C27, F44 | A | 12.13 | Bronze | 6.24, 8.6 | A |
11.1.2. Include skip links | 2.4.1 | G1, G123, G124 | A | 12.11 | Bronze | 6.31, 6.32, 6.33 | A, AA |
11.2. Visibility of the focus position |
11.2.1. Ensure visibility of focus when set from the keyboard | 1.4.1, 2.4.7 | G165, G183, G195, C15, F78 | A, AA | 10.7 | Bronze | 7.10, 7.11 | A |
12. Embedded content |
12.1. Multimedia content |
12.1.1. Provide an alternative to each multimedia content (<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, Silver, Or | 5.2, 5.3, 5.4, 5.11, 5.12, 12.3 | A |
12.1.2. Do not use the wmode parameter with the values transparent or opaque | 4.1.2 | | A | 4.22 | Bronze | 5.16 | A |
Additional recommendations |
level AA (WCAG 2.0) |
Tag inline quotes with <q> | 1.3.1 | H49 | A | 9.5 | Bronze | 10.8 | A |
Include the summary and structure of each data table with the summary attribute | 1.3.1 | H73 | A | 5.1, 5.2 | Bronze | 11.8, 11.10 | A |
Enter a value for the title attribute for each <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 |
level AA (WCAG 2.0) |
There are no additional recommendations for level AA (WCAG). |
level AAA (WCAG 2.0) |
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 | Gold | 6.14 | AAA |
Baliser les définitions avec <dfn> | 3.1.3 | H54 | AAA | 13.9, 13.10 | Gold | 12.4 | AAA |
Baliser les abréviations avec <abbr> | 3.1.4 | H28 | AAA | 9.3, 9.4 | Gold | 10.9, 10.11 | AAA |
Baliser les abréviations avec <acronym> | 3.1.4 | H28 | AAA | 9.3, 9.4 | Gold | 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 | Gold | 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 | Gold | 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 | Gold | 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 | Gold | 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 | Gold | 7.16 | AAA |