# Accessibility (WCAG, ADA) {% hint style="danger" %} ## **Disclaimer** 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**. {% endhint %} ## 💡 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**. {% hint style="success" %} #### Built-in accessibility features * Semantic HTML structure * Logical heading hierarchy * ARIA (Accessible Rich Internet Applications) attributes * Keyboard focus and navigation support * Sufficient color contrast and scalable typography {% endhint %} {% hint style="warning" %} #### Compliance also depends on * The content you add (alt text, headings, clarity) * Any third-party apps or custom scripts installed * Visual design changes (color palette, fonts, animations) {% endhint %} 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](/zest-theme/getting-started/update-zest-theme.md) ### 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). {% hint style="success" %} **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. {% endhint %} {% hint style="info" %} If an app creates accessibility conflicts, contact the app developer for integration advice. {% endhint %} ### 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. {% hint style="success" %} **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. {% endhint %} {% hint style="info" %} :bulb:**Tip:** Read your content aloud. If it still makes sense when spoken, it’s accessible. {% endhint %} ### 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 | {% hint style="success" %} **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). {% endhint %} ### Text styling and structure Proper heading hierarchy helps screen reader users understand and navigate your content logically. {% hint style="success" %} **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. {% endhint %} {% hint style="info" %} :bulb:**Tip:** Test with a screen reader — if the headings are read in a logical order, your structure works. {% endhint %} ### Alt text for images Alt text (alternative text) describes an image for visitors using screen readers. Without it, they miss important visual information. {% hint style="success" %} **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. {% endhint %} {% hint style="info" %} :bulb:**Tip:** Think of explaining the image to someone over the phone, describe only what’s meaningful to the page’s purpose. {% endhint %} ### 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**. {% hint style="info" %} **Tip:** If your video or slideshow plays automatically, make sure users can easily pause or stop it. {% endhint %} {% hint style="success" %} **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) {% endhint %} ### Forms and inputs {% hint style="success" %} **Best practices**: * Ensure every field has a clear label. * Provide helpful error messages near the input. {% endhint %} ## 🧪 **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 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.foxecom.com/zest-theme/faqs/generic/accessibility-wcag-ada.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.