Accessibility

Terrazza is built so that people can shop with a keyboard, a screen reader, a phone held in one hand, or with motion turned off. Your content matters as much as the theme, so this page covers both.

What the theme does

• Keyboard. Everything can be reached and used with the keyboard: the menu (including sub-menus), the search, cart and filter drawers, swatches, size options, accordions and sliders.
  • A Skip to content link appears on the first Tab press.
  • Focus is always visible.
  • Drawers keep focus inside while they are open, and return it to the button that opened them.
• Screen readers.
  • Each page has one main heading and an ordered heading structure.
  • Swatches and size options are real radio buttons with their names, including "sold out".
  • Cart updates, search results and the gallery position are announced.
  • Decorative images are hidden from screen readers.
• Touch. Buttons, swatches and links are at least 44 × 44 px on touch screens, above the 24 × 24 px minimum.
• Contrast. The default color schemes meet WCAG AA:
  • 4.5:1 for text
  • 3:1 for large text, icons and control borders
• Motion.
  • Animations are gentle.
  • Videos never autoplay with sound.
  • Visitors whose device asks for reduced motion see no animations at all. You can also turn scroll animations off for everyone in Theme settings > Animations.
• Zoom and small screens. Text scales with the browser, and pages don't scroll sideways from 320 px wide up. The layout keeps working on foldable phones, folded and unfolded, and in landscape.
• Without JavaScript. The menu, filters, variant picker, add to cart, cart and search keep working.

In our tests on the demo store, Lighthouse scored 100 for accessibility on the home, collection and product pages, and the axe checker found no serious or critical issues.

What you can do

• Alt text. Write alt text for every meaningful image: products, collections, the hero and story images. In the admin, open the image and choose Add alt text. Describe what matters for shopping, for example "Terracotta cylinder planter, 16 inches, on a stone step". Leave it empty only for purely decorative images.
• Colors. If you change the color schemes, keep Text and Muted text at 4.5:1 contrast against Background, and Control border at 3:1. Check them with WebAIM's contrast checker.
• Text on images. The hero places text on the photo. Choose images with a calm area where the text sits, or a darker photo for light text.
• Headings. In rich text, use headings in order (Heading 2, then Heading 3) and don't pick a heading just to make text bigger.
• Links. Write link and button labels that make sense on their own: "Read the material guide", not "Click here".
• Videos. Add captions to your videos (YouTube and Vimeo support them).
• Swatch names. Use clear option values ("Olive", "Charcoal"). Screen readers read the value name, not the picture.

Report a problem

If you find an accessibility problem in the theme, contact us through Support. We treat accessibility bugs as bugs.