Reviewed October 21, 2026

Accessible size guides and fit tables on Shopify

Size guides shipped as images or cramped popups shut out screen reader users and anyone zooming. How to build fit tables on Shopify as real, readable data.

Why size guides fail so many shoppers

The typical Shopify size guide is a scanned image of a table, dropped into a popup. Screen readers get nothing but a filename. Shoppers who zoom get a blurry graphic that pixelates. On phones the image shrinks until the numbers are unreadable, and pinch zoom inside a modal often does not work at all.

This is the page shoppers visit at the exact moment of decision, tape measure in hand, comparing their numbers to yours. Failing them here does not just create an accessibility problem. It creates returns, because shoppers who cannot read the guide guess, and guessed sizes come back in the mail.

Build the guide as a real table

Use actual table markup with header cells for the measurements and row headers for the sizes. A screen reader can then announce a value in context, medium, chest, 38 to 40 inches, instead of reading a flat list of disconnected numbers. That structure is the difference between data and noise for a blind shopper.

Keep the table honest and simple. One table per product type, units in both inches and centimeters where you sell internationally, and a short paragraph explaining how to measure. If fit runs small or large, say so in text near the table rather than burying it in an image caption nobody can find.

Popups, pages, and where the guide lives

A dedicated size guide page is usually more accessible than a modal. Pages zoom properly, work with browser find, survive translation tools, and can be linked from every product that shares the sizing. If you keep a modal, it must trap focus correctly, close on Escape, and return focus to the size selector when it closes.

Whichever you choose, the link to the guide needs a real text label near the size options, not a tiny ruler icon alone. Place it where the decision happens, beside the selector, and make sure it is reachable by keyboard in a sensible order so shoppers meet the guide before they are asked to commit to a size.

Testing with real measurements

Test the guide the way shoppers use it. Zoom the browser to 200 and 400 percent and confirm the table reflows or scrolls horizontally with its headers still understandable. Then navigate it with a screen reader and check that each value announces with its row and column headers attached.

Finally, do a buying test. Pick three products, find your size using only the guide, and note every moment of doubt. Doubt at the table becomes a return later. Retailers who treat the size guide as an accessibility and returns project in one usually cut both complaints with the same fix.

Frequently asked questions

Why is an image of a size chart not accessible?

An image carries no text structure, so screen readers cannot read the values in context and zooming just enlarges pixels. Even with alt text, a full table in alt text is unusable. A real HTML table gives every shopper the same data in a navigable form.

Should size guides open in a popup or a page?

A page is the safer default for accessibility because it zooms, searches, and translates properly. A popup can work if focus is managed correctly and it closes cleanly, but many theme popups fail those basics. When in doubt, link to a page.

How do I handle inches and centimeters accessibly?

Show both units in the table itself, in clearly labeled columns or as paired values, rather than hiding one behind a toggle that resets. Shoppers using assistive technology should reach either unit without extra steps or losing their place.

Can an accessible size guide reduce returns?

Yes, indirectly but measurably. Shoppers who can actually read and use the guide choose sizes more accurately. Stores often see fit related returns drop after replacing image charts with readable tables and plain measuring instructions.