Alternative Text

Why Alt Text Matters

Alternative text (“alt text”) provides a textual description of images and other non-text content, enabling understanding for users with visual conditions and others who rely on screen reader technology.

How To

General Practice

Identify all images on your page as meaningful or decorative.

• Meaningful images (or “informative images”) convey visual information that supports the content of the page.
• Decorative images are only present for visual aesthetic and do not convey additional information central to the intent of the page (e.g., an ornamental icon, background pattern, or divider on a webpage).

Be Concise but Descriptive. Write short, context-specific alt text for each meaningful image to effectively convey its purpose for being included on the page. Describe only what is relevant to the content.

Skip Decorative Images. Mark decorative images as such, either by checking a box or toggling a switch when you select the image.

Technical Tips

Add an alt attribute for meaningful images. The attribute value should accurately convey the content or purpose of the image.

Use empty/null alt attributes (alt="" ) for purely decorative images.

What to Avoid

• Overloading alt text with too much detail – focus on what you want the image to convey
• Beginning alt text with “picture of…” or “image of..” Screen readers already announce that the element is an image
• Using the same alt text for different images on the page
• Using the filename for alt text
• Leaving alt text empty for meaningful images

Examples

Informative Image

Context: Off-duty guide dogs often wear a bell. Its ring helps the blind owner keep track of the dog’s location.

Alt Text: “Dog with a bell attached to its collar.”

Code: <p> <img src="jack-russel-terrior-bell.jpg" alt="Dog with a bell attached to its collar."> Off-duty guide dogs often wear ... </p>

Functional Image

Context: This icon of a printer denotes print functionality. When selected, it would activate the print dialog.

Alt text: “Print this page”

Code:<a href="javascript:print()"> <img src="printer-1.png" alt="Print this page"> </a>

Additional Resources