Site Longdesc

Good and bad samples of implementation of the rules of the RGAA 3

Criterion 1.1 - Does each image have a text alternative?

Test 1.1.1 - Does each image (img tag) have an alt attribute?

Good samples

Image with empty alternative

Image with not empty alternative

Not empty alt

Image with an alternative equal to src

img/Image_with_alternative_equal_to_src.png

Bad samples

Image without alternative

Image link without alternative

Test 1.1.2 - Does each area (area tag) of an image map have an alt attribute?

Good samples

Area tag Image non clickable with empty alternative

Area tag Image non clickable with not empty alternative

Not empty alt Not empty alt

Area tag Image clickable with not empty alternative

Not empty alt Not empty alt

Bad samples

Area tag Image non clickable without alternative

Area tag Image clickable without alternative

Test 1.1.3 - Does each form button (input tag with the type="image" attribute) have an alt attribute?

Good samples

Input type image with alternative

Bad samples

Input type image without alternative

Test 1.1.4 - Does each clickable area (area tag) of a server-side image map have an equivalent link in the page?

Good samples

Area tag Image clickable of a server-side with link alternative

First link Second link
First alternative link
Second alternative link

Bad samples

Area tag Image clickable of a server-side without link alternative

Criterion 1.2 - For each decorative image with a text alternative, is this alternative empty?

Test 1.2.1 - Does each decorative image (img tag), without caption and with an alt attribute, meet the following conditions:

Good samples

Image with empty alternative

Image indentified as decorative (the "id" attribute has value "decorative-image") with empty alternative

Image indentified as decorative (the "class" attribute has value "decorative-image") with empty alternative

Image with empty alternative and a role="presentation" attribute

Bad samples

Image with not empty alternative

Not empty alt

Image indentified as decorative (the "id" attribute has value "decorative-image") with not empty alternative

Not empty alt

Image with not empty alternative and a role="presentation" attribute

Not empty alt

Image with empty alternative, but a not empty "title" attribute

Image with empty alternative, but a not empty "aria-label" attribute

Image with empty alternative, but a not empty "aria-describedby" attribute

Image with empty alternative, but a not empty "aria-labelledby" attribute

Not empty alternative

Test 1.2.2 - Does each non clickable area (area tag with no href attribute), not conveying any information, and with an alt attribute, meet the following conditions:

Good samples

Area tag Image non clickable with empty alternative

Area tag Image non clickable identified as decorative with empty alternative

Bad samples

Area tag Image non clickable identified as decorative with not empty alternative

Not empty alt Not empty alt

Area tag Image non clickable identified as decorative with title attribute

Area tag Image non clickable identified as decorative with aria-label attribute

Area tag Image non clickable identified as decorative with aria-labelledby attribute

Area tag Image non clickable identified as decorative with aria-describedby attribute

Not empty alternative

Test 1.2.3 - For each image object without caption (object tag with the attribute type="image/"), not conveying any information, meet the following conditions:

Good samples

Image object

Image object identified as decorative

Bad samples

Image object identified as decorative and with some text between object tags

Image object identified as decorative and without "aria-hidden" attribute

Image object identified as decorative and with an aria-label attribute

Image object identified as decorative and with an aria-labelledby attribute

Image object identified as decorative and with an aria-describedby attribute

Image object identified as decorative and with an aria-describedby attribute in a child tag

Illustration of diversity

Test 1.2.4 - Does each decorative vector image (svg tag), not conveying any information, meet the following conditions:

Good samples

SVG image

Empty SVG image identified as decorative

SVG image identified as decorative

SVG image identified as decorative and with an empty desc tag

SVG image identified as decorative and with an empty title tag

Bad samples

SVG image identified as decorative and without an aria-hidden attribute

SVG image identified as decorative and with an empty desc tag

SVG image identified as decorative and with an empty title tag

SVG image identified as decorative and with a title attribute

SVG image identified as decorative and with a title attribute on one child

SVG image identified as decorative and with an aria-label attribute

SVG image identified as decorative and with an aria-label attribute on one child

SVG image identified as decorative and with an aria-labelledby attribute

SVG image identified as decorative and with an aria-labelledby attribute on one child

SVG image identified as decorative and with an aria-describedby attribute

SVG image identified as decorative and with an aria-describedby attribute on one child

Some text

Test 1.2.5 - For each decorative bitmap image (canvas tag), without caption, meet the following conditions:

Good samples

Image canvas

Image canvas identified as decorative

Bad samples

Image canvas identified as decorative and with some text between canvas tags

Image canvas identified as decorative and without "aria-hidden" attribute

Image canvas identified as decorative and with an aria-label attribute

