What is website accessibility?

Website accessibility is the practice of making a website easy for anyone to use, particularly people with a wide range of physical and mental disabilities. These are eight simple guidelines to website accessibility for a better user experience (UX).

A Guide to Accessible UX Design

Have you ever experienced the discomfort of trying to read a website with hot pink text over a lime green background? Or maybe you’ve watched a video online and were annoyed to find no closed caption option? These are examples of inaccessible design. For people who do not have a disability, these design errors are just a nuisance. However, for those with varying disabilities, inaccessible design can completely ruin their experience. 

Website accessibility is the practice of making your website easy for anyone to use, particularly people with a wide range of physical and mental disabilities. Not only is an accessible website a smart business decision because more people are able to easily navigate your website, but it also shows your business values inclusivity and is committed to maintaining a virtual space that users of all abilities can understand and interact with.

In this blog, we’ll explain the importance of website accessibility and dive into some of the most relevant accessibility guidelines for UX.

The Importance of Accessibility

An accessible website is able to engage a larger audience because it prioritizes inclusivity. Regardless of disability status, anyone should be able to access the business, understand the content, find what they’re looking for, buy the product, and engage with the brand. The key to making all of that happen through your website is the user’s ability to easily navigate it.

Accessible websites also have better search results, further helping to reach a wider audience. Increased findability and usability leads to the increased financial strength of a business. The more people who visit your website and are able to use it with ease, the more likely they’ll buy what’s being sold.

Accessibility also includes the UX of many other groups you may not automatically consider. For example, those with varying economic statuses. Websites should be accessible to those with slower internet or individuals who may not have a computer and are only accessing the web on mobile devices.

Profitability aside, the most important reason to have an accessible website is to be an inclusive brand. A website that is accessible to all says that your company goes the extra mile to include everyone in the brand’s conversation.

Lastly, employing accessibility best practices is not just good for your business and inclusivity purposes, it’s the law. You can be sued for not complying with website accessibility requirements and risk your brand reputation in the process.

To learn more about web accessibility requirements, check out these resources:

• Americans with Disabilities Act (ADA)
• Section 508
• Web Content Accessibility Guidelines (WCAG). 
  
  

Key Accessibility Guidelines

Working toward an ADA compliant website may seem overwhelming at first, but we’ve put together these eight simple guidelines to help you get started (and a bonus tip!):

Color

Color is a go-to tool for making a website look and feel like your brand, but don’t rely on color alone to convey important information or prompt the user to take an action.

People who suffer from color blindness or low vision may have a hard time reading colored text. And, as previously mentioned in our hot pink text over a green background example, most people find a poor color contrast uncomfortable to read.

When selecting colors for the web, choose colors that have high contrast to one another, especially when it comes to text legibility. Consider testing colors on one of the many websites that allow you to do so to make sure what you're using on your website will pass ADA standards.

Additionally, instead of trying to make content stand out with color, try a headline in larger text, underlining the important information, or iconography such as checkmarks or x’s.

Keyboard Navigation

It’s so important that customers can navigate your website using just the keyboard. Not only do most people prefer to use keyboard shortcuts, but individuals with a variety of motor disabilities, visual impairments, and no precise motor control heavily rely on them.

Practice using your website only through your keyboard controls to test how accessible it is without using a mouse.

Text Clarity

Text that is easy to read is a top priority. A good rule of thumb is to make sure body text is at least 16 pixels. The WCAG requires the contrast ratio between text and background to be at least 4.5:1. 

Order Content In HTML & Write Alt Text

Many people rely on screen readers to convey a website’s information. HTML and CSS separation make it possible to reorganize the code to allow screen readers better usability without altering the screen layout.

It’s also important to provide alternative text (alt text) for any images on your webpage so that a screen reader or text to speech device can describe the image to someone who is unable to see it. Again, this may not just apply to a visually impaired individual, but also someone with an internet connection that’s having trouble downloading the image.

If your CMS doesn’t offer alt text, be sure to add a caption below describing the image. For maximum UX, alt text should be as concise as possible while conveying the point of the photo.  

Explanatory Link Text

Call to action (CTA) links should be clear and concise. Any user should be able to quickly understand the action they’re taking and what to expect when clicking on a link. 

You can support users with visual impairments and varying disabilities in understanding this action by making sure the text on the button clearly states what will happen if the user were to click on it.

For example, a CTA button that is created to have the customer learn more about a new product should say “learn more about our new product,” not just “learn more.” Avoid redundancy — having many CTA links throughout the webpage is not a strong persuasion method.

Design Elements

Avoid active design elements that users cannot control like automatic scrolling, moving, or video autoplay. These elements can hinder the UX for people with neurobehavioral disorders like OCD and ADHD, and those with motion sensitivity, causing dizziness, headaches, and nausea. Strobe or blinking effects also shouldn’t be used, because they affect individuals with disabilities like seizures and other visual impairments.

​​Overall, animation and motion should be used sparingly and with purposeful intent. Moving elements should always be used for a specific reason and not just added for the unnecessary purpose of what might seem like a cool design element. If you have something moving on screen it should be to help the user rather than hinder their experience. Less is more when it comes to accessible website design.

If you do choose to use animated design elements for a purpose, consider embracing easing. Easing allows you to ​​change the acceleration and deceleration of an animation transition, mimicking real-world acceleration and, in turn, making the object look more natural. Avoid linear motion, which is the opposite of easing when an object moves from full-speed to stationary.

Forms

Make sure any forms on your website have field labels. Error messages should be communicated in an easy to read text box that explains how the user can easily solve the error.

In the same vein of color and text clarity, error messages should also have an icon to distinguish the error, not just color.

Language

Consider accessibility from a language and cultural perspective. Websites with a language switcher might communicate your content to a much broader audience. Restructuring a website based on how a different culture may prioritize information is another useful accommodation to consider.

Bonus Tip: Diversity

Consider taking your accessible website a vital step further by making sure it also conveys diversity wherever possible. For example, photos and videos should include people of varying races, body shapes and sizes, physical disabilities, sexual oriention, etc. Companies that prioritize diversity and inclusion show the customer that they value underrepresented groups.  

It’s important to remember that transitioning to accessibility is a process. Take the time to really understand what is required of your website, how you can best serve any user who tries to navigate it, and then start with these guidelines one step at a time.

Final Thoughts on Accessibility

Integrating accessibility into your web design and development will help to improve the overall UX of your website. Following the accessibility checklists mandated by WCAG, ADA, and Section 508 will provide the most meaningful and relevant UX.

Conduct a UX audit to address the accessibility of your website yearly. Although taking the time now to go through these guidelines is a great start to making your website more accessible, new guidelines are issued each year. And while there are accessibility softwares out there that we utilize when conducting audits and launching websites, there’s nothing that can replace a human going through the site.

If making sure your website is compliant with accessibility guidelines still feels daunting, we're here to support you. Get in touch with us to learn more about how our UX experts can help.