RGAA 3 2016 Testing Methodology

Introduction

This document has been written as part of the resources that support the application of RGAA (General Framework for Accessibility for the French Administrations), version 3 2016.

It is aimed at any person willing to check conformance of web content as per the RGAA 3. It is a testing methodology, documenting the steps needed to check whether or not a criterion of the RGAA 3 2016 is conforming. This methodology must therefore be used in addition with the technical reference, and cannot be used alone.

For each criterion or test, at least two methods are proposed, one for Internet Explorer, and one for Firefox. these browsers are also mentioned in the reference baseline] for screen readers testing.

The proposed methods are not the only possible ones, some of the criteria or tests can be checked with other browsers. A restricted choice has been made, in order to minimize the document's length and ease its understanding.

Because none should need to acquire expensive special software to comply with the law, each tool proposed to perform the tests has been chosen for three reasons:

Reliability of the results, and frequent use by subject matter experts;
Ease of use and of results management, sparing the need for complex software set up;
Free of charge, and whenever possible, not requiring the purchase of a license.

Other tools exist, anyone is free to test and use them.

Please note that this methodology is a companion document, aiming at helping with the application of the RGAA 3 2016 technical reference. It should not prevent you from carefully reading the technical reference, nor getting RGAA training.

Tools

The methods use the following tools:

Web Accessibility Toolbar (WAT in the rest of the document) for Internet Explorer: toolbar for website accessibility verification;
Web Developer Toolbar for Firefox (WebDev in the rest of the document): toolbar for developers, which has some functionalities that can be used to check the accessibility of certain elements of a website;
Web Developer for Chrome (WebDev (Chrome) in the rest of the document): toolbar for developers, which has some functionalities that can be used to check the accessibility of certain elements of a website;
HTML5 Validator: online validation of the generated source code of a website;
WCAG Contrast checker: Firefox extension, that performs an automatic check of the texts color contrasts of a website;
Color Contrast Analyser: Windows Application that allows to check the color contrasts;
Audacity: audio editing software, that allows the management of audio files and the analysis of their properties;
HeadingsMap for Firefox: Firefox extension that provides the document outline and its hierarchy;
HeadingsMap for Chrome: Chrome extension that provides the document outline and its hierarchy;
PAC 2 (PDF Accessibility Checker) for Windows: software that performs the verification of certain accessibility checkpoints for PDF documents;
Word Accessibility Plug-in for Microsoft Office for Windows: Microsoft Word extension that allows the edition and control of the accessibility of a .doc format file;
AccessODF for LibreOffice/OpenOffice: extension to check the accessibility of a LibreOffice/OpenOffice Writer document;
PEAT (Photosensitive Epilepsy Analysis Tool) for Windows: software that can analyze web content, to assess their potential to cause seizures.

User CSS style sheets

To get the user CSS style sheets used in certain tests of the methodology, download one of the archives:

Note about the Disabled CSS mode

Most tests are performed by disabling CSS. This mode is interesting because it gives immediate access to the native structure of the content, to the real nature of the elements and to the hidden contents. This mode is also ideal for applying customizations provided by toolbars or user style sheets.

It is nevertheless advisable to keep, for example in an adjacent tab, a version of the page with CSS enabled, in order to have access to the styled version of the page.

Images

Criterion 1.1 [A] Does each image have a text alternative?

Tests 1.1.1, 1.1.3

With the WAT

In the "Images" menu, choose the "List images" item.
All the graphic elements in the page are displayed with, below each of them, the matching source code extract.
Check that each image has an alt attribute.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable styles", then "Disable All Styles".
In the "Images" menu, choose "Display Alt Attributes".
In the "Outline" menu, choose "Outline Custom Elements…", and type:
- "img" to outline the IMG elements.
- "input" to outline the INPUT elements.
Look for images and image buttons with no alternative.
If no element can be found, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable Styles", then "Disable All Styles".
In the "Images" menu, choose "Display Alt Attributes".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type img,input{border:2px solid red}.
Look for images and image buttons with no alternative.
If no element can be found, the test is passed.

With the validator

Validate code.
Check that the validator does not trigger any error due to the absence of an alt attribute. (Example: An img element must have an alt attribute, except under certain conditions.)
If true, the test is passed.

Test 1.1.2

With the WAT

In the "Images" menu, choose "Show image maps new window"
A new window opens and displays a list of all the image maps in the page.
Check that the area tags with a href attribute, have an alt attribute.
If true, the test is passed.

With the WebDev (Firefox)

Right-click on the page and choose "Inspect Element".
Search for map.
Check that the area tags with a href attribute, have an alt attribute.
If true, the test is passed.

With the WebDev (Chrome)

Right-click on the page and choose "Inspect".
Search for map.
Check that the area tags with a href attribute, have an alt attribute.
If true, the test is passed.

With the validator

Validate code.
Check that the validator does not trigger any error due to the absence of an alt attribute on an area tag with a href attribute. (Example: Element area is missing required attribute alt.)
If true, the test is passed.

Test 1.1.4

With the WAT

In the "Images" menu, choose "Show image maps new window".
A new window opens and displays a list of all the image maps in the page.
Check the presence of img tags with an ismap attribute.
If true, check, in the page, the presence of links giving access to the same resources as the clickable areas of the image.
If true, the test is passed.

With the WebDev (Firefox)

Right-click on the page and choose "Inspect Element".
Search for map.
Check the presence of img tags with an ismap attribute.
If true, check, in the page, the presence of links giving access to the same resources as the clickable areas of the image.
If true, the test is passed.

With the WebDev (Chrome)

Right-click on the page and choose "Inspect".
Search for map.
Check the presence of img tags with an ismap attribute.
If true, check, in the page, the presence of links giving access to the same resources as the clickable areas of the image.
If true, the test is passed.

Criterion 1.2 [A] For each decorative image with a text alternative, is this alternative empty?

Test 1.2.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Images" menu, choose "Show images".
In the "Doc Info." menu, choose "Show titles".
For each image with an alt attribute, with no caption, check:
1. That decorative images have an empty alternative (alt="");
2. That images have no title attributes;
3. That images have no ARIA role, property or state meant to label them (aria-label, aria-describedby, aria-labelledby for example).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Images" menu, choose "Display Alt Attributes".
In the "Information" menu, choose "Display Title Attributes".
For each image with an alt attribute, with no caption, check:
1. That decorative images have an empty alternative (alt="");
2. That images have no title attributes;
3. That images have no ARIA role, property or state meant to label them (aria-label, aria-describedby, aria-labelledby for example).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Images" menu, choose "Display Alt Attributes".
In the "Information" menu, choose "Display Title Attributes".
For each image with an alt attribute, with no caption, check:
1. That decorative images have an empty alternative (alt="");
2. That images have no title attributes;
3. That images have no ARIA role, property or state meant to label them (aria-label, aria-describedby, aria-labelledby for example).
If true, the test is passed.

Note: with a mouse, it is possible to not display the title attributes to improve the interface, and to hover over the image to check the presence of a title attribute.

Test 1.2.2

With the WAT

In the "Images" menu, choose "Show image maps new window".
A new window opens and displays a list of all the image maps in the page.
For each decorative area (area tags with no href attribute), check:
- That the area tag has an empty alternative (alt="").
- That the area tag has no title attribute.
- That the area tag has no ARIA role, property or state meant to label it (aria-label, aria-describedby, aria-labelledby for example).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "map".
Find in the page the images maps, right-click on them and choose "Inspect Element".
For each decorative area (area tags with no href attribute), check:
- That the area tag has an empty alternative (alt="").
- That the area tag has no title attribute.
- That the area tag has no ARIA role, property or state meant to label it (aria-label, aria-describedby, aria-labelledby for example).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Right-click on the page and choose "Inspect".
In the search field, type "area".
For each decorative area (area tags with no href attribute), check:
- That the area tag has an empty alternative (alt="").
- That the area tag has no title attribute.
- That the area tag has no ARIA role, property or state meant to label it (aria-label, aria-describedby, aria-labelledby for example).
If true, the test is passed.

Test 1.2.3

With the WAT

Right-click on the page and choose "Inspect Element".
Search for object.
For each object tag with the type="image" attribute, with no caption, check:
- That the object tag has an aria-hidden="true" attribute;
- That the text alternative between <object> and </object> is empty;
- That the object tag or any of its descendants has no ARIA role, property or state meant to label them (aria-label, aria-describedby, aria-labelledby for example).
If true, the test is passed.

With the WebDev (Firefox)

Right-click on the page and choose "Inspect Element".
Search for object.
For each object tag with the type="image" attribute, with no caption, check:
- That the object tag has an aria-hidden="true" attribute;
- That the text alternative between <object> and </object> is empty;
- That the object tag or any of its descendants has no ARIA role, property or state meant to label them (aria-label, aria-describedby, aria-labelledby for example).
If true, the test is passed.

With the WebDev (Chrome)

Right-click on the page and choose "Inspect Element".
Search for object.
For each object tag with the type="image" attribute, with no caption, check:
- That the object tag has an aria-hidden="true" attribute;
- That the text alternative between <object> and </object> is empty;
- That the object tag or any of its descendants has no ARIA role, property or state meant to label them (aria-label, aria-describedby, aria-labelledby for example).
If true, the test is passed.

Test 1.2.4

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type "svg".
Spot the svg tags used to insert a decorative image.
Right-click on the element and choose "Inspect Element".
Check:
1. The presence of the ARIA property aria-hidden="true" on the svg tag;
2. The absence of any ARIA property (aria-label, aria-describedby, aria-labelledby…) meant to label the image on the svg tag or one of its descendants;
3. That there is no title or desc tags in the body of the svg tags; or that they are empty, if present;
4. The absence of a title attribute on the svg tag or one of its descendants.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "svg".
Spot the svg tags used to insert a decorative image.
Right-click on the element and choose "Inspect Element".
Check:
1. The presence of the ARIA property aria-hidden="true" on the svg tag;
2. The absence of any ARIA property (aria-label, aria-describedby, aria-labelledby…) meant to label the image on the svg tag or one of its descendants;
3. That there is no title or desc tags in the body of the svg tags; or that they are empty, if present;
4. The absence of a title attribute on the svg tag or one of its descendants.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Right-click on the element and choose "Inspect".
In the search field, type "svg".
Spot the svg tags used to insert a decorative image and check:
1. The presence of the ARIA property aria-hidden="true" on the svg tag;
2. The absence of any ARIA property (aria-label, aria-describedby, aria-labelledby…) meant to label the image on the svg tag or one of its descendants;
3. That there is no title or desc tags in the body of the svg tags; or that they are empty, if present;
4. The absence of a title attribute on the svg tag or one of its descendants.
If true, the test is passed.

Test 1.2.5

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type "canvas".
Spot the canvas tags, with no caption, used to insert a decorative image.
Right-click on the element and choose "Inspect Element".
Check:
- The presence of the ARIA property aria-hidden="true" on the canvas tag;
- The absence of text content between the <canvas> and </canvas> tags;
- The absence of any ARIA property (aria-label, aria-describedby, aria-labelledby…) meant to label the image on the canvas tag or one of its descendants.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "canvas".
Spot the canvas tags, with no caption, used to insert a decorative image.
Right-click on the element and choose "Inspect Element".
Check:
- The presence of the ARIA property aria-hidden="true" on the canvas tag;
- The absence of text content between the <canvas> and </canvas> tags;
- The absence of any ARIA property (aria-label, aria-describedby, aria-labelledby…) meant to label the image on the canvas tag or one of its descendants.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles"
Right-click on the page and choose "Inspect".
In the search field, type "canvas".
Spot the canvas tags, with no caption, used to insert a decorative image, and check:
- The presence of the ARIA property aria-hidden="true" on the canvas tag;
- The absence of text content between the <canvas> and </canvas> tags;
- The absence of any ARIA property (aria-label, aria-describedby, aria-labelledby…) meant to label the image on the canvas tag or one of its descendants.
If true, the test is passed.

Test 1.2.6

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type embed.
Spot the embed tags with the type="image/…" attribute, with no caption, used to insert a decorative image.
Right-click on the element and choose "Inspect Element".
Check:
- The presence of the ARIA property aria-hidden="true" on the embed tag;
- The absence of any ARIA property (aria-label, aria-describedby, aria-labelledby…) meant to label the image on the embed tag or one of its descendants.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "embed".
Spot the embed tags with the type="image/…" attribute, with no caption, used to insert a decorative image.
Right-click on the element and choose "Inspect Element".
Check:
- The presence of the ARIA property aria-hidden="true" on the embed tag;
- The absence of any ARIA property (aria-label, aria-describedby, aria-labelledby…) meant to label the image on the embed tag or one of its descendants.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Right-click on the page and choose "Inspect".
In the search field, type "embed".
Spot the embed tags with the type="image/…" attribute, with no caption, used to insert a decorative image and check:
- The presence of the ARIA property aria-hidden="true" on the embed tag;
- The absence of any ARIA property (aria-label, aria-describedby, aria-labelledby…) meant to label the image on the embed tag or one of its descendants.
If true, the test is passed.

Technical note about the presentation role

Criterion 1.3 [A] For each image conveying information with a text alternative, is this alternative relevant (except in particular cases)?

Tests 1.3.1, 1.3.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Images" menu, choose "Show images" and "Active images".
In the "Doc Info." menu, choose "Show titles".
In the "Structure" menu, choose "Show other element(s)", type "a".
For each image that is not a link (not outlined), or button associated to an image (input type="image") with an alt attribute, conveying information, check:
1. That the alt attribute is relevant;
2. That the title attribute, if present, is identical to the alt attribute;
3. That the aria-label attribute, if present, is identical to the alt attribute;
4. That the chunk of text linked via the aria-labelledby property, if present, is identical to the alt attribute.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Images" menu, choose "Display Alt Attributes".
In the "Information" menu, choose "Display Title Attributes".
In the "Outline" menu, choose "Outline Custom Elements…", and type "a".
For each image that is not a link (not outlined), or button associated to an image (input type="image") with an alt attribute, conveying information, check:
1. That the alt attribute is relevant;
2. That the title attribute, if present, is identical to the alt attribute;
3. That the aria-label attribute, if present, is identical to the alt attribute;
4. That the chunk of text linked via the aria-labelledby property, if present, is identical to the alt attribute.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Images" menu, choose "Display Alt Attributes".
In the "Information" menu, choose "Display Title Attributes".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type img,input{border:2px solid red}.
For each image that is not a link (not outlined), or button associated to an image (input type="image") with an alt attribute, conveying information, check:
1. That the alt attribute is relevant;
2. That the title attribute, if present, is identical to the alt attribute;
3. That the aria-label attribute, if present, is identical to the alt attribute;
4. That the chunk of text linked via the aria-labelledby property, if present, is identical to the alt attribute.
If true, the test is passed.

Test 1.3.2

With the WAT

In the "Images" menu, choose "Show image maps new window".
A new window opens and displays a list of all the image maps in the page.
For each clickable area conveying information, area tag with a href attribute, check:
1. That the alt attribute is relevant;
2. That the title attribute, if present, is identical to the alt attribute;
3. That the aria-label attribute, if present, is identical to the alt attribute;
4. That the chunk of text linked via the aria-labelledby property, if present, is identical to the alt attribute.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "map".
Spot the image-maps in the page, right-click on them and choose "Inspect Element".
For each clickable area conveying information, area tag with a href attribute, check:
1. That the alt attribute is relevant;
2. That the title attribute, if present, is identical to the alt attribute;
3. That the aria-label attribute, if present, is identical to the alt attribute;
4. That the chunk of text linked via the aria-labelledby property, if present, is identical to the alt attribute.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Right-click on the page and choose "Inspect".
In the search field, type "area".
Spot the clickable areas, area tag with a href attribute, conveying information
Check:
1. That the alt attribute is relevant;
2. That the title attribute, if present, is identical to the alt attribute;
3. That the aria-label attribute, if present, is identical to the alt attribute;
4. That the chunk of text linked via the aria-labelledby property, if present, is identical to the alt attribute.
If true, the test is passed.

Test 1.3.4, 1.3.5

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type "object".
Spot the object tags used to insert an image conveying information
Right click on the element just before or just after the object tag spotted, and choose "Inspect Element", find the object tag in the code.
If the tag has a type="image" attribute, check:
- That the object tag is immediately followed by an adjacent link giving access to a page or a chunk of text with a relevant text alternative;
- Or that a mechanism allows the user to replace the image object with a relevant text alternative, or an image with a relevant alternative.
- If the tag has a title attribute, check:
  - That the aria-label attribute, if present, is identical to the title attribute;
  - That the chunk of text linked via the aria-labelledby property, if present, is identical to the title attribute.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "object".
Spot the object tags used to insert an image conveying information
Right click on the element just before or just after the object tag spotted, and choose "Inspect Element", find the object tag in the code.
If the tag has a type="image" attribute, check:
- That the object tag is immediately followed by an adjacent link giving access to a page or a chunk of text with a relevant text alternative;
- Or that a mechanism allows the user to replace the image object with a relevant text alternative, or an image with a relevant alternative.
- If the tag has a title attribute, check:
  - That the aria-label attribute, if present, is identical to the title attribute;
  - That the chunk of text linked via the aria-labelledby property, if present, is identical to the title attribute.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Right-click on the page and choose "Inspect".
In the search field, type "object".
Spot the object tags used to insert an image conveying information
If the tag has a type="image" attribute, check:
- That the object tag is immediately followed by an adjacent link giving access to a page or a chunk of text with a relevant text alternative;
- Or that a mechanism allows the user to replace the image object with a relevant text alternative, or an image with a relevant alternative.
- If the tag has a title attribute, check:
  - That the aria-label attribute, if present, is identical to the title attribute;
  - That the chunk of text linked via the aria-labelledby property, if present, is identical to the title attribute.
If true, the test is passed.

Tests 1.3.6, 1.3.7

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type "embed".
Spot the embed tags used to insert an image conveying information
Right click on the element just before or just after the embed tag spotted, and choose "Inspect Element", find the embed tag in the code.
If the tag has a type="image" attribute, check:
- That the embed tag is immediately followed by an adjacent link giving access to a page or a chunk of text with a relevant text alternative;
- Or that a mechanism allows the user to replace the image object with a relevant text alternative, or an image with a relevant alternative.
- If the tag has a title attribute, check:
  - That the aria-label attribute, if present, is identical to the title attribute;
  - That the chunk of text linked via the aria-labelledby property, if present, is identical to the title attribute.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "embed".
Spot the object tags used to insert an image conveying information
Right-click on the element just before or just after the embed tag spotted, and choose "Inspect Element", find the embed tag in the code.
If the tag has a type="image" attribute, check:
- That the embed tag is immediately followed by an adjacent link giving access to a page or a chunk of text with a relevant text alternative;
- Or that a mechanism allows the user to replace the image object with a relevant text alternative, or an image with a relevant alternative.
- If the tag has a title attribute, check:
  - That the aria-label attribute, if present, is identical to the title attribute;
  - That the chunk of text linked via the aria-labelledby property, if present, is identical to the title attribute.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Right-click on the page and choose "Inspect".
In the search field, type "embed".
Spot the embed tags used to insert an image conveying information
If the tag has a type="image" attribute, check:
- That the embed tag is immediately followed by an adjacent link giving access to a page or a chunk of text with a relevant text alternative;
- Or that a mechanism allows the user to replace the image object with a relevant text alternative, or an image with a relevant alternative.
- If the tag has a title attribute, check:
  - That the aria-label attribute, if present, is identical to the title attribute;
  - That the chunk of text linked via the aria-labelledby property, if present, is identical to the title attribute.
If true, the test is passed.

Test 1.3.8

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type "svg".
Spot the svg tags used to insert an image conveying information
Right-click on the element and choose "Inspect Element".
Check:
- The presence of the ARIA property role="img" on the svg tag and:
  1. The presence of an aria-label property, identical to the title attribute if present, whose content allows to understand the nature and function of the image;
  2. The presence of a desc tag, identical to the title attribute if present, whose content allows to understand the nature and function of the image.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "svg".
Spot the svg tags used to insert an image conveying information
Right-click on the element and choose "Inspect Element".
Check:
- The presence of the ARIA property role="img" on the svg tag and:
  1. The presence of an aria-label property, identical to the title attribute if present, whose content allows to understand the nature and function of the image;
  2. The presence of a desc tag, identical to the title attribute if present, whose content allows to understand the nature and function of the image.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Right-click on the page and choose "Inspect".
In the search field, type "svg".
Spot the svg tags used to insert an image conveying information
Right-click on the element and choose "Inspect Element".
Check:
- The presence of the ARIA property role="img" on the svg tag and:
  1. The presence of an aria-label property, identical to the title attribute if present, whose content allows to understand the nature and function of the image;
  2. The presence of a desc tag, identical to the title attribute if present, whose content allows to understand the nature and purpose of the image.
If true, the test is passed.

Test 1.3.9

With the WAT

In the "Structure" menu, choose "Show other element(s)", type "svg".
Spot the svg tags used to insert an image conveying information
With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

With the WebDev (Firefox)

In the "Outline" menu, choose "Outline Custom Elements…", and type "svg".
Spot the svg tags used to insert an image conveying information
With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type svg{border:2px solid red}.
Spot the svg tags used to insert an image conveying information
With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

Tests 1.3.10, 1.3.11

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type "canvas".
Spot the canvas tags used to insert an image conveying information
Right-click on the element and choose "Inspect Element".
Check:
- That the alternative text in the body of the canvas tag is relevant;
- Or that the canvas tag is immediately followed by an adjacent link giving access to a page or a chunk of text with a relevant text alternative;
- Or that a mechanism allows the user to replace the image with a relevant text alternative, or an image with a relevant alternative.
If the tag has a title attribute, check:
- That the aria-label attribute, if present, is identical to the title attribute;
- That the chunk of text linked via the aria-labelledby property, if present, is identical to the title attribute.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "canvas".
Spot the canvas tags used to insert an image conveying information
Right-click on the element and choose "Inspect Element".
Check:
- That the alternative text in the body of the canvas tag is relevant;
- Or that the canvas tag is immediately followed by an adjacent link giving access to a page or a chunk of text with a relevant text alternative;
- Or that a mechanism allows the user to replace the image with a relevant text alternative, or an image with a relevant alternative.
If the tag has a title attribute, check:
- That the aria-label attribute, if present, is identical to the title attribute;
- That the chunk of text linked via the aria-labelledby property, if present, is identical to the title attribute.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable all styles" ".
Right-click on the page and choose "Inspect".
In the search field, type "canvas".
Spot the canvas tags used to insert an image conveying information
Right-click on the element and choose "Inspect Element".
Check:
- That the alternative text in the body of the canvas tag is relevant;
- Or that the canvas tag is immediately followed by an adjacent link giving access to a page or a chunk of text with a relevant text alternative;
- Or that a mechanism allows the user to replace the image with a relevant text alternative, or an image with a relevant alternative.
If the tag has a title attribute, check:
- That the aria-label attribute, if present, is identical to the title attribute;
- That the chunk of text linked via the aria-labelledby property, if present, is identical to the title attribute.
If true, the test is passed.

Test 1.3.12

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type "canvas".
Spot the canvas tags used to insert an image conveying information
With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "canvas".
Spot the canvas tags used to insert an image conveying information
With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type canvas{border:2px solid red}.
Spot the canvas tags used to insert an image conveying information
With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

Test 1.3.13

For all

Check that the alternatives detected with the previous tests are short and concise.
If true, the test is passed.

Technical note about the title attribute for images - Technical note about the <title> tag in vector images.

Criterion 1.4 [A] For each image used as a CAPTCHA or as a test image, with a text alternative, does this alternative describe the nature and the purpose of the image?

Tests 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.4.5, 1.4.6, 1.4.7, 1.4.8

With the WAT

In the "CSS" menu, choose "Disable CSS".
Spot the images used as a captcha.
Right-click on the element and choose "Inspect Element".
- If the element is an image (img tag) or a button associated to an image (input type="image") with an alt attribute, check:
  1. That the alt attribute allows to understand the nature and purpose of the image;
  2. That the title attribute, if present, is identical to the alt attribute;
  3. That the aria-label attribute, if present, is identical to the alt attribute;
  4. That the chunk of text linked via the aria-labelledby property, if present, is identical to the alt attribute.
- If the element is an image map (map tag), for each clickable area used as a captcha, area tag with an href attribute, check:
  1. That the alt attribute allows to understand the nature and purpose of the image;
  2. That the title attribute, if present, is identical to the alt attribute;
  3. That the aria-label attribute, if present, is identical to the alt attribute;
  4. That the chunk of text linked via the aria-labelledby property, if present, is identical to the alt attribute.
- If the element is an object tag or an embed tag, with a type="image" attribute, check:
  1. That the tag is immediately followed by an adjacent link giving access to a page or a chunk of text where an alternative allows to understand the nature and purpose of the image;
  2. Or that a mechanismallows the user to replace the image object or the embedded image by an alternative text, or by an image with an alternative text that allows to understand the nature and purpose of the image.
  3. If the element has a title attribute, check:
    - That the aria-label attribute, if present, is identical to the title attribute;
    - That the chunk of text linked via the aria-labelledby property, if present, is identical to the title attribute.
- If the element is an svg tag, check:
  1. The presence of the role="img" property on the svg tag;
  2. The presence of an aria-label property, whose content allows to understand the nature and purpose of the image, that is identical to the title attribute if present;
  3. The presence of a desc tag, whose content allows to understand the nature and purpose of the image, that is identical to the title attribute if present.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
Spot the images used as a captcha.
Right-click on the element and choose "Inspect Element".
- If the element is an image (img tag) or a button associated to an image (input type="image") with an alt attribute, check:
  1. That the alt attribute allows to understand the nature and purpose of the image;
  2. That the title attribute, if present, is identical to the alt attribute;
  3. That the aria-label attribute, if present, is identical to the alt attribute;
  4. That the chunk of text linked via the aria-labelledby property, if present, is identical to the alt attribute.
- If the element is an image map (map tag), for each clickable area used as a captcha, area tag with an href attribute, check:
  1. That the alt attribute allows to understand the nature and purpose of the image;
  2. That the title attribute, if present, is identical to the alt attribute;
  3. That the aria-label attribute, if present, is identical to the alt attribute;
  4. That the chunk of text linked via the aria-labelledby property, if present, is identical to the alt attribute.
