Does alternative text resolve an “Images of Text” failure?

Question

I added alternative text that is identical to an image of text's content. Does this solve the accessibility issue "Images of Text"?

Answer

Oftentimes we have clients ask if an “images of text” failure can be remediated by ensuring that the text alternative (i.e. alt tag) for the image matches the image’s text content. This idea does have good intentions, especially when considering users of specific assistive technologies such as screen readers.

However, there are other things to consider when addressing images of text, such as whether the text content is present elsewhere on the page in the form of HTML text. Some users may not be able to read an image of text, including but not limited to users who are visually impaired, have certain cognitive disabilities, have dyslexia, and/or are color blind.

In many cases, people with the aforementioned disabilities rely on software to adjust font type, size, color, and/or letter spacing to help them read the content on a page. Since an image’s text is unaffected by these software types, it may not be possible for the users to read the text content being displayed via an image. When images of text can't be adjusted, it may prevent them from obtaining the information that all users should have the opportunity to access.

Summary:

In order for a site to be compliant with the WCAG Success Criterion 1.4.5 “Images of Text,” the text within the image(s) in question needs to be present on the page in the form of HTML text. Note: There are exceptions to this rule, such as the use of a logo that contains text.

Remediation Recommendations:

To resolve the issues associated with having images of text present on your site, we recommend implementing one or both of the following options. The first option is to ensure that the text within the image is present elsewhere on the page in the form of HTML text. The other option is to overlay the text via HTML text and CSS onto the image itself, resulting in the text being easier to adjust but without losing the visual design of the original image.

The Web Accessibility Extension for Chrome can help you find, understand, and correct this and other common accessibility issues. We also offer comprehensive, manual web accessibility audits; reach out for more details!

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.