Shopify Accessibility Best Practices: Liquid Theme Fixes
Common accessibility pitfalls in modern Shopify Online Store 2.0 themes, and the exact Liquid code changes needed so your cart drawers and product cards meet WCAG 2.2 AA.
Common Pitfall 1: Unlabeled Icon-Only Buttons
In many Shopify themes, header buttons for the cart, mobile navigation drawer, and search toggle rely exclusively on SVG icons without accessible text. While visual shoppers recognize the magnifying glass icon, a screen reader announces only 'button' or the raw SVG filename.
<!-- ❌ Inaccessible: Icon-only button without text -->
<button class="cart-trigger" type="button">
{% render 'icon-cart' %}
</button>
<!-- ✅ Accessible: Visually hidden text announces cart item count -->
<button class="cart-trigger" type="button" aria-label="{{ 'templates.cart.cart' | t }}">
{% render 'icon-cart' %}
<span class="visually-hidden">
{{ 'sections.header.cart_count' | t: count: cart.item_count }}
</span>
</button>Common Pitfall 2: Focus Trapping in Slideout Cart Drawers
When a customer clicks 'Add to Cart' and an AJAX slideout drawer opens, focus must automatically move into the drawer, stay trapped while the drawer is visible, and return to the add-to-cart button when closed via the Escape key.
function openCartDrawer(drawerEl, triggerEl) {
drawerEl.setAttribute('aria-hidden', 'false');
drawerEl.classList.add('is-open');
// Focus the first interactive element inside drawer
const firstFocusable = drawerEl.querySelector('button, [href], input');
if (firstFocusable) firstFocusable.focus();
function onKeyDown(e) {
if (e.key === 'Escape') {
closeCartDrawer(drawerEl, triggerEl);
window.removeEventListener('keydown', onKeyDown);
}
}
window.addEventListener('keydown', onKeyDown);
}Test your site for accessibility regressions
Get weekly automated scans, plain-language fix guides, and dated proof of progress for Shopify and WordPress.