- If the element is an object tag or an embed tag, with a type="image" attribute, check:
  1. That the tag is immediately followed by an adjacent link giving access to a page or a chunk of text where an alternative allows to understand the nature and purpose of the image;
  2. Or that a mechanismallows the user to replace the image object or the embedded image by an alternative text, or by an image with an alternative text that allows to understand the nature and purpose of the image.
  3. If the element has a title attribute, check:
    - That the aria-label attribute, if present, is identical to the title attribute;
    - That the chunk of text linked via the aria-labelledby property, if present, is identical to the title attribute.
- If the element is an svg tag, check:
  1. The presence of the role="img" property on the svg tag;
  2. The presence of an aria-label property, whose content allows to understand the nature and purpose of the image, that is identical to the title attribute if present;
  3. The presence of a desc tag, whose content allows to understand the nature and purpose of the image, that is identical to the title attribute if present.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Spot the images used as a captcha.
Right-click on the element and choose "Inspect".
- If the element is an image (img tag) or a button associated to an image (input type="image") with an alt attribute, check:
  1. That the alt attribute allows to understand the nature and purpose of the image;
  2. That the title attribute, if present, is identical to the alt attribute;
  3. That the aria-label attribute, if present, is identical to the alt attribute;
  4. That the chunk of text linked via the aria-labelledby property, if present, is identical to the alt attribute.
- If the element is an image map (map tag), for each clickable area used as a captcha, area tag with an href attribute, check:
  1. That the alt attribute allows to understand the nature and purpose of the image;
  2. That the title attribute, if present, is identical to the alt attribute;
  3. That the aria-label attribute, if present, is identical to the alt attribute;
  4. That the chunk of text linked via the aria-labelledby property, if present, is identical to the alt attribute.
- If the element is an object tag or an embed tag, with a type="image" attribute, check:
  1. That the tag is immediately followed by an adjacent link giving access to a page or a chunk of text where an alternative allows to understand the nature and purpose of the image;
  2. Or that a mechanismallows the user to replace the image object or the embedded image by an alternative text, or by an image with an alternative text that allows to understand the nature and purpose of the image.
  3. If the element has a title attribute, check:
    - That the aria-label attribute, if present, is identical to the title attribute;
    - That the chunk of text linked via the aria-labelledby property, if present, is identical to the title attribute.
- If the element is an svg tag, check:
  1. The presence of the role="img" property on the svg tag;
  2. The presence of an aria-label property, whose content allows to understand the nature and purpose of the image, that is identical to the title attribute if present;
  3. The presence of a desc tag, whose content allows to understand the nature and purpose of the image, that is identical to the title attribute if present.
If true, the test is passed.

Test 1.4.9

With the WAT

In the "Structure" menu, choose "Show other element(s)", type svg.
Spot the images used as a captcha.
With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

With the WebDev (Firefox)

In the "Outline" menu, choose "Outline Custom Elements…", and type svg.
Spot the images used as a captcha.
With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type svg{border:2px solid red}.
Spot the images used as a captcha.
With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

Test 1.4.10

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type canvas.
Spot the canvas tags used as a captcha.
Right-click on the element and choose "Inspect Element" and check :
- That the alternative present in the body of the canvas tag allows to understand the nature and purpose of the image;
- Or that the canvas tag is immediately followed by an adjacent link giving access to a page or a chunk of text where an alternative allows to understand the nature and purpose of the image;
- Or that a mechanismallows the user to replace the image in the canvas tag by an alternative text that allows to understand the nature and purpose of the image.
- Or that a mechanismallows the user to replace the image in the canvas tag by an image with an alternative text, that allows to understand the nature and purpose of the image.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type canvas.
Spot the canvas tags used as a captcha.
Right-click on the element and choose "Inspect Element" and check :
- That the alternative present in the body of the canvas tag allows to understand the nature and purpose of the image;
- Or that the canvas tag is immediately followed by an adjacent link giving access to a page or a chunk of text where an alternative allows to understand the nature and purpose of the image;
- Or that a mechanismallows the user to replace the image in the canvas tag by an alternative text that allows to understand the nature and purpose of the image.
- Or that a mechanismallows the user to replace the image in the canvas tag by an image with an alternative text, that allows to understand the nature and purpose of the image.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles"
Right-click on the element and choose "Inspect"
In the search field, type canvas.
Spot the canvas tags used as a captcha.
For each of them, check :
- That the alternative present in the body of the canvas tag allows to understand the nature and purpose of the image;
- Or that the canvas tag is immediately followed by an adjacent link giving access to a page or a chunk of text where an alternative allows to understand the nature and purpose of the image;
- Or that a mechanismallows the user to replace the image in the canvas tag by an alternative text that allows to understand the nature and purpose of the image.
- Or that a mechanismallows the user to replace the image in the canvas tag by an image with an alternative text, that allows to understand the nature and purpose of the image.
If true, the test is passed.

Test 1.4.11

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type canvas.
Spot the canvas tags used as a captcha.
If the tag has an aria-label attribute, check that the content of the title attribute is identical to the content of the aria-label attribute
If the tag has an aria-labelledby attribute, check that the content of the title attribute is identical to the content of the aria-labelledby attribute
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type canvas.
Spot the canvas tags used as a captcha.
If the tag has an aria-label attribute, check that the content of the title attribute is identical to the content of the aria-label attribute
If the tag has an aria-labelledby attribute, check that the content of the title attribute is identical to the content of the aria-labelledby attribute
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Right-click on the page and choose "Inspect"
In the search field, type canvas.
Spot the canvas tags used as a captcha.
If the tag has an aria-label attribute, check that the content of the title attribute is identical to the content of the aria-label attribute.
If the tag has an aria-labelledby attribute, check that the content of the title attribute is identical to the content of the aria-labelledby attribute.
If true, the test is passed.

Test 1.4.12

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type canvas.
Spot the canvas tags used as a captcha.
With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type canvas.
Spot the canvas tags used as a captcha.
With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type canvas{border:2px solid red}.
Spot the canvas tags used as a captcha.
With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

Criterion 1.5 [A] For each image used as CAPTCHA, is a solution for alternative access to the content or to the purpose of the CAPTCHA available?

Tests 1.5.1, 1.5.2

For all

For each image (img, area, object, embed, svg, canvas tags) or button associated to an image (type="image") used as a captcha, check:
- The presence of a non-graphic alternative to the captcha;
- Or the presence of an alternative means of access to the functionality secured by the captcha.
If true, the test is passed.

Criterion 1.6 [A] Does each image conveying information have a detailed description if necessary?

Tests 1.6.1, 1.6.2, 1.6.3, 1.6.4, 1.6.5, 1.6.6, 1.6.8

With the WAT

In the "CSS" menu, choose "Disable CSS".
Spot the images that need a detailed description.
Right-click on the element and choose "Inspect Element".
- If the image is inserted with an img tag, check:
  - The presence of a longdesc attribute containing the address (URL) of a page containing the detailed description;
  - Or that the alt attribute contains a reference to a detailed description next to the image;
  - Or that there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
- If the image is a button associated to an image (input type="image"), check:
  - That the alt attribute contains a reference to a detailed description next to the image;
  - Or the presence of an aria-describedby property referencing a chunk of text serving as a detailed description (select the field and the chunk of text, in the "Doc Info." menu, choose "View partial source" and check that the id attribute of the chunk of text is unique matches the aria-describedby property of the image);
  - Or that there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
- If the image is an object or embed tag, having the type="image" attribute, check:
  - That there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
  - Or that there is a detailed description clearly identifiable next to the image object.
- If the image is a vector image (svg tag), check:
  - The presence of an aria-label property containing a reference to a detailed description next to the vector image;
  - Or the presence of a desc tag containing a reference to a detailed description next to the vector image;
  - Or the presence of a desc tag containing a detailed description;
  - Or that there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
- If the image is a bitmap image (canvas tag), check:
  - The presence of a chunk of text, in the body of the canvas tag containing a reference to a detailed description next to the bitmap image;
  - Or that there is text content, in the body of the canvas tag, serving as a detailed description;
  - Or that there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles", then "Disable All Styles".
Spot the images that need a detailed description.
Right-click on the element and choose "Inspect Element":
- If the image is inserted with an img tag, check:
  - The presence of a longdesc attribute containing the address (URL) of a page containing the detailed description;
  - Or that the alt attribute contains a reference to a detailed description next to the image;
  - Or that there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
- If the image is a button associated to an image (input type="image"), check:
  - That the alt attribute contains a reference to a detailed description next to the image;
  - Or the presence of an aria-describedby property referencing a chunk of text serving as a detailed description (select the field and the chunk of text, in the "Doc Info." menu, choose "View partial source" and check that the id attribute of the chunk of text is unique and matches the aria-describedby property of the image);
  - Or that there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
- If the image is an object or embed tag, having the type="image" attribute, check:
  - That there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
  - Or that there is a detailed description clearly identifiable next to the image object.
- If the image is a vector image (svg tag), check:
  - The presence of an aria-label property containing a reference to a detailed description next to the vector image;
  - Or the presence of a desc tag containing a reference to a detailed description next to the vector image;
  - Or the presence of a desc tag containing a detailed description;
  - Or that there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
- If the image is a bitmap image (canvas tag), check:
  - The presence of a chunk of text, in the body of the canvas tag containing a reference to a detailed description next to the bitmap image;
  - Or that there is text content, in the body of the canvas tag, serving as a detailed description;
  - Or that there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Spot the images that need a detailed description.
Right-click on the element and choose "Inspect":
- If the image is inserted with an img tag, check:
  - The presence of a longdesc attribute containing the address (URL) of a page containing the detailed description;
  - Or that the alt attribute contains a reference to a detailed description next to the image;
  - Or that there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
- If the image is a button associated to an image (input type="image"), check:
  - That the alt attribute contains a reference to a detailed description next to the image;
  - Or the presence of an aria-describedby property referencing a chunk of text serving as a detailed description (select the field and the chunk of text, in the "Doc Info." menu, choose "View partial source" and check that the id attribute of the chunk of text is unique, and matches the aria-describedby property of the image);
  - Or that there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
- If the image is an object or embed tag, having the type="image" attribute, check:
  - That there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
  - Or that there is a detailed description clearly identifiable next to the image object.
- If the image is a vector image (svg tag), check:
  - The presence of an aria-label property containing a reference to a detailed description next to the vector image;
  - Or the presence of a desc tag containing a reference to a detailed description next to the vector image;
  - Or the presence of a desc tag containing a detailed description;
  - Or that there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
- If the image is a bitmap image (canvas tag), check:
  - The presence of a chunk of text, in the body of the canvas tag containing a reference to a detailed description next to the bitmap image;
  - Or that there is text content, in the body of the canvas tag, serving as a detailed description;
  - Or that there is an adjacent link (via a URL or an anchor) giving access to the content of the detailed description.
If true, the test is passed.

Test 1.6.7

With the WAT

In the "Structure" menu, choose "Show other element(s)", type svg.
Spot the svg tags that provide a reference to an adjacent detailed description via an aria-label property or a desc tag.
With each screen reader of the chosen reference baseline, navigate to the image and check that the reference to an adjacent detailed description is correctly rendered.
If true, the test is passed.

With the WebDev (Firefox)

In the "Outline" menu, choose "Outline Custom Elements…", and type svg.
Spot the svg tags that provide a reference to an adjacent detailed description via an aria-label property or a desc tag.
With each screen reader of the chosen reference baseline, navigate to the image and check that the reference to an adjacent detailed description is correctly rendered.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type svg{border:2px solid red}.
Spot the svg tags that provide a reference to an adjacent detailed description via an aria-label property or a desc tag.
With each screen reader of the chosen reference baseline, navigate to the image and check that the reference to an adjacent detailed description is correctly rendered.
If true, the test is passed.

Test 1.6.9

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type canvas.
Spot the canvas tags that provide a reference to an adjacent detailed description.
With each screen reader of the chosen reference baseline, navigate to the image and check that the reference to an adjacent detailed description is correctly rendered.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type canvas.
Spot the canvas tags that provide a reference to an adjacent detailed description.
With each screen reader of the chosen reference baseline, navigate to the image and check that the reference to an adjacent detailed description is correctly rendered.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type canvas{border:2px solid red}.
Spot the canvas tags that provide a reference to an adjacent detailed description.
With each screen reader of the chosen reference baseline, navigate to the image and check that the reference to an adjacent detailed description is correctly rendered.
If true, the test is passed.

Technical note about the vector images and the use of the aria-describedby property.

Criterion 1.7 [A] For each image conveying information with a detailed description, is this description relevant?

Tests 1.7.1, 1.7.2, 1.7.3, 1.7.4, 1.7.5, 1.7.7

With the WAT

In the "CSS" menu, choose "Disable CSS".
Spot the images that need a detailed description.
Right-click on the element and choose "Inspect Element":
- If the image is inserted with an img tag, check:
  - That the detailed description provided via the address referenced in the longdesc attribute is relevant;
  - Or that the detailed description in the page and mentioned in the alt attribute is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
- If the image is a button associated to an image (input type="image"), check:
  - That the detailed description provided via the address referenced in the longdesc attribute is relevant;
  - Or that the detailed description in the page and mentioned in the alt attribute is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
- If the image is an object or embed tag, having the type="image" attribute, check:
  - That the detailed description next to the image object is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant;
  - Or that the detailed description referenced by the aria-describedby attribute is relevant.
- If the image is a vector image (svg tag), check:
  - That the detailed description next to the vector image is relevant;
  - Or that the detailed description contained in the desc tag is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
- If the image is a bitmap image (canvas tag), check:
  - That the detailed description next to the image is relevant;
  - Or that the detailed description contained in the body of the canvas tag is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
Spot the images that need a detailed description.
Right-click on the element and choose "Inspect Element":
- If the image is inserted with an img tag, check:
  - That the detailed description provided via the address referenced in the longdesc attribute is relevant;
  - Or that the detailed description in the page and mentioned in the alt attribute is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
- If the image is a button associated to an image (input type="image"), check:
  - That the detailed description provided via the address referenced in the longdesc attribute is relevant;
  - Or that the detailed description in the page and mentioned in the alt attribute is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
- If the image is an object tag or embed, having the type="image" attribute, check:
  - That the detailed description next to the image object is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant;
  - Or that the detailed description referenced by the aria-describedby attribute is relevant.
- If the image is an object tag or embed, having the type="image" attribute, check:
  - That the detailed description next to the image object is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
- If the image is a vector image (svg tag), check:
  - That the detailed description next to the vector image is relevant;
  - Or that the detailed description contained in the desc tag is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
- If the image is a bitmap image (canvas tag), check:
  - That the detailed description next to the image is relevant;
  - Or that the detailed description contained in the body of the canvas tag is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Spot the images that need a detailed description.
Right-click on the element and choose "Inspect":
- If the image is inserted with an img tag, check:
  - That the detailed description provided via the address referenced in the longdesc attribute is relevant;
  - Or that the detailed description in the page and mentioned in the alt attribute is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
- If the image is a button associated to an image (input type="image"), check:
  - That the detailed description provided via the address referenced in the longdesc attribute is relevant;
  - Or that the detailed description in the page and mentioned in the alt attribute is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
- If the image is an object tag or embed, having the type="image" attribute, check:
  - That the detailed description next to the image object is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant;
  - Or that the detailed description referenced by the aria-describedby attribute is relevant.
- If the image is an object tag or embed, having the type="image" attribute, check:
  - That the detailed description next to the image object is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
- If the image is a vector image (svg tag), check:
  - That the detailed description next to the vector image is relevant;
  - Or that the detailed description contained in the desc tag is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
- If the image is a bitmap image (canvas tag), check:
  - That the detailed description next to the image is relevant;
  - Or that the detailed description contained in the body of the canvas tag is relevant;
  - Or that the detailed description accessed via an adjacent link is relevant.
If true, the test is passed.

Tests 1.7.6, 1.7.8

With the WAT

In the "CSS" menu, choose "Disable CSS".
Spot the images that have a detailed description (see the method described above on the presence of the detailed descriptions).
Right-click on the element and choose "Inspect Element".
If the image is a vector image (svg tag) or a bitmap image (canvas tag), With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
Spot the images that have a detailed description (see the method described above on the presence of the detailed descriptions).
Right-click on the element and choose "Inspect Element".
If the image is a vector image (svg tag) or a bitmap image (canvas tag), With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Spot the images that have a detailed description (see the method described above on the presence of the detailed descriptions).
Right-click on the element and choose "Inspect".
If the image is a vector image (svg tag) or a bitmap image (canvas tag), With each screen reader of the chosen reference baseline, navigate to the image and check that the alternative is correctly rendered.
If true, the test is passed.

Criterion 1.8 [AA] When an alternate mechanism is missing, each image of text conveying information must be replaced with styled text, if possible. Has this rule been followed (except in particular cases)?

Tests 1.8.1, 1.8.2, 1.8.3, 1.8.4, 1.8.5

For all

For all images of text (img, input type="image", img or object with the usemap attribute, object type="image", embed type="image", canvas) check:
- That there is an alternate mechanism;
- Or that the image contains a text with graphic effects that cannot be done with CSS.
If true, the test is passed.

Technical note about vector images of type text.

Criterion 1.9 [AAA] Each image of text conveying information must be replaced with styled text. Has this rule been followed (except in particular cases)?

Tests 1.9.1, 1.9.2, 1.9.3, 1.9.4, 1.9.5

For all

For all images of text (img, input type="image", img or object with the usemap attribute, object type="image", embed type="image", canvas) check:
- That the image contains a text with graphic effects that cannot be done with CSS.
If true, the test is passed.

Technical note about vector images of type text.

Criterion 1.10 [A] Is each image caption correctly associated with the corresponding image, if necessary?

Tests 1.10.1, 1.10.2, 1.10.3, 1.10.4, 1.10.5

For all

For each image associated with an adjacent text serving as a caption.
If the associated text:
- Contains information about the image (for example a copyright, a date, an author…);
- Or aims at completing the information conveyed by the image (for example a text associated with an image in an image gallery).
Right-click on the element and choose "Inspect Element":
- If the element containing the image is an img tag, a input type="image" field, or an embed type="image" element, check:
  1. That the image and its caption are contained in a figure tag;
  2. That the figure tag has a role="group" ARIA property;
  3. That the content of the alt attribute contains a reference to the adjacent caption (i.e. text that can also be found in the caption, and that can be a generic term like photo, schema, figure, example…);
- If the element containing the image is an object tag, check:
  1. That the image and its caption are contained in a figure tag;
  2. That the figure tag has a role="group" ARIA property;
- If the element is a vector image (svg tag) check:
  1. That the image and its caption are contained in a figure tag;
  2. That the figure tag has a role="group" ARIA property;
  3. That the content of the alt attribute contains a reference to the adjacent caption (i.e. text that can also be found in the caption, and that can be a generic term like photo, schema, figure, example…);
- If the element is an embedded image (embed tag), check:
  1. That the image and its caption are contained in a figure tag;
  2. That the figure tag has a role="group" ARIA property;
  3. That the alternative contains a reference to the adjacent caption.
- If the element is a bitmap image, canvas tag, check:
  1. That the image and its caption are contained in a figure tag;
  2. That the figure tag has a role="group" ARIA property;
  3. That the content of the canvas tag contains a reference to the adjacent caption.
If true, the test is passed.

Technical note about captioned images.

Frames

Criterion 2.1 [A] Does each inline frame have a frame title?

Test 2.1.1

With the WAT

In the "Frames" menu, choose "Frames name/title".
In the displayed page, check that each inline frame (iframe tag) has a title attribute.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Information" menu, choose "Display Title Attributes".
In the "Outline" menu, choose "Outline Custom Elements…", and type "iframe".
Check that each inline frame (iframe tag) has a title attribute.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Information" menu, choose "Display Title Attributes".
In the "Outline" menu, choose "Outline frames".
Check that each inline frame (iframe tag) has a title attribute.
If true, the test is passed.

Criterion 2.2 [A] For each inline frame with a frame title, is this frame title relevant?

Test 2.2.1

With the WAT

In the "Frames" menu, choose "Frames name/title".
In the displayed page, check that the title (title attribute) of each inline frame (iframe tag) is relevant.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Information" menu, choose "Display Title Attributes".
In the "Outline" menu, choose "Outline Custom Elements…", and type "iframe".
Check that the title (title attribute) of each inline frame (iframe tag) is relevant.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable all styles".
In the "Information" menu, choose "Display Title Attributes".
In the "Outline" menu, choose "Outline frames".
Check that the title (title attribute) of each inline frame (iframe tag) is relevant.
If true, the test is passed.

Colors

Criterion 3.1 [A] On each Web page, information must not be conveyed through color only. Has this rule been followed?

Tests 3.1.1, 3.1.2, 3.1.3, 3.1.4, 3.1.5, 3.1.6

For all

In the page, spot the pieces of information conveyed by color in a text, an image, a time-based or non-time-based media.
For each of them, check that there is another means to retrieve this information (presence of a title attribute, an icon, a size or position-based graphic effect, a typographic effect…).
If true, the test is passed.

Criterion 3.2 [A] On each Web page, information must not be conveyed through color only. Has this rule been implemented in a relevant way?

Tests 3.2.1, 3.2.2, 3.2.3, 3.2.4, 3.2.5, 3.2.6

For all

In the page, spot the pieces of information conveyed by color in a text, an image, a time-based or non-time-based media.
For each piece of information conveyed by color in association with another means, check that this other means is relevant, i.e. it conveys information in every browsing context for all users.
If true, the test is passed.

Criterion 3.3 [AA] On each Web page, is the contrast between the text and background colors sufficient (except in particular cases)?

Definitions:

The default font size is the one defined by the author for the document, or, if undefined, the default font size defined by the user agent (i.e. the browser).
The normal font size is 150%, or less, of the default font size, for non-bold texts; and 120%, or less, of the default font size, for bold texts.
The larger font size is greater than 150% of the default font size, for non-bold texts; and greater than 120% of the default font size, for bold texts.

Tests 3.3.1, 3.3.2

With the WAT

In the "Color" menu, choose "Contrast Analyser".
In the page, spot the texts and embedded texts (images of texts and texts in CSS background images) of normal size that may cause contrast issues.
With the tool, pick the foreground and background colors.
Check that the contrast ratio is 4.5, at least.
Or else, check that there is a mechanism in the page that allows the user to display the text with a contrast ratio of 4.5, at least.
If true, the test is passed.

With the WebDev (Firefox)

In the "Tools" menu of the browser, choose "WCAG Contrast Checker".
In the page, spot the texts and embedded texts (images of texts and texts in CSS background images) of normal size that may cause contrast issues.
With the tool, pick the foreground and background colors.
Check that the contrast ratio is 4.5, at least.
Or else, check that there is a mechanism in the page that allows the user to display the text with a contrast ratio of 4.5, at least.
If true, the test is passed.

With the WebDev (Chrome)

Start the "Colour Contrast Analyser" application.
In the page, spot the texts and embedded texts (images of texts and texts in CSS background images) of normal size that may cause contrast issues.
With the tool, pick the foreground and background colors.
Check that the contrast ratio is 4.5, at least.
Or else, check that there is a mechanism in the page that allows the user to display the text with a contrast ratio of 4.5, at least.
If true, the test is passed.

Tests 3.3.3, 3.3.4

With the WAT

In the "Color" menu, choose "Contrast Analyser".
In the page, spot the texts and embedded texts (images of texts and texts in CSS background images) of larger size that may cause contrast issues.
With the tool, pick the foreground and background colors.
Check that the contrast ratio is 3, at least.
Or else, check that there is a mechanism in the page that allows the user to display the text with a contrast ratio of 3, at least.
If true, the test is passed.

With the WebDev (Firefox)

In the "Tools" menu of the browser, choose "WCAG Contrast Checker".
In the page, spot the texts and embedded texts (images of texts and texts in CSS background images) of larger size that may cause contrast issues.
With the tool, pick the foreground and background colors.
Check that the contrast ratio is 3, at least.
Or else, check that there is a mechanism in the page that allows the user to display the text with a contrast ratio of 3, at least.
If true, the test is passed.

With the WebDev (Chrome)

Start the "Colour Contrast Analyser" application.
In the page, spot the texts and embedded texts (images of texts and texts in CSS background images) of larger size that may cause contrast issues.
With the tool, pick the foreground and background colors.
Check that the contrast ratio is 3, at least.
Or else, check that there is a mechanism in the page that allows the user to display the text with a contrast ratio of 3, at least.
If true, the test is passed.

Criterion 3.4 [AAA] On each Web page, is the contrast between the text and background colors enhanced (except in particular cases)?

Definitions:

The default font size is the one defined by the author for the document, or, if undefined, the default font size defined by the user agent (i.e. the browser).
The normal font size is 150%, or less, of the default font size, for non-bold texts; and 120%, or less, of the default font size, for bold texts.
The larger font size is greater than 150% of the default font size, for non-bold texts; and greater than 120% of the default font size, for bold texts.

Tests 3.4.1, 3.4.2

With the WAT

In the "Color" menu, choose "Contrast Analyser".
In the page, spot the texts and embedded texts (images of texts and texts in CSS background images) of normal size that may cause contrast issues.
With the tool, pick the foreground and background colors.
Check that the contrast ratio is 7, at least.
Or else, check that there is a mechanism in the page that allows the user to display the text with a contrast ratio of 7, at least.
If true, the test is passed.

With the WebDev (Firefox)

In the "Tools" menu of the browser, choose "WCAG Contrast Checker".
In the page, spot the texts and embedded texts (images of texts and texts in CSS background images) of normal size that may cause contrast issues.
With the tool, pick the foreground and background colors.
Check that the contrast ratio is 7, at least.
Or else, check that there is a mechanism in the page that allows the user to display the text with a contrast ratio of 7, at least.
If true, the test is passed.

With the WebDev (Chrome)

Start the "Colour Contrast Analyser" application.
In the page, spot the texts and embedded texts (images of texts and texts in CSS background images) of normal size that may cause contrast issues.
With the tool, pick the foreground and background colors.
Check that the contrast ratio is 7, at least.
Or else, check that there is a mechanism in the page that allows the user to display the text with a contrast ratio of 7, at least.
If true, the test is passed.

