How to Make Shopify Size Charts and Fit Guides Accessible
Size charts decide purchases, and they are often the least accessible element on the page: an image of a table, a popup that traps focus, measurements nobody can parse. How to fix them.
Shoppers open a size chart at the moment of decision. If that chart is a scanned image, a popup that cannot be closed with a keyboard, or a grid of numbers with no labels a screen reader can follow, the shopper guesses, leaves, or buys the wrong size and returns it. Fit information is high value content, and it deserves the same care as the price.
The good news is that an accessible size chart is mostly a real table, real text, and a dialog that behaves. Here is how to build one on Shopify that every shopper can use.
Use a real table, not a picture of one
A size chart is data with rows, columns, and headers, so mark it up as a table with proper header cells. Screen readers then announce each measurement with its size and body part, instead of reading a flat list of numbers. Never ship the chart as an image from the supplier. If an image must stay for legal reasons, the full measurements still belong in text on the page, not only in alt text that gets cut off.
Measurements a person can act on
Give measurements in the units your shoppers use, and both systems when you sell across borders. Label what each number means: chest at the widest point, garment length, or body measurement, because those are not the same. Add a short how to measure note in plain language. An accessible chart is not just technically readable, it answers the shopper's real question, which size fits a body like mine.
If the chart opens in a popup, the popup must behave
Size charts often open in a modal, and modals are where accessibility goes to die. Focus should move into the dialog when it opens, stay inside while it is open, and return to the Size chart link when it closes. The close control needs a real label, Escape should close it, and the whole chart must be reachable and readable at zoom and on a phone without sideways scrolling that hides columns.
Put fit help where the decision happens
Keep the chart link next to the size selector, labeled clearly, not buried in an accordion at the bottom of the page. Note fit guidance in text too: runs small, between sizes should size up, model wears a medium. Those sentences help everyone, including shoppers whose size is out of stock in the chart's neat rows, and they reduce the returns that bad fit information quietly causes.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Accessible Gift Card and Store Credit Flows on Shopify Stores, Making Sale and Clearance Pages Accessible Without Hiding the Discount, and Making Your Shopify Cart Drawer Keyboard Accessible.
Frequently asked questions
Why is an image of a size chart a problem?
Screen readers cannot read measurements out of an image in any useful order, zoom users get blurry text, and nobody can copy or search the numbers. A real HTML table presents the same data in a structure assistive technology can navigate cell by cell.
Should size charts be on the page or in a popup?
Either can work if it is built well. On page tables are simpler and safer. If a popup is used, it must manage focus correctly, close with Escape, and return focus to where the shopper was.
What units should a size chart show?
The units your shoppers think in. Stores selling internationally should show both inches and centimeters, clearly labeled, rather than forcing shoppers to convert garment measurements in their heads.
How does an accessible size chart affect returns?
Fit is the top driver of apparel returns, and a chart shoppers cannot read produces guesses. Clear, readable fit information helps all shoppers choose better, which shows up as fewer bracketing orders and fewer returns.