According to the World Bank, one billion people in the world suffer from some form of disability. This is equivalent to 15% of the world's population. Many people living with a disability are unable to fully use a product. This can be due to a variety of factors, including lack of accessibility.

Today, we cannot assume that all users access products in the same way and with the same experience. So accessibility becomes a crucial part of the design process to enable inclusion. According to Anna Cook at the Config Figma 2021 conference

“Accessibility is a form of inclusive design that focuses on disabled users. It is shown to be better for all people and creates innovative products.”

Accessible design is about ensuring that all your users, regardless of disability, can access your content. Thus, it is necessary that the products we work on are designed with all users in mind, not just the majority of users.

In this article, we will try to answer the following question: How and where can I start to take accessibility into account on my product?

The goal is to help you to evaluate the accessibility of your product. With simple steps you can find out if accessibility is taken into account in your product in even the most basic way.

1. First step : Auditing your Design

The first step is to audit your design, UI kit or Design System. A UI kit is like a library of visual components with reusable code. A Design System is a complete set of standards designed to manage the design of a product using reusable paths and templates. These scalable options provide a UX and UI repository for designers and product developers. Thus, it is necessary to understand the WCAG accessibility rules related to it.

“Design Systems are where we scale designs most efficiently. We can most easily scale accessibility in Design Systems.” Anna Cook Config Figma

By following the rules of digital accessibility defined by the World Wide Web Consortium (W3C), an international standardization, within the framework of the WAI (Web Accessibility Initiative). The objective of the WCAG 2.1 is to allow equal access to your product for people with disabilities.

The Web Content Accessibility Guidelines (WCAG) are technical recommendations that are themselves transcribed into success criteria that allow compliance requirements divided into three levels:

• Level A: addresses the simplest barriers for users with disabilities that require, for example, that color not be used as the sole visual means of conveying information, indicating an action, eliciting a response, or distinguishing a visual element.
• Level AA: addresses the most significant and common barriers for users with disabilities, requiring, for example, a contrast of at least 4.5:1 for the visual presentation of text and images.
• Level AAA: the highest and most complex level of accessibility that requires a strong investment by the product team and requires, for example, a contrast of at least 7:1 for the visual presentation of text and images.

The objective of this standard is to allow people with disabilities, whether physical, sensory (motor, auditory, visual), mental (intellectual, psychic, cognitive) or the elderly to access your web products. This also allows all users in general to navigate more implicitly.

This standard allows, among other things, to codify the difference of contrast on the elements of your design. The goal is to help visually impaired or color-blind people who have great difficulty interacting with your product. Thus, to set up an accessible product, it is necessary to take into account the accessibility rules mentioned above in your design.

2. Second step : Easy checks

Some key steps cover a few accessibility issues and are designed to be quick and easy, rather than decisive in the long term. The following list provides checks for specific aspects of a product. I invite you to test the recommendations for each of these steps on your own product.

👉 Title

Page titles are particularly important for finding your way and navigating between open pages in a browser. It is the first thing that screen readers mention when the user moves to another page.

Checks:

• There is a page title that correctly and briefly describes the content of the page.
• The title is different from other pages of the website and it correctly distinguishes the page from other web pages.

There is some flexibility in defining a good page title. The best practice is to start with important and unique identifying information

👉 Text alternatives

Text alternatives ("alt text") are used to relay the purpose of an image or icon. Alt text is used by people who cannot see the image. For example, blind people who use screen readers can hear the alt text. You don't usually see alt text on a web page, it is in the web page markup in the following format: <img src="picture.png" alt="alt text">. The Wave tool can then help you detect the missing tags.

Checks:

• If an image relays useful information to interact or understand the content of the web page, then it needs alt text.
• If an image is merely decorative and people don't need to know more about the image, it should have a null alt (alt="").

The use of appropriate alternative text is not an exact science. Some people prefer most images to have a detailed description, and others prefer a less detailed description. So the text should be functional without necessarily describing the image.

👉 Headings

Web pages often have sections separated by visual headings. To make them accessible, headings must be tagged. This way, everyone can navigate to the headings, including people who use a keyboard or screen reader. The Wave tool can give you an overview of the architecture of your site.

Checks:

