Last updated: July 2026
Key takeaways:
- Web accessibility means designing and coding your store so everyone can use it, whether or not they have a disability.
- At least 2.2 billion people worldwide have a vision impairment (WHO), and about 1 in 4 US adults live with a disability (CDC).
- No single US law names a technical standard for private stores, but WCAG 2.1 AA is the practical floor, and WCAG 2.2 is the current version.
- Accessibility overlays and widgets don't make a site compliant; the FTC fined one overlay vendor $1 million in 2025 for claiming otherwise.
- The same accessible code that helps screen reader users now also drives your Agentic Browsing score for AI shopping agents.
Website accessibility is about more than meeting ADA best practices to avoid a lawsuit. It’s about the social responsibility of offering an online user experience that everyone can enjoy, whatever their abilities.
Here's the truth: at least 2.2 billion people worldwide have a near or distance vision impairment, according to the World Health Organization. In the US, about 28.7%, or roughly 61 million adults, live with a disability, per the CDC. The most common types are:
- Cognitive (13.9%)
- Mobility (12.2%)
- Independent living (7.7%)
- Hearing (6.2%)
- Vision (5.5%)
Yes, inaccessible ecommerce sites are limiting shoppers with disabilities from being able to use the site and make purchases. And you’re right—it impacts your bottom line and can cause a hefty lawsuit.
But this isn’t the purpose of website accessibility optimization; it’s about providing everyone equal access to your ecommerce store.
So what considerations should developers and designers keep in mind when building accessible websites? We'll share information about ADA guidelines and 14 best practices in this article.
Disclaimer: We’re not lawyers, and the information in this article is intended to be for educational purposes only. Therefore, these digital accessibility best practices should not be taken as legal advice. We encourage you to seek legal counsel on how you should approach website accessibility.
First, what is website accessibility compliance?
In plain terms, the ADA, or the Americans with Disabilities Act, is the law that governs accessibility.
We know that if a website or app acts as an extension to a physical store location, it is interpreted as a place of public accommodation under Title III of the ADA. However, this doesn’t mean digital-only brands are off the hook.
For a website to be ADA compliant, it needs to be accessible.
Website accessibility involves strategically using design and code to make the content on your online store available for all users, whether they live with an impairment or not. A significant part of accessibility is also how you create, design, and display content.
It impacts every member of your digital team—from designers to developers and content creators.
"If you're an architect and you're designing a building, you wouldn't just omit ramps. You need that for everyone to get there. It's the same thing with websites."
- Kellie Kowalski, UX/UI designer at Fuel Made
ADA compliance and how it impacts your website
When it comes to ADA compliance, ask yourself two main questions:
- How well can persons with disabilities access my website?
- Am I compliant with the law?
Your goal is to remove all accessibility barriers from your website, so persons with disabilities have full and equal access to all of its content.
However, as we’ve noted, the laws around website accessibility aren’t always clearly defined.
So while you may be “technically compliant” with the ADA requirements, there may still be ways to improve your website beyond what an accessibility test will tell you.
Kellie, our lead designer, shared a great analogy about this:
"There are a lot of buildings that are 'technically accessible,' but they'll have a piece of plywood around the back, super steep ramps, or a steep ramp with a door pulls forward so you have to roll back down," she said. "It's the same thing with websites. I see overlays that will technically pass an automated checker, but it's hideous to use."
This is why you should always ask yourself first and foremost: How well can persons with disabilities access my website?
We suggest regularly testing your website yourself by tabbing through it and browsing it with a screen reader to make sure the experience is simple.
Source: Bridgeway Education
What do the accessibility laws actually require in 2026?
US web accessibility law still names no single technical standard for private businesses, but the direction is clear. Courts, regulators, and the DOJ all point to WCAG as the benchmark. The following developments in recent years matter most for ecommerce.
In March 2022, the DOJ published its Guidance on Web Accessibility and the ADA, confirming the ADA applies to the websites of public accommodations, including web-only businesses. It's nonbinding and sets no specific standard.
In April 2024, the DOJ finalized a Title II rule requiring state and local governments to meet WCAG 2.1 AA (its 50 A and AA success criteria). It covers government sites, not private stores, but it's the first binding federal technical standard and a likely preview of where Title III is headed.
The European Accessibility Act took effect June 28, 2025. It requires any business selling to EU consumers to meet WCAG 2.1 AA, regardless of where the business is based. Only microenterprises (under 10 employees and under €2 million turnover) are exempt.
WCAG 2.2 became the W3C's current recommendation in October 2023. WCAG 2.1 AA is still what the DOJ rule and the EAA cite, so it's the floor; building to 2.2 AA puts you ahead.
ADA best practices to make your website accessible
Note: This isn’t a comprehensive list, and it's hard to summarize all the ADA standards for accessible websites (in part because they haven’t been clearly defined), but these are the top considerations for the Fuel Made team (and they are good generalizations to start with that cover about 80% of the issues we see).
Accessible development considerations
Use semantic markup
Instead of using only div tags to create the structure of a webpage, developers should use the correct semantic tags, including <header>, <footer>, <main>, <aside>, <section>, <article>, <nav>.
If a website is coded correctly, using HTML, CSS, and JS in the ways they were meant to be and according to web standards, then a lot of accessibility issues will be automatically fixed—or at least on the right track.
Using proper semantic markup also gives more context about the content on the page to screen readers, the browser, and search engines, so the user can understand and navigate the page more clearly.
Pro tip: Avoid creating custom components if there is a reasonable native HTML tag alternative (e.g. use <header> not <div id=”header”>). These native elements are already accessible, and creating custom components can bring lots of accessibility issues.
Make sure your website is assistive technology-friendly (for keyboard users and screen readers)
Websites need to be tested for ease of use—not just with a mouse but also with a keyboard and screen reader. Make sure your content is properly programmed to provide the right context for users as they use these tools to navigate your site (e.g. ARIA attributes).
For example, if you're linking to an external resource from text that says "article," you need screen readers to tell the user where that link is sending them if they choose to click it. This can be done by developers using ARIA attributes, so the screen reader would read the link as “Article on website accessibility by Fuel Made" instead of just "article."
Every website should also be able to be navigated with just a keyboard. And the tab order must be logical and intuitive (top to bottom, left to right).
Also, if an element is not visually displayed on a page, it shouldn't be tabbable either (e.g., if a slideout cart is closed, a keyboard user should not be able to tab inside it).
It’s good practice to go through your site with your keyboard to make sure it’s offering a good user experience.
Note: Most ARIA attributes are absolutely necessary to pass an accessibility test and meet WCAG standards, but there are still some ARIA attributes that aren’t considered a requirement to pass (like in the example above).
The point is, adding this context for users, whether it’s required or not from a legal standpoint, is the best practice for users with assistive technology to make their experience better.
"Make sure when you're developing, you're choosing to use different methods to make things as understandable for people as possible—beyond just technically passing a test. You can technically pass accessibility tests, but that doesn't necessarily mean your website is as user-friendly as it should be."
- Hannah Beasley, Developer at Fuel Made
Additional resources: There are various tools used to run accessibility tests, which go through your website to pinpoint any accessibility issues. Two tools we use often are Lighthouse and Wave.
Visual elements need alternative text
Images, videos, memes—they all need alternate text to provide context for users. Anything on a web page that doesn’t have machine-readable content but is conveying information should have this.
While some writers claim alt text is beneficial for SEO, the main purpose of using it is to convey the information to users that may not be able to see the visual element.
Images should always include an alt tag. For graphics with charts and data, share a text alternative with the same information. For audio and videos, there should be both captions and text alternatives. This is so users with screen readers can get the value from the visuals on your site.
Note: Any images containing text require that text be included in the image’s alt description.
Alert users on state changes
When you fill out a form online but miss a question or answer something incorrectly, the web page will usually alert you about the mistake and show you which input field was wrong. This information needs to also be available programmatically and visually for users with screen readers to understand what field failed and why.
Instructions for users should be clear. If you tell a user to “click the red button,” then users who are color blind may not be able to see which button is red. Instead, writing “Click the button labeled ‘Submit’” is clear and any user would be able to find it.
Don't auto-play videos or audio
Web pages that auto-play video and audio can harm users who are at risk of having seizures. Also, it can be very distracting to users with certain cognitive disabilities like ADHD.
For any media, there also needs to be a pause function that can be used by clicking the space bar on a keyboard.
Accessible design considerations
Size and space your tap targets correctly
Small, crowded targets are hard to hit, especially for users with limited dexterity. WCAG 2.2 added a Target Size (Minimum) criterion at Level AA: interactive targets should be at least 24 by 24 CSS pixels, or have enough spacing that a 24-pixel circle centered on the target doesn't overlap another target.
The enhanced Level AAA criterion raises that to 44 by 44 CSS pixels. Don't crowd targets with other elements, and use color plus another visual cue (an underline, a border, a shape change) to show hover and focus states, so users always know how they're interacting with an element.
In general, Hannah, a developer on our team, suggests avoiding a noisy web design. "Something that's helpful to think about when designing is just making sure you're not crowding things, and you're thinking about how the user is going to interact with the elements," she said.
Don’t just rely on color to convey information
Similar to what I just said about interactive buttons above, a lot of websites today will use color only to show when a user is interacting with an element, but this isn’t enough to help all users. For example, there may be users who are color blind, and a color-only interactive element doesn’t tell them anything.
This should be a general principle whenever there is a design element involved.
Use the right contrast levels
Bright yellow text on a white background is difficult to see without any visual impairment, so imagine how a person with low vision feels? This is why there are contrast guidelines.
Contrast measures the difference in brightness between two colors. The difference is shown as a ratio ranging from 1:1 (white on white) to 21:1 (black on white). The WCAG (Web Content Accessibility Guidelines) then ranks your contrast as one of three levels: level A (lowest), level AA (mid-range), or level AAA (highest).
Source: Stark
"In a lovely world, I will always try to get to AAA. AAA is the most accessible standard. If their brand colors aren't going to make it to that and it's double A—that's still a win," shared Kellie.
An AA level is a passing ratio for contrast, but AAA is best for users with 20/80 vision who have contrast sensitivity and/or color deficiency. One of Kellie's favorite tools for checking this is Stark, which has plug-ins for Figma, Sketch, Adobe, etc.
Contrast levels apply to all website elements. For example, a button on a background color needs to achieve at least a 3:1 contrast ratio. Any elements that overlap or touch each other need to pass those contrast ratios.
In Kellie's experience, contrast is one of the accessibility requirements that isn't too difficult to do correctly—unless you're using orange.
"Color contrast is one I spend the most time educating clients about. If you really want to get an accessibility practitioner to have an eye twitch, tell them they have to incorporate the brand color orange. Orange is super hard to make accessible," she joked.
Accessible text considerations
Allow text resizing
Text needs to be able to be resized up to 200%. Some websites have a meta tag that prevents users from being able to zoom in (usually because there are incorrectly sized input fields on forms that automatically zoom the user in, and sometimes people want to prevent that). Make sure input fields are the right size and don’t disable zoom because there are users that need it.
Also, your content should never become unreadable or cut off due to resizing or device size, meaning users shouldn’t have to scroll horizontally in order to see something that was cut off. This is important because there are many users who need to increase text sizes and line-heights, and your website should be able to accommodate those needs.
Headers must be in a logical sequence
First things first, there should only be one H1 element per page, which is the main title of your article, homepage, product page, or landing page. It's used to communicate to users what the purpose of that page is.
The rest of your headings (H2, H3, H4) should descend in a logical order. So don't skip from an H2 to an H4.
Here's why: In WebAIM's Screen Reader User Survey, 71.6% of respondents said headings are how they navigate a long page, the single most common method, and 88.8% found heading levels useful.
Most content management systems will allow you to input the correct heading tags without needing to go into the HTML.
Mobile accessibility considerations
Allow screen rotation
There are two main reasons why it's important to allow screen rotation:
- Users with dexterity impairments need to be able to use their device in the screen orientation they can work best with.
- There are users with low vision who find looking at websites horizontally allows them to see the website content and read the text easier.
And don't forget to test that your website still works well and looks good while in landscape mode before you publish it.
Don't cram interactive elements together—users need space to scroll
Ever tried to scroll on your phone but you accidentally clicked a button that takes you off the page? It's frustrating. And this happens more often with users with motor control issues that are trying to navigate an inaccessible website.
This is why Hannah says, "You've got multiple types of people who are using websites, and you want to make sure that as many people as possible can use the site easily and understand the content that is showcased on it."
Leave enough blank space for users to be able to scroll on their mobile device without accidentally clicking an interactive element.
The A11Y Project’s website does this nicely.
The Agentic Browsing score
AI agents now shop websites on people's behalf, and Google scores how well they can. In May 2026, Google added an Agentic Browsing category to Lighthouse, and it now appears in PageSpeed Insights alongside Performance, Accessibility, Best Practices, and SEO. It reports as a pass ratio, like 1/3, rather than a 0 to 100 score.
The reason this counts as an accessibility best practice? The core check is your accessibility tree, the same structure screen readers use to read your page. So the work that makes your store usable for a shopper with a screen reader is the same work that makes it readable to an agent.
The audit looks at your accessibility tree, your layout stability (Cumulative Layout Shift, part of your Shopify page speed work), and whether you have an llms.txt file. AI-sourced traffic to US retail sites grew 393% in Q1 2026, according to Adobe Analytics, so this is a growing audience worth building for. Semantic, accessible code passes it, with no separate AI rebuild required.
Do accessibility overlays and widgets actually work?
As you’ve been reading, you may be wondering: can’t I just install an accessibility app?
Here’s the truth: widget and overlay vendors do not protect you from ADA lawsuits, nor do they actually make your website user-friendly for people with disabilities. These are the one-line-of-JavaScript tools that promise instant ADA compliance. In the first half of 2025, 456 web accessibility lawsuits, about 22.6% of all filings, targeted sites that already had an overlay or widget installed, according to litigation tracker UsableNet.
In January 2025, the Federal Trade Commission announced a $1 million settlement with one of the largest overlay vendors, over claims that its widget could automatically make any website WCAG compliant. The FTC found those claims false or unsubstantiated and barred the company from repeating them.
Litigation keeps climbing overall. UsableNet tracked more than 5,000 digital accessibility lawsuits against websites and apps in 2025, and ecommerce is the most-targeted category. There's no small-business exemption under the ADA.
Hannah and Kellie recommend building accessibility straight into your code and creating content that's accessible on its own. That keeps it under your control, and it avoids the page-speed hit that comes from running third-party apps.
"The big discourse in accessibility right now is the quick fixes and overlays—that one line of JavaScript will change everything. And that's not true. That's actually more of an issue to combat now. To have an accessible product, you've got to pull it back and rethink it. You can't just slap on code and hope it works.”
- Kellie Kowalski
Summary: avoid accessibility tools and apps as "quick fixes." Accessibility standards today are much higher than these apps can achieve for you.
How do I make my Shopify store ADA compliant?
The best practice, based on past court cases, is to meet WCAG 2.1 AA, its 50 Level A and AA success criteria (or WCAG 2.2 AA to stay current). WCAG organizes those criteria under four principles, known as POUR:
- Perceivable: Information and user interface components must be presentable to users in ways they can perceive (e.g. provide alternatives for time-based media.)
- Operable: User interface components and navigation must be operable (e.g. make all functionality available from a keyboard.)
- Understandable: Information and the operation of user interface must be understandable (e.g. make web pages appear and operate in predictable ways.)
- Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies (e.g. maximize compatibility with current and future user agents, including assistive technologies.)
Optimizing your website to be accessible isn’t as hard as you think
Hopefully, this article helps you understand the importance of website accessibility and choosing a user-first approach to your online shopping experience.
As quoted by Eric Bailey, a Boston-based designer, “Disability is a way of experiencing the world, not a problem to check off a list.”
And remember, the web accessibility initiative is about providing a user experience that's equal to everyone—not just about avoiding a lawsuit.
Good luck!
"There is like a lot of anxiety about accessibility because it's becoming such a big legal issue. But if developers can remember that HTML is inherently accessible—if used the correct way—that helps dispel some of the fear. It's not like you have to come in and do all these really fancy things to make a website accessible. Just write your markup the way it should be written, be mindful and careful, and you'll be just fine."
- Hannah Beasley
Resources to learn more
If you're here, it's likely that you've recognized your website has accessibility problems. It's great if you're working toward improving that!
To learn more about accessibility requirements, here are a few resources for you, your web developers, or your designers:
- Introduction to web accessibility (W3)
- Guidance on Web Accessibility and the ADA
- The A11Y Project
- WCAG 2.2 overview
Resources for other countries
While every website should aim to offer the best user experience, the laws do vary a bit in every country. Here are a few links to learn more about accessibility laws in your location:
- Canada: Accessible Canada Act
- European Union: The European Accessibility Act (European Commission).
- United Kingdom: Understanding accessibility requirements (GOV.UK)
- India: Rights of Persons with Disabilities Act (W3)
- Japan: Basic Act on the Formation of an Advanced Information and Telecommunications Network Society (W3)
For a full directory of countries, visit W3's web accessibility laws and policies page.
Fuel Made works with Shopify and Shopify Plus brands on accessible design, development, and ADA compliance. If you'd like to talk through a specific accessibility challenge, you can reach our team here.
Contributors: this guide draws on the design and development team at Fuel Made, including Kellie Kowalski, a UX/UI designer who holds the IAAP CPACC certification, and developer Hannah Beasley.
