Accessibility

Faubourg is designed and tested against WCAG 2.2 level 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.

A theme alone can't make a store conform: your images, text, colors, apps and any code changes count as much as the theme. The lists below say what the theme does and what is up to you.

What the theme does

• Keyboard: the theme's controls can be reached 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 icon buttons, 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 are set to 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; on the collection header, its strength is the Image overlay setting, and a low value can leave text hard to read on a bright photo.
• Motion: if shoppers have asked their system to reduce motion, animations are turned off and nothing scrolls automatically.
• Without JavaScript: browsing, filtering, choosing a variant, adding to cart and checking out are built to work, and are tested with scripts turned off.
• 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.
• Apps and code changes: they add content the theme doesn't control. Test your store with a keyboard after installing an app or changing the code.

If you find an accessibility problem in the theme itself, tell us: we treat it as a bug.