Image canvas identified as decorative and with an aria-labelledby attribute

Image canvas identified as decorative and with an aria-describedby attribute

Image canvas identified as decorative and with an aria-describedby attribute in a child tag

Illustration of diversity

Test 1.2.6 - Does each decorative embedded image (embed tag with attribute type="image/..."), not conveying any information, meet the following conditions:

Good samples

Image embed

Image embed identified as decorative

Bad samples

Image embed identified as decorative and without "aria-hidden" attribute

Image embed identified as decorative and with an aria-label attribute

Image embed identified as decorative and with an aria-labelledby attribute

Image embed identified as decorative and with an aria-describedby attribute

Image embed identified as decorative and with an aria-describedby attribute in a child tag

Illustration of diversity

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

Test 1.3.1 - Does each image (img tag), with an alt attribute, conveying information, with an alt attribute, meet the following conditions (except in particular cases)?

Good samples

Image with not empty alternative

Not empty alt

Image identified as informative with not empty alternative

Not empty alt

Image identified as informative with a title attribute equal to the alt attribute

Not empty alt

Image identified as informative with an aria-label attribute equal to the alt attribute

Not empty alt

Image identified as informative with an aria-labelledby attribute that text associated is equal to the alt attribute

Not empty alt Not empty alt

Image in figure and caption with an aria-labelledby attribute that text associated is equal to the alt attribute

Not empty alt Not empty alt

Bad samples

Image identified as informative with empty alternative

Image identified as informative with a title attribute differente to the alt attribute

Not empty alt

Image identified as informative with an aria-label attribute differente to the alt attribute

Not empty alt

Image identified as informative with an aria-labelledby attribute that text associated is differente to the alt attribute

Not empty alt a other text

Image in figure and caption with an aria-labelledby attribute that text associated is differente to the alt attribute

Not empty alt a other text

Test 1.3.2 - Does each area (area tag), conveying information, and with an alt attribute, meet the following conditions (except in particular cases)?

Good samples

Area tag Image clickable with not empty alternative

Not empty alt Not empty alt Not empty alt

Area tag Image clickable identified as informative with empty alternative

Not empty alt Not empty alt Not empty alt

Area tag Image clickable identified as informative that title is equal to the alt

Not empty alt Not empty alt Not empty alt

Area tag Image clickable identified as informative that aria-label is equal to the alt

Not empty alt Not empty alt Not empty alt

Area tag Image clickable identified as informative that aria-labelledby is equal to the alt

Not empty alt Not empty alt Not empty alt Not empty alt

Bad samples

Area tag Image clickable identified as informative with empty alternative

Area tag Image clickable identified as informative with title attribute different than alt attribute

Not empty alt Not empty alt Not empty alt

Area tag Image clickable identified as informative with aria-label attribute different than alt attribute

Not empty alt Not empty alt Not empty alt

Area tag Image clickable identified as informative with aria-labelledby attribute different than alt attribute

Not empty alt Not empty alt Not empty alt

Not empty alternative

Test 1.3.3 - Does each button associated with an image (input tag with the attribute type="image"), and with an alt attribute, meet the following conditions (except in particular cases)?

Good samples

Input type image with alternative

Input type image with a title equal to the alt

Input type image with a aria-label equal to the alt

Input type image with a aria-label equal to the alt

Send

Bad samples

Input type image with empty alternative

Input type image with a title not equal to the alt

Input type image with a aria-label not equal to the alt

Input type image with a aria-label not equal to the alt

Not empty alternative

Test 1.3.4 - Does each image object conveying information, meet one of the following conditions (except in particular cases)?

Good samples

Image object identified as informative and with hidden alternative

Show alternative

Image object identified as informative and with a replacement mechanism

Show alternative

Image object identified as informative and with a replacement mechanism

Show alternative

Bad samples

Image object identified as informative and with some text between object tags

Illustration of diversity.

Image object identified as informative and without replacement mechanism

Test 1.3.5 - Does each object image (object tag with the attribute type="image/"), conveying information, that uses aria-label, aria-labelledby or title attribute, meet one of the following conditions (except in particular cases)?

Good samples

Image object identified as informative and with identical title and aria-label attribute

Image object identified as informative and with identical title and content associated with aria-labelledby attribute

Not empty alt

Bad samples

Image object identified as informative and with different title and aria-label attribute

Image object identified as informative and with different title and content associated with aria-labelledby attribute

A other not empty alt

Test 1.3.6 - Does each vector image (svg tag), conveying information, and with an alternative, meet one of the following conditions (except in particular cases)?

Good samples

Image embed identified as informative and with hidden alternative

Show alternative

Image embed identified as informative and with a replacement mechanism

Show alternative

