Accessibility and motion

Nook is built so every shopper can browse and buy: with a mouse, a keyboard or a screen reader, or zoomed in. Your content matters too; the notes below help you keep it that way.

What the theme does

• Keyboard: every menu, drawer, filter, swatch and button works with the keyboard and shows a clear focus outline. A Skip to content link is the first thing keyboard users reach.
• Screen readers: buttons and fields have names, cart and filter updates are announced, and headings follow a logical order.
• Text size: all text is at least 12 pixels and grows with the shopper's browser text size and zoom. Large headings scale smoothly with the screen size.
• Contrast: the four color schemes meet the WCAG AA contrast guidelines for text and controls.
• Tap targets: buttons are at least 44 pixels, and links and small controls at least 24.
• Reduced motion: when a shopper's device asks for less motion, Nook turns off fades and slides, stops scrolling text and shows the hero's still image instead of the video.
• Pause buttons: the hero video, video, scrolling text and announcement bar have visible pause buttons whenever they're moving.
• Without JavaScript: menus, filters, sorting, paging, the cart and forms still work.

Motion settings

Under Theme settings › Animations:

• Reveal sections on scroll: sections fade in as shoppers scroll.
• Move scrolling text: turn off to show the scrolling text standing still.

Keep your content accessible

• Alt text: describe each product and lifestyle image in a few words ("Harlow sofa in oat bouclé, front view"). Leave alt text empty only for purely decorative images.
• Colors: if you edit a color scheme, check that text and buttons still stand out from the background. Aim for a contrast ratio of at least 4.5:1 for text.
• Text over photos: the Hero video, Collection slideshow and Image with quote always use light text over a dark shade. Keep Overlay strength (Hero video) or Overlay opacity (Collection slideshow) high enough that the text reads clearly on your photo; the minimum for both is 40%. The Image with quote section sits on a fixed shade.
• Headings: each page has one main heading (the page or product title). Use section headings in order and don't choose a heading for its size alone.
• Links: write link and button text that makes sense on its own ("Shop sofas", not "Click here").
• Video: add captions to videos with speech.

Performance

• Upload images at least 2400 pixels wide for full-width sections, and at least 1600 pixels wide for all others. Shopify resizes them for each screen.
• For the hero video, keep the video short (a few seconds that loop), about 1920 pixels wide and under 10 MB. Set a poster image: it's what shoppers see first and while the video loads.
• Each app you install can add code to every page. Remove apps you don't use.