3 Common Accessibility Pitfalls in Visual Interface Design
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.
Want more Insights?
Don't miss a single Point of View! Receive our articles and podcasts in your inbox.
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.
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.
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.
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.
Latest POV Article
By Annette Gustafson & Rebecca Grazzini Budget constraints are real, and teams are being asked to do more with less all the time. But, failing to meet certain expectations can result in disappointed customers, regulatory or legal hassles, competitor disruption, and loss of business.
By Rebecca Grazzini Do you have a mechanism in place to communicate to your customers and users if your site or system experiences a critical failure? If not, there’s no time like the present to identify a strategy that will inform your users of the problem and communicate key details about the outage.