1. Visual Design & Color

Visual accessibility ensures that content is perceivable by people with various visual impairments, including low vision, color blindness, and sensitivity to motion. These are the most common accessibility barriers on Shopify stores.

1. Ensure text-to-background color contrast ratio meets 4.5:1 minimum. WCAG 2.1 Level AA requires 4.5:1 contrast ratio for normal text and 3:1 for large text (18px+ or 14px+ bold). Use WebAIM's Contrast Checker to test your color combinations. Low contrast is the most common accessibility violation on ecommerce sites.
2. Do not rely on color alone to convey information. Sale prices, error messages, required fields, and status indicators must use more than just color. Combine color with icons, text labels, or patterns. 8% of men and 0.5% of women have color vision deficiency and cannot distinguish red from green.
3. Provide visible focus indicators on all interactive elements. When a user tabs through your site with a keyboard, each focused element must have a clearly visible outline or highlight. Never use outline: none without providing an alternative visible focus style. Focus indicators are essential for keyboard-only users.
4. Ensure buttons and links have sufficient contrast. Interactive elements should be visually distinguishable from surrounding content. Button text against button background needs 4.5:1 contrast. Links within body text should be underlined or have 3:1 contrast against surrounding text plus an additional visual indicator.
5. Avoid flashing content. Content that flashes more than 3 times per second can trigger seizures in people with photosensitive epilepsy. This applies to animations, GIFs, videos, and CSS animations. If you use auto-playing video or animation, provide pause controls.
6. Install EA Accessibility. Adds a comprehensive accessibility widget that allows users to customize contrast, text size, cursor size, line height, and other visual settings to match their needs. This covers many visual accessibility requirements automatically.

2. Keyboard Navigation

Many users navigate websites using only a keyboard due to motor disabilities, screen reader usage, or personal preference. Every function on your Shopify store must be accessible via keyboard alone.

7. Test complete keyboard navigation through your entire store. Starting from the homepage, use only Tab (forward), Shift+Tab (backward), Enter (activate), and Escape (close) keys to browse products, add to cart, and reach checkout. Every interactive element must be reachable and usable.
8. Add a "Skip to main content" link. The first focusable element on every page should be a hidden skip link that becomes visible on focus. This allows keyboard users to bypass the header navigation and jump directly to page content, saving dozens of tab presses per page.
9. Ensure all dropdown menus are keyboard accessible. Navigation dropdowns, filter dropdowns, and sort menus must open with Enter or Space, allow arrow key navigation through options, and close with Escape. Many Shopify themes have dropdown menus that only work with mouse hover.
10. Ensure modal dialogs and popups trap focus correctly. When a popup or modal opens, keyboard focus must move to the modal, cycle within it (Tab should not leave the modal), and return to the triggering element when closed. Popups from EA Email Popup & Spin Wheel handle focus management correctly.
11. Make carousel and slider controls keyboard accessible. Previous/next buttons and pagination dots must be focusable and activatable via keyboard. Auto-rotating carousels must have a keyboard-accessible pause button. Better yet, replace carousels with static content for both accessibility and performance.
12. Verify the add-to-cart button is keyboard accessible. The most important conversion action on your store must work with keyboard alone. Test with Enter key after tabbing to the button. Verify the cart updates and provides feedback (visual change or announcement).

3. Images & Media

Alternative text for images is the most well-known accessibility requirement, but it extends to all non-text content including videos, icons, and decorative elements.

