Accessibility (WCAG, ADA)
Best practices for building an inclusive, accessible shopping experience for every customer
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.
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.
Color contrast
Good contrast ensures that text, buttons, and icons are visible for users with low vision or color blindness.
WCAG contrast ratio requirements:
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 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
H2toH4).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.
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.
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.
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:
Screen readers: VoiceOver (Mac), NVDA (Windows), ChromeVox (Chrome)
Re-check your store after:
Installing new apps
Updating your theme
Making design or content changes
Last updated