The theme is designed to meet WCAG 2.1 Level AA. This page describes the accessibility features built into the theme and what you can do as a merchant to maintain accessibility for your customers.

Built-in features

Skip to content

A skip link appears at the top of every page when a customer presses Tab. It jumps directly to the main content, bypassing the header and navigation.

The skip link is hidden visually by default and becomes visible when focused. It uses high-contrast colors that adapt to your color scheme.

Keyboard navigation

All interactive elements (links, buttons, form inputs, dropdowns, drawers, modals) are reachable and operable with the keyboard:

  • Tab: move forward through focusable elements.
  • Shift + Tab: move backward.
  • Enter or Space: activate buttons and links.
  • Escape: close drawers, modals, and overlays (cart drawer, search overlay, mobile menu, variant modal, popups).
  • Arrow keys: navigate within carousels, dropdown menus, and the slideshow.

Focus indicators

Every focusable element gets a visible focus ring when navigated by keyboard. The ring uses a configurable color from your color scheme (the Focus color, default #0891B2).

You can customize the focus color per color scheme in Theme settings > Colors to match your brand while keeping focus visible. The ring is 2 pixels wide with a 2-pixel offset.

In Windows High Contrast Mode (forced colors), the focus ring switches to system colors automatically so it remains visible.

Focus trapping

When a drawer or modal is open, keyboard focus stays inside it until it is closed. This applies to:

  • The cart drawer
  • The mobile navigation drawer
  • The search overlay
  • The variant modal
  • The promotional popup
  • The filter drawer (mobile)

Pressing Escape returns focus to the element that opened the drawer or modal.

Landmarks and structure

The theme uses semantic HTML landmarks so screen reader users can jump between regions:

  • <header>: site header
  • <nav>: primary navigation, footer navigation, breadcrumbs
  • <main>: page content (with id="main-content" as the skip link target)
  • <footer>: site footer with role="contentinfo"

The mobile navigation, cart drawer, search overlay, and variant modal all use role="dialog" with aria-modal="true".

ARIA labels and announcements

Interactive controls without visible text labels (icon buttons, close buttons, sort dropdowns) use aria-label to provide accessible names.

Status updates are announced to screen readers through aria-live="polite" regions:

  • Cart updates (item added, quantity changed, item removed)
  • Product count updates after filtering
  • Pagination progress (Showing X of Y products)
  • Form submission success and error messages
  • Price updates when the customer changes a variant

Image alt text

All images rendered through the theme's image snippet receive alt text from the source image's alt attribute, with an empty string as fallback for decorative images. This applies to product images, collection images, blog images, and image-with-text sections.

To set alt text:

  • Product images: edit the product, click an image, and add alt text in the Alt text field.
  • Collection images: edit the collection and use the alt text field on the image.
  • Blog images: in the Shopify blog editor, click an image and use the Alt text option.
  • Theme settings images (logo, hero, image with text): the theme uses sensible defaults (for example, the shop name for the logo) but you should review and customize where needed.

Reduced motion

Customers who enable "Reduce motion" in their operating system see static versions of animations across the theme. Specifically, animations are reduced or removed in:

  • Carousels (no auto-advance, no slide animation)
  • Search overlay (no fade or slide-in)
  • Promotional popup (no slide-in)
  • Cart drawer (no slide animation)
  • Variant modal (no fade animation)
  • Hover effects on product cards
  • Marquee scrolling (USP bar, if used)
  • Slideshow transitions
  • Article and blog page animations

Customers do not need to do anything to enable this; the theme respects their system setting automatically.

Forms

Form fields use semantic HTML with proper labels, autocomplete hints where applicable, and validation feedback. Error messages are linked to their fields with aria-describedby and announced through live regions.

Forms with errors return focus to the first error field after submission so keyboard and screen reader users can correct it without searching.

Color contrast

The theme ships with default color schemes designed to meet WCAG 2.1 AA contrast ratios for body text (4.5:1) and large text (3:1). However, contrast depends entirely on the colors you choose.

When customizing colors:

  • Test text against background using a contrast checker (for example, https://webaim.org/resources/contrastchecker/).
  • Ensure interactive elements (buttons, links) have sufficient contrast against their backgrounds.
  • Check that the Focus color in each scheme is visible against backgrounds where focused elements appear.
  • Test buttons in both default and hover states.

Document language

The <html> element declares the page language using request.locale.iso_code, which adjusts automatically when you publish multiple languages through Shopify Markets. Screen readers use this to apply the correct pronunciation and voice.

JavaScript fallback

The <html> element starts with the class no-js. JavaScript replaces it with js immediately on load. This lets the theme provide non-interactive fallbacks for users with JavaScript disabled. Core navigation, links, and forms work without JavaScript; enhanced features (drawers, predictive search, instant filtering) require JavaScript.

What you should do as a merchant

The theme provides accessibility infrastructure, but accessibility also depends on the content you publish.

  1. Add alt text to every image you upload. Describe what the image shows or, for purely decorative images, leave the alt empty.
  2. Use descriptive link text. Avoid "Click here" or "Read more" without context. Prefer "Read our shipping policy" or "View the leggings collection".
  3. Use heading levels in order. In rich text and page content, do not skip from <h2> to <h4>. Each page should have one <h1> (provided by the theme on most templates).
  4. Check color contrast. After choosing your colors, verify that text against background, and buttons against the page, meet WCAG 2.1 AA ratios.
  5. Write clear form labels and helper text. The contact form, newsletter, and account forms use whatever labels you set in your locale files or section settings.
  6. Caption your videos. If you embed videos in rich text or product descriptions, ensure they have captions or transcripts. The theme does not generate captions automatically.
  7. Test with a keyboard. Tab through your store and confirm that every interactive element is reachable and that the focus ring is visible.
  8. Test with a screen reader. macOS includes VoiceOver (Cmd + F5). Windows includes Narrator. Either is enough for a basic check.

Things to know

  • Accessibility is shared responsibility. The theme handles structural and interactive accessibility. Content accessibility (alt text, descriptive language, contrast on customized colors) depends on you.
  • WCAG 2.1 AA is a target, not a guarantee. Custom code, third-party apps, custom liquid blocks, and merchant-edited content can introduce accessibility issues that the theme cannot prevent. Test changes before publishing.
  • Reduced motion respects the customer's system setting. There is no theme setting to force motion off; the theme follows the customer's operating system preference.
  • Focus color is per-scheme. If you create multiple color schemes, set the Focus color in each one. The default is #0891B2, which provides reasonable contrast on light backgrounds. On very dark schemes, choose a lighter focus color.
  • Forms inherit color contrast from your scheme. If text in form fields appears low-contrast, adjust the Text and Background colors in the active scheme.
  • Third-party apps are outside theme control. App embeds, app blocks, and external widgets may not meet the same accessibility standards as the theme. Audit apps before installing.