5 Tips for Creating Accessible Web Designs

Back to blog

5 Tips for Creating Accessible Web Designs

Posted August 17, 2022

AudioEye

Posted August 17, 2022

A stylized webpage says '5 Tips for Creating Accessible Designs', next to the names and headshots of two AudioEye designers
A stylized webpage says '5 Tips for Creating Accessible Designs', next to the names and headshots of two AudioEye designers

Ready to see AudioEye in action?

Watch Demo

Get expert tips on how to design your website for accessibility, based on the latest best practices from the W3C's Web Accessibility Initiative.

Web design trends — like using Comic Sans or animating entire sites with Flash — come and go, but the fundamentals of good design remain the same.

Make it look good. Make sure it works.

If you ask Sarah Ippen, a visual designer at AudioEye, there’s a third component of good design that should be written in bold.

Make it accessible.

My new rubric for a design requires me to not only make something that looks beautiful and suits the intended purpose, but is as accessible as possible. If it isn’t accessible, I haven’t done my job.

So what does it mean to design for accessibility?

In simple terms, accessible web design is the practice of designing websites in a way that people with disabilities can easily navigate, consume, and interact with the content. But there’s a lot of nuance behind accessibility — and it can be uncharted territory for many designers.

In this post, Sarah and Sojin Rank (Senior Manager, Brand & Design at AudioEye) break down 5 tips from the World Wide Web Consortium (W3C) on making websites more accessible to people with disabilities. Following these tips is a good way to help you meet the W3C’s Web Content Accessibility Guidelines (WCAG).

As you design for accessibility, consider using an accessibility checker to help you identify any issues with your website's accessibility and take steps to correct them.

Two stylized browsers — one in color, the other grayscale — with the label "Check designs in grayscale"

Tip 1: Provide Sufficient Contrast Between Foreground and Background

According to the W3C’s Web Accessibility Initiative (WAI), foreground text needs to have sufficient contrast with background colors. The more contrast you have between your text, UI elements, and background colors, the more accessible it is for everyone.

If contrast equals accessibility, does that mean gradients are off-limits? Not necessarily, as long as you’re careful about how you use them:

SOJIN:

“Gradients are back and Microsoft WordArt couldn’t be prouder … but you have to be super careful with them! It’s easy to check your color contrast for solid-color text or backgrounds. Things get a bit trickier when you start playing with gradients.

“I try to add drop shadows to my text elements to help separate them from the background … even when lighter colors get close, there’s a darker color to help add more contrast and separate the two elements.”

SARAH:

“If you want to see if your design works for contrast and composition, look at it in grayscale. This will help you see if your text is legible and which parts of your design stand out.”

A stylized browser that shows all CTA buttons with the same label: Sign Up

Tip 2: Ensure That Interactive Elements Are Easy To Identify

Providing distinct styles for interactive elements — such as links and buttons — can make them easier to identify. But according to Sojin, accessibility goes beyond aesthetic decisions like which color to use for a link or hover state:

SOJIN:

“A common digital accessibility error that I was painfully unaware of was that if you have a recurring call-to-action (CTA) on your site with the same functionality (for example: opening a contact form), your button labels must be the same for all instances.

“Content strategists and copywriters may recommend a variety of CTAs (such as Contact Us, Get In Touch, Let’s Connect, Drop Us a Line, etc.), but this actually fails WCAG 2.2 AA Success Criterion 3.2.4 and is not considered accessible for people with cognitive disabilities or who use voice command tools.”

Black-and-white photo of a mountain, with the alt text "Landscape of a mountain peak covered in snow, in black and white"

Tip 3: Include Image and Media Alternatives in Your Design

WCAG 2.2 SC 1.1.1 requires that you make any information conveyed by non-text content — such as charts or images — accessible through the use of a text alternative.

Missing or non-descriptive alt text are two of the most common accessibility issues today. When images and media are poorly described (or worse, not described at all), people who use screen readers are left to wonder what they’re missing.

Providing alternatives for non-text content is a relatively simple fix, but it can have a big impact on accessibility. And according to Sarah, there’s a secondary benefit to writing descriptive alt text:

SARAH:

“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?”

SOJIN:

“It’s worth noting that decorative images are okay, too. But they should be marked as such in the code!”

A mocked-up CTA that shows accessibility best practices for font size and padding, next to the label "Consider small screen requirements"

Tip 4: Create Designs for Different Screen Sizes

One of the biggest challenges for designers today is designing for all screen sizes, from mobile phones to traditional desktop browsers. Responsive design is here to stay — and accessibility adds another variable for designers to consider. According to Sojin, best practices like adding more padding for zoomed browsers gets harder as viewports get smaller.

SOJIN:

“I remember when there was a huge shift to responsive designs. If it wasn’t designed for mobile, you were totally missing the mark. Now, when I approach designs for smaller viewports such as mobile and tablet, I really pay attention to how much padding and margin I add to interactive elements. Aiming for 44px per WCAG 2.2 AAA SC 2.5.5 (or at least 24px for AA) can be tough when laying out content for smaller screens.”

A stylized webpage that shows the option to play/pause a video on the screen, next to the label "Provide controls for content"

Tip 5: Provide Controls for Content That Starts Automatically

Sound and motion are effective ways to grab people’s attention, but they can also be disruptive to many people (not just those with disabilities). As a result, the W3C recommends providing visible controls to allow users to stop any animations or auto-playing sounds.

SARAH:

“I used to think that animating an ad or graphic was an essential part of grabbing people’s attention, but now I realize that not everyone wants a constantly moving image. It can worsen the experience for people with vertigo and epileptic conditions. Now, I approach animation as an option instead of a must-have, and try to use it only when it truly enhances an experience.”

Get Help Designing for Accessibility

Following the tips above, which are part of WCAG requirements, can help you deliver the best user experience possible — for all users, regardless of ability.

Want more tips on how to make your site accessible for all users? Check out AudioEye’s Ultimate Guide to Accessible Web Design.

Ready to see AudioEye in action?

Watch Demo

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading