Success Criterion 1.4.5 Images of Text Level AA

How to Meet this Success Criterion

Whenever possible, use HTML based text instead of text as part of a graphic or image. Use CSS to style your text.

If this cannot be achieved with CSS, ensure images of text are customizable, by providing a user control on your web page to set the font settings for all images of text before they are loaded.

For essential images of text where the font cannot be altered without losing its purpose, use a text alternative.

Please Note: Logotypes (text that is part of a logo or brand name) are considered essential and are excluded from this criterion.

Recommended Technique for SC 1.4.5 Images of Text

• Use HTML text instead of images of text
• Use em or percent to set the CSS font size {font-size:1.25em} or {font-size:120%}
• Use named font sizes such as {font-size:larger} or {font-size:medium}
• Use CSS to control spacing of letters in text {letter-spacing:2px;}
• Use CSS to style text in all uppercase {text-transform:uppercase;}
• Test page content without CSS - meaning of content remains the same
• Provide text alternative for essential images of text
• Provide user control to change font settings in images of text

HTML and Design Examples for SC 1.4.5 Images of Text

The HTML and Design examples covered below include a design example of a custom user control used to load images of text in different formats as well as essential image of text examples where the text in the image cannot be shown using HTML and CSS.

Example: Design Example of a User Control for images of text

The following Design Example is showing a User Control placed on top of a website which allows the user to choose font-size, background color and foreground color for images of text on that site. The site visitor can choose from a predefined set of options on how images of text will be displayed on this website.

Design 1: User Control to customize images of text

Design 2: User Control with font-size options expanded

Please Note: The WCAG success criterion 1.4.5 does not specify how many image text customization options you would need to comply with this rule.

Example: HTML alternative showing transcript of a document for an essential image of text

The HTML example below is showing the Declaration of Independence Draft which is an essential image of text. By providing a short description on the image alt attribute we let the screen reader user know that the image is followed by a HTML version of the document transcript. We also included a link to read the entire transcript on an external website.

Declaration of Independence Draft

Transcript of Declaration of Independence Draft

When in the Course of human Events it becomes necessary for one People to dissolve the Political Bands which have connected them with another, and to assume among the Powers of the Earth the separate & equal Station to which the Laws of Nature and of Nature's God entitle them, a decent Respect to the Opinions of Mankind requires that they should declare the causes which impel them to the separation... read full transcript

    
<img src="/images/1_4_5/declaration-of-independence-draft.jpg" 
alt="Declaration of Independence Draft Letter followed by the HTML transcript">

<h4 id="transcript" tabindex="-1">Transcript of Declaration of Independence Draft</h4>
<p>When in the Course of human Events it becomes necessary for one People to dissolve
the Political Bands which have connected them with another, and to assume among the Powers of
the Earth the separate & equal Station to which the Laws of Nature and of Nature’s God
entitle them, a decent Respect to the Opinions of Mankind requires that they should declare the
causes which impel them to the separation...
<a href="https://www.monticello.org/site/jefferson/transcript-declaration-independence-rough-draft" 
target="_blank" aria-labelledby="transcript">read full transcript</a></p> 

Please Note:
Using aria-describedby="transcript" on the <a> tag with text "read full transcript" and setting the tabindex="-1" on the <h4> with id="transcript" we can ensure that screen reader users will understand where the link would take them.

WCAG lists several techniques which would satisfy this rule - Technique G73, Technique G74, and Technique H45.

Example: image alt attribute for an essential image of text

An image depicting four blocks spelling the word toys. The short text alternative describes the image.

    
<img src="/images/1_4_5/toys-blocks.jpg" alt="four blocks spelling the word toys">

Example: image alt attribute for an essential image of text

An image depicting the neon sign of Abbey Road Studios. The short text alternative describes the image.

    
<img src="/images/1_4_5/abbey-road-studios.jpg" alt="Abbey Road Studios neon sign">

Some Common Failures for SC 1.4.5 Images of Text

• Using images of text for headings, navigation, etc. without text alternative
• Using images of text as a background image using CSS - no text alternative available:
  .image-of-text {background-image: url("image-of-text.jpg");}
• Missing text alternatives for images of text
• Missing user control to change font settings in images of text if you don’t have a text alternative
• Using HTML text and also doing the following: using empty spaces to control letter spacing in a word, all uppercase letters used in HTML text preventing user from changing the style, absolute positioning of text which prevents page content to render properly when CSS is disabled

Additional Resources for SC 1.4.5 Images of Text

• Related Topic - SC 1.1.1 Non-text Content
• CSS font-size Property
• Font Awesome Icons
• Google Fonts
• W3C Reference for SC 1.4.5 Images of Text (Level AA)