This blog post was originally published in March 2023 and updated in April 2024.
The success or failure of a product is largely determined by its user experience (UX).
If a product is usable and intuitive, users can easily navigate the website or app and become customers.
On the other hand, if the experience is difficult, users are unlikely to continue using it.
The goal of UX design is to create products that can be used successfully by every potential user, regardless of their ability.
In other words, the best UX is accessible to everyone.
It takes a team to create an accessible experience, typically made up of UX design, web development, quality assurance (QA), and content creation.
If any of these roles neglect accessibility during their contribution, the outcome may not be accessible.
For instance, if a developer follows all the accessibility best practices when coding a page, but the design they are working with has accessibility issues, the developed page could still have those issues.
This is why UX design is so important for web accessibility: ux designers outline how users can achieve their different goals in visiting your site. Any accessibility shortcomings introduced here risk persisting through to the final product, and will require rework before the product goes live.
Review a handy accessibility checklist before beginning your UX designs to have the basic requirements fresh in your mind before you begin working.
Then, review your work against the checklist to ensure you haven't missed anything.
An accessibility checklist should include basic steps to make sure accessibility is incorporated into the design, build, and QA testing phases of your website. A simple checklist can help you stay on target for UX accessibility best practices and ensure that nothing slips through the cracks.
Keyboard accessibility is one of the most critical aspects of web accessibility that UX designers often overlook.
With a mouse, users can move directly to the webpage element they want to interact with, regardless of other elements on the page.
But with keyboard navigation, users might tap a single key (often the tab key) to sift through the different interactive page elements. Each element should also display a focus indicator to which page element has the keyboard's focus.
For keyboard navigation, the ordering of elements is essential, since it's most intuitive to navigate through related items together. Also, interactive elements must be selectable with a keyboard, otherwise, users can't choose to perform that action if the keyboard can't land on it.
As a UX designer, ask yourself: can someone explore this content if they use only a keyboard—or only the tab key? Will it make sense to them?
To gain a better understanding of how keyboard navigation works and common user frustrations, try HOCUS :FOCUS, an interactive game that relies on only your keyboard to for navigation.
Focus indicators within a webpage identify which element has the keyboard’s focus. They're often seen as blue outlines around text and interactive elements.
When the interactive elements on your webpage don't have focus states, keyboard users can't tell where they are on the page, nor which page elements can be interacted with.
UX designers can help their developer colleagues by including focus states in their designs. This removes any ambiguity about how the focus state should look and can also help remind developers to include focus states throughout the developed page.
Text legibility is one of the most significant navigation obstacles facing older adults and users with visual disabilities.
UX designers should use clear fonts and styles to enhance text clarity and readability.
Some common fonts with minimal decoration and good height, width, and weight include:
Another common issue facing users with visual disabilities is insufficient color contrast between text and backgrounds or text within graphics.
The World Health Organization (WHO) estimates that there are 217 million people with moderate to severe vision impairment. To help these users more easily read your content, use a contrast checker tool to ensure the colors and fonts provide enough legibility.
More recently, some websites like hubspot.com have started to provide high-contrast toggles to their websites. This allows brands to maintain the known colors of their brand identity while providing a more accessible experience.
Although color coding can be a quick way to provide contextual information, don’t rely on it as the sole indicator of difference.
Color-blind users might not be able to perceive color-coded elements on your website.
Adding labels can also be helpful to these users.
Although sighted users can scan your website and identify where to click, users with screen readers must wait for their assistive technology to read every page element.
It’s crucial to label and order content properly in your HTML so that screen readers and other assistive technology can read the most important content first and everything else in the correct order.
For example, imagine the frustration of loading an article you'd like to read and waiting to sift through the entire navigation menu before you can start reading.
Alternative text for images and links helps users with limited context understand the purpose of those elements.
For links, make sure that descriptions can be understood independently, out of context (e.g., “Wall Street Journal graphic depicting U.S. unemployment rate for people with disabilities, 2010-2019”).
For images, describe what is happening and show how it matters for the webpage's context. “Image of person” is not a good description if the person's identity or the action they're performing is important for understanding the content.
When adding slideshows, carousels, videos, and other interactive elements to your website, ensure that those elements are individually accessible.
For example:
It is essential to ensure that the style and design of your content are user-friendly and easy to understand.
Titles and section headers should be easily identified with larger font sizes to help readers understand the content.
To guarantee that users understand the rules and guidelines for form field inputs, labels should not disappear when they begin typing. Otherwise, users may lose context with what they are writing.
It can be helpful here to locate the form field label outside the input box, instead of inside the input box as placeholder text.
The effort you put into accessibility design directly impacts the usability and inclusiveness of your website. By addressing UX accessibility from the start, you can create a seamless experience for all users and ensure that accessibility is an integral part of every aspect of your site.
Want to See These UX Accessibility Practices in Action?
Join our upcoming webinar, "How a Blind Person Uses a Website," where you'll gain firsthand insight into the user experience challenges and accessibility solutions that can make or break your website's success. This live session will provide practical examples and actionable strategies to enhance your UX design for all users. Register now to secure your spot!