A Guide to Accessible Digital UX Design

Richard Alvarez

Principal – Digital Experience Practice

Aug 5, 2021 |

Posted in Digital Experience

Content

Content refers to any information that is found on your website or application. This may refer to written information, but may also include information presented through different means, such as slideshows and videos. Ideally, this information should be easy for visitors to understand, especially in situations where the information may impact their wellbeing, such as content warnings. Ensuring that content is accessible depends on the content itself and the audience. However, some examples of accessibility considerations for content include ensuring that content uses simple, age-appropriate language, and ensuring that there are other language options available.

Visuals

Visuals refer to any elements perceived through sight that are found on your website or application. Ideally, these visuals should be easy for anyone to perceive, and appropriate options should also be available for enhancement. For example, font size should not be extremely small, and font colors should be very distinct from background elements and display correctly on a variety of devices. There should also be zoom options, as well as alternatives to visually-presented information, such as audio options and alt text for images.

Media and Animations

Media and animations could pose difficulties for people with visual disabilities, as well as other disabilities. For example, flashing lights in a video or animation could be dangerous for individuals with epilepsy. Therefore, it is important to consider not only the fact that someone may not be able to see the animation, but that the content of the video or animation could also pose obstacles or dangers.

Audio

Audio refers to any elements perceived auditorily that are found on your website or application. These elements can be difficult to perceive for people with auditory disabilities, and therefore it will be helpful to provide alternative options such as a text version. Additionally, loud or grating sounds could be harmful to many individuals, including people who are prone to sensory overload.

Speech

Speech options are very valuable for users who can’t easily input information through other means. As such, accommodations for speech-to-text options can be extremely helpful.

Considerations for Different Device Users

It is always important to consider the fact that people may be accessing your content through various means; and as such, accessibility considerations should also take different device options into account.

Keyboard-Only Users

Some users use a keyboard exclusively to navigate through online content, and therefore it is important that all elements can be accessed through keyboard commands. This includes tasks such as scrolling through a page, selecting options, and adjusting on-page volume sliders. It is also important to consider the fact that keyboard users navigate through options by repeatedly pushing the “Tab” key, which can be tedious. This is another reason why a logical tab structure is so important. Additionally, it can be helpful to offer a “skip to main content” option so that users can avoid the tedium of skipping through all of these tabs if they prefer.

Touchscreen Users

Some users use a touchscreen exclusively to navigate through online content, and therefore it is important that all elements can be accessed and used effectively through a touchscreen interface. This includes tasks such as typing, submitting information, and selecting elements. Also, consider the additional space that may be necessary to effectively navigate a touchscreen. It may be helpful to ensure that interactive elements are large and widely spaced so that touchscreen users don’t experience difficulty selecting and manipulating these elements.

Device-Independent Design

Device-independent design refers to a type of design that can be accessed and navigated on a wide range of devices. This type of design considers everyone from mobile users to keyboard-only users, and is typically most effective when tested from each type of device.

Testing Your Design

It is important to test your UX when it is first implemented, as well as regularly thereafter to make sure that it is indeed accessible. To test your design, you should take the following steps:

Identify your users;
Identify your goals;
Create a prototype;
Conduct a usability test using a test group that represent a wide range of users;
Analyze your data and adjust as needed.

Additional UX Resources

Helpful UX resources include:

UX Movement: This is a blog resource for a wide range of UX information.
Usability Geek: This is a blog resource for a wide range of UX information.
UX Collective: This resource offers blog content related to UX development, as well as suggestions for helpful events, books, and more.
10 Do’s and Don’ts of Mobile App Design: This is a guide for testing for mobile-friendliness.

Additional Accessibility Resources

Helpful accessibility resources include:

Search Engine Journal: This article discusses websites’ obligations regarding compliance with accessibility laws.
Web Accessibility Initiative: This page lists laws relating to web accessibility in various countries.
Accessibility Basics: This is a page published by the federal government that outlines the fundamental principles of accessibility.

Accessible UX (user-experience) design refers to design that is built to be as useful for one group as any other. Although it often refers to accessibility for people with disabilities, this is not necessarily always the case. Accessible design may also consider factors such as language or educational barriers. Accessible digital UX design is not only a matter of ethical importance, but also often a matter of legal requirement and well-advised business practice.

The Importance of Accessible UX Design

UX design is an important ethical consideration, as not everyone has the same knowledge, abilities, or circumstances. Therefore, if you try and build a design with only one group of people in mind, you may be inherently excluding many individuals, or at the very least, requiring that they expend more work or resources to participate.

