11 UX Web Accessibility Best Practices

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.

How iS ux aCCESSIBILITY uNIQUE?

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.

1. Start with UX Accessibility Checklist of Best Practices

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.

2. Enable Keyboard Navigation

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. 

3. Design Usable Focus States

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. 

4. Prioritize Text Clarity

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:

• Arial (sans serif)
  
  
• Book Antiqua (serif)
  
  
• Georgia (serif)—UNCG brand body font
  
  
• Helvetica (sans serif)
  
  
• Lucida Sans (sans serif—Windows)/Lucida Grande (sans serif—Mac)
  
  
• Palatino (serif)—UNCG brand body font
  
  
• Tahoma (sans serif)
  
  
• Verdana (sans serif)—used by many accessibility sites
  
  

5. Double-Check Color Contrast

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.   

6. Don’t Rely Solely on Color to make dISTINCTIONs

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.

7. Make Sure Your Content Is Ordered Properly in HTML

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.

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 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.

9. Optimize Dynamic and Interactive Content

When adding slideshows, carousels, videos, and other interactive elements to your website, ensure that those elements are individually accessible.

For example:

• Audio and video content must be captioned, and transcription should be readily available.
  
  
• Auto-play 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 with seizure disorders and other sensitive users.
  
  
  

10. Use Proper Markups for Text

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.

11. Use Labels or Instructions for Form Fields

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. 

Remember: Universal Design Is Good Design

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 prioritize and optimize UX accessibility by following proven methods like those shared in this article.

Curious about which web accessibility solution is best for you? Take our online assessment now.