# 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 *Hyper* theme following modern accessibility best practices so your store is **usable, inclusive, and welcoming** to everyone. Hyper 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 Hyper theme WCAG or ADA compliant? Like all Shopify-approved themes, *Hyper* 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 *Hyper* updates that improve accessibility, fix bugs, and enhance performance. 👉 *See how to update the theme:* [update-hyper-theme](https://docs.foxecom.com/hyper-theme/getting-started/update-hyper-theme "mention") ### 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