Reviewed October 18, 2026

Accessible size charts: tables, modals, and the fit information trap

Size charts decide purchases, and many Shopify stores deliver them as tiny images inside broken modals. How to publish fit data every shopper can actually use.

The image of a chart is not a chart

Uploading a screenshot of a size table as the size guide is the most common fit accessibility failure. Screen readers get a filename, low vision shoppers get a blurry pinch and zoom exercise, and nobody can copy a row to compare against their measurements at home.

The fix is unfashionable and complete: publish the chart as a real HTML table with proper headers. Tables are one of the oldest structures on the web, assistive technology handles them beautifully, and the same page then works for search engines and translation tools too.

Modals: where size charts go to hide

Charts often open in a quick modal, and modals are where keyboard focus goes to get lost. A usable chart modal moves focus inside when it opens, keeps tabbing cycling within it, closes on the escape key, and returns focus to the size guide link afterward. Test yours with the keyboard alone before assuming the theme handles it.

Also mind the trigger. A size guide link placed after the variant selector, reachable in logical order, labelled in full words rather than a ruler icon alone, gets found. Buried icon buttons with no accessible name are how good charts stay invisible.

What the chart should contain

Measurements in both unit systems your customers use, the body measurement each row refers to rather than just garment numbers, and a short how to measure note with the tape positions described in words. A diagram may help, with a text description carrying the same information for those who cannot see it.

Fit notes deserve text too: runs small, between sizes advice, model wearing a size with their height. Shoppers use this to avoid returns, which is the chart's business case. Every barrier in it is measurably a returns and support cost.

A two hour repair plan

Replace the chart image with a real table on your top selling products first, check the modal with a keyboard pass, and add the missing text labels. Then roll the same pattern across the catalog in batches, best sellers to long tail, reusing the corrected template component.

Verify with a screen reader pass on one product page afterward, listening to whether the table reads row by row with headers announced. That five minute listen is the difference between a chart that exists and a chart that works.

Frequently asked questions

Can I keep the chart image if I add alt text?

Alt text long enough to carry a full table is unusable in practice; nobody can navigate a table read as one paragraph. Keep a diagram if it helps sighted shoppers, but publish the data itself as a real table. The table is also what search engines can index.

How do I test a size chart modal with just a keyboard?

Tab to the size guide link, open it with enter, and keep tabbing: focus should stay inside the modal and always be visible. Press escape and confirm focus returns to the link. Scroll with arrow keys inside long charts. Any step that fails is a fixable template issue.

Should size charts open on a separate page instead?

A dedicated page linked from every product is a perfectly good pattern and avoids modal problems entirely, as long as the link is clear and the page itself is a proper table. Consistency matters more than the container: one chart pattern, everywhere, maintained in one place.

What units should a size chart show?

Both inches and centimeters when you sell internationally, labelled clearly per column. Mixing units inside one column, or converting silently by region with no label, causes the measurement errors the chart exists to prevent. Precision in the boring parts is what makes fit data trustworthy.