3 Accessibility Mistakes Almost Every Designer Makes

Posted May 10, 2023

AudioEye

Posted May 10, 2023

A collage of accessibility best practices (like giving users the ability to stop or pause video) and mistakes (like skipping heading ranks)

Ready to see AudioEye in action?

Watch Demo

Accessibility mistakes happen all the time, but you can fix them (or avoid them altogether!) if you know what to watch out for.

Last Updated: May 2023

When it comes to designing for accessibility, mistakes happen all the time.

Some are relatively slight, like using a color combination that falls just short of the latest WCAG requirements on color contrast ratio. (So close, white (#FFFFFF) text on a dark azure (#0075EB) background!)

Others are more severe, like introducing keyboard traps or failing to provide alt text for images.

In this post, I want to take a step back and look at three accessibility mistakes that many designers make:

Thinking that accessibility isn’t their job.
Designing for one type of disability.
Viewing accessibility as an obstacle.

By the end, I hope you leave with two takeaways: Accessibility mistakes happen all the time, but it’s also not that hard to correct them. The key is knowing what to watch out for — and what to do about it.

Looking for a quick accessibility check? Try scanning your website for accessibility issues.

A pop-up message that says "This design is not accessible", with buttons to "Find Issues" and "Export Anyway"

1. Thinking That Accessibility Isn’t Their Job

For some reason, designers like to segment into a specific type of design, like visual, graphic, motion, UX, or UI. During a recent webinar, I heard someone described as an accessibility designer. The truth is that everyone can — and should — design for accessibility.

There’s also a lingering belief that accessibility is a problem for developers to solve. It may have something to do with the fact that things like focus order and aria labels are handled by a website’s code, but that doesn’t mean you shouldn’t be involved whenever possible.

Some of it is pretty low-hanging fruit, like checking your design’s color contrast ratio or providing alt text for illustrations. In fact, AudioEye’s own Sarah Ippen made a strong case for why designers should keep alt text in mind.

Alt text helps my design process. Are my concepts coming through when I write out what I illustrated? Does the image serve its intended purpose? Or is it purely decorative?
— Sarah Ippen, Visual Designer

But even things that seem more complicated on the surface — like providing designs for different breakpoints or using headings to help structure the page — can make it easier for developers to implement your design in the most accessible way.

The good news? There are plenty of free tools to help you bake accessibility into each of your designs.

A series of icons for different types of disabilities: an eye for visual impairments, an ear for auditory impairments, a hand for motor impairments, and brains for cognitive and neurological impairments

2. Designing for One Type of Disability

When designing for accessibility, it’s important to remember that you’re building a website for people with different abilities.

It's not enough to build a website with high color contrast for people with color vision deficiency (also known as color blindness); there's a wide spectrum of disabilities, and each one carries its own accessibility considerations.

For example, people with auditory impairments have unique requirements for video. To help them follow along, you should provide on-screen visuals and robust closed captions — including captions for sound effects that provide context that isn’t directly visible on screen (like notification sounds from a dashboard).

The same goes for people with motor impairments. You want to make sure that all interactive elements (like buttons) have enough margin and padding. If you don’t add enough margin between a Submit button and a Cancel button on a contact form, a person with a hand tremor (or even someone sitting on a bus on a bumpy road) may accidentally select the wrong button.

A Simple Checklist for Accessibility

Whenever we design something at AudioEye, we use a simple checklist to help us make sure it’s accessible for all audiences:

Is the color contrast ratio at least 4.5:1 (the standard for WCAG Level AA)?
Are we using color alone to convey information?
Do all interactive elements have enough padding and margin?
Did we provide alt text for any images or illustrations that provide information not included in the text?
Is the copy digestible and easy to read?
Have we followed proper heading structure across the page?
If we’re using photography, are our selections diverse and inclusive?

A stylized webpage with an oversized accessibility icon in the center

3. Viewing Accessibility as an Obstacle

Some designers worry that designing for accessibility means having to let go of certain design elements, like typography, motion, or subtle color variations that may be a part of a brand’s visual identity.

There’s a kernel of truth to this, but it doesn’t mean these elements are off-limits. Rather, it’s about using them in the right way.

For example, designers will often use headings to highlight key messages or break up large chunks of text. But they can run afoul of accessibility best practices if they choose a header for its visual appearance (like skipping an <h3> tag because the <h4> tag “looks better”) instead of following the proper heading structure.

According to the W3C’s Web Accessibility Initiative, skipping heading ranks can be confusing to people who rely on screen readers and other assistive technology (AT) and should be avoided whenever possible.

The same goes for motion. Done right, a subtle animation can add visual interest or critical context to a page. For example, you may want to highlight different features of your product with an animation that loops continuously. Or prove that you’re a trusted brand by adding a scrolling carousel of all your clients’ logos.

Both of these use cases are totally fine, as long as you keep accessibility in mind. For any sort of animation, I recommend avoiding auto-play functionality, or at least providing a pause or stop button. For the carousel example, you also want to make sure you announced each logo with the proper alt text.

A stylized web browser, with a cursor pointing at an accessibility icon that is part of a designer's toolbar

Building Accessibility Into Your Designs

If there’s one thing every designer appreciates, it’s a clear, prescriptive design brief. There’s nothing worse than trying to hit a moving target, or not knowing where you should be aiming in the first place.

Fortunately, there are plenty of well-defined standards and best practices for digital accessibility. The key is to embed accessibility into your workflow, from design to development.

Want to learn more? Check out our guide on accessible web design.