Accessibility#

The theme is built so that more people can use your store. This page lists what the theme does and what you should do as the store owner.

What the theme does#

• Keyboard. Menus, the mega menu, the search drawer, the cart drawer, the country selector, filters, the size guide drawer, quick view, product tabs, accordions and the back to top button all work with the keyboard. Product tabs also use the arrow keys, Home and End. Windows keep the focus inside and give it back when they close. Visible focus rings show where you are.
• Skip link. A "Skip to content" link lets keyboard and screen reader users jump past the header.
• Screen readers. Buttons and icons have labels. The cart, search and form messages are announced.
• Reduced motion. Animations, autoplay and scrolling text are turned off for visitors whose device asks for reduced motion.
• Touch targets. Buttons and fields are at least 44 px tall.
• Language. The page language is set from the store language.
• Headings. Headings use a clear size scale, so each level looks different.
• Contrast. The theme is designed for readable contrast. Check it again after you change colors.

What you should do#

1. Check contrast when you change colors. Use 4.5:1 or more for body text and 3:1 or more for large text and borders. See Theme settings > Colors.
2. Add alt text to product images and any image you upload. See Performance and images.
3. Write clear link and button labels. "Shop dresses" is better than "Click here".
4. Use real text for important information, not text inside images.
5. Keep headings in order. Use the section's heading field, not bold text, for headings.
6. Add captions or a transcript for videos that carry important information.
7. Be careful with the accent color. The italic accent word also uses the accent color. Make sure it keeps enough contrast with the background.

Keyboard shortcuts#

Report a problem#

If you find something that is hard to use, write to us. See the support policy.