Link to Fluid's Microsoft Teams channel Link to the support page

Accessibility

We believe that all digital products should be inclusive by design: anyone should be able to use, navigate and interact with accessible interfaces. We are striving to reach that goal and need every digital expert onboard: that means you too! You will find here below everything you need to know how to craft accessible experiences with Fluid.

Understanding accessibility

A key to more inclusivity

Digital accessibility aims at having services that are usable by anyone. Anyone meaning regardless of the context they are in (cultural, tech-wise, ability-wise…). Accessibility usually has a strong focus on ensuring people with disabilities can experience a digital service, since they are amongst the most marginalized groups in the world. Disabilities may be physical, visual, auditory, cognitive…

As the World Health Organization (WHO) affirms in a tweet: “Disability is not only a public health issue, but also a human rights and development issue. People are disabled by society, not just by their bodies. These barriers can be overcome!”. This is precisely what accessibility strives for.

Assistive technologies

Some people with disabilities will use assistive technologies to navigate the web. Assistive technologies aim at improving functional capabilities. Here are some examples:

Screen readers

They render content vocally or as braille output. They are useful for people with visual and also cognitive disabilities. For instance, people with dyslexia may benefit from having content read aloud.

Braille displays

They provide content in braille by raising pins dynamically on a keyboard. It may also be used to supply inputs in braille. For example, they may be helpful for blind people who know braille.

Head mouses

They are mouses operable through head movements and face recognition via a webcam. They are beneficial to people with motor disabilities, e.g., people paralyzed from the shoulders down.

There are international laws and regulations about accessibility. You should reach out to your local legal team to know to what extent you abide by them. Globally, the United Nations Convention on the Rights of Persons with Disabilities states that people with disabilities have the same rights as anyone else. Refusing to accommodate software reasonably is a form of discrimination. As far as countries are concerned, here are some examples:

🇪🇺 The European Union

The European Accessibility Act requires some services to be accessible for people with disabilities. e.g., e-commerce. All EU Member States should have a corresponding transposed national law.

🇫🇷 France

As of 24 July 2019, a specific decree requires large companies like ENGIE to publish a Multi-Year Digital Accessibility Plan, and an annual plan. Every service must also be audited, share their level of conformance, a point of contact and a digital accessibility statement.

🇺🇸 The United States of America

The Americans with Disabilities Act (ADA) makes sure people with disabilities are not discriminated against. Lawsuits were filed against some companies that dit not provide accessible digital services on this basis.

Key principles for more inclusion

The Web Accessibility Initiative (WAI) states that accessible services should be:

Perceivable

Information and user interface components must be presentable to users in ways they can perceive (sight, hearing, touch...).

Operable

User interface components and navigation must be operable (using a mouse, a keyboard or any other technology).

Understandable

Information and the operation of user interface must be understandable. e.g. the text is readable and users are helped to avoid mistakes.

Robust

Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

Though Fluid focuses on helping you build more accessible interfaces, please be mindful not to leave it at that. Your whole process should become more inclusive. For example, you can make sure your user samples are diverse enough when you do research or tests in the field.

Fluid's modal dialog with Stark's contrast validation (10.09:1) for the x button.
Accessibility is not limited to contrasts. How would a screen reader vocalize the x button here for example? Cancel? Close? You decide!

Getting started with accessibility

Our commitment: accessible components

At Fluid, we pledge to deliver components as accessible as possible. See International Standards and Guidelines to learn more on the resources we rely on to do so.

Please be mindful though that:

  • You are still responsible for making your whole experience accessible. No matter the sense (sight, hearing, touch), consistency in use should remain the same for everyone. Only you can assure of that.
  • We may have missed accessibility issues. If you notice an accessibility inconsistency or bug, do not hesitate to reach out.

Everyone has a responsibility, you included

Our stance is that every role in a team has a responsibility to ensure the service they craft is accessible. For example:

Product Owner

Make sure your service is accessible and conformant with your local regulations.

Designer

Ensure optimal experiences for all (sight, hearing, touch).

Developer

Build a service applying WCAG 2.1 & ARIA specifications.

Tester

Validate the chain of accessibility is working as expected.

How to build accessible experiences with Fluid

To support you on your quest for accessibility, we have decided to document components specifically for developers and designers.

For developers

Each component will be documented on the website. If you have any questions, don’t hesitate to reach out.

Any Issues? Contact Us!

For designers

Each component will be documented in figma in a new panel: Accessibility Checker. If you have any questions, don’t hesitate to reach out.

Any Issues? Contact Us!

International standards and guidelines

We rely on the following guidelines and standards to make sure our components are as accessible as possible:

Web Content Accessibility Guidelines (WCAG)

WCAG is an international standard. It has 3 levels of conformance, from lowest to highest: A, AA and AAA. WCAG (A & AA) is referenced in several international expectations regarding accessibility. For example:

Référentiel Général d’Amélioration de l’Accessibilité (RGAA)

This French “General Framework to Improve Accessibility” helps check that a web page is conformant to A & AA criteria of WCAG 2.1. This is the framework we leverage to make sure our web components are as accessible as possible and abide by French but also international expectations.

Accessible Rich Internet Applications (ARIA)

ARIA provides specifications for design patterns (accordion, combo box, modal dialog...) to help make them more accessible. It provides a definition and examples for the pattern, as well as expected attributes and keyboard interactions. Don’t hesitate to have a look when you are designing or developing new interactive components.

Any issues? Contact us!

Whether you would like to report an accessibility issue or are not sure on how to include accessibility, we are here to help. Don’t hesitate to reach out!

David de Vicente

Product Manager

Céline Bouillon

Accessibility Lead