8 Best Practices for Designing Accessible Products

Want to make sure the product you are building is user-friendly for all types of users? We’ve put together a list of 8 best practices for designing user interface components that are perceivable, operable, understandable, and robust.

Throughout the last decade, we’ve grown accustomed to performing many everyday tasks via web or mobile apps. For many people, this is the go-to, minimum-hassle way. 

But imagine digital solutions are all around you, and you’re unable to take advantage of them. You can’t shop online, access your account balance on a banking app, understand graph data because all the colors look oddly similar, or you submit a form without realizing it because the button labeled “Next” was actually “Submit”.

Accessible design is good design

Accessibility, sometimes abbreviated as A11y, tries to address issues in using digital products to provide access to services or products to everyone, whichever way they interact with them. Sadly, for many users, accessibility issues create barriers to using digital products and services and many digital products end up being inaccessible.

In order to avoid this, designers need to shift their mindset because accessibility benefits all users. In fact, some features that were primarily intended for accessibility purposes, such as the “Zoom In/Zoom Out” function, have actually become crucial to the user experience as a whole and are now common practice. 

By providing solutions for one group, we often end up accommodating a much larger audience. 

The four accessibility principles

First, you need to understand the four main guiding principles. These principles were developed as a part of the WCAG standards, which are considered to be the primary international accessibility standards for the web.

Based on WCAG, the accessibility team at Infinum has come up with a universal accessibility approach that covers both mobile platforms and the mobile Web and includes accessibility in the lifecycle of digital products. If you’re curious, you can find out more about the accessibility initiative at Infinum in this article.

Accessibility principles and levels, a breakdown

PerceivableContent must be presented in a way that can be perceived by the majority of users, including those with visual, auditory, or other types of disabilities.Content must be presented in a way that can be perceived by a wider range of users, including those with color blindness or impaired vision.Content must be presented in a way that can be perceived by the widest range of users, including those with more severe disabilities. For example, sign language interpretation should be provided for all audio content.

Content must be presented in a way that can be operated by the majority of users, including those with visual, auditory, or other types of disabilities. Content must be presented in a way that can be operated by a wider range of users, including those with visual or cognitive disabilities.Content must be presented in a way that can be operated by the widest range of users, including those with more severe disabilities.
UnderstandableContent must be presented in a way that can be understood by the majority of users, including those with cognitive disabilities. For example, instructions should be clear and concise.Content must be presented in a way that can be understood by a wider range of users, including those with limited literacy or who speak languages other than the primary language of delivery. For example, abbreviations and acronyms should be defined.
Content must be presented in a way that can be understood by the widest range of users, including those with more severe cognitive disabilities.
RobustContent must be presented in a way that is compatible with the majority of users, including assistive technologies. For example, all HTML code should be well-formed and valid.Content must be presented in a way that is compatible with a wider range of users, including assistive technologies. For example, all content should be accessible without relying on any specific technology.
Content must be presented in a way that is compatible with the widest range of users, including assistive technologies. For example, all content should be accessible using a wide variety of technologies and devices.
The breakdown of the differences between each level for the four principles of accessibility.

How to design a product everyone can use

To state the obvious, accessible design is good design. But how does one incorporate accessibility into their design?

To help you make sense of it all, we have summarized the accessibility guidelines into a handy list to help designers solve many accessibility issues through design. Feel free to incorporate these best practices incorporate into your workflow to ensure your output follows the four main accessibility principles.

1. Set a color contrast scale

Have you tried using your phone in bright sunlight? In all likelihood, it was not a very pleasant experience, having to squint your eyes or glue your face to the screen in order to make sense of what you were trying to look at. The reason for this was probably low color contrast.

Now, if you are a low-vision or color-blind user, you may experience low color contrast issues daily. Color contrast impacts the readability and legibility of your content and is an important element of the Perceivable principle. There is a specific rule for contrast ratio that has been accepted as standard, as it ensures a satisfactory level of contrast.

To avoid contrast issues down the line, incorporate color contrast into your design right from the very beginning. Invest time in defining your color scale and how these colors can be best used when creating your product’s style guide.

The image shows two mobile display storefront pages for a plant pot. In the first, marked ‘Don’t’, there is poor contrast between the white background and the light gray text displaying the size of the pot, as well as between the medium blue background of the pot color selection button and the black text that describes the color. This design fails to meet color contrast standards, as it  would be difficult to read for some users. On the second page, marked ‘Do’, there is a good level of contrast between the dark gray text stipulating the size of the pot and the white background. There is also good color contrast between the dark blue background of the pot color selection button and the white text that describes the color. This page meets color contrast standards and is accessible for a wider range of users.

Your design to-do list:

