3 Tools That Make Accessible Design Easier
Ready to see AudioEye in action?
Watch Demo
From AI image generators to color contrast checkers, learn about the tools AudioEye’s design team use to deliver accessible designs.
As someone who spends a lot of time thinking about accessible design, I like to think that I’m pretty tapped into the latest industry trends.
2022 has been a busy year for the design world. Every month, it seems like there’s a new accessibility tool to explore. And even if some companies are pausing their investment in accessibility, even more are looking for ways to bridge the accessibility gap.
That gets me really excited, for a couple of reasons:
- Technology isn’t built in a vacuum. If someone designs a new tool to support accessible design, it means they saw a need — and plenty of demand.
- Who doesn’t love playing with shiny new tools?!
This is good news for accessibility. The more businesses are talking about accessible design — and the more attainable it feels —the better it will be for everyone.
How Can Accessible Design Tools Help?
As a designer, one of the biggest misconceptions I encounter is the idea that it’s too late to make a website accessible.
In fact, a 2021 AudioEye survey of 500 business leaders, designers, and developers found that 52% of respondents thought they would have to rebuild their entire website to be accessible.
That’s simply not true. However, it’s almost always easier to build for accessibility from the start.
Here’s a quick look at three accessible design tools I find myself using all the time. Each one helps me check my work as I go, guarding against common accessibility issues like non-descriptive alt text or poor color contrast.
1. Check Your Alt Text With DALL-E
At AudioEye, we often talk about the importance of alt text — and for good reason:
- Descriptive alt text is a critical part of the browsing experience for people who use screen readers.
- Companies still get alt text wrong all the time.
After I illustrate something, I’ll often write a description of what I wanted the illustration to convey and plug it into an AI image generator like DALL-E.
In DALL-E (which is free to use after you sign up), you can type in almost anything — an object, a feeling, even a style of art — and it will create images that match the description.
It’s a lot of fun to play with, but it’s also a good way to check your alt text. Remember: AI image generators are extremely literal. If you plug in your alt text and the resulting images look nothing like your image, you may want to revisit your description.
2. Check Your Contrast With AudioEye’s Color Contrast Checker
For people with visual disabilities, color contrast can be the difference between a website that is clear and easily navigable and one that is completely illegible. Almost all types of visual impairments — from myopia to macular degeneration — can make it more difficult to read text when the color contrast is low.
According to WCAG Success Criterion (SC) 1.4.3: Contrast (Minimum), the visual presentation of text and images of text must have a contrast ratio of at least 4.5:1.
It’s important to actively test the contrast ratio for anything you design (including banner ads, social media posts, and emails) — because it’s not always obvious which color combinations have low contrast.
For example, the classic combination of white text on a plain red background has a contrast of just 3.99:1.
Pro Tip: If you need to quickly look up the hex code for a color on your site, a free Chrome extension like ColorPick Eyedropper can be your best friend!
3. Generate Captions With an Automated Transcription Tool
As an organization, we often talk about the overlap between good design and accessible design.
The idea is pretty simple: If something works well for people with disabilities, it also probably works well for everyone.
Designing for sound off is a perfect example. For people with hearing impairments, adding closed captions to a video helps ensure that they can follow along. But it’s also a good idea in general. Multiple studies have shown that most videos on social media are watched on mute. If you don’t invest in quality captions for your videos, you could be leaving more than just people with disabilities behind.
As a general rule, we recommend proofing your captions by hand. Using human eyes and ears can help catch any mistakes made by voice recognition software. If time is short, however, automatic transcription tools like Descript and Rev can give you a head start.
Get Help Designing for Accessibility
As a reminder, regularly testing your website for accessibility issues is the best way to make sure that it is accessible for everyone. However, you can avoid many accessibility issues by simply designing for accessibility from the start.
Want more tips on how to design inclusive experiences? Check out our Ultimate Guide to Accessible Web Design. Or follow our blog for more accessibility tips, delivered to your inbox.
Want to hear more from AudioEye?
Get the latest accessibility news and resources, delivered to your inbox.
Ready to see AudioEye in action?
Watch Demo
Ready to test your website for accessibility?
Share post
Topics:
Keep Reading
WCAG 2.0 vs. 2.1: What’s the Difference?
Discover the key differences between WCAG 2.0 and 2.1. See how the updates impact web accessibility and how you can meet the latest standards to ensure compliance.
accessibility
November 20, 2024
Complete Guide to Digital Accessibility Audits
What is a digital accessibility audit and why does your organization need one? Learn how to conduct an audit with AudioEye.
accessibility
November 15, 2024
Five CRO Strategies Only the Pros Know
Get more tips on optimizing your website for conversions.
accessibility
November 06, 2024
