Images of text: accessibility for web writers, part 7

Avoid using images of text on the web because some people will find them hard, if not impossible, to read. For instance, people with reading problems such as dyslexia may struggle to read certain fonts, line spacing or text alignment. If these are ‘hard-coded’ into an image, they cannot reformat the text into a more readable style.

People with low vision who use screen magnification software to enlarge content so they can see it, may also find it difficult to read an image of text.  The text can become too pixelated to be legible when the image is magnified. The smaller the text, the more pixelated it will become.

Text in images pixelates when enlarged

Use style sheets to style text

The best approach is to ensure all your text is styled using cascading style sheets (CSS).  If you want a particular font, size, colour or alignment, talk to your web designer or developer to see if they can create a style for you to use.

You should always use styled text rather than images of text for:

• Headings and sub-headings
• Captions for photos and graphics
• Pull quotes or other feature text
• Text in the body of your page
• Text or data in tables

Sometimes an image of text is acceptable

You can use an image of text for:

• Your organisation’s logo
• Presenting a font when the content on the page is about a particular font (for instance, in a font library)
• Presenting information in its original format when this is essential to the content (for instance, an image of an historical document).

The Web Content Accessibility Guidelines 2.0 describe a few other scenarios where developers can use images of text.

Web Content Accessibility Guidelines references

• Images of text: understanding success criterion 1.4.5
• Images of text (no exception): understanding success criterion 1.4.9

Earlier articles in this series

• Introduction: accessibility for web writers, part 1
• Text alternatives for images: accessibility for web writers, part 2
• Info and relationships: accessibility for web writers, part 3
• Sensory characteristics: accessibility for web writers, part 4
• Colour: accessibility for web writers, part 5
• Contrast: accessibility for web writers, part 6

You can subscribe to any comments to this entry via RSS 2.0. Both comments and pings are currently closed.