Test the colors when defining your product’s color palette. Check which colors work together and which don’t, and make a note in your style guide library

Follow size-ratio rules: 3:1 for large text sizes and 4.5:1 for normal text sizes

Follow the ratio rule 3:1 for icons and actionable graphics. Side note: decorative and brand elements do not require minimal contrast ratios

If you are using text on images, make sure that the text is legible – check if there is enough contrast between the background and the text (you can add an overlay layer between) and export text as a separate asset rather than as part of an image

Make sure you avoid using pure black on pure white and vice versa, as such a contrasting value in color brightness creates intense light levels that overstimulate the eyes and lead to screen fatigue

Avoid using overly bright and saturated colors, as they also overstimulate the eyes and lead to screen fatigue

Useful tools to help you check the contrast ratios:

2. Include visual cues & labels

Relying on transmitting information through only one of our senses can make users miss key information.

For example, users who are color-blind may not perceive the red outline of an input field. Users who use screen readers may not be able to understand what “ic_24” means in the context of the screen they are interacting with. Or imagine filling out a long form with numbers, only to find out at the end that you entered some information incorrectly, but the fields are unlabelled, so you have to remember which fields held which data. 

All of this can lead to users making unintentional mistakes that constitute a barrier to their use of the service or product. By adding simple cues and labels, you can both guide users and save their time and energy.

The image shows two information boxes with charts showing the carbon footprint of sources of electricity in Croatia. In the first, labeled ‘Don’t’, the chart is divided into colored sections, and a key at the bottom tells us which color represents Hydro, Gas, Wind, Coal, Bioenergy, and Other. In the second, labeled ‘Do’, the chart is divided into colored sections which also have a small symbol which, along with the color, are signified in the key to represent Hydro, Gas, Wind, Coal, Bioenergy, and Other. The first screen uses only color to transmit the information in the chart, whilst the second, through the use of both color and symbols, is understandable even to a color-blind user.

Your design to-do list:

Add labels to input fields and forms

Use a combination of icon + color + descriptive test for feedback status

Differentiate active vs. inactive input fields by adding another visual indicator, such as different fill options, shape weights, different graphic elements such as lines or dots

Underline links

Use color + patterns or icons for graphs, charts, and additional quantitative data

Use a progress stepper in large flows with multiple steps

3. Create a clear hierarchy of information

This sounds like an obvious practice for every designer on the planet. But you need to be aware of the intended order in which things will be experienced. Sometimes your creative passions may lead you down an experimental path, and a possible side-effect may be an unclear or inaccurately implemented content structure that doesn’t get information across as it was intended. 

This can present problems for users who use assistive technologies. Make sure you organize information in a logical and easy-to-follow structure, as it helps users to understand, prioritize and navigate through content.

The image shows part of a home screen of a mobile app about woodwork. The first, labeled ‘Don’t’, shows an unlabelled bookmark icon with a short list of article titles, one of which has a 4-star rating next to it. The second screen, labeled ‘Do’, has the title ‘Must reads’ with a bookmark icon, after which we see three links to articles within a clearly defined table. The information about the 4-star readers rating is clearly displayed within the same row as the article title. The second screen is organized more clearly and is more accessible to a wider range of users.

Your design to-do list:

Include a page title 

Have distinctive groups of items

Create subheadings for each group 

Use a linear & logical layout

Use consistent text alignments and layouts

Align with developers on the intended order of how elements need to be read

4. Use descriptive & non-ambiguous CTAs

Below are two actionable item options. Which one is more understandable by the text alone?

Option A: “More” 

Option B:  “View more details about our Shipping policy”

I’m guessing you chose option B.

Now, there may be other options that work and are more character-optimized, but keep in mind that you should avoid ambiguous links or buttons that are not clearly labeled. Instead, be more descriptive so that the purpose of the button or link can be understood by the text alone.

Your design to-do list:

Conduct a usability test to check your accessibility hypothesis 

Align with copywriters, content creators, UX writers, and whoever shapes the text within a product

5. Ensure the touch target areas are big enough

Are you respecting minimum touch target areas? Touch targets are the areas of the screen that respond to user input, aka all of the actionable items. If that area is too small or too close to another actionable item, it can trigger undesired interactions or leave users frustrated. Therefore, users need at least 1 cm2 of screen space to select the desired item. Keep in mind that different platforms have different requirements: iPhone = 44x44 px, Android = 48x48 px, Web = 44x44 px

The image shows two mobile displays showing two visibility options for the user to choose: public and private. On the first, labeled ‘Don’t’, the touch target areas for choosing either public or private visibility are very small and very close together: it is likely that in attempting to press one, the user would accidentally press the other. On the second screen, labeled ‘Do’, the touch target areas for choosing either public or private visibility are much larger and are spaced further from each other. In the second example, it is less likely that in trying to press one option, the user would accidentally press the other.

