Reviewed October 28, 2026

Accessible Size Charts and Fit Tables for Storefronts

Few pages carry more buying weight than a size chart, and few are built worse. Charts shipped as flat images hide every measurement from screen readers and pinch zoom users alike. Tables pasted from spreadsheets often lose their headers, so a column of numbers means nothing out of context. An accessible size chart is not a special feature. It is a real table, with labeled headers, reachable by keyboard, readable on a phone, and written in the units your shoppers actually use.

Replace chart images with real tables

If your size chart is a picture of a table, rebuild it as an HTML table. Screen readers can then announce each row and column properly, and the text stays sharp at any zoom level. Keep the image version, if you love it, only as decoration alongside the real table, never as the only source. Mark up the first row as header cells and the first column, usually the size label, as row headers. That structure is what lets a screen reader say bust, 96 centimeters instead of reading a stream of unlabeled numbers.

Make the chart reachable and operable by keyboard

Many stores tuck the chart inside a modal or accordion, which is fine if the pattern is accessible. The trigger must be a real button, focus must move into the dialog when it opens, and escape must close it and return focus to the button. If the chart sits in a tabbed section, the tabs need arrow key support and visible focus states. Test the whole path with a keyboard only: can you open the chart, read it, and close it without a mouse? If any step fails, the chart is effectively missing for keyboard shoppers.

Write measurements people can use without a calculator

Offer both inches and centimeters, either as paired columns or a toggle that updates the whole table and remembers the choice. Round to sensible precision; half inches and whole centimeters are easier to compare than long decimals. Add a short how to measure note with the body landmarks named in words, not only shown in a diagram, and describe the diagram in alt text if one is included. State clearly whether measurements are body measurements or garment measurements, because mixing the two in one table is the most common source of wrong size orders and returns.

Check the chart on a phone and at high zoom

Wide tables break small screens. Let the table scroll horizontally inside its own container rather than forcing the whole page sideways, and keep the size column visible while scrolling if your platform allows it. At 200 and 400 percent zoom, the chart should still be readable without two dimensional scrolling of the page itself. Check color contrast for header rows, which often use light text on brand colors that fail contrast ratios. Finally, put the size chart link near the size selector on every product that uses it, with the product name in the link text, so shoppers do not have to hunt for it.

Frequently asked questions

Is a size chart image with alt text good enough?

Alt text can describe a chart in summary, but a long measurement table compressed into alt text is painful to use and easy to get wrong. Screen reader users cannot navigate cell by cell through alt text. A real HTML table with proper headers lets them move through rows and columns and hear each value in context. Use the image, if you keep it, as a visual extra next to the accessible table, not instead of it.

Should size charts open in a modal or on the page?

Both can work if built well. A modal keeps the product page short, but it must manage focus correctly: focus moves in on open, stays inside while open, and returns to the trigger on close. An on page expandable section is simpler to make accessible and easier to test. Whichever you choose, the chart content itself should be a real table, and the trigger should be a button labeled with the product context, such as size chart for the everyday tee.

Do I need both inches and centimeters in one chart?

If you sell across regions, yes, shoppers should not have to convert units while deciding. Paired columns work for narrow charts; for wide ones, a units toggle that switches the whole table is cleaner. Make sure the toggle updates the values themselves, not just the heading label, and that screen readers announce the change. Showing both also reduces returns, because unit confusion is a quiet but common cause of wrong size orders.

How do I describe a how to measure diagram accessibly?

Name each measurement in text next to the table: for example, chest means around the fullest part, keeping the tape level under the arms. If a diagram is included, give it alt text that lists the measurement points in order rather than saying diagram of measurements. Better still, make the text instructions complete on their own, so the diagram becomes a helpful extra instead of the only explanation. This helps sighted shoppers on phones too, where diagrams are often too small to read.