13. Add descriptive alt text to all product images. Alt text should describe what the image shows: "Women's organic cotton t-shirt in navy blue, V-neck, shown on model." Avoid "product image" or "IMG_0001." Alt text is read by screen readers and displayed when images fail to load.
14. Use empty alt text for decorative images. Images that serve no informational purpose (background decorations, dividers, spacers) should have alt="" so screen readers skip them. This prevents screen reader users from hearing meaningless "image" announcements.
15. Add captions or transcripts to video content. Product videos, how-to videos, and promotional videos need captions for deaf and hard-of-hearing viewers. Captions also benefit users in noisy environments and non-native speakers. Auto-captioning services are available but manual review improves accuracy.
16. Ensure icons have text labels or aria-labels. Icon-only buttons (search magnifying glass, cart icon, hamburger menu) need accessible labels. Use aria-label="Search" or visible text alongside the icon. A magnifying glass icon alone means nothing to a screen reader user.
17. Provide text alternatives for infographics and charts. If you use size charts, comparison charts, or infographics, provide the same information in text format. Either describe the content in surrounding text or provide a long description via aria-describedby.

4. Forms & Inputs

Forms are critical conversion points in ecommerce. Inaccessible forms prevent users from signing up, searching, filtering, adding to cart, and completing checkout.

18. Label every form field with a visible label element. Use HTML <label> elements associated with each input via the for attribute. Placeholder text alone is not sufficient because it disappears when the user starts typing and is not announced by all screen readers.
19. Provide clear error messages for form validation. When a form field has an error, the error message must be: associated with the field (using aria-describedby), visible (not just a red border), and specific ("Email address is required" not just "Error"). Announce errors to screen readers using aria-live regions.
20. Mark required fields clearly. Use the word "required" or an asterisk with a legend explaining the asterisk. Also add the HTML required attribute and aria-required="true" for screen reader users.
21. Ensure the search field is accessible. The search input should have a label (visible or aria-label), be keyboard accessible, and announce search results to screen readers. Predictive search results must be navigable with arrow keys.
22. Make quantity selectors accessible. Cart quantity controls (+/- buttons and input fields) must be keyboard operable, properly labeled ("Quantity for [product name]"), and announce value changes to screen readers.

5. Content & Typography

Content accessibility ensures that text is readable and understandable by the widest possible audience, including people with cognitive disabilities, low literacy, and non-native speakers.

23. Use a minimum font size of 16px for body text. Text smaller than 16px is difficult to read for people with low vision and triggers auto-zoom on iOS. Line height should be at least 1.5 times the font size for comfortable reading.
24. Ensure text can be resized to 200% without loss of content. Users must be able to zoom the page to 200% without horizontal scrolling or content being cut off. Test by zooming your browser to 200% and verifying all content remains accessible.
25. Use proper heading hierarchy (H1-H6). Headings provide structure for screen reader navigation. Use exactly one H1 per page, followed by H2 for main sections, H3 for subsections. Never skip levels (H1 to H3 without H2). Screen reader users navigate by headings — poor hierarchy makes content incomprehensible.
26. Write in clear, simple language. Use plain language at a grade 8-10 reading level. Avoid jargon, idioms, and complex sentence structures. Clear writing benefits everyone, especially people with cognitive disabilities and non-native speakers. Use EA Auto Language Translate to serve international customers in their native language.
27. Set the page language attribute. Include lang="en" (or appropriate language code) on the HTML element. This tells screen readers which language to use for pronunciation, dramatically improving the listening experience for screen reader users.

Clear navigation structure allows users to find products efficiently regardless of how they interact with your store. Structure benefits all users but is essential for assistive technology users.

28. Use semantic HTML elements. Use <nav> for navigation, <main> for primary content, <header> and <footer> for page structure, <article> for content blocks, and <aside> for secondary content. These landmarks allow screen reader users to jump between page sections instantly.
29. Add ARIA landmark roles where semantic HTML is not used. If your theme uses <div> elements instead of semantic HTML, add ARIA roles: role="navigation", role="main", role="banner", role="contentinfo". This provides the same navigation benefits as semantic HTML.
30. Implement breadcrumb navigation. Breadcrumbs help all users understand their location within the site hierarchy and provide screen reader users with context about the current page's position. Use aria-label="Breadcrumb" on the nav element containing breadcrumbs.
31. Use descriptive link text. Links should describe their destination: "View our cotton t-shirts collection" not "Click here" or "Learn more." Screen reader users often navigate by listing all links on a page — "Click here" repeated 10 times provides no useful information.
32. Indicate current page in navigation. The currently active navigation item should be visually highlighted and marked with aria-current="page". This helps all users understand their location and provides screen reader users with orientation context.

