Hyper Theme
Hyper Theme
Faqs

Accessibility (WCAG, ADA)

5 min read

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.

💡 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, aligned with many key principles of the WCAG 2.1 Level AA 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.

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)
As the merchant, you are responsible for ensuring your store meets accessibility standards in your region. Learn more: Creating Accessible Stores on Shopify.

⚙️ 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

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 TypeMinimum Contrast Ratio
Body text and buttons4.5:1
Headings (24px and larger)3:1
UI elements (borders, icons, input outlines)3:1
Text over images or video4.5:1

Best practices:

  • Use a contrast checker tool 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 <br/> 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

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:

Re-check your store after:

  • Installing new apps
  • Updating your theme
  • Making design or content changes
Last updated

Search page

Previous Page

Add custom fonts

Next Page

ON THIS PAGE

💡 What is accessibility?✅ Is the Hyper theme WCAG or ADA compliant?⚙️ Recommendations for maintaining AccessibilityKeep your theme updatedApps and accessibilityContent clarityColor contrastText styling and structureAlt text for imagesSlideshow and video accessibilitySlideshowsVideosForms and inputs🧪 Testing accessibility

Was this helpful?