11 UX Accessibility Best Practices for Achieving WCAG and ADA Compliance

UseableNet

The user experience (UX) of a product determines whether it succeeds or fails. If a product is usable and intuitive, the end user can navigate your website or app and accomplish tasks with ease. If not, the experience becomes difficult.

The goal of UX is to design products that can be used successfully by every potential user, regardless of ability. More succinctly: The best UX is accessible UX. Here are 11 best practices to help define and achieve UX accessibility goals:

1. Start with a Checklist of UX Accessibility Best Practices

Keep track of the accessibility process with a handy accessibility checklist. This would 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.

2. Enable Keyboard Navigation

Keyboard accessibility is one of the most critical aspects of web accessibility that UX designers often overlook. As you navigate a webpage, the order of the interactive elements is essential. If a user is using only a keyboard—or only the tab key—can they successfully explore the content? Will it make sense to them? Navigation should be logical and intuitive.

3. Design Usable Focus States

Focus indicators within a webpage, often seen as blue outlines around text and interactive elements, identify which element has the keyboard’s focus. This helps users understand where they are when navigating your website.

4. Prioritise Text Clarity

Text legibility is one of the largest obstacles facing older adults and users with visual disabilities. Designers should use clear fonts and styles to enhance text clarity and readability.

5. Double-Check Colour Contrast

Another common issue facing users with visual disabilities is insufficient colour contrast between text and backgrounds or within graphics. The World Health Organization (WHO) estimates that there are 217 million people with moderate to severe vision impairment. Consider contrast for those users, not only within text, but also in graphics and logos.

6. Don’t Rely Exclusively on Colour

Although colour-coding can act as a shortcut, don’t rely on it and don’t forget to add labels. Users who are colour-blind may otherwise be unable to understand and operate graphs or other colour-coded elements on your website.

7. Make Sure Your Content Is Ordered Properly in HTML

Although sighted users can simply scan your website and identify where to click, users with screen readers must wait for their assistive technology to read every element of the page. 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 clicking a link and having to sift through the entire navigation menu before you can read the article.

8. Provide Explanatory Text for Links and Images

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 context of the webpage. “Image of person” is not a good description if the identity of the person is important for understanding the content.

9. Optimise Dynamic and Interactive Content

When adding slideshows, carousels, videos, and other interactive elements to your website, you need to make sure those elements are independently accessible. For example:

  • Audio and video content must be captioned, and a transcription should be easily available.
  • Autoplay for videos is not advised.
  • Every image within a slideshow must be captioned, and the slides must be navigable by keyboard.
  • Flash is also not advised because it is more difficult to make accessible.
  • Animations should not flash three or more times per second to avoid risk to users who have seizure disorders, as well as other sensitive users.

10. Use Proper Markups for Text

Making sure the style and design of your content are intuitive is critical. Titles and section headers should be easily identified with larger font sizes to help readers understand the content.

11. Use Labels or Instructions for Form Fields

In order to guarantee that users understand the rules and guidelines for form field inputs, labels should not go away when the user begins typing. Users can easily lose context with what they are writing.

Remember: Universal Design Is Good Design

At the end of the day, you get out what you put into accessibility design. If you address UX accessibility from the start of your website design, baking it into every aspect of the site will be easier.

UX and web design professionals can easily prioritise and optimise UX accessibility by following proven methods like those shared in this article. For more information on UX accessibility best practices, check out our primer on accessible design.