Tests 3.4.3, 3.4.4

With the WAT

In the "Color" menu, choose "Contrast Analyser".
In the page, spot the texts and embedded texts (images of texts and texts in CSS background images) of larger size that may cause contrast issues.
With the tool, pick the foreground and background colors.
Check that the contrast ratio is 4.5, at least.
Or else, check that there is a mechanism in the page that allows the user to display the text with a contrast ratio of 4.5, at least.
If true, the test is passed.

With the WebDev (Firefox)

In the "Tools" menu of the browser, choose "WCAG Contrast Checker".
In the page, spot the texts and embedded texts (images of texts and texts in CSS background images) of larger size that may cause contrast issues.
With the tool, pick the foreground and background colors.
Check that the contrast ratio is 4.5, at least.
Or else, check that there is a mechanism in the page that allows the user to display the text with a contrast ratio of 4.5, at least.
If true, the test is passed.

With the WebDev (Chrome)

Start the "Colour Contrast Analyser" application.
In the page, spot the texts and embedded texts (images of texts and texts in CSS background images) of larger size that may cause contrast issues.
With the tool, pick the foreground and background colors.
Check that the contrast ratio is 4.5, at least.
Or else, check that there is a mechanism in the page that allows the user to display the text with a contrast ratio of 4.5, at least.
If true, the test is passed.

Multimedia

Criterion 4.1 [A] Does each prerecorded time-based media have a text transcript or an audio description if necessary (except in particular cases)?

Test 4.1.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the audio-only time-based media (audio or object tags) that need a text transcript.
For each of them, check:
- The presence of a text transcript accessible via an adjacent link (a URL or an anchor).
- Or the presence of an adjacent text transcript clearly identifiable.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the audio-only time-based media (audio or object tags) that need a text transcript.
For each of them, check:
- The presence of a text transcript accessible via an adjacent link (a URL or an anchor).
- Or the presence of an adjacent text transcript clearly identifiable.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the audio-only time-based media (audio or object tags) that need a text transcript.
For each of them, check:
- The presence of a text transcript accessible via an adjacent link (a URL or an anchor).
- Or the presence of an adjacent text transcript clearly identifiable.
If true, the test is passed.

Test 4.1.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the video-only time-based media (video or object tags) that need a text transcript.
For each of them, check:
- The presence of an alternative audio-only version accessible via an adjacent link (a URL or an anchor);
- The presence of a text transcript accessible via an adjacent link (a URL or an anchor);
- Or the presence of an adjacent text transcript clearly identifiable;
- Or the presence of a synchronized audio description;
- Or the presence of an alternative version with a synchronized audio description accessible via an adjacent link (a URL or an anchor).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the video-only time-based media (video or object tags) that need a text transcript.
For each of them, check:
- The presence of an alternative audio-only version accessible via an adjacent link (a URL or an anchor);
- The presence of a text transcript accessible via an adjacent link (a URL or an anchor);
- Or the presence of an adjacent text transcript clearly identifiable;
- Or the presence of a synchronized audio description;
- Or the presence of an alternative version with a synchronized audio description accessible via an adjacent link (a URL or an anchor).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the video-only time-based media (video or object tags) that need a text transcript.
For each of them, check:
- The presence of an alternative audio-only version accessible via an adjacent link (a URL or an anchor);
- The presence of a text transcript accessible via an adjacent link (a URL or an anchor);
- Or the presence of an adjacent text transcript clearly identifiable;
- Or the presence of a synchronized audio description;
- Or the presence of an alternative version with a synchronized audio description accessible via an adjacent link (a URL or an anchor).
If true, the test is passed.

Test 4.1.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the synchronized time-based media (video or object tags) that need a text transcript.
For each of them, check:
- The presence of a text transcript accessible via an adjacent link (a URL or an anchor);
- Or the presence of an adjacent text transcript clearly identifiable;
- Or the presence of a synchronized audio description;
- Or the presence of an alternative version with a synchronized audio description accessible via an adjacent link (a URL or an anchor).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the synchronized time-based media (video or object tags) that need a text transcript.
For each of them, check:
- The presence of a text transcript accessible via an adjacent link (a URL or an anchor);
- Or the presence of an adjacent text transcript clearly identifiable;
- Or the presence of a synchronized audio description;
- Or the presence of an alternative version with a synchronized audio description accessible via an adjacent link (a URL or an anchor).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the synchronized time-based media (video or object tags) that need a text transcript.
For each of them, check:
- The presence of a text transcript accessible via an adjacent link (a URL or an anchor);
- Or the presence of an adjacent text transcript clearly identifiable;
- Or the presence of a synchronized audio description;
- Or the presence of an alternative version with a synchronized audio description accessible via an adjacent link (a URL or an anchor).
If true, the test is passed.

Criterion 4.2 [A] For each prerecorded time-based media with a text transcript or a synchronized audio description, are these relevant (except in particular cases)?

Tests 4.2.1, 4.2.2, 4.2.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the text transcripts, the audio-only alternative versions, the synchronized audio descriptions, the alternative versions with a synchronized audio description.
Check:
- That the text transcript is relevant (all important audio and visual information are available, dialogs and embedded texts in particular);
- Or that alternative audio-only version is relevant (all important visual information are available, embedded texts in particular);
- Or that the synchronized audio description is relevant.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the text transcripts, the audio-only alternative versions, the synchronized audio descriptions, the alternative versions with a synchronized audio description.
Check:
- That the text transcript is relevant (all important audio and visual information are available, dialogs and embedded texts in particular);
- Or that alternative audio-only version is relevant (all important visual information are available, embedded texts in particular);
- Or that the synchronized audio description is relevant.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the text transcripts, the audio-only alternative versions, the synchronized audio descriptions, the alternative versions with a synchronized audio description.
Check:
- That the text transcript is relevant (all important audio and visual information are available, dialogs and embedded texts in particular);
- Or that alternative audio-only version is relevant (all important visual information are available, embedded texts in particular);
- Or that the synchronized audio description is relevant.
If true, the test is passed.

Criterion 4.3 [A] Does each prerecorded synchronized time-based media have synchronized captions if necessary (except in particular cases)?

Test 4.3.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the synchronized time-based media (see testing methodology for criterion 4.1).
Check:
- That there are synchronized captions;
- Or that there is an alternative version with synchronized captions accessible via an adjacent link (a URL or an anchor).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the synchronized time-based media (see testing methodology for criterion 4.1).
Check:
- That there are synchronized captions;
- Or that there is an alternative version with synchronized captions accessible via an adjacent link (a URL or an anchor).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the synchronized time-based media (see testing methodology for criterion 4.1).
Check:
- That there are synchronized captions;
- Or that there is an alternative version with synchronized captions accessible via an adjacent link (a URL or an anchor).
If true, the test is passed.

Test 4.3.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type video.
In the page, spot the synchronized time-based media with synchronized captions, right-click and choose "Inspect Element".
Check that the track tag has a type="caption" attribute.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type video.
In the page, spot the synchronized time-based media with synchronized captions, right-click and choose "Inspect Element".
Check that the track tag has a type="caption" attribute.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type video{border:2px solid red}.
In the page, spot the synchronized time-based media with synchronized captions, right-click and choose "Inspect Element".
Check that the track tag has a type="caption" attribute.
If true, the test is passed.

Criterion 4.4 [A] For each prerecorded synchronized time-based media with synchronized captions, are these captions relevant?

Test 4.4.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the synchronized time-based media with synchronized captions.
Check that the captions are:
1. Relevant (all important audio information are available, dialogs in particular);
2. Correctly synchronized.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the synchronized time-based media with synchronized captions.
Check that the captions are:
1. Relevant (all important audio information are available, dialogs in particular);
2. Correctly synchronized.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the synchronized time-based media with synchronized captions.
Check that the captions are:
1. Relevant (all important audio information are available, dialogs in particular);
2. Correctly synchronized.
If true, the test is passed.

Criterion 4.5 [AA] Does each live time-based media have synchronized captions or a text transcript if necessary (except in particular cases)?

Tests 4.5.1, 4.5.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the live time-based media, audio-only and synchronized, that require synchronized captions.
Check:
- That there are synchronized captions;
- Or that there is an alternative version with synchronized captions accessible via an adjacent link (a URL or an anchor);
- Or that there is a text transcript accessible via an adjacent link (a URL or an anchor);
- Or that there is an adjacent text transcript clearly identifiable.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the live time-based media, audio-only and synchronized, that require synchronized captions.
Check:
- That there are synchronized captions;
- Or that there is an alternative version with synchronized captions accessible via an adjacent link (a URL or an anchor);
- Or that there is a text transcript accessible via an adjacent link (a URL or an anchor);
- Or that there is an adjacent text transcript clearly identifiable.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the live time-based media, audio-only and synchronized, that require synchronized captions.
Check:
- That there are synchronized captions;
- Or that there is an alternative version with synchronized captions accessible via an adjacent link (a URL or an anchor);
- Or that there is a text transcript accessible via an adjacent link (a URL or an anchor);
- Or that there is an adjacent text transcript clearly identifiable.
If true, the test is passed.

Criterion 4.6 [AA] Are each synchronized captions or text transcript, provided for live time-based media, relevant?

Tests 4.6.1, 4.6.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the live time-based media, audio-only and synchronized, with synchronized captions.
Check:
- That the captions are relevant (all important audio information are available, dialogs in particular) and correctly synchronized;
- Or that the text transcript is relevant (all important audio and visual information are available, dialogs and embedded texts in particular).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the live time-based media, audio-only and synchronized, with synchronized captions.
Check:
- That the captions are relevant (all important audio information are available, dialogs in particular) and correctly synchronized;
- Or that the text transcript is relevant (all important audio and visual information are available, dialogs and embedded texts in particular).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the live time-based media, audio-only and synchronized, with synchronized captions.
Check:
- That the captions are relevant (all important audio information are available, dialogs in particular) and correctly synchronized;
- Or that the text transcript is relevant (all important audio and visual information are available, dialogs and embedded texts in particular).
If true, the test is passed.

Criterion 4.7 [AA] Does each prerecorded time-based media have a synchronized audio description if necessary (except in particular cases)?

Tests 4.7.1, 4.7.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the video-only and synchronized time-based media that require an audio description.
Check:
- The presence of a synchronized audio description;
- Or the presence of an alternative version with a synchronized audio description.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the video-only and synchronized time-based media that require an audio description.
Check:
- The presence of a synchronized audio description;
- Or the presence of an alternative version with a synchronized audio description.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the video-only and synchronized time-based media that require an audio description.
Check:
- The presence of a synchronized audio description;
- Or the presence of an alternative version with a synchronized audio description.
If true, the test is passed.

Criterion 4.8 [AA] For each prerecorded time-based media with a synchronized audio description, is this audio description relevant?

Tests 4.8.1, 4.8.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the video-only and synchronized time-based media with an audio description.
Check that the synchronized audio description is relevant (all the visual information that can be vocalized during the blanks in the main soundtrack are available, embedded texts in particular).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the video-only and synchronized time-based media with an audio description.
Check that the synchronized audio description is relevant (all the visual information that can be vocalized during the blanks in the main soundtrack are available, embedded texts in particular).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the video-only and synchronized time-based media with an audio description.
Check that the synchronized audio description is relevant (all the visual information that can be vocalized during the blanks in the main soundtrack are available, embedded texts in particular).
If true, the test is passed.

Criterion 4.9 [AAA] Does each prerecorded time-based media have a sign language interpretation (except in particular cases) if necessary?

Tests 4.9.1, 4.9.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the time-based media, audio-only and synchronized, that require a sign language interpretation.
Check:
1. The presence of a sign language interpretation accessible via an adjacent link (a URL or an anchor);
2. That the sign language is adapted to the language of the media.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the time-based media, audio-only and synchronized, that require a sign language interpretation.
Check:
1. The presence of a sign language interpretation accessible via an adjacent link (a URL or an anchor);
2. That the sign language is adapted to the language of the media.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable all styles" CSS".
In the page, spot the time-based media, audio-only and synchronized, that require a sign language interpretation.
Check:
1. The presence of a sign language interpretation accessible via an adjacent link (a URL or an anchor);
2. That the sign language is adapted to the language of the media.
If true, the test is passed.

Criterion 4.10 [AAA] For each prerecorded time-based media with a sign language interpretation, is this interpretation relevant?

Tests 4.10.1, 4.10.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the time-based media, audio-only and synchronized, that have a sign language interpretation.
Check that the sign language interpretation is relevant.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the time-based media, audio-only and synchronized, that have a sign language interpretation.
Check that the sign language interpretation is relevant.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the time-based media, audio-only and synchronized, that have a sign language interpretation.
Check that the sign language interpretation is relevant.
If true, the test is passed.

Criterion 4.11 [AAA] Does each prerecorded time-based media have a synchronized extended audio description if necessary (except in particular cases)?

Tests 4.11.1, 4.11.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the video-only and synchronized time-based media that require an extended audio description.
Check:
- The presence of a synchronized extended audio description;
- Or the presence of an alternative version with a synchronized extended audio description.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the video-only and synchronized time-based media that require an extended audio description.
Check:
- The presence of a synchronized extended audio description;
- Or the presence of an alternative version with a synchronized extended audio description.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the video-only and synchronized time-based media that require an extended audio description.
Check:
- The presence of a synchronized extended audio description;
- Or the presence of an alternative version with a synchronized extended audio description.
If true, the test is passed.

Criterion 4.12 [AAA] For each prerecorded time-based media with a synchronized extended audio description, is this audio description relevant?

Tests 4.12.1, 4.12.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the video-only and synchronized time-based media that have an extended audio description.
Check that the extended audio description is relevant (all important visual information are available, embedded texts in particular).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the video-only and synchronized time-based media that have an extended audio description.
Check that the extended audio description is relevant (all important visual information are available, embedded texts in particular).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable all styles" CSS".
In the page, spot the video-only and synchronized time-based media that have an extended audio description.
Check that the extended audio description is relevant (all important visual information are available, embedded texts in particular).
If true, the test is passed.

Criterion 4.13 [AAA] Does each synchronized or video-only time-based media have a text transcript (except in particular cases)?

Tests 4.13.1, 4.13.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the video-only and synchronized time-based media that require a text transcript.
For each of them, check:
- The presence of a text transcript accessible via an adjacent link (a URL or an anchor);
- Or the presence of an adjacent text transcript clearly identifiable.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the video-only and synchronized time-based media that require a text transcript.
For each of them, check:
- The presence of a text transcript accessible via an adjacent link (a URL or an anchor);
- Or the presence of an adjacent text transcript clearly identifiable.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the video-only and synchronized time-based media that require a text transcript.
For each of them, check:
- The presence of a text transcript accessible via an adjacent link (a URL or an anchor);
- Or the presence of an adjacent text transcript clearly identifiable.
If true, the test is passed.

Criterion 4.14 [AAA] For each synchronized or video-only time-based media with a text transcript, is this text transcript relevant?

Tests 4.14.1, 4.14.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the video-only and synchronized time-based media that have a text transcript.
For each of them, check that the text transcript is relevant (all important audio and visual information are available, dialogs and embedded texts in particular).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the video-only and synchronized time-based media that have a text transcript.
For each of them, check that the text transcript is relevant (all important audio and visual information are available, dialogs and embedded texts in particular).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the video-only and synchronized time-based media that have a text transcript.
For each of them, check that the text transcript is relevant (all important audio and visual information are available, dialogs and embedded texts in particular).
If true, the test is passed.

Criterion 4.15 [A] Can each time-based media be clearly identified (except in particular cases)?

Tests 4.15.1, 4.15.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the video-only, audio or synchronized time-based media, prerecorded or live.
For each of them, check:
1. That a chunk of text (a title or a paragraph for example), allowing to identify the time-based media, immediately precedes or follows it.
2. That the chunk of text is located outside of the media player, if it's Flash-based.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the video-only, audio or synchronized time-based media, prerecorded or live.
For each of them, check:
1. That a chunk of text (a title or a paragraph for example), allowing to identify the time-based media, immediately precedes or follows it.
2. That the chunk of text is located outside of the media player, if it's Flash-based.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the video-only, audio or synchronized time-based media, prerecorded or live.
For each of them, check:
1. That a chunk of text (a title or a paragraph for example), allowing to identify the time-based media, immediately precedes or follows it.
2. That the chunk of text is located outside of the media player, if it's Flash-based.
If true, the test is passed.

Criterion 4.16 [A] Does each non-time-based media have, if necessary, an alternative (except in particular cases)?

Tests 4.16.1, 4.16.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type object.
In the page, spot the non-time-based media.
For each of them, check:
1. The presence of an adjacent link clearly identifiable (for example "text alternative"), giving access to an alternative (via a URL or an anchor);
2. That the link works;
3. That the page or the alternative in the page is accessible.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type object.
In the page, spot the non-time-based media.
For each of them, check:
1. The presence of an adjacent link clearly identifiable (for example "text alternative"), giving access to an alternative (via a URL or an anchor);
2. That the link works;
3. That the page or the alternative in the page is accessible.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type object{border:2px solid red}.
In the page, spot the non-time-based media.
For each of them, check:
1. The presence of an adjacent link clearly identifiable (for example "text alternative"), giving access to an alternative (via a URL or an anchor);
2. That the link works;
3. That the page or the alternative in the page is accessible.
If true, the test is passed.

Criterion 4.17 [A] For each non-time-based media with an alternative, is this alternative relevant?

Test 4.17.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type object.
In the page, spot the non-time-based media.
For each of them, check that the text alternative is relevant (it provides access to the same content and similar functionalities).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type object.
In the page, spot the non-time-based media.
For each of them, check that the text alternative is relevant (it provides access to the same content and similar functionalities).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose « "Edit CSS" », and in the field at the bottom of the window, type object{border:2px solid red}.
In the page, spot the non-time-based media.
For each of them, check that the text alternative is relevant (it provides access to the same content and similar functionalities).
If true, the test is passed.

Criterion 4.18 [A] Can each autoplaying sound be controlled by the user?

Test 4.18.1

For all

If during the page loading, a sound is triggered automatically, check:
- That the sound sequence lasts no more than 3 seconds;
- Or that a system (a button for example), on the element that triggered the sound (see note), or in the page, allows to stop it;
- Or that the volume of the sound sequence can be controlled by the user, independently of the system volume control.
If true, the test is passed.

Note: the following elements may trigger sounds during page loading: audio, video, object, embed, or bgsound tags, or some JavaScript code.

Criterion 4.19 [AAA] For each prerecorded audio-only time-based media, are the dialogues audible enough (except in particular cases)?

Test 4.19.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the downloadable audio files, or available via a player (object, audio, video, embed or bgsound tags).
For each audio file, check that:
- The audio background can be muted;
- Or that dialogs tracks are played 20 decibels higher than the audio background:
  - Record the audio file.
  - Open the file with Audacity.
  - Audio tracks are displayed as waveforms.
  - In the Track drop-down menu (left to the Waveform Display), choose "Split Stereo to Mono".
  - In the Waveform Display, select the area to analyze.
  - In the "Analyze" menu, choose "Contrast".
  - In the window that opens, click on "Measure selection", the result is displayed in the "Volume" column.
  - Check that the results is greater or equal to 20 decibels.
- Or that there is an alternative version for which the audio background can be muted, accessible directly or via an adjacent link (URL or anchor);
- Or that there is an alternative version for which the dialog tracks are 20 decibels higher than the audio background (level may be controlled with the method described above).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the downloadable audio files, or available via a player (object, audio, video, embed or bgsound tags).
For each audio file, check that:
- The audio background can be muted;
- Or that dialogs tracks are played 20 decibels higher than the audio background:
  - Record the audio file.
  - Open the file with Audacity.
  - Audio tracks are displayed as waveforms.
  - In the Track drop-down menu (left to the Waveform Display), choose "Split Stereo to Mono".
  - In the Waveform Display, select the area to analyze.
  - In the "Analyze" menu, choose "Contrast".
  - In the window that opens, click on "Measure selection", the result is displayed in the "Volume" column.
  - Check that the results is greater or equal to 20 decibels.
- Or that there is an alternative version for which the audio background can be muted, accessible directly or via an adjacent link (URL or anchor);
- Or that there is an alternative version for which the dialog tracks are 20 decibels higher than the audio background (level may be controlled with the method described above).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the downloadable audio files, or available via a player (object, audio, video, embed or bgsound tags).
For each audio file, check that:
- The audio background can be muted;
- Or that dialogs tracks are played 20 decibels higher than the audio background:
  - Record the audio file.
  - Open the file with Audacity.
  - Audio tracks are displayed as waveforms.
  - In the Track drop-down menu (left to the Waveform Display), choose "Split Stereo to Mono".
  - In the Waveform Display, select the area to analyze.
  - In the "Analyze" menu, choose "Contrast".
  - In the window that opens, click on "Measure selection", the result is displayed in the "Volume" column.
  - Check that the results is greater or equal to 20 decibels.
- Or that there is an alternative version for which the audio background can be muted, accessible directly or via an adjacent link (URL or anchor);
- Or that there is an alternative version for which the dialog tracks are 20 decibels higher than the audio background (level may be controlled with the method described above).
If true, the test is passed.

Criterion 4.20 [A] Can each time-based media be, if necessary, controlled either through a keyboard or a mouse?

Tests 4.20.1, 4.20.2, 4.20.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the time-based media (object, video or audio tags)
Check:
1. That all controls (buttons or clickable areas) can be reached through the Tab key;
2. That simple controls (buttons and clickable areas) can be triggered through a keyboard with the Enter key;
3. That complex controls (volume control for example) can be used through a keyboard (arrow keys in general);
4. That all controls can be used through a mouse;
5. That the player has the mandatory control features.
If not, check the presence, in the page, of a functionality accessible either through a keyboard or a mouse, that performs the same action.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the time-based media (object, video or audio tags)
Check:
1. That all controls (buttons or clickable areas) can be reached through the Tab key;
2. That simple controls (buttons and clickable areas) can be triggered through a keyboard with the Enter key;
3. That complex controls (volume control for example) can be used through a keyboard (arrow keys in general);
4. That all controls can be used through a mouse;
5. That the player has the mandatory control features.
If not, check the presence, in the page, of a functionality accessible either through a keyboard or a mouse, that performs the same action.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the time-based media (object, video or audio tags)
Check:
1. That all controls (buttons or clickable areas) can be reached through the Tab key;
2. That simple controls (buttons and clickable areas) can be triggered through a keyboard with the Enter key;
3. That complex controls (volume control for example) can be used through a keyboard (arrow keys in general);
4. That all controls can be used through a mouse;
5. That the player has the mandatory control features.
If not, check the presence, in the page, of a functionality accessible either through a keyboard or a mouse, that performs the same action.
If true, the test is passed.

Criterion 4.21 [A] Can each non-time-based media be controlled either through a keyboard or a mouse?

Tests 4.21.1, 4.21.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the non-time-based media (object tags).
Check:
1. That all controls (buttons or clickable areas) can be reached through the Tab key;
2. That simple controls (buttons and clickable areas) can be triggered through a keyboard with the Enter key;
3. That complex controls (slider for example) can be used through a keyboard (arrow keys in general);
4. That all controls can be used through a mouse;
If not, check the presence, in the page, of a functionality accessible either through a keyboard or a mouse, that performs the same action.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the non-time-based media (object tags).
Check:
1. That all controls (buttons or clickable areas) can be reached through the Tab key;
2. That simple controls (buttons and clickable areas) can be triggered through a keyboard with the Enter key;
3. That complex controls (slider for example) can be used through a keyboard (arrow keys in general);
4. That all controls can be used through a mouse;
If not, check the presence, in the page, of a functionality accessible either through a keyboard or a mouse, that performs the same action.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the non-time-based media (object tags).
Check:
1. That all controls (buttons or clickable areas) can be reached through the Tab key;
2. That simple controls (buttons and clickable areas) can be triggered through a keyboard with the Enter key;
3. That complex controls (slider for example) can be used through a keyboard (arrow keys in general);
4. That all controls can be used through a mouse;
If not, check the presence, in the page, of a functionality accessible either through a keyboard or a mouse, that performs the same action.
If true, the test is passed.

Criterion 4.22 [A] Is each time-based media and each non-time-based media compatible with assistive technologies (except in particular cases)?

Tests 4.22.1, 4.22.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the time-based and non-time-based media (object or embed tags).
Check:
1. That all controls (button or clickable area) have a relevant name;
2. That controls with multiple states (like a play/pause button) have a name coherent with their current state;
3. That areas that are dynamically updated (for example the timecode in a video player) are correctly rendered.
If not, check:
- The presence of an alternative compatible with an accessibility API, that gives access to the same functionalities, next to the media or accessible via an adjacent link (a URL or an anchor);
- Or the presence of a mechanism (a button for example) to replace the time-based or non-time-based media by a compatible alternative version.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page, spot the time-based and non-time-based media (object or embed tags).
Check:
1. That all controls (button or clickable area) have a relevant name;
2. That controls with multiple states (like a play/pause button) have a name coherent with their current state;
3. That areas that are dynamically updated (for example the timecode in a video player) are correctly rendered.
If not, check:
- The presence of an alternative compatible with an accessibility API, that gives access to the same functionalities, next to the media or accessible via an adjacent link (a URL or an anchor);
- Or the presence of a mechanism (a button for example) to replace the time-based or non-time-based media by a compatible alternative version.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the page, spot the time-based and non-time-based media (object or embed tags).
Check:
1. That all controls (button or clickable area) have a relevant name;
2. That controls with multiple states (like a play/pause button) have a name coherent with their current state;
3. That areas that are dynamically updated (for example the timecode in a video player) are correctly rendered.
If not, check:
- The presence of an alternative compatible with an accessibility API, that gives access to the same functionalities, next to the media or accessible via an adjacent link (a URL or an anchor);
- Or the presence of a mechanism (a button for example) to replace the time-based or non-time-based media by a compatible alternative version.
If true, the test is passed.

Important note: this test requires either to have access to the source code of the time-based or non-time-based media, or to use a specialized tool able to display the system properties of the interface elements. On Windows systems you can use "Inspect", which is part of the Windows SDK.

