Accessibility

Fine Print handles the parts of accessibility that live in the theme code: keyboard access, focus, announcements and motion. Your content and your colors decide the rest. A photo without alt text or a pale text color on a pale background is something only you can fix.

Fine Print isn’t certified against WCAG, and no theme can make a store accessible on its own.

What the theme does

Keyboard navigation

Every link, button and form field can be reached with the Tab key, in the order it appears on the page.

• The first Tab press on a storefront page shows a Skip to content link that jumps past the header to the main content. The password page has no skip link.
• In the header, a menu item with sub-links is a button that opens with Enter or Space. Escape closes the open menu and puts focus back on its item, and moving focus out of the item closes it too. Items that don’t fit on one row move into a More menu, which opens the same way.
• The mobile menu, cart drawer, search, quick view, filter drawer, pickup details, full-screen images and the build-a-set picks open as dialogs. While one is open, the page behind it can’t be reached with Tab or the mouse. Focus moves into the dialog, Escape or a click outside closes it, and focus goes back to the button that opened it.
• The Promo popup works the same way with Layout set to Modal. As a Corner card it leaves the page usable and doesn’t take focus, and Escape still closes it.
• Predictive search results move with the up and down arrow keys. In a Build a set section, the step tabs move with the left and right arrow keys, Home and End. The Before and after slider is a standard slider that moves with the arrow keys.

Visible focus

Every link, button, form field and expandable row shows a 2 px focus ring when it is reached from the keyboard. The ring takes the text color of the color scheme it sits in, so it changes with your colors.

Announcements

Screen readers hear what changes on the page without the shopper having to look for it:

• In the cart drawer and on the cart page, a quantity change is announced, and focus stays on the button the shopper pressed. Cart errors, such as asking for more than is in stock, are read out as they appear.
• Filtering and sorting a collection or search page announces the new results.
• The finder announces which question is showing, and a build-a-set section announces the pick count and the tier message as they change.
• Image galleries announce the position, such as “2 / 5”, as the shopper moves through them.
• Form messages, such as a newsletter signup or a contact form success, are read out when they appear.

Motion

Fine Print has three movements: sections fade in as they scroll into view, a product card’s image grows into the product page when the shopper opens it, and a card shows its second image on hover. Shoppers who ask their device to reduce motion, with Reduce motion on iPhone and Mac or with Animation effects turned off on Windows, get none of the three. For them, also:

• the Announcement bar shows only its first message, without rotating or scrolling and without its controls
• a video in the Hero shows its poster image until the shopper presses play
• drawers, dialogs and the header appear without sliding or fading
• product rows and image galleries jump to the next item instead of scrolling smoothly

Fine Print treats shoppers in the Instagram, Facebook and TikTok in-app browsers the same way for the three movements and the announcement bar, because those browsers handle page transitions poorly.

Turning off Enable animations in Theme settings > Layout removes the three movements for every shopper. It doesn’t stop the announcement bar or a hero video. Those follow only the shopper’s device setting.

Pause controls

Two things move on their own, and both can be stopped:

• The announcement bar with Layout set to Rotating or Ticker always shows a pause button. It also holds still while the pointer is over it or while something inside it has keyboard focus.
• A hero video plays muted on a loop while it is on screen and has its own pause button. Once a shopper pauses it, it stays paused when they scroll back to it.

Videos in the Video section play only when the shopper presses play, and use the player’s own controls. Product videos, on the product page, in the Featured product section and in quick view, also wait for a press on play. They have a play and pause button and a mute button, which screen readers hear as pressed while the sound is off.

Colors

Fine Print applies your color scheme colors as you set them. It doesn’t adjust them for contrast, so the pairs you choose are the pairs shoppers see.

What you control

Alt text

Alt text tells screen reader users what an image shows. Fine Print uses the alt text you add to each image in Shopify, so write it where the image lives:

• Product photos: open the product in your Shopify admin and add alt text to each media item. Shopify’s guide: Adding alt text to media.
• Images you pick in the theme editor: they come from Content > Files in your admin, where you can add alt text to each file. See Shopify’s guide to uploading and managing files.

Describe what matters about the picture in a short sentence. Skip “image of”, and leave alt text empty only for images that are pure decoration. SEO and social sharing lists the places where Fine Print sets alt text for you.

In the Video section, fill in Play button label with what the video is, such as “Play: How we test each batch, 2 minutes”. Screen readers read it for the play button.

Your color choices

Each color scheme in Theme settings > Colors holds six colors: Background, Text, Accent, Text on accent, Lines and borders, and Secondary text. Check these pairs in every scheme you use:

• the Text color on the Background color
• the Text on accent color on the Accent color, which buttons use
• the Secondary text color on the Background color, which captions and labels use

Body text needs a contrast ratio of at least 4.5:1, and large headings, icons and borders need 3:1. Any online contrast checker gives you the ratio for two hex codes. Then check that each section’s Color scheme, and the Page color scheme, uses a scheme whose pairs pass.

Text and images

The Hero with Layout set to Full bleed puts its text in a panel inside the image, on the section’s background color, so the contrast you checked above still holds over any photo. The Video section never puts text on the film.

Video captions

The hero video plays muted, so it shouldn’t carry anything shoppers need to hear. Fine Print’s video settings have no place for a caption file. For a video with speech, host it on YouTube or Vimeo, add captions there and choose YouTube or Vimeo as the Source in the Video section, or put a transcript on the page. Shopify’s accessibility guide recommends both.

Headings

Use headings to name what each part of the page is about, not to make text big. Sections with a heading have a Heading tag setting separate from Heading size, so you can keep the outline in order and still choose the look. A page needs one H1, then an H2 for each part. SEO and social sharing lists where Fine Print starts at H1.

Link and button labels

Write labels that make sense on their own. A screen reader user often hears a list of links with nothing around them, so “Shop serums” beats “Click here”.