Site Longdesc

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

Critère 1.1

Img tag without alternative

Image with empty alternative

Image with alternative

toto

Image with alternative equal to src

img/Image with alternative equal to src.png

Area tag without alternative

Planets
Planets Venus

input type image without alternative

possible to invalidate this test ? no link with href equal to area ?

Area tag without alternative

Image Map

Critère 1.2

Image Link without alternative

Image Link with empty alternative

Image link with alternative

toto

Image link with alternative equal to src

test.img

input type image with empty alternative

input type Image with alternative

Planets Venus

SVG with marker decorative

desc title

SVG without marker

desc title

SVG with marker informative

desc title

Critère 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

Critère 10.5 -

Test

Test

Text red and backgroud - red attr style

Text red and backgroud red - extern CSS

Critère 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?

Critère 10.9 -

text justify - extern CSS

text justify - tag style

texte justify - attr style

Critère 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 :

Critère 11.1 - Does each form field have a label?

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 :

Critère 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


Critère 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

Critère 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 :

Critère 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)?