Other operating systems include similar tools.

This test can also be performed with a screen reader, yet it should be noted that some of them may try to automatically fix accessibility issues, which can bias the results.

Tables

Criterion 5.1 [A] Does each complex data table have a summary?

Criterion 5.2 [A] For each complex data table with a summary, is this summary relevant?

Tests 5.1.1, 5.2.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Tables" menu, choose "Show data tables".
In the page, spot the complex data tables.
Check the presence of a chunk of text in the caption tag allowing to understand the nature and structure of the table.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Tables" then choose "Outline Tables" and "Outline Table Captions".
In the page, spot the complex data tables.
Check the presence of a chunk of text in the caption tag allowing to understand the nature and structure of the table.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Outline" menu, choose "Outline Tables" then choose "Outline Table Captions".
In the page, spot the complex data tables.
Check the presence of a chunk of text in the caption tag allowing to understand the nature and structure of the table.
If true, the test is passed.

Criterion 5.3 [A] For each layout table, is the linearized content still understandable (except in particular cases)?

Test 5.3.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Tables" menu, choose "Table cell order".
In the page, spot the layout tables.
Check:
1. That the reading order of the cells is coherent with the content;
2. The presence (right-click and choose "Inspect Element"), on the table tag, of the role="presentation" ARIA property.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Tables" then choose "Outline Table Cells".
In the page, spot the layout tables.
Check:
1. That the reading order of the cells is coherent with the content;
2. The presence (right-click and choose "Inspect Element"), on the table tag, of the role="presentation" ARIA property.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Outline" menu, choose "Outline Table Cells".
In the page, spot the layout tables.
Check:
1. That the reading order of the cells is coherent with the content;
2. The presence (right-click and choose "Inspect Element"), on the table tag, of the role="presentation" ARIA property.
If true, the test is passed.

Criterion 5.4 [A] Does each data table have a title?

Criterion 5.5 [A] For each data table with a title, is this title relevant?

Tests 5.4.1, 5.5.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Tables" menu, choose "Show data tables".
In the page, spot the data tables.
Check the presence of a relevant caption tag (it contains at least the title of the table).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Tables" then choose "Outline Tables" and "Outline Table Captions".
In the page, spot the data tables.
Check the presence of a relevant caption tag (it contains at least the title of the table).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Outline" menu, choose "Outline Tables" then choose "Outline Table Captions".
In the page, spot the data tables.
Check the presence of a relevant caption tag (it contains at least the title of the table).
If true, the test is passed.

Criterion 5.6 [A] For each data table, are each column header and each row header correctly identified?

Tests 5.6.1, 5.6.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Tables" menu, choose "Show data tables".
In the page, spot the data tables.
Check that header cells are tagged with a th tag.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "th" and "table".
In the page, spot the data tables.
Check that header cells are tagged with a th tag.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Outline" menu, choose "Outline Tables".
In the page, spot the data tables.
Spot cells that serve as header cells.
Right-click and choose "Inspect" to check that the header cells are tagged with a th tag.
If true, the test is passed.

Criterion 5.7 [A] For each data table, is each cell associated with its header cell using the appropriate technique?

Tests 5.7.1, 5.7.2, 5.7.3, 5.7.4

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Tables" menu, choose "Show data tables".
In the page, spot the data tables.
Check:
1. That header cells (th tags) that apply to a whole row or column have an id or scope attribute;
2. That header cells (th tags) that do not apply to a whole row or column have an id attribute and do not have a scope attribute;
3. That header cells that apply to a whole row, with a scope attribute, this scope attribute is set to row;
4. That header cells that apply to a whole column, with a scope attribute, this scope attribute is set to col;
5. That data cells, linked to one or more header cells having an id attribute, have a headers attribute matching the id attributes of the linked header cells.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "table".
In the page, spot the data tables.
Right-click and choose "Inspect Element".
Check:
1. That header cells (th tags) that apply to a whole row or column have an id or scope attribute;
2. That header cells (th tags) that do not apply to a whole row or column have an id attribute and do not have a scope attribute;
3. That header cells that apply to a whole row, with a scope attribute, this scope attribute is set to row;
4. That header cells that apply to a whole column, with a scope attribute, this scope attribute is set to col;
5. That data cells, linked to one or more header cells having an id attribute, have a headers attribute matching the id attributes of the linked header cells.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Outline" menu, choose "Outline Tables".
In the page, spot the data tables.
Right-click and choose "Inspect".
Check:
1. That header cells (th tags) that apply to a whole row or column have an id or scope attribute;
2. That header cells (th tags) that do not apply to a whole row or column have an id attribute and do not have a scope attribute;
3. That header cells that apply to a whole row, with a scope attribute, this scope attribute is set to row;
4. That header cells that apply to a whole column, with a scope attribute, this scope attribute is set to col;
5. That data cells, linked to one or more header cells having an id attribute, have a headers attribute matching the id attributes of the linked header cells.
If true, the test is passed.

Criterion 5.8 [A] Each layout table must not use elements intended for data tables. Has this rule been followed?

Test 5.8.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the page, spot the layout tables, right-click and choose "Inspect Element".
Check:
1. That the table tag does not contain caption, thead, th and tfoot tags;
2. That data cells (td tags) do not have scope, headers, colgroup and axis attributes.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Tables" then choose "Outline Tables".
In the page, spot the layout tables, right-click and choose "Inspect Element".
Check:
1. That the table tag does not contain caption, thead, th and tfoot tags;
2. That data cells (td tags) do not have scope, headers, colgroup and axis attributes.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Outline" menu, choose "Outline Tables".
In the page, spot the layout tables, right-click and choose "Inspect".
Check:
1. That the table tag does not contain caption, thead, th and tfoot tags;
2. That data cells (td tags) do not have scope, headers, colgroup and axis attributes.
If true, the test is passed.

Liens

Criterion 6.1 [A] Is each link explicit (except in particular cases)?

Tests 6.1.1, 6.1.2, 6.1.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type "a". Do the same procedure again and type "svg";
In the "Images" menu, choose "Show images(s)".
In the "Doc Info." menu, choose "Show titles".
For each text link, image link (img or area tag) and combined link, check:
- That the link text alone (text, alt attribute, or their combinations in the case of combined links) allows to understand the link purpose and target;
- Or that the link context allows to understand the link purpose and target.
For each link containing a vector image (svg tag), right-click and choose "Inspect Element". Check:
- That the aria-label property allows to understand the link purpose and target;
- Or that the link context allows to understand the link purpose and target.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "a" and svg.
In the "Images" menu, choose "Display Alt Attributes".
In the "Information" menu, choose "Display Title Attributes".
For each text link, image link (img or area tag) and combined link, check:
- That the link text alone (text, alt attribute, or their combinations in the case of combined links) allows to understand the link purpose and target;
- Or that the link context allows to understand the link purpose and target.
For each link containing a vector image (svg tag), right-click and choose "Inspect Element". Check:
- That the aria-label property allows to understand the link purpose and target;
- Or that the link context allows to understand the link purpose and target.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type a{border:2px solid red} svg{border:2px dotted green}.
In the "Images" menu, choose "Display Alt Attributes".
In the "Information" menu, choose "Display Title Attributes".
For each text link, image link (img or area tag) and combined link, check:
- That the link text alone (text, alt attribute, or their combinations in the case of combined links) allows to understand the link purpose and target;
- Or that the link context allows to understand the link purpose and target.
For each link containing a vector image (svg tag), right-click and choose "Inspect Element". Check:
- That the aria-label property allows to understand the link purpose and target;
- Or that the link context allows to understand the link purpose and target.
If true, the test is passed.

Note: the test also requires to check image links implemented via an object tag, and the links containing an image implemented via the canvas tag. These types of links are extremely rare but must be checked, in the same testing conditions. In these cases, checking occurs at the source code level.

Criterion 6.2 [A] For each link with a link title, is this title relevant?

Tests 6.2.1, 6.2.2, 6.2.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type "a". Do the same procedure again and type "svg";
In the "Images" menu, choose "Show images(s)".
In the "Doc Info." menu, choose "Show titles".
In the page, for each text link, image link and combined link, check that the title attribute:
1. Is not empty;
2. Repeats the information contained in the link text;
3. Provides additional information, except for image links where it is allowed to keep a title attribute strictly identical to the link text.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "a" and svg.
In the "Images" menu, choose "Display Alt Attributes".
In the "Information" menu, choose "Display Title Attributes".
In the page, for each text link, image link and combined link, check that the title attribute:
1. Is not empty;
2. Repeats the information contained in the link text;
3. Provides additional information, except for image links where it is allowed to keep a title attribute strictly identical to the link text.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type a{border:2px solid red} svg{border:2px dotted green}.
In the "Images" menu, choose "Display Alt Attributes".
In the "Information" menu, choose "Display Title Attributes".
In the page, for each text link, image link and combined link, check that the title attribute:
1. Is not empty;
2. Repeats the information contained in the link text;
3. Provides additional information, except for image links where it is allowed to keep a title attribute strictly identical to the link text.
If true, the test is passed.

Criterion 6.3 [AAA] Is each link text alone explicit out of context (except in particular cases)?

Tests 6.3.1, 6.3.2, 6.3.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type "a".
In the "Images" menu, choose "Show images(s)".
In the "Doc Info." menu, choose "Show titles".
For each text link, image link (img or area tag) and combined link, check:
- That the link text alone (text, alt attribute, or their combinations in the case of combined links) allows to understand the link purpose and target;
- Or the presence of a title attribute, on the a tag, that allows to understand the link purpose and target out of context;
- Or the presence of a mechanism that can make the link explicit out of context.
For each link containing a vector image (svg tag), right-click and choose "Inspect Element". Check:
- That the aria-label property allows to understand the link purpose and target;
- Or the presence of a title attribute, on the a tag, that allows to understand the link purpose and target out of context;
- Or the presence of a mechanism that can make the link explicit out of context.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "a" and svg.
In the "Images" menu, choose "Display Alt Attributes".
In the "Information" menu, choose "Display Title Attributes".
For each text link, image link (img or area tag) and combined link, check:
- That the link text alone (text, alt attribute, or their combinations in the case of combined links) allows to understand the link purpose and target;
- Or the presence of a title attribute, on the a tag, that allows to understand the link purpose and target out of context;
- Or the presence of a mechanism that can make the link explicit out of context.
For each link containing a vector image (svg tag), right-click and choose "Inspect Element". Check:
- That the aria-label property allows to understand the link purpose and target;
- Or the presence of a title attribute, on the a tag, that allows to understand the link purpose and target out of context;
- Or the presence of a mechanism that can make the link explicit out of context.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type a{border:2px solid red} svg{border:2px dotted green}.
In the "Images" menu, choose "Display Alt Attributes".
In the "Information" menu, choose "Display Title Attributes".
For each text link, image link (img or area tag) and combined link, check:
- That the link text alone (text, alt attribute, or their combinations in the case of combined links) allows to understand the link purpose and target;
- Or the presence of a title attribute, on the a tag, that allows to understand the link purpose and target out of context;
- Or the presence of a mechanism that can make the link explicit out of context.
For each link containing a vector image (svg tag), right-click and choose "Inspect Element". Check:
- That the aria-label property allows to understand the link purpose and target;
- Or the presence of a title attribute, on the a tag, that allows to understand the link purpose and target out of context;
- Or the presence of a mechanism that can make the link explicit out of context.
If true, the test is passed.

Criterion 6.4 [A] For each web page, does each identical link have the same purpose and target?

Tests 6.4.1, 6.4.2, 6.4.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type "a".
In the "Images" menu, choose "Show images(s)".
In the "Doc Info." menu, choose "Show titles".
In the page, for each text link, image link (img or area tag) and combined link, check that if there is an identical link (link text combined with its context), the two links have the same target.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "a".
In the "Images" menu, choose "Display Alt Attributes".
In the "Information" menu, choose "Display Title Attributes".
In the page, for each text link, image link (img or area tag) and combined link, check that if there is an identical link (link text combined with its context), the two links have the same target.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type a{border:2px solid red}.
In the "Images" menu, choose "Display Alt Attributes".
In the "Information" menu, choose "Display Title Attributes".
In the page, for each text link, image link (img or area tag) and combined link, check that if there is an identical link (link text combined with its context), the two links have the same target.
If true, the test is passed.

Criterion 6.5 [A] On each Web page, does each link, except in anchors, have a text?

Test 6.5.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Show other element(s)", type "a".
In the "Images" menu, choose "Show images(s)".
In the page, for each text link, image link and combined link, check that the link contains text (actual text or a text alternative).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type "a".
In the "Images" menu, choose "Display Alt Attributes".
In the page, for each text link, image link and combined link, check that the link contains text (actual text or a text alternative).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type a{border:2px solid red}.
In the "Images" menu, choose "Display Alt Attributes".
In the page, for each text link, image link and combined link, check that the link contains text (actual text or a text alternative).
If true, the test is passed.

Note: an image link with a title attribute will be considered as an empty link if the text alternative of the image is empty.

Scripts

Technical note about alternatives to scripts

Criterion 7.1 [A] Does each script support assistive technologies, if necessary?

Test 7.1.1

For all

In the page, spot all JavaScript code snippets that generate or control an interface component, and that do not use an ARIA role matching with a design pattern.
Check:
1. That the component has a role coherent with its current use (generally a button or a link);
2. That the component has an explicit name;
3. That the name of the component is coherent with the state of the functionality, or of the controlled contents (for example for a functionality allowing to display or hide a content area).
If not, check:
- The presence of an accessible interface component giving access to the same functionalities;
- Or the presence of an accessible alternative giving access to the same functionalities.
If true, the test is passed.

Test 7.1.2

For all

In the page, spot all JavaScript code snippets that insert some content.
Check that the methods used for content insertion are compliant with the DOM specification (for example, check that document.write is not used).
If true, the test is passed.

Test 7.1.3

For all

In the page, spot all JavaScript code snippets that generate or control an interface component, and make use of an ARIA role matching with a design pattern.
Check:
- That the interface component is compliant with the design pattern defined by the ARIA API:
  1. The ARIA properties are present and working;
  2. The structure is correctly implemented;
  3. The behavior is correctly implemented.
- Or that the presence of an interface component, compliant with the design pattern defined by the ARIA API, gives access to the same functionalities;
- Or that the presence of an interface component, adapting a design pattern defined by the ARIA API, gives access to the same functionalities;
- Or that the presence of an accessible alternative gives access to the same functionalities.
If true, the test is passed.

Test 7.1.4

With the WAT

Right-click in the page and choose "Inspect Element".
In the search field, type "role".
For each occurrence found, check that the use of the role is allowed for the element, in accordance with the rules defined for the change of native role.
If true, the test is passed.

With the WebDev (Firefox)

Right-click in the page and choose "Inspect Element".
In the search field, type "[role]".
For each occurrence found, check that the use of the role is allowed for the element, in accordance with the rules defined for the change of native role.
If true, the test is passed.

With the WebDev (Chrome)

Right-click in the page and choose "Inspect".
In the search field, type "[role]".
For each occurrence found, check that the use of the role is allowed for the element, in accordance with the rules defined for the change of native role.
If true, the test is passed.

Test 7.1.5

For all

In the page, spot all JavaScript code snippets that generate or control an interface component, and make use of an ARIA role matching with a design pattern.
With each screen reader of the chosen reference baseline, navigate to the component and check:
- That the component is correctly rendered;
- Or that an accessible alternative is present.
If true, the test is passed.

Test 7.1.6

With the WAT

Right-click in the page and choose "Inspect Element".
In the search field, type 'role="application"'.
For each occurrence found, if the element on which is implemented the role="application" is an interface component or is part of an interface component:
- With each screen reader of the chosen reference baseline, navigate to the component and check:
  - That the component is correctly rendered;
  - Or that an accessible alternative is present.
If true, the test is passed.

With the WebDev (Firefox)

Right-click in the page and choose "Inspect Element".
In the search field, type '[role="application"]'.
For each occurrence found, if the element on which is implemented the role="application" is an interface component or is part of an interface component:
- With each screen reader of the chosen reference baseline, navigate to the component and check:
  - That the component is correctly rendered;
  - Or that an accessible alternative is present.
If true, the test is passed.

With the WebDev (Chrome)

Right-click in the page and choose "Inspect".
In the search field, type '[role="application"]'.
For each occurrence found, if the element on which is implemented the role="application" is an interface component or is part of an interface component:
- With each screen reader of the chosen reference baseline, navigate to the component and check:
  - That the component is correctly rendered;
  - Or that an accessible alternative is present.
If true, the test is passed.

Criterion 7.2 [A] For each script with an alternative, is this alternative relevant?

Test 7.2.1

With the WAT

Spot the alternatives to JavaScript-based functionalities:
1. In the page, spot the available alternatives to a JavaScript-based component or functionality.
2. In the "IE" menu, choose "Toggle JavaScript on/off" and spot, in the page, the available alternatives when JavaScript is disabled.
For each of them, check that the alternative gives access to the same contents and similar functionalities.
If true, the test is passed.

With the WebDev (Firefox)

Spot the alternatives to JavaScript-based functionalities:
1. In the page, spot the available alternatives to a JavaScript-based component or functionality.
2. In the "Disable" menu, choose "Disable JavaScript" then choose "Disable All JavaScript" and spot, in the page, the available alternatives when JavaScript is disabled.
For each of them, check that the alternative gives access to the same contents and similar functionalities.
If true, the test is passed.

With the WebDev (Chrome)

Spot the alternatives to JavaScript-based functionalities:
1. In the page, spot the available alternatives to a JavaScript-based component or functionality.
2. In the "Disable" menu, choose "Disable JavaScript" and spot, in the page, the available alternatives when JavaScript is disabled.
For each of them, check that the alternative gives access to the same contents and similar functionalities.
If true, the test is passed.

Test 7.2.2

For all

Spot, in the page, all the non-textual elements updated by a JavaScript-based functionality.
If the non-textual element has an alternative, check:
1. That the alternative is updated when the non-textual content is updated;
2. That the updated alternative is relevant.
If true, the test is passed.

Criterion 7.3 [A] Can each script be controlled through a keyboard and a mouse (except in particular cases)?

Note: depending on the nature of the interactive components to be tested, it could be necessary to perform additional rendering tests. For that matter, see the technical note on keyboard interactions in the ARIA API.

Tests 7.3.1

For all

In the page, spot all the elements where a JavaScript events manager is implemented (for example click, focus, hover, blur, keydown, keyup…).
Check:
- That the element is accessible through a keyboard and a mouse:
  1. It can be reached with the Tab key;
  2. If the element manages a simple action, it can be activated with the Enter key;
  3. If the element manages a complex action, it can be used through a keyboard (generally with the arrow keys);
  4. The element can be used through a mouse.
If not, check that an element accessible through a keyboard and a mouse, allowing to perform the same action, is available in the page.
If true, the test is passed.

Note: With Firefox, it is possible to spot the elements where a JavaScript event is implemented. With the inspector: right-click in the page and choose "Inspect Element", display all the branches of the DOM tree; events are flagged with ev.

Test 7.3.2

For all

Activate, one by one, all the elements able to receive focus.
Check that the focus is not removed via a JavaScript functionality.
If true, the test is passed.

Test 7.3.3

For all

In the page, spot all JavaScript code snippets that generate or control an interface component, and make use of an ARIA role matching with a design pattern.
Check:
- That the keyboard interactions are correctly implemented for the Esc, Tab, Spacebar and arrow keys, at least;
- Or the presence of an interface component, allowing to perform the same action, for which the keyboard interactions are correctly implemented for the Esc, Tab, Spacebar and arrow keys, at least;
- Or the presence of an alternative, that can be controlled through a keyboard and a mouse, giving access to the same functionalities.
If true, the test is passed.

Criterion 7.4 [A] For each script that initiates a change of context, is the user warned, or can she control it?

Test 7.4.1

For all

In the page, spot all the JavaScript events that initiate a change of context, for example:
- A dynamic update of form fields;
- The opening of a new page when a select list option is selected;
- The update, via an AJAX call, of an essential part of the page;
- The automatic start of a video player after selection in a playlist;
- The manipulation of focus, resulting in the change of the current cursor position in the page.
Check:
- That the user is warned, through a text, of the result of the script and the type of change before it is triggered;
- Or that the change of context is initiated by an explicit button (input of type submit, button or image, or the button tag);
- Or that the change of context is initiated by an explicit link.
If true, the test is passed.

Criterion 7.5 [AAA] Can each script causing an unrequested alert be controlled by the user (except in particular cases)?

Test 7.5.1

For all

Spot the unrequested alerts, for example the display of JavaScript alert window or any other similar system.
If the alert is not related to an emergency, a sudden and unexpected event or situation that requires immediate action to preserve health, security or property, check:
1. The presence of a mechanism allowing the user to not display the unrequested alert;
2. The presence of a mechanism allowing the user to display again the unrequested alert.
If true, the test is passed.

Mandatory elements

Criterion 8.1 [A] Is each Web page defined by a document type?

Tests 8.1.1, 8.1.2, 8.1.3

With the WAT

Right-click and choose "View Source".
Check:
1. The presence of a !DOCTYPE tag (for example <!DOCTYPE html>);
2. That the document type is valid;
3. That the !DOCTYPE tag is located before the html tag.
If true, the test is passed.

With the WebDev (Firefox)

Right-click and choose "Source code of the page".
Check:
1. The presence of a !DOCTYPE tag (for example <!DOCTYPE html>);
2. That the document type is valid;
3. That the !DOCTYPE tag is located before the html tag.
If true, the test is passed.

With the WebDev (Chrome)

Right-click and choose "View source code of the page".
Check:
1. The presence of a !DOCTYPE tag (for example <!DOCTYPE html>);
2. That the document type is valid;
3. That the !DOCTYPE tag is located before the html tag.
If true, the test is passed.

Criterion 8.2 [A] For each Web page, is the source code valid according to the specified document type (except in particular cases)?

Tests 8.2.1, 8.2.2

With the WAT

In the "Check" menu, choose "W3C Nu markup checker (all frames)".
In the results page, check:
1. That the tags follow the writing rules;
2. That the tags nesting is conforming;
3. That the opening and closing of tags are conforming;
4. That the attributes follow the writing rules;
5. That the attributes values follow the writing rules;
6. The absence of obsolete elements (except in particular cases).
If true, the test is passed.

With the WebDev (Firefox)

In the "Tools" menu, choose "Validate HTML".
In the results page, check:
1. That the tags follow the writing rules;
2. That the tags nesting is conforming;
3. That the opening and closing of tags are conforming;
4. That the attributes follow the writing rules;
5. That the attributes values follow the writing rules;
6. The absence of obsolete elements (except in particular cases).
If true, the test is passed.

With the WebDev (Chrome)

In the menu "Tools", choose "Validate HTML".
In the results page, check:
1. That the tags follow the writing rules;
2. That the tags nesting is conforming;
3. That the opening and closing of tags are conforming;
4. That the attributes follow the writing rules;
5. That the attributes values follow the writing rules;
6. The absence of obsolete elements (except in particular cases).
If true, the test is passed.

Criterion 8.3 [A] On each Web page, is the default human language identifiable?

Criterion 8.4 [A] For each Web page with a default human language, is the language code appropriate?

Tests 8.3.1, 8.4.1

With the WAT

Right-click and choose "Inspect Element".
Check:
1. The presence of a human language indication:
  - lang attribute on the html tag, if the source code is in HTML5 or HTML4;
  - Or lang and xml:lang attributes on the html tag, if the source code is XHTML 1.0;
  - Or an xml:lang attribute on the html tag, if the source code is XHTML 1.1;
  - Or the presence of a human language indication on each text element or one of its parents.
2. The presence of a valid language code (conforming with the norms ISO 639-1, or ISO 639-2 and next);
3. The presence of a relevant language code (that indicates the main human language of the document).
If true, the test is passed.

With the WebDev (Firefox)

Right-click and choose "Inspect Element".
Check:
1. The presence of a human language indication:
  - lang attribute on the html tag, if the source code is in HTML5 or HTML4;
  - Or lang and xml:lang attributes on the html tag, if the source code is XHTML 1.0;
  - Or an xml:lang attribute on the html tag, if the source code is XHTML 1.1;
  - Or the presence of a human language indication on each text element or one of its parents.
2. The presence of a valid language code (conforming with the norms ISO 639-1, or ISO 639-2 and next);
3. The presence of a relevant language code (that indicates the main human language of the document).
If true, the test is passed.

With the WebDev (Chrome)

Right-click and choose "Inspect".
Check:
1. The presence of a human language indication:
  - lang attribute on the html tag, if the source code is in HTML5 or HTML4;
  - Or lang and xml:lang attributes on the html tag, if the source code is XHTML 1.0;
  - Or an xml:lang attribute on the html tag, if the source code is XHTML 1.1;
  - Or the presence of a human language indication on each text element or one of its parents.
2. The presence of a valid language code (conforming with the norms ISO 639-1, or ISO 639-2 and following);
3. The presence of a relevant language code (that indicates the main human language of the document).
If true, the test is passed.

Criterion 8.5 [A] Does each Web page have a page title?

Criterion 8.6 [A] For each Web page with a page title, is this title relevant?

Tests 8.5.1, 8.6.1

With the WAT

Right-click and choose "Inspect Element".
Check:
1. The presence of a title tag;
2. The presence of a page title (content of the title tag) relevant enough (it allows the user to find the page in the browser history or the list of tabs).
If true, the test is passed.

With the WebDev (Firefox)

Right-click and choose "Inspect Element".
Check:
1. The presence of a title tag;
2. The presence of a page title (content of the title tag) relevant enough (it allows the user to find the page in the browser history or the list of tabs).
If true, the test is passed.

With the WebDev (Chrome)

Right-click and choose "Inspect".
Check:
1. The presence of a title tag;
2. The presence of a page title (content of the title tag) relevant enough (it allows the user to find the page in the browser history or the list of tabs).
If true, the test is passed.

Criterion 8.7 [AA] On each Web page, is each change in the human language identified via the source code (except in particular cases)?