7. Screen Reader Compatibility

Screen readers convert visual content to audio for blind and visually impaired users. Ensuring compatibility requires proper HTML structure, ARIA attributes, and testing with actual screen readers.

33. Test with a screen reader (VoiceOver or NVDA). VoiceOver is built into every Mac and iPhone (Settings > Accessibility > VoiceOver). NVDA is free for Windows. Navigate your entire store by listening only. This reveals issues that automated testing misses.
34. Ensure product prices are announced correctly. Screen readers should announce "$49.99" not "dollar four nine point nine nine." Use proper formatting and ensure sale prices announce both original and discounted prices with context ("Was $79.99, now $49.99").
35. Announce dynamic content changes. When actions like add-to-cart, quantity change, or filter application update the page without a full reload, use aria-live="polite" regions to announce changes. Without this, screen reader users do not know the page has changed.
36. Make product variant selections accessible. Size, color, and material selectors should announce the selected option and available options to screen readers. Each option should be labeled ("Size: Medium, selected" or "Color: Navy Blue").
37. Ensure cart announcements work. After adding a product to the cart, screen reader users should receive confirmation: "Product name added to cart. Cart now contains 3 items." Without this announcement, the user does not know if the action succeeded.

8. Testing & Compliance

Regular accessibility testing catches issues before they impact customers or create legal liability. Combine automated and manual testing for comprehensive coverage.

38. Run WAVE accessibility audit. Visit wave.webaim.org and enter your store URL. WAVE identifies errors, alerts, and structural issues. Fix all errors (red icons) as a minimum. Review alerts (yellow icons) for potential improvements.
39. Run Lighthouse accessibility audit. Open Chrome DevTools > Lighthouse > Accessibility. Target a score of 90+. Lighthouse checks for common issues including missing alt text, insufficient contrast, missing labels, and heading hierarchy problems.
40. Test the complete purchase flow for accessibility. Navigate from homepage to product page to cart to checkout using keyboard only and screen reader. This end-to-end test reveals accessibility barriers in the most critical conversion path.
41. Schedule accessibility audits quarterly. New content, theme updates, and app installations can introduce accessibility regressions. Quarterly testing ensures ongoing compliance and catches issues before they become legal liability.
42. Add an accessibility statement page. Create a page explaining your accessibility commitment, the standard you target (WCAG 2.1 Level AA), known limitations, and contact information for accessibility feedback. This demonstrates good faith effort and provides a feedback channel for users encountering barriers.

Frequently Asked Questions

Is Shopify accessibility legally required?

In many jurisdictions, yes. The ADA applies to websites including ecommerce stores, with over 4,000 lawsuits filed in 2025. The European Accessibility Act requires compliance by June 2025. Non-compliance risks lawsuits and loss of 15-20% of potential customers.

What is WCAG 2.1 and what level should I target?

WCAG 2.1 is the international web accessibility standard. Target Level AA, which covers color contrast (4.5:1), keyboard navigation, alt text, form labels, focus indicators, and text resizing. Level AA is the legal standard in most jurisdictions.

How many customers are affected by accessibility issues?

15-20% of the population has a disability. In the US, 61 million adults with disabilities have $490 billion in disposable income. Color blindness alone affects 8% of men. Accessible stores see 10-15% increases in addressable audience.

Can I make my store accessible without code changes?

Many improvements need no code: alt text, descriptive links, color contrast, heading hierarchy, and form labels are all manageable through Shopify admin. Install EA Accessibility for comprehensive features like adjustable contrast, text size, and cursor settings without code.

How do I test my store for accessibility?

Use WAVE and Lighthouse for automated testing (catches 30-50% of issues). Then test manually: navigate with keyboard only, test with VoiceOver or NVDA screen reader, check color contrast, and complete a full purchase flow. Test quarterly for ongoing compliance.