Reuter: A Web Designer’s Responsibility to Accessibility

By Alan Reuter, Associate Design Director at MCD Partners

 

Design is for everyone. However, not everyone can use products the same way. For example, some have vision disabilities, such as color blindness, some have motor skill disabilities, and others are unable to use their hands. So when designing for accessibility, you must ensure that your product is designed in such a way that people with disabilities can use them, and have their specific needs met.

Web Accessibility has three levels, per WCAG:

Level A: The lowest level. Although certain standards for accessibility are met here, most people with disabilities may find it challenging to navigate your product.

Level AA: The most common level, and the standard by which accessibility is measured. Meeting Level AA means most people with disabilities will reasonably be able to use your app.

Level AAA: The highest possible accessibility standard for a website or app. This strict level is usually reserved for specialist sites. In fact, W3 does not recommend AAA compliance be required as a general policy.

Everyone on a creative team, whether a copywriter, designer or developer, has a responsibility towards accessibility. Here’s five key ways on how designers can fulfill that responsibility and make products more accessible:

.

Information Must Have Sufficient Color Contrast

Low contrasts can make it difficult for users to read or interact with elements, and can block people with vision disabilities from your product completely.

Ensuring sufficient color contrast is the most important tool in a designer’s toolbox. For AA standards, body copy text (i.e. anything normal weight and smaller than 19px size) must meet a 4.5:1 contrast ratio on your background color. Iconography, form elements, headlines or large text (i.e. anything 19px or more) must have a color contrast of at least 3:1, and the font must be bold. Anything larger than 24px does not have to be bold.

Link text inside paragraphs must have a 3:1 color contrast to your body copy text color. However, this rule can be ignored if you follow the next principle.

 

Color Alone Cannot Be An Indicator of State

Suppose a designer has blue link text on black body copy, and it meets the 3:1 contrast. That’s great! However, what if you have this on a background where one of the colors does not pass contrast? This means your links are no longer accessible because you have to adapt one of your text colors to meet the new background color contrast.

Link text can be different in other ways, such as making it bold and underlined. This ensures that if you have text on varying background colors, you no longer have to worry about the link color in your body copy meeting a 3:1 contrast. For standalone links, consider adding a chevron to clue the user in on its purpose.

 

Ensure Interactive Elements Have Clear Labels

Make sure your form elements have clear labels, such as “First Name” or “Date of Birth.” If something is actionable, clear labels will help people understand what they are doing.

If you draw interactive icons with no label, make sure it is a clear visual. For example, an “Edit” icon might be a pencil, and an email icon might be a paper airplane or envelope.

 

Design Components That Stay Intact at Large Sizes or With Text Increases

Not everyone sees your designs the same way. People may have settings on their computer to enlarge the text size, or use bold text. These variables can potentially cause your designs to break, so keep this in mind as you build your product.

 

Ensure Actions Have an Equally Accessible Alternate Action

When designing interactions, remember that some might not be feasible for everyone. Take carousels, for example; a user might be unable to swipe their screen to move to the next element. Ensure your carousel design has an alternate interaction to navigate, such as directional chevrons which can be tapped, clicked, or navigated through via keyboard.

 

******

 

Making accessible design systems a priority is a net benefit for you, your user base, and your business. When your product is accessible for everyone, users can navigate your product without the need for additional tools. When incorporated into your design identity and brand, accessibility strengthens your product, and ensures your design is truly for everyone.