Don’t: bake the heading into an image
<img src="sale-banner.png" alt="Summer sale, save 40 percent">Prerequisite: Write alt text for the image’s purpose.
The principle
Images of text principle
When the same visual presentation can be built with HTML and CSS, use real text—not pixels that look like text.
Compare
Alt text does not repair the visual text.
A useful alt may expose the words to a screen reader, but the pixels still cannot reflow or adapt for someone who needs larger text, different spacing, or custom colors.
Do: layer real text over decoration
<div class="sale-banner"><h2>Summer sale</h2><p>Save 40%</p></div>Exceptions
Know what “essential” means.
Preference for text does not prohibit every graphic containing words. It asks whether the particular presentation of those words is necessary.
Logotypes
Text that is part of a logo or brand name is considered essential. Give the logo an alternative that states the organization or product name.
User-customizable presentation
An image of text can qualify when people can customize it to their requirements. Ordinary browser zoom alone does not make a fixed image customizable.
Decision check
Ask before exporting.
- Does the graphic contain words people must read?
- Can HTML and CSS create the same presentation?
- Will the text remain readable at 200% zoom and with changed spacing?
- If an image is essential, does its alternative include the meaningful wording?
- If the words are also present next to the image, can the image use an empty alternative to avoid repetition?