The ethical concerns of this issue are so robust that in many cases it is a legal imperative to account for accessibility concerns. Laws such as the Americans With Disabilities Act outline appropriate accommodations and when they are necessary. While these laws typically do not apply to website design, they can in some cases, such as web design for government-sponsored websites.

However, even in cases where you are not legally required to utilize accessible design for your website, it is often in an organization’s best interest. A failure to consider accessibility when designing your application or website may unnecessarily limit your client base or participants. Or, it may be viewed as a matter of poor customer service.

Usability vs. Accessibility

While “accessibility” refers to measures taken to specifically level the playing field for people who experience barriers to access otherwise, “usability” more broadly refers to how easy it is for people to use the product. For example, if you were to increase the font on your website to make the text easier to read for people with visual disabilities, that is a matter of accessibility. However, if you re-label tabs on your homepage to be more intuitive for any user, that is a matter of usability.

Accessibility Guidelines

There are many laws and governing bodies that outline and oversee accessibility concerns on the federal, state, and local levels. Many credible resources offer information about best practices for accessibility that may not necessarily fall within legal obligations. As such, it is impossible to point to any singular resource for all of the information you need on this topic. However, some of the best and most comprehensive resources available include:

Web Content Accessibility Guidelines (WCAG): This is widely considered to be the best and most comprehensive set of standards for web content accessibility.
ADA: This toolkit explores best practices and standards for web accessibility.
Section 508 and VPAT: The Voluntary Product Accessibility Template (VPAT) is a template provided by the federal government as a helpful tool regarding compliance with the revised 508 standards for IT accessibility.
ISO 9241: This is an international standard for ergonomics related to human-computer interaction.

Why Should Businesses and Web Developers Focus on Accessibility in Digital UX?

It is in the best interest of businesses and web developers to focus on accessibility in digital UX for ethical, legal, and business reasons.

Benefits to Consumers

Accessible UX design allows more individuals to access a website or application, or to use it more effectively. Accessible UX can even benefit consumers by correcting for large-scale disruptive events such as the COVID-19 pandemic, which caused many people to have to turn to digital means for everyday tasks and interactions.

Benefits to Companies

First and foremost, following accessibility guidelines can prevent potential legal action from being taken against your company. However, an emphasis on accessible UX design can also be beneficial to your bottom line. First of all, accessible UX design helps more potential customers to access your website or application, and allows them to use it more easily. Second of all, a dedication to accessibility can be great for your company’s brand and reputation. Consumers are increasingly invested in ethical business practice, and customers who benefit from accessible UX design may begin to view your company as a go-to for having their needs met.

Creating an Accessibility Plan

Creating an accessibility plan is an important first step for implementing accessible UX design on your website or application. An accessibility plan outlines standards and best practices for accessible design within your company, which is important to ensure that expectations are clear and UX design is consistent across all webpages and applications. Of course, your accessibility plan will need to be unique to your business, but the major elements that should be included are:

A reputable accessibility standard: There are many existing guidelines for accessibility, such as Web Content Accessibility Guidelines (WCAG). Choosing a standard to follow will simplify your accessibility plan and ensure that your protocols are up-to-date with evolving expectations.
Design system: Ideally, you should take the information you have gathered and use it to reimagine your design system for the sake of further consistency through all channels.
Navigation: Your UX should be easy to navigate for all users. Predictive analytics can help you to design a UX that anticipates a user’s needs and provides them readily.
Standards for review: You should clearly outline how often your accessibility standards should be reviewed, what elements should be updated regularly, and the process for making updates based on these reviews.
Priorities and goals: Your major priorities for accessible design should be made clear, and you should set achievable short and long-term goals to measure your progress over time.
Where and when: Make it clear when these accessibility guidelines should be applied, as well as what individuals or departments are responsible for ensuring that they are applied properly.

If you are new to this process, it may also be helpful to get additional support through user experience workshops or collaboration with another company.

The Major Components of Accessible UX Design

There are many different elements that a website or application may feature, and what steps toward accessibility that you will need to take will largely depend on what features are present.

Website Structure

Website structure refers to how your website is organized. For example, many homepages feature tabs that will redirect visitors to other pages on your website. The way that these tabs are organized and how they are presented to the visitor are elements of your website structure. Typically, an accessible website structure features organizational elements that are intuitive and easy to find and navigate.