Do Shopify size guides work for screen reader users?

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.