Accessibility guidelines for HTML, CSS and JavaScript

Date Version Author Status / comments

Nov 3rd, 2018 3.0 Atalan

Jan 21, 2019 3.1 Atalan Minor changes in text of the 6.2 guideline.

In partnership with: Air Liquide – Atos – BNP Paribas – Capgemini – EDF – Generali – SFR – SNCF – Société Générale – SPIE

Observers: AbilityNet (UK) – Agence Entreprises & Handicap – AnySurfer (Belgium) – Association des Paralysés de France (APF) – Association Valentin Haüy (AVH) – CIGREF – Design For All Foundation (Spain) – ESSEC – Handirect – Hanploi – Sciences Po – Télécom ParisTech Acknowledgments

Special thanks to our AcceDe Web partners for their input and commitment:

Thanks to their support, participation in the working groups, proofreading of documents, and testing of manuals, the partner companies have provided valuable input to the Accede Web project. This has made it possible to create manuals that successfully meet the needs of the different stakeholders of a web project. These companies are also contributing to making the web more accessible by authorizing the free distribution of this content.

We would also like to thank the following observers of the AcceDe Web project whose actions raise awareness of the AcceDe Web manuals and aid their distribution: AbilityNet (UK), Agence Entreprises & Handicap, AnySurfer (Belgium), Association des Paralysés de France, Association Valentin Haüys, CIGREF, Design for All foundation (Spain), ESSEC, Handirect, Hanploi, Sciences Po and Télécom ParisTech.

We thank all the members of the review committees for the quality and relevance of their comments: • English version: Robin Christopherson (UK - AbilityNet), Ramon Corominas (Spain - Technosite), Deborah Edwards-Onoro (USA - Lireo Design), Thomas Frandzen (Denmark - Agency for Digitisation, Ministry of Finance), Char James-Tanny, (USA - a11yBos), Matt May (USA – Adobe), Sophie Schuermans (Belgium – Anysurfer), Jared Smith (USA - WebAIM), Christophe Strobbe (Germany), Gijs Veyfeyken (Belgium – Anysurfer) • French version: Benjamin Ach (accessibility expert), Vincent Aniort (APF), Jean-Baptiste Audras (University of Grenoble), Claire Bizingre (accessibility consultant), Victor Brito (accessibility consultant), Anna Castilla (Provaltis), Ève Demazière (Sciences Po), Nicolas Fortin (French Ministry of Media and Culture), Marc-Étienne Vargenau (Alcatel-Lucent) and Éric Vidal (Fédération des aveugles de France), as well as all the teams of our partner companies.

Finally, we would like to thank Laurent Bracquart and Johan Ramon, Christophe Pineau and Marion Santelli of Atalan for their dedication and commitment to this initiative.

Sébastien Delorme, Sylvie Goldfain, Atalan Table of contents

Introduction ...... 6

Context and objectives ...... 6 Who should read this document, and how to use it? ...... 6 Contact ...... 6 License agreement ...... 7 1 General structure ...... 8

Add structure to the header area using

...... 8 Mark up the search field with role="search" ...... 8 Structure the main content area with

...... 8 Structure information about the website and its author with

9 Structure primary and secondary navigation menus with

...... 9 Structure navigation menus with lists ...... 10 Identify the current position in navigation systems with aria-current ...... 10 Create a logical and thorough hierarchy for headings, using

to

tags ...... 12 Write the HTML code in a logical reading order ...... 15 Ensure that the HTML flow is consistent from one page to another ...... 16 2 Page Title...... 17

Provide a descriptive .

• Good practice is to ensure that the content in the

Page 17/63

3 Language

Provide the primary language of the page with the lang attribute on the tag

In order to ensure a proper presentation of text content to the end user, the primary language should be declared on each page.

Use the lang attribute on the tag.

For example, for an English page use:

Tip Populate the lang attribute with the relevant language code (or in some cases three letters).

Some common codes are:

• en for English.

• fr for French.

• es for Spanish.

• de for German.

• it for Italian.

Use the lang attribute to indicate a change of language

If some of the content is in a language other than the primary language of the page, it should be specified with the lang attribute.

For example, on an English page:

Version française

Tip If one element does not enclose all of the foreign language content, encapsulate it with a or

tag and give it the appropriate lang attribute.

Note It is not necessary to announce a change of language for:

Page 18/63

• Proper names • Foreign words that have been incorporated into the dictionary of the primary language. • Foreign words that are pronounced and understood with the accent of the principal language (i.e. “RSVP”, if the primary language is English).

Make sure that hidden content is translated

For websites in multiple languages or when using scripts developed in a foreign language, make sure to translate into the website’s current language all the hidden content in:

• alt attributes of images.

• aria-label attributes.

• title attributes.

• [...]

Warning Do not start the text alternative by “Link to […]” or “Button to […]”.

and tags

Note Regardless of whether an element is decorative, informative, or act as a link/button, it should in all cases have an alt attribute. This is to ensure that screen readers do not read the source file name (i.e. the content of the src attribute).

6.3.1 Decorative/ambient

When a decorative or ambient element is included in the HTML code, the alt attribute must remain empty (without any space between the quotation marks of alt="").

In the HTML example below, the element simply enhances "Error messages" (which is explicit by nature):

Error messages

6.3.2 Informative elements

When an informative element is used in the HTML code, populate its alt attribute with the information conveyed by the image.

