Accessibility

Helpful links

• https://contrast-ratio.com/

• https://admin.shopify.com/themes

Overview

Accessibility helps ensure your online store is available to everyone, including people with disabilities. By prioritizing accessibility, you create an inclusive experience for all your customers. Our advanced themes are designed to support accessibility best practices from the beginning, so your store remains modern, beautiful, and usable for every visitor.

💡 Tip: Following the Web Content Accessibility Guidelines (WCAG) provides a strong foundation, but the best accessibility comes from thoughtful design choices and regular reviews.

Accessibility for themes

Your design and content decisions significantly affect your store's accessibility. An accessible store allows everyone—regardless of ability—to browse, read, and shop without difficulty.

While our themes offer the most up-to-date accessibility tools, you will get the best results by making thoughtful customizations.

⚠️ Important: Using the latest features in our themes, including all advanced options, makes it easy to achieve excellent accessibility.

Text accessibility

All customers, including those with visual impairments or reading challenges, need to comfortably read and navigate your store’s text.

Color contrast

Strong color contrast ensures visually impaired customers can easily distinguish elements on your store. This is important for clarity and readability.

1. Test the contrast of body text, headings, links, and form fields using an online contrast ratio tool.

2. Maintain at least a 4.5:1 contrast ratio between body text/button text and its background.

3. Make sure headings or large text (24 px and up) meet a minimum 3:1 contrast ratio.

4. Ensure that any text over images, banners, or videos also meets these contrast ratios.

5. Non-text elements, like icons or input borders, should have at least a 3:1 contrast ratio.

   1. Improving readability may be as simple as adding a color overlay behind text when your theme offers this feature.

💡 Tip: Use a color overlay between text and images if your theme supports it to improve clarity.

Text headings

Headings help structure your content, making it easier to scan and navigate for users and assistive technologies.

1. Always use headings in order (h1, h2, h3, etc.) without skipping levels.

2. Add headings using your theme’s rich text or heading blocks for well-structured content.

Text size and alignment

Text should be large enough and well spaced for easy reading by everyone.

1. Set a minimum of 16 px for body text size.

2. Do not use justified alignment, as this can cause uneven spacing between words.

3. If you use a font family that runs small, increase the size to maintain clarity.

📝 Note: Font sizes may appear different depending on the typeface. Adjust as needed for the best results.

Text links

Accessible links use more than just color to stand out.

1. Underline links or use another clear visual cue to set them apart from regular text.

2. Don’t remove these indicators when customizing your link styles, so that links remain easy for everyone to recognize.

Alternative text for images

Alternative text (alt text) describes images for customers who use screen readers, making your content more accessible.

1. Imagine describing images to someone with their eyes closed—alt text should capture both context and meaning.

2. Tailor the description to fit the subject and context:

   1. For travel scenes, focus on the location and activity.

   2. For product images, describe standout details and features.

3. Avoid generic alt text. Be specific, such as: “Two friends traveling in Lagos, Portugal, looking out at the sandy cove of Praia do Camilo on a sunny day.”

How to add alt text to theme images

1. Open your store admin area.

2. Go to Online Store and select Themes.

3. Click Customize for your theme.

4. In the theme editor, locate the section with the image.

5. Click Edit on the image and enter your alt text.

6. Click Save when done.

💡 Tip: Add or update alt text whenever you upload images, or revisit product and theme images to edit their descriptions at any time.

Slideshow and video accessibility

Multimedia content on your store should be accessible to all, including those with sensory sensitivities, hearing, or visual impairments.

Slideshows

1. Avoid setting slideshows to autoplay.

2. If autoplay is chosen, always provide a way for customers to pause or stop the slideshow.

Videos

1. Prevent videos from autoplaying when possible.

2. If autoplay must be used, ensure the video’s audio is muted.

3. Do not cover videos with page elements, so captions are always visible.

4. Provide transcripts for any video with spoken words—either on the page or with a link.

🚧 Caution: Media that plays automatically or includes unexpected audio can make your store less accessible. Be sure visitors have clear, easy controls.

Keyboard support

Many users rely on keyboard navigation alone. Your store should remain fully accessible without a mouse.

1. Every interactive element—like buttons, links, and form fields—should show a clear visual focus indicator when selected.

2. Don’t remove or hide the keyboard focus style when customizing your theme.

⚠️ Important: Our advanced themes offer robust keyboard navigation right out of the box, making it easy for everyone to browse and shop.

By following these accessibility tips and using all features in our advanced themes, you help ensure every visitor can fully enjoy and engage with your store.