Accessibility

Maison aims for WCAG 2.2 AA, beyond the minimum required by the Shopify Theme Store. Accessibility is part of the theme's design: it doesn't depend on a setting.

What the theme guarantees

• Keyboard: everything can be navigated and used with a keyboard, including dropdown menus, the mega menu, drawers, filters, the variant picker, and zoom. Drawers close with Esc and return focus to the element that opened them.
• Visible focus: every interactive element shows a clear focus outline, in every color scheme.
• Screen readers: labels on all icons, named navigation landmarks, and announcements of changes (add to cart, variant change, number of results after filtering).
• Touch targets: at least 24 × 24px for every target, and 44px tall for controls on touch screens.
• Contrast: the included schemes meet 4.5:1 for text and 3:1 for control outlines. Text over a photo (hero, transparent header, collection header) is protected by an overlay.
• Motion: if shoppers have asked their system to reduce motion, animations are turned off and nothing scrolls automatically.
• Without JavaScript: every shopping flow still works.
• Headings: each page has a single main heading, and heading levels stay visually distinct.

What depends on you

• Alt text: describe every image that carries information (products, images with text). Leave purely decorative images empty.
• Your schemes' contrast: if you change colors, keep to the thresholds described in Colors.
• Text over images: don't lower the overlay below the level that keeps your text readable. Check it on your lightest photos.
• Autoplay: leave it turned off on the hero and the announcement bar unless you really need it.
• Descriptive links: prefer "Browse the Autumn collection" to "Click here".
• Heading levels: in Text and Collapsible row blocks, choose levels that follow the page structure.
• Videos: add captions to your YouTube or Vimeo videos, and avoid autoplay for videos with speech.