Accessibility and reduced motion

Tambour takes care of keyboard access, focus, what screen readers hear and motion. Your photos, words and colors decide the rest: a photo with no alt text or pale text on a pale scheme is something only you can fix. No theme makes a store accessible on its own.

Use the store with a keyboard

The first Tab press on any page shows a “Skip to content” link. It jumps past the header to the main content.

Links and buttons show a 2px outline when they are reached from the keyboard. The outline takes the text or accent color of the color scheme it sits on, so it changes with your colors.

The menu drawer, cart drawer, filter drawer, search, quick add, size guide and photo viewer open as dialogs. While one is open, Tab stays inside it and the page behind can’t be reached. Escape closes it, and focus goes back to the button that opened it. A drawer opened from the keyboard appears at once instead of sliding in. The cart notification is the exception: it shows in a corner and leaves the page usable. Focus moves to its heading, so the next Tab reaches “View cart”, and closing it returns focus to the add to cart button.

What screen readers hear

Adding to the cart from a product page or the cart drawer announces “Added to cart”.
When a shopper changes slides, the slideshow announces the new one, such as “Slide 2 of 4”.
On a product page, the price and the stock line are read again when the shopper picks another variant.
Form errors are read as soon as they show, in the newsletter, footer and countdown signups, the contact form and Shop the look. The contact form also moves focus to its list of errors.
In the Lookbook, each slice is named by its look’s number and caption, such as “Look 02, The Long Coat, belted”.
The countdown’s turning digits are hidden from screen readers, which read the number of days, hours and minutes instead.

What changes when a shopper asks for reduced motion

Shoppers ask for less motion with Reduce motion on iPhone and Mac or by turning off Animation effects on Windows. Tambour then stops anything that moves on its own and swaps turns and slides for a short fade:

Louvers are drawn open and never turn, in every section that has them.
The slideshow doesn’t play on its own and hides its pause button. Shoppers change slides with the arrows and markers, and slides fade instead of turning on louvers.
The announcement bar shows its first message and doesn’t turn to the next.
A video set to Background loop stays on its cover image with a play button.
Looks in the Lookbook, the second photo on a product card and photos in the product gallery fade in.
Countdown digits fade instead of turning, and the Words section’s boards don’t turn.
Boards that turn over in the Promises, Steps and contact form sections fade to their other side.
Drawers, the search panel and the quick add fade in instead of sliding.
Menus, the FAQ and product details open without their drop, and the header hides and comes back without sliding.
Carousel arrows jump to the next products instead of scrolling smoothly.

Open louvers as sections scroll into view in Theme settings > Animations is a choice for every shopper. Turned off, the louvers that wait for a section to scroll into view show open from the start. Louvers that turn when a shopper acts, such as choosing a look or a slide, still turn.

Write alt text

Alt text tells screen reader users what a photo shows. Tambour uses the alt text saved with each image in Shopify, so write it where the image lives:

Product photos: add alt text to each media item on the product in your Shopify admin (Shopify’s guide).
Images you pick in the theme editor: add alt text to the file in Content > Files (Shopify’s guide).

Some sections fill a gap for you. A Lookbook photo with no alt text uses its look’s Caption, a slide with no alt text uses its Heading, and a Video cover image with no alt text uses the Video description. Fill in Video description on every video: with Text position set to Above the video it names the play button, and for a YouTube or Vimeo video it names the player.

Keep your colors readable

You choose the colors in each scheme in Theme settings > Colors. The colors in Tambour’s three presets meet the ratios below. When you change a color, check it yourself with any online contrast checker:

Text, muted text, links and errors need a ratio of at least 4.5:1 against the scheme’s background. So do button labels against the text color, which fills the buttons, and the text on accent against the accent.
Field and control borders, and the accent where it marks focus or a chosen option, need at least 3:1.

Text over a photo depends on the photo. On the Image banner with Text position set to Over the photo, the text is always light, with a dark shade right under it. If a bright or busy photo still shows through, raise Shade behind text, and check the result on a phone too.

Give videos captions

Tambour shows a CC button only for a video that carries captions, and Shopify gives the theme no captions for a video you upload. For a video with speech, use Video URL with a YouTube or Vimeo link and add captions there. Shoppers turn them on in that player. A Background loop plays muted, so keep anything shoppers need to hear out of it. Shopify’s accessibility guide covers more of what you control.

Common questions

Why doesn’t my slideshow play on its own on my phone?

Your phone has reduced motion turned on. The slideshow plays for shoppers who haven’t turned it on.

Why does the announcement bar show only one message?

Either the shopper’s device asks for reduced motion or the bar’s Layout isn’t Turning messages. Under reduced motion only the first message shows, so put the most important one first.

Can I turn every animation off?

No. Open louvers as sections scroll into view stops the louvers that wait for scrolling. The rest turn off only for shoppers whose device asks for reduced motion.