WCAG 2.0 correspondence table

The set of recommendations presented in this document is drawn from the WCAG 2.0.

In order that readers can read this document and compare the recommendations with the level of the standards (A, AA, AAA) a correspondence table between the AcceDe Web HTML/CSS recommendations and the criteria of WCAG 2.0 is maintained in the project wiki at the following address:

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
notices/html-css/grille-de-correspondances-wcag-accessiweb-rgaa.txt · Last modified: 30 April 2013 at 17:35 by regis.lapeze
 

Project coordinated by Atalan.

In partnership with:

Observers: