> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/help/accessibility.md).

# Accessibility

What Stratum does to make your store usable by everyone, and what you can do to keep it that way.

Stratum is built so that shoppers can use your store with a keyboard, a screen reader, zoomed-in text or reduced motion. The Stratum preset was checked with automated accessibility testing (WCAG 2.1 A and AA) on desktop and mobile, with no serious or critical issues.

Accessibility is shared work, though: the theme handles structure and behavior, and you provide the content. This page covers both.

## What the theme does for you

### Keyboard

* Every link, button, field, swatch and menu can be reached with the **Tab** key, and shows a clear focus outline.
* A **Skip to content** link is the first thing keyboard users reach, so they can jump past the header.
* Menus, dropdowns, tabs and accordions open with **Enter** or **Space**.
* Windows (cart drawer, quick view, filters, the product image viewer) keep keyboard focus inside while open, close with **Escape**, and return focus to where the shopper was.
* In the full-screen image viewer, the **left and right arrow keys** move between images.
* Product card swatches preview a color when focused and select it with **Space**.

### Screen readers

* Images have alternative text (see below for your part), and decorative images are skipped.
* Icon-only buttons (bag, search, share, close, arrows) have spoken labels.
* Color swatches announce their name and whether they are sold out.
* Prices, stock messages, "Added to bag" and "Link copied" are announced when they change.
* Carousels, tabs and galleries are announced as such, with their position ("Media 2 of 6").
* Form fields have labels, and form errors are announced.

### Touch and phones

* Buttons and links are at least 44 × 44 pixels on phones, or 24 × 24 pixels for small controls such as card swatches, so they are easy to tap.
* Text can be zoomed to 200% without losing content.
* The mobile menu, filters and bottom bar are designed for one-handed use.

### Motion

* Visitors who turn on **Reduce motion** on their device get no scroll reveals, page fades, hover arrows or page loader; everything still works.
* Autoplaying content (slideshows, the announcement bar) pauses when hovered or focused, and doesn't autoplay at all for reduced-motion visitors.
* You can also turn animations off for everyone in **Theme settings › Animations**. See [Animations and motion](/store-wide-design/animations.md).

## What you can do

### Write alternative text for images

Alt text describes an image for people who can't see it.

* **Product images**: in the product page in your admin, click an image and choose **Add alt text**. Describe what matters: "Walnut chopping board, side view, with juice groove".
* **Images in sections**: images uploaded in the theme editor use the alt text saved with the file. Edit it in **Content › Files**.
* If an image is purely decorative (a texture, a pattern), leave the alt text empty.

### Keep color contrast high

When you change colors in **Theme settings › Colors**, check that text stands out against its background, especially **Secondary text** and **Primary button label**. Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large headings. See [Colors](/store-wide-design/brand.md#colors).

### Write clear links and buttons

* Use button labels that say what happens: "Shop cookware" rather than "Click here".
* Keep heading text meaningful; screen reader users often navigate by headings.

### Use headings in order

In rich text (product descriptions, pages, blog posts), use **Heading 2** for main parts and **Heading 3** inside them. Don't pick a heading level just for its size.

### Videos

Add captions to videos you upload, and avoid videos that autoplay with sound. Background videos in Stratum always play muted, and are paused for visitors who prefer reduced motion.

### Don't rely on color alone

If a message matters (for example "Sold out"), make sure it says so in words, not only in color. Stratum's own messages always do.

## Testing your store

* Unplug the mouse and try to buy something using only the keyboard.
* Turn on your phone's screen reader (VoiceOver on iPhone, TalkBack on Android) and open a product page.
* Free browser extensions such as **axe DevTools** or **WAVE** point out common problems.