Test 8.7.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Doc Info." menu, choose "Show lang attributes".
Look for chunks of text in a foreign language, except:
1. Proper names;
2. Words of foreign origin, present in the reference dictionary for the document language;
3. Words of foreign origin, commonly used, whose pronunciation does not cause misunderstanding.
Check that the chunks of text have a human language indication (lang and/or xml:lang attribute, on the element itself or one of its parents).
If true, the test is passed.

Caution: the "Show lang attributes" option also shows the hreflang attributes, which can be confusing. In the case of links, it is advised to check the lang attribute in the source code (right-click and choose "Inspect Element").

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
Look for chunks of text in a foreign language, except:
1. Proper names;
2. Words of foreign origin, present in the reference dictionary for the document language;
3. Words of foreign origin, commonly used, whose pronunciation does not cause misunderstanding.
Check that the chunks of text have a human language indication (lang and/or xml:lang attribute, on the element itself or one of its parents).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Look for chunks of text in a foreign language, except:
1. Proper names;
2. Words of foreign origin, present in the reference dictionary for the document language;
3. Words of foreign origin, commonly used, whose pronunciation does not cause misunderstanding.
Check that the chunks of text have a human language indication (lang and/or xml:lang attribute, on the element itself or one of its parents).
If true, the test is passed.

Criterion 8.8 [AA] On each Web page, is each change in human language relevant?

Tests 8.8.1, 8.8.2

With the WAT

Right-click and choose "Inspect Element".
In the search field, type "*[lang]".
For each occurrence found, check:
1. That the human language indication is valid;
2. That the human language indication is relevant.
If true, the test is passed.

With the WebDev (Firefox)

Right-click and choose "Inspect Element".
In the search field, type "[lang]".
For each occurrence found, check:
1. That the human language indication is valid;
2. That the human language indication is relevant.
If true, the test is passed.

With the WebDev (Chrome)

Right-click and choose "Inspect".
In the search field, type "[lang]".
For each occurrence found, check:
1. That the human language indication is valid;
2. That the human language indication is relevant.
If true, the test is passed.

Criterion 8.9 [A] On each Web page, tags must not be used only for layout. Has this rule been followed?

Test 8.9.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Paragraphs", "Q/blockquotes" and "Headings".
Check in the page:
- The absence of elements used inappropriately for layout effects (see note);
- Or (right-click and choose "Inspect Element") that an element used only for layout has a role="presentation" attribute appropriately used (see note).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
In the "Outline" menu, choose: "Outline Headings"
In the "Outline" menu, choose: "Outline Custom Elements…" and type "p", "blockquote".
Check in the page:
- The absence of elements used inappropriately for layout effects (see note);
- Or (right-click and choose "Inspect Element") that an element used only for layout has a role="presentation" attribute appropriately used (see note).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type "p,blockquote{border:2px solid red}".
Check in the page:
- The absence of elements used inappropriately for layout effects (see note);
- Or (right-click and choose "Inspect Element") that an element used only for layout has a role="presentation" attribute appropriately used (see note).
If true, the test is passed.

A few examples of inappropriate use of tags: a div tag used as a paragraph, a heading used as a caption, a blockquote tag, empty paragraphs, whitespaces, used to create margins.

The use of a role="presentation" attribute is strongly advised against, but can be justified in rare cases. It can be acceptable on a blockquote element or an empty paragraph, but will be considered non-conforming on a heading.

Criterion 8.10 [A] On each Web page, are changes in reading direction identified?

Test 8.10.1

With the WAT

In the page, spot the chunks of texts that use a human language whose reading order is different from the document language's reading order (like Arab or Hebrew in a document in English, for example).
Right-click and choose "Inspect Element".
Check:
1. That the chunk of text is contained in a tag that has a dir attribute;
2. That the value of the dir attribute is conforming (ltr, for "left to right" and rtl for "right to left");
3. That the value of the dir attribute is relevant.
If true, the test is passed.

With the WebDev (Firefox)

In the page, spot the chunks of texts that use a human language whose reading order is different from the document language's reading order (like Arab or Hebrew in a document in English, for example).
Right-click and choose "Inspect Element".
Check:
1. That the chunk of text is contained in a tag that has a dir attribute;
2. That the value of the dir attribute is conforming (ltr, for "left to right" and rtl for "right to left");
3. That the value of the dir attribute is relevant.
If true, the test is passed.

With the WebDev (Chrome)

In the page, spot the chunks of texts that use a human language whose reading order is different from the document language's reading order (like Arab or Hebrew in a document in English, for example).
Right-click and choose "Inspect".
Check:
1. That the chunk of text is contained in a tag that has a dir attribute;
2. That the value of the dir attribute is conforming (ltr, for "left to right" and rtl for "right to left");
3. That the value of the dir attribute is relevant.
If true, the test is passed.

Test 8.10.2

With the WAT

Right-click and choose "Inspect Element".
In the search field, type "[dir]".
For each occurrence found, check:
- That the indication of reading order is conforming (rtl or ltr);
- That the indication of reading order is relevant.
If true, the test is passed.

With the WebDev (Firefox)

Right-click and choose "Inspect Element".
In the search field, type "[dir]".
For each occurrence found, check:
- That the indication of reading order is conforming (rtl or ltr);
- That the indication of reading order is relevant.
If true, the test is passed.

With the WebDev (Chrome)

Right-click and choose "Inspect".
In the search field, type "[dir]".
For each occurrence found, check:
- That the indication of reading order is conforming (rtl or ltr);
- That the indication of reading order is relevant.
If true, the test is passed.

Information structure

Criterion 9.1 [A] On each Web page, is information structured by the appropriate use of headings?

Tests 9.1.1, 9.1.2, 9.1.4

With the WAT

Right-click and choose "Inspect Element".
In the search field, type '[role="heading"]'.
If the search does not give any result:
- In the "Structure" menu, choose "Heading structure".
- In the displayed page, check:
  1. The presence of at least one h1 heading;
  2. That the hierarchy is coherent (there is no hierarchy level skipped);
  3. That the headings (contents of the h"n" tags, "n" being a number between 1 and 6) and their levels are relevant.
In the other case:
- In the "CSS" menu, choose "Disable CSS".
- In the "IE" menu, choose "Open IE accessibility options dialog".
- In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-heading.css" style sheet.
- The h"n" headings (where "n" is a number between 1 and 6) and the elements with an aria-level property are signaled in the page with the indication of their heading level (see note).
- Check:
  1. The presence of at least one h1 heading;
  2. That the hierarchy is coherent (there is no hierarchy level skipped);
  3. That the headings (contents of the h"n" tags) and their levels are relevant.
If true, the test is passed.

Do not forget to uncheck the option for the user style sheet after the tests.

With the WebDev (Firefox)

Right-click and choose "Inspect Element".
In the search field, type '[role="heading"]'.
If the search does not give any result:
- In the "Information" menu, choose "View Document Outline".
- In the displayed page, check:
  1. The presence of at least one h1 heading;
  2. That the hierarchy is coherent (there is no hierarchy level skipped);
  3. That the headings (contents of the h"n" tags, "n" being a number between 1 and 6) and their levels are relevant.
In the other case:
- In the "CSS" menu, choose "Disable Styles" then, "Disable All Styles".
- Right-click in the page and choose "Inspect Element".
- Click on "Styles Editor". In the left column, select "Import" and choose the "check-heading.css" style sheet.
- The h"n" headings (where "n" is a number between 1 and 6) and the elements with an aria-level property are signaled in the page with the indication of their heading level (see note).
- Check:
  1. The presence of at least one h1 heading;
  2. That the hierarchy is coherent (there is no hierarchy level skipped);
  3. That the headings (contents of the h"n" tags) and their levels are relevant.
If true, the test is passed.

Do not forget to uncheck the option for the user style sheet after the tests.

With the WebDev (Chrome)

Right-click and choose "Inspect".
In the search field, type [role="heading"].
If the search does not give any result:
- In the "Information" menu, choose "View Document Outline".
- In the displayed page, check:
  1. The presence of at least one h1 heading;
  2. That the hierarchy is coherent (there is no hierarchy level skipped);
  3. That the headings (contents of the h"n" tags, "n" being a number between 1 and 6) and their levels are relevant.
If true, the test is passed.

Tests 9.1.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "IE" menu, choose "Open IE accessibility options dialog".
In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-heading.css" style sheet.
The h"n" headings (where "n" is a number between 1 and 6) and the elements with an aria-level property are signaled in the page with the indication of their heading level (see note).
Check that the chunks of texts serving as headings are implemented via a heading tag (h"n") or via the ARIA properties: role="heading" and aria-level=""n"" (see note).
If true, the test is passed.

Do not forget to uncheck the option for the user style sheet after the tests.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then, "Disable All Styles".
Right-click in the page and choose "Inspect Element".
Click on "Styles Editor". In the left column, select "Import" and choose the "check-heading.css" style sheet.
The h"n" headings (where "n" is a number between 1 and 6) and the elements with an aria-level property are signaled in the page with the indication of their heading level (see note).
Check that the chunks of texts serving as headings are implemented via a heading tag (h"n") or via the ARIA properties: role="heading" and aria-level=""n"" (see note).
If true, the test is passed.

