Accessibility

7 min readSep 21, 2022

Create designs that allow users of diverse abilities to understand, and use your product.

Accessibility is the practice of making applications usable for a wide range of users. It enables the product to serve the needs of users with different abilities. Abilities traditionally meant (including visual, motor, hearing, cognitive or situational disabilities.. etc) to perceive, understand, and interact with the application.

Today it could be expanded to include environmental factors such as literacy, language, access to technology, etc.

In simple words, Accessibility defines every users’ ability to use products/services and helps them in accomplishing their goals.

Accessibility is not confined to a group of users with some different abilities, for example, visual, motor, auditory, speech, or cognitive impairments, rather it extends to anyone who is using the product with any permanent, temporary or situational impairments.

Research indicates that at least 15% of the population has some sort of disability.

Hence accessibility ensures that technologies are accessible and usable by a wide range of customers regardless of their abilities and accomplish their goals.

Apart from that is a legal requirement in certain national governments such as the United States, which says that all the applications should have the accessibility standards defined by the government before releasing it in the market. Ex: Accessibility standards defined by the US government.

Free & Discounted Udemy Courses — Explore Now

Follow these guidelines for different design elements to build accessible products

1. Layout and hierarchy

A strong layout keeps attention on what’s important and helps the user decide what to do next. Defining a Responsive Layout will make your application accessible to different users on different resolutions/ devices.

Guidelines to improve product accessibility:

Maintain consistent navigation and logical order of the elements across different resolutions to decrease the cognitive load.
All the elements on the layout should be accessible by keyboard tabbing for users who have Motor impairments.
Display priority information upfront on the screen to make it easily accessible for keyboard users.
Avoid vertical keyboard tabbing from top to bottom if the information is logically ordered horizontally, otherwise, it will be confusing for the user who has Motor impairments.

This example is the best practice of tabbing which is defined according to the hierarchy of the screen.

Avoid adding horizontal scroll, as the users with Vision and Cognitive impairments might not notice and guess the hidden information in it.
The layout and the elements on the screen should adapt and change according to the resolution or device type used.

2. Typography

Typography plays a major role to make the website accessible. Follow these guidelines to provide better product accessibility with text:

The line height should be at least 1.5 times the font size used.
Line spacing should be 2 times the font size to make it readable for all users irrespective of impairments.
Font size shouldn’t be smaller than 12px (Mobile) and 14px (desktop) to make it easy for the users with Vision impairment to read.
Maintain character count below 80 for each line to avoid adding too much cognitive load on the users.
Maintain hierarchy for the text (such as H1, H2.. etc) as it allows all the users to read through information fast, such as
- Page title
- Section title
- Name of the component
- Name of form field.. etc
Make all the textual links accessible by keyboard tabbing for the users who have motor impairments.
Use typefaces that are easy to read and understand. In general Arial, Helvetica, Lucida Sans, Tahoma, and Verdana are considered the most accessible typefaces.
Avoid using too many typefaces as it will increase the cognitive load for the users.

3. Color and Contrast Ratios

Color accessibility is important because it enables people with visual impairments or color blindness to have digital experiences in the same way as non-visually-impaired users do.

Guidelines for color accessibility are:

Define a color palette and use it consistently across the application to decrease the cognitive load for the users.
The text should have enough color contrast ratio against its background to make it readable for users who have sight impairments.

An example of text on different contrast ratios

Here the contrast ratio is 3.5:1

Here the contrast ratio is 4.5:1

Test the accessibility standards of your color palette with online accessibility testing tools.
Don’t rely solely on the colors to communicate critical information like error messages, as the color-blind users cannot understand them easily. Refer to the example shown below.

In the above image, the screens shown on the left side are seen by people who don’t have any color-blindness, whereas the screens on right are seen by the people who have color blindness

Use colors and visual cues to highlight the focus states as it will help the users with Motor and Vision impairments understand the current state. Refer to the example shown below.

3. Images/Videos

Images and videos allow users to understand the intent or concept more easily. Hence making the images and videos accessible for all the users is an important task for the designer.

Guidelines for image and video accessibility are:

Provide alt text (descriptive text) for the images which can be accessed by screen readers or other software used by Vision impairment users.
Ensure that images have enough contrast ratio with the colors and the background elements.
Avoid communicating the most important information just by graphics because the users with cognitive and vision impairments cannot understand the graphics easily.
Provide Closed captions for videos to make them accessible to users who have Hearing Impairments.
Also, enable the keyboard tabbing to operate (on/off) the videos for users who have Motor impairments.

4. Components and functionality

Components are the building blocks of the design and play a major role in user experience. Follow these guidelines for making design components accessible for all the users:

Similar UI components should be consistently used across the application to decrease the cognitive load for the users.
The functionality of the components should be similar across different resolutions.
Provide relevant names to the components and sections to easily communicate the content to the users.
Maintain a hierarchy for the components to help all the users understand the importance better.
Provide contextual help to the components like form input fields wherever necessary.
Avoid showing priority information on mouse hover as the Motor impairment users cannot access it.

5. Test accessibility

Once the design is completed, a test that the application is accessible to all the users. Best practices are to run a usability study with real users who have different impairments or you can also use online accessibility tools to test without real user involvement. Some of the tools are Dynomapper.Com, A11y Compliance Platform, Accessibility Checker.

Tips / Best Practices

Consider the color-blind users as a priority, as 80 percent of accessibility issues are related to color blindness.
Design different modalities to communicate the same information (colors, shapes, size.. etc) to make it accessible for all kinds of users.
Place the most important information upfront on the screen — above the page fold.
Maintain consistent navigation and UI elements which will be easy for people with cognitive disabilities to understand.
Include a “Skip to main content” link for keyboard users to reach the required information in fewer strokes.

Google search results screen shows the option to ‘Skip to main content’ (on top right corner) as soon as the user starts keyboard tabbing.

Maintain a style guide and pattern library to ensure the element's consistency across the application.
Touch targets for the mobiles should be between 45px to 57px.
Always provide zoom functionality in mobile interfaces for better readability.
Test for accessibility of the application with real users or online accessibility tools.

Checklist

Know your users and their abilities.
Define a responsive layout.
Have enough color contrast for text, images, and videos.
Provide Alt text for images/videos.
Maintain consistent navigation across different resolutions.
Show priority information upfront on the screen.
Represent critical information in different ways (text, colors & shapes..etc).
Check responsive web accessibility in relevant resolutions.
Run an accessibility test for the application.

Quick Question

Match the user impairments with their effects

Leave your answer in the comments section below!