Digital accessibility has been a buzzword over the past 5 years, but a lot of people don’t really understand what it means. It’s one of those factors that you know should be influencing your digital product decisions, but you just haven’t got around to diving into every best practice out there.
By following the 3 easy steps we outline below, you can ensure your digital product or website can be accessed by all and protected against ADA compliance lawsuits.
And if nearly 100% of the population having access to your digital product wasn’t enough incentive, consider that accessible websites also have better search results, reach a larger audience, have better usability, AND have faster download times (for a full list of reasons to be accessible, check out this list).
We’ll make that first step a little bit easier by breaking down why ADA compliance is so important, suggesting some low-hanging fruit that you can fix in your code TODAY, and providing 3 easy steps that will make ADA compliance that much easier in the future.
Legal Consequences
It can be easy to forget that the digital world is governed by laws, especially when they aren’t posted on signs or regulated by police officers. However, naivety won’t be a valid excuse when you’re hit with a lawsuit.
Just last year, Amazon was sued for ADA non-compliance. According to the claimant, their website was inaccessible for the blind or those with visual impairments. Not only was their site incompatible with screen readers, but it also didn’t have braille displays, images didn’t have alt-text, and there was no alternative option for title frames. This means those that were visually impaired could not navigate the site.
Tech giants aren’t the only ones that are facing legal consequences for non-compliance. In January, Beyonce’s website was also hit with allegations that her site was inaccessible to blind users. If you visit the homepage, you’ll notice that it’s very visually heavy. With none of these images having any alt-text, blind users have no idea what’s on the page. In addition, the site had a lack of accessible drop-down menus and the inability to use a keyboard instead of a mouse.
Having an in-house developer or digital partner that’s aware of these regulations and willing to take the time to implement the proper code will save you time and money in the long run. Trying to make these changes after the fact can be overwhelming, so bring on an expert at the very beginning.
Moral Responsibility & Easy Fixes
Not only is ADA compliance a legal obligation, but it’s also a moral one. While you can make the argument that meeting all these regulations is painstaking and time-consuming (you wouldn’t be wrong), there are also a few basic things you can do that take very little time and effort. These include:
- Adding alt-attributes to images (this also helps with your SEO!)
- Using the right elements for things
- Using the headings that reflect the content structure
Consider also that you could be losing out on business if your site isn’t built for those with disabilities to have a positive experience on your site. By failing to comply with ADA regulations, you could be neglecting the 20% of the population that lives with a disability—people who could be highly interested in your product.
ADA Compliance can be a daunting task for developers and designers alike, which is why there are a TON of free and paid tools out on the market that can help make your job a little bit easier. We’ve compiled the very best that we use in our day-to-day at Crema.
https://medium.com/ideas-by-crema/9-magical-chrome-extensions-for-qa-testing-14a710a097bb
- WAVE Accessibility Evaluation Tool — the gold standard of accessibility testing tools and accessibility checking. WAVE is our first pass tool for testing.
- Color.review — A color contrast checker that lets you see background and foreground contrasts
- Accessible-Colors — Another color contrast checker that lets you set your level of WCAG compliance to verify against
- Storybook — The accessibility checking add-on allows easy review of ourReact components for issues.
- Google Lighthouse — Built in to Chrome, Lighthouse is an easy way to quick, single page accessibility testing.
- Transcriptive — Accessibility is not just for client work, and this plugin ensures our video content has solid captioning
- Screaming Frog — Spider for reviewing site which helps identify alt text issues
- SEMrush — More sitewide review for alt text and other issues
- Axe is a chrome extension for developers that checks for WCAG 2 and Section 508 accessibility. Axe is highly configurable and designed to be integrated into your existing functional/acceptance automated tests.
- The WCAG Contrast Checker is another chrome extension for developers that tests the color contrast between the foreground and background of elements in the page according to WCAG 2 accessibility requirements. Other nice features are that the extension considers opacity to deduce the viewable color and allows you to introduce colors manually or choose from a document.
- Color Review is a tool that lets you check the contrast between foreground and background colors, as well as proper headline text size.
- Storybook has an a11y add-on that can help make your UI components more accessible, add example tests, and make CI integration possible.
- Accessibility Insights is an agile app/extension that helps you solve accessibility issues before they reach your customers. The tools is kept up-to-date with the latest regulations, and you can conduct tests in less than five minutes.
Keep in mind that you can build the most inaccessible site possible with a perfect accessibility score from some of these tools. Though these are great assets, remember that nothing beats the eyes and brain of a human.
Tools are great, but they aren’t always updated with the latest information on digital accessibility. That’s why we make sure to check these resources on a weekly or daily basis:
- WCAG —The main source, W3C Web Content Accessibility Guidelines document outlines 3 levels of adherence to accessibility and what that means.
- A11yWeekly — David A. Kennedy’s weekly roundup of accessibility news and links. I’ve found so many clarifying thoughts and positions through this newsletter. It’s a must read.
- #a11y — this hashtag on twitter is full of thoughtful conversation around accessibility and accessibility testing
- Designing for accessibility is not that hard by Pablo Stanley — UX Collective is rich with accessibility articles, but this piece breaks the process down into an actionable guide anyone can follow.
- Udacity Web Accessibility with Google — This free course is a great process class for front end developers, but we recommend everyone sign up and watch the first lesson to understand the connection of accessibility and assistive devices.
- There are plenty of great videos on YouTube that can help you comply with ADA regulations, covering topics like Creating Accessible React Apps.
Internal processes for ADA compliance implementation will be different for every company depending on your team’s preferred methods of communication and hierarchy structure. Since we’re hardcore Slack fans, we actually created a Slack channel titled #a11y where people can share info related to accessibility. We also make incremental improvements on our own crema.us website to keep up with all the changes in ADA Compliance, whether it be slight color changes for optimal contrast or adding alt-text to the images on our site. Most importantly, our internal craft teams get together on a regular basis to share learnings and accessibility training.
If you’re serious about compliance and plan on creating several digital products, you might consider getting IAAP certified (the ‘big kid’ certification that’s pretty difficult, but graded on a curve). For those that aren’t as hardcore, a smaller certification like training through Deque University might be a good first step.
Get Help & Learn More
There are entire agencies dedicated to helping companies be ADA compliant, serving clients like Twitter, Aetna, Capital One and Adobe. There is no company that’s too big or too small to comply with ADA regulations, so consider whether your digital product team is doing everything they can to ensure your product is accessible (or whether some outside help might be beneficial).
Want to learn more about accessibility from Crema’s Test Engineer, Courtney Johnston von Nieda? Check out her posts on Website Accessibility Learnings: How We Started Our Journey and 9 Magical Chrome Extensions for QA Testing!
Do You Have These ADA Compliance Elements? [Checklist]
- You have autocomplete attribute for input elements
- All content and functionality remain available when the browser is 320px wide, without your user needing to scroll horizontally.
- Elements and their focus states have a 3:1 contrast ratio with the color around them
- If your website/app offers single-character keyboard shortcuts, your users can turn off or remap those shortcuts.
- Your website/app supports single-tap alternatives to any multi-touch gestures or dragging actions that it provides.
- The text that appears on a form control or image matches how your HTML identifies that form control or image.
- Make interactive elements at least 44px wide × 44px high.
- Your website/app allows your users to use whichever available input modality they choose.
You can find a full list in Alan Dalton’s post on Web Content Accessibility Guidelines 2.1. and a condensed list that’s designer-specific from this Medium article titled Designing for Accessibility is Not that Hard.
