• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Logo for DigitalA11Y

Digital A11Y

Your Accessibility Partner

  • About
    • Bio
      • Conference Speaking
      • Videos
      • mentions
  • Articles
  • Resources
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / Web Accessibility / WCAG / Understanding SC 1.4.5 Image of text

Understanding SC 1.4.5 Image of text

Last Modified: May 29, 2018 by sathish kumar 1 Comment

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

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

More Accessibility Articles

Filed Under: WCAG Tagged With: A11Y, accessibility, Image, text, WCAG

Reader Interactions

Trackbacks

  1. Understanding SC 1.1.1 Non-text Content • Digital A11Y says:
    December 26, 2019 at 6:14 am

    […] Guideline 1.4.5 – Images of Text […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • WCAG 2.1 Checklist
  • A Sneak peek into WCAG 3.0 First Public Draft
  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name

Recent Comments

  • Donal Rice on Digital Accessibility Companies Roundup
  • Rajath on A Sneak peek into WCAG 3.0 First Public Draft
  • Raghavendra Satish Peri on Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility
  • Raghavendra Satish Peri on Digital Accessibility Companies Roundup
  • Andrew Somers on Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y