UX Writers, designers and developers can use this Alternative Text Guide as an instruction to writing style, usage, text for copy, documentation, reference information, and copy inside Rocket digital experiences.
- Adding alternative text ensures users with disabilities can understand non-text content.
- Describe the image without altering the meaning of the screen or referencing the word “image.”
- Consider how you would describe that image to someone without them having to visually see the image.
- Decorative images don't need alternative text.
- Use a null attribute (or empty string) for non-semantic or decorative images, for example those that are for ambiance or other non-semantic purposes.
- Screen readers read alt-text in place of images, which allows low or no-vision users to understand the meaning of the image.
- When an image fails to load or if content is blocked, the alt-text will appear in it's place.
- It gives images a text to display so screen readers can read it without altering the meaning of the screen.
Table Of Contents
- What Is Alternative Text
- Images and Graphics
- Writing Effective Alt Text Copy
What Is Alternative Text
Alternative text or commonly known as alt-text is a word or phrase that describes an image’s appearance and function.
The main purpose of the alt tag is to support accessibility, so screen readers and other assistive technology users are able to make full use of the content.
The text inside the alt tag provides the user with a description of the image.
<img src="image_of_puppies.png" alt="Four black Goldendoodle puppies">
Images and Graphics
Images and graphics make content visually pleasant and easier to understand.
To ensure they are accessible, they must have alternative text that describes the information or function represented by them.
Not all images on the web need the same alt-text. It’s important to consider the context and purpose of the image when writing the text description.
Images can be active, informative or decorative.
- Active Images help communicate meaning, actions, status or feedback.
- Informative Images help users understand the content on a screen. These include: diagrams, charts, graphs, maps or informative icons.
- Decorative Images have no semantic meaning and should have their alt attributes set to the empty (or null) string ("").
For more information refer to Developer Mozilla's HTML Image Element - alt.
|If The Image Is ...||How To Identify It?||The Alt Text Should ...|
|Active||These images perform an action or have functionality. For example, clickable icons are active images.||Help the user understand what happens when they click the image.|
|Informative||These images contain information the user may need. If the image was removed from the screen, the information would be lost.||Explain or describe the information found in the image.|
|Decorative||These images are included only for placement or visual effects. An image is decorative if you could remove it from the screen without losing information.||Blank or null ("").|
Icons can potentially convey meaning without using words, although researching users' understanding of icons is critical to ensuring that meaning is clear.
|What Is The Purpose Of The Icon?||How To Identify It?||The Alt Text Should ...||Best Practices|
|Act as an image||The icon appears as an image or inline image.||Help the user understand what the icon image conveys.||It must have an alt attribute.|
|For functionality||For example, a magnifying glass icon prompts users to activate the search function.||Provide contextual text accompanying the icon or add a visually hidden string for screen readers. (No alternative text needed.)||Set the alt attribute to empty or null ("").|
|For decoration||The icon is purely for visual decor.||No alternative text needed.||Set the alt attribute to empty or null ("").|
|Icon Image||What Does The Icon Convey?||The Alt Text Should ...||Example|
|An image of a question mark icon.||Give users context about what the icon is trying to communicate.||alt="Get more information."|
|An image of a magnifying glass icon.||Give users instructions as a guide when interacting with the search icon.||"Use the magnifying icon to start your search."|
Scalable Vector Graphics or SVG is an XML-based vector graphics format that specifies the contents of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so forth.
SVG files are text files containing source code that, when interpreted, draws the desired image.
Here are some benefits of using SVG:
- They are easy to style and animate.
- They are great for responsive design because they decrease the screen load time.
For more information, visit Developer Mozilla SVG documentation.
SVG files are ideal for:
- Images that can be accurately drawn at any size, like for user interface elements.
|If The SVG Is ...||What Does The SVG Convey?||The Alt Text Should ...|
|Acting as an image||It must have alt-text using the alt attribute.||Give users context about what the SVG image is conveying.|
|Intended as an image source||Communicate to users what the image is conveying.||If the image is an icon, give users a description. For example, alt="Lightbulb icon."|
|Acting as the SVG source||Must have a title.||Help users understand what the image is trying to communicate.|
|An inline SVG||Add the alt-text using the (title=" ") element within the SVG image.||Give users a brief description or advisory information of the graphic.|
Writing Effective Alt Text Copy
As a UX Writer, determine what the alt-text should be depending on the usage, context, and content of the image.
- Determine what information or what the function of the image is. Copy should describe an image’s purpose or what information it communicates.
- Choose the appropriate alternative text for the image type. If the image has no informative value, treat them as decorative images.
- Describe the image as specifically as possible. Include the most valuable information at the beginning and provide meaningful descriptions.
- Keep it as short as possible. Be concise and avoid keyword stuffing.
- Use punctuation.
- Use sentence case.
- Add space characters between the image and adjacent text to avoid having words running together when a screen reader reads them.
- Include a period at the end of the alt-text – even if it's not a complete sentence. The period will provide a slight pause when read by the screen reader.
- If using a null (empty) alternative text (alt="") to hide decorative images, make sure that there is no space character between the quotes.
Use these examples as a guideline to create the best alt-text copy. The examples in the table below, describe the image of a rooster.
|Average Example||Better Example||Best Example|
|alt=“Rooster.”||alt=“Rooster crowing.“||alt="Red-crested rooster crowing."|
Ensure all non-text content (images and graphics) has alternative text so blind users can understand a screen’s content when read by a screen reader.
The content above is not all-inclusive, please review Spark’s Accessibility Guidelines.
Alternative text enables blind users to interpret images. Refer to W3’s Text Alternative Guidelines.