8 Things to Know About Website Design Accessibility and Why it Matters

Written by Alexandra Katehis  |  May 19, 2020
8 Things to Know About Website Design Accessibility and Why it Matters


Now more than ever, design needs to be inclusive to ensure that its optimized for people of all abilities. As technology has expanded its reach it has become an integral part of our lives from ordering groceries and prescriptions online, to virtual at home professional services like interior design and personal training, to next day delivery of thousands of products on Amazon Prime. 

Which is why the fact that 1 out of 7 people have some sort of disability is such an impactful number. It means that 10-20% of the people who engage with your brand or business will need specific accommodations in order access your content and functionality needed to solve the problem that brought them to you.

This is where accessibility considerations play a key role in making the overall experience and ease of use of a service, tool or digital product as accessible as possible in order to engage with the largest amount of people as possible.


With this in mind, it’s imperative that during the design process considerations, and testing, are put into to place to ensure individuals with disabilities, such as visual impairment, hearing impairment and motor skills difficulties (to name a few) can engage with your brand. The goal is to remove any exclusionary barriers to build a framework to aid the experience for things like screen readers, visual indicators, color contrast for forms and actionable items like navigation, buttons and links.

 

1. Know the Guidelines

 

WCAG is one of the most trusted sources that provides guidelines websites need to follow for accessibility; which includes three different levels, each with specific criteria that needs to be achieved.

Level AA is the passable threshold that most sites need to meet with the following success criteria: text spacing, non-text contrast, status messages, content on hover or focus, display orientation, identify input form field purpose and reflow of content scrolling (horizontal & vertical).

The highest WCAG standard is AAA and includes all of the items in AA, with the addition of: identify purpose of content, timeouts for user inactivity for data loss, animation/motion disable function (unless it’s essential to the functionality), 44 pixel target size for pointer inputs and concurrent input mechanisms.


2. Color Usage & Contrast

 

While color is exceptional at communicating errors, states and activity, it prevents users that have a visual impairment, or who are color blind, from getting the full context that a field that they typed in is incorrect. So the recommendation is that color is used to highlight, or compliment, what is already visible.

For example the color of an incorrect input field would be pink with accompanying text and potentially an icon pertaining to the specific error message.

In regards to color contrast, the guidelines call for a strong contrast to improve the readability of text in copy, links in navigation, CTA buttons as well as any icons.

 

color contrast do and don't example



3. Interactive Elements, Target Areas & Spacing

 

Large target areas for interactive elements and controls are critical for users with disabilities that affect their physical mobility.

Interactive elements, such as pointer targets in your UI design, need at least 44px x 44px size which you can see illustrated below.

Interactive elements do and don'ts for ADA compliance

Additionally, the space between the touch targets should be big enough to improve readability. Material design on the other hand addresses this concern by adding 8px of spacing between touch targets.

 

 

4. Motion Design


Impaired users need controls that can reduce certain animations or motions that can be disorienting for them. In fact, it's encouraged to refrain from using animation unless it’s vital to a website or app’s purpose.

The general rule of thumb is that users should be able to use your interface without relying on motion.



5. Form Fields

 

Taking precaution with the aesthetic choices for the UI design of form fields starts with two key areas; the first is defining the boundary of a form field box and effectively communicating to the user what the intention of the field is and the second is what the status is of the content placed within the form submission.

Strategic, subtle design elements, like adding a definitive stroke or outline around a form field and placing static labels above the field are two areas of focus in the WCAG guidelines. Take the example below, you can quickly see how the outlined form field boxes and contrasting color for the copy make a huge difference in ease of use compared to the opposite example with limited contrasting elements. 

form fields do and don'ts for ADA compliance



6. Typography


The core component of typography that applies for accessibility is the use of dynamic text. Dynamic text is coded in a way that allows for font sizes to be increased for readability.

Design choices also help improve readability such as the mixed use of heavy or bold typefaces for important headlines to highlight specific information and key areas of focus.

Additionally, omitting lightweight or thin fonts is recommended as you can see below.

Typography do and don'ts for ADA compliance



7. User Testing for Accessibility

 

In addition to using tools for contrast checking, there are different user tests that a design team can run to ensure that an interface meets accessibility requirements.

Some of these tests are centered on full task completion for a variety of important user flows, as well as various edge cases that allow for the user to undo, correct or change something to achieve their desired outcome.

 

8. It’s Never Too Late to Achieve Accessibility Requirements

 

It’s best to weave accessibility into a design and development process, so conscious decisions are made from the start to launch a digital experience that meets all users needs.

That said, it’s never too late to revamp certain code or design decisions - even with older websites that were programmed years ago.

Yes, some components will need to be rewritten to achieve successful results, but you don’t have to scrap an entire website or app. Finding the right agency that either specializes in accessibility or has the proven capabilities and expertise to advise on the best approach for improvements on your site or app.

 


Biggest takeaway? Accessibility isn't something you can simply ignore.

In the United States, The Americans with Disabilities Act (ADA) enforces the overall accessibility of products or businesses, digital or otherwise; and beyond the U.S., it’s a global rally to consider and design for people of all abilities.

Accessibility is very much here to stay, so it's imperative to factor the above (at the very least) into your digital project whether from the very the start or through investing to bring your experience up to date.

 

Not sure if your website is compliant? Need help determining where to start? Connect with one of our Strategy + Design experts today!