The image above refers to the time and distance to reach a destination by walking. The code should be:

Page 31/63

2 min 111 m

Note If the elements is used to display an informative image in SVG format, add a role="img" attribute inline to ensure good compatibility with mobile assistive technologies:

2 min 111 m

Warning Do not start alternative text with alt="Image of […]". This information is already provided by the assistive technology when it encounters the element.

6.3.3 Unabeled links or buttons

When an element acting as link or bottom is included alone (without a label) in the HTML code, add the information needed to make it explicit into the alt attribute.

In the HTML example below, the element points to the home page:

Warning Do not start the alt text with alt="Link to […]" or alt="Button […]" when the

Page 32/63

element is acting as a link or button. This information is already provided to the assistive technology by the or elements.

6.3.4

When is included in the HTML code, add the information needed to make it explicit into its alt attribute.

In the HTML example below, the launches a search within the website:

Warning Do not start the alt attribute with alt="Button […]" when the element is acting as a link or button. This information is already provided to the assistive technology by the elements.

Tag images that have captions with

and

Images that have captions should be tagged with

and

.

The

element should include the image AND the legend, and the legend should be tagged with

.

Note The alternative text (i.e. alt attribute for the tag) should contain a reference to the caption.

Page 33/63

6.4.1 Example 1

Bolivian desert, picture by Audesou, February 2013.

Bolivian desert, picture by Audesou, February 2013.

6.4.2 Example 2

Photo 1: Bolivian desert, picture by Audesou, February 2013.

Photo 1: Bolivian desert, picture by Audesou, February 2013.

Page 34/63

Don't use CSS to display images that carry information

CSS should not be used to display images that carry information.

In other words, images with information should be included in the HTML code (i.e. via the or svg elements).

Note Image sprites (images loaded in the background via CSS) are not appropriate for images that carry information.

Tip Images are considered to carry information if some of the page content would be missing without them. These images include:

• Logos. • Text images. • Image links and buttons. • Etc.

Warning In particular, text should not be placed off-screen and replaced by a background images.

When images are not uploaded, information may be lost.

[My logo text]

#logo { display: block; width: 300px; height: 100px; text‐indent: ‐99999px; background: url('images/logo.png'); }

This technique should be replaced with pure HTML code (such as an image tag with the proper alt attribute).

Page 35/63

7 Forms

Use the tag with the for and id attributes to label form fields with a visible name

To label fields with a visible name:

1. Use the tag for each form name.

2. Add the for attribute to each tag and an id attribute on each form field.

3. Populate the for and id attributes of each name/field pair with the same, unique value.

Your name

Your country Belgium France […]

Warning The title and aria-label attributes should not be used for fields which have already been labeled this way.

Note It is important to provide identical names for fields that have the same function.

For example, if there are several identical identification forms on the website, do not use "ID" on one, and "Login" on the other.

Use the aria-label or title attribute to label form fields that don't have a visible label

To label form fields that don't have a visible label:

1. Add aria-label or title to the field.

2. Populate the attribute by specifying the field’s function.

Page 36/63

By Date By Topic […]

Note Fields that don't have a visible label, can also be labeled with the element and the for and id attributes.

Then hide the off screen. For example using CSS “position: absolute;” and “left: - 99999px;”.

Warning The placeholder attribute cannot serve as a label.

It should only be used to provide additional assistance with text entry.

Add help text directly into the tag

Help text should be included in the element.

This especially applies to:

• Instructions on how to format the input such as MM/DD/YYYY. • Information about the type and maximum size of files than can be sent. • Mandatory fields. • Etc.

Date of Birth (MM/DD/YYYY)

Your client number

Page 37/63

i.e., 76432-BT-VZ

Note In some cases, because of a specific design layout for example, the help text cannot be included in the .

In these cases:

1. Add the id attribute into the tag containing the help text.

2. Populate the id with a unique value.

3. Add the aria-describedby attribute to the corresponding field.

4. Populate aria-describedby with the id value included in the help text.

Add a document to your case

Documents currently in your case

• CV
• Cover Letter

Accepted formats: pdf or doc.

Note that the aria-describedby attribute can include several id values from different sources.

Warning The placeholder attribute should not be used for help text that is essential to understand the type of data to be entered.

It should only be used to provide additional assistance with text entry.

Add required or aria-required="true" to mandatory fields

Mandatory fields should have a required or aria-required="true" attribute.

Page 38/63

Note When using these attributes, the should include a distinctive indication.

Your email *

I accept the conditions of sale (required)

Add error messages and correction suggestions directly into the tag

When error messages and suggestions are placed next to the corresponding form fields, they need to be added directly into the tag.

Tip In addition to the error message, good practice is to add aria-invalid="true" to the field.

Your name * Please fill in your name

Your email * Please provide a valid email format ([email protected])

Note In some cases, because of a specific design layout for example, it is not possible to place the error message directly into the .

In that case:

1. Add an id attribute to the element that contains the error message.

Page 39/63

2. Give this id a unique value.

3. Add aria-describedby to the corresponding input field.

4. Add the id value of the error message to this aria-describedby attribute.

Add a document to your file

Documents currently in your file

• CV
• Cover letter

File format incorrect.

Valid formats: pdf or doc.

Note that aria-describedby can reference several id values.

Update the

If there is an error:

Tip It is recommended to include this information at the beginning of the