5 Tips for Creating Accessible Web Designs
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).
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:
“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.”
“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.”
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:
“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.1 AA Success Criterion 3.2.4 and is not considered accessible for people with cognitive disabilities or who use voice command tools.”
Tip 3: Include Image and Media Alternatives in Your Design
WCAG 2.1 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:
“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?”
“It’s worth noting that decorative images are okay, too. But they should be marked as such in the code!”
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.
“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.1 AAA SC 2.5.5 (or at least 24px for AA) can be tough when laying out content for smaller screens.”
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.
“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 Comprehensive Guide to Accessible Web Design.