7 Web Accessibility Best Practices for Your eCommerce Site

Web accessibility is no longer a niche consideration. In 2025, more than 2,000 ADA website accessibility lawsuits were filed in the first six months of the year alone, a 37% increase from 2024. ECommerce and retail sites are consistently the primary targets, accounting for the majority of all filings. Settlement costs typically range from $5,000 to $75,000 plus attorney fees, redesign costs, and ongoing monitoring expenses.

Beyond the legal exposure, the business case for accessibility is direct: approximately 1 in 4 adults in the United States has some type of disability, and 71 million baby boomers are increasingly relying on accessible digital experiences as they age. An inaccessible storefront is not just a legal liability. It is a lost customer base.

Almost 95% of home pages have at least one Web Content Accessibility Guidelines (WCAG) failure, which means most eCommerce stores are already non-compliant in some measurable way. The seven practices below address the most impactful categories.

One important update from 2025: the Federal Trade Commission fined the accessibility overlay provider accessiBe $1M for false advertising in January 2025. Separately, 22.6% of all ADA lawsuits in 2025 targeted websites already using accessibility overlay widgets, and UsableNet reported that 25% of lawsuits in 2024 explicitly cited such widgets as barriers rather than solutions. Automated overlays are not a substitute for genuine accessibility work. The practices below reflect a code-first, structural approach to compliance.

1. Choose a CMS or Platform That Supports Accessibility

Your eCommerce platform determines your starting point. Open-source CMS options like WordPress, Drupal, and Joomla have accessibility-ready themes and plugins available. NetSuite SuiteCommerce provides the infrastructure to build a WCAG-compliant storefront, though the implementation details matter significantly. An accessible platform with an inaccessible theme or custom code is still an inaccessible site.

When evaluating themes or beginning a storefront redesign, check explicitly for WCAG 2.1 Level AA compliance documentation. Ask your development team or agency which WCAG success criteria are covered by the base theme and which require custom implementation. The Department of Justice’s Title II rule requires state and local governments to meet WCAG 2.1 AA standards by April 2026, and this standard is widely referenced by courts when evaluating private ADA claims as well.

2. Use Heading Structure Correctly

Screen readers navigate page content by heading structure. When headings are used correctly, a visually impaired visitor using a screen reader can understand the organization of a page, jump to relevant sections, and navigate product descriptions and specifications efficiently. When headings are used decoratively or skipped, the page becomes effectively unnavigable for screen reader users.

The rules are straightforward:

• Use <h1> only once per page, for the primary page title.
• Use <h2> for major section headings, <h3> for subsections within those, and so on.
• Do not skip heading levels. Moving from <h1> directly to <h3> signals missing content to screen reader users.
• Never choose a heading level based on visual size. Use CSS to control appearance; use heading tags to convey structure.

3. Ensure Full Keyboard Navigation

Many assistive technologies depend on keyboard-only navigation. A fully accessible eCommerce site must be entirely operable without a mouse: all product pages, filters, add-to-cart buttons, checkout forms, and account management flows must be reachable and activable via keyboard.

The test is simple: navigate your storefront using only the Tab key, Shift+Tab, Enter, and arrow keys. Count how many Tab presses it takes to reach the add-to-cart button from the top of a product page. Can you complete checkout without a mouse? Can you access the mobile navigation menu via keyboard?

Focus indicators — the visible highlight that shows which element currently has keyboard focus — must be clearly visible and meet WCAG contrast requirements. Many design teams remove focus indicators because they appear visually inconsistent with the brand aesthetic. This is a compliance failure and a significant barrier for keyboard and switch-control users.

4. Add Alt Text to All Images

Alt text provides a text alternative for images that screen readers announce to visually impaired visitors. It also serves as the fallback text displayed when an image fails to load, and it contributes to image SEO.

Every meaningful image on your eCommerce site should have descriptive alt text: product images, lifestyle photography, category banners, and promotional graphics. Decorative images that convey no informational value should use an empty alt=”” attribute so screen readers skip them rather than announcing a file name.

Alt text for product images should describe what is visually relevant: not “product image” or the file name, but a description that would allow a blind shopper to understand what they are considering purchasing. For example: “Ceramic mug in matte forest green with a brushed gold handle, 12 oz” rather than “mug-product-1.jpg.”

5. Choose Colors With Sufficient Contrast

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text against the background. Many eCommerce designs, particularly those using light gray text on white backgrounds or pastel overlays on product photography, fail this requirement.

Check all text-background combinations on your storefront using a free contrast ratio checker such as WebAIM’s Contrast Checker. Pay particular attention to: body text over background colors, button text against button background colors, text overlaid on product images or banner photography, and form field placeholder text.

Color alone should never be the only means of conveying information. If your in-stock/out-of-stock indicator is only a color change (green vs. red without text), that information is invisible to colorblind visitors. Add a text label alongside the color indicator.

6. Use Relative Units for Text Sizing

Most browsers allow users to increase text size through browser settings. Many eCommerce sites built with fixed pixel units break or become unusable when text is scaled up, because fixed-width containers cannot accommodate the increased text size.

Use relative units (rem or em) for font sizes rather than fixed pixel values. This allows your typography to scale proportionally with the browser’s text size setting, maintaining readability without breaking your layout.

This also improves mobile readability for users who have set larger default text sizes on their devices, which is common among older shoppers and users with mild visual impairments who have not been formally diagnosed. Supporting text scaling costs nothing to implement if done from the beginning of a project and requires only a refactor if changing an existing implementation.

7. Implement a Structural, Code-First Accessibility Approach

Automated overlay tools are not a compliant or effective substitute for genuine accessibility work. As noted above, 22.6% of ADA lawsuits in 2025 targeted sites already using overlay widgets. These tools do not fix underlying code-level accessibility barriers; they add a layer on top of inaccessible code that frequently creates new barriers rather than removing existing ones.

A genuine accessibility approach involves: a manual accessibility audit conducted against WCAG 2.1 Level AA criteria; remediation of issues at the code and template level; an accessible design system that prevents new violations from being introduced with each update; regular re-auditing as the site evolves; and a documented accessibility statement and user feedback channel for visitors who encounter barriers.

For NetSuite SuiteCommerce merchants, accessibility implementation happens at the theme level, in custom extensions, and in any third-party scripts loaded on the storefront. Each layer requires separate review. A theme that passes accessibility audit in a default state can fail after a custom extension adds a modal without proper focus management or after a third-party live chat widget loads in a way that traps keyboard focus.

At Tavano Team, we help NetSuite eCommerce merchants build and maintain accessible storefronts. Contact our team to discuss an accessibility audit for your SuiteCommerce site.