Web Accessibility and User Experience

This chapter includes information about:

  • Definitions of web accessibility and user experience
  • User experience principles that benefit all users
  • Characteristics of accessibility in web design
  • Additional resources for accessibility standards
Close-up of keyboard with a clear overlay between the keys
A keyboard with an overlay designed for users with conditions or illnesses that cause their hands to shake. (cobalt123/Flickr)

Web accessibility means designing websites and presenting content online in ways that work for all types of web users, including those with disabilities or technological limitations.

At the heart of accessibility is user experience or UX, which is a designing with a focus on meeting the needs of the user. This is related to the principles of user-centered design. From usability.gov:

“User experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations. It also takes into account the business goals and objectives of the group managing the project. UX best practices promote improving the quality of the user’s interaction with and perceptions of your product and any related services.”

An analogy for UX on the web is the question: Where's the bathroom? (Photo by Lee Cannon/Flickr)
An analogy for UX on the web is the question: Where’s the bathroom? (Photo by Lee Cannon/Flickr)

A good analogy for thinking about UX is the “where’s the bathroom?” problem. Imagine that you are visiting a restaurant, and you are looking for the bathroom. You may look for signs indicating the location of the bathroom, or you may look for the area where bathrooms are most likely to be located based on your experience with other restaurants. You know you’ve correctly found the bathroom once you see familiar bathroom features such as sinks, mirrors and toilets.

But if you can’t find it right away or the signage is ambiguous, you may end up feeling uncomfortable and uncertain. This is poor design that isn’t focused on customers’ needs. With good design, no restaurant customer should ever have to ask where to find the bathrooms.

UX Principles

Intuitive navigation. As in physical spaces such as restaurants, users need clear labels and signposts to find their way around a website. The information users need must be easy to locate.

Clear hierarchy. Users must be able to quickly tell which information is the most important. Organized menus, descriptive page headings and clear visual cues such as text size and color all help users understand your content easily.

Consider your audience. If your audience includes people who speak different languages, for example, you may need to provide information in multiple languages or include a translation tool to fully reach your audience. Similarly, if your audience includes many people who are limited by slow Internet speeds or expensive data plans, presenting your information in a long video would not be considerate of their needs.

Accessibility Principles on the Web

From the nonprofit organization Web Accessibility In Mind, web users’ disabilities can be organized in the following categories:

  • Visual: Blindness, low vision, color-blindness
  • Hearing: Deafness and hard-of-hearing
  • Motor: Inability to use a mouse, slow response time, limited fine motor control
  • Cognitive: Learning disabilities, distractibility, inability to remember or focus on large amounts of information

See stories about how people with disabilities use the Internet in this collection from W3C, the governing body for web standards.

Accessibility principles also benefit users who do not have permanent disabilities. W3C explains: “For example, a key principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations. This flexibility also benefits people without disabilities in certain situations, such as people using a slow Internet connection, people with ‘temporary disabilities’ such as a broken arm, and people with changing abilities due to aging.”

Easy ways to make websites more accessible

Include a description of an image in the "Alt Text" field.
Include a description of an image in the “Alt Text” field when adding images in WordPress.

Provide alternative text. Users with disabilities may not be able to see images or other non-text content. Use captions and the “alt” field for images to briefly describe what the image shows.

Navigate by keyboard. Can you navigate your site using only keyboard commands? Using a mouse or touchpad is difficult or impossible for some users. This is especially important for online forms.

Don’t use color alone as an indicator. For example, don’t use just color differences to indicate a selected button or to show site navigation. People who are colorblind or visually impaired may not be able to distinguish these elements.

Transcripts for multimedia. Whenever possible, provide the full text of an audio story or video. Make sure all essential information is available in text.

High contrast text. Avoid text that is brightly colored or similar to the site’s background color.

Examples of good, OK and poor text contrast.
Examples of good, OK and poor text contrast.

Additional Resources

WordPress accessibility information and accessibility-compliant themes
WebAIM introduction and resources
W3C Web Accessibility Initiative introduction