# Accessibility (WCAG, ADA)
This guide is for **general informational purposes only** and does not constitute legal advice.\
Accessibility requirements can vary by country and business type.
If you’re unsure about your compliance level, **consult a qualified accessibility expert**.
## 💡 What is accessibility?
Accessibility means designing your store so that **all visitors** — including those with visual, motor, auditory, or cognitive impairments — can navigate, understand, and interact with it comfortably.
This includes support for:
* Screen readers
* Keyboard navigation
* Color contrast
* Text alternatives for images
* Other assistive technologies
At FoxEcom, we build the *Zest* theme following modern accessibility best practices so your store is **usable, inclusive, and welcoming** to everyone.
Zest was developed to meet [Shopify’s accessibility requirements](https://shopify.dev/docs/storefronts/themes/store/requirements#12-accessibility), aligned with many key principles of the [WCAG 2.1 Level AA](https://www.w3.org/WAI/WCAG2AA-Conformance) standard.
## ✅ Is the Zest theme WCAG or ADA compliant?
Like all Shopify-approved themes, *Zest* follows Shopify’s accessibility guidelines, but **full compliance depends on how you use and customize it**.
* Semantic HTML structure
* Logical heading hierarchy
* ARIA (Accessible Rich Internet Applications) attributes
* Keyboard focus and navigation support
* Sufficient color contrast and scalable typography
* The content you add (alt text, headings, clarity)
* Any third-party apps or custom scripts installed
* Visual design changes (color palette, fonts, animations)
As the merchant, you are responsible for ensuring your store meets accessibility standards in your region. *Learn more:* [*Creating Accessible Stores on Shopify*](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility)*.*
## ⚙️ Recommendations for maintaining Accessibility
### Keep your theme updated
Accessibility standards evolve over time. We regularly release *Zest* updates that improve accessibility, fix bugs, and enhance performance.
👉 *See how to update the theme:* [Update Zest theme](https://docs.foxecom.com/zest-theme/getting-started/update-zest-theme)
### Apps and accessibility
Third-party apps can add valuable features — but sometimes introduce accessibility problems (e.g., missing focus states, unlabeled icons, or poor keyboard handling).
**Recommendations:**
* Install only essential apps. Limit the number of installed third-party apps.
* Test your store after installing new apps.
* Contact app developers about accessibility support.
* Remove unused or redundant apps to avoid conflicts and improve page performance.
If an app creates accessibility conflicts, contact the app developer for integration advice.
### Content clarity
Accessibility isn’t just about code — it’s about **clear communication**. Assistive technologies read text literally, so unclear wording can cause confusion for users.
**Best practices:**
* Use **meaningful link and button text.**
* ✔️ *“View all summer collections”*
* ❌ *“Click here”*
* Use **short, descriptive headings**.
* Don’t rely on **icons or images alone** — include visible text or ARIA labels.
* Keep paragraphs short; avoid ALL CAPS or decorative fonts for body text.
💡**Tip:** Read your content aloud. If it still makes sense when spoken, it’s accessible.
### Color contrast
Good contrast ensures that text, buttons, and icons are visible for users with low vision or color blindness.
**WCAG contrast ratio requirements:**
| Element Type | Minimum Contrast Ratio |
| -------------------------------------------- | ---------------------- |
| Body text and buttons | 4.5:1 |
| Headings (24px and larger) | 3:1 |
| UI elements (borders, icons, input outlines) | 3:1 |
| Text over images or video | 4.5:1 |
**Best practices:**
* Use a [contrast checker tool](https://www.siegemedia.com/contrast-ratio) to test your color palette.
* Avoid light-gray text on white backgrounds or low-opacity overlays.
* Add a **semi-transparent background overlay** behind text on images to improve readability.
* Make interactive elements stand out (color and size differences).
### Text styling and structure
Proper heading hierarchy helps screen reader users understand and navigate your content logically.
**Best practices:**
* Follow a logical hierarchy (e.g., `H1 > H2 > H3`).
* Don't skip heading levels (for example, don’t jump from `H2` to `H4`).
* Use headings for structure, not for styling.
* Keep body text at least **16px** in size for readability.
* Use CSS for spacing instead of `
` tags.
💡**Tip:** Test with a screen reader — if the headings are read in a logical order, your structure works.
### Alt text for images
Alt text (alternative text) describes an image for visitors using screen readers. Without it, they miss important visual information.
**Best practices:**
* Always add alt text for your images, especially products, banners, and feature sections.
* Be descriptive and concise (under 125 characters).
* Describe the *purpose* of the image, not just its appearance.
* ✔️ *“Woman wearing red floral dress”*
* ❌ *“Product image”*
* Leave decorative images blank (or using `alt=""`) so they are skipped by screen readers.
💡**Tip:** Think of explaining the image to someone over the phone, describe only what’s meaningful to the page’s purpose.
### Slideshow and video accessibility
Slideshows and videos can enhance storytelling, but they must be accessible to everyone.
Auto-playing or flashing content can distract or disorient some users. Providing controls and captions ensures everyone can engage with your media.
#### Slideshows
When you add a slideshow to your online store, use the following guidelines:
* Slideshows **don’t play automatically**.
* If slideshows do play automatically, they must include controls to **pause, advance, or stop** the slideshow.
* Ensure text overlays meet color contrast standards.
* Provide clear keyboard navigation for slides (Tab, Enter, or arrow keys).
#### Videos
When you add videos to your store, use the following accessibility guidelines:
* Videos **don’t play automatically**.
* If videos do play automatically, **their audio is muted**.
* For videos with audio, ensure the video area is **fully visible** and not covered by other elements, so captions remain visible.
* For videos with dialogue, provide **text transcripts,** either on the page or linked to a separate page.
* These same rules apply to **videos used within slideshows**.
**Tip:** If your video or slideshow plays automatically, make sure users can easily pause or stop it.
**Learn more:** Read this article for more: [Shopify Help - Accessibility Best Practices](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility/index)
### Forms and inputs
**Best practices**:
* Ensure every field has a clear label.
* Provide helpful error messages near the input.
## 🧪 **Testing accessibility**
Regular testing helps maintain accessibility as your store evolves.
**Recommended tools:**
* [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
* [axe DevTools](https://www.deque.com/axe/devtools/)
* [Wave Evaluation Tool](https://wave.webaim.org/)
* Screen readers: **VoiceOver (Mac)**, **NVDA (Windows)**, **ChromeVox (Chrome)**
Re-check your store after:
* Installing new apps
* Updating your theme
* Making design or content changes