Accessible Size Guides and Fit Finders That Actually Help

Size charts, fit quizzes, and measurement tools decide whether a shopper can buy with confidence. How to make them usable with keyboard, screen reader, and touch.

A size guide is a purchase tool, not a reference document. When the chart opens in an image, traps focus in a modal, or hides its measurements behind a hover, shoppers who need it most cannot use it and either guess or leave.

Fit finders add a second layer: questions, sliders, and result screens that often fail basic keyboard and labelling checks. This guide covers the patterns that make size and fit tools genuinely usable.

Put the chart in real text, in a real table

A measurement chart should be marked up as a table with row and column headers, so a screen reader user can move from a size to its chest, waist, or length value and know which is which. An image of a chart gives none of that structure, and zooming an image on a phone is a poor substitute.

Keep units clear and paired. Show centimetres and inches together or offer a labelled toggle that updates the table, rather than forcing mental conversion at the point of decision. State which body measurement each column represents, not just a number.

Make the opener and the modal behave

The size guide link or button needs a clear label that says what it opens, and the dialog needs focus moved into it, a visible close control, and focus returned to the trigger on close. A modal that opens behind a sticky header or that cannot be dismissed with Escape fails on first use.

Test the full loop with keyboard only: open, read the table, close, and confirm you are back where you started. Then repeat at 200 percent zoom, where many modals clip their own content and hide the close button off screen.

Label every fit finder question and control

Fit quizzes fail when options are clickable cards with no accessible name, when sliders have no text alternative, and when progress is shown only as a coloured bar. Each question needs a heading or group label, each option needs a real control, and progress needs text as well as a visual indicator.

Results need the same care. A recommendation should be announced as text, explain the measurements or answers behind it in plain language, and offer a way to change an answer without restarting the whole quiz.

Audit fit tools after every theme or app change

Fit tools are often supplied by an app or rendered by a theme component, so they change when either updates. Add the size guide and the fit finder to the pre release checklist, with one keyboard pass and one screen reader pass on a real product page, not a demo page.

Log defects against the tool owner, with steps to reproduce and the assistive technology used. Vendors fix labelled, reproducible issues faster than general complaints, and a dated audit trail shows whether the same modal defect keeps returning.

Related reading

If this topic is useful, these earlier guides go deeper on connected questions: Accessible Checkout Error Recovery That Saves the Order, Writing an Accessibility Statement That Stays Current, and Making Loyalty and Rewards Programs Accessible End to End.

Frequently asked questions

What is the most common size guide barrier?

An image based chart with no text table behind it. Screen reader users get a filename or nothing, and low vision shoppers get a blurry zoom. A real table with headers fixes both groups at once.

Should a fit finder be required before buying?

No. It should be an optional helper beside a visible size selector and a full chart. Making a quiz the only route to choosing a size excludes shoppers who already know their measurements.

How should measurement units be handled?

Show both systems together in the table, or use a clearly labelled toggle that updates every value and announces the change. Never mix units inside one column without naming the unit per row.

Who owns fit tool accessibility, the store or the vendor?

The store owns the shopper experience and the audit. The vendor owns the code fix when the tool is supplied as an app. A good contract names both duties and a response time for critical barriers.

Home / Blog