# Accessibility (WCAG, ADA) All FoxEcom themes This guide provides **general information only** and isn't legal advice. Accessibility requirements vary by country and business type. If you're unsure whether your store meets local requirements, **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 FoxEcom themes are built with accessibility in mind to help you create a store that's **usable and inclusive** for more customers. They follow [Shopify's accessibility requirements](https://shopify.dev/docs/storefronts/themes/store/requirements#12-accessibility) and support many of the key principles of the [Web Content Accessibility Guidelines (WCAG) 2.1 Level AA](https://www.w3.org/WAI/WCAG2AA-Conformance). Your store's overall accessibility also depends on your content, third-party apps, and customizations. ## 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 **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) 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. We regularly release theme updates that improve accessibility, fix bugs, and enhance performance. * [Update Hyper theme](https://docs.foxecom.com/hyper-theme/getting-started/update-hyper-theme) * [Update Sleek theme](https://docs.foxecom.com/sleek-theme/getting-started/update-sleek-theme) * [Update Pebble theme](https://docs.foxecom.com/pebble-theme/getting-started/update-pebble-theme) * [Update Zest theme](https://docs.foxecom.com/zest-theme/getting-started/update-zest-theme) * [Update Minimog theme](https://docs.foxecom.com/minimog-theme/getting-started/update-minimog-theme) * [Update Megamog theme](https://docs.foxecom.com/megamog-theme/getting-started/update-megamog-theme) ### Apps and accessibility **Review third-party apps carefully.** Some apps can affect accessibility by adding issues such as missing keyboard support, unlabeled icons, or invisible focus indicators. **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. ### Content clarity Accessibility isn’t just about code — it’s about **clear communication**. Assistive technologies read text literally, so unclear wording can confuse 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. 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. * 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. 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. * 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 use `alt=""`) so they are skipped by screen readers. Describe the image as if you're explaining it to someone who can't see it. **Include only the details** that help customers understand the page. ### Slideshow and video accessibility Slideshows and videos can make your store more engaging, but they should also be easy for everyone to use. Avoid autoplay whenever possible. Give customers control over moving content and make sure important information remains easy to read and understand. Learn more: [Shopify Help - Accessibility Best Practices](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility/index) #### Slideshows Follow these best practices when adding a slideshow: * **Turn off autoplay** whenever possible. * If you enable autoplay, **add controls** so customers can pause, stop, or manually change slides. * **Use accessible text colors.** Make sure text overlays have enough contrast against the background image. * **Support keyboard navigation.** Customers should be able to navigate slides using the **Tab**, **Enter**, or **arrow** keys. #### Videos Follow these best practices when adding videos: * **Turn off autoplay** whenever possible. * If a video plays automatically, **mute the audio** by default. * **Keep captions visible.** Don't cover the video with banners, buttons, or other content. * **Provide a transcript** for videos with spoken content, either on the same page or through a linked page. If your video or slideshow plays automatically, make sure users can easily pause or stop it. ### Forms and inputs * 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