Your Size Chart Is Probably an Image. Here's Why That Blocks Customers -- and How to Fix It.

If you sell clothing, shoes, or anything with a fit online, your size chart is one of the most important things on the product page. It is the difference between a confident purchase and an abandoned cart — or a return. And there is a very good chance that, right now, a meaningful slice of your customers cannot read it at all.

Not because they do not want to. Because the way most stores publish a size chart makes it invisible to the tools that blind, low-vision, and keyboard-only shoppers use to browse the web. If your size guide is a screenshot, or it lives inside a “View size guide” popup that only works with a mouse, you have quietly built a wall around the one piece of information a shopper needs before they buy.

The good news: this is one of the most fixable accessibility problems there is. You almost certainly do not need a developer, and in most cases you do not need to spend a cent. Let me show you what is going wrong and how to sort it out.

Why size charts fail so often

Size charts have a specific, recurring set of problems. Once you know them, you will spot them everywhere.

Problem 1: The chart is an image of a table. This is the big one. Someone built a nice size chart in a spreadsheet or a design tool, exported it as a PNG or JPG, and dropped that image onto the product page. It looks great. But to a screen reader — the software a blind person uses to read a web page aloud — an image is just a picture. Unless you add a text description, the screen reader announces something like “image” or, worse, a filename like “size-chart-final-v3.png.” All those carefully arranged numbers — chest, waist, hips, sleeve length — simply do not exist as far as assistive technology is concerned.

You cannot fit an entire size chart into alt text either. Alt text is meant to be a short description, not a data dump of thirty measurements. So even a well-intentioned “size chart for our t-shirts” alt attribute leaves the shopper knowing a chart is there but with no way to read the actual numbers.

Problem 2: The “View size guide” popup traps or ignores keyboard users. Many stores tuck the size chart behind a link or button that opens a popup, also called a modal. That is a reasonable design choice — until you try to use it without a mouse. A lot of these popups can only be opened by clicking. When they do open, keyboard focus often stays stuck on the page behind them, so a keyboard user tabs around invisibly underneath the popup they cannot see. And there is frequently no way to close the thing except clicking a tiny X. For someone navigating by keyboard — which includes many people with motor disabilities and most screen reader users — the size guide becomes a dead end.

Problem 3: Size and fit are communicated with color or shape alone. Some fit guides mark a recommended size with a colored highlight, or show a “fit scale” from tight to loose using only a colored bar with no labels. A shopper who is colorblind, or who cannot see the graphic at all, has no way to know which size is being recommended.

Problem 4: The chart mixes units and abbreviations with no explanation. “B”, “W”, “H” across the top of a chart mean chest, waist, and hips to you. To a screen reader user hearing the table read aloud one cell at a time, “B, 38, 40, 42” is a puzzle with no picture on the box.

Why this matters beyond being polite

There is a customer-experience reason and a legal reason, and they point in the same direction.

The customer reason is straightforward: people who cannot read your size chart do not guess — they leave, or they buy the wrong size and return it. Returns are expensive, and a shopper who has a frustrating experience rarely comes back. Around one in six people worldwide lives with a significant disability, and vision and motor disabilities are exactly the ones a broken size chart shuts out. That is not a rounding error in your traffic.

The legal reason has sharpened considerably. In the United States, retail websites are regularly targeted by lawsuits and demand letters under the Americans with Disabilities Act, and product pages that block a purchase are a common flashpoint. In Europe, the European Accessibility Act came into force in June 2025 and applies to e-commerce sold to EU customers, with real enforcement and penalties behind it. A size chart is not a nice-to-have footnote in the eyes of these rules — it is part of the information a customer needs to complete a purchase, so it is squarely in scope. “It is just a picture of a chart” is not a defense.

How to check your own size chart in five minutes

You do not need special software to catch the most common failures. Try these, right now, on one of your product pages.

The copy-paste test. Open a product page and find your size chart. Try to select the numbers with your mouse, the way you would highlight a sentence to copy it. If you can drag-select the measurements and copy them as text, good — it is a real table. If nothing highlights and you cannot select any of it, your size chart is an image, and screen readers cannot read it.

