# Do Shopify size guides work for screen reader users?

Source: https://storefrontaccess.com/blog/2026-10-08-shopify-size-guide-screen-reader.html

[Home](../index.md) / [Blog](index.md)


October 8, 2026

Size guides are usually tables or modals bolted onto product pages. What screen reader users encounter and the structure that makes them usable.

## The table problem

Most size guides are data tables: sizes down one axis, measurements across the other. A sighted shopper scans the grid and finds their intersection in seconds. A screen reader user hears the table read cell by cell, and without proper markup the announcements are meaningless: "medium, 38, 30, 42" with no indication of what each number measures.

The fix is table semantics done properly. Column headers need th elements with scope="col", row headers need scope="row", and complex tables need headers and id attributes linking data cells to their headers. Most Shopify size guides are built with plain td cells everywhere, which turns the table into a number soup.

## The modal problem

Size guides increasingly open in modals or drawers, which adds every modal failure on top of the table failure. Focus does not move into the guide when it opens, the escape key does nothing, and closing returns focus to the top of the page instead of the size guide link. The shopper who most needs the information, someone deciding between sizes, is the one least able to reach it.

Worse, some size guides open in new tabs without warning, or as PDFs. A PDF size chart is effectively unreadable for many screen reader users and impossible to navigate by keyboard. If your size guide is a PDF, that alone is the finding.

## What a good size guide does

A good size guide is a real HTML table with full header semantics, reachable from a clearly labeled link next to the size selector, not hidden behind an icon with no text. If it opens in a modal, the modal follows the dialog pattern: focus moves in on open, stays trapped while open, escape closes it, and focus returns to the trigger.

The best guides also explain how to measure. A table of numbers assumes the shopper knows their chest measurement in inches. A sentence explaining where to measure, plus a note on fit (runs small, true to size), helps every shopper, and it is fully accessible by default because it is just text.

## How to audit yours

Open a product page, activate the size guide with keyboard only, and try to find your measurements with a screen reader running. Can you reach the guide? Does the table announce headers with each cell? Can you close it and land back on the size selector? Time the task: if it takes more than a minute, the guide is broken for assistive tech users.

Check the mobile experience too. Size guide modals on mobile often render off-screen or behind the overlay, and pinch-zoomed tables become unreadable. The audit that only tests desktop misses half the failures.

## The fix list

Convert the guide to a semantic HTML table, label the trigger link clearly, implement the modal dialog pattern if it opens in a layer, and add measurement instructions as plain text. Size guides sit directly on the purchase path, so this is accessibility work that also reduces returns: shoppers who can actually read the guide buy the right size the first time.

## Fit finder quizzes and accessibility

Many stores now replace static size guides with fit finder quizzes: answer questions about your body and usual size, get a recommendation. For screen reader users these are often worse than tables, built as multi-step widgets with unlabeled buttons, progress announced nowhere, and results that appear without notification.

If you use a fit quiz, it must follow the same rules as everything else: every question a real label, every step announced, results conveyed as text, and a keyboard path through the whole flow. A quiz that only works with a mouse is a size guide that excludes the shoppers who need guidance most. When in doubt, keep the humble table alongside the quiz.

## Frequently asked questions

### Do image based size guides work for screen reader users?

No. A size chart published as a photo or screenshot is silent to a screen reader and blurry under zoom. The measurements need to exist as real text, ideally in a properly structured table, for the chart to serve every shopper who needs it.

### What is the right way to publish a Shopify size guide?

As an HTML table with a header row and column, placed on the product page or one clear link away, with notes about fit and how measurements were taken. Popups can hold the same real table, but the information should never exist only as an image inside a modal.

### What goes wrong with size guide popups?

Focus that never enters the popup, close buttons without labels, popups that cannot be closed by keyboard, and tables that require sideways page scrolling at zoom. Each one is testable in minutes with a keyboard, which is how these problems should be found before customers find them.

### Should size guides include both inches and centimeters?

If you sell internationally, yes, through an operable unit toggle or by showing both in the table. Asking shoppers to convert units while deciding invites errors that become returns. Accurate conversion matters too: rounded carelessly, a converted size can become a different size.