Provide consistent UI components

Example of consistent login buttons (accessible) vs. inconsistent buttons (inaccessible)
Image description: Accessible and inaccessible comparison of UI component consistency. Both examples show buttons on different webpages. The accessible example shows the same light blue "log in" button on all backgrounds. The inaccessible example shows an outlined light green "log into account" button the pink and a light orange "sign in" button on the purple.

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Consistent UI (User Interface) components are easier to understand and interact with, especially for people with cognitive and visual disabilities.

Components that do the same thing should also visually look the same. If components look different across different pages, it’s confusing and increases the cognitive load on people learning how to interact with the website/app.

Consistency also applies to alt text and labels that are available to screen readers. A screen reader is a type of assistive tech that converts text, buttons, and other screen elements to audio and/or braille. It is primarily used by Blind and visually impaired people. If you are new to screen readers, I recommend watching a video to learn how it works.

This references WCAG criterion 3.2.4 Consistent Identification (Level AA).

How to Implement This

Use a Design System

The best way to make sure the user interface is visually consistent is to use a design system. A design system is a source of truth for visual styles, layout, and components and comes with guidelines for when and how to use them.

This way of thinking is also known as Atomic Design, a concept focused on designing systems instead of individual pages. You start with components at the “atomic” level (e.g. titles, body text, buttons, etc.) and use these components to build larger, more complex components.


Smaller components that build up to create a modal dialog
Image description: A collection of components that include a title, body text box, 2 buttons (1 dark green and 1 gray) and dialog background with a golden dropshadow. On the right are 2 modal dialogs built using the smaller components. One says, “Do you like bees? Bees have lots of pro’s and con’s. Yes. No.” The other says, “Purchase flowers? Flowers are great for bees. Purchase. Cancel.”


Here are some guidelines on how to create a design system:


Here are some examples of design systems:

Consistent Screen Reader Text

Make sure that components that do the same thing also have the same screen reader label.

In this example, the login button is labeled differently across 3 different pages:

<title>About Us</title>
<button id="logIn">Log In</button>
<title>Blog</title>
<button id="signIn">Log In</button>
<title>Pricing</title>
<button id="userLogIn">Log In</button>

In order to be accessible, they should all be labeled the same.

Websites and applications can get complex pretty quickly with a large amount of text to track. Here are some tools to help manage the copywriting system-wide:

Further Reading

How to Test This

This requires manual testing through an audit of the UI design and screen reader writing.

Credits

No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.