Overview of digital accessibility in practice in a Drupal project

A disability, common misconceptions

In France, 12 million people (nearly 20% of the population) are affected by a disability, including 1.5 million by a visual impairment. We all try to encourage the adaptation of public spaces to improve their daily lives (access ramps, buttons embossed in braille, audible alerts, etc.). We are concerned with making the digital public space more accessible. Digital accessibility serves the same objectives.

Accessibility doesn’t concern me!

We, UX and UI designers, interface designers, now have to integrate these accessibility requirements in order to offer everyone an improved experience. Designing accessible interfaces also helps increase the ROI of a digital project by reaching a wider audience.

Digital platforms are taking a turn towards accessibility: on your smartphone, in your settings, there's an "Accessibility" tab. There you can change font size, icon display size, color inversion, set high contrast, etc. Even without (apparent) disabilities, these settings are useful. Try it out around you—you’ll see that many users increase the font size or adjust contrasts. But that's not even the most obvious example: the iPhone's flash that signals a message or call to you—know what I mean? Well, this feature was originally intended for d/Deaf and hard-of-hearing people who couldn't hear their ringtone. Adaptations for accessibility are an integral part of modern digital projects—they’re also a source of innovation!

Accessibility + Inclusive design = Digital accessibility

Digital accessibility isn’t just about use. The efforts and planning also happen upstream, during interface design: that’s inclusive design. To explain the concept, let’s quote Tim Berners-Lee, who defines accessibility as: "Putting the Web and its services at the disposal of all individuals, regardless of their hardware or software, network infrastructure, native language, culture, geographic location, or mental or physical abilities." Accessibility concerns the device, software, interfaces, and also accounts for temporary or permanent situations.

Taking inclusive design into account in your design approach is above all about being deeply empathetic. It's about seeing users as they are, not as we imagine them to be. Digital accessibility means access to all platforms, for all people.

How to implement it?

Creating an accessible digital project requires more thought and knowledge. You need to get familiar with the standards and use them properly. Of course, it may be hard to implement every single one. However, we must always keep in mind the principles and legal requirements on this subject (the law of 11 February 2005 supporting people with disabilities). These are set out in the General Accessibility Guidelines for Administrations (RGAA), listing all the criteria that government and public institution websites must follow.

If the obligation doesn't currently extend to the private sector, the latter should nonetheless take inspiration from it. An accessible site increases its popularity by broadening its audience. It's already easy to think of some basic features that improve navigation on a site:

• Give pages a title;
• Give section headings;
• Avoid captchas;
• Ensure sufficient contrast between text and background;
• Do not rely solely on color or sensory information to convey information;
• Label links and buttons;
• Avoid dialog boxes and opening new windows;
• Provide skip links;
• Allow control over animations;
• Clearly situate the page within the site and offer several ways to access it;
• Allow keyboard navigation;
• Ensure the focus is visible;
• Allow text resizing and adaptation of display size;
• Allow more spacing between text;
• Identify and keep grouping and page regions consistent;
• Provide alternative text for images and non-text content.

These are just a few points to help make a project more accessible.

The bluedrop.fr team, for example, carried out this accessibility work for the Céreq website. The project was certified AA accessible, fully meeting the General Accessibility Guidelines for Administrations (RGAA). So we applied the criteria listed above, and grouped some of them into an "accessibility" button in the site’s header. Users can thus make their own adjustments for color contrast and font size.

Tools for developers

For developers, the work is just as meticulous and methodical. Here are some good development practices for an accessible project:

• Give each page a unique title that reflects its content or function (