Accessibility

An accessible store is one that everyone can use, including shoppers who browse with a keyboard, use a screen reader, or need strong contrast to read comfortably. Backline is built to meet the WCAG 2.1 AA standard out of the box, with proper headings, keyboard support, clear focus states, and motion that respects a visitor’s preferences. That gives you a solid base. The rest comes down to a few habits as you add your own content.

Describe your images

Add alt text to every meaningful image, in Shopify for product images and in the theme editor for theme images. A good approach is to picture describing the image to someone with their eyes closed, then write that in a short, readable phrase. Describe what is in the image, not what you hope people feel about it.

Keep your colors readable

Strong contrast helps shoppers who are colorblind or have low vision, and it makes your store easier for everyone to read. When you set your colors, aim for:

At least 4.5 to 1 contrast between normal text and its background.
At least 3 to 1 for large text, and for the edges of buttons, inputs, and icons.

An online contrast checker makes this quick, and it is worth a look whenever you pick a new color.

Write in plain, clear language

Use headings in order, so the page has a logical outline. The theme styles them for you.
Write link text that makes sense on its own. “See our size guide” is clearer than “click here”.
Keep instructions short and direct.

Set the right level of motion

The theme always follows the reduced motion preference set on a visitor’s device, so anyone who has asked their phone or computer to calm animations sees a still version of your store without you changing a thing. You set the pace for everyone else in Theme settings → Animations:

Motion level. One control sets how much movement runs across every section, so you choose the tone once instead of section by section.
None. Turning motion off completely is a proper design choice, not a compromise. It suits stores where the product photography should do all the talking.

Keep any custom content you add in the same spirit: gentle movement, and nothing that flashes. More detail lives in Animations.

Make the focus ring fit your design

The focus ring is the outline that shows which link, button, or field a keyboard shopper has landed on. The theme draws one everywhere it is needed, and gives you four controls in Theme settings so it suits your look rather than fighting it:

Width. A thicker ring is easier to spot. Go heavier if your store leans minimal and low contrast.
Offset. Space between the ring and the element. A little breathing room reads more clearly on buttons and product cards.
Color source. Ties the ring to your color scheme so it stays visible on light and dark backgrounds alike.
Glow. A soft halo behind the ring, useful over photography or busy media sections.

Whatever you pick, tab through your homepage, a product page, and your cart once and check you can always see where you are.