Image embed identified as informative and with a replacement mechanism

Show alternative

Bad samples

Image embed identified as informative and with some text between embed tags

Illustration of diversity.

Image embed identified as informative and without replacement mechanism

Test 1.3.7 - Does each embedded image (embed tag with the attribute type=\"image/\"), conveying information, that use aria-label, aria-labelledby or title attribute, meet one of the following conditions (except in particular cases)?

Good samples

Image embed identified as informative and with identical title and aria-label attribute

Image embed identified as informative and with identical title and content associated with aria-labelledby attribute

Not empty alt

Bad samples

Image embed identified as informative and with different title and aria-label attribute

Image embed identified as informative and with different title and content associated with aria-labelledby attribute

A other not empty alt

Test 1.3.8 - Does each vector image (svg tag), conveying information, and with an alternative, meet one of the following conditions (except in particular cases)?

Good samples

SVG image identified as informative and with an aria-label and an identical title

Relevant alternative

SVG image identified as informative and without title

Relevant alternative

Bad samples

SVG image identified as informative and without role="img"

Relevant alternative

SVG image identified as informative and with an aria-label that be a relevant alternative but without child desc tag

SVG image identified as informative and with a content in a desc tag but without aria-label attribut

Relevant alternative

SVG image identified as informative and with an aria-label that be without information

SVG image identified as informative and with a desc tag without information

SVG image identified as informative and with an aria-label and a not identical title

SVG image identified as informative and with a content in a desc tag and a not identical title

Relevant alternative

Test 1.3.9 - For each vector image (svg tag), conveying information, and with an alternative, is this alternative correctly rendered by assistive technologies?

Support of the vector image (svg tag) with an "aria-label" attribute and a "desc" child tag
Jaws 18NVDA 2016
Firefox Non applicable Supporté
IE 11 Supporté Supporté
IE 10 Supporté Supporté
Support of the vector image (svg tag) with an "aria-label" attribute, a "desc" child tag and an identical "title" attribute
Jaws 18NVDA 2016
Firefox Non applicable Supporté
IE 11 Supporté Supporté
IE 10 Supporté Supporté
Support of the vector image (svg tag) with only "aria-label" attribute (Failed test 1.3.8)
Jaws 18NVDA 2016
Firefox Non applicable Supporté
IE 11 Supporté Non Supporté
IE 10 Supporté Non Supporté
Support of the vector image (svg tag) with only "desc" child tag (Failed test 1.3.8)
Jaws 18NVDA 2016
Firefox Non applicable Supporté
IE 11 Supporté Supporté
IE 10 Supporté Supporté

No double restitution detected during these tests

Test 1.3.10 - For each bitmap image (canvas tag), conveying information, meet one of the following conditions (except in particular cases)?

Good samples

Image canvas

Illustration of diversity.

Image canvas identified as informative with content between canvas tags

Illustration of diversity.

Image canvas identified as informative with an alternative access by link

Show alternative

Image canvas identified as informative with an image alternative access by link

Show alternative

Bad samples

Image canvas identified as informative, with some text between canvas tags and with an aria-hidden attribute

Image canvas identified as informative and without alternative

Test 1.3.11 - For each bitmap image (canvas tag tag), conveying information, that use aria-label, aria-labelledby or title attribute, meet one of the following conditions (except in particular cases)?

Good samples

Image canvas identified as informative with a title equal to the aria-label attribute

Image canvas identified as informative with a title equal to the passage of text associated with the aria-labelledby attribute

Alternative

Image canvas identified as informative with a title equal to the aria-label attribute present in the child tag

Bad samples

Image canvas identified as informative with a title not equal to the aria-label attribute

Image canvas identified as informative with a title not equal to the passage of text associated with the aria-labelledby attribute

Alternative

Image canvas identified as informative with a title not equal to the aria-label attribute present in the child tag

Test 1.3.12 - For each bitmap image (canvas tag), conveying information, and with an alternative (content between canvas and /canvas), is this alternative correctly rendered by assistive technologies?

Support of the bitmap image (canvas tag) with a text between canvas tags
Jaws 18NVDA 2016
Firefox Non applicable Supporté
IE 11 Supporté Supporté
IE 10 Supporté Supporté
Support of the bitmap image (canvas tag) with an "aria-label" attribute
Jaws 18NVDA 2016
Firefox Non applicable Supporté
IE 11 Non supporté Non supporté
IE 10 Non supporté Non supporté
Support of the bitmap image (canvas tag) with an "aria-label" attribute in a child tag
Jaws 18NVDA 2016
Firefox Non applicable Non supporté
IE 11 Supporté Non supporté
IE 10 Supporté Non supporté
Support of the bitmap image (canvas tag) with an "aria-label" attribute and an identical "title" attribute
Jaws 18NVDA 2016
Firefox Non applicable Supporté
IE 11 Non supporté Non supporté
IE 10 Non supporté Non supporté
Support of the bitmap image (canvas tag) with an "aria-label" attribute in a child tag and an identical "title" attribute
Jaws 18NVDA 2016
Firefox Non applicable Non supporté
IE 11 Supporté Non supporté
IE 10 Supporté Non supporté
Support of the bitmap image (canvas tag) with an "aria-labelledby" attribute
Jaws 18NVDA 2016
Firefox Non applicable Supporté
IE 11 Non supporté Non supporté
IE 10 Non supporté Non supporté
Support of the bitmap image (canvas tag) with an "aria-labelledby" attribute and an identical "title" attribute
Jaws 18NVDA 2016
Firefox Non applicable Supporté
IE 11 Non supporté Non supporté
IE 10 Non supporté Non supporté

No double restitution detected during these tests

Test 1.3.13 - For each image conveying informationand with a text alternative, is the text alternative short and concise (except in particular cases)?

Good samples

Image with a short alternative in an alt attribute

Illustration of diversity.

Area with a short alternative in an alt attribute

Illustration of diversity. Illustration of diversity. Illustration of diversity.

Input image with a short alternative

Object image with a short alternative with aria-label propertie

Embed image with a short alternative with aria-labelledby propertie

Not empty alt

Svg image with a short alternative with aria-label propertie and text associated with desc tag

Relevant alternative

Image canvas with a short alternative

Illustration of diversity.

Bad samples

Image with a long alternative in an alt attribute

Informative image alternative and some other information that not util to describe the information in the image.

Area with a long alternative in an alt attribute

Illustration of diversity. Informative image alternative and some other information that not util to describe the information in the image. Informative image alternative and some other information that not util to describe the information in the image.

Input image with a long alternative

Object image with a long alternative with aria-label propertie

Embed image with a long alternative with aria-labelledby propertie

Informative image alternative and some other information that not util to describe the information in the image.

Svg image with a long alternative with aria-label propertie and text associated with desc tag

Informative image alternative and some other information that not util to describe the information in the image.

Image canvas with a long alternative

Informative image alternative and some other information that not util to describe the information in the image.

Criterion 5.1 -

Ce tableau de mise en page pose des problèmes quand il est linéarisé.
Le contenu n'est donc pas cohérent pour certains utilisateurs.
températures de la semaine en fonction de la ville
ville lundi mardi mercredi jeudi vendredi
paris 10c° 8c° 10c° 12c° 10c°
toulouse 13c° 11c° 12c° 14c° 12c°
strasbourg 7c° 5c° 6c° 8c° 7c°
températures de la semaine en fonction de la ville
ville lundi mardi mercredi jeudi vendredi
paris 10c° 8c° 10c° 12c° 10c°
toulouse 13c° 11c° 12c° 14c° 12c°
strasbourg 7c° 5c° 6c° 8c° 7c°

Criterion 8.2 - For each web page, is the source code valid according to the specified document type (except in particular cases)?

Test 8.2.1 - For each document type declaration, does the page source code meet the following conditions (except in particular cases)?

Good samples

The following link provides access to a page that respects the W3C standard and an other link to the W3C evaluation of this page :

The page that respects the W3C standard and W3C validator of this page

Bad samples

The following link provides access to the W3C evaluation of this page :

W3C validator of this page

Test 8.2.2 - For each document type declaration, the page source code must not contain obsolete elements. Has this rule been followed (except in particular cases)?

Good samples

The following link provides access to a page that has no obsolete element :

The page that has no obsolete element and W3C validator of this page

Bad samples

The following link provides access to a page that has obsolete elements :

The page that has no obsolete element and W3C validator of this page

Criterion 8.10 - On each web page, are changes in reading direction identified?

Test 8.10.1 - On each web page, does each text for which the reading direction is different from the default reading direction meet the following conditions:

Good samples

يا ظالمني غناء أُم كلثوم - تأليف أحمد رامي
وقلبي من رضاك محروم يا ظالمني يا هجرني
تحيرني وتضنيني تلوعني وتكويني
وتغضب لما أقولك يوم ولما أشكي تخاصمني
يا ظالمني
وتنسى كل ما جرى لي حرام تهجر وتتجنى
يصادف يوم وتصفى لي وأقضي العمر أتمنى
وقاسيت الضنى في بعدك صبرت سنين على صدك

Bad samples without information

يا ظالمني غناء أُم كلثوم - تأليف أحمد رامي
وقلبي من رضاك محروم يا ظالمني يا هجرني
تحيرني وتضنيني تلوعني وتكويني
وتغضب لما أقولك يوم ولما أشكي تخاصمني
يا ظالمني
وتنسى كل ما جرى لي حرام تهجر وتتجنى
يصادف يوم وتصفى لي وأقضي العمر أتمنى
وقاسيت الضنى في بعدك صبرت سنين على صدك

Test 8.10.2 - On each Web page, does each change reading direction (dir attribute) meet the following conditions:

Good samples

يا ظالمني غناء أُم كلثوم - تأليف أحمد رامي
وقلبي من رضاك محروم يا ظالمني يا هجرني
تحيرني وتضنيني تلوعني وتكويني
وتغضب لما أقولك يوم ولما أشكي تخاصمني
يا ظالمني
وتنسى كل ما جرى لي حرام تهجر وتتجنى
يصادف يوم وتصفى لي وأقضي العمر أتمنى
وقاسيت الضنى في بعدك صبرت سنين على صدك

Bad samples with a "dir" attribute whose value is "auto"

يا ظالمني غناء أُم كلثوم - تأليف أحمد رامي
وقلبي من رضاك محروم يا ظالمني يا هجرني
تحيرني وتضنيني تلوعني وتكويني
وتغضب لما أقولك يوم ولما أشكي تخاصمني
يا ظالمني
وتنسى كل ما جرى لي حرام تهجر وتتجنى
يصادف يوم وتصفى لي وأقضي العمر أتمنى
وقاسيت الضنى في بعدك صبرت سنين على صدك

Bad samples with a "dir" attribute whose value is different from that expected

يا ظالمني غناء أُم كلثوم - تأليف أحمد رامي
وقلبي من رضاك محروم يا ظالمني يا هجرني
تحيرني وتضنيني تلوعني وتكويني
وتغضب لما أقولك يوم ولما أشكي تخاصمني
يا ظالمني
وتنسى كل ما جرى لي حرام تهجر وتتجنى
يصادف يوم وتصفى لي وأقضي العمر أتمنى
وقاسيت الضنى في بعدك صبرت سنين على صدك

Support of the criterion 8.10 by assistive technologies

Support of the "dir" attribute with the "ltr | rtl" value
Jaws 18NVDA 2016
IE 11 Supporté Non supporté
Support of the "dir" attribute with the "auto" value
Jaws 18NVDA 2016
IE 11 Supporté Non supporté

Criterion 10.4 - On each web page, is text still readable when character size is increased until at least 200%?

Test 10.4.1 - In the style sheets of the website, non relative units (pt, pc, mm, cm, in) must not be used for the media types screen, tv, handheld, projection. Has this rule been followed?

Good samples

Paragraph with relative units %

Paragraph with relative units em

Paragraph with relative units % - tag style

Paragraph with relative units em - tag style

Paragraph with relative units %

Paragraph with relative units em

Bad samples

Paragraph with non relative units px

Paragraph with non relative units pt

Paragraph with non relative units pc

Paragraph with non relative units mm

Paragraph with non relative units cm

Paragraph with non relative units im

Paragraph with non relative units px - tag style

Paragraph with non relative units pt - tag style

Paragraph with non relative units pc - tag style

Paragraph with non relative units mm - tag style

Paragraph with non relative units cm - tag style

Paragraph with non relative units im - tag style

Paragraph with non relative units px

Paragraph with non relative units pt

Paragraph with non relative units pc

Paragraph with non relative units mm

Paragraph with non relative units cm

Paragraph with non relative units im

Test 10.4.2 - In the style sheets of the website, for the media types screen, tv, handheld, projection, do font sizes use relative units only?

Good samples

Paragraph with % fontsize - extern CSS

Paragraph with em fontsize - extern CSS

Paragraph with % fontsize - tag style

Paragraph with em fontsize - tag style

Paragraph with % fontsize - attr style

Paragraph with em fontsize - attr style

Bad samples

Paragraph with px fontsize - extern CSS

Paragraph with px fontsize - tag style

Paragraph with px fontsize - attr style

Criterion 10.5 - On each web page, are CSS declarations for background and foreground colors appropriate?

Test 10.5.1: On each web page, for each element that may contain text, is the CSS declaration for foreground color accompanied by a background color declaration at least, inherited from a parent element?

Element with text color and background color declared inline

Element with background color inherited from the parent element

Element without any background color inherited from a parent element

Test 10.5.2: On each web page, for each element that may contain text, is the CSS declaration for background color accompanied by a foreground color declaration at least, inherited from a parent element?

Element with text color inherited at least from the parent element

Element without any text color inherited from a parent element

Test 10.5.3: On each web page, for each element that may contain text, if an image is used to provide a background color via CSS, is there a corresponding background color declaration, at least, inherited from a parent element?

Element with a background image with an inherited background color from the parent element

Element with a background image with and a background color

Element with a background image but no background color, at least inherited from a parent element

Criterion 10.7 - On each web page, is the focus visible for each element that receives focus?

Test 10.7.1 - For each element receiving focus, the browser default visual cue must not be removed (CSS property outline, outline-color, outline-width, outline-style). Has this rule been followed?

Criterion 10.9 - For each web page, text must not be fully justified. Has this rule been followed?

Test 10.9.1: Does each web page meet one of the following conditions?
• The text is not fully justified
• The user can remove the full justification of text, via a provided mechanism

Text partially justified:

lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsam ad in, soluta numquam, possimus fuga beatae velit consectetur aliquam laborum facere.

Liquam laborum facere debitis iste voluptatem aliquid molestiae aperiam ex eos.


Text whose justification can be removed by user by clicking the button above : lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsam ad in, soluta numquam, possimus fuga beatae velit consectetur aliquam laborum facere

Justified text: lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsam ad in, soluta numquam, possimus fuga beatae velit consectetur aliquam laborum facere debitis iste voluptatem aliquid molestiae aperiam ex eos.

Criterion 10.13 - For each web page, are hidden texts rendered properly by assistive technologies?

Test 10.13.1 - On each web page, does each hidden text meet one of the following conditions?

Good samples

Show the hidden text

A link hidden off screen that can show on focus :
A link hidden off screen

A other hidden text that can be show with a button that inform the user by the "aria-expanded" and "aria-controls" attributes :

Bad samples

The following text is hidden with the property "display:none;" :

The following text is hidden with the property "visibility:hidden;" :

The following hidden text can be show, but the design pattern aria is not used correctly : Afficher

The following text is showing, but the users that use assistive technologies can not read it:

The following text is hidding off screen, the users that use assistive technologies can read it, but not the others: Some hidden text

The following input has a label correctly associated with it, but anybody can read it :

Criterion 11.1 - Does each form field have a label?

Test 11.1.1 - Does each form field meet one of the following conditions?

Good samples

The form field has a title attribute:

The label (label tag) is associated with the form field:

The form field has an aria-label property:

The form field has an aria-labelledby property that references an identified chunk of text:

Field 4

Bad samples

The form field has no title, aria-label, aria-labelled attribure:

The form field has an empty title attribute:

The label is associating with a non-existing field:

The form field has an aria-labelledby property that references a non-existing chunk of text:

Field

Test 11.1.2 - Does each form field that is associated with a label (label tag), meet the following conditions:

Good samples

The form field has an id attribute, which is unique and matches the value of a for attribute of a label :

Bad samples

The id of the form field isn't unique:

Test 11.1.3 - Does each form field associated with a label, via the ARIA aria-labelledby property, meet the following conditions?

Good samples

The following input has a label associated with it by the "aria-labelledby" attribute :
Some hidden label

The following input has labels associated with it by the "aria-labelledby" attribute :
Some hidden label

The following input has a label associated with it by the "aria-labelledby" attribute and show on focus :
Some hidden label

Bad samples

The following input has a label associated with it by the "aria-labelledby" attribute, but two contains have the same "id":
Some hidden label

The following input has labels associated with it by the "aria-labelledby" attribute. Some part of the label not has an "id" attribute :
Some hidden label

The following input has a label associated with it by the "aria-labelledby" attribute, but only the user use an assistive technology can read it :
Some hidden label

Test 11.1.4 - Does each form field that uses a property ARIA aria-label must be accompanied by a visible text passage and attached to the field to understand the nature of the expected input. Does this rule is respected?

Good samples

The following input has a label with the "aria-label" attribute and has a text passage just behind :
Some label

Bad samples

The following input has a label with the "aria-label" attribute, but it has not a text passage just behind :

Test 11.1.5 - Does each form field that uses a title attribute, meet the following conditions:

Good samples

The following input has a label with the "title" attribute and has no "placeholder" attribute :

The following input has a label with the "title" attribute and its "placeholder" attribute is equal to the "title" attribute :

Bad samples

The following input has a label with the "title" attribute and its "placeholder" attribute is not equal to the "title" attribute :

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

Test 11.5.1 - In each form, is the information of same nature grouped together via a fieldset tag, if necessary?

Good samples

Gender

Bad samples


Criterion 11.9 - In each form, is the text of each button relevant?

Test 11.9.1 - In each form, does the text of each button meet one of the following conditions?

Good samples

Bad samples

Test 11.9.2 - In each form, does the text of each button implemented via an ARIA property aria-labelledby meet the following conditions?

Good samples


Send

Bad samples


Send

Other send

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

Test 11.10.1 - For each form, do mandatory fields indications meet one of the following conditions?

Good samples

Fields marked with (*) are mandatory.

For each field, a mention of the obligatory character of the field is made visually and textually with the mention (*).

Bad samples

Test 11.10.2 - Each mandatory field indication based on the ARIA properties aria-label, aria-required, or the "required" attribute, must have an explicit visual cue in its label (label tag) or in a chunk of text tied to the form field via the ARIA property aria-describedby or aria-labelledby. Has this rule been followed?

Good samples

Fields marked with (*) are mandatory.





Bad samples





Test 11.10.3 - Does each mandatory field indication provided via a chunk of text tied by an ARIA property aria-describedby or aria-labelledby meet the following conditions?

Good samples



Bad samples




Test 11.10.10 - Does each form field that uses a title attribute as input help, meet the following conditions:

Good samples

The following input has a label with the "title" attribute and has no "placeholder" attribute :

The following input has a label with the "title" attribute and its "placeholder" attribute is equal to the "title" attribute :

Bad samples

The following input has a label with the "title" attribute and its "placeholder" attribute is not equal to the "title" attribute :

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

Test 12.1.1: Does each set of pages meet one of the following conditions (except in particular cases)?

This following page have a navigation menu and a sitemap

Page with a navigation menu and a sitemap

This following page have a navigation menu and a search form

Page with a navigation menu and a search form

This following page have a sitemap and a search form

Page with a sitemap and a search form

This following page have the three navigation system

Page with the three navigation system

This page have no navigation system.

This following page have only a navigation menu

Page with only a navigation menu

This following page have only a search form

Page with only a search form

This following page have only a sitemap

Page with only a sitemap

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

Test 12.2.1: On each set of pages, does each page with a navigation menu meet the following conditions (except in particular cases)?

This following link brings you to a page set with an identical menu on each page

Page set with an identical menu

This following link brings you to a page set with an identical menu on each page

Page set with a different menu

Test 12.2.2: Does each navigation bar that is repeated in a set of pages meet the following conditions (except in particular cases)?

This following link brings you to a page set with an identical menu on each page

Page set with an identical menu

This following link brings you to a page set with an identical menu on each page

Page set with a different menu

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

Test 12.3.1: On each set of pages, does the main navigation menu have a consistent presentation (except in particular cases)?

This following link brings you to a page set with an identical presentation of menu on each page

Page set with an identical menu

This following link brings you to a page set with an identical presentation of menu on each page

Page set with a different menu

Test 12.3.2: On each set of pages, do repeated navigation bars have a consistent presentation (except in particular cases)?

This following link brings you to a page set with an identical presentation of menu on each page

Page set with an identical menu

This following link brings you to a page set with an identical presentation of menu on each page

Page set with a different menu

Criterion 12.4 - Is the "site map" page relevant?

Test 12.4.1: Does the "site map" page represent the site general architecture?

This following link brings you to the sitemap of the site www.oceaneconsulting.com. The sitemap is representative

Sitemap of Oceane Consulting

This following link brings you to the sitemap of this site. The sitemap is not representative

Sitemap

Test 12.4.2: Are the links of the site map functional?

This following link brings you to the sitemap of the site www.oceaneconsulting.com. All the links are fonctionals

Sitemap of Oceane Consulting

This following link brings you to the sitemap of this site. At least one link is not fonctional

Sitemap

Test 12.4.3: Do the links of the site map refer to the pages that are specified by the text?

This following link brings you to the sitemap of the site www.oceaneconsulting.com. All the links bring you to the good page

Sitemap of Oceane Consulting

This following link brings you to the sitemap of this site. At least one link not bring you to the good page

Sitemap

Criterion 12.5 - In each set of pages, is the "site map" page accessible in an identical way?

Test 12.5.1: In each set of pages, is the "site map" page accessible from an identical functionality?

This following link brings you to the site www.oceaneconsulting.com. The sitemap is accessible from an identical link in all page

Oceane Consulting

On this site the link of sitemap is not present on all page and not with an identical functionality

Page de navigation

Test 12.5.2: In each set of pages, is the functionality leading to the "site map" page located at the same place in the presentation?

This following link brings you to the site www.oceaneconsulting.com. The sitemap is accessible from a link at the same place in all page

Oceane Consulting

On this site the link of sitemap is not present on all page and not always at the same place

Page de navigation

Test 12.5.3: In each set of pages, is the functionality leading to the "site map" page always presented in the same relative order in the source code?

This following link brings you to the site www.oceaneconsulting.com. The sitemap is accessible from a link at the same place in all page

Oceane Consulting

On this site the link of sitemap is not present on all page and not always at the same place

Page de navigation

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

Test 12.6.1: In each set of pages, is the search function accessible with an identical functionality?

This following link brings you to the site www.oceaneconsulting.com. The search form is accessible from an identical functionality in all page

Oceane Consulting

On this site the search form is not present on all page and not with an identical functionality

Page de navigation

Test 12.6.2: In each set of pages, is the functionality leading to the search function located at the same place in the presentation?

This following link brings you to the site www.oceaneconsulting.com. The search form is accessible from an identical presentation in all page

Oceane Consulting

On this site the search form is not present on all page and not with an identical functionality

Page de navigation

Test 12.6.3: In each set of pages, is the functionality leading to the search function always presented in the same relative order in the source code?

This following link brings you to the site www.oceaneconsulting.com. The search form is accessible not always at the same place in all page

Oceane Consulting

On this site the search form is not present on all page and not always at the same place

Page de navigation

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

Test 12.7.1: Does each page within a collection of pages, meet the following conditions:

A pagination not correctly implemented

Criterion 12.8 - On each web page, is a breadcrumb trail available (except in particular cases)?

Test 12.8.1: On each web page, is a breadcrumb trail available (except in particular cases)?

An example of breadcrump trail

The following page have no breadcrump trail

Page de navigation

Criterion 12.9 - On each web page, is the breadcrumb trail relevant?

Test 12.9.1: On each web page, does the breadcrumb trail represents the page position in the site structure?

A breadcrump trail correctly implemented on the Oceane Consulting Web site

Oceane Consulting

A breadcrump trail not represents of the page position

Criterion 12.10 - On each web page, are groups of important links (menu, navigation bar) and the main content area identified (except in particular cases)?

Test 12.10.1: On each web page, is each group of important links implemented in a single tag?

Test 12.10.2: On each web page, is each group of important links implemented in a single tag?

A menu of navigation that the tag that groups the links is implemented with an id

A group of links that the tag that groups the links is preceded by an anchor

A group of links that the first tag is an anchor

Test 12.10.3: On each web page, does the main content area meet one of the following conditions?

This following link brings you to a page that the main content is implemented with a main tag and an id attribute

Page with main content and an id attribute

This following link brings you to a page that the main content is implemented with an anchor

Page with main content and anchor

Some links that follow

This following link brings you to a page that the main content is implemented twice

Page with main content and an id attribute

This following link brings you to a page that the main content is implemented without id attribute or an anchor

Page with main content and anchor

Test 12.10.4: On each web page, does the document outline meet the following conditions:

This following link brings you to a structured page

Structured page

This page is structured with tags but no structured role is present in this structured elements

Criterion 12.11 - 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)?

