<h1>
<small>Razorfish Accessibility</small>
<div>Images of Text</div>
</h1>

<style>
.document-footer {display:none;}
</style>

Per [WCAG 2.0 1.4.5](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-text-presentation):

> **1.4.5 Images 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.

Simply put:

- if an image contains text, that text **must** be presented using live web text and technologies.
- text must be user customizable and separate from any background image, such that a user can customize its size and color independently

Examples include:

- Banner ads with text
- Hero images with text

**Note:** exemptions may be granted for static image banners that are published on platforms that do not support HTML banners, and where non-participation on these publishing platforms would present a competetive disadvantage for a client.

## Rationale

While alt text helps screen reader users who mostly have very limited to no vision, the vast majority of users with vision impairments have a wide range of partial vision and do not typically rely on screen readers. Most users with partial/low vision use a variety of tools, like screen magnifiers, custom stylesheets or filters that assist with their specific abilities.

At the heart of this requirement is ensuring that users can customize text, on par with other web content. Images of text do not allow low-vision users to customize text effectively and independent of its background, and without loss of resolution.

## Exemptions

There are two circumstances that would exempt images from complying with WCAG 2.0, SC 1.4.5:

**Customizable** - if a banner ad is a raster image, the user is not able to customize the text. Conversely, if a banner ad is available as HTML, the text would be inherently customizable via custom user stylesheets and other web browser tools that enable the user to control the text size, text color, disable a background image that may be distracting, etc.

**Essential** - if the banner ad design is essential to a person's ability to recognize a critical aspect of the design related to branding, and it cannot be reasonably created using web technologies, then it can be created as a raster image. An example would be a logo or some other visual branding that is not easily replicated using HTML.

Some examples:
| USN&WR Badge | JD Power Badge | Citi Logo |
| --------------------------------------------------:| --------------------------------------- | ------------------------------------ |
| <img src="https://i.imgur.com/gCSOfyK.png" alt="US News and World Report - Best Hospitals Rankings" /> | <img src="https://i.imgur.com/tnI9nME.png" alt="JD Power and Associates - Customer Satisfaction, Since 1968" /> | <img src="https://i.imgur.com/t9QuTOx.png" alt="Citi" /> |

In the case of an image with an "essential presentation", it will suffice to provide that logo or branded image with alternative text that communicates all rasterized text within the image. Additionally, the USN&WR and JD Power badges shown *should* be accompanied by HTML text somewhere in the page that replicates the text conveyed within the image. If there is accompanying HTML text that communicates the copy within the image, then the image alt text can be empty (`alt=""`), as to prevent a redundant and repetetive experience for screen reader users, which will read both the alt text and the HTML description.

<style>
table, tr, td, th {
border-width: 0 !important;
text-align: center;
width: 33%;
}
</style>