A product's user experience (UX) determines whether it succeeds or fails. If a product is usable and intuitive, the end user can easily navigate your website or app and become your customer. 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. Keep reading for 11 web accessibility 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. Can users successfully explore the content if they use only a keyboard—or only the tab key? 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. Prioritize Text Clarity
Text legibility is one of the most significant 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 Color Contrast
Another common issue facing users with visual disabilities is insufficient color 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 the text but also in graphics and logos.
6. Don’t Rely Exclusively on Color
Although color coding can act as a shortcut, don’t rely on it, and don’t forget to add labels. Users who are color-blind may otherwise be unable to understand and operate graphs or other color-coded elements on your website.
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 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 webpage's context. “Image of person” is not a good description if the person's identity is important for understanding the content.
9. Optimize 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 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
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
To guarantee that users understand the rules and guidelines for form field inputs, labels should not go away when they begin typing, or users may lose context with what they are writing.
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 which web accessbility solution is best for you? Take our online assessment now.