Accessibility

Compliance overview

WCAG 2.1 AA is the standard required by the Shopify Theme Store review process and by legal accessibility standards in most jurisdictions. Mast is designed to meet all Level A and Level AA success criteria that apply to a Shopify theme.

Skip to content link

A skip link is the first focusable element on every page. It is visually hidden until focused, at which point it appears as a visible button above the header. Activating it moves keyboard focus directly to the <main> element, allowing users to bypass repeated header navigation.

The tabindex="-1" attribute on <main> ensures that keyboard focus can be programmatically moved to it by the skip link even though it is not a natively focusable element.

Keyboard navigation

Every interactive element in Mast is reachable and operable by keyboard alone. The following table documents the keyboard interaction for each component.

Focus management

Drawers and modals require careful focus management. When a drawer opens, keyboard focus must move into the drawer and be trapped there until the drawer is closed. When the drawer closes, focus must return to the element that triggered it.

Screen reader support

Mast is tested with VoiceOver on macOS/iOS and NVDA on Windows. The following ARIA patterns are used throughout.

Reduced motion support

Mast fully supports the prefers-reduced-motion: reduce media query. Users who have enabled the “Reduce motion” option in their operating system preferences will see a simplified, motion-free versión of the theme.

The global reduced motion override in Mast sets all animation and transition durations to 0.01ms, effectively disabling them. Individual animations that serve a functional purpose (such as drawer slide-in) have explicit reduced-motion overrides that replace the animation with an instantaneous opacity transition instead.

Color contrast ratios

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) and UI components. The following ratios are measured for the default Mast preset. The Press and Nocturne presets meet equivalent requirements.

* Accent color on Paper meets the large text threshold (3:1) but not the normal text threshold (4.5:1). Mast only uses accent color at display or large heading scale in contexts where this is acceptable. Body text is always Ink on Paper.

Semantic HTML

Mast uses semantic HTML elements throughout to communicate document structure to browsers, screen readers, and search engines.

How to test accessibility

• —

  axe DevTools

  Browser extension by Deque. Run it from the DevTools panel on any page to get an automated accessibility audit. Catches about 30–40% of WCAG issues automatically.

• —

  Shopify Theme Checker

  Available in the theme editor under Analyze. Includes basic accessibility checks as part of its audit report.

• —

  Keyboard-only navigation

  Unplug the mouse and navigate the entire storefront using only Tab, Shift+Tab, Enter, Space, and Arrow keys. Verify that every interactive element is reachable and shows a visible focus ring.

• —

  VoiceOver (macOS / iOS)

  Enable VoiceOver with Command+F5 on Mac or vía Accessibility Settings on iPhone. Navigate with VO+Arrow keys and verify that all interactive elements are announced correctly.

• —

  NVDA + Firefox (Windows)

  Download NVDA (free screen reader for Windows) and test with Firefox. NVDA is widely used by screen reader users and surfaces different issues than VoiceOver.

• —

  Color contrast analyzers

  Use the Colour Contrast Analyser desktop app or browser devtools to check contrast ratios when customizing colors. Any combination of text and background must be verified.

Merchant responsibility

Mast provides an accessible foundation, but content entered by merchants can introduce accessibility issues. The following are common merchant-caused issues to avoid:

• —Not filling in the alt text field on product and section images. An empty alt attribute is correct for decorative images, but product images need descriptive alt text.
• —Uploading low-contrast graphic text (e.g., light text on a light background) as an image. The theme cannot check the contrast ratio of text embedded in an image.
• —Using heading levels out of order in the rich text editor (e.g., jumping from h2 to h4).
• —Installing third-party apps that inject inaccessible widgets. Review app accessibility is the app developer's responsibility, not the theme's.
• —Setting color tokens to combinations that fail the contrast ratio requirements documented above.