Test 12.11.1: On each web page, is there a link to bypass, or skip to, each identified group of important links?

This page has no skip link, but this may be correct since there is no menu

This following link brings you to a structured page, that has skip links

Structured page

This following link brings you to a page that has a navigation, but no skip link

Page without skip link

Test 12.11.2: On each web page, is there a link to bypass, or skip to, the identified content area or to access it?

This page has no skip link, but this may be correct since there is no menu

This following link brings you to a structured page, that has skip links

Structured page

This following link brings you to a page that has a main content, but no skip link

Page without skip link

Test 12.11.3: On each web page, is each bypass or skip link functional?

This following link brings you to a structured page, that has skip links functional

Structured page

This following link is a skip link without target

An anchor link without target

Test 12.11.4: On each set of pages, do bypass or skip links meet the following conditions:

This following link brings you to the site www.oceaneconsulting.com. The skip link is always at the same place in all page

Oceane Consulting

This site has not skip link in all page and not at the same place

Criterion 12.12 - On each web page, is the current page specified in the navigation menu?

Test 12.12.1: On each web page, is the current page specified in the navigation menu?

This following link brings you to a structured page, that has a navigation menu that indicate the current page

Structured page

This page has no indication on the current page while the navigation is present and with a a link target this page

Criterion 12.13 - On each web page, is tabbing order consistent?

Test 12.13.1: On each web page, is the tabbing order through the content consistent?

This following link brings you to a structured page, that has no tabindex attribute or element with float:right property

Structured page

The followings elements disturb the tabbing order

First content
second content A link

Criterion 13.1 - For each web page, can the user control each time limit that modifies content (except in particular cases)?

Test 13.1.1 - For each web page, does each refresh process or automatic redirection (code, script, object tag, applet tag, meta tag) meet one of the following conditions (except in particular cases)?

Test 13.1.2 - For each web page, is each redirection initiated via the meta tag immediate (except in particular cases)?