Do not forget to uncheck the option for the user style sheet after the tests.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type h1,h2,h3,h4,h5,h6,[aria-level]{ display:block!important; font-size:100%!important; } /** for all native headings**/ h1,h2,h3,h4,h5,h6{ border:1px solid green; } h1:before, h2:before, h3:before, h4:before, h5:before, h6:before, *[role="heading"][aria-level]:before{ background:#whitesmoke; font-weight:bold!important; padding:0 5px; } h1:before{ content:"<h1>";} h2:before{ content:"<h2>";} h3:before{ content:"<h3>";} h4:before{ content:"<h4>";} h5:before{ content:"<h5>";} h6:before{ content:"<h6>";} /** for all the elements with a "heading" role and an aria-level, the role and the level are displayed **/ *[role="heading"][aria-level]{ border:1px solid red; } *[role="heading"][aria-level]:before{ content:"role '<h"attr(aria-level)">'"; } .
The h"n" headings (where "n" is a number between 1 and 6) and the elements with an aria-level property are signaled in the page with the indication of their heading level (see note).
Check that the chunks of texts serving as headings are implemented via a heading tag (h"n") or via the ARIA properties: role="heading" and aria-level=""n"" (see note).
If true, the test is passed.

Do not forget to remove the user style rules after the tests.

Note: caution, if not well understood, this test can lead to an overuse of headings. The goal is to ensure that the headings necessary to navigate in the document are available. This test must be approached while keeping this objective in mind.

Technical note about the ARIA heading role and h1 headings..

Criterion 9.2 [A] On each Web page, is the document outline coherent?

Test 9.2.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "IE" menu, choose "Internet Explorer Accessibility Options.
In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-structure.css" style sheet.
The HTML5 structure elements are emphasized, with the indication of the tag used.
Check the presence of a header tag on the page header.
Check:
1. The presence of nav tags on the main navigation menu, at least, and the secondary navigation areas (secondary menu, breadcrumbs, pagination links…) when they exist;
2. That the nav tags are used only for the main and secondary navigation menus.
Check:
1. The presence of a main tag on the main content area of the page;
2. That the main tag is unique in the page.
Check the presence of a footer tag on the page footer (area containing information about the document, like legal information links, etc.).
If true, the test is passed.

Do not forget to uncheck the option for the user style sheet after the tests.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
Right-click in the page and choose "Inspect Element".
Click on "Styles Editor". In the left column, select "Import" and choose the "check-structure.css" style sheet.
The HTML5 structure elements are emphasized, with the indication of the tag used.
Check the presence of a header tag on the page header.
Check:
1. The presence of nav tags on the main navigation menu, at least, and the secondary navigation areas (secondary menu, breadcrumbs, pagination links…) when they exist;
2. That the nav tags are used only for the main and secondary navigation menus.
Check:
1. The presence of a main tag on the main content area of the page;
2. That the main tag is unique in the page.
Check the presence of a footer tag on the page footer (area containing information about the document, like legal information links, etc.).
If true, the test is passed.

Do not forget to uncheck the option for the user style sheet after the tests.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type *:before, *:after{ display:block; background:#f2f2f2; font-weight:bold; font-size:100%; font-size:1rem; color:red; font-weight:bold; } header, nav, main, footer{ display:block!important; margin-bottom:3px!important; border:2px solid red; padding:3px!important; } header:before{ content:'header role="'attr(role)'"'; } nav:before{ content:'nav role="'attr(role)'"'; } main:before{ content:'main role="'attr(role)'"'; } footer:before{ content:'footer role="'attr(role)'"'; }.
The HTML5 structure elements are emphasized, with the indication of the tag used.
Check the presence of a header tag on the page header.
Check:
1. The presence of nav tags on the main navigation menu, at least, and the secondary navigation areas (secondary menu, breadcrumbs, pagination links…) when they exist;
2. That the nav tags are used only for the main and secondary navigation menus.
Check:
1. The presence of a main tag on the main content area of the page;
2. That the main tag is unique in the page.
Check the presence of a footer tag on the page footer (area containing information about the document, like legal information links, etc.).
If true, the test is passed.

Do not forget to remove the user style rules after the tests.

Test 9.2.2

Important: this test can be performed appropriately with Internet Explorer.

With Firefox or Chrome.
In the "Tools" menu, activate the "HeadingsMap" extension; activate the "HTML5 Outline" tab.
Check that the document tree is coherent (see note 1), meaning that it represents the structure of the content areas like navigation, and main and secondary content.
If true, the test is passed (see note 2).
If not: evaluate the workload to fix this document tree; if it appears to be out of proportions, the test is declared as "non-applicable" by exception (see note 2).

Note 1: the HeadingsMap extension considers as an error the fact that sectioning elements do not have headings, mentioned as "No head element". This error can be ignored.

Note 2: read the technical note about the document outline.

Criterion 9.3 [A] On each Web page, is each list structured appropriately?

Tests 9.3.1, 9.3.2, 9.3.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "IE" menu, choose "Internet Explorer Accessibility Options".
In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-list.css" style sheet.
The list items elements (li tags and tags with list and listitem roles) are emphasized, with the indication of the tag used.
Check that each content that appears as a list is tagged appropriately:
1. ul and li tags or tags with role="list" and role="listitem" for unordered lists;
2. ol and li ordered lists;
3. dl, dt and dd for definition lists.
If true, the test is passed.

Do not forget to uncheck the option for the user style sheet after the tests.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
Right-click in the page and choose "Inspect Element".
Click on "Styles Editor". In the left column, select "Import" and choose the "check-list.css" style sheet.
The list items elements (li tags and tags with list and listitem roles) are emphasized, with the indication of the tag used.
Check that each content that appears as a list is tagged appropriately:
1. ul and li tags or tags with role="list" and role="listitem" for unordered lists;
2. ol and li ordered lists;
3. dl, dt and dd for definition lists.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type *:before, *:after{ display:block; background:#f2f2f2; font-weight:bold; font-size:100%; font-size:1rem; } ul, li, [role="list"], [role="list"] [role="listitem"] { border: 2px solid green; } ul:before, li:before, [role="list"]:before, [role="list"] [role="listitem"]:before { color: green!important; } /** inserted messages **/ ul:before { content: 'ul' ; } li:before { content: 'li'; } [role="list"]:before { content: 'role="list"'; } ul[role="list"]:before { content: 'ul role="list"'; } [role="listitem"]:before { content: 'role="listitem"'; } li[role="listitem"]:before { content: 'li role="listitem"'; }.
The list items elements (li tags and tags with list and listitem roles) are emphasized, with the indication of the tag used.
Check that each content that appears as a list is tagged appropriately:
1. ul and li tags or tags with role="list" and role="listitem" for unordered lists;
2. ol and li ordered lists;
3. dl, dt and dd for definition lists.
If true, the test is passed.

Technical note about the list and listitem roles

Criterion 9.4 [AAA] On each Web page, does the first occurrence of each abbreviation help to know its meaning?

Criterion 9.5 [AAA] On each Web page, is the meaning of each abbreviation relevant?

Tests 9.4.1, 9.5.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu choose "Acronym/Abbreviation".
In the menu "Doc Info." choose "Show titles".
In the page, spot the first occurrence of each abbreviation and check:
1. That the meaning of the abbreviation:
  - Is provided in the adjacent context;
  - Or is provided via a link referencing a page or a chunk of text in the page;
  - Or via a glossary available in the website;
  - Or is provided via the title attribute of a link that contains the abbreviation;
  - Or is provided via the title attribute of an abbr tag that contains the abbreviation.
2. That the meaning of the abbreviation is relevant.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Information" menu, choose "Display Abbreviations".
In the "Information" menu, choose "Display Title Attributes".
In the page, spot the first occurrence of each abbreviation and check:
1. That the meaning of the abbreviation:
  - Is provided in the adjacent context;
  - Or is provided via a link referencing a page or a chunk of text in the page;
  - Or via a glossary available in the website;
  - Or is provided via the title attribute of a link that contains the abbreviation;
  - Or is provided via the title attribute of an abbr tag that contains the abbreviation.
2. That the meaning of the abbreviation is relevant.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable all styles".
In the "Information" menu, choose "Display Abbreviations".
In the "Information" menu, choose "Display Title Attributes".
In the page, spot the first occurrence of each abbreviation and check:
1. That the meaning of the abbreviation:
  - Is provided in the adjacent context;
  - Or is provided via a link referencing a page or a chunk of text in the page;
  - Or via a glossary available in the website;
  - Or is provided via the title attribute of a link that contains the abbreviation;
  - Or is provided via the title attribute of an abbr tag that contains the abbreviation.
2. That the meaning of the abbreviation is relevant.
If true, the test is passed.

Criterion 9.6 [A] On each Web page, is each quotation identified properly?

Tests 9.6.1, 9.6.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Q/blockquote".
Check:
1. That the in line quotes are implemented via a q tag.
2. That the block quotes are implemented via a blockquote tag.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose: "Outline Custom Elements…" and type q and blockquote.
Check:
1. That the in line quotes are implemented via a q tag.
2. That the block quotes are implemented via a blockquote tag.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type q,blockquote{border:2px solid red}.
Check:
1. That the in line quotes are implemented via a q tag.
2. That the block quotes are implemented via a blockquote tag.
If true, the test is passed.

Presentation

Criterion 10.1 [A] In the Web site, are style sheets used to control information presentation?

Tests 10.1.1, 10.1.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Doc Info." menu, choose "Internet Explorer Accessibility Options".
In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-presentation.css" style sheet.
The tags or attributes for layout are displayed in the page.
Check the absence of any tag or attribute for layout.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
Right-click in the page and choose "Inspect Element".
Click on "Styles Editor". In the left column, select "Import" and choose the "check-presentation.css" style sheet.
The tags or attributes for layout are displayed in the page.
Check the absence of any tag or attribute for layout.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type basefont,blink,center, font, marquee, s, strike, tt, u,[align], [alink], [background], [basefont], [bgcolor], [border], [color], [link], [text], [vlink],[cellpadding],[cellspacing],:not(img)[width],:not(img)[height],:not(img)[width][height]{ border: 2px solid red;}.
The tags or attributes for layout are displayed in the page.
Check the absence of any tag or attribute for layout.
If true, the test is passed.

Test 10.1.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
Check:
1. The absence of words with whitespaces between letters;
2. The absence of whitespaces meant to create margin or alignment effects;
3. The absence of whitespaces meant to simulate tables or columns.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
Check:
1. The absence of words with whitespaces between letters;
2. The absence of whitespaces meant to create margin or alignment effects;
3. The absence of whitespaces meant to simulate tables or columns.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Check:
1. The absence of words with whitespaces between letters;
2. The absence of whitespaces meant to create margin or alignment effects;
3. The absence of whitespaces meant to simulate tables or columns.
If true, the test is passed.

Criterion 10.2 [A] On each Web page, is visible content still available when style sheets or images are disabled?

Tests 10.2.1

With the WAT

Open the page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable CSS".
In the tab where the CSS are enabled, in the "Images" menu, choose "Remove CSS images".
If some informative images are removed (i.e. they have been inserted via a CSS property), check in the tab with the CSS disabled, the presence of a text conveying the same information.
If true, the test is passed.

With the WebDev (Firefox)

Open the page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
In the tab where the CSS are enabled, in the "Images" menu, choose "Hide Background Images".
If some informative images are removed (i.e. they have been inserted via a CSS property), check in the tab with the CSS disabled, the presence of a text conveying the same information.
If true, the test is passed.

With the WebDev (Chrome)

Open the page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable All Styles".
In the tab where the CSS are enabled, in the "Images" menu, choose "Hide Background Images".
If some informative images are removed (i.e. they have been inserted via a CSS property), check in the tab with the CSS disabled, the presence of a text conveying the same information.
If true, the test is passed.

Criterion 10.3 [A] On each Web page, is information still understandable when style sheets are disabled?

Test 10.3.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
Check that the order in which the contents are presented do not cause understanding issues.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
Check that the order in which the contents are presented do not cause understanding issues.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Check that the order in which the contents are presented do not cause understanding issues.
If true, the test is passed.

Criterion 10.4 [AA] On each Web page, is text still readable when characters size is increased until at least 200%?

Test 10.4.1

This test cannot be performed with Internet Explorer.

With Firefox or Chrome, in the "CSS" menu of the Web Developer toolbar, choose "View CSS".
In the displayed page, search (Ctrl + F with the Windows OS, Cmd + F with MacOS), for pt, pc, mm, cm, in, for the media types screen, tv, handheld, projection.
If no element can be found, the test is passed.

Test 10.4.2

This test cannot be performed with Internet Explorer.

With Firefox or Chrome, in the "CSS" menu of the Web Developer toolbar, choose "View CSS".
In the displayed page, search (Ctrl + F with the Windows OS, Cmd + F with MacOS), for font-size.
Check that the font sizes are defined only with relative units: %, em, rem, vw, vh, vmin, vmax; or with keywords xx-small, x-small, small, medium, large, x-large, xx-large, smaller, or larger; for media types screen, tv, handheld, projection.
If true, the test is passed.

Test 10.4.3

This test cannot be performed with Internet Explorer or Chrome.

With Firefox, in the "View" menu, choose "Zoom" and check the option "Zoom Text Only".
Increase font size by 200% (Ctrl + + with the Windows OS, Cmd + + with MacOS, 6 times).
Check that all contents remain readable.
If true, the test is passed.

Criterion 10.5 [AA] On each Web page, are CSS declarations for background and foreground colors appropriate?

Tests 10.5.1, 10.5.2

With the WAT

In the page, spot the colored texts, except for those with default colors (for example the links, etc.).
For each of them, right-click and choose "Inspect Element".
In the "Styles" pane, activate the "Computed" tab.
Check the presence of a background-color property on the element itself or one of its parents.
If true, the test is passed.

With the WebDev (Firefox)

In the page, spot the colored texts, except for those with default colors (for example the links, etc.).
For each of them, right-click and choose "Inspect Element".
In the "Styles" pane, activate the "Computed" tab.
Check the presence of a background-color property on the element itself or one of its parents.
If true, the test is passed.

With the WebDev (Chrome)

In the page, spot the colored texts, except for those with default colors (for example the links, etc.).
For each of them, right-click and choose "Inspect".
In the "Styles" pane, activate the "Computed" tab.
Check the presence of a background-color property on the element itself or one of its parents.
If true, the test is passed.

Test 10.5.3

With the WAT

In the page, spot the elements with a background color.
In the "Images" menu, choose "Remove CSS images".
Check that none of the background colors is removed (i.e. they have been inserted via a CSS property).
If true, the test is passed.

With the WebDev (Firefox)

In the page, spot the elements with a background color.
In the "Images" menu, choose "Hide Background Images".
Check that none of the background colors is removed (i.e. they have been inserted via a CSS property).
If true, the test is passed.

With the WebDev (Chrome)

In the page, spot the elements with a background color.
In the "Images" menu, choose "Hide Background Images".
Check that none of the background colors is removed (i.e. they have been inserted via a CSS property).
If true, the test is passed.

Criterion 10.6 [A] On each Web page, can each link whose nature is not obvious be distinguished from the surrounding text?

Test 10.6.1

With the WAT

In the "Structure" menu, choose "Show other elements", type "a".
In the page, spot the text links, surrounded by text, whose nature is not obvious (for example a link on a name, etc.).
In the "Colour" menu, choose "Contrast Analyzer".
Check that the contrast between the color of the link text, and the color of the surrounding text, is 3:1, at least.
If true, the test is passed.

With the WebDev (Firefox)

In the "Outline" menu, choose "Outline Custom Elements…", and type "a".
In the page, spot the text links, surrounded by text, whose nature is not obvious (for example a link on a name, etc.).
In the page, right-click and activate "WCAG Contrast Checker".
Check that the contrast between the color of the link text, and the color of the surrounding text, is 3:1, at least.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type a{border:2px solid red}.
In the page, spot the text links, surrounded by text, whose nature is not obvious (for example a link on a name, etc.).
Open the "Colour Contrast Analyser" application.
Check that the contrast between the color of the link text, and the color of the surrounding text, is 3:1, at least.
If true, the test is passed.

Criterion 10.7 [A] On each Web page, is the focus visible for each element that receives focus?

Tests 10.7.1, 10.7.2

This test cannot be performed appropriately with Internet Explorer.

With Firefox or Chrome, in the "CSS" menu, choose "View CSS".
In the displayed page, search (Ctrl + F with the Windows OS, Cmd + F with MacOS), for outline.
Check that the visual cue for the elements receiving focus (outline, outline-width, outline-style, outline-color properties) is neither removed (example: outline:none;outline:0) nor degraded, making it less visible.
If true, the test is passed.

Test 10.7.3

With the WAT

In the "Structure" menu, choose "Show other elements", type "a".
In the page, spot the text links, surrounded by text, distinguished by color only.
For each of these links, check that receiving focus is signaled by a visual cue that does not rely on color only (for example an underline or a border), when tabbing to it with a keyboard, or hovering over it with a mouse.
If true, the test is passed.

With the WebDev (Firefox)

In the "Outline" menu, choose "Outline Custom Elements…", and type "a".
In the page, spot the text links, surrounded by text, distinguished by color only.
For each of these links, check that receiving focus is signaled by a visual cue that does not rely on color only (for example an underline or a border), when tabbing to it with a keyboard, or hovering over it with a mouse.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type a{border:2px solid red}.
In the page, spot the text links, surrounded by text, distinguished by color only.
For each of these links, check that receiving focus is signaled by a visual cue that does not rely on color only (for example an underline or a border), when tabbing to it with a keyboard, or hovering over it with a mouse.
If true, the test is passed.

Criterion 10.8 [AAA] On each Web page, can the user specify the background and foreground colors?

Tests 10.8.1, 10.8.2, 10.8.3, 10.8.4

For all

Check, in the page, the presence of a mechanism allowing the user to modify background and foreground colors.
If there is one, check that:
1. The color of texts in HTML content and in embedded content (object, embed, svg, canvas tags) is effectively customizable;
2. That the background color of elements containing text, in HTML content and in embedded content (object, embed, svg, canvas tags) is effectively customizable.
If true, the test is passed.

Criterion 10.9 [AAA] for each Web page, text must not be fully justified. Has this rule been followed?

Test 10.9.1

For all

If some text is fully justified, check, in the page, the presence of a mechanism allowing to remove the justification.
If true, the test is passed.

Criterion 10.10 [AAA] For each Web page, on a full-screen window and with a font size of 200%, is each block of text still readable without the use of horizontal scrolling?

Test 10.10.1

This test cannot be performed with Internet Explorer or Chrome.

With Firefox, in the "View" menu, choose "Zoom" and check the option "Zoom Text Only".
Increase font size by 200% (Ctrl + + with the Windows OS, Cmd + + with MacOS, 6 times).
Check:
1. That the blocks of text (for example paragraphs) remain readable without the use of horizontal scrolling;
2. Or that a mechanism allows the user to make the text readable without the use of horizontal scrolling.
If true, the test is passed.

Criterion 10.11 [AAA] For each Web page, is the length of lines of text equal to 80 characters or less (except in particular cases)?

Test 10.11.1

For all

Check:
- That the blocks of text have a width equal to 80 characters or less;
- Or that it is possible to decrease the width of blocks of text down to 80 characters, by narrowing the window.
If true, the test is passed.

Criterion 10.12 [AAA] For each Web page, is line and paragraph spacing sufficient?

Tests 10.12.1, 10.12.2

With the WAT

For each block of text: right-click and choose "Inspect Element".
In the "Styles" pane, activate the "Computed" tab.
Check:
1. That the value of line-height is between 1.5 and 2 times the value of font-size;
2. That the cumulated values of vertical paddings and margins, for the block of text itself and the elements before and after, are greater or equal to 1.5 the value of line-height.
If it is not the case, check the presence of a mechanism allowing to apply such values for the line and paragraph spacing.
If true, the test is passed.

With the WebDev (Firefox)

For each block of text: right-click and choose "Inspect Element".
In the "Styles" pane, activate the "Computed" tab.
Check:
1. That the value of line-height is between 1.5 and 2 times the value of font-size;
2. That the cumulated values of vertical paddings and margins, for the block of text itself and the elements before and after, are greater or equal to 1.5 the value of line-height.
If it is not the case, check the presence of a mechanism allowing to apply such values for the line and paragraph spacing.
If true, the test is passed.

With the WebDev (Chrome)

For each block of text: right-click and choose "Inspect Element".
In the "Styles" pane, activate the "Computed" tab.
Check:
1. That the value of line-height is between 1.5 and 2 times the value of font-size;
2. That the cumulated values of vertical paddings and margins, for the block of text itself and the elements before and after, are greater or equal to 1.5 the value of line-height.
If it is not the case, check the presence of a mechanism allowing to apply such values for the line and paragraph spacing.
If true, the test is passed.

Criterion 10.13 [A] For each Web page, are hidden texts correctly rendered by assistive technologies?

Tests 10.13.1

With the WAT

Open the page in two different browser tabs.
For one of the tabs:
1. In the "CSS" menu choose "Disable CSS";
2. In the "Doc Info." menu, choose "Internet Explorer Accessibility Options";
3. In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-hidden-content.css" style sheet.
Comparing the content of these two tabs, spot the hidden texts and check:
1. - That the hidden text is not meant to be rendered (an element to track visits, for example);
  - Or that the mechanism that can make the content visible is located before the hidden content;
  - Or that the hidden content is part of an ARIA interface component that manages the hidden content (for example in a tabs system).
2. If the hidden text has aria-hidden or hidden attributes (spotted thanks to the imported style sheet), check that the value of the attribute is coherent with the hidden or visible state of the content.
If true, the test is passed.

With the WebDev (Firefox)

Open the page in two different browser tabs.
For one of the tabs:
1. Right-click in the page and choose "Inspect Element";
2. Click on "Styles Editor". In the left column, select "Import" and choose the "check-hidden-content.css" style sheet.
Comparing the content of these two tabs, spot the hidden texts and check:
1. - That the hidden text is not meant to be rendered (an element to track visits, for example);
  - Or that the mechanism that can make the content visible is located before the hidden content;
  - Or that the hidden content is part of an ARIA interface component that manages the hidden content (for example in a tabs system).
2. If the hidden text has aria-hidden or hidden attributes (spotted thanks to the imported style sheet), check that the value of the attribute is coherent with the hidden or visible state of the content.
If true, the test is passed.

With the WebDev (Chrome)

Open the page in two different browser tabs.
For one of the tabs:
1. In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type *:before,*:after{ display:block; background:#f2f2f2; font-weight:bold; font-size:100%; font-size:1rem; color:red; font-weight:bold;}[hidden]{ content: "[hidden]";}[aria-hidden]{ content: "[attr:aria-hidden]";}[role]{ content: "[role: "attr(role)"]";}.
Comparing the content of these two tabs, spot the hidden texts and check:
1. - That the hidden text is not meant to be rendered (an element to track visits, for example);
  - Or that the mechanism that can make the content visible is located before the hidden content;
  - Or that the hidden content is part of an ARIA interface component that manages the hidden content (for example in a tabs system).
2. If the hidden text has aria-hidden or hidden attributes (spotted thanks to the imported style sheet), check that the value of the attribute is coherent with the hidden or visible state of the content.
If true, the test is passed.

Read the technical note about the aria-hidden property and the hidden attribute.

Criterion 10.14 [A] On each Web page, information must not be conveyed by shape, size or location alone. Has this rule been followed?

Criterion 10.15 [A] On each Web page, information must not be conveyed by shape, size or location alone. Has this rule been implemented in a relevant way?

Tests 10.14.1, 10.14.2, 10.14.3, 10.14.4, 10.15.1, 10.15.2, 10.15.3, 10.15.4

For all

In the page, spot the information conveyed by shape, size or location in a text, an image, a time-based or non-time-based media.
For each information conveyed by shape, size or location, check:
1. That there is another means to retrieve this information;
2. That this other means is relevant, meaning that it allows to convey the information in every consultation context for every user.
If true, the test is passed.

Forms

Criterion 11.1 [A] Does each form field have a label?

Criterion 11.2 [A] Is each label associated with a form field relevant?

Tests 11.1.1, 11.1.2, 11.1.3, 11.1.4, 11.1.5, 11.2.1, 11.2.2, 11.2.3, 11.2.4

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Fieldset / Labels".
In the "IE" menu, choose "Show titles".
In the "Doc Info." menu, choose "Internet Explorer Accessibility Options".
In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-label-IE.css" style sheet.
- The labels (label tag) are outlined with a solid green line.
- The fields with an aria-label property are outlined with a dashed blue line.
- The fields with an aria-labelledby property are outlined with a dotted red line.
For each form field (input, select, textarea tags), check:
- That the field has a relevant and correctly linked label (the value of the for attribute for the label tag equals the value of the id attribute of the field);
- Or that the field has a relevant title attribute, identical to the placeholder attribute if present;
- Or that the field has a relevant aria-label property (right-click on the element and choose "Inspect Element"), and a visible chunk of text, next to the field, allows to understand the nature of the expected input;
- Or that the field has a relevant label (a chunk of text having an id attribute), linked via the aria-labelledby="[id]" property (right-click on the element and choose "Inspect Element"), visible at least when the field receives focus. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles", then "Disable All Styles".
In the "Information" menu, choose "Display Id & Class Details", "Display Element Information", "Display Title Attributes".
Click on "Styles Editor". In the left column, select "Import" and choose the "check-label.css" style sheet.
- The labels (label tag) are outlined with a solid green line.
- The fields with an aria-label property are outlined with a dashed blue line.
- The fields with an aria-labelledby property are outlined with a dotted red line.
For each form field (input, select, textarea tags), check:
- That the field has a relevant and correctly linked label (the value of the for attribute for the label tag equals the value of the id attribute of the field);
- Or that the field has a relevant title attribute, identical to the placeholder attribute if present;
- Or that the field has a relevant aria-label property (right-click on the element and choose "Inspect Element"), and a visible chunk of text, next to the field, allows to understand the nature of the expected input;
- Or that the field has a relevant label (a chunk of text having an id attribute), linked via the aria-labelledby="[id]" property (right-click on the element and choose "Inspect Element"), visible at least when the field receives focus. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Information" menu, choose "Display Id & Class Details", "Display Element Information", "Display Title Attributes".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type input, select, textarea{border:2px solid red}.
For each form field (input, select, textarea tags), check:
- That the field has a relevant and correctly linked label (the value of the for attribute for the label tag equals the value of the id attribute of the field);
- Or that the field has a relevant title attribute, identical to the placeholder attribute if present;
- Or that the field has a relevant aria-label property (right-click on the element and choose "Inspect"), and a visible chunk of text, next to the field, allows to understand the nature of the expected input;
- Or that the field has a relevant label (a chunk of text having an id attribute), linked via the aria-labelledby="[id]" property (right-click on the element and choose "Inspect"), visible at least when the field receives focus. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids.
If true, the test is passed.

Criterion 11.3 [AA] On a given page, or set of pages, all form fields with similar functions must have consistent labels. Has this rule been followed?

Tests 11.3.1, 11.3.2

For all

In the page, spot the form fields having similar functions (for example several address fields).
Check that the labels are coherent (they allow to understand that similar inputs are expected).
Spot the fields that may be repeated on a set of pages (for example the input field of a search engine or the field for a newsletter subscription).
Check that in all these pages, these fields have a coherent label.
If true, the test is passed.

Criterion 11.4 [A] In each form, are each label and its related control positioned next to each other?

Test 11.4.1

For all

Check that the visible labels (for example the label tags) are positioned next to the field they are associated with.
If true, the test is passed.

Criterion 11.5 [A] In each form, is the information of same nature grouped together, if necessary?

Criterion 11.6 [A] In each form, does each form field grouping have a legend?

Criterion 11.7 [A] In each form, is each legend, related to a form field grouping, relevant?

Tests 11.5.1, 11.6.1, 11.7.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Fieldset / Labels".
Check that:
1. The fields of same nature (for example a group of input fields for identity information, a set of checkboxes, a date input system based on several fields…) are grouped in a fieldset tag;
2. The fieldset tag has a legend tag;
3. The legend tag is relevant (it allows to understand the nature of the grouping).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Outline" menu, choose "Outline Custom Elements…", and type fieldset and legend.
Check that:
1. The fields of same nature (for example a group of input fields for identity information, a set of checkboxes, a date input system based on several fields…) are grouped in a fieldset tag;
2. The fieldset tag has a legend tag;
3. The legend tag is relevant (it allows to understand the nature of the grouping).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type fieldset,legend{border:2px solid red}.
Check that:
1. The fields of same nature (for example a group of input fields for identity information, a set of checkboxes, a date input system based on several fields…) are grouped in a fieldset tag;
2. The fieldset tag has a legend tag;
3. The legend tag is relevant (it allows to understand the nature of the grouping).
If true, the test is passed.

Criterion 11.8 [A] In each form, is each selection list structured in a relevant way?

Tests 11.8.1, 11.8.2, 11.8.3

With the WAT

Spot the select dropdown lists.
Right-click on the element and choose "Inspect Element".
For each list that requires a structure (for example, the items can be grouped by category), check that:
1. The items groupings are done using optgroup tags;
2. Each grouping has a label attribute;
3. The label is relevant.
If true, the test is passed.

With the WebDev (Firefox)

Spot the select dropdown lists.
Right-click on the element and choose "Inspect Element".
For each list that requires a structure (for example, the items can be grouped by category), check that:
1. The items groupings are done using optgroup tags;
2. Each grouping has a label attribute;
3. The label is relevant.
If true, the test is passed.

With the WebDev (Chrome)

Spot the select dropdown lists.
Right-click on the element and choose "Inspect".
For each list that requires a structure (for example, the items can be grouped by category), check that:
1. The items groupings are done using optgroup tags;
2. Each grouping has a label attribute;
3. The label is relevant.
If true, the test is passed.

Criterion 11.9 [A] In each form, is the text of each button relevant?

Tests 11.9.1, 11.9.2

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Structure" menu, choose "Fieldset / labels".
In the "Doc Info." menu, choose "Show title".
Spot the form buttons.
Check:
- That the buttons of type submit or reset have a relevant text value (value attribute, or inner text for the button tags);
- Or that the button has a relevant title attribute;
- Or that the button has a relevant aria-label property (right-click and choose "Inspect Element");
- Or that the button is associated to a relevant chunk of text, via an aria-labelledby property, identified by an id attribute (select the button and the chunk of text, in the "Doc Info." menu, choose "View partial source" and check that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the button. Note that several labels can be affected to the button with this method, thus aria-labelledby may contain several ids.)
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Information" menu, choose "Display Element Information", "Display Title Attributes".
Spot the form buttons.
Check:
- That the buttons of type submit or reset have a relevant text value (value attribute, or inner text for the button tags);
- Or that the button has a relevant title attribute;
- Or that the button has a relevant aria-label property (right-click and choose "Inspect Element");
- Or that the button is associated to a relevant chunk of text, via an aria-labelledby property, identified by an id attribute (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector, and check that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the button. Note that several labels can be affected to the button with this method, thus aria-labelledby may contain several ids.)
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable all styles" ".
In the "Information" menu, choose "Display Element Information", "Display Title Attributes".
Spot the form buttons.
Check:
- That the buttons of type submit or reset have a relevant text value (value attribute, or inner text for the button tags);
- Or that the button has a relevant title attribute;
- Or that the button has a relevant aria-label property (right-click and choose "Inspect");
- Or that the button is associated to a relevant chunk of text, via an aria-labelledby property, identified by an id attribute (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector, and check that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the button. Note that several labels can be affected to the button with this method, thus aria-labelledby may contain several ids.)
If true, the test is passed.

Criterion 11.10 [A] In each form, is the input control used in a relevant way?

Tests 11.10.1, 11.10.2, 11.10.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "IE" menu choose "Show titles".
In the "Doc Info." menu, choose "Internet Explorer Accessibility Options".
In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-indication-mandatory.css" style sheet:
- The labels are outlined with a solid grey border.
- The fields with an aria-label property are outlined with a dashed blue border.
- The fields with an aria-labelledby property are outlined with a dotted red border.
- The fields with a required attribute are outlined with an orange left border.
- The fields with an aria-required property are outlined with a blue left border.
- The fields with an aria-describedby property are outlined with an inset violet-colored border.
For each mandatory field indication, check:
1. - That the indication is provided by a text located before the field;
  - Or that the indication is provided by the label tag;
  - Or that the indication is provided by the title attribute;
  - Or that the indication is provided by the aria-label attribute (select the field, in the "Doc Info." menu, choose "View partial source");
  - Or that the indication is provided by a chunk of text linked to the field by the aria-labelledby property (select the field and the chunk of text, in the "Doc Info." menu, choose "View partial source" and check that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids.)
  - Or that the indication is provided by a chunk of text linked to the field by the aria-describedby property (select the field and the chunk of text, in the "Doc Info." menu, choose "View partial source" and check that the id attribute of the chunk of text matches the value of the aria-describedby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-describedby may contain several ids.)
2. For each indication of mandatory field provided via an aria-label property, an aria-required or a required attribute, check that an explicit visual cue is provided in the label, or via a chunk of text linked to the field by the aria-labelledby or aria-describedby property.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Information" menu, choose "Display Element Information", "Display Title Attributes", "Display Id & Class Details".
Right-click in the page and choose "Inspect Element".
Click on "Styles Editor". In the left column, select "Import" and choose the "check-indication-mandatory.css" style sheet:
- The labels are outlined with a solid grey border.
- The fields with an aria-label property are outlined with a dashed blue border.
- The fields with an aria-labelledby property are outlined with a dotted red border.
- The fields with a required attribute are outlined with an orange left border.
- The fields with an aria-required property are outlined with a blue left border.
- The fields with an aria-describedby property are outlined with an inset violet-colored border.
For each mandatory field indication, check:
1. - That the indication is provided by a text located before the field;
  - Or that the indication is provided by the label tag;
  - Or that the indication is provided by the title attribute;
  - Or that the indication is provided by the aria-label attribute (select the field and check in the "DOM" block of the Element Inspector);
  - Or that the indication is provided by a chunk of text linked to the field by the aria-labelledby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the field);
  - Or that the indication is provided by a chunk of text linked to the field by the aria-describedby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector that the id attribute of the chunk of text matches the value of the aria-describedby attribute of the field).
2. For each indication of mandatory field provided via an aria-label property, an aria-required or a required attribute, check that an explicit visual cue is provided in the label, or via a chunk of text linked to the field by the aria-labelledby or aria-describedby property.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Information" menu, choose "Display Element Information", "Display Title Attributes", "Display Id & Class details".
For each mandatory field indication, check:
1. - That the indication is provided by a text located before the field;
  - Or that the indication is provided by the label tag;
  - Or that the indication is provided by the title attribute;
  - Or that the indication is provided by the aria-label attribute (select the field and check in the "DOM" block of the Element Inspector);
  - Or that the indication is provided by a chunk of text linked to the field by the aria-labelledby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the field);
  - Or that the indication is provided by a chunk of text linked to the field by the aria-describedby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector that the id attribute of the chunk of text matches the value of the aria-describedby attribute of the field).
2. For each indication of mandatory field provided via an aria-label property, an aria-required or a required attribute, check that an explicit visual cue is provided in the label, or via a chunk of text linked to the field by the aria-labelledby or aria-describedby property.
If true, the test is passed.

Tests 11.10.4, 11.10.5, 11.10.6

With the WAT

Fill the form fields with values likely to trigger input errors (for example leaving a mandatory field empty, entering an invalid e-mail address, etc.).
In the resulting page:
1. In the "CSS" menu, choose "Disable CSS".
2. In the "IE" menu choose "Show titles".
3. In the "Doc Info." menu, choose "Internet Explorer Accessibility Options".
4. In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-indication-erreur.css" style sheet.
  - The labels are outlined with a solid grey border.
  - The fields with an aria-label property are outlined with a dashed blue border.
  - The fields with an aria-labelledby property are outlined with a dotted red border.
  - The fields with a required attribute are outlined with an orange double left border.
  - The fields with an aria-required property are outlined with a blue left border.
  - The fields with an aria-describedby property are outlined with a violet-colored inset border.
  - The fields with an aria-invalid are outlined with a black outset border.
For each error message, check:
1. - That the error is signaled by a text located before the field in error;
  - Or that the error is signaled in the label tag;
  - Or that the error is signaled in the title attribute;
  - Or that the error is signaled in the aria-label attribute (select the field, in the "Doc Info." menu, choose "View partial source");
  - Or that the error is signaled by a chunk of text linked to the field by the aria-labelledby property (select the field and the chunk of text, in the "Doc Info." menu, choose "View partial source" and check that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids);
  - Or that the error is signaled by a chunk of text linked to the field by the aria-describedby property (select the field and the chunk of text, in the "Doc Info." menu, choose "View partial source" and check that the id attribute of the chunk of text matches the value of the aria-describedby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-describedby may contain several ids);
  - Or that the field has a required attribute or a type (HTML5 field types like e-mail, etc.) that automatically triggers an error (select the field, in the "Doc Info." menu, choose "View partial source");
  - Or that the error is signaled by an aria-invalid="true" property (select the field, in the "Doc Info." menu, choose "View partial source").
2. For each signaled error, where is used an aria-label or aria-invalid property, check that an explicit visual cue is provided in the label, or via a chunk of text linked by the aria-labelledby or aria-describedby property.
3. If the errors are displayed after a page reload, check the presence, in the title of the page, of an expression like "error in the form".
If true, the test is passed.

With the WebDev (Firefox)

Fill the form fields with values likely to trigger input errors (for example leaving a mandatory field empty, entering an invalid e-mail address, etc.).
In the resulting page:
1. In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
2. In the "Information" menu, choose "Display Element Information", "Display Title Attributes", "Display Id & Class Details".
3. Right-click in the page and choose "Inspect Element".
4. Click on "Styles Editor". In the left column, select "Import" and choose the "check-indication-erreur.css" style sheet:
  - The labels are outlined with a solid grey border.
  - The fields with an aria-label property are outlined with a dashed blue border.
  - The fields with an aria-labelledby property are outlined with a dotted red border.
  - The fields with a required attribute are outlined with an orange double left border.
  - The fields with an aria-required property are outlined with a blue left border.
  - The fields with an aria-describedby property are outlined with a violet-colored inset border.
  - The fields with an aria-invalid are outlined with a black outset border.
For each error message, check:
1. - That the error is signaled by a text located before the field in error;
  - Or that the error is signaled in the label tag;
  - Or that the error is signaled in the title attribute;
  - Or that the error is signaled in the aria-label attribute (select the field and check in the "DOM" block of the Element Inspector);
  - Or that the error is signaled by a chunk of text linked to the field by the aria-labelledby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids);
  - Or that the error is signaled by a chunk of text linked to the field by the aria-describedby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector that the id attribute of the chunk of text matches the value of the aria-describedby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-describedby may contain several ids).
  - Or that the field has a required attribute or a type (HTML5 field types like e-mail, etc.) that automatically triggers an error (select the field, and check in the "DOM" block of the Element Inspector);
  - Or that the error is signaled by an aria-invalid="true" property (select the field, and check in the "DOM" block of the Element Inspector).
2. For each signaled error, where is used an aria-label or aria-invalid property, check that an explicit visual cue is provided in the label, or via a chunk of text linked by the aria-labelledby or aria-describedby property.
3. If the errors are displayed after a page reload, check the presence, in the title of the page, of an expression like "error in the form".
If true, the test is passed.

With the WebDev (Chrome)

Fill the form fields with values likely to trigger input errors (for example leaving a mandatory field empty, entering an invalid e-mail address, etc.).
In the resulting page:
1. In the "CSS" menu, choose "Disable All Styles".
2. In the "Information" menu, choose "Display Element Information", "Display Title Attributes", "Display Id & Class details".
For each error message, check:
1. - That the error is signaled by a text located before the field in error;
  - Or that the error is signaled in the label tag;
  - Or that the error is signaled in the title attribute;
  - Or that the error is signaled in the aria-label attribute (select the field and check in the "DOM" block of the Element Inspector);
  - Or that the error is signaled by a chunk of text linked to the field by the aria-labelledby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids);
  - Or that the error is signaled by a chunk of text linked to the field by the aria-describedby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector that the id attribute of the chunk of text matches the value of the aria-describedby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-describedby may contain several ids).
  - Or that the field has a required attribute or a type (HTML5 field types like e-mail, etc.) that automatically triggers an error (select the field, and check in the "DOM" block of the Element Inspector);
  - Or that the error is signaled by an aria-invalid="true" property (select the field, and check in the "DOM" block of the Element Inspector).
2. For each signaled error, where is used an aria-label or aria-invalid property, check that an explicit visual cue is provided in the label, or via a chunk of text linked by the aria-labelledby or aria-describedby property.
3. If the errors are displayed after a page reload, check the presence, in the title of the page, of an expression like "error in the form".
If true, the test is passed.

Tests 11.10.7, 11.10.8, 11.10.9, 11.10.10

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "IE" menu choose "Show titles".
In the "Doc Info." menu, choose "Internet Explorer Accessibility Options".
In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-indication-mandatory.css" style sheet:
- The labels are outlined with a solid grey border.
- The fields with an aria-label property are outlined with a dashed blue border.
- The fields with an aria-labelledby property are outlined with a dotted red border.
- The fields with a required attribute are outlined with an orange double left border.
- The fields with an aria-required property are outlined with a blue left border.
- The fields with an aria-describedby property are outlined with a violet-colored inset border.
- The fields with an aria-invalid are outlined with a black outset border.
For each mandatory field that requires an indication of input type or format (e-mail address format for example), check:
1. - That the indication is provided by a text located before the field;
  - Or that the indication is provided in the label tag;
  - Or that the indication is provided in the title attribute, identical with the placeholder attribute if present;
  - Or that the indication is provided in the aria-label attribute (select the field and in the "Doc Info." menu, choose "View partial source");
  - Or that the indication is provided by a chunk of text linked to the field by the aria-labelledby property (select the field and the chunk of text, in the "Doc Info." menu, choose "View partial source" and check that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids);
  - Or that the indication is provided by a chunk of text linked to the field by the aria-describedby property (select the field and the chunk of text, in the "Doc Info." menu, choose "View partial source" and check that the id attribute of the chunk of text matches the value of the aria-describedby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-describedby may contain several ids);
2. For each indication of input type or format, where is used an aria-label property, check that an explicit visual cue is provided in the label, or via a chunk of text linked by the aria-labelledby or aria-describedby property.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Information" menu, choose "Display Element Information", "Display Title Attributes", "Display Id & Class Details".
Right-click in the page and choose "Inspect Element".
Click on "Styles Editor". In the left column, select "Import" and choose the "check-indication-mandatory.css" style sheet:
- The labels are outlined with a solid grey border.
- The fields with an aria-label property are outlined with a dashed blue border.
- The fields with an aria-labelledby property are outlined with a dotted red border.
- The fields with a required attribute are outlined with an orange double left border.
- The fields with an aria-required property are outlined with a blue left border.
- The fields with an aria-describedby property are outlined with a violet-colored inset border.
- The fields with an aria-invalid are outlined with a black outset border.
For each mandatory field that requires an indication of input type or format (e-mail address format for example), check:
1. - That the indication is provided by a text located before the field;
  - Or that the indication is provided in the label tag;
  - Or that the indication is provided in the title attribute, identical with the placeholder attribute if present;
  - Or that the indication is provided in the aria-label attribute (select the field and check in the "DOM" block of the Element Inspector);
  - Or that the indication is provided by a chunk of text linked to the field by the aria-labelledby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector and check that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids);
  - Or that the indication is provided by a chunk of text linked to the field by the aria-describedby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector and check that the id attribute of the chunk of text matches the value of the aria-describedby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-describedby may contain several ids);