• Text that looks like a title is marked as a title and has a tag.
• The page ideally starts with an "h1" which is usually similar to the page title.

Heading levels should have a hierarchy following the h1, h2, h3 and h4 tags. The tags provide instructions for different browsers on how to get a map from the titles of a page.

👉 Contrast ratio

Some users cannot read content if the contrast between the text and the background is insufficient (light text on a light background) including many older people who lose their contrast sensitivity. While some people need high contrast, for others with reading disabilities such as dyslexia, bright colors (high luminance) are not readable and therefore need low luminance.

Your product must allow users to navigate on your site without accessibility problems governed by the WCAG 2.1 standards seen previously. The Color Contrast Checker tool allows you to test the contrast of your own colors.

Checks:

• Smaller text under 24px (or bold text under 19px) must follow the 4.5:1 minimum contrast rule.
• Larger text larger than 24px (or bold text larger than 19px) must follow the 3:1 minimum contrast rule.

Unfortunately, your users do not perceive colors in the same way because some have different pathologies (visually impaired, color blind, dyslexia, ...). This is why paying attention to the accessibility of your products, sites and services is essential.

👉 Keyboard access and visual focus

Many people rely on the keyboard to interact with the Web. People use the keyboard or voice assistance technologies that rely on keyboard commands. Thus, an accessible web product allows users to access all content and functionality (links, forms, commands, etc.) using a keyboard.

Checks:

• Tab navigation: check that you can access all elements, including links, form fields, buttons, and media player controls. Check that the tab order follows the logical reading order.
• Visual focus: Make sure that the focus is clearly visible when you navigate between elements and you can tell which element has focus.

The keyboard navigation should be visible and follow a logical order within the page elements. Keyboard highlighting can take the form of a border or highlighting, which moves as you navigate the web page, as in the illustration below.

👉 Multimedia alternatives

The information contained in videos and audio documents is not accessible to people with disabilities. The solution is to provide an alternative format such as subtitles, text transcriptions or sound.

Checks:

• Auto-start control: It is preferable that sound or a video does not start automatically when a web page is opened.
• Accessible subtitles: The videos on your product have subtitles that can be turned on or off. They are not automatically generated because this is not sufficient for accessibility.

The best practice is to provide both captions and text or audio transcripts, although this is not always necessary. Transcripts have many benefits, both for people with disabilities and for the users of your product.

👉 Aria Label

Accessible Rich Internet Applications (ARIA), is a more technical specification that provides ways to make web interfaces accessible to people with disabilities. In particular, it helps to make dynamic content accessible to assistive technologies and should not duplicate alt tags. It consists of a number of HTML attributes generally beginning with aria-. The Axe tool by Deque allows you to trace if your site needs to use these tags.

Checks:

• If a dynamic element of your website needs a textual alternative in order to be understood, then the attribute aria-label="My title" is defined.

The ARIA attributes only allow users of screen readers to better understand the dynamic information on your web page.

It is important to understand that your product may appear to pass these different stages, and still have significant barriers to accessibility. Once these steps are validated, a more robust audit with experts is needed to comprehensively assess accessibility. To go further, A11yproject offers a more detailed checklist.

Conclusion

Is designing a fully accessible product unrealistic? The answer might be yes at first. But then, what is enough to make my product accessible? Accessibility is an imprecise practice where no product really achieves perfect and indisputable accessibility. It is up to the teams to learn about this subject so that they can adopt an inclusive approach to classify the important elements to be implemented. In practice, with a well-built approach supported by good tools, the product will at some point reach a level that respects accessibility standards. The perfection of an inclusive and accessible product is not the goal, it is first of all a research and implementation process.

Sources

A. (2018, 18 june). Designing accessible products UX Collective. Medium.
F. (2020, 3 july). Designing an inclusive and accessible product : Yes we can! Medium.
J. (2018, 8 november). A guide to color accessibility in product design. Invision.
Web Accessibility Initiative-WAI. (2021). Easy Checks -A First Review of Web Accessibility. W3C.
Web Accessibility Initiative-WAI. (2021). Web Content Accessibility Guidelines (WCAG) Overview. W3C.
Section508. (2020, july). IT Accessibility Laws and Policies. Section508.gov.
W3C. (2018, 5 june). Web Content Accessibility Guidelines. WCAG 2.1.