[DRAFT] Images of text

Images of text are those that display text that is intended to be read. Wherever possible you should always use styled text instead because images of text cannot be resized without losing clarity and the background and text colors can't be changed to suit users' reading preferences. In situations where images of text must be used, the text alternative must contain the same text presented in the image.

Example 1: Image of styled text with decorative effect

This slogan image contains text with decorative effects that cannot be realized with CSS styling. The text alternative is the same as what is presented in the image — "Your access to the city". The decorative effects (stylized text and green line) should not be described.

Code snippet

Example 2: Image of text used as an unlinked logo

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 is no need to mention that it is a logo :

Note 1: Images used as logos are exempt from some of the accessibility guidance that applies to other images of text, for instance 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 linked logos in Functional images example 1.

Code snippet

Example 3: 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)".

Note: Images should not be used for mathematical equations or expressions, except as a temporary fallback. The simple example above illustrates the difficulty of describing both the content and presentation (the position and location of the over-line) of mathermatical expressions succinctly and clearly. Math ML should be used instead as it represents both presentation and content semantically, making it more accessible to a wider range of users.

Code snippet for image

Code snippet for Math ML

Math ML can be incorporated into both XHTML and HTML5