Alternative Text

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.

Main Takeaways

• 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.

Accessibility Benefits

• 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
• Images
• Icons
• SVG
• Writing Effective Alt Text Copy
• Guidelines
• Examples
• Accessibility
• Resources

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.

Syntax

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.

Images

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.

Guidelines

Icons

Icons can potentially convey meaning without using words, although researching users' understanding of icons is critical to ensuring that meaning is clear.

Guidelines

Examples

SVG

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.

Usage

SVG files are ideal for:

• Diagrams
• Icons
• Images that can be accurately drawn at any size, like for user interface elements.

Guidelines

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.

Guidelines

• 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.

Examples

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.

Accessibility

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.

Resources

• Alternative text for non-text content- WCAG (Web Accessibility Guidelines)
• Providing a text alternative that identifies the purpose of the non-text content.
• Techniques for writing alternative text - webaim.org.
• Decision tree for alternative text - WAI(Web Accessibility Initiative)