Making Your Online Store Accessible to All Customers
ADA (Americans with Disabilities Act) compliance for ecommerce websites isn’t just good ethics—it’s increasingly a legal requirement with lawsuits against online retailers skyrocketing from 814 in 2017 to over 4,000 in 2021. Websites must be accessible to people with disabilities including visual impairments (blindness, low vision, color blindness), hearing impairments (deafness, hard of hearing), motor disabilities (difficulty using mouse or keyboard), and cognitive disabilities (dyslexia, attention disorders). Non-compliant websites face lawsuits (average settlement $10,000-$50,000), lost sales (15% of population has disabilities representing $490 billion in spending power), and reputational damage. Whether you’re on Shopify, WooCommerce, BigCommerce, or any platform, implementing accessibility features protects from legal risk while expanding your customer base. From WCAG standards and common accessibility issues to testing tools and remediation strategies, understanding ADA compliance is essential for modern ecommerce. Let’s explore how to make your website accessible to all customers.
Understanding ADA and Web Accessibility
What is ADA: Americans with Disabilities Act—1990 law prohibiting discrimination against people with disabilities in public accommodations, increasingly interpreted to include websites as places of public accommodation.
Legal landscape: No explicit web accessibility requirement in ADA text, but courts increasingly rule websites must be accessible—Department of Justice references WCAG 2.0 Level AA as standard, lawsuits targeting ecommerce sites growing exponentially, and settlements ranging $10,000-$50,000 plus legal fees and remediation costs.
Who it applies to: All US businesses with websites, particularly those with physical locations (“nexus” to public accommodation), but purely online businesses also sued—essentially, if you sell to US customers, ADA applies.
WCAG standards: Web Content Accessibility Guidelines—international standard for web accessibility with three levels (A basic, AA standard, AAA enhanced)—Level AA is legal standard referenced in most lawsuits and DOJ guidance.
Disability types: Visual (blindness, low vision, color blindness affecting 8% of men, 0.5% of women), auditory (deafness, hard of hearing), motor (difficulty using mouse, keyboard-only navigation), and cognitive (dyslexia, ADHD, autism affecting comprehension and navigation).
WCAG 2.1 Level AA Requirements
Four principles (POUR): Perceivable (information presented in ways users can perceive), Operable (interface components and navigation operable by all), Understandable (information and operation understandable), and Robust (content works with current and future technologies including assistive devices).
Perceivable requirements: Text alternatives for images (alt text describing images for screen readers), captions for videos, audio descriptions for video content, adaptable content (can be presented different ways without losing information), distinguishable content (easy to see and hear, sufficient color contrast), and resizable text (up to 200% without loss of functionality).
Operable requirements: Keyboard accessible (all functionality available via keyboard without mouse), sufficient time (users have adequate time to read and use content), no seizure triggers (nothing flashing more than 3 times per second), navigable (ways to navigate, find content, determine location), and input modalities (functionality available through various inputs beyond just mouse).
Understandable requirements: Readable text (clear language, defined jargon), predictable operation (consistent navigation and identification), and input assistance (error identification, labels, error prevention for important actions like purchases).
Robust requirements: Compatible with assistive technologies (screen readers, magnifiers, voice control), valid HTML markup, and proper semantic structure.
Common Accessibility Issues
Missing alt text: Images without descriptive alt text are invisible to screen reader users—every image needs alt attribute describing content or purpose (decorative images use empty alt=””).
Poor color contrast: Text and background color combinations with insufficient contrast (below 4.5:1 ratio for normal text, 3:1 for large text) are difficult or impossible for low vision users to read.
Keyboard navigation problems: Elements not reachable via keyboard (Tab key), no visible focus indicators showing where you are, or illogical tab order confuse keyboard-only users.
Form accessibility: Forms without labels, unclear error messages, or no error identification prevent screen reader users from completing purchases—every form field needs associated label and clear validation.
Video without captions: Videos lacking captions exclude deaf and hard of hearing users—all video content needs accurate captions or transcripts.
Non-descriptive link text: “Click here” or “Read more” links don’t convey destination to screen reader users who navigate by links—use descriptive text like “View product details” or “Read shipping policy.”
Missing heading structure: Pages without proper heading hierarchy (H1, H2, H3) are difficult for screen reader users to navigate—headings provide document structure and navigation landmarks.
Inaccessible PDFs: PDF menus, catalogs, or documents without accessibility features (tagged PDFs, alt text, proper structure) exclude screen reader users.
Implementing Accessibility
Images and Alt Text
Write descriptive alt text: Describe image content and purpose—”Red leather handbag with gold hardware” not “handbag,” “Add to cart button” not “button,” and “Customer wearing blue dress in garden” not “customer photo.”
Decorative images: Images purely decorative (borders, spacers, design elements) should have empty alt text (alt=””) so screen readers skip them—don’t describe decorative elements.
Product images: Describe product, color, key features—”Navy blue cotton t-shirt with crew neck and short sleeves” helps customers understand product without seeing image.
Logo alt text: Company logo should have alt text with company name—”Acme Company logo” or just “Acme Company.”
Color and Contrast
Contrast ratio requirements: Normal text (under 18pt) needs 4.5:1 contrast ratio, large text (18pt+ or 14pt+ bold) needs 3:1 ratio, and UI components (buttons, form borders) need 3:1 ratio.
Testing contrast: WebAIM Contrast Checker (free online tool), browser extensions (WAVE, axe DevTools), or design tools (Figma, Adobe XD have contrast checkers)—test all text and interactive elements.
Don’t rely on color alone: Information conveyed by color must also be available another way—”Required fields in red” should also have asterisk or “required” label, error messages should have icon or text not just red color.
Common failures: Light gray text on white background, yellow text on white, or low-contrast buttons—choose darker colors or increase contrast.
Keyboard Navigation
Tab order: Ensure logical tab order following visual flow (left to right, top to bottom)—test by pressing Tab key through entire site checking order makes sense.
Focus indicators: Visible outline or highlight showing which element has keyboard focus—don’t remove default focus outlines with CSS (outline: none) without providing alternative, and ensure focus indicators have sufficient contrast (3:1 ratio).
Skip links: “Skip to main content” link at top of page allows keyboard users to bypass navigation and jump to content—hidden visually but available to screen readers and keyboard users.
Dropdown menus: Ensure dropdown menus operable with keyboard (arrow keys to navigate, Enter to select)—many JavaScript menus only work with mouse.
Modal dialogs: Trap keyboard focus within modal when open (Tab cycles through modal elements, Escape closes modal), and return focus to trigger element when closed.
Forms and Error Handling
Label every field: Every form input needs associated element—”Email address” label for email field, “Credit card number” for card field, not just placeholder text which disappears.
Required field indication: Mark required fields with asterisk AND text (“required”)—don’t rely on color alone (red asterisk) since color-blind users won’t see it.
Error identification: Clearly identify errors with text messages—”Email address is required” or “Credit card number is invalid” not just red border, place error messages near relevant field, and use aria-describedby to associate error with field for screen readers.
Error prevention: Confirm before irreversible actions (“Are you sure you want to delete?”), allow review and correction before final submission (order review page), and provide clear instructions upfront.
Headings and Structure
Proper heading hierarchy: One H1 per page (page title), H2 for main sections, H3 for subsections, H4 for sub-subsections—don’t skip levels (H1 to H3) and don’t choose headings based on visual size.
Semantic HTML: Use proper HTML elements— for navigation,for main content, for articles, for sidebars, for buttons not
—semantic elements provide meaning to assistive technologies.
Landmarks: ARIA landmarks (role=”banner” for header, role=”navigation” for nav, role=”main” for main content, role=”contentinfo” for footer) help screen reader users navigate—modern semantic HTML provides these automatically.
Accessibility Testing
Automated Testing Tools
WAVE (WebAIM): Free browser extension (Chrome, Firefox) highlighting accessibility issues—shows errors (must fix), alerts (likely problems), and features (accessibility features present).
axe DevTools: Free browser extension with detailed accessibility testing—integrates with browser developer tools, provides specific remediation guidance, and tests against WCAG 2.1 Level AA.
Lighthouse: Built into Chrome DevTools—run accessibility audit showing score and specific issues with remediation suggestions.
accessiBe: $490-$990/year automated accessibility solution—AI-powered remediation, compliance certification, and ongoing monitoring, but controversial (some disability advocates criticize overlay solutions).
Limitations: Automated tools catch only 30-40% of accessibility issues—manual testing and user testing with people with disabilities essential for full compliance.
Manual Testing
Keyboard-only navigation: Unplug mouse and navigate entire site using only keyboard (Tab, Shift+Tab, Enter, arrow keys, Escape)—can you complete all tasks including checkout?
Screen reader testing: Test with screen readers—NVDA (free, Windows), JAWS (paid, Windows, most popular), VoiceOver (free, built into Mac/iOS)—listen to how site is announced and whether information makes sense.
Zoom testing: Zoom browser to 200% (Ctrl/Cmd + plus key)—does content remain readable and functional? Does text reflow properly? Are interactive elements still accessible?
Color blindness simulation: Use color blindness simulators (Colorblind Web Page Filter, Chrome extensions)—can you still distinguish important information?
Mobile accessibility: Test on mobile devices with accessibility features enabled (VoiceOver on iOS, TalkBack on Android)—mobile accessibility often overlooked but critical.
User Testing
Test with real users: People with disabilities are best testers—hire accessibility testers through platforms like Fable ($1,500-$5,000 for testing session), UserTesting (recruit participants with disabilities), or local disability organizations.
What to test: Can users find products? Can they complete checkout? Are product details understandable? Can they navigate site efficiently? What frustrations do they encounter?
Ongoing testing: Accessibility isn’t one-time—test with every major update, new feature, or design change ensuring accessibility maintained.
Platform-Specific Considerations
Shopify: Themes vary in accessibility—Dawn theme (default) has good accessibility baseline, test theme with WAVE/axe before choosing, customize theme to improve accessibility (add skip links, improve contrast, fix heading structure), and use apps like accessiBe or UserWay if needed.
WooCommerce: Accessibility depends on WordPress theme—choose accessibility-ready theme (WordPress.org has accessibility-ready tag), test with plugins (WP Accessibility, Accessibility Checker), and ensure custom code follows WCAG guidelines.
BigCommerce: Similar to Shopify—theme-dependent accessibility, test before choosing theme, and customize as needed for compliance.
Custom sites: Full control over accessibility—follow WCAG 2.1 Level AA guidelines from start, use semantic HTML, test throughout development, and consider hiring accessibility consultant for audit.
Accessibility Statement
What it is: Page explaining your commitment to accessibility, current accessibility features, known issues and remediation timeline, and how to report accessibility problems.
What to include: Commitment statement (“We’re committed to ensuring our website is accessible to people with disabilities”), standards followed (“We aim to conform to WCAG 2.1 Level AA”), accessibility features (keyboard navigation, alt text, captions, etc.), known issues (“We’re aware of X issue and working to fix it by Y date”), contact information (“Report accessibility issues to accessibility@company.com”), and last updated date.
Where to place: Link in footer (“Accessibility” or “Accessibility Statement”), easy to find, and written in plain language.
Benefits: Demonstrates good faith effort, provides feedback mechanism, and may reduce legal risk by showing commitment to accessibility.
Legal Protection
Compliance reduces risk: WCAG 2.1 Level AA compliance significantly reduces lawsuit risk—most lawsuits target obviously non-compliant sites (no alt text, keyboard inaccessible, poor contrast).
Document efforts: Keep records of accessibility testing, remediation work, and ongoing monitoring—demonstrates good faith effort if sued.
Accessibility policy: Written policy committing to accessibility, outlining standards followed, and providing feedback mechanism—shows proactive approach.
Insurance: Cyber liability insurance may cover ADA lawsuits—check policy or add coverage ($500-$2,000/year typical for small businesses).
Legal counsel: If sued, hire lawyer experienced in ADA website cases immediately—don’t ignore demand letters or lawsuits.
Common Mistakes
Overlay-only solutions: Relying solely on accessibility overlays (accessiBe, UserWay) without fixing underlying issues—overlays help but don’t replace proper accessibility, and some disability advocates oppose them.
Ignoring mobile: Testing only desktop accessibility—mobile accessibility equally important with different challenges.
One-time audit: Auditing once then never testing again—accessibility requires ongoing attention as site changes.
Automated testing only: Relying solely on automated tools—they catch 30-40% of issues, manual and user testing essential.
Removing focus indicators: Removing keyboard focus outlines for aesthetics—makes site unusable for keyboard users.
Placeholder-only labels: Using placeholder text instead of labels—placeholders disappear when typing and aren’t always announced by screen readers.
The Bottom Line
ADA compliance for ecommerce websites is legal requirement with lawsuits growing from 814 in 2017 to 4,000+ in 2021, average settlements $10,000-$50,000 plus legal fees and remediation costs, and courts increasingly ruling websites must be accessible following WCAG 2.1 Level AA standards (Department of Justice reference)—applies to all US businesses particularly those with physical locations but purely online businesses also sued, affecting 15% of population with disabilities representing $490 billion spending power. Implement WCAG 2.1 Level AA requirements following POUR principles (Perceivable, Operable, Understandable, Robust) including text alternatives for images (descriptive alt text), sufficient color contrast (4.5:1 for normal text, 3:1 for large text and UI components), keyboard accessibility (all functionality via keyboard with visible focus indicators and logical tab order), form labels and error handling (every field labeled, clear error messages, error prevention), proper heading structure (H1, H2, H3 hierarchy), semantic HTML (,, , ), video captions, and assistive technology compatibility.
Address common issues including missing alt text (every image needs descriptive alt or empty alt=”” for decorative), poor color contrast (test with WebAIM Contrast Checker ensuring 4.5:1 ratio), keyboard navigation problems (test with Tab key, provide skip links, ensure dropdown menus keyboard-operable), inaccessible forms (label every field, mark required fields with asterisk AND text, provide clear error messages with aria-describedby), videos without captions, non-descriptive link text (“View product details” not “Click here”), missing heading structure, and inaccessible PDFs. Test using automated tools (WAVE free browser extension highlighting errors, axe DevTools with remediation guidance, Lighthouse built into Chrome, accessiBe $490-$990/year AI-powered solution though controversial) catching 30-40% of issues, manual testing (keyboard-only navigation unplugging mouse, screen readers NVDA/JAWS/VoiceOver, zoom to 200%, color blindness simulation), and user testing with people with disabilities through Fable ($1,500-$5,000), UserTesting, or local disability organizations testing product finding, checkout completion, navigation efficiency, and frustrations.
Implement on platforms including Shopify (Dawn theme has good baseline, test themes with WAVE/axe, customize for improvements, use accessiBe/UserWay if needed), WooCommerce (choose accessibility-ready WordPress themes, test with WP Accessibility plugin), BigCommerce (theme-dependent, test before choosing), or custom sites (follow WCAG from start, use semantic HTML, hire accessibility consultant for audit). Create accessibility statement in footer explaining commitment (“We aim to conform to WCAG 2.1 Level AA”), current features, known issues with remediation timeline, contact for reporting problems (accessibility@company.com), and last updated date demonstrating good faith effort providing feedback mechanism potentially reducing legal risk.
Protect legally through WCAG 2.1 Level AA compliance significantly reducing lawsuit risk (most target obviously non-compliant sites), documenting accessibility testing and remediation demonstrating good faith, written accessibility policy, cyber liability insurance potentially covering ADA lawsuits ($500-$2,000/year), and hiring experienced ADA lawyer immediately if sued. Avoid common mistakes including overlay-only solutions without fixing underlying issues (overlays help but don’t replace proper accessibility), ignoring mobile accessibility, one-time audit without ongoing testing, automated testing only (catches 30-40% requiring manual and user testing), removing focus indicators for aesthetics making site unusable for keyboard users, and placeholder-only labels disappearing when typing—proper accessibility protects from legal risk, expands customer base to 15% of population with disabilities, improves SEO (semantic HTML, alt text), and demonstrates ethical business practices making website usable for all customers regardless of ability.
Legal Disclaimer: This article provides general information only and does not constitute legal advice. ADA requirements and interpretations vary and evolve. Always consult with qualified attorneys specializing in ADA compliance for legal advice specific to your business.
