Size Charts and Fit Finders That Every Shopper Can Use

Size tools are images, popups, and quizzes at their worst. How to build size and fit guidance that works with assistive technology.

Nothing decides a clothing purchase like fit, and nothing on a product page is built worse for assistive technology than the size chart. It arrives as an image of a table, opens in a popup that traps focus, or hides inside a fit quiz that cannot be operated by keyboard. The shopper who needs the information most gets the least of it.

This guide covers size charts as real tables, fit finders that can be completed without a mouse, and the plain text guidance that helps every shopper, not just those using assistive technology.

Size charts are data, so publish them as data

A size chart is a table, and it should exist as one in the markup: header rows that name the measurements, cells that a screen reader can associate, and units stated in text. An image of a table gives a screen reader user the file name and nothing else, on the exact page where a wrong choice means a return.

Offer both unit systems as text, not as a toggle that only swaps an image. And put the essential guidance outside the chart too: how this style runs, between sizes advice, and the model's size in the product photos, all as readable copy on the page.

Popups and modals without traps

If the chart opens in a dialog, the dialog must behave: focus moves into it, stays inside while open, the chart can be read and scrolled by keyboard, and closing returns focus to the size control the shopper came from. A popup that strands focus at the top of the page forces shoppers to tab through the entire page to get back to buying.

Better still, consider not hiding it. An expandable section on the page, properly labelled, avoids most modal failure modes and works identically for everyone. Hidden information is a design choice, and the modal is usually the riskiest way to hide it.

Fit finders and quizzes that include everyone

Fit quizzes ask about height, weight, usual size, and preference through custom controls that are often unlabelled graphics. Every question needs a text label, every option needs to be selectable by keyboard and announced when chosen, and the recommendation at the end needs to be real text, not a badge image.

Let shoppers skip questions and still get guidance, and never require precise body measurements to proceed. A finder that cannot be completed does worse than no finder at all: it tells a group of shoppers the store's advice is not for them.

Test with returns data and real users

Your returns reasons already grade your size content. 'Ran small' clusters on a product with an image only chart are an accessibility finding wearing a logistics costume. Feed that data back into which pages get fixed first.

When you rebuild size tools, test the full path with a screen reader: find the chart, read a row, choose a size, and add to cart. That five minute walk catches the popup, table, and focus issues that page level scans routinely miss.

Related reading

If this topic is useful, these earlier guides go deeper on connected questions: Making Your Returns and Exchange Portal Accessible, Making Product Reviews and Star Ratings Accessible, and Accessible Store Locator Pages: Maps, Lists, and Directions.

Frequently asked questions

Why is an image of a size chart a problem?

Because a screen reader cannot read data out of a picture. The shopper gets no measurements at all on the page where measurements decide the purchase. Publishing the chart as a real marked up table makes the same information available to everyone.

What makes a size chart popup accessible?

Focus moves into the dialog and returns to the trigger on close, the content is keyboard reachable and readable, and the dialog is labelled. Better yet, an expandable on page section avoids most modal risks while giving every shopper the same information.

How should a fit finder handle its questions?

Every question labelled in text, every option keyboard selectable with the choice announced, the ability to skip questions, and a recommendation delivered as readable text. Custom graphic controls with no labels are the most common reason finders exclude shoppers.

How do I prioritise which size pages to fix?

Start where returns data and traffic meet: high volume products with size related returns and image only charts. Fixing those pages first reduces returns and barriers together, which makes the business case for the wider rebuild easy to show.