Your design to-do list: 

Ensure a minimum touch target area based on the platform for which you are designing

Make sure your small actionable items have enough area around them in accordance with the minimum sizing

Provide at least 8px of space between actionable elements

6. Put users in control

Users should always be aware of what the next step within the product they are interacting with will be. Do not refresh or update pages automatically unless it is really necessary. Unexpected product behaviors can cause issues, such as unintentional submission of data or purchase, the inability to read a page because of automatic updates, or audio playing automatically. 

These things can lead to users not having enough time to complete an action. By giving users control of the situation, they are able to more easily navigate and interact with digital products.

The image shows two mobile connectivity displays, scanning for nearby phones in order to transfer photos. The first, labeled ‘Don’t’, shows a scan in progress with three nearby phones found: Ana’s phone, Mark’s phone, and Phone XyagE. The second, labeled ‘Do’, shows a button labeled ‘Stop Scan’ underneath two nearby phones found: Ana’s phone and Mark’s phone. In the second example, the user has been given control over stopping the scan for nearby phones.

Your design to-do list:

Avoid time-dependant features

If you need to have time-dependent features (e.g., security tokens), make sure users see and are aware of the time remaining 

Provide users with an option to extend the time 

Don’t change the context of a screen without user confirmation

Don’t update content automatically

Give users the option to pause or stop any automatic process

Don’t play audio automatically and provide users with the option to control volume and sound

Don’t trap users in a flow, and provide them with a clear closing action

7. Avoid using flashing or excessively dynamic animations

It is important to avoid using flashing and overly dynamic animations for accessibility reasons because these can cause seizures, migraines, and other health issues for people with photosensitive epilepsy or sensory processing disorders. Additionally, these elements can be distracting and disorienting for all users, interfering with their ability to focus on the content and complete tasks effectively.

Your design to-do list:

Opt for static content instead of moving, blinking, or flashing content

If you are using flashing elements, make sure the flash rate is 3 times per second or less

Ensure that flashing objects cover less than 5% of the screen

Warn users in advance if the content is photosensitive

Align with motion designers on this topic

8. Align with the rest of the project team to address accessibility

The last accessibility practice doesn’t concern the design process as much as team communication. It is an important practice for designers to align with other project team members because both design and development are critical in successfully creating an accessible digital product. 

When designers, content specialists, software testers, and developers work together, they can ensure that the design vision is implemented accurately, technical considerations are taken into account and the product is tested in different environments and with different assistive technologies in order to meet accessibility requirements and provide the best user experience for all users.

Your design to-do list, in alignment with the product team:

Define focus states for actionable elements for the keyboard

Make sure the highlighted focus border has enough contrast within your user interface

Define the right focus order of the elements in cooperation with developers

Support scaled UI, e.g., users increasing font sizes

Align with the content team to provide text alternatives to images that convey information (decorative images do not require a text alternative)

Align with the content team to provide captions and transcripts and include entry points in your designs

Accessibility review – a second chance to make things right

After going through this list of best design practices, you probably realized that some of your finished projects don’t tackle all of these accessibility issues. So what happens now?

If you didn’t design with accessibility principles in mind, there’s still time to improve your product. Your efforts shouldn’t end after a design proposal is sent. In the same way that you would do design implementation reviews, you should also periodically review your product’s accessibility. 

The first step in a review is understanding the main accessibility principles and which issues they tackle. We have covered that in this article, but if you want to go into greater depth, there’s a Figma file for that.

We created an in-depth Figma file on Accessibility Guidelines for Designers to give designers a description of accessibility guidelines with examples.

The next step in a review is to make a strategic plan that works best for you. You can divide the review by platform, by A11y categories, or by an app’s main navigation and hierarchy. You can perform the review on your design file or the implemented product. Share the review efforts with software testers so that they can cover technical implementation and you can cover design.

At the end of the Accessibility Guidelines for Designers file, you will also find an A11y checklist template. It will help you document the accessibility status of your designed product, which will come in very handy when delivering your review findings.

A11y jigsaw falling into place

Designing for accessibility is a crucial aspect of creating digital products that can be used by everyone. Not only does it help to ensure that all users can access and use products, but it also leads to better design overall. Following the four guiding principles of accessibility, designers can create products that are more user-friendly and accessible for all.

Remember, design is just one piece of the big accessibility puzzle, but it plays an essential role. By incorporating these eight practices into your design workflow and doing regular A11y reviews, you are helping all the pieces of the puzzle fall into the right place.