Reviewed November 2, 2026

Size Guides a Screen Reader Can Use: Real Tables, Not Pictures of Tables

Publish the size guide as an HTML table with a caption, column headers marked up as th elements with scope, and measurements in both inches and centimeters where your customers need them. An image of a table gives a screen reader user nothing, gives a phone user a pinch zoom exercise, and gives search engines nothing to index. The HTML version is an afternoon of work that removes a recurring reason for size related returns and support tickets.

Somewhere in the store's files there is a file called size-guide-final-v3.jpg, and it is doing quiet damage every day. It was exported from a spreadsheet by a designer in 2023, uploaded once, and linked from every product page. It is also, for a meaningful slice of customers, a locked door: screen readers cannot read it, and on a phone it renders at a size that invites guessing, which is to say, returns.

Apparel lives and dies on fit information. Making that information a picture was never a decision anyone remembers making, which is exactly how it survives.

What a proper table needs to be accessible

Use real table markup, because assistive technology navigates tables cell by cell with header announcements. The table gets a caption that says what it is: Women's size guide, measurements in inches. The first row is column headers, size, bust, waist, hip, each a th with scope set to col. The size label at the start of each row is a th with scope set to row, so a screen reader user landing mid table hears waist, size medium, 28 to 30, as a complete fact.

Do not merge cells to make it prettier, and do not split men's and women's ranges into one image style grid with diagonal headers. Two clean tables beat one clever one. Add the garment note that actually prevents returns, whether the measurement is body or garment, and whether the fit runs small, in text under the table where everyone can reach it.

The phone and search dividends

An HTML table reflows and scales with text settings; a JPG does not. A customer with low vision who has enlarged system text gets a size guide that obeys the setting only if it is real text. The same text is indexable, so the page can rank for the exact fit questions shoppers type, and your support team can copy a row into a chat answer instead of screenshotting a picture and hoping.

Keep units honest. If you sell into markets that measure in centimeters, publish both columns rather than a conversion footnote. And state where to measure on the body in words; a diagram helps sighted users, but the text version, waist at the narrowest point above the navel, is what makes the table usable standing alone.

Rollout without a redesign project

You do not need to rebuild the theme. Put the accessible table on the size guide page and in a collapsible section on product pages, below the image version if legal or brand insists on keeping it, though the right end state is retiring the image. Keep the two in sync or delete one: a stale JPG and a current table disagreeing on a medium's waist measurement is worse than either alone.

Then check the interaction around it. The size guide link or button needs a real accessible name, Size guide, not a ruler icon with no label, and the modal it opens must trap focus and close with the Escape key, or the perfect table is sitting inside an inaccessible container.

Frequently asked questions

Can I keep the size guide image if I add alt text?

Alt text long enough to carry a full table is unusable in practice; nobody can navigate a table read as one paragraph. Publish the table as HTML and keep an image only for genuine extras like a measuring diagram, with a short alt description and the full instructions in text.

Which WCAG rules does an image size guide break?

Primarily 1.4.5 Images of Text, since the information is text presented as a picture, and 1.1.1 Non-text Content if the alt text cannot convey the table. On phones it also collides with reflow and text resizing expectations under 1.4.4 and 1.4.10.

Should size tables include both inches and centimeters?

If you ship internationally, yes, as separate columns. Conversion footnotes force every customer to do arithmetic at the moment of decision, and mistakes land in your returns queue. Label each column's unit in its header cell.

How do I make a size guide modal accessible?

Use a real dialog pattern: focus moves into the modal on open, stays trapped while it is open, Escape closes it, and focus returns to the button that opened it. Label the dialog so a screen reader announces Size guide, dialog, on entry.