digital accessibility guide

BEFORE STARTING

Creating an accessible website or digital service is not fundamentally different from a “traditional” approach. It’s not about adopting one technology over another, acquiring specific skills, or radically changing your working methods. Instead, it’s about setting goals, making the right trade-offs, and above all, adhering to the highest standards of rigor throughout the project. Once this approach is adopted, everything becomes a matter of common sense.

First and foremost, be vigilant when writing the brief: genuinely consider the subject. Your site will only be accessible to all if you decide it to be so; by setting a direction, a roadmap with its metrics and associated budget.

Next, rigor in UX/UI design, particularly by resisting certain aesthetic temptations that can hinder the user experience (low contrast, fast animations, excessive “gamification,” etc.).

Your accessibility efforts during the design phase should not be limited to just wireframing or strict design work. It’s also important to pay special attention to the words, labels of your call to actions, content in your PDF documents, etc. Accessibility is a consideration that should be addressed at all levels!

In development, don’t compromise by adhering to standards that cover code structure, content documentation, and implementing suitable testing procedures throughout the technical production.

Don’t be afraid of dilemmas: creating an accessible site means solving a complex equation that won’t have a simple or perfect solution. We aim to reconcile marketing and business imperatives with considerations for visual, motor, or hearing impairments. Designers should evoke emotions while remembering that some people have poor or no vision. Usability experts should surprise us without forgetting that some individuals cannot be precise in their movements. Videographers should convey a complete message to those who cannot hear.

Lastly, verify. You’ll need to complete a checklist, the content of which is already accessible through the reference framework provided by the Interministerial Directorate of Digital Affairs.

However, this foundational work only makes sense if your teams and agency understand the issue and implement a comprehensive approach based on understanding the needs of the end user and the limitations they may experience on the web.

Beyond a simplification, the steps presented in the rest of this document are intended to serve as guidelines for everyone, milestones that give meaning to work on web accessibility and allow you to implement it concretely in your project.

the brief

Think “Accessibility-First”: 4 reflexes to integrate during the conception of your brief

The brief is a crucial step in your project as it determines its scope, boundaries, and your expectations. The brief sets things in motion but also serves as a roadmap that will be useful throughout the production process. Here are a few simple best practices to ensure the accessibility of the final product, which won’t harm its overall quality!

DEFINE OBJECTIVES

First and foremost, you need to establish the purpose of your project and what justifies its existence. Is it to inform the user, facilitate a purchase, generate quote requests, etc.? Defining objectives helps structure the project and make the right trade-offs throughout production.

If your organization meets the criteria mentioned in the legal framework section, you are required to make an accessibility statement, and the formality in this case is stricter. You may be obligated to comply with a certain level of accessibility. In any case, you will need to declare the accessibility level of your site (fully accessible, partially accessible, or non-compliant).

AIM FOR SIMPLICITY

In general, the simpler a web interface is, the more chances there are to make it accessible to all. So, from the conception of the brief, aim to eliminate anything unnecessary for achieving the user’s objectives. It’s common sense!

THINK “ACCESSIBILITY-FIRST”

Beyond a checklist of criteria, accessibility is an ongoing process that involves asking some simple questions throughout the project: Is the information still understandable if I can’t distinguish colors? Am I able to accomplish a goal if the content on a page is read aloud to me? Can I click on this button if my hands are shaking? Can I understand this text if it relies heavily on acronyms and unfamiliar terms?

MEASURE

Include accessibility as part of your prerequisites and define key performance indicators (KPIs). Anything that is measured improves, so your brief should clearly state your accessibility requirements and the metrics associated with your objectives.

Audit

Specifically, if you are required to make an accessibility statement, an audit by a specialized and independent third party will be an essential step to determine the level of accessibility of the site, expressed as a percentage and reported as fully accessible, partially accessible, or non-compliant.

the design

An accessible design: Our selection of 5 essential points to validate in UX/UI

The design (UI) and conception (UX) phases are crucial for accessibility. While it’s always possible to make changes to contrast, font size, or wording during the development phase, not anticipating your constraints from the beginning of the mock-up production will inevitably hinder development.

