Accessibility

An accessible store works for customers who use a keyboard instead of a mouse, a screen reader, zoom or reduced motion settings. Alpha Start is built with the Web Content Accessibility Guidelines (WCAG) 2.2, level AA, as its target. Whether your store meets them also depends on your content: your images, colors, videos and texts.

What the theme does

Top of a store page with a dark “Skip to content” button outlined in the top-left corner over the header.

Skip link: the first press of the Tab key shows a Skip to content button that jumps past the header to the main content of the page.
Visible focus: the element in focus gets a 2px outline in the accent color of its color scheme when customers move through the page with the keyboard.
Menus: dropdowns in the header and the top bar open with Enter or Space and close with Escape, which returns focus to the menu item. In the mega menu, the Up and Down arrow keys move between categories.
Dialogs: the mobile menu, filters and sorting on small screens, the size guide, the image viewer, stories and forms such as Request a call open as dialogs. While a dialog is open, focus stays inside it. Escape closes it and focus returns to the button that opened it.
Search suggestions: the Up and Down arrow keys move through suggestions, Escape closes the list.
Tabs and viewers: the Left and Right arrow keys switch tabs in the Product tabs and FAQ sections and move between images in the image viewer and between stories.

Screen readers

The page language is set to the language the customer is browsing in.
Buttons that only show an icon, such as the cart, search, close and slider arrows, have text labels for screen readers.
Images use the alt text you add in your Shopify admin. In product cards, collection tiles and other linked cards, the image repeats the title next to it, so it is hidden from screen readers and the title is read instead.
Menus and dialogs tell screen readers whether they are open or closed.

Reduced motion

When a customer turns on the reduced motion setting of their device:

animations and transitions finish instantly, and scrolling jumps instead of sliding;
a looping video in the Video section doesn’t start on its own and stays on its cover image;
stories don’t move to the next story automatically;
the animation on the 404 page is replaced with a still image.

A looping video always has visible pause and sound buttons.

Color contrast

In every theme style, the main text and the button labels in the built-in color schemes have a contrast ratio of at least 4.5:1 against their background, the minimum WCAG sets for normal text. If you change the colors, check the contrast again.

What you need to do

The theme can’t check your content. To keep your store accessible:

Add alt text to images that carry meaning: product photos, banners and section images. Describe what the image shows in a short sentence. Add it in the product editor for product media, in Content → Files for images you choose in the theme editor, and in the collection and blog post editors. See Image sizes.
Check the contrast of your colors: when you edit a color scheme, keep text and button labels at a contrast ratio of at least 4.5:1 against the background, and 3:1 for large headings. Free online contrast checkers show the ratio for two colors. Check the Secondary text and Accent colors too: the theme uses them for small text and links.
Keep text out of images: screen readers can’t read text that is part of a photo, and it is hard to read on phones. Use the section’s heading and text settings.
Add captions to videos with speech: in the Video section, use a YouTube or Vimeo video with captions, as uploaded video files play without captions. A looping video without sound doesn’t need them.
Write clear link and button text: “Shop women’s coats” says more than “Click here”. Screen reader users often move from link to link.
Check apps: content added by apps is not part of the theme. Ask the app developer about its accessibility.

Browser support

Alpha Start supports the latest two versions of these browsers:

Chrome, Safari, Firefox and Edge on desktop;
Safari on iPhone and iPad;
Chrome on Android.

The theme uses modern CSS. In older browsers, such as Safari before version 16.2, Chrome before version 111 or Firefox before version 121, some parts of the store may look different.

Report an accessibility issue

If something in Alpha Start can’t be used with a keyboard, a screen reader or another assistive technology, contact support. Describe what you tried to do, on which page, and the browser and assistive technology you used.