This is a DRAFT resource that supports Working Drafts of WCAG 3. Content in this resource is not mature and should not be considered authoritative. It may be changed, replaced or removed at any time.
🔙 WCAG 3.0 (Silver) Guidelines (Text alternatives)
Method: Images of Text
Platform
- Any platform supporting HTML
Technology
- HTML
Summary
Text alternatives for images of text makes information conveyed by non-text content accessible through the use of a text alternative. Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech. A person who cannot hear an audio file can have the text alternative displayed so that he or she can read it. In the future, text alternatives will also allow information to be more easily translated into sign language or into a simpler form of the same language.
How it solves user need
- People using screen readers: The text alternative can be read aloud or rendered as Braille.
- People using speech input software: Users can put the focus onto a button or linked image with a single voice command.
- People browsing speech-enabled websites: The text alternative can be read aloud.
- Mobile web users: Images can be turned off, especially for data-roaming.
- Search engine optimization: Images become indexable by search engines.
Outcome
This method supports the outcome Text alternatives for available.
Detailed description
- 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. Genuine 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 rare situations where images of text must be used, the text alternative must contain the same text presented in the image.
- When using the
imgelement, specify a short text alternative with thealtattribute. Note: The value of this attribute is referred to asalt text
. - When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.
- Sometimes, an image only contains text, and the purpose of the image is to display text using visual effects and /or fonts. It is strongly recommended that text styled using CSS be used, but if this is not possible, provide the same text in the
altattribute as is in the image.
Dependencies
None
- Link Image
- Styled text with decorative effect
- Image of text used as an unlinked logo
- Mathematical expressions
- Image of text for a heading
- An advertising image consisting of text
- Inline image of a character: A new-fangled currency symbol
- An illuminated manuscript
- An illuminated letter
Link Image
An image on a Website provides a link to a free newsletter. The image contains the text Free newsletter. Get free recipes, news, and more. Learn more.
The alt text matches the text in the image.
>
<img src="newsletter.gif" alt="Free newsletter. Get free recipes, news, and more. Learn more.">
Styled text with decorative effect
This following image is used to convey a slogan text with decorative effects. This example is from the WAI Tutorials Images. See the WAI Tutorials for more examples and CSS solutions.
>
<img src="access-city.png" alt="Your access to the city.">
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 described because they are not relevant.
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’s no need to mention that it is a logo. This example is from the WAI Tutorials Images.
Note: If this logo were linked then it would become a functional image. See “Example 7” and “Example 8” in the Method “Text alternative for Functional Images”.
>
<img src="wai.png" alt="Web Accessibility initiative">
Mathematical expressions
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.
This example is from the WAI Tutorials Images.
>
<img src="0dot3333recurring.png" alt="0.3333 recurring. (The recurrence is indicated by a line over the ‘3’ in the fourth decimal place)">
Note: 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. See the WAI Tutorials Images for examples of MathML solutions.
Image of text for a heading
This example shows an image of the text Get Happy!
written in a fancy multi colored freehand style. The image makes up the content of a heading. In this case the text alternative for the image is Get Happy!
. This example is from EXAMPLE 34 of HTML 5.3.
<h1><img src="gethappy.gif" alt="Get Happy!"></h1>
An advertising image consisting of text
n this example we have an advertising image consisting of text, the phrase The BIG sale
is repeated 3 times, each time the text gets smaller and fainter, the last line reads ...ends Friday
In the context of use, as an advertisement, it is recommended that the image’s text alternative only include the text The BIG sale
once as the repetition is for visual effect and the repetition of the text for users who cannot view the image is unnecessary and could be confusing. This example is from EXAMPLE 35 of HTML 5.3.
<p><img src="sale.gif" alt="The BIG sale ...ends Friday."></p>
NOTE: In situations where there is also a photo or other graphic along with the image of text, ensure that the words in the image text are included in the text alternative, along with any other description of the image that conveys meaning to users who can view the image, so the information is also available to users who cannot view the image.
Inline image of a character: A new-fangled currency symbol
In this example from 1997, a new-fangled currency symbol that looks like a curly E with two bars in the middle instead of one is represented using an image. The alternative text gives the character’s pronunciation. This example is from EXAMPLE 36 of HTML 5.3.
Only 
5.99!
<p>Only <img src="euro.png" alt="euro ">5.99!</p>
An image should not be used if Unicode characters would serve an identical purpose. Only when the text cannot be directly represented using Unicode, e.g., because of decorations or because the character is not in the Unicode character set (as in the case of gaiji), would an image be appropriate.
NOTE: If an author is tempted to use an image because their default system font does not support a given character, then Web Fonts are a better solution than images.
An illuminated manuscript
An illuminated manuscript might use graphics for some of its letters. The text alternative in such a situation is just the character that the image represents. This example is from EXAMPLE 37 of HTML 5.3.
nce upon a time and a long long time ago…
<p><img src="initials/fancyO.png" alt="O">nce upon a time and a long long time ago...
An illuminated letter
Where the design of the illuminated letter is important, the primary text alternative in is the character that the image represents, and longdesc can provide a link to a more detailed description. This example is from EXAMPLE 38 of HTML 5.3.
nce upon a time and a long long time ago...
<p><img src="initials/story-o.jpg" alt="O" longdesc="letters/story-0.html">nce upon a time and a long long time ago...
Atomic Tests
Automated test for all images
Unit Tested: All Images
Measurement: Percentage (# passed/total # of img elements for all images)
- This test is measured by the number of img elements in the HTML document or the number of images in non-HTML content being tested.
- The percentage test result is the number passed divided by the total number of img elements or images.
Procedure for HTML
- Run an automated test that displays the text alternative (or accessible name) for images.
- Check that functional, informative, and images of text have alternative text that serves an equivalent purpose of the image
- Functional images describe the function
- Informative images describe the image
- Images of text repeat the text or the equivalent purpose of the text.
- Check that decorative images are appropriately coded (see “Decorative Images” method) so they are hidden to assistive technology.
Expected Results
Check #2 and #3 are true.
Procedure for Technology Agnostic
- Examine each image in the content.
- Check that each image that conveys meaning has its text alternative.
- If the image contains text that is not purely decorative, the text alternative contains the same text.
- If it is within a link together with text, check that it is implemented to be ignored by assistive technology or the text alternative describes the image and supplements the link text.
- If it is a button, check that the text alternative indicates the button's function.
Expected Results
Checks #2 and #3, or #2 and #4, or #2 and #5 are true.
Manual Test of Images of Text
- Unit Tested: All Images of Text
- Measurement: Percentage (# passed/total # of img elements for “Images of Text”)The percentage test result is the number passed divided by the total number of img elements or images.
Procedure [for HTML]
- Examine each img element in the content that contains text within the image.
- Check that each image which conveys meaning contains a text alternative.
- Check that each img element that contains text that is not purely decorative has a text alternative that serves an equivalent purpose.
Procedure for Technology Agnostic version
- Examine each image in the content that contains text within the image
- Check that each image which conveys meaning contains a text alternative.
- Check that each img element that contains text that is not purely decorative has a text alternative that serves an equivalent purpose.
Expected Results
Check #2 and #3 are true.
Holistic Tests
- Still to be developed. We will include this in a future working draft.
Status
first draft
Change Log
- 2020-09-21: Updated scoring.
- 2020-09-12: Draft.