The Americans With Disabilities Act (ADA) requires your business’s website be accessible to those living with disabilities, a group that includes more than 70 million adults in the US, according to the CDC. But having an ADA-compliant website isn’t only about following the law. It’s about ensuring every visitor can get to the “Thanks for your order” part of the sales process easily and efficiently. The true benefits of website accessibility are more visitors, more engagement, and a smoother path to checkout.
This guide covers everything you need to know about website accessibility, including why it’s important and what you can do to make sure your website is ADA compliant.
What is ADA compliance?
ADA compliance means adhering to the rules outlined in the Americans With Disabilities Act—a sweeping federal law passed in 1990. The law aims to ensure that people with disabilities can access and navigate buildings and facilities, participate in public programs, employment, and transportation, and use websites and other digital tools like apps successfully.
The ADA prohibits discrimination in “places of public accommodation.” Courts have since applied that phrase to online storefronts, mobile apps accessible on phones, and portals run by state and local governments. Title I covers employment portals and internal HR systems for companies with 15 or more employees. Title II covers public agencies; Title III applies to commercial businesses. Together, these form the backbone of what most people call ADA website compliance or ADA web compliance. Although websites aren’t explicitly detailed in the 2010 ADA Standards for Accessible Design, those standards are still the Justice Department’s go-to reference for how digital properties should meet the spirit of the law.
Who needs to pay attention to compliance? Federal agencies (under Section 508 of the Rehabilitation Act) do, as do state or local governments that offer online services. In addition, private businesses like retail, banking, and health care providers, plus vendors who sell information and communication technology to anyone in the previously mentioned groups need to be compliant, as well. Some states, like California and New York, go further by enforcing their own accessibility rules on top of federal standards.
What are the web content accessibility guidelines?
While the ADA itself doesn’t mention specific technical standards for website accessibility, it does direct businesses to use the standards included in the web content accessibility guidelines (WCAG). The latest version, WCAG 2.2, has criteria sorted into three levels (A, AA, and AAA).
Level A is the most basic requirement for accessibility, like making content navigable by keyboard. Level AA is what most websites aim for. It includes things like color contrast and alt text. Shopify, for example, continually tests content and features for Level AA compliance and offers developer training resources for merchants and partners. Finally, AAA level compliance is the most stringent, and has guidelines that enhance accessibility further, including sign language interpretation for all prerecorded video content, a contrast ratio of at least 7:1, and a lower reading level for content.
Additionally, the WCAG offers a framework for website accessibility, which contains four key principles:
-
Perceivable: Provide every meaningful image with alternative text so visitors using assistive tech like screen readers understand what’s on-screen.
-
Operable: Avoid designs that assume mouse-only navigation, make sure navigation, dropdowns, and online forms work with a keyboard as well as a mouse.
-
Understandable: Keep labels and error messages clear and provide non-visual cues so visitors always know what to do next.
-
Robust: Use semantic HTML when coding so assistive tools and future browsers can interpret your web content without breaking.
Why website accessibility matters
Making your website accessible is important for reasons beyond legal compliance. Sara Mote, creative director of digital design agency Studio Mote, says although accessibility is a legal issue she recommends clients discuss with their counsel, it’s also simply good design.
“Certain designs are best practices not just for accessibility, but for the overall user experience—because there’s a lot of crossover,” she says. “Design has the power to captivate an audience, convey information, and evoke emotions, which directly impacts consumer decision-making. Simply put, good design increases the quality of those conversations.”
A few additional reasons why website accessibility matters:
-
Ethics: Around one in four US adults lives with a disability that can affect their access to websites, including people with visual impairments, motor impairments, and hearing disabilities. Removing any accessibility barriers aligns with the spirit behind the ADA and helps everyone stay engaged in public life.
-
Revenue potential: From a business-owner perspective, inclusive design can help boost revenue. If your pages have clean code, descriptive alt text, and strong color contrast ratios, you can broaden your audience and drive more sales.
-
Reputation: An inaccessible website can trigger negative headlines or social-media backlash that paint the brand as indifferent to inclusion, too, which can erode customer trust and end up sending potential buyers to other sites.
-
Liability: Failing to meet website accessibility standards creates legal liability for your business. More than 4,500 ADA digital lawsuits came through US courts in 2023.
“Accessibility is something that comes back to cognitive ease,” Sara says. “It’s really advantageous to consider this within design and make choices that allow a user to seamlessly flow through the site.”
Website accessibility checklist
- Provide captions and audio descriptions for every video
- Use the right contrast ratio
- Let users resize or swap to accessible fonts
- Add ARIA labels to buttons, icons, and form fields
- Include a “skip to main content” link at the top of each web page
- Keep flashing elements below seizure-safe thresholds
- Ensure pop-ups trap focus and always offer a keyboard-friendly close button
- Show form errors in text and programmatically link them to the right fields
- Write descriptive CTAs
- Pair automated scans with manual checks
Here are practical examples of the accessibility actions you can take for your own website, as aggregated from WCAG criteria, Shopify’s best practices, and WebAIM checklists that map WCAG into plain language:
1. Provide captions and audio descriptions for every video
Providing closed captions for prerecorded videos is one of the AAA guidelines from the WCAG. It meets legal requirements under ADA, Section 508, and FCC rules, allowing people who are deaf or hard of hearing to access video content fully. Plus, search engines can index caption text, which improves video discoverability in search engines.
For example, Gymshark’s website includes embedded videos with captions enabled.
2. Use the right contrast ratio
Maintain a color contrast ratio of at least 4.5:1 for text and interactive elements. A color contrast ratio of at least 4.5:1 ensures text and important visual elements can stand out clearly from backgrounds, making it readable for people with visual impairments, including those with low vision and color blindness. You can use tools like WebAIM’s Contrast Checker to test your own color combinations and their contrast ratio.
ColourPop, for example, uses a contrast ratio of 4.5:1 to ensure consistent readability.
3. Let users resize or swap to accessible fonts
Giving your users the ability to resize text or switch to more accessible fonts can help people with low vision, users with dyslexia, and older adults who struggle to read small or dense text. It can help them focus, reduce eye strain, and increase their understanding of that text.
Good Good Golf has an entire suite of accessibility options—including font adjustments—on every page of its website.
4. Add ARIA labels to buttons, icons, and form fields
ARIA labeling ensures that assistive technology can announce to the user what each interactive element is and does. For example, clothing brand Taylor Stitch adds ARIA labels to its website code so screen readers can tell users what each feature does.
5. Include a “skip to main content” link at the top of each webpage
A button or link to skip to main content lets keyboard navigators and screen reader users jump past menus and headers and get right to the main content. It can save time and reduce frustration for everyone who wants faster access without extra tabbing or scrolling.
Websites can add a hidden link at the top of the page that only becomes visible when focused, typically before the navigation code in the HTML, so keyboard users hit it first. CSS code makes it appear only when the tab key is hit after the page loads.
Taylor Stich is an example of a website that does this. A Skip to Content button shows up when users hit the Tab button on page load.
6. Keep flashing elements below seizure-safe thresholds
If an animation is under three flashes per second, it’s within WCAG guidelines. Developers can achieve this with CSS styles that ensure the transition is under that threshold. This is the case on MVMT’s homepage, which uses the opacity CSS code to keep animations below the seizure-inducing threshold.
The ease-in visually helps fade in the animation smoothly. This can serve general users by providing a smoother, more visually appealing layout, while it can reduce any visual chaos for folks with cognitive disabilities. Motion-sensitive users and people at risk of seizures are also served here, so more people can access the content safely.
7. Ensure pop-ups trap focus and always offer a keyboard-friendly close button
When the page loads, ensuring that keyboard focus automatically moves to the first focusable element—such as a close button or input field—prevents keyboard and screen reader users from getting trapped behind a modal dialog. Trapped focus makes it much easier to dismiss pop-ups without using a mouse.
On Brooklinen’s site, for example, the close button in the upper right is accessible via keyboard for users who use screen readers and/or keyboard-only navigation systems.
8. Show form errors in text and programmatically link them to the right fields
When dealing with errors around users submitting missing or incorrect info in a web form, it’s best to include a clear text-based error that screen readers, people with cognitive disabilities, and blind or low vision users can access.
In the image below, Shopify’s Dawn theme input field includes a text output for a “no email address” error when a user hits the gray button to download a theme.
9. Write descriptive CTAs
Clear, descriptive button copy and anchor text for links can help blind and low-vision users who rely on screen readers to know what a button does before they activate it. It can also help people with cognitive disabilities who benefit from clear language, as well as everyone else, since specific button language makes a page easier to scan and use.
On Brooklinen’s site, the blue button in the right middle of the page is clearly marked “Find Your Store.” Users know what it does without having to hover or activate it.
10. Pair automated scans with manual checks
Website teams can use automated tools like Axe or Lighthouse to scan for accessibility issues. You can also use dedicated Shopify accessibility apps to check your site for accessibility. “There’s a whole built-in toolkit with Shopify for some of the accessibility best practices,” Sara says. “A lot of our clients use an app that guarantees that they’re falling in line with guidelines, or they will pay for a completely external audit with a highly specialized accessibility team.”
Manually testing for issues, preferably with people who use screen readers or experience other disabilities, can catch problems that automated tools miss. This allows you to identify accessibility gaps and fix issues when you launch your site and before every update.
ADA-compliant website FAQ
How to fix a website to be ADA compliant?
To make an ADA-compliant website, you’ll want to try an automated scan (using tools like AudioEye’s free Web Accessibility Scanner, accessiBe’s accessScan, and CivicPlus’ Web Accessibility audit software). Then you’ll likely want to have people who use screen readers test your site, making sure it works in real-world settings. You’ll want to look for things like missing alt text, low color contrast issues, or keyboard navigation that’s broken or doesn’t work.
What happens if a site isn’t compliant?
If your website isn’t compliant, you could face legal consequences. You could receive a formal notice from a law firm or advocacy group that says your site violates the ADA, or a lawsuit claiming the same under ADA Title III or Section 508. If sued, you could face financial penalties, obligations to fix your site to ensure accessibility on a strict timeline, and a requirement to report your fixes publicly.
How much does it cost to achieve ADA compliance?
It’s typically less expensive overall to design for accessibility upfront, as there are typically less direct costs for accessible design to begin with. If your site was not built to be compliant, the cost to make it accessible and compliant depends on the size and complexity of your site.
