Illustration by Avirup Basu
“Imagine if 90% of the websites or mobile apps you use today locked you out. Everyone else continues to experience the convenience of mobile banking, the connectedness of social media, and the freedom of online shopping, but, for you, they’re inaccessible. For the 57 million people with disabilities in the United States, this is their everyday experience.”
Regine Gilbert, user experience (UX) designer, educator, and author of “Inclusive Design for a Digital World.”
The quote above perfectly illustrates why there is a need for accessible website design, which allows for all people to be included within a digital experience. Accessible websites, apps, and other digital assets help every user feel welcome and have a great UX.
There is a lot to consider when designing for accessibility. But with a few helpful tips, you’ll be ready to start designing for all your users.
Finger pressing the word accessibility on a keyboard. Image credit Adobe.What is accessibility?
Before discussing how to make websites more accessible, it’s important to understand what makes a website accessible or not. As the quote above reminds us, there are 57 million people with disabilities in the United States, many of which may be your users. For an optimal UX, some of those users may need certain features—such as content that is optimized for a screen reader—that make the website more accessible. Optimizing other website elements like image captions, color contrast, and font selections can also make your website more accessible to your users.
When designing, it can be easy to inadvertently exclude users and only design for people of certain abilities. If the information gathered during user research doesn’t include users with disabilities, you may miss information that can be helpful in designing for accessibility.
There are several accessibility-related issues to consider when designing your website. But in doing so, your site will be a more inviting place and help expand your user base by making it a place that anyone can access.
Types of accessibility issues
There are many accessibility issues that users may encounter while using website. While there are tools to help companies manage accessibility, the design process is important, too. Here are a few common accessibility issues to think about:
- Visual impairments (e.g., color blindness)
- Mobility impairments (e.g., wheelchair-user concerns)
- Auditory impairments (hearing difficulties)
- Risk of seizures (especially for users with photosensitive epilepsy)
- Learning/cognitive impairments (e.g., dyslexia)
- Incidental issues (e.g., sleep-deprivation)
- Environmental challenges (e.g., using a mobile device underground)
Understanding who your users are and what problem you are trying to solve for them with the use of your website is key. These two insights serve as your main resource when deciding what accessibility issue to consider and why. This is another reason why user research is important in the design and development of a website. It highlights areas of accessibility for you to consider that otherwise would go unaddressed.
Universal symbols of accessibility on blue backgrounds. Image credit Adobe.How to design for accessibility
To design for UX accessibility requires paying attention to the various checkpoints along the design process. There are many guidelines and tools to help, which we’ll outline in the following sections of this article with four distinct ways to make more accessible website designs.
1. Web Content Accessibility Guidelines and the Americans with Disabilities Act
The Web Content Accessibility Guidelines (WCAG) is a good starting point when you want to make a website more accessible. This resource provides a comprehensive set of guidelines for businesses to follow to make their web content accessible to all people. Individuals and corporations around the world have collaborated to create this set of universal, highly technical guidelines that covers everything from image and text use to code and markups. Being familiar with WCAG will help design teams make decisions about what to include, consider, and implement when creating an accessible website design.
Adhering to WCAG helps companies remain compliant with the Americans with Disabilities Act (ADA), which prohibits discrimination against people with disabilities in public sectors. While the ADA doesn’t exclusively mention websites and digital assets, courts are increasingly interpreting the ADA to include websites as public space. This means that businesses are responsible for making “reasonable accommodations” for all users, whether that’s in a brick-and-mortar shop or a digital platform.
2. Measure usability
It’s not enough to just implement the recommendations of the WCAG or any set of design guidelines. The iterative design process mandates that your designs be presented back to the user in its development stage. This means conducting usability testing with a broad spectrum of users. When conducting these tests, there are five areas to evaluate:
- Learnability. Evaluates the ease with which a user learns how to use the website.
- Efficiency. Shows how well a user adapts to using the website to complete a task.
- Memorability. Refers to the ease with which a user remembers how to navigate the website to re-do a task.
- Errors. Looks at how many errors occur when a user engages with the website.
- Satisfaction. An overview of how pleasant the experience was for the user.
Each one of these areas serves as a means to validate the UX accessibility of the website and
should serve as a baseline for your site’s pages. Accounting for accessibility is not just about knowing what users with different abilities need, but also exposing them to the interface and interactions. Doing so early in the design process minimizes the number of changes needed once it’s deployed to the public.
3. Advanced technology
As mentioned before, accessible design is accounting for a variety of needs from a spectrum of people, which may require the use of advanced technologies. Technologies such as Artificial intelligence (AI) are commonly used to address accessibility issues. With AI, a website is scanned and checked for color ratio of text used or alt text for images, for example.
Voice User Interface (VUI) is also a significant use of advanced technology. This natural UI is useful for many users, including those who need a safe, hands-free option when driving and those with various motor skills disabilities that prevent them from using a keyboard.
To ensure you’re designing properly for voice or gesture, studying human behavior is very important. This study is a foundation of Human-Computer Interaction (HCI), which is a multidisciplinary field that focuses on the design of computer technology. Designing accessible websites to support the user’s behavior is a byproduct of research completed in HCI design.
This is important because HCI speaks to the advancement of interactions in a website experience. It’s through the principles of HCI that you are able to execute on advanced technologies such as extended reality (XR). The principles include aspects of computer science, human factors engineering, cognitive science, and psychology—all of which have the potential to enhance website accessibility.
4. Design principles
Not considering basic design principles can also cause confusion and lead to a lack of accessibility, which may exclude individuals from navigating your website. Here are a few design principles to consider that will immediately help with your website’s accessibility:
- Font size. Make the font size at least 16px, which is the recommended minimum font size for digital platforms. Making your font size smaller than the recommended size could increase readability issues.
- Contrast. Focus on creating a distinct difference between two elements on a screen. Contrast can be created between the sizes of elements or color selections. For example, dark text on a light background of a web page helps to minimize readability or discoverability issues.
- Discoverability. Use contrast to help users easily find information on a website. Using colors that are low in contrast to one another not only makes it difficult to find information but also increases errors when navigating the website.
- Repetition. Repeat a single element many times in a design to help with memorability and guiding users through the website.
- Scale. Monitor the scale of elements within proximity to other elements, as this can help emphasize parts of your design.
- Hierarchy. Arrange visual information in a way that implies importance, such as making the headline of a body of text larger than the text below it.
When used correctly, these design principles can help make a website more accessible. To help keep track of your website’s accessibility initiatives, consider using a UX design system. This can help ensure that experiences are consistent and always adhering to established accessibility principles.
Hands holding paper family cutout. Image credit Adobe.Why accessibility in UX matters
Websites and apps give people access to information from all over the world and connect them with businesses and products that enhance their daily lives. All people deserve access to information, services, and products in equal ways, which is why designing accessible websites is so important.
By following the WCAG, measuring usability, employing advanced technologies, and utilizing design systems, designers can be sure that basic design principles are met and improve UX for all.