Making Size Charts and Fit Guides Accessible
Size charts are dense tables squeezed into popups, and fit advice is often locked inside images. How to present sizing so every shopper can actually use it.
A size chart decides whether a shopper buys, guesses, or leaves. It is also one of the least accessible objects on a store: a cramped table inside a modal, launched from a tiny text link, with measurements that vanish the moment a screen reader or a zoomed view meets them.
Fit information does not need to be complicated to be usable. It needs to be real text, in a proper table, reachable by keyboard, and readable at the sizes shoppers actually use. This guide covers the pattern.
Publish the chart as a real table with headers
Measurements belong in a table with row and column headers marked up properly, so a screen reader user hears which measurement belongs to which size instead of a stream of disconnected numbers. A picture of a table gives them none of that.
Keep units explicit in every relevant cell or header, inches and centimetres both where the store sells internationally. A number without a unit is a guess, and guesses turn into returns.
Fix the popup pattern or drop the popup
If the chart opens in a dialog, the dialog must take focus on open, keep focus inside while open, close on Escape, and return focus to the link that opened it. Half of the size chart modals tested in casual reviews fail at least one of those, usually the return.
A dedicated fit guide page is often the simpler and better answer. It can be linked from every product, indexed, zoomed, and read without a time limit, and it gives detailed fit notes a home that a modal never will.
Write fit notes as text, not image callouts
Runs small, size up if between sizes, model wears a medium: these notes carry the decision, and they are routinely baked into product photography or banner images where assistive technology cannot reach them. Move every fit note into the page text near the size selector.
Place the notes before the buy controls, not below the fold of a description tab. Fit information discovered after purchase is not information, it is a returns reason with extra steps.
Test the chart at zoom and on mobile
Tables that work on a desktop monitor overflow at 200 percent zoom and on phones, pushing the largest sizes off screen exactly where a shopper needs them. A chart that scrolls horizontally needs that scroll to be keyboard reachable and visibly indicated.
Check the chart with the store zoomed, on a small phone, and with a screen reader reading one full row. Three short passes catch nearly every sizing barrier a store ships.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Colour Contrast for Sale Badges and Promo Labels, Making Store Search and Autocomplete Accessible, and Keyboard Navigation for Product Image Galleries.
Frequently asked questions
What is the most common size chart barrier?
The chart published as an image. It cannot be read by screen readers, cannot be zoomed cleanly, and cannot be searched. Republishing the same numbers as a real table fixes all three at once.
Should a store use a modal or a page for sizing?
Either can work. A modal must manage focus correctly and close cleanly. A page is simpler to make accessible and easier to keep updated, which is why many stores end up preferring it.
Where should fit notes live on a product page?
In plain text beside the size selector, before the purchase controls. Fit advice a shopper finds only after ordering does not prevent the return it was meant to prevent.
Do size charts affect returns?
Yes. Unreadable or missing sizing is a direct driver of guess ordering and bracket buying, where shoppers order two sizes and return one. Accessible sizing will not end returns, but it removes the avoidable share.