Search topics
Images of text instead of real HTML text
A shop draws its size chart and shipping cut-off into a product image: the alt text is right, but on a phone the lettering shrinks with the picture, and nobody can enlarge, restyle or translate it.
<img src="linen-shirt-details.png" alt="Size guide in cm. S: chest 96…"> The problem
Shoppers can't enlarge, restyle or translate a size chart drawn into an image, and on a phone it shrinks too small to read.
A clothing shop sells a linen shirt. Under the product photos, one image holds the size guide (chest, length and sleeve in centimetres for S, M and L) and a line in red: "Order by 15:00 and we ship the same day." A designer laid it out at 640 pixels wide, with 16-pixel lettering, and on a laptop it reads well. On a phone, the shop's usual img { max-width: 100%; } shrinks the image to the width of the screen, about 330 pixels, and the lettering with it, to about 8 pixels. To find the chest measurement for M, a shopper has to pinch, zoom and pan across a blurred table. Turning on the phone's larger text setting enlarges the product name and price, but not the chart. In dark mode the page turns dark and the chart stays a bright panel. Find in page can't find "M", and a translated page leaves the chart in English.
The chart and the notice exist only as pixels. The alt text repeats every figure, so a screen reader reads it and 1.1.1 Non-text Content is met, but 1.4.5 Images of Text asks for something else: when the technology can show the words as text, they must be text. An HTML table and a paragraph can show this chart and this notice, with any colours, borders and fonts the design needs. The image is not a logo, and the words and figures are the whole picture, not labels in a photo or diagram, so no exception applies. Zooming the whole page on a laptop does enlarge the image, which is why 1.4.4 Resize Text can still pass. The failure is that nothing else the reader changes reaches the words.
Most shoppers browse on phones, where the chart shrinks for everyone, so this barrier also costs sales: a customer who can't read their size orders the wrong one or leaves. Shoppers who read the shop through a browser translator can't read the chart at all.
2 of 10 groups affected
- No vision (not affected)
- Low vision (affected)
- Colour vision (not affected)
- No hearing (not affected)
- Hard of hearing (not affected)
- No speech (not affected)
- Motor (not affected)
- Reach, strength (not affected)
- Cognitive (affected)
- Seizures (not affected)
- Limited vision On a phone the chart's lettering shrinks with the picture, below what many people with low vision can read, and pinch-zooming only blurs it while they pan across the table. A larger text setting, dark mode or their own colours leave the chart as it was.
- Limited language, cognitive and learning abilities People with dyslexia who switch to an easier font or wider spacing, or use a tool that reads text aloud and highlights it, get none of that on the chart. They can't select or copy the figures either.
Automated checks look for a missing alt, and this image has a thorough one, so axe and similar tools pass the page. They can't read pixels, so they can't tell a picture of a table from a photo. Optical character recognition can find words in an image, but it is slow, so it usually runs on a sample of large images only, and an English-only reader finds nothing in Japanese lettering. This audit sends large images to OCR when image review is on. Without OCR, it treats an image whose alt text reads like a table or notice (long, with several numbers) as a lead for a person to check, and does the same for a heading, menu link or button whose only content is a wide image. A quick AI fix tends to polish the alt text, which was never the problem.
Try it
Narrow the screen to phone width and find your size.
Drag the Screen width slider to 320px. Can you still read the chest measurement for M, and when your order ships?
Broken Can you fix this?
Linen shirt
¥8,800
A recreated demo. The broken version is intentionally inaccessible.
The fix
Move the chart and the notice out of the image into an HTML table and a paragraph, styled with CSS.
- 1Tables, prices, dates and notices are HTML text, never lettering in an image.
- 2Give them their look with CSS and web fonts, sized in rem or em.
- 3Keep images for photos, diagrams and logos, with words only as short labels.
<img src="/img/linen-shirt-details.png" width="640" height="400" alt="Size guide in cm. S: chest 96, length 68, sleeve 20. M: chest 102, length 70, sleeve 21. L: chest 108, length 72, sleeve 22. Order by 15:00 and we ship the same day."><section class="size-guide"><table> <caption>Size guide (cm)</caption> <thead> <tr><th scope="col">Size</th><th scope="col">Chest</th><th scope="col">Length</th><th scope="col">Sleeve</th></tr> </thead> <tbody> <tr><th scope="row">S</th><td>96</td><td>68</td><td>20</td></tr> <tr><th scope="row">M</th><td>102</td><td>70</td><td>21</td></tr> <tr><th scope="row">L</th><td>108</td><td>72</td><td>22</td></tr> </tbody></table><p class="ship">Order by 15:00 and we ship the same day.</p></section>Why this fix: Keep words as text
The figures exist only as pixels. The alt text gives screen readers the same words, but the picture people see shrinks with the screen and can't be enlarged, recoloured, respaced, selected or translated.
The panel, the bold title, the shaded header row, the rules between rows and the red line all come from CSS, so the page looks as the image did at full width. The difference is that the figures are now text. On a phone the four columns fit at full size, the phone's larger text setting enlarges them, dark mode and forced colors recolour them, and find in page and translation work on them. The image and its long alt text are gone, because the table says it all, and screen readers can now read the chart cell by cell with its headers instead of as one long sentence.
Some words in images are allowed, because the exceptions cover pictures in which the words are not the point, or in which their look is essential.
- Logos and brand names: a logotype counts as essential, so the shop's logo can stay an image with alt text.
- Photos and diagrams: a drawing of the shirt with arrows labelled A, B and C can stay an image, as long as the measurements themselves are in the table. A shop sign in a street photo is part of the photo.
- Type specimens: a page about a typeface may show it as an image, because that presentation is what the page is about.
Keeping the design. The usual reason for a picture is the look. CSS covers almost all of it: web fonts, colours, borders, rounded panels, text-shadow, and writing-mode: vertical-rl for vertical Japanese. A full Japanese font is several megabytes, so use a font service that splits it by unicode-range, or subset it to the characters you use, with font-display: swap and a fallback close in size.
Wide tables. Four columns fit on a 320-pixel screen. A table with many more columns can scroll sideways inside its own container (overflow-x: auto on a wrapper that can take focus and has a name), so the text stays full size. Shrinking the table to fit brings back the problem the image had.
A switch to plain text. A page can keep pictures of text if a control near the top swaps them all for real text (W3C technique C30). That passes 1.4.5 through its "Customizable" exception, but until someone finds and presses the switch, the page is the broken page, and the technique itself asks for plain text as the default where possible. Aim for real text from the start.
SVG. An inline SVG whose words are <text> elements is text: it can be read, selected and translated. It scales with the drawing rather than the text size, though, and never wraps, so keep it for short labels in a diagram. SVG exported with its text converted to outlines is an image of text again.
Shop platforms and editors. Product descriptions are often made in a design tool and uploaded as images, because the description field seems to allow nothing else. Most platforms accept a table and paragraphs in that field. Give editors a size-guide template to fill in, so each new product does not bring the image back.
Fixing this with an AI coding assistant? Get this guide as Markdown
Verify the fix
5 checks, no mouse.
Test with: Zoom, Forced colors
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat whenever a product template or the description editor changes.
Limits
This is a starting pattern, not a guarantee for every application. Paths, colours and class names in the snippets are placeholders. Whether a remaining image counts as a logo, or as a photo or diagram whose words are only labels, is a judgement, so keep it in your design and publishing review. Test the complete journey with your real products on real phones.
This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.
Keep this fixed as your code changes.
Turn guides like this into rules your coding agents and CI follow, then have the result retested with a keyboard and screen readers.