Skip to main content

Accessibility

Our Commitment​

Accessibility is what enables customers with disabilities - whether visual, motor, cognitive, or auditory - to browse and purchase from your store with ease. The Wonder Theme is built with accessibility best practices at its core, ensuring your store is usable by the widest possible audience.

Built-in Accessibility Features​

The Wonder Theme includes numerous accessibility features out of the box:

  • Semantic HTML - proper heading hierarchy (H1–H6), landmark regions, and meaningful element structure for screen readers
  • Keyboard Navigation - all interactive elements (links, buttons, forms, menus) are fully navigable via keyboard
  • ARIA Labels - descriptive labels on interactive elements to provide context for assistive technologies
  • Focus Management - visible focus indicators on all interactive elements, with proper focus trapping in modals and drawers
  • Skip Navigation - a "Skip to content" link for keyboard users to bypass repetitive navigation
  • Color Contrast - default color schemes designed to meet WCAG AA contrast requirements
  • Responsive Text - scalable typography that respects browser zoom and text size preferences
  • Alt Text Support - all image fields support alternative text for screen readers

ADA & WCAG Compliance​

The Americans with Disabilities Act (ADA) and Web Content Accessibility Guidelines (WCAG) set the standards for web accessibility.

While we continuously work to improve accessibility and follow WCAG 2.1 best practices, full compliance depends on how you configure and use the theme. The theme provides the foundation - but merchants are responsible for ensuring their content, images, and third-party apps meet accessibility standards.

Best Practices for Merchants​

To maintain and improve accessibility on your store:

Use Descriptive Link Text​

Avoid generic text like "Click here" or "Learn more." Instead, use descriptive labels that explain where the link leads:

  • Good: "View our summer dress collection"
  • Avoid: "Click here"

Add Alt Text to All Images​

Every image in your store should have meaningful alternative text that describes the image content. This is critical for screen readers and also improves SEO.

Maintain Color Contrast​

Ensure sufficient contrast between text and background colors. Use a contrast checker tool to verify your color combinations meet at least WCAG AA level (4.5:1 for normal text, 3:1 for large text).

Be Cautious with Third-Party Apps​

Apps may introduce elements that are not accessible. Before installing an app, consider:

  • Does the app support keyboard navigation?
  • Does it provide proper ARIA labels?
  • Does it maintain focus management?

Contact the app developer about their accessibility practices if you are unsure.

Minimize Video as Primary Content​

Use images with alt text and written descriptions as the primary way to convey information. Videos should supplement content, not replace it. When using video, provide captions or transcripts where possible.

Test Your Store​

Regularly test your store's accessibility:

  • Navigate your entire store using only the keyboard (Tab, Enter, Escape)
  • Use a screen reader (VoiceOver on Mac, NVDA on Windows) to browse your store
  • Run an automated audit with Google Lighthouse or WAVE

Reporting Issues​

If you encounter an accessibility issue with the Wonder Theme, please contact our support team. We take accessibility feedback seriously and are committed to continuous improvement.