A common web accessibility barrier is the use of text inside images. People who are blind or low vision rely on assistive technology known as screen readers. It reads text content on a page to the user. Screen reader software cannot read text inside an image.

Take the following common example:

Bad example:

Bad example of an image with text embedded in it. It is also not legible.

Why this is bad:

Screen reader users:

People who are blind and low-vision rely on screen reader software to browse the web. Screen readers can only read real text on a page.  They cannot read text inside an image. Text inside an image should be avoided.  If there is text in an image the contents should be included in the alt text.  

A screen reader user would essentially be denied the opportunity to know the event exists. Since the text is embedded in the image:

  • They would not know the title of the event
  • The location
  • The date
  • That they need to register for it

In the example above it would be impossible to include all of that information inside the alt text of an image.

Mobile device users:

Text embedded inside images does not scale on mobile devices.  When viewed on a small screen it becomes too small to read.  Real text on a page naturally scales to be legible.

Sighted users:

Text inside an image tends to have low contrast on some part of the image.  That is a compliance problem.  It is also bad for all users. People prefer to be able to read legible text.

Compliance:

Using text inside an image tends to be a compliance problem for the reasons above. Duke websites are generally required to be compliant with Web Content Accessibility Guidelines (WCAG). Using text inside of images violates WCAG 1.4.5 Images of Text More often than not, the text inside an image also does not meet the required contrast ratio to meet compliance with WCAG 1.4.3 Contrast.