Web accessibility tutorials Guidance on how to create websites that meet WCAG
Jump to the navigation

Images of Text

Status: This is an in-progress, unapproved draft.

Images of text display text that’s intended to be read. The strongest design technique is to use actual text – styled with CSS – rather than image-based text presentation.

Actual text is much more flexible than images: It can be resized without losing clarity, and background and text colors can be modified to suit users’ reading preferences. Images are more likely to distort and pixelate when resized. In those uncommon situations where images of text must be used, the text alternative must contain the same text presented in the image.

Image of styled text with decorative effect

This slogan image contains text with decorative effects that used to be impossible to be realized consistently across browsers by using CSS styling only. The text alternative is the same as that presented in the image: “Your access to the city”. The decorative effects (stylized text and shadow) should not be described.

Example

City Lights: your access to the city.

Code snippet:
<img src="access-city.png" alt="Your access to the city.">

Alternative approach

The visual effects in the above image can be produced using CSS3 and an embedded font. Authors and developers that need to support older browsers may find the image example useful, if a less styled fallback text isn’t an option.

Example
Your access to the city
Code snippet:

HTML:

<div class="tagline"><span>Your access to the city</span></div>

CSS:

.background {
	background-color: #FFF;
	padding: 2em;
}
.tagline {
	font-family: 'Harabara Hand', cursive;
	text-transform: lowercase;
	color: #226C8E;
	font-size: 1.5em;
	letter-spacing: -1px;
	padding-left: 1em;
	background-color: #DDD9D6;
	box-shadow: 0 2px  4px rgba(0,0,0,.5);
}
.tagline span {
	display: inline-block;
	transform: rotate(-10deg);
}

Note 1: The code snippet doesn’t show any vendor prefixes. These should be added to increase compatibility with older versions of browsers.

Note 2: The specific @font-face rule was left out intentionally. It’s not important for the example.

The following image is the logo for the Web Accessibility Initiative. It’s not part of a link, so the text alternative is “Web Accessibility Initiative”. There’s no need to mention that it is a logo.

Example

Web Accessibility Initiative

Code snippet:
<img src="wai.png" alt="Web Accessibility initiative">

Note 1: Images used as logos are exempt from some of the accessibility guidance that applies to other images of text. For example, there are no minimum color contrast and text size requirements.

Note 2: If this logo were linked then it would become a functional image. See “Functional Images”: “Image used alone as a linked logo”.

Image of a mathematical expression

This math expression shows how to signify that a number is recurring. The alt text is “0.3333 recurring. (The recurrence is indicated by a line over the ‘3’ in the fourth decimal place)”. In this instance the way that the recurrence is shown is important, so it forms part of the text alternative. This isn’t the case with all math expressions.

Example

0.3333 recurring. (The recurrence is indicated by a line over the ‘3’ in the fourth decimal place)

Code snippet:
<img
	src="0dot3333recurring.png"
	alt="0.3333 recurring. (The recurrence is indicated by a line over the ‘3’ in the fourth decimal place)">

MathML

Images of math expressions should only be used in exceptional circumstances – for example, when the expression is an exception to the normal content for the page or website.

If math forms are a substantial part of the page or website content, MathML should be used instead. MathML represents both presentation and content semantically, making it more accessible to a wider range of users. Many assistive technologies can interpret the code.

The simple example above illustrates the difficulty of describing both the content and presentation (the position and location of the over-line) in mathematical expressions succinctly and clearly. For more complex expressions or equations, image text alternatives are unlikely to provide sufficient detail succinctly.

Example
0.3333
Code snippet:
<math>
	<mstack stackalign="right">
		<msline length="1"/>
		<mn> 0.3333 </mn>
	</mstack>
</math>

Note: The above code includes semantic information that conveys both content and presentation to assistive technologies.

Techniques: