Published on 3 July 2019 (Updated 29 February 2024)
In June 2017, Florida, for the first time, a private merchant website was condemned by the courts for lack of accessibility, as explained in this article. One year later, there were more than 150 such legal actions in the United States. Even if the American legislation and jurisprudence are for the moment more restrictive than in Europe, there is no doubt that the stakes around the accessibility of web sites will become more and more important.
However, it is important to define what we mean by accessibility and by disability. These terms cover realities that are often very different from those that come spontaneously to our mind. Accessibility does not only concern people with a disability. Let’s illustrate with a simple example: a spacious and well-equipped bathroom will be practical for all its users, including people with reduced mobility. As for a website, the emphasis should be on the facility of consultation. Indeed, a site should be usable by anyone in any condition of connection or viewing. It is thus a question of remaining as simple as possible.
Fortunately, a raw HTML file, without CSS nor JavaScript, is accessible by default! Alas, sometimes we lose this advantage by using the wrong HTML elements. Other times, we lose it with CSS. More often, we lose it with elaborate JavaScript effects that disrupt the normal functioning of things.
In this article, we are going to give you an overview of web accessibility, the current legislation and an introduction to the basic good practices for designing an adapted website.
What is “disability”?
First of all, it may be good to have a clear understanding of what disability is. According to the latest definition of the World Health Organization, it is “the limitation of an individual’s ability to interact with his or her environment, caused by an impairment that results in a permanent or permanent disability”. It is therefore a social notion rather than a medical one.
All human beings are bound to have disabilities at some point in their lives. These impairments may be present from birth or may come later and be related to illness, accidents, age or situation.
To explain this, imagine yourself at Keflavík International Airport (Iceland’s main airport). You only speak French and, everyone around you speaks only Icelandic. You are now a disabled person!
In the same way, a deaf person practicing sign language is handicapped in an assembly of hearing people. Now reverse the situation: a hearing person in a signing assembly is also disabled.
The table below gives examples for different categories of disability:
What do the numbers say?
It is very difficult to know precisely, in figures, how many people have disabilities. Basing oneself on official statistics implies counting only people who have taken administrative steps to have their disability recognized, which is very simplistic.
A world report on disability published by the WHO in 2010 lists approximately 15% of the world’s population as having a disability.. There are therefore more than one billion people in the world living with some form of disability, including nearly 200 million in situations of severe disability. And the number of seniors who are likely to lose certain abilities with age is increasing rapidly!
What is web accessibility?
Here we are talking about digital accessibility: It is the possibility for everyone to use digital tools, regardless of how they access them.
What are the legal obligations concerning web accessibility?
For the websites of state services, local authorities and public establishments, the law requires since 2005 to be fully accessible to all. This obligation is reinforced by the law for a digital Republic of 2016. This law extends it especially to private companies, even if the conditions of application are still uncertain.
How to respond?
The French government has defined the RGAA (Référentiel Général d’Accessibilité pour les Administrations) as such: Its purpose is to propose criteria and tests to verify that the rules of web accessibility are respected. It is based on the WCAG standards (Web Content Accessibility Guidelines) These documents are in constant evolution to adapt to a constantly changing environment. In short, they are provisions that can be legally sanctioned.
The RGAA like the WCAG is based on 4 general principles and 12 basic rules. Here they are:
PERCEPTIBLE
The information and components of the user interface must be presented to the user in such a way that they can perceive them.
1. Provide textual equivalents for non-textual content that can then be presented in other forms according to the user’s needs: large print, Braille, text-to-speech, symbols or simplified language;
2. Propose alternative versions of temporal media (sound, video, canvas, gif, etc.);
3. Create content that can be presented in different ways without loss of information or structure (e.g., with a simplified layout);
4. Facilitate the visual and auditory perception of the content by the user, notably by separating the foreground from the background.
USABLE
User interface and navigation components must be usable.
1. Make all functionality accessible by keyboard;
2. Allow the user enough time to read and use the content;
3. Avoid moving and flashing content, which is often unpleasant and can in the worst cases be dangerous to people with photo-sensitivity and cause epileptic seizures for example;
4. Provide the user with orientation elements to navigate, find the content and situate himself in the site.
COMPREHENSIBLE
The information and use of the user interface must be understandable.
1. Make textual content readable and understandable;
2. Make pages appear and function in a predictable manner;
3. Help the user to avoid and correct input errors.
ROBUST
Content must be sufficiently robust to be reliably interpreted by a wide variety of user agents, including assistive technologies.
1. Optimize compatibility with current and future user agents, including assistive technologies.
What should be done in practice to meet web accessibility?
Where to start?
First of all, you have to take care of the visual presentation of the site. The content must be readable in all circumstances, with sufficient contrast to avoid visual fatigue. The information transmitted by colours must not be lost if the site is viewed in black and white.
Flashing content and horizontal scroll bars should be avoided and all elements should have a relative size and not an absolute one. This allows users to adapt the display to their needs, like allowing a visually impaired person enlarging the font size.
Similarly, for each moving element, there should be a mechanism provided to stop and restart it. Ideally, this movement will only be triggered under the user’s request. A simple play/pause button will do the trick! Of course, this mechanism must be accessible from the keyboard.
Above all, it is important not to overload the pages – too much information is bad for the information! At last, a page must always be able to be consulted without CSS or JavaScript, or with a CSS that the user adapts to his needs. This must therefore be taken into consideration from the design stage of the site.
Page title
You have to be very careful with the title of the page, the one that is on the tab of the browsers. It is indeed the first element read by a screen reading device. Page titles are therefore decisive for navigation. It is important to ensure that the title :
Is adequate and briefly describes the content of the page.
Is unique and distinguishes the page from other pages of your site.
Examples of bad page titles:
Welcome to home page of Acme Web Solutions, Inc.
Acme Web Solutions, Inc. | About Us
Better page titles :
Acme Web Solutions home page
About Acme Web Solutions
Google loves well conceived page titles!
How to structure a page in accordance with web accessibility?
Evidently, the content of your page must be visually well structured, with the important elements highlighted by their size, their location, etc. But you must not forget that blind people will not see this layout. Therefore, the composition of the page must be conveyed differently to them.
The content of a page must therefore be structured using HTML tags. Each of these tags has a precise role that must be respected.
MAIN REGIONS
HTML 5 identifies five regions of a page using the following tags:
: often at the top of the page, this zone is used throughout the site that contains information and access to general features like the company logo or a search bar
: at the bottom of the page, there is also very frequently a zone present on the whole site, with other general information, such as the legal mentions or the contact information of the company
: this tag delimits a navigation menu
: this is the main content of the page, where important information is presented
: the last region can be declared. This zone is part of the complementary content that brings precision or enriches the information present in the “” region.
Modern browsers and assistive devices can natively use these HTML 5 tags to structure content. However, older technologies require more effort to make a site accessible as this website shows. In particular, you will need to specify the role of regions in your page, as in the examples below:
ARTICLE
The HTML 5
tag represents the complete or self-contained content on a web page. For example, we would place an article on a shopping list or an article on a news site here.
SECTION
The HTML 5
tag allows thematic grouping of information on a page or article.
HEADINGS
Headings are the tags such as”
,
, …,
“. They are crucial for communicating the organisation of the page and thus enabling navigation within it to browsers and assistive devices.
Their ordering is essential. It is best not to “skip” levels as this can cause confusion.
IMAGES
Textual information should never be placed in the form of an image, as it will not be accessible for everyone.
If your image is of interest other than decorative, it is essential to place in the “alt” attribute of the tag a short, descriptive text. This will allow those who cannot see the image, for physical or material reasons, to understand the information it carries. If, on the other hand, the image is only there to “look pretty”, then the alt attribute can be left blank (alt= ” “).
If the information provided by an image is very complex, it is necessary to make it explicit elsewhere.
The text in the tag does not need to specify that it is a link, as it will already be interpreted as such. It must, however, make sense, even out of context. Phrases such as “Click here”, “More details” or “More” should therefore be avoided. In addition, the main information should be placed first:
Examples of bad links: New window: products;
Well-structured link: Products (opens in new window)
There are two types of links:
those that lead to another page,
and those that produce an action, such as downloading a document.
It is important, in order not to confuse the Internet user and to leave him/her the choice of actions, to indicate the format and weight of the document in the link in question: “Name of document (PDF, 135kb)”.
Beware of using PDF documents, as these are not always properly formatted and therefore not accessible. If possible, an alternative should be offered, such as a word processing file or a spreadsheet in open format.
OTHER TAGS
The other HTML tags are used to organize the whole page. Each has a specific function and must be used appropriately:
contains the texts of your page;
In order for all users to be able to browse your lists, you must use the appropriate tags:
regarding lists in no particular order
for those with a specific order;
is used to delimit quotes;
surrounds illustrative elements of your main content, such as images, graphics, etc;
is used to present information in a structured table format.
There are many other tags. You should always use the one adapted to the information you are presenting. Far from being a constraint, thinking about the tags you will use to structure your page will help you validate the coherence and relevance of the information you wish to place on it.
FORMS
Forms should be clear, intuitive and logically organized. Instructions and input aids, identification of required fields and expected input format are more than welcome.
It is essential that the user can fill out a form using only the keyboard. Labels should be associated with these controls to indicate their function.
Forms are a very large and complex subject, which can be the subject of a separate article, like the one on webaim.org.
In conclusion
Developing a website in conformity with web accessibility is not complex, it is usually sufficient to use the native capacities of the HTML language.
However, it is often difficult to involve all actors in the creation of a website in the objectif of web accessibility.
Also, it is necessary to ensure web accessibility throughout the life cycle of the site: a single poorly mastered modification can undermine all the efforts previously made. Also, it can be very costly to make an incorrectly designed site accessible. Nevertheless, the stakes are high: nearly one person in five will potentially be unable to consult the site.
We have tried to provide in this article the very first basics of accessibility for websites. If you want to go further, we invite you to consult these sites:
