Understanding SC 1.4.5 Image of text

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text
except for the following: (Level AA)

• Customizable: The image of text can be
  visually customized
  to the user’s requirements;
• Essential: A particular presentation of text is
  essential
  to the information being conveyed.

Note: Logotypes (text that is part of a logo or brand name) are considered essential.

This success criterion encourages authors to use text representations wherever possible where they have employed technologies to achieve a visual representation of the same text. For example, a blog post in an organization’s site quotes the CEO from his/her recent address. In order to highlight the quotation, the quotation has been designed with a font that is otherwise unavailable and so the quotation is a JPG or a Bitmap image designed using an external application.

What’s wrong in that?

Well, the following problems would arise for the following user groups:

• People with low vision who may have reading problems because of the font family, size, color and so on. They can’t change the font, resize the text or customize the image of text
• People with visual tracking problems who can’t read the image of text because of spacing and alignment and they can’t customize these things
• People with cognitive disabilities that affect reading.

Must we avoid image of text altogether?

No, WCAG discourages but not dismisses the idea of image of texts. There are some exceptions to consider here:

• Graphs, diagrams and screenshots which visually convey more than the text
• Texts that are essential in pictures like logos and brand images
• Texts that are designed with a specific font family which cannot be reproduced in any other way except for image and/or the author has no rights to distribute the font at all
• Image of texts which have controls to customize font, size, alignment and spacing.

Points to ponder:

• Use CSS styled headings instead of Bitmap images
• Provide site-wide controls to customize the images of texts when there are dynamically generated images of texts
• Use CSS to specify spacing, alignment, color and the font family of any UI elements, their texts and icons, quotations etc
• Use keyboard generated symbols wherever possible instead of making them as images.

Let there be beautiful visual presentations; let there be texts and let there be customizations too for convenient reading and experience!

Leave your comments and questions as food for our thoughts!

References

Understanding Success Criterion 1.4.5