Is Your Shopify Size Guide Accessible? What Most Stores Miss

Size guides are some of the least accessible pages on a Shopify store. The typical guide is an image of a table, locked in a modal, unreadable to screen readers and unusable with a keyboard. Rebuilding it as real HTML with a real table and a focus-managed modal fixes the problem in an afternoon.

The image-only chart problem

Most size guides start life as a spreadsheet screenshot. The brand exports the size chart as a PNG, uploads it to the size guide page or theme modal, and calls it done. For a sighted shopper on a desktop this is fine. For a screen reader user it is nothing: an image with no text alternative, which means the size information simply does not exist for them.

The quick fix, an alt attribute, is not enough here. Alt text can say "size chart for women's dresses" but it cannot carry a twelve-row table of measurements in a usable form. A data table needs to be a real table: th elements for the headers, scope attributes so the screen reader announces which column a cell belongs to, and a caption that explains what the table covers. That is the difference between a chart a screen reader can read and a chart it can only name.

Modal traps and focus failures

Size guides usually open in a modal, and modals are where keyboard accessibility goes to die. The common failures: the modal opens but keyboard focus stays on the page behind it, so tabbing moves through content the shopper cannot see. Or focus moves into the modal but the close button is unreachable by keyboard, so there is no way out except refreshing the page. Or the Escape key does nothing, violating the one convention every keyboard user relies on.

The fix is a focus-managed dialog. When the modal opens, move focus to its heading. Trap focus inside while it is open so tabbing cycles through the modal's controls. Restore focus to the "Size guide" button when it closes. Use the native dialog element or a well-tested dialog pattern rather than a hand-rolled div, because the edge cases in focus management are exactly the ones a quick custom modal misses.

Tiny text and unit gaps

Size guide tables are dense by nature, and density tempts designers into small type. Body text inside a size table routinely drops to 11 or 12 pixels, which fails the practical readability bar even when it technically passes a contrast ratio. The measurement a shopper needs most, the one for her actual size, should not require zooming on a phone.

Units are the other quiet failure. A table that lists numbers without units, or mixes inches and centimeters without saying which, forces shoppers to guess. A screen reader user hearing "32, 34, 36" with no unit context gets even less than a sighted user. Label the units in the column headers, state the default unit system, and provide a toggle for metric and imperial where your market needs it.

The page version matters too

Many themes put the size guide only in the modal. If the modal script fails, which it does on slow connections and with aggressive content blockers, the guide is unreachable. Keep a full size guide page as well as the modal, linked from the footer, and make the modal's "view full guide" link point to it. The page version also gives search engines a real page to index, which the modal content never gets.

A quick audit for your size guide

First, turn off images and open your size guide. If the measurements disappear, you have an image-only chart and it needs to become a real table. Second, open the guide and tab through it with only a keyboard. If focus escapes the modal, the close button is unreachable, or Escape does nothing, the modal needs focus management. Third, check the text size and units: if the table type is under 14 pixels or the units are ambiguous, the guide fails the shoppers who need it most.

Size guides sit at the decision point of every fit-sensitive purchase. An inaccessible one does not just risk a compliance complaint; it turns away the customers who were most motivated to buy. A real table, a managed modal, and readable type: that is the whole fix, and it costs less than the revenue one size-sensitive shopper brings.