DEV Community

Dave
Dave

Posted on

Shopify checkout is highly accessible - but your product pages might be letting you down

Shopify has put real effort into making its checkout process accessible, meaning customers who use a keyboard or screen reader can complete their purchase without barriers. For you, that’s great news - it reduces abandoned carts and protects revenue.

But here’s the problem: the checkout is only the final step. If customers can’t navigate your product pages properly, they’ll never even get to that accessible checkout.

On peak shopping days like Black Friday and Cyber Monday, accessible journeys give your business a measurable sales advantage over your inaccessible competitors. But that advantage isn’t just seasonal - it applies every day of the year

TL;DR for business leaders

  • Problem: If customers can’t use your product pages, they never reach Shopify’s accessible checkout.
  • Impact: You’re excluding up to 20% of your potential customers, and your marketing spend is wasted.
  • Fix: Apply six simple changes to your product pages (below).
  • Result: More customers add items to their basket and complete their purchase.

Why Shopify checkout stands out

Shopify has publicly committed to following WCAG 2.2 AA — the internationally recognised Accessibility standard for inclusivity. This means their checkout is regularly tested so that people with different access needs can use it.

They also run regular usability testing with people who rely on assistive technology, such as screen readers.

So the last step of your sales funnel is already strong. The question is: how do you make sure your customers can actually reach it?

Six ways to make your product pages accessible

Shopify gives you strong foundations, but your product pages are still your responsibility. Here are six practical improvements that will help more people buy from you:

1. Make product options easy to use

Customers need to be able to pick the right size, colour, or material - whether they’re using a mouse, a keyboard, or a screen reader. If those options don’t work for everyone, some customers can’t buy at all.

Example: On some sites, option buttons are built using non-interactive code - such as a <div> element styled to look clickable. These don’t behave like real form controls, so they’re invisible to screen readers and often unreachable by keyboard. In practice, this means customers can’t select a size, change quantity, or even add a product to their basket.

2. Add meaningful image descriptions

Photos sell your products. But if someone can’t see the image clearly, they rely on a short written description (known as alt text). Instead of "Product image", say "Blue waterproof jacket with hood". Clear descriptions help customers make confident buying decisions.

Example: Without alt text, some screen readers fall back to reading out the file name, like "IMG_1234.jpg". That’s meaningless for customers and doesn’t help them decide whether to buy.

3. Announce changes clearly

When a customer chooses a different option, the price or stock level might change. Make sure that update is obvious to everyone - including those using screen reader software. If changes aren’t announced, people may think nothing has happened and leave without buying.

Example: On some sites, changing an option updates the price - but no announcement is made for screen reader users. Customers think the price hasn’t changed until checkout, which causes confusion and drop-offs.

4. Label every field and every button

From quantity boxes to "Add to basket", labels matter. They tell customers what each control does, and for people using assistive technology they're the only way to understand and use those controls. Without clear labels, some customers simply can’t complete their order.

Example: A quantity box without a label might be announced by a screen reader as "edit text" with no context. The customer has no way of knowing it controls quantity, so they can’t order more than one item and may abandon the purchase.

5. Make sure focus is always visible

When customers navigate with a keyboard, they need to see where they are on the page. A clear focus highlight (often a box or underline) shows which button or link is currently active. Without it, navigating is guesswork.

Example: On some sites, pressing the tab key moves through the page but there’s no visible outline showing where you are. Customers quickly lose track, miss important actions, and may abandon the site altogether.

6. Provide clear page structure

Customers should be able to scan your product page quickly and find the information that matters most - like product details, price, and delivery. Use clear headings and consider adding a “Skip to product information” link to help people get there faster.

Example: On many product pages, the actual product information is buried past menus, banners and product image. For customers using screen readers, it means wading through extras before reaching the product description - many never get that far.

Quick self-check

Open one of your product pages right now and ask yourself:

  • Can I choose a size or colour using only the keyboard?
  • Do all product images have meaningful descriptions?
  • If I change a product option, is the new price or stock level clear?
  • Are all fields and buttons clearly labelled?
  • Are buttons and swatches large enough to tap easily on mobile?
  • Can I quickly scan the page and jump to the product details?

If the answer is “no” to any of these, you’re losing customers before they even reach Shopify’s excellent checkout.


Why this matters for your sales

When customers can use your product pages without barriers, more of them reach Shopify’s accessible checkout - and more of them complete their order.

Accessible product pages don’t just reduce drop-offs. They increase conversions, make your marketing spend more effective, and open the door to customers who would otherwise be excluded.

Accessibility isn’t just the right thing to do. It’s smart business. When more people can buy, more people do buy.

The sales advantage of accessibility

Shopify has already set the standard with its accessible checkout. Once people reach it, Shopify claim their checkout converts 15% better on average than other platforms - so you’re in a strong position.

But that advantage is wasted if customers can’t use your product pages to get there.

Make those pages accessible, and you unlock the full value of Shopify’s checkout: fewer drop-offs, more conversions, and access to the 20% of customers too often excluded online.

Accessibility isn’t just compliance. It’s a growth strategy.

Top comments (0)