Therefore, five points require your full attention when designing your web project. Please note that this list is not exhaustive and represents our subjective and imperfect selection of the most critical points regarding design accessibility.

You can find the complete list of criteria and tests from the RGAA to ensure full accessibility of your digital productions by following this link.

CONTRAST AND SIZE

Particular attention should be given to contrast (the difference in tone between two overlapping colors) and the size of elements, especially concerning textual content. Numerous tools are available to ensure that these two criteria are met, for example, https://contrastchecker.com.

screenshot contrastchecker.com with insufficient contrast

screenshot contrastchecker.com with good contrast

On the left, insufficient contrast; on the right, sufficient contrast. The validation of the contrast level may depend on the typography size.

COLORS AND SHAPES

Similarly, the meaning of an element should not rely on its color or shape. For example, an error message should not be conveyed solely through the use of red color or a triangular symbol. The error should be explicitly stated.

On the left, the information provided by the red icon is insufficient as it lacks clarity, especially in the context of assistive reading. On the right, the error is textually formulated.

COMPREHENSIVE TEXTUAL INDICATIONS

Links and navigation elements, in general, should provide a clear indication of their destination. It is preferable to use explicit links such as “Read the article,” “Access the team page,” or “Go to the contact form” rather than generic formulations like “Learn more” or “Discover.” .

On the left, the button’s content does not provide enough information about the link’s destination, whereas on the right, the destination is perfectly clear.

DO NOT RELY ON USER DEXTERITY FOR NAVIGATION

Avoid clicks on overly small areas and limit complex actions (such as drag and drop, which requires clicking and dragging the mouse) by favoring simpler actions (such as single-clicking) whenever possible.

To ensure full accessibility of your content, make sure it is accessible through three different methods, such as mouse or trackpad navigation, keyboard navigation, and voice command.

AVOID ANYTHING THAT FLASHES

Finally, strobe effects (flashing, flashes, intermittent lights, etc.) should be avoided.

the code

Your browsers are in a disabled state.

Firefox, Google Chrome, Microsoft Edge… The browsers we use to access the internet are inherently in a disabled state: visually impaired, hearing impaired, and with restricted motor abilities. Their navigation on a website is only possible through code that they understand the semantics and content of. Development does not tolerate approximation but allows for distilling its essence, here in 4 steps for accessibility concerns.

CODE STRUCTURE

The most fundamental requirement for accessibility concerns adhering to W3C standards, which aim to unify semantics on the web. Thus, every line of code should be declared according to its purpose. For example, a link should be marked with an <a> tag, the main title with an <h1> tag, and an email field in a contact form with the <input type=”email”> tag.

code lines :HTML attribute "type=email" allows for features such as auto-completion on mobile devices and identification of the type by assistive technology software.

HTML attribute “type=email” allows for features such as auto-completion on mobile devices and identification of the type by assistive technology software.

IMPLEMENTING ALTERNATIVES

Code structuring allows for the implementation of alternatives, such as navigating with keyboard arrows instead of a mouse or having the content of a web page read by assistive technology software.

Using the attribute “aria-label=pagination next” enables keyboard navigation through pagination instead of relying on a mouse.

CARE FOR MEDIA CONTENT

Images, videos, and audio files are the most challenging components in terms of accessibility because, unlike text content, their meaning is not directly understandable to web browsers. Your browser doesn’t “understand” an image you present to it unless you explicitly indicate its meaning. Therefore, images should be accompanied by alternative text (using the “alt” attribute), and videos should support audio descriptions. In general, it is best to minimize reliance on media content for the overall meaning of a web page.

Some clarifications on alternative texts (the “alt” attribute)

When an image cannot be loaded or displayed, the alternative text is displayed in place of the image. This can happen when a user is using a browser that doesn’t support images or when the image file is damaged or cannot be found.

When an image contains important content that needs to be understood by the user, the alternative text provides a description of the image’s content.

When an image has no important content and is used purely for formatting or layout purposes, the “alt” attribute should be empty.