2. For each indication of input type or format, where is used an aria-label property, check that an explicit visual cue is provided in the label, or via a chunk of text linked by the aria-labelledby or aria-describedby property.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Information" menu, choose "Display Element Information", "Display Title Attributes", "Display Id & Class details".
For each mandatory field that requires an indication of input type or format (e-mail address format for example), check:
1. - That the indication is provided by a text located before the field;
  - Or that the indication is provided in the label tag;
  - Or that the indication is provided in the title attribute, identical with the placeholder attribute if present;
  - Or that the indication is provided in the aria-label attribute (select the field and check in the "DOM" block of the Element Inspector);
  - Or that the indication is provided by a chunk of text linked to the field by the aria-labelledby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector and check that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids);
  - Or that the indication is provided by a chunk of text linked to the field by the aria-describedby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector and check that the id attribute of the chunk of text matches the value of the aria-describedby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-describedby may contain several ids);
2. For each indication of input type or format, where is used an aria-label property, check that an explicit visual cue is provided in the label, or via a chunk of text linked by the aria-labelledby or aria-describedby property.
If true, the test is passed.

Criterion 11.11 [AA] In each form, is input control accompanied, if necessary, by suggestions helping with the correction of input errors?

Tests 11.11.1, 11.11.2

With the WAT

Fill the form fields with values likely to trigger input errors (for example leaving a mandatory field empty, entering an invalid e-mail address, etc.).
In the resulting page:
1. In the "CSS" menu, choose "Disable CSS".
2. In the "IE" menu choose "Show titles".
3. In the "Doc Info." menu, choose "Internet Explorer Accessibility Options".
4. In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-indication-erreur-AA.css" style sheet:
  - The labels are outlined with a solid grey border.
  - The fields with an aria-label property are outlined with a dashed blue border.
Check each error message (to check if it is provided via the aria-label property, select the field, in the "Doc Info." menu, choose "View partial source"). Look for:
1. The presence of an indication of input type or format;
2. The presence of an example of actual input.
If true, the test is passed.

With the WebDev (Firefox)

Fill the form fields with values likely to trigger input errors (for example leaving a mandatory field empty, entering an invalid e-mail address, etc.).
In the resulting page:
1. In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
2. In the "Information" menu, choose "Display Element Information", "Display Title Attributes".
3. Right-click in the page and choose "Inspect Element".
4. Click on "Styles Editor". In the left column, select "Import" and choose the "check-indication-erreur-AA.css" style sheet:
  - The labels are outlined with a solid grey border.
  - The fields with an aria-label property are outlined with a dashed blue border.
Check each error message (to check if it is provided via the aria-label property, select the field and check in the "DOM" block of the Element Inspector). Look for:
1. The presence of an indication of input type or format;
2. The presence of an example of actual input.
If true, the test is passed.

With the WebDev (Chrome)

Fill the form fields with values likely to trigger input errors (for example leaving a mandatory field empty, entering an invalid e-mail address, etc.).
In the resulting page:
1. In the "CSS" menu, choose "Disable All Styles".
2. In the "Information" menu, choose "Display Element Information" and "Display Title Attributes".
3. Check each error message (to check if it is provided via the aria-label property, select the field and check in the "DOM" block of the Element Inspector). Look for:
  1. The presence of an indication of input type or format;
  2. The presence of an example of actual input.
If true, the test is passed.

Technical note about automatic format controls in HTML5.

Criterion 11.12 [AA] For each form, can financial, legal or personal data be changed, updated or retrieved by the user?

Tests 11.12.1, 11.12.2

For all

Fill the form.
Check that for each financial data (for example: income), legal data (for example: a reference to an administrative procedure) or personal data (for example: a phone number), the user can:
1. - Modify or delete the data, or cancel the actions done on these data during input (for example, the field input capability and the cancel functionality of the browser are enabled);
  - Or confirm, explicitly, the submission of these data via a dedicated mechanism (for example a specific form field or an additional step).
2. - Retrieve the deleted data during input;
  - Or confirm, explicitly, the deletion of these data via a dedicated mechanism (for example a specific form field or an additional step).
If true, the test is passed.

Criterion 11.13 [AAA] For each form, can all data be changed, updated or recovered by the user?

Tests 11.13.1, 11.13.2

For all

Fill the form.
Check that for each data, the user can:
1. - Modify or delete the data, or cancel the actions done on these data during input (for example, the field input capability and the cancel functionality of the browser are enabled);
  - Or confirm, explicitly, the submission of these data via a dedicated mechanism (for example a specific form field or an additional step).
2. - Retrieve the deleted data during input;
  - Or confirm, explicitly, the deletion of these data via a dedicated mechanism (for example a specific form field or an additional step).
If true, the test is passed.

Criterion 11.14 [AAA] For each form, is input assistance available?

Criterion 11.15 [AAA] For each form, is each input assistance relevant?

Tests 11.14.1, 11.14.2, 11.14.3, 11.14.4, 11.14.5, 11.14.6, 11.15.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "IE" menu choose "Show titles".
In the "Doc Info." menu, choose "Internet Explorer Accessibility Options".
In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-aide-saisie.css" style sheet:
- The labels are outlined with a solid grey border.
- The fields with an aria-label property are outlined with a dashed blue border.
- The fields with an aria-labelledby property are outlined with a dotted red border.
- The fields with an aria-describedby property are outlined with a violet-colored inset border.
Check that the input assistance elements (for example explicit indications, examples, etc.):
1. - Are available before the form;
  - Or are accessible via a link to a help page;
  - Or are available before the fields;
  - Or are available in the label tag;
  - Or are available in the title attribute;
  - Or are available in the aria-label attribute (select the field and check in the "DOM" block of the Element Inspector);
  - Or are available in a chunk of text linked to the field by the aria-labelledby property (select the field and the chunk of text, in the "Doc Info." menu, choose "View partial source" and check that the id attribute of the chunk of text matches the aria-labelledby property of the field. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids);
  - Or are available in a chunk of text linked to the field by the aria-describedby property (select the field and the chunk of text, in the "Doc Info." menu, choose "View partial source" and check that the id attribute of the chunk of text matches the aria-describedby property of the field. Note that several labels can be affected to the field with this method, thus aria-describedby may contain several ids);
  - Or that an assistance system (for example a virtual assistant, a live chat channel, a call center…) is available (note: may require to read the page with CSS enabled).
2. For each input help where is used an aria-label property, check that an equivalent, explicit visual cue, is provided;
3. For each input help, check that it is relevant (it allows to remove significant barriers for users with mental, cognitive or psychic disabilities, in particular).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Information" menu, choose "Display Element Information", "Display Title Attributes", "Display Id & Class Details".
Right-click in the page and choose "Inspect Element".
Click on "Styles Editor". In the left column, select "Import" and choose the "check-aide-saisie.css" style sheet:
- The labels are outlined with a solid grey border.
- The fields with an aria-label property are outlined with a dashed blue border.
- The fields with an aria-labelledby property are outlined with a dotted red border.
- The fields with an aria-describedby property are outlined with a violet-colored inset border.
Check that the input assistance elements (for example explicit indications, examples, etc.):
1. - Are available before the form;
  - Or are accessible via a link to a help page;
  - Or are available before the fields;
  - Or are available in the label tag;
  - Or are available in the title attribute;
  - Or are available in the aria-label attribute (select the field, in the "Doc Info." menu, choose "View partial source");
  - Or are available in a chunk of text linked to the field by the aria-labelledby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector and check that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids);
  - Or are available in a chunk of text linked to the field by the aria-describedby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector and check that the id attribute of the chunk of text matches the value of the aria-describedby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-describedby may contain several ids);
  - Or that an assistance system (for example a virtual assistant, a live chat channel, a call center…) is available (note: may require to read the page with CSS enabled).
2. For each input help where is used an aria-label property, check that an equivalent, explicit visual cue, is provided;
3. For each input help, check that it is relevant (it allows to remove significant barriers for users with mental, cognitive or psychic disabilities, in particular).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Information" menu, choose "Display Element Information", "Display Title Attributes", "Display Id & Class details".
Check that the input assistance elements (for example explicit indications, examples, etc.):
1. - Are available before the form;
  - Or are accessible via a link to a help page;
  - Or are available before the fields;
  - Or are available in the label tag;
  - Or are available in the title attribute;
  - Or are available in the aria-label attribute (select the field, in the "Doc Info." menu, choose "View partial source");
  - Or are available in a chunk of text linked to the field by the aria-labelledby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector and check that the id attribute of the chunk of text matches the value of the aria-labelledby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-labelledby may contain several ids);
  - Or are available in a chunk of text linked to the field by the aria-describedby property (select the field, then the chunk of text and check in the "DOM" block of the Element Inspector and check that the id attribute of the chunk of text matches the value of the aria-describedby attribute of the field. Note that several labels can be affected to the field with this method, thus aria-describedby may contain several ids);
  - Or that an assistance system (for example a virtual assistant, a live chat channel, a call center…) is available (note: may require to read the page with CSS enabled).
2. For each input help where is used an aria-label property, check that an equivalent, explicit visual cue, is provided;
3. For each input help, check that it is relevant (it allows to remove significant barriers for users with mental, cognitive or psychic disabilities, in particular).
If true, the test is passed.

Criterion 12.1 [AA] Does each set of pages have at least two different navigation systems (except in particular cases)?

Test 12.1.1

For all

For each set of pages of the site, check:
- The presence of a navigation menu and of a site map;
- Or the presence of a navigation menu and of a search engine (see note);
- Or the presence of a site map and of a search engine.
If true, the test is passed.

Note: for a search engine to be considered as a navigation system, it must provide access to all the contents of the website, and not only to a subset. A search engine limited to a catalog, for example, is not considered as a navigation system.

Criterion 12.2 [AA] On each set of pages, are the menu and the navigation bars always located at the same place (except in particular cases)?

Tests 12.2.1, 12.2.2

With the WAT

Select several pages of the same set.
Open each page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable CSS".
Check:
1. In the pages where CSS styles are disabled:
  1. That the navigation menu is always at the same place (considering the relative order of the page elements, it is always before the main content area, for example);
  2. That the navigation bars (for example a breadcrumb trail, navigation links in a collection of pages…) are always at the same place (considering the relative order of the page elements, the breadcrumb trail is always between the menu and the main content area, for example).
2. In the pages where CSS styles are enabled:
  1. That the navigation menu is always, visually, at the same place;
  2. That the navigation bars (for example a breadcrumb trail, navigation links in a collection of pages…) are always, visually, at the same place.
If true, the test is passed.

With the WebDev (Firefox)

Select several pages of the same set.
Open each page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
Check:
1. In the pages where CSS styles are disabled:
  1. That the navigation menu is always at the same place (considering the relative order of the page elements, it is always before the main content area, for example);
  2. That the navigation bars (for example a breadcrumb trail, navigation links in a collection of pages…) are always at the same place (considering the relative order of the page elements, the breadcrumb trail is always between the menu and the main content area, for example).
2. In the pages where CSS styles are enabled:
  1. That the navigation menu is always, visually, at the same place;
  2. That the navigation bars (for example a breadcrumb trail, navigation links in a collection of pages…) are always, visually, at the same place.
If true, the test is passed.

With the WebDev (Chrome)

Select several pages of the same set.
Open each page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable All Styles".
Check:
1. In the pages where CSS styles are disabled:
  1. That the navigation menu is always at the same place (considering the relative order of the page elements, it is always before the main content area, for example);
  2. That the navigation bars (for example a breadcrumb trail, navigation links in a collection of pages…) are always at the same place (considering the relative order of the page elements, the breadcrumb trail is always between the menu and the main content area, for example).
2. In the pages where CSS styles are enabled:
  1. That the navigation menu is always, visually, at the same place;
  2. That the navigation bars (for example a breadcrumb trail, navigation links in a collection of pages…) are always, visually, at the same place.
If true, the test is passed.

Criterion 12.3 [AA] On each set of pages, do the menu and the navigation bars have a consistent presentation (except in particular cases)?

Tests 12.3.1, 12.3.2

For all

For each set of pages, check:
1. That the navigation menu has a visual presentation that remains coherent across pages of the same set (the color set, the active page indications, the visual behavior are identical, for example);
2. That the navigation bars (for example a breadcrumb trail, navigation links in a collection of pages…) have a visual presentation that remains coherent across pages of the same set (the color set, the active page indications, the visual behavior are identical, for example).
If true, the test is passed.

Criterion 12.4 [AA] Is the site map page relevant?

Tests 12.4.1, 12.4.3

For all

Check that the site map represents the general architecture of the site (see note).
Spot, in the list of pages of the site map, the link texts that may be confusing, or likely to open obsolete pages for example. Follow the link and check that the target page is the one actually expected.
If true, the test is passed.

Note: A too complex or too deep site map is not recommended to help navigation. It is not mandatory that all pages are listed in the site map, if they can be reached, for example, from the home page of a section or of a catalog.

Test 12.4.2

With the WAT

In the "Check" menu choose "W3C link checker".
Check that all the links work as expected.
If true, the test is passed.

With the WebDev (Firefox)

In the "Tools" menu, choose "Validate Links".
Check that all the links work as expected.
If true, the test is passed.

With the WebDev (Chrome)

In the menu "Tools", choose "Validate Links".
Check that all the links work as expected.
If true, the test is passed.

Criterion 12.5 [AA] In each set of pages, is the site map page accessible in an identical way?

Tests 12.5.1, 12.5.2, 12.5.3

With the WAT

Select several pages of the same set.
Open each page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable CSS".
Check:
1. In the pages where CSS styles are disabled, that the means of access to the site map is always the same (a link or a button for example);
2. In the pages where CSS styles are disabled, that the means of access to the site map is always at the same place (considering the relative order of the page elements it is always on the top of the page, for example);
3. In the pages where CSS styles are enabled, that the means of access to the site map is always, visually, at the same place.
If true, the test is passed.

With the WebDev (Firefox)

Select several pages of the same set.
Open each page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
Check:
1. In the pages where CSS styles are disabled, that the means of access to the site map is always the same (a link or a button for example);
2. In the pages where CSS styles are disabled, that the means of access to the site map is always at the same place (considering the relative order of the page elements it is always on the top of the page, for example);
3. In the pages where CSS styles are enabled, that the means of access to the site map is always, visually, at the same place.
If true, the test is passed.

With the WebDev (Chrome)

Select several pages of the same set.
Open each page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable All Styles".
Check:
1. In the pages where CSS styles are disabled, that the means of access to the site map is always the same (a link or a button for example);
2. In the pages where CSS styles are disabled, that the means of access to the site map is always at the same place (considering the relative order of the page elements it is always on the top of the page, for example);
3. In the pages where CSS styles are enabled, that the means of access to the site map is always, visually, at the same place.
If true, the test is passed.

Criterion 12.6 [AA] In each set of pages, is the search function accessible in an identical way?

Tests 12.6.1, 12.6.2, 12.6.3

With the WAT

Select several pages of the same set.
Open each page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable CSS".
Check:
1. In the pages where CSS styles are disabled, that the search engine functionality is always the same (a form field for example);
2. In the pages where CSS styles are disabled, that the search engine is always at the same place (considering the relative order of the page elements it is always on the top of the page, for example);
3. In the pages where CSS styles are enabled, that the search engine is always, visually, at the same place.
If true, the test is passed.

With the WebDev (Firefox)

Select several pages of the same set.
Open each page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
Check:
1. In the pages where CSS styles are disabled, that the search engine functionality is always the same (a form field for example);
2. In the pages where CSS styles are disabled, that the search engine is always at the same place (considering the relative order of the page elements it is always on the top of the page, for example);
3. In the pages where CSS styles are enabled, that the search engine is always, visually, at the same place.
If true, the test is passed.

With the WebDev (Chrome)

Select several pages of the same set.
Open each page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable All Styles".
Check:
1. In the pages where CSS styles are disabled, that the search engine functionality is always the same (a form field for example);
2. In the pages where CSS styles are disabled, that the search engine is always at the same place (considering the relative order of the page elements it is always on the top of the page, for example);
3. In the pages where CSS styles are enabled, that the search engine is always, visually, at the same place.
If true, the test is passed.

Criterion 12.7 [AA] On each page within a collection of pages, are links facilitating navigation available?

Tests 12.7.1

For all

For each collection of pages, check:
1. The presence of a link giving access to the previous page;
2. The presence of a link giving access to the next page;
3. The presence of a method giving access to any page in the collection: links grouped by ten, selection list (select tag), form field, for example.
If true, the test is passed.

Criterion 12.8 [AAA] On each Web page, is a breadcrumb trail available (except in particular cases)?

Criterion 12.9 [AAA] On each Web page, is the breadcrumb trail relevant?

Tests 12.8.1, 12.9.1

For all

Check:
1. The presence of a breadcrumb trail;
2. That the breadcrumb trail represents the position of the page in the site tree.
If true, the test is passed.

Criterion 12.10 [A] On each Web page, are groups of important links (menu, navigation bar…) and the main content area identified?

Tests 12.10.1, 12.10.2, 12.10.3

With the WAT

In the page, spot the groups of important links (main navigation menu, navigation menu in a section of the site for example).
Right-click and choose "Inspect Element", and check:
1. That the group of important links is implemented in a common element (a ul or a div tag, for example).
2. - That the tag containing the group has an id attribute;
  - Or that the tag containing the group is immediately preceded by an anchor (a tag with an id attribute and/or a name attribute and no href attribute);
  - Or that the first link of the group is immediately preceded by an anchor (a tag with an id attribute and/or a name attribute and no href attribute).
If true, the test is passed.

With the WebDev (Firefox)

In the page, spot the groups of important links (main navigation menu, navigation menu in a section of the site for example).
Right-click and choose "Inspect Element", and check:
1. That the group of important links is implemented in a common element (a ul or a div tag, for example).
2. - That the tag containing the group has an id attribute;
  - Or that the tag containing the group is immediately preceded by an anchor (a tag with an id attribute and/or a name attribute and no href attribute);
  - Or that the first link of the group is immediately preceded by an anchor (a tag with an id attribute and/or a name attribute and no href attribute).
If true, the test is passed.

With the WebDev (Chrome)

In the page, spot the groups of important links (main navigation menu, navigation menu in a section of the site for example).
Right-click and choose "Inspect", and check:
1. That the group of important links is implemented in a common element (a ul or a div tag, for example).
2. - That the tag containing the group has an id attribute;
  - Or that the tag containing the group is immediately preceded by an anchor (a tag with an id attribute and/or a name attribute and no href attribute);
  - Or that the first link of the group is immediately preceded by an anchor (a tag with an id attribute and/or a name attribute and no href attribute).
If true, the test is passed.

Test 12.10.4

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Doc Info." menu, choose "Internet Explorer Accessibility Options".
In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-landmark-aria.css" style sheet.
The areas having a landmark role are outlined with a green border.
Check:
1. That the header area has a banner role. If the document type is HTML5 (see note), check that the banner role is implemented on a header tag (right-click and choose "Inspect Element");
2. That the main navigation menu has a navigation role. If the document type is HTML5 (see note), check that the navigation role is implemented on a nav tag (right-click and choose "Inspect Element");
3. That the search area has a search role;
4. That the main content area has a main role. If the document type is HTML5 (see note), check that the main role is implemented on a main tag (right-click and choose "Inspect Element").
5. That the page footer area has a contentinfo role. If the document type is HTML5 (see note), check that the contentinfo role is implemented on a footer tag (right-click and choose "Inspect Element");
6. That the banner, search, main, and contentinfo roles are unique in the page;
7. That the navigation role is reserved for main and secondary navigation area (main navigation menu, section menu, breadcrumb trail, navigation links of a collection of pages…).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the "Information" menu, choose "Display Element Information".
Right-click in the page and choose "Inspect Element".
Click on "Styles Editor". In the left column, select "Import" and choose the "check-landmark-aria.css" style sheet.
The areas having a landmark role are outlined with a green border.
Check:
1. That the header area has a banner role. If the document type is HTML5 (see note), check that the banner role is implemented on a header tag (click on the element and check in the "DOM" block);
2. That the main navigation menu has a navigation role. If the document type is HTML5 (see note), check that the navigation role is implemented on a nav tag (click on the element and check in the "DOM" block);
3. That the search area has a search role;
4. That the main content area has a main role. If the document type is HTML5 (see note), check that the main role is implemented on a main tag (click on the element and check in the "DOM" block).
5. That the page footer area has a contentinfo role. If the document type is HTML5 (see note), check that the contentinfo role is implemented on a footer tag (right-click on the element and check in the "DOM" block);
6. That the banner, search, main, and contentinfo roles are unique in the page;
7. That the navigation role is reserved for main and secondary navigation area (main navigation menu, section menu, breadcrumb trail, navigation links of a collection of pages…).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Information" menu, choose "Display Element Information".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type *:before, *:after { display: block; background: #f2f2f2; font-weight: bold; font-size: 100%; font-size: 1rem; } main, [role="banner"], [role="navigation"], [role="contentinfo"], [role="main"], [role="search"], header[role="banner"], nav[role="navigation"], footer[role="contentinfo"], main[role="main"], input[role="search"], form[role="search"] { display: block; width: 100%; margin: 0.5em 0; padding: 0 0.5em; } header[role="banner"], nav[role="navigation"], footer[role="contentinfo"], main[role="main"], [role="search"] { border: 2px solid green; } header[role="banner"]:before { content: '[role="banner"]'; } nav[role="navigation"]:before { content: '[role="navigation"]'; } footer[role="contentinfo"]:before { content: '[role="contentinfo"]'; } main[role="main"]:before { content: '[role="main"]'; } nav[role="navigation"]:before { content: '[role="navigation"]'; } [role="search"]:before { content: '[role="search"]'; } .
The areas having a landmark role are outlined with a green border.
Check:
1. That the header area has a banner role. If the document type is HTML5 (see note), check that the banner role is implemented on a header tag (click on the element and check in the "DOM" block);
2. That the main navigation menu has a navigation role. If the document type is HTML5 (see note), check that the navigation role is implemented on a nav tag (click on the element and check in the "DOM" block);
3. That the search area has a search role;
4. That the main content area has a main role. If the document type is HTML5 (see note), check that the main role is implemented on a main tag (click on the element and check in the "DOM" block).
5. That the page footer area has a contentinfo role. If the document type is HTML5 (see note), check that the contentinfo role is implemented on a footer tag (right-click on the element and check in the "DOM" block);
6. That the banner, search, main, and contentinfo roles are unique in the page;
7. That the navigation role is reserved for main and secondary navigation area (main navigation menu, section menu, breadcrumb trail, navigation links of a collection of pages…).
If true, the test is passed.

Note on HTML5 document type: In general, the version of the HTML in use in the page is defined by the DOCTYPE declaration. E.g.: <!DOCTYPE html>. Unless a valid HTML 4 (and below) or XHTML document type is specified, the document type is HTML5 by default. However, the RGAA considers that any page containing tags or attributes that belong specifically to HTML5, has an HTML5 document type, regardless of its DOCTYPE declaration.

Note on landmark roles: read the technical note about the landmark roles and skiplinks.

Criterion 12.11 [A] On each Web page, are bypass or skip links to groups of important links and to the main content area available (except in particular cases)?

Tests 12.11.1, 12.11.2, 12.11.3, 12.11.4

With the WAT

Open the page in two different browser tabs.
For one of the tabs, in the "CSS" menu, choose "Disable CSS".
In the page where CSS styles are disabled, check:
1. The presence, if necessary (see note), of a link giving direct access to the main menu;
2. The presence, if necessary (see note), of a link giving direct access to the main content area;
3. That the links work;
4. That the links are always at the same place (considering the relative order of the page elements, they are always at the top of the page, for example), in each set of pages.
In the page where CSS styles are enabled, check:
1. That the links are always, visually, at the same place in each set of pages;
2. That the links appear at least when they receive focus, when the user tabs through the content with the keyboard.
If true, the test is passed.

With the WebDev (Firefox)

Open the page in two different browser tabs.
In the "CSS" menu, choose "Disable Styles" then "Disable All Styles".
In the page where CSS styles are disabled, check:
1. The presence, if necessary (see note), of a link giving direct access to the main menu;
2. The presence, if necessary (see note), of a link giving direct access to the main content area;
3. That the links work;
4. That the links are always at the same place (considering the relative order of the page elements, they are always at the top of the page, for example), in each set of pages.
In the page where CSS styles are enabled, check:
1. That the links are always, visually, at the same place in each set of pages;
2. That the links appear at least when they receive focus, when the user tabs through the content with the keyboard.
If true, the test is passed.

With the WebDev (Chrome)

Open the page in two different browser tabs.
In the "CSS" menu, choose "Disable All Styles".
In the page where CSS styles are disabled, check:
1. The presence, if necessary (see note), of a link giving direct access to the main menu;
2. The presence, if necessary (see note), of a link giving direct access to the main content area;
3. That the links work;
4. That the links are always at the same place (considering the relative order of the page elements, they are always at the top of the page, for example), in each set of pages.
In the page where CSS styles are enabled, check:
1. That the links are always, visually, at the same place in each set of pages;
2. That the links appear at least when they receive focus, when the user tabs through the content with the keyboard.
If true, the test is passed.

Note: it is not mandatory that all skip or bypass links are systematically proposed. Generally, the link to main content is always available to skip the navigation menu, however links to the menu or the search form are useless if these elements are located immediately in the top of the page, for example.

Criterion 12.12 [AAA] On each Web page, is the current page specified in the navigation menu?

Test 12.12.1

For all

Check that the active page is signaled in the main navigation menu, or the secondary navigation menus for the pages of a subsection, for example.
If true, the test is passed.

