Search topics
Headings set as pictures of text in a brand font
A pottery studio exports its headings as pictures to show a script typeface its licence doesn't let it embed in a website: Level AA allows that, but no reader can restyle those headings, and on a dark theme they almost disappear.
<img src="/type/classes.png" alt="Classes"> The problem
People who read with their own fonts and colours can't apply them to the headings, and on a dark theme the headings almost disappear.
A pottery studio's website is built around its typeface: a warm, joined-up script, drawn by a type designer and licensed for the studio's signs, cards and printed price lists. The licence doesn't cover embedding the font in a website, so the designer exports each heading, "Classes", "The kiln", "Visit us", as a picture of the script in the studio's brown, with a clear background, and the developer puts each one in its heading with the words as alt text. The page looks exactly as designed, and a screen reader announces a level 2 heading, "Classes". Then a visitor who reads with their own fonts and colours opens the page. Their browser turns the page near-black, sets the paragraphs in their chosen font, larger and in a cream colour, and leaves the headings as they were: thin brown script on near-black, 2.11:1, almost gone. Text-only zoom enlarges the paragraphs and not the headings. Nobody can select a heading's words, or have a reading tool highlight them.
This page passes 1.4.5 at Level AA. 1.4.5 Images of Text asks for text instead of pictures of text only when the technology can achieve the same look, and W3C's Understanding page for it accepts pictures of text that show a font the author has no right to redistribute; serving a font to every visitor's browser is redistributing it. 1.4.9 Images of Text (No Exception), at Level AAA, removes that allowance. It accepts pictures of text only when they are pure decoration, or when a particular presentation of the text is essential to the information, as it is for a logo. A heading is neither: its words are information, and "Classes" means the same in any typeface. So each heading picture fails 1.4.9, however good its alt text is. The criterion exists for people who need text to look a particular way to read it, and the only text they can't change on this page is the headings.
The people affected set their fonts and colours once, for every site they read, through browser settings, a reading extension or a contrast theme. A page that passes AA is the page they expect to work, and the headings are what they navigate by.
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 People who read with their own colours, such as light text on near-black, see the page change while each heading stays brown lettering on a clear background, 2.11:1 against their dark page. A larger text size or text-only zoom leaves the headings at the size they were drawn.
- Limited language, cognitive and learning abilities People with dyslexia who switch every page to a font they find easier, or widen the spacing between letters and lines, still meet each heading in the studio's joined-up script, and can't select its words for a tool that reads them aloud.
axe and similar tools see an image with good alt text inside each heading, and pass it. Level AA allows these pictures, so an AA audit passes them too, and nobody sees the dark-theme page unless they test with one. This audit reports a heading whose only content is a wide picture with alt text, and not a logo, as an images-of-text lead for a person, under 1.4.5; whether the font's licence allows the picture at AA, and whether the site aims for AAA, is a decision the lead leaves to that person. A quick AI fix polishes the alt text, which was never the problem.
Try it
Turn on your own fonts and colours, and read the headings.
Turn on My fonts and colours. The paragraphs change to a plainer font, larger and light on dark. Do the headings change with them?
Broken Can you fix this?
Wheel and hand-building classes for beginners, every Saturday morning.
The studio is a five-minute walk from the station, open Thursday to Sunday.
The fix
Set every heading as real text in a web font licensed for the site, and keep pictures of words for the logo.
- 1Every heading, label and quote can be read as real text, from the start or through a switch at the top of the page.
- 2Choose a typeface the site can use as a web font, or a close match that can be.
- 3Keep pictures of words for the logo and for lettering that is itself the subject.
<h2> <img src="/type/classes.png" alt="Classes" width="168" height="56"></h2><p>Wheel and hand-building classes for beginners, every Saturday morning.</p>…Real text in a web font
<h2 class="lettered">Classes</h2><p>Wheel and hand-building classes for beginners, every Saturday morning.</p>…Why this fix: Keep words as text
The heading's words exist only as pixels. The alt text gives them to screen readers, but nobody can change their font, colour, size or spacing, and a dark theme leaves them brown on near-black.
The heading is text again, drawn in the same script by the browser. The font file comes either from the type designer, with a web licence added to the studio's print licence, or from a script with a similar character that is licensed for websites. The page looks as it did. A visitor's own font replaces the script, their colours recolour it, a contrast theme draws it in the theme's text colour, and text-only zoom enlarges it. The words can be selected, found in page and read aloud by a reading tool.
Both options meet 1.4.9. Real text in a web font is the one to use: it keeps the design, works for every visitor from the first page they open, and needs only a font file and a few lines of CSS. The switch meets the criterion while the headings stay pictures by default, so the people who need text meet the pictures first; keep it for lettering that can't become a font, such as one-off hand lettering, and even then consider setting the headings in a close web font instead.
The font's licence. Many type foundries sell a web licence beside the desktop one, often priced by page views, and many typefaces with a similar character come with a web licence, some at no cost. Check the licence while the design is being chosen, not after it is signed off: a typeface that can't be served to browsers can't be used for real text, and pictures of it fail 1.4.9.
The logo stays a picture. Text that is part of a logo or brand name is essential under 1.4.9, so the studio's wordmark can stay an image with alt text. Lettering whose exact form is the subject, such as a type specimen or a photo of a hand-painted sign, can stay a picture too.
Japanese and other large fonts. A full Japanese font is several megabytes. Use a font service that splits it by unicode-range, so a page loads only the parts that hold the characters it uses, or subset it to the characters in the headings. A subset made by hand misses any character an editor adds to a heading later, which then falls back to another font; a service that splits the whole font doesn't.
While the font loads. font-display: swap shows the heading in the fallback font at once and swaps the script in when it arrives. Choose a fallback close in width, or set size-adjust on a fallback @font-face, so the heading doesn't jump when the font changes.
SVG lettering. An inline SVG whose words are <text> elements is text, but it still needs the font to be served, and it doesn't reflow. SVG exported with its letters converted to outlines is a picture of text again, however sharp it looks. The design ideas below show other looks that real text can take.
Fixing this with an AI coding assistant? Get this guide as Markdown, or get every guide in your coding agent.
Design ideas
A heading can have character and stay text.
Three more looks for a display heading, all real text, and one that only looks like them. Try selecting the words in each.
In the design file
- Check that each typeface’s licence covers websites before the design is signed off, and write it beside the type styles.
- Keep every heading as live text in the design file, never outlined or flattened into a picture.
- Name a fallback font close in width for each display typeface, for while it loads.
- Keep pictures of words for the logo, and mark it as the logo.
Passes
Classes
Fired twice a week, glazes mixed in the studio.
Lettering with a gradient fill A warm gradient clipped to real letters. Its lightest end, #b5562c, is 4.85:1 on white, so every part of the word reads, and a reader’s own font and colours still replace it.The kiln
Fired twice a week, glazes mixed in the studio.
Letters filled with a photo The studio’s photo shows through heavy letters, under a brown tint that keeps its lightest part at 4.90:1 on white. The word is text: it can be selected, found and translated.Visit us
Five minutes from the station, open Thursday to Sunday.
Heading set vertically beside the text The heading runs down the side of its section, set with the writing direction rather than drawn turned. It is text, so it takes the reader’s font and grows with their text size.
Fails
Fired twice a week, glazes mixed in the studio.
Photo-filled letters exported as one pictureWCAG 1.4.9 It looks like the photo lettering above, but try to select it: the letters are pixels with alt text, so no reader’s font, colour or text size reaches them. Clip the photo to real text instead.Rule of thumb: Keep words as text
Verify the fix
5 checks, no mouse.
Test with: Forced colors, Zoom
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat whenever the design changes typeface or a template adds a heading.
Limits
This is a starting pattern, not a guarantee for every application. Paths, font names, colours and class names are placeholders, and the font licence that applies to your typeface is for you to check. 1.4.9 is Level AAA, and WCAG does not recommend requiring Level AAA as a general policy for a whole site; the AA failure for words drawn into a picture is in images of text instead of real HTML text. Whether a remaining picture is a logo or essential lettering is a judgement, so keep it in your design review. Test the complete journey with the settings your users rely on.
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.
References
- WCAG Understanding: images-of-text-no-exception (opens in a new tab)
- WCAG Understanding: images-of-text (opens in a new tab)
- WCAG Technique C22 (opens in a new tab)
- WCAG Technique C30 (opens in a new tab)
- developer.mozilla.org: @font-face (opens in a new tab)
- support.mozilla.org: change-fonts-and-colors-websites-use (opens in a new tab)
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.