TEST, TEST, AND ALWAYS TEST

Numerous tools, such as the Wave Evaluation Tool, allow for evaluating the accessibility quality of a website during production. These tools provide diagnostic and problem-solving features to assess and address accessibility issues.

I TALK TO CLIENTS ABOUT IT

HOW TO DISCUSS IT

I TALK TO CONSULTING TEAMS ABOUT IT

I TALK TO DESIGNERS ABOUT IT

I TALK TO TECHNICAL TEAMS ABOUT IT

I TALK TO CONTENT CREATION TEAMS ABOUT IT

I TALK TO CLIENTS ABOUT IT

Thinking about a digital platform in a way that makes it truly accessible is primarily about seeking to enhance its effectiveness! That should resonate with them!

It will be adapted to a larger number of people within your target audience: 20% of people in France are unable to use digital tools and services due to disabilities (source: Secretariats of State for Disabled Persons and Digital Affairs).
By considering the simplest and clearest user journey to guide your audience to the information, product, or service for which this digital platform is designed, it will benefit everyone.
By improving the accessibility of your website, you create optimal conditions for search engine optimization.
By simplifying your pages, you significantly enhance their portability across different devices, including mobile.

And, this increased effectiveness won’t cost you more. Working on accessibility will certainly require significant thought and design work, but it doesn’t entail developing specific functionalities. On the contrary.

Lastly, improving the accessibility of your digital platform can help reduce/limit your carbon footprint by having fewer and, more importantly, lighter pages.

Specifically for IT departments, it’s worth noting that since the code has been developed based on standards, scalability and maintenance will be simplified.

I TALK TO CONSULTING TEAMS ABOUT I

Proposing to a client a website/platform/app/… that meets accessibility standards will have several advantages for you:

It implies that the design phase will be more thorough, the objective better defined, and the necessary functionalities better evaluated, making the project easier to manage during the production phase. You will enable your client to have a more high-performing digital platform, without additional costs, for which they can claim a socially and environmentally responsible approach. But thinking about accessibility means thinking holistically.

It implies that the design phase will be more thorough, the objective better defined, and the necessary functionalities better evaluated, making the project easier to manage during the production phase.
You will enable your client to have a more high-performing digital platform, without additional costs, for which they can claim a socially and environmentally responsible approach.

But thinking about accessibility means thinking holistically.

You should have this mindset during the design, creation, development, as well as in the content planning.

It is essential to share this awareness with your client. Designing a technical shell that complies with accessibility standards, without considering the accessibility of the content that will populate it, would be of little interest. And this holistic approach involves considering accessibility even when it’s not a project requiring technical development. For example, posts on social media should also be designed with inclusivity in mind.

I TALK TO DESIGNERS ABOUT IT

No, accessibility doesn’t mean austerity, but rather simplicity. So, your concern for aesthetics should absolutely not be disregarded.

But let’s be honest, your role will be crucial. Why? Because the graphic design is the initial translation of the design work, before development, so it’s at this stage that strategic choices will be made. Your task is to enhance without overcomplicating.

The positive point? You will have objective arguments to defend your design; arguments that should help you move beyond the all-too-common “I like it” / “I don’t like it” scenario. Accessibility allows you to argue with technical elements that are unbiased by aesthetic judgments.

I TALK TO TECHNICAL TEAMS ABOUT IT

Accessibility is a guarantee of simplicity. Because it implies:

that the project you will be developing has undergone thorough design work.
that the objective is clear and you will be asked to keep it simple for effectiveness.

From a technical standpoint, don’t worry, developing an accessible website/platform/app/etc. does not require specific expertise. You just need to follow the criteria of the RGAA (Accessibility General Reference System).

I TALK TO CONTENT CREATION TEAMS ABOUT IT

Using a simple and accessible language register does not mean sacrificing meaning. On the contrary, these efforts benefit everyone.

In the checklist:

Carefully consider documents from the outset: especially providing transcripts for video audio descriptions and ensuring high-quality captions.
When PDF documents are available for download, they should also be produced with accessibility in mind.