The keyboard test. Put your mouse away. Press the Tab key repeatedly to move through the page. Can you reach the “View size guide” link or button and open it by pressing Enter or the Space bar? Once it is open, can you read through the chart and then close the popup using only your keyboard, ideally with the Escape key? If you get stuck at any point — cannot open it, cannot get into it, cannot get out — keyboard users are stuck there too.

The zoom test. Use your browser to zoom in to 200 percent or more (on most browsers, hold Ctrl or Cmd and press the plus key). If your size chart is an image, the numbers will turn into a blurry mess as they scale. A real text table stays crisp and reflows to fit. Plenty of low-vision shoppers browse zoomed in all day, and a pixelated chart is useless to them.

If your chart fails any of these, you are in very common company — and the fixes below are all within reach.

How to fix it — without a developer

Fix 1: Turn the image into a real, text-based table. This is the single most important change. Instead of uploading a screenshot, rebuild the chart as an actual table using your platform’s content editor. Shopify, WooCommerce, Squarespace, Wix, and every major website builder have a table tool or a table block built into the page editor. When you type your measurements into a real table, the numbers become selectable text that screen readers can read row by row, that stays sharp when zoomed, and that even helps your SEO because search engines can read it too.

If your platform’s basic editor makes tables painful, most e-commerce platforms have dedicated size-chart apps or extensions that generate proper HTML tables for you. Choose one that outputs a real table rather than an image, and you get accessibility as a side effect.

Fix 2: Give the table clear headers and labels. A table is far more usable when the top row and the first column are marked as headers — for example, “Size” running down the left, and “Chest,” “Waist,” “Hip” across the top, spelled out rather than abbreviated. Most editors let you designate a header row and header column with a single toggle. This is what lets a screen reader announce “Medium, Chest, 40 inches” instead of reading a wall of disconnected numbers. Spell out units too: write “40 in” or “102 cm,” not a bare “40.” If you want the deeper detail on getting this right, our complete guide to accessible tables walks through headers, captions, and layout step by step.

Fix 3: Make the “View size guide” link a real button and keep the popup keyboard-friendly. If your size chart opens in a popup, make sure the trigger is an actual link or button (not just a styled image or a bare piece of text), so keyboard users can reach and activate it. When it opens, focus should move into the popup; while it is open, tabbing should stay inside it; and it should close with a clearly labeled close button and the Escape key, returning focus to where the shopper was. If that sounds fiddly, the reassuring news is that most reputable size-chart apps and modern themes handle this correctly out of the box — the trouble usually comes from older custom popups. Our guide to accessible modals and popups covers exactly what a well-behaved popup should do.

Fix 4: Do not rely on color alone for fit or recommendations. If you highlight a recommended size or show a tight-to-loose fit scale, back the color up with text or a clear label. “Recommended: Medium” as words beats a green cell that only sighted users can interpret. The same principle applies to the size and color swatches on the product itself; our article on accessible product variant swatches explains how to label options so no one has to guess.

Fix 5: Offer the measurements in more than one place if you can. A size chart is most helpful next to the actual size selector. Even a short line like “Runs small — consider sizing up” in plain text, right by the add-to-cart button, helps everyone, including people who never open the full chart. Plain-text guidance is the most accessible format there is, because it works in every browser, every screen reader, and at every zoom level.

A simple standard to hold yourself to

You do not need to memorize accessibility guidelines to get this right. Hold your size chart to one plain-English standard: could a person who cannot see the screen, using only their keyboard, find your size guide, read every measurement in it, and close it again? If the answer is yes, you have solved the problem that trips up the vast majority of clothing stores online.

Rebuilding a screenshot as a real table takes most shop owners about ten minutes per chart. It is one of the highest-return accessibility fixes you can make: it directly removes a barrier between a motivated shopper and a purchase, it reduces returns from people who bought the wrong size because they were guessing, and it moves you meaningfully toward ADA and European Accessibility Act compliance. Few changes to a product page pay off that quickly.

Start with your best-selling product today. Run the copy-paste test. If the numbers will not highlight, you have found your first fix — and now you know exactly how to make it.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.