Accessible Size Guides and Fit Finders That Shoppers Can Actually Use
Size guides and fit finders fail when they hide in tiny modals, image only charts, and controls a keyboard cannot reach. Here is how to make them usable for everyone.
A size guide is supposed to remove doubt before a purchase. For many shoppers it does the opposite. The chart opens in a small modal, the numbers sit inside an image with no text alternative, and the close button cannot be reached with a keyboard. A shopper who cannot read the chart guesses, orders two sizes, and returns one.
Making a size guide accessible is not extra polish. It is basic product information, presented in a form every customer can read, compare, and act on without help from someone else in the room.
Use a real table, not a picture of a table
A measurement chart is tabular data, so mark it up as a table with proper row and column headers. Screen readers can then announce which value belongs to which size instead of reading a flat list of numbers. If the chart must start as an image from a supplier, rebuild it in HTML before it goes live.
Keep units visible in every row, offer both inches and centimeters with a simple toggle, and make sure the toggle itself is a real button with a clear label. A shopper should never have to convert measurements in their head while also trying to keep the modal open.
Make the fit finder work without a mouse
Fit finders ask a series of questions, so every step needs a visible focus indicator, a label tied to each input, and an error message that appears in text if a step is skipped. Radio buttons and sliders should work with arrow keys alone, and progress should be announced in words, not only shown as a filling bar.
Test the whole flow with the mouse unplugged. If you cannot finish it, neither can a customer using a keyboard, a switch device, or voice control. Fix the step that traps you first, because that is exactly where shoppers quietly leave.
Put the answer where the decision happens
The result of a fit finder should be plain text on the page, not a fleeting popup. State the recommended size, why it was recommended, and what to do if the shopper sits between sizes. Link that result directly to the size selector so the choice carries over instead of forcing the shopper to repeat it.
Add a short note about returns near the recommendation. Shoppers who are unsure need reassurance in the same place they feel the doubt, written in clear language they can reread at their own pace.
Check the guide on a small screen too
Most size guide visits happen on a phone. Pinch zoom must stay enabled, the table should scroll sideways without breaking the page layout, and tap targets need enough space that a shopper does not open the wrong row. Test at 200 percent zoom as well, because that is a common setting for low vision shoppers.
Run this check after every theme update. Size guides live inside apps and widgets that change quietly, and a guide that worked in spring can be unreadable by fall without anyone on the team noticing.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Accessible Product Videos: Captions and Transcripts, Accessible Loyalty Dashboards: Points, Tiers, and Rewards, and Accessible Wishlist and Saved Items Pages.
Frequently asked questions
What is the biggest accessibility problem with size guides?
The most common problem is a chart published as an image with no text version. Screen reader users hear only a filename or nothing at all, so the measurements are effectively missing. Rebuilding the chart as a real HTML table fixes it for everyone.
Should a fit finder remember my answers?
Yes, within the session it should. If a shopper answers three questions and then checks a delivery detail, coming back should not restart the quiz. Keep answers editable, label each step clearly, and never require an account just to get a size recommendation.
How do I test a size guide with a keyboard?
Unplug the mouse, open the guide with the keyboard, and try to read every cell, switch units, and close the guide again. Note any place focus disappears or gets trapped. Those spots are the fixes that matter most, in the order you hit them.
Do size guides need to mention returns?
They should. A clear, short returns note next to the recommendation lowers the risk a shopper feels when they are between sizes. Write it in plain language and keep it in the same view as the size choice, not buried on a separate help page.