notch-blue

3 Common Accessibility Pitfalls in Visual Interface Design

By:
November 21, 2016

Ensuring your website meets accessibility guidelines is a struggle for many organizations. It can seem confusing and overly technical to those unfamiliar with it. Often, it’s left as a checklist item for the development team at the end of a project.

Unfortunately, this can lead to a poorly executed user experience and is sure to result in failure to pass the guidelines in future audits.

To avoid this fate, accessible design should be an ongoing process that involves everyone—including user experience designers, visual designers, content creators, and developers.

In this article, we will highlight three common accessibility pitfalls we see in the visual interface design of websites. Being mindful of these pitfalls can help avoid costly mistakes and rework.

Pitfall 1: Color Contrast

The contrast between text color and its background color has a dramatic affect on readability for all users—especially users with low vision impairments. Users with low vision are not uncommon—estimated to be 10% of the population in the United States. These impairments could be the result of aging or other conditions including macular degeneration, glaucoma, diabetic retinopathy, cataracts, or traumatic injuries.

When a website is designed with low contrast user interface (UI) elements it can be difficult for these users to read the content. The areas in which we see contrast fail the most are:

  • Between text and background color of buttons and navigation
  • Text over images (e.g., those big hero images at the top of the page)
  • Between link text and body text

Never assume a foreground and background color combination passes the contrast ratio required for accessibility because it looks okay to you or because they are established brand colors—test it.

We’ve worked with brand color palettes that are poorly suited for designing UI elements that pass contrast testing. In those instances, we’ve worked with our clients to adjust brand guidelines to support accessibility for the web.

Guideline 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

Pitfall 2: Content Structure

A well-designed page is one with a content structure that is easy to read and understand. There are many visual ways to help a user through your content— composition, color, size, style, and more.

Now imagine not having those visual cues to aid you through the content. This is the reality for users that are blind or visually impaired. They rely on screen readers that translate the on-screen information into speech or provide the content as Braille.

Being mindful of content order and structure will benefit both sighted and visually impaired users. When information and structure are conveyed through a well-designed presentation, it will make it easier to programmatically assemble the page for accessibility. Screen readers rely on appropriate organization of content to ensure users can understand the structure of the page.

Guideline 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Guideline 1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

Pitfall 3: Color to Convey Meaning

Color is a major component to the visual design of a website. It enhances the overall aesthetic, attracts attention, and conveys meaning.

However, relying on color alone to attract attention and convey meaning is disastrous for some users.

That red border around a form field to indicate an error may not be noticeable to a user with colorblindness. The color-coded data and legends used for charts and graphs can also be problematic for users with color vision deficiencies as well. It can be difficult to match the color in the legend to their counterparts in the chart or distinguish the different color segments.

In these cases, it’s important to convey that information through another visual or through text. This ensures users who cannot see these color meanings are still provided the information.

In a previous article we discussed designing for color blindness more in depth.

Guideline 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

This article highlights only a few of the guidelines to be mindful of throughout the entire process when designing websites. Contact us to learn more about how we can help you create an exceptional experience for all of your users.

By Annette Gustafson
Senior Interface Designer

Annette has over 15 years in creative design for interactive experiences. Her design aesthetics and attention to detail can be seen through all stages of the collaborative process; from the initial sketches to the final deliverables.

View Annette's Bio

notch-white

Let us know your name and email address and we’ll send you our newsletter.


First Name

Last Name

Email Address

 

 

Thank you!