Skip to content
Sentinela

Ten common accessibility issues, and how to fix them on a Shopify or WooCommerce theme

Published · 7 min read

Most accessibility barriers on online stores are not exotic. The same handful turn up again and again, and most of them can be fixed in the theme, once, for every page that uses it. This article goes through ten of them: what each looks like on a store, who it blocks, and how to fix it on a Shopify theme (Liquid or theme settings) and on a WooCommerce theme (a child theme).

Where "common" comes from

Each year WebAIM runs automated tests on the home pages of the top one million websites. The WebAIM Million 2026 report found detected WCAG failures on 95.9% of those home pages, and the six most common failure types were:

  • low-contrast text: 83.9% of home pages;
  • missing alt text: 53.1%;
  • missing form labels: 51%;
  • empty links: 46.3%;
  • empty buttons: 30.6%;
  • missing page language: 13.5%.

These figures cover the whole web, not only online stores, and they only count what automated tests can detect. Automated tests are not an audit: some criteria, such as whether alt text is accurate, need a person. Issues 9 and 10 below are usually found by testing with a keyboard, which surveys like this one don't measure.

1. Low-contrast text

On a store: light gray prices, pale sale badges, text placed over a product photo or banner. Who it blocks: people with low vision, and anyone reading a phone in sunlight.

  • Shopify: start in the theme editor (Theme settings → Colors) rather than in code. For text over images, add an overlay or a solid background behind the text.
  • WooCommerce: adjust colors in the Customizer or the child theme's CSS. Check the sale badge (.onsale) and crossed-out prices (del).

The target is a contrast ratio of at least 4.5:1, or 3:1 for large text (WCAG 1.4.3).

2. Product images without alt text

On a store: product photos, collection images and banners with no text alternative. Who it blocks: screen reader users, who hear nothing useful, or a file name.

  • Shopify: in the theme's image output, use the image's alt text and fall back to the product title: alt: image.alt | default: product.title | escape. Then fill in alt text for each product image in the admin.
  • WooCommerce: output the alt text from the Media Library (wp_get_attachment_image does this), and fill in the Alt Text field for each image.

Decorative images get an empty alt="". Our article on alt text for product images covers what to write (WCAG 1.1.1).

On a store: the cart icon, the account icon, social media icons in the footer. Who it blocks: screen reader users hear "link" with no idea where it goes.

  • Shopify: add visually hidden text inside the link, translated with the theme's locale strings, for example <span class="visually-hidden">{{ 'general.cart.title' | t }}</span> (the key depends on your theme). Most themes already have a visually-hidden class.
  • WooCommerce: use WordPress's built-in class, with a translatable string: <span class="screen-reader-text"><?php esc_html_e( 'Cart', 'your-theme' ); ?></span>.

(WCAG 2.4.4 and 4.1.2)

4. Icon buttons without a name

On a store: the menu toggle, the "close" button on a drawer, the + and − quantity buttons. Who it blocks: screen reader and voice control users, who can't tell what the button does or say its name.

  • Shopify: add an aria-label to icon-only buttons (translated with the theme's locale strings), and keep the icon itself aria-hidden="true".
  • WooCommerce: add the aria-label in the overridden template; for quantity, that is woocommerce/global/quantity-input.php in your child theme.

5. Form fields without labels

On a store: the newsletter sign-up, the search box, a gift note field. Who it blocks: screen reader users, and anyone who forgets what a field was for once the placeholder text disappears.

  • Both: give each field a real <label for="…">. It can be visually hidden if the design needs it. Placeholder text is not a label.
  • WooCommerce: for WooCommerce's own fields, use the label argument of woocommerce_form_field().

Quick check: click on the text next to a field. If the cursor moves into the field, the label is connected.

6. Variant pickers and "sort by" without a name

On a store: the size or color dropdown, the "sort by" menu on a collection page. Who it blocks: screen reader users hear "combo box" but not what it chooses.

  • Shopify: add a <label for="SortBy"> or an aria-label to the <select>. For variant pickers, use the option name (option.name) as the label.
  • WooCommerce: label the orderby select in your child theme's copy of woocommerce/loop/orderby.php.

7. Missing page language

On a store: the <html> element has no lang attribute, or the wrong one. Who it blocks: screen readers use it to choose a voice and pronunciation; without it, English text may be read with, say, French pronunciation.

  • Shopify: in layout/theme.liquid, use <html lang="{{ request.locale.iso_code }}">.
  • WooCommerce: make sure header.php has <html <?php language_attributes(); ?>> and the site language is set in Settings → General.

(WCAG 3.1.1)

8. Zoom turned off

On a store: the viewport tag contains maximum-scale=1 or user-scalable=no, so shoppers can't pinch to zoom on a phone. Who it blocks: people with low vision who rely on zoom to read prices and product details.

  • Both: remove maximum-scale=1 and user-scalable=no from the viewport <meta> tag (layout/theme.liquid on Shopify, header.php on WooCommerce, or the plugin that adds it).

(WCAG 1.4.4)

9. Focus you can't see, or that hides behind a sticky header

On a store: pressing Tab moves through the page, but nothing shows where you are, because the theme removed the focus outline. Or focus lands on a link that is covered by a sticky header or a chat widget. Who it blocks: keyboard users, who lose their place on every page.

  • Both: remove outline: none (or outline: 0) where there is no replacement, and add a visible style, for example :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.
  • Sticky header: set scroll-padding-top on html to the header's height, so focused elements scroll into view below it.

(WCAG 2.4.7 and 2.4.11)

10. Drawers and pop-ups that trap or lose focus

On a store: the cart drawer opens but focus stays on the page behind it; the newsletter pop-up can't be closed with the keyboard; closing the menu drops focus back at the top of the page. Who it blocks: keyboard and screen reader users, sometimes completely, at the moment they are trying to buy.

  • Both: when a drawer or pop-up opens, move focus into it. Keep Tab inside it while it is open, let Escape close it, and return focus to the button that opened it. A native <dialog> opened with showModal() does much of this for you.
  • Closed drawers and menus: add inert (or hidden) while they are closed, so their links can't be reached with Tab. aria-hidden="true" alone is not enough.

(WCAG 2.1.2 and 2.4.3)

Theme editor or code?

Some of these you can fix without touching code:

  • Without code: alt text on product and theme images, and colors in the theme settings (Shopify) or the Customizer (WooCommerce), if your theme exposes them.
  • With code: names for icon links and buttons, labels, page language, the viewport tag, focus styles and drawer behavior. On Shopify, work on a duplicate of your theme and preview it before publishing. On WooCommerce, use a child theme so updates to the parent theme don't undo your changes, and test on a staging copy of the site.

Shopify's own accessibility best practices for themes are a good reference for theme developers.

What your theme can't fix

Some parts of a store are not in your theme's code:

  • Shopify's checkout is built and run by Shopify. Issues there are Shopify's to fix; you can report them to Shopify.
  • Apps and plugins (reviews, pop-ups, chat widgets, some product galleries) load their own code. If one causes a barrier, check its settings, then contact the vendor or consider an alternative.

It is still worth knowing about these issues, because your shoppers meet them on your store.

Sources

This article is general information, not legal advice. For your obligations, talk to a lawyer.