This is an in-progress, unapproved draft. Please send any suggestions, edits, or comments to the publicly-archived list: firstname.lastname@example.org.
[DRAFT] Images of text
Images of text are those that display text that is intended to be read. The strongest design technique is to use actual text - styled with CSS - rather than image-based text presentation. This is because actual text is flexible, it can be resized without losing clarity and the 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.
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 that presented in the image - "Your access to the city". The decorative effects (stylized text and green line) should not be described.
<img src="../img/toplogo.png" alt="Your access to the city. ">
Note: The visual effects in the above image could have been produced using CSS3 and an embedded font. However some authors and developers may need to support older browsers and may find this example useful.
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.
<img src="../img/wai.png" alt="Web Accessibility initiative">
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)". In this instance the way that the recurrence is shown is important, so forms part of the text alternative, this isn't the case with all math expressions.
Note: Images of math expressions should only be used in exceptional circumstances, for instance where the expression is an exception to the normal content for the page or website. In use cases where math forms a substantial part of page or website content, Math ML should be used instead as it represents both presentation and content semantically, making it more accessible to a wider range of users as 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. .
Code snippet for image
<img src="../img/temp.png" alt="0.3333 recurring, (the recurrence is indicated by a line over the '3' in the fourth decimal place)">
Code snippet for Math ML
Math ML can be incorporated into both XHTML and HTML5
<mn> 0.3333 </mn>
Note: The above code includes semantic information that conveys both content and presentation to assistive technologies.
Related WCAG2.0 Technique
- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content