Accessibility

Featured links

1. W3C documentation on Web Content Accessibility Guidelines
2. Shopify documentation on accessibility for themes
3. Shopify developer documentation on theme accessibility
4. Contrast Ratio
5. Shopify documentation on the rich text editor
6. Shopify documentation on adding alt text to product images
7. Shopify documentation on adding alternative text to your theme images
8. The A11Y Project article on vestibular disorders
9. W3C documentation on text to speech

Helpful videos

Vimeo Help article on captions and subtitles

When you customize Align in Shopify and add store content, accessible design choices help more customers use your online store, including people with disabilities.

These recommendations are informed by the Web Content Accessibility Guidelines (WCAG). Accessibility depends on many factors, so following these guidelines alone does not guarantee that your store is fully accessible. For additional guidance, see Shopify’s accessibility resources

Tip

For advanced theme accessibility guidance, visit Shopify.dev

Text accessibility

Clear, readable text supports customers with low vision and customers who find dense content difficult to read.

Color contrast

Use sufficient contrast between text and its background so customers can distinguish content, including customers who are colorblind or have low vision. Check color combinations with an online contrast ratio tool

For example, text with a 2.4:1 contrast ratio can be difficult for some customers to read, while a 4.8:1 ratio is easier to read for many customers. Check body text, headings, links, form fields, and text placed over images.

1. Use a contrast ratio of at least 4.5:1 for body text and button text.
2. Use a contrast ratio of at least 3:1 for headings and other large text at 24 px and above.
3. Ensure text over images, slideshows, banners, and videos meets the appropriate ratio: at least 3:1 for large text and 4.5:1 for smaller text.
4. Use a contrast ratio of at least 3:1 for non-text elements, such as input borders and icons.

Tip

If Align includes an image overlay option for the content you are editing, use it behind text on an image to improve contrast and readability.

Text headings

Use heading levels in sequence when adding headings with the rich text editor. Assistive technologies use headings to communicate how a page is organized, so skipping from heading level 2 to heading level 4 can be confusing.

1. Use heading levels in sequential order without skipping levels.

Text size and alignment

Choose text sizes that customers can read comfortably, and maintain consistent spacing between words and letters. Avoid justified alignment because it can create uneven gaps between words.

1. Set body text to the equivalent of at least 16 px.
2. Use left-aligned text instead of justified text.

Note

Font families can appear larger or smaller at the same size. If a font looks smaller than other fonts at 16 px, choose a larger size.

Text links

Make links identifiable without relying on color alone. Underlining links, or using another clear visual distinction from regular text, helps customers who have difficulty perceiving color changes.

1. Underline text links or give them another clear visual differentiator from surrounding text.

Alternative text for images

Alternative text helps customers who are blind or have low vision understand image content through screen readers. Add accurate alt text to each meaningful image.

You can add alt text to product images in the Shopify admin. You can add alt text to other theme images in the theme editor.

Write alt text as though you are describing the image to someone with their eyes closed. Describe details that matter in the context of the page and your business. For example, a travel agency might describe the location and scenery in an image, while an outdoor equipment store might focus on the brands and features of the backpacks shown.

For a travel agency, “Two people in front of the ocean” provides little useful detail. “Two friends traveling in Lagos, Portugal, looking out at the sandy cove of Praia do Camilo on a sunny day” is more descriptive.

Add alt text to theme images

1. From the Shopify admin, go to Online Store > Themes
2. Find the Align theme you want to edit, then click Customize.
3. In the theme editor sidebar, select the section containing the image.
4. Select Edit on the image.
5. Enter the alt text in the dialog, then click Save.
6. Click Save again to save your theme changes.

Slideshow and video accessibility

Consider customers with low vision, customers who are deaf or hard of hearing, and customers who may be susceptible to vestibular disorders when adding slideshows and videos.

Some customers use screen reader text-to-speech, and unexpected video audio or music can make a page difficult to use. Closed captions help customers who are deaf or hard of hearing access video content. Moving content can cause dizziness for customers with vestibular disorders.

Slideshows

1. Do not set slideshows to play automatically.
2. If a slideshow plays automatically, provide a setting customers can use to pause or stop it.

Videos

1. Do not set videos to play automatically.
2. If a video plays automatically, mute its audio.
3. Keep videos with audio fully visible and unobstructed so closed captions remain visible.
4. Provide text transcripts for videos with dialogue, either on the page or through a link to a separate page.
5. Apply these guidelines to videos included in slideshows as well.

Keyboard support

Customers with vision or motor impairments may use a keyboard to navigate and complete tasks. A clear visual focus indicator shows which page element is currently selected, such as an Email field.

1. Ensure every interactive element has a clear visual keyboard-focus indicator, including links, buttons, and form fields.