How do you create accessible web content?

In a context of digitalization, the creation of accessible content becomes essential to guarantee an inclusive and equitable experience for all users.

The WCAG (Web Content Accessibility Guidelines) defines international guidelines for web content accessibility. The current version is WCAG2.2.

The RGAA (Référentiel Général d'Amélioration de l'Accessibilité - General Accessibility Improvement Reference) was published by the French Interministerial Digital Affairs Directorate (DINUM) to establish web accessibility rules in France. Its current version is 4.1.2.

It is essential to note that web content must meet certain compliance requirements, which are categorized into 3 levels (level A, level AA and level AAA).

This article offers recommendations for accessible and inclusive content.

Standard 1: Perceptible

This standard calls for information and user interface elements to be clearly formulated to make content accessible.

Textual content

Textual content must be hierarchical and easy to understand for a user with a high school education, except for technical or context-specific terms. For example, we can't forbid the use of specialized terms in a medical article (Laryngitis or Anemia), but we do recommend that sentences be simple and comprehensible (subject, verb and complement).

Non-textual content

All non-textual content must have an alternative textual description, allowing you to determine its purpose. We often use forms on our pages. For these, components that expect user input, such as text fields or selection fields, must have a name or an explicit textual description of what is expected of the component. The same applies to control elements, such as action buttons.

The media

Audio and video media must be accompanied by a synchronized sound file describing the sequence. Also, to include a wider audience, time-lapse media must be accompanied by an alternative text description.

Images should also be accompanied by an alternative text description describing their purpose. This recommendation also applies to captchas, and there are other, more elaborate techniques for the latter.

Web content

Web content must adapt to different agents without loss of information. Ideally, the display should not impose landscape or portrait orientation, except in exceptional cases such as video games or check readers.

Important information

Important information in web content should not be highlighted in color, as some users, such as the color-blind or visually impaired, do not perceive it in the same way. Instead, information should be bolded in a legible font, while respecting color contrasts. Accessible content must have appropriate contrast, i.e. the difference in brightness between the content and its background must be sufficient.

Identity illustration 5 Degrees

Standard 2 : Can be used

The usable standard advocates making all functions available via the keyboard, by using the classic keys (tab, directional keys). In this way, the first element of a form has focus, for example, and subsequent fields can be accessed sequentially using the tab key.

If the web content requires particular keyboard shortcuts or specific key combinations, this must be mentioned on the page for the user's information. For example, if there's another way to go up or down a page other than using only the arrow keys, this should be mentioned.

If the web content contains timed components, it's advisable to give the user the option of activating, deactivating and even extending the time before they expire. Example: in a questionnaire, fields to be filled in with a defined time delay.

It is also advisable not to use flashing components to avoid adverse reactions in some users (convulsion or other physical reactions). For example, certain color codes can provoke epileptic seizures. Do not exceed three flashers.

Finally, web content should, where necessary, have a marker to situate the user on the page or stage they're on, to make it more accessible. For example, in the case of multi-page or multi-stage content.

Standard 3 : Understandable

Web content should be legible and easily understood by high-school students. If the content contains abbreviations or specialized and/or difficult-to-understand terms, we recommend cross-referencing to a section that defines these terms, or providing information bubbles when hovering over them. 

The various pages of a site with similar content must be predictable, i.e. they must resemble each other in their layout. It is advisable to avoid variations in the display of pages that are virtually identical in structure.  

For example, article pages should have the title in H1, each subtitle in H2 and paragraphs in the same font. 

It is also advisable to avoid changing the layout when an element receives focus or changes value. For example, in a search form, selecting a product category should not redraw its sub-components, i.e. change the layout.  

Last but not least, this standard suggests the provision of form input help. If a particular format is expected for an entry, it is recommended to indicate this information to the user. It is even recommended to display an error message explicitly indicating what is expected, and where possible, to suggest a correction. 

Standard 4 : Robust

This standard calls for web content to be compatible with different browsers and other display terminals, without any loss of information. For example, some sites display correctly on Google Chrome, but don't adapt to Mozilla FireFox. When a site is not supported by a browser, it is strongly recommended to set up an automatic message to inform the user and advise him to change browser.

Standard 5 : Compliance

For a website, it's very difficult to meet all the compliance requirements and create accessible content. Some site pages may meet Level A requirements, others Level AA and still others Level AAA. 

Level A requires compliance with level 1 web accessibility checkpoints. For example:  

  • Alternative text description for non-text content,  
  • Keyboard navigation using the classic tab and arrow keys,  
  • Structured, understandable content.  

Level AA requires compliance with both Level 1 and Level 2 control points. For example: 

  • Consistent navigation across all web pages with the same structure,  

  • Web content can be displayed on different terminals or agents (different browsers or screens), without any loss of information, 
  • Timed components can be activated and deactivated by the user.  

Finally, level AAA requires the whole of level 3, and this must take into account levels 1 and 2. For example:  

  • The organization of coherent, predictable content,  
  • Color contrasts between background and web content are satisfactory,  
  • Active prevention of input errors and/or suggested corrections.  

With accessibility standards constantly evolving, our efforts must also be ongoing.

And to conclude

In conclusion, setting up web content to accessibility standards is important in our increasingly digital world. By adopting WCAG and RGAA guidelines, content creators are helping to ensure an inclusive and equitable experience for all users. Priority standards, from level A to level AAA, provide a clear framework for assessing compliance and progressively improving accessibility. 

At 5 Degrés, we understand the importance of adhering to accessibility standards when creating accessible, understandable and inclusive content. 

As part of the imminent redesign of our website, we plan to integrate as many WCAG and RGAA standards as possible to enable a diverse audience to read and enjoy our content.

Compliance assessment compliance

Sources :

Picture of Darine Nganga

Darine Nganga

Product Owner Practice Product Management Consultant

Share this article

Share this article


Read also

Read the article
Read the article
Read the article