Criterion 12.13 [A] On each Web page, is tabbing order consistent?

Criterion 12.14 [A] On each Web page, navigation must not contain keyboard trap. Has this rule been followed?

Tests 12.13.1, 12.13.2, 12.14.1

With the WAT

In the "Structure" menu, choose "Visually show focus".
Tab through every piece of content in the page and check that the tabbing order remains coherent (see note).
Spot the elements (links or buttons) that update content via a script (display of hidden elements, contents update in AJAX, for example).
Position the focus on the triggering element and activate it.
After the updated content has been displayed, check that the tabbing order remains coherent.
Check that there is no keyboard trap (see note):
- Starting from the current position, the next or previous focusable element can be reached with the tab key (SHIFT + TAB);
- Or the element currently focused proposes a keyboard-based method (for example a keyboard shortcut) to reach the next or previous focusable element.
If true, the test is passed.

With the WebDev (Firefox)

Right-click in the page and choose "Inspect Element".
Tab through every piece of content in the page and check that the tabbing order remains coherent (see note).
Spot the elements (links or buttons) that update content via a script (display of hidden elements, contents update in AJAX, for example).
Position the focus on the triggering element and activate it.
After the updated content has been displayed, check that the tabbing order remains coherent.
Check that there is no keyboard trap (see note):
- Starting from the current position, the next or previous focusable element can be reached with the tab key (SHIFT + TAB);
- Or the element currently focused proposes a keyboard-based method (for example a keyboard shortcut) to reach the next or previous focusable element.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type *:focus{border:2px solid red!important;}.
Tab through every piece of content in the page and check that the tabbing order remains coherent (see note).
Spot the elements (links or buttons) that update content via a script (display of hidden elements, contents update in AJAX, for example).
Position the focus on the triggering element and activate it.
After the updated content has been displayed, check that the tabbing order remains coherent.
Check that there is no keyboard trap (see note):
- Starting from the current position, the next or previous focusable element can be reached with the tab key (SHIFT + TAB);
- Or the element currently focused proposes a keyboard-based method (for example a keyboard shortcut) to reach the next or previous focusable element.
If true, the test is passed.

Note: it is not mandatory that the tabbing order follows the natural reading order (from left to right and from top to bottom, for example), as long as the elements are reached in a coherent order.

Note: with some browsers, like Firefox for example, an implementation bug of the object tag prevents the user from reaching into it with the tab key. This behavior is not considered as non-conforming (the author cannot solve this issue).

Consultation

Criterion 13.1 [A] For each Web page, can the user control each time limit that modifies content (except in particular cases)?

Test 13.1.1

For all

In the page, spot the refresh processes initiated in the content of object, embed,svg or canvas tags, and by a <meta http-equiv="refresh" content="[counter]"> tag (in the head tag of the page).
Check for each refresh process:
- The presence of a mechanism allowing the user to stop and restart the refresh process;
- Or the presence of a mechanism allowing the user to increase the time limit between two refresh processes by ten times, at least;
- Or the presence of a mechanism that warns the user of the imminence of the refresh process, leaves 20 seconds, at least, to the user, to increase the time limit before the next refresh process;
- Or that the time limit between two refresh processes is 20 hours, at least.
If true, the test is passed.

Test 13.1.2

For all

In the page, spot the redirections initiated by a <meta http-equiv="refresh" content="0;URL='[Targeted URL]/'" /> tag.
Check that the redirection is immediate.
If true, the test is passed.

Test 13.1.3

For all

In the page, spot the redirections initiated by a script (in the form of a countdown for example).
Check:
- The presence of a mechanism allowing the user to stop and restart the redirection;
- Or the presence of a mechanism allowing the user to increase the time limit before the redirection by ten times, at least;
- Or the presence of a mechanism that warns the user of the imminence of the redirection, leaves 20 seconds, at least, to the user, to increase the time limit before the next redirection;
- Or that the time limit before the redirection is 20 hours, at least.
If true, the test is passed.

Test 13.1.4

For all

In the page, spot the processes limiting the session time (for example after an authentication).
Check:
- The presence of a mechanism allowing the user to suppress the time limit;
- Or the presence of a mechanism allowing the user to increase the time limit;
- Or that the time limit is 20 hours, at least.
If true, the test is passed.

Criterion 13.2 [A] On each Web page, is the user warned each time a new window opens?

Tests 13.2.1, 13.2.2, 13.2.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Doc Info." menu, choose "Internet Explorer Accessibility Options".
In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-target-new-windows.css" style sheet.
The links with a target attribute, the object and embed tags, and forms elements are outlined with a green border.
For the links (a tags) that have the target attribute with a value different from _self, _top or _parent, check that these links have an explicit indication in the link text or in the link context.
Spot the object, embed elements or the forms elements likely to open a new window.
For the elements that open in a new window, check that an explicit indication is provided to the user before the triggering of the action (for example via the text or the title of a button…).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
Right-click in the page and choose "Inspect Element".
Click on "Styles Editor". In the left column, select "Import" and choose the "check-target-new-windows.css" style sheet.
The links with a target attribute, the object and embed tags, and forms elements are outlined with a green border.
For the links (a tags) that have the target attribute with a value different from _self, _top or _parent, check that these links have an explicit indication in the link text or in the link context.
Spot the object, embed elements or the forms elements likely to open a new window.
For the elements that open in a new window, check that an explicit indication is provided to the user before the triggering of the action (for example via the text or the title of a button…).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type *:before, *:after{ display:block; background:#f2f2f2; font-weight:bold; font-size:100%; font-size:1rem; } a[target], object, embed, input, select, textarea, button{ display:block; margin-bottom:3px; border: 2px solid green; } a[target]:before{ content: "target="attr(target)""; }.
The links with a target attribute, the object and embed tags, and forms elements are outlined with a green border.
For the links (a tags) that have the target attribute with a value different from _self, _top or _parent, check that these links have an explicit indication in the link text or in the link context.
Spot the object, embed elements or the forms elements likely to open a new window.
For the elements that open in a new window, check that an explicit indication is provided to the user before the triggering of the action (for example via the text or the title of a button…).
If true, the test is passed.

Criterion 13.3 [A] On each Web page, the opening of a new window must not happen without user action. Has this rule been followed?

Test 13.3.1

For all

Check that when the page opens, no new window (pop-up or pop-under for example) opens.
If true, the test is passed.

Criterion 13.4 [AAA] On each Web page, a task must not require a time limit to be completed, except if it occurs in real time or if this time limit is essential. Has this rule been followed?

Test 13.4.1

For all

For each task that requires a time limit, check:
- That the task occurs in real time;
- Or that the time limit is essential to properly execute the task.
If true, the test is passed.

Criterion 13.5 [AAA] On each Web page, when an authenticated session is interrupted, is the data entered by the user retrieved after re-aul'nticating?

Test 13.5.1

For all

In the page, spot a task requiring to open an authenticated session (for example to access to a client account).
Log in and spot a form that can be filled.
Fill the form and log out before submitting the form.
Log in again and check that all data input at the previous step are present.
If true, the test is passed.

Criterion 13.6 [A] On each Web page, for each file that can be downloaded, is there sufficient information provided (except in particular cases)?

Tests 13.6.1, 13.6.2, 13.6.3

With the WAT

In the "CSS" menu, choose "Disable CSS".
Spot the links and the form controls (a form button or a download form for example) allowing to download a file.
For each file that can be downloaded, check:
1. The presence of a format indication (for example, ".odt") in the link text, the link context or prior to the download for the form control;
2. The presence of a weight indication in the link text, the link context or prior to the download for the form control;
3. The presence, for documents in a language different from the page, of a human language indication (for example "in French") in the link text, the link context or prior to the download for the form control.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
Spot the links and the form controls (a form button or a download form for example) allowing to download a file.
For each file that can be downloaded, check:
1. The presence of a format indication (for example, ".odt") in the link text, the link context or prior to the download for the form control;
2. The presence of a weight indication in the link text, the link context or prior to the download for the form control;
3. The presence, for documents in a language different from the page, of a human language indication (for example "in French") in the link text, the link context or prior to the download for the form control.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Spot the links and the form controls (a form button or a download form for example) allowing to download a file.
For each file that can be downloaded, check:
1. The presence of a format indication (for example, ".odt") in the link text, the link context or prior to the download for the form control;
2. The presence of a weight indication in the link text, the link context or prior to the download for the form control;
3. The presence, for documents in a language different from the page, of a human language indication (for example "in French") in the link text, the link context or prior to the download for the form control.
If true, the test is passed.

Criterion 13.7 [A] On each Web page, does each office document that can be downloaded have an accessible version if necessary?

Criterion 13.8 [A] For each office document with an accessible version, does this version provide the same information?

Tests 13.7.1, 13.8.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
Spot the links and the form controls (a form button or a download form for example) allowing to download an office type file.
For each office type file that can be downloaded, check the presence of an alternative version presented as accessible.
If the proposed alternative is in a rich text format (pdf, odt, doc, docx, EPUB/DAISY), download the proposed alternative:
1. For the documents in .pdf format, analyze the file with the PAC (PDF Accessibility Checker) tool and check the absence of accessibility errors in the document (see note).
2. For the documents in .doc or .docx formats, analyze the file with the Accessibility Checker tool in Microsoft Office (available as per the 2010 version) and check the absence of accessibility errors (see note).
3. For the documents in .odt format, analyze the document with the OpenOffice editor and check that its contents are conforming with the list of criteria for downloadable office documents (ODT, 74 kb, in French) (see note for an alternative method).
4. For the documents in EPUB/DAISY format, analyze the document with an EPUB/DAISY editor and check that its contents are conforming with the list of criteria for downloadable office documents (ODT, 74 kb, in French).
5. Open the two documents (the original document and its accessible version) and check that they both provide the same information.
If the proposed alternative is in HTML, check:
1. That the content conforms to the RGAA level double A, at least;
2. That the two documents (the original document and its accessible HTML version) both provide the same information.
If not, for the files in a rich text format (pdf, odt, doc, docx, EPUB/DAISY), download the file:
1. For the documents in .pdf format, analyze the file with the PAC (PDF Accessibility Checker) tool and check the absence of accessibility errors in the document (see note).
2. For the documents in .doc or .docx formats, analyze the file with the Accessibility Checker tool in Microsoft Office (available as per the 2010 version) and check the absence of accessibility errors (see note).
3. For the documents in .odt format, analyze the document with the OpenOffice editor and check that its contents are conforming with the list of criteria for downloadable office documents (ODT, 74 kb, in French) (see note for an alternative method).
4. For the documents in EPUB/DAISY format, analyze the document with an EPUB/DAISY editor and check that its contents are conforming with the list of criteria for downloadable office documents (ODT, 74 kb, in French).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
Spot the links and the form controls (a form button or a download form for example) allowing to download an office type file.
For each office type file that can be downloaded, check the presence of an alternative version presented as accessible.
If the proposed alternative is in a rich text format (pdf, odt, doc, docx, EPUB/DAISY), download the proposed alternative:
1. For the documents in .pdf format, analyze the file with the PAC (PDF Accessibility Checker) tool and check the absence of accessibility errors in the document (see note).
2. For the documents in .doc or .docx formats, analyze the file with the Accessibility Checker tool in Microsoft Office (available as per the 2010 version) and check the absence of accessibility errors (see note).
3. For the documents in .odt format, analyze the document with the OpenOffice editor and check that its contents are conforming with the list of criteria for downloadable office documents (ODT, 74 kb, in French) (see note for an alternative method).
4. For the documents in EPUB/DAISY format, analyze the document with an EPUB/DAISY editor and check that its contents are conforming with the list of criteria for downloadable office documents (ODT, 74 kb, in French).
5. Open the two documents (the original document and its accessible version) and check that they both provide the same information.
If the proposed alternative is in HTML, check:
1. That the content conforms to the RGAA level double A, at least;
2. That the two documents (the original document and its accessible HTML version) both provide the same information.
If not, for the files in a rich text format (pdf, odt, doc, docx, EPUB/DAISY), download the file:
1. For the documents in .pdf format, analyze the file with the PAC (PDF Accessibility Checker) tool and check the absence of accessibility errors in the document (see note).
2. For the documents in .doc or .docx formats, analyze the file with the Accessibility Checker tool in Microsoft Office (available as per the 2010 version) and check the absence of accessibility errors (see note).
3. For the documents in .odt format, analyze the document with the OpenOffice editor and check that its contents are conforming with the list of criteria for downloadable office documents (ODT, 74 kb, in French) (see note for an alternative method).
4. For the documents in EPUB/DAISY format, analyze the document with an EPUB/DAISY editor and check that its contents are conforming with the list of criteria for downloadable office documents (ODT, 74 kb, in French).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles" ».
Spot the links and the form controls (a form button or a download form for example) allowing to download an office type file.
For each office type file that can be downloaded, check the presence of an alternative version presented as accessible.
If the proposed alternative is in a rich text format (pdf, odt, doc, docx, EPUB/DAISY), download the proposed alternative:
1. For the documents in .pdf format, analyze the file with the PAC (PDF Accessibility Checker) tool and check the absence of accessibility errors in the document (see note).
2. For the documents in .doc or .docx formats, analyze the file with the Accessibility Checker tool in Microsoft Office (available as per the 2010 version) and check the absence of accessibility errors (see note).
3. For the documents in .odt format, analyze the document with the OpenOffice editor and check that its contents are conforming with the list of criteria for downloadable office documents (ODT, 74 kb, in French) (see note for an alternative method).
4. For the documents in EPUB/DAISY format, analyze the document with an EPUB/DAISY editor and check that its contents are conforming with the list of criteria for downloadable office documents (ODT, 74 kb, in French).
5. Open the two documents (the original document and its accessible version) and check that they both provide the same information.
If the proposed alternative is in HTML, check:
1. That the content conforms to the RGAA level double A, at least;
2. That the two documents (the original document and its accessible HTML version) both provide the same information.
If not, for the files in a rich text format (pdf, odt, doc, docx, EPUB/DAISY), download the file:
1. For the documents in .pdf format, analyze the file with the PAC (PDF Accessibility Checker) tool and check the absence of accessibility errors in the document (see note).
2. For the documents in .doc or .docx formats, analyze the file with the Accessibility Checker tool in Microsoft Office (available as per the 2010 version) and check the absence of accessibility errors (see note).
3. For the documents in .odt format, analyze the document with the OpenOffice editor and check that its contents are conforming with the list of criteria for downloadable office documents (ODT, 74 kb, in French) (see note for an alternative method).
4. For the documents in EPUB/DAISY format, analyze the document with an EPUB/DAISY editor and check that its contents are conforming with the list of criteria for downloadable office documents (ODT, 74 kb, in French).
If true, the test is passed.

Note about the PAC tool: the tool analyzes the PDF document from the accessibility point of view, but also on quality criteria (for example the PDF/UA norm). Only errors related to criteria present in the "List of criteria for downloadable office documents" qualify the criteria as "Non-conforming". Besides, this tool works only on Microsoft Windows-based systems. On Mac systems, the check must be done manually.

Note about Microsoft Office: the suite includes an Accessibility Checker (accessible via this menu: "File > Info > Check for Issues > Check Accessibility"). This checker can be considerably improved by the "Word Accessibility Plug-in" (see in the Tools section). This plugin works only on Windows. On Mac systems, the check must be done manually.

Note about documents in .odt format: OpenOffice and LibreOffice do not include accessibility checkers. A faster method than the manual analysis may be to save the document as .docx and check it with Microsoft Office Accessibility Checker. Caution, though: this quick method must be used for very simple documents only, because some accessibility-related information is not correctly transcoded. This is true for human language indications, for some images alternatives or for merged header cells in tables, for example.

Note about the EPUB format: currently there is no free editor allowing to easily check code in EPUB 3 format.

Blue Griffon Epub Edition can be used, but it requires to purchase a license.
Another solution would be to use an XML editor that supports the EPUB format. For example, the oXygen editor has, among others, an EPUB code validator, but it also requires to purchase a license.
One last solution consists in unzipping the EPUB file, which gives access to the whole set of files in XHTML format and their dependencies. A simple HTML editor allows to inspect the code. However, the complex structure of an EPUB file makes this operation very tedious.

Note about derogated documents: the RGAA propose a derogation status in certain cases (see the RGAA companion guide). In this case, the tests do not have to be performed, the accessible version being provided on user request.

Criterion 13.9 [AAA] On each Web page, are unusual expressions, idioms or jargon made explicit?

Criterion 13.10 [AAA] On each Web page, for each expression used in an unusual or restricted way, each idiom or jargon with a definition, is this definition relevant?

Tests 13.9.1, 13.10.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Doc Info." menu, choose "Internet Explorer Accessibility Options".
In the configuration window, check the "Format documents using my style sheet" checkbox and choose the "check-jargon.css" style sheet.
The dfn tags and the definition lists (dl, dt, dd tags) are outlined with a green border.
For each unusual expression, idiom or jargon, check:
1. - That a definition is provided, in the adjacent context (immediately before or after), by a dfn tag;
  - Or that a definition is provided via a definition list (dl tag: the defined term is in a dt tag and the definition data in a dd tag);
  - Or that there is a definition in the page;
  - Or that the term to be defined is included in a link that gives access to its definition.
2. That the definition is relevant (it allows to understand the expression).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
Right-click in the page and choose "Inspect Element".
Click on "Styles Editor". In the left column, select "Import" and choose the "check-jargon.css" style sheet.
The dfn tags and the definition lists (dl, dt, dd tags) are outlined with a green border.
For each unusual expression, idiom or jargon, check:
1. - That a definition is provided, in the adjacent context (immediately before or after), by a dfn tag;
  - Or that a definition is provided via a definition list (dl tag: the defined term is in a dt tag and the definition data in a dd tag);
  - Or that there is a definition in the page;
  - Or that the term to be defined is included in a link that gives access to its definition.
2. That the definition is relevant (it allows to understand the expression).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "CSS" menu, choose "Edit CSS", and in the field at the bottom of the window, type dfn, dl, dt, dd{ border: 2px solid green; }.
The dfn tags and the definition lists (dl, dt, dd tags) are outlined with a green border.
For each unusual expression, idiom or jargon, check:
1. - That a definition is provided, in the adjacent context (immediately before or after), by a dfn tag;
  - Or that a definition is provided via a definition list (dl tag: the defined term is in a dt tag and the definition data in a dd tag);
  - Or that there is a definition in the page;
  - Or that the term to be defined is included in a link that gives access to its definition.
2. That the provided definition is relevant (it allows to understand the expression).
If true, the test is passed.

Criterion 13.11 [A] On each Web page, does each cryptic content (ASCII art, emoticon, leetspeak) have an alternative?

Criterion 13.12 [A] On each Web page, for each cryptic content (ASCII art, emoticon, leetspeak) with an alternative, is this alternative relevant?

Tests 13.11.1, 13.12.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
In the "Doc Info." menu, choose "Show title".
For each cryptic content (ASCII art, emoticon, leetspeak), check:
1. - That a definition is available via a title attribute, on a link, a form control, an abbreviation (abbr tag) for example;
  - Or that a definition is provided in the adjacent context (immediately before or after).
2. That the provided definition is relevant (it allows to understand the content or its purpose).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
In the "Information" menu, choose "Display Title Attributes".
For each cryptic content (ASCII art, emoticon, leetspeak), check:
1. - That a definition is available via a title attribute, on a link, a form control, an abbreviation (abbr tag) for example;
  - Or that a definition is provided in the adjacent context (immediately before or after).
2. That the provided definition is relevant (it allows to understand the content or its purpose).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
In the "Information" menu, choose "Display Title Attributes".
For each cryptic content (ASCII art, emoticon, leetspeak), check:
1. - That a definition is available via a title attribute, on a link, a form control, an abbreviation (abbr tag) for example;
  - Or that a definition is provided in the adjacent context (immediately before or after).
2. That the provided definition is relevant (it allows to understand the content or its purpose).
If true, the test is passed.

Criterion 13.13 [AAA] On each Web page, for each word whose meaning cannot be understood without knowing the pronunciation, is this pronunciation specified?

Tests 13.13.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
For each word whose meaning cannot be understood without knowing the pronunciation (see note), check:
1. That the pronunciation indication is provided in the adjacent context (immediately before or after);
2. That the pronunciation indication is provided is provided via a link (to a note or an audio file for example).
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
For each word whose meaning cannot be understood without knowing the pronunciation (see note), check:
1. That the pronunciation indication is provided in the adjacent context (immediately before or after);
2. That the pronunciation indication is provided is provided via a link (to a note or an audio file for example).
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
For each word whose meaning cannot be understood without knowing the pronunciation (see note), check:
1. That the pronunciation indication is provided in the adjacent context (immediately before or after);
2. That the pronunciation indication is provided is provided via a link (to a note or an audio file for example).
If true, the test is passed.

Note: pronunciation issues can occur when two words are spelled identically but must be pronounced differently to be understood. In the phrase "Read everything that can be read", a vocal synthesizer may not be able to pronounce appropriately each of the "read". A solution can be to indicate the correct pronunciation in the adjacent context, for example  Read everything that can be read (pronounced "red"). . Another solution is to insert a link, for example  Read everything that can be read (pronunciation). .

Note: this word is pronounced "red".

Criterion 13.14 [AAA] On each Web page, does each text that requires a reading ability more advanced than the lower secondary education level have an alternative version?

Tests 13.14.1

With the WAT

In the "CSS" menu, choose "Disable CSS".
Assess the reading difficulty of the text for a user whose reading abilities are equivalent to lower secondary education level (see note).
If the text seem too difficult to understand, check:
1. The presence of graphics, icons or figures helping to make the content more explicit;
2. Or the presence of a text summary adapted to the targeted reading level;
3. Or the presence of a sign language version for the Deaf and the Hard-of-Hearing;
4. Or the presence of a voice version.
If true, the test is passed.

With the WebDev (Firefox)

In the "CSS" menu, choose "Disable Styles" then choose "Disable All Styles".
Assess the reading difficulty of the text for a user whose reading abilities are equivalent to lower secondary education level (see note).
If the text seems too difficult to understand, check:
1. The presence of graphics, icons or figures helping to make the content more explicit;
2. Or the presence of a text summary adapted to the targeted reading level;
3. Or the presence of a sign language version for the Deaf and the Hard-of-Hearing;
4. Or the presence of a voice version.
If true, the test is passed.

With the WebDev (Chrome)

In the "CSS" menu, choose "Disable All Styles".
Assess the reading difficulty of the text for a user whose reading abilities are equivalent to lower secondary education level (see note).
If the text seem too difficult to understand, check:
1. The presence of graphics, icons or figures helping to make the content more explicit;
2. Or the presence of a text summary adapted to the targeted reading level;
3. Or the presence of a sign language version for the Deaf and the Hard-of-Hearing;
4. Or the presence of a voice version.
If true, the test is passed.

Note: assessing this criterion is particularly delicate. A first approach consists in measuring the text readability via des statistical algorithms (for example via this tool: Readability Test). However, results must be assessed carefully. A second approach consists in using methods adapted to certain types of users, like sign language for the Deaf and the Hard-of-Hearing, voice versions for users with literacy issues or the FALC method for users with certain types of mental or cognitive specificities.

Criterion 13.15 [A] On each Web page, are sudden changes in luminosity or flashing effects used appropriately?

Tests 13.15.1, 13.15.2, 13.15.3

For all

In the page, spot the blinking or flashing contents: animated images (img, svg, canvas, embed or object tags), videos or animations (object tags), script or CSS-based effects (see note).
For each blinking or flashing content, check:
1. That the effect's frequency is lower than 3 per second;
2. Or that the cumulated surface of effects is smaller than or equal to 21,824 pixels.
If true, the test is passed.

Note: assessing this criterion can be difficult. When the effect is script or CSS-based, analyzing the code can be sufficient. The PEAT tool allows to analyze a video in .avi format, for example. An example of video that is known to have caused seizures can be viewed here: London 2012 Olympics Seizure.

Criterion 13.16 [AAA] On each Web page, do the sudden changes in luminosity or flashing effects have a frequency lower than or equal to 3 per second?

Tests 13.16.1, 13.16.2, 13.16.3

For all

In the page, spot the blinking or flashing contents: animated images (img, svg, canvas, embed or object tags), vidos or animations (object tags), script or CSS-based effects (see note).
For each blinking or flashing content, check that the effect's frequency is lower than 3 per second;
If true, the test is passed.

Criterion 13.17 [A] On each Web page, can each moving or blinking content be controlled by the user?

Tests 13.17.1, 13.17.2

For all

In the page, spot the moving or blinking contents (via an image, a script or a CSS effect) triggered automatically during page load or during the display of content (see note).
Check:
- That the movement or the blinking lasts less than 5 seconds;
- Or the presence of a mechanism (a button for example) that allows to pause and restart the movement or the blinking;
- Or the presence of a mechanism (a button for example) that allows to hide and display again the moving or blinking content;
- Or the presence of a mechanism (a button for example) that allows to display the content without movement or blinking.
If true, the test is passed.

Note: if stopping or pausing moving or blinking content happens only when it receives focus, it is not considered as a conforming solution. In some cases, the movement cannot be stopped, for example for a progress bar. In this case, the criterion is non-applicable.

Table of contents

Introduction

Tools

User CSS style sheets

Note about the Disabled CSS mode

Images

Criterion 1.1 [A] Does each image have a text alternative?

Tests 1.1.1, 1.1.3

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

With the validator

Test 1.1.2

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

With the validator

Test 1.1.4

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Criterion 1.2 [A] For each decorative image with a text alternative, is this alternative empty?

Test 1.2.1

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Test 1.2.2

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Test 1.2.3

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Test 1.2.4

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Test 1.2.5

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Test 1.2.6

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Criterion 1.3 [A] For each image conveying information with a text alternative, is this alternative relevant (except in particular cases)?

Tests 1.3.1, 1.3.3

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Test 1.3.2

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Test 1.3.4, 1.3.5

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Tests 1.3.6, 1.3.7

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Test 1.3.8

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Test 1.3.9

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Tests 1.3.10, 1.3.11

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Test 1.3.12

With the WAT

With the WebDev (Firefox)

With the WebDev (Chrome)

Test 1.3.13