Images of Text

Images of text display text that is intended to be read. With the current CSS capabilities in most web browsers, it is good design practice to use actual text that is 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 the reading preferences of users. 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.

Styled text with decorative effect

This following image is used to convey a slogan text with decorative effects.


City Lights: your access to the city.

Using an image

Previously it was not possible to create such text using CSS styling that would be rendered consistently across browsers, which is why images of text were used. The text alternative for this image is the same as the slogan presented in the image: “Your access to the city”. The decorative effects (stylized text and shadow) are not be described because they are not relevant.

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

Using CSS3

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.

Your access to the city
Code snippet: HTML
<div class="tagline"><span>Your access to the city</span></div>
Code snippet: CSS
@font-face {
  font-family: 'Harabara Hand';
  src: url('harabarahand.eot#');
  src: url('harabarahand.woff') format('woff'),
	   url('harabarahand.ttf') format('truetype');

.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: The code snippet doesn’t show any vendor prefixes. These can be added to increase compatibility with older versions of web browsers using their experimental implementation of CSS3 features.

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


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 requirements that apply 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.

Mathematical expressions

Historically, math expressions have often been presented as images because of the difficulty of presenting equations and special math symbols with HTML. However, MathML is emerging as the preferred presentation of accessible math on the Web.

Using images

The image below displays a recurring decimal number (decimal numbers that never end). The alt text for this recurring number is “0.3333 recurring. (In the image, the recurrence is indicated by a line over the ‘3’ in the fourth decimal place.)”

In this particular example, the way that the recurrence is shown is important, so it is also described in the text alternative. As with other images, the author is in the best position to determine what information is intended to be conveyed by the image and construct the text alternative accordingly.


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

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

Using 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. The preferred method for displaying math expressions is MathML, which can present math semantically.

If math forms are a substantial part of the content (for example, for online maths courses), MathML should be used instead. MathML represents both presentation and content semantically, making it potentially more accessible to a wider range of users.

The simple example of the recurring number illustrates the difficulty of describing both the content and presentation in mathematical expressions succinctly and clearly. Specifically, it is cumbersome to describe the position and location of the over-line representing recurrence, though it is important for some classroom settings. For more complex expressions or equations, text alternatives for images are unlikely to provide sufficient detail succinctly. MathML helps provide such semantics within the code rather than as text.

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

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