How do I write alt text for images?

This wiki guide discusses how to write alt text for images that meet accessibility standards.

Best Practice Tips

• Alt text must always be addressed for each image that is used in instructional materials (webpages, slide presentations, PDFs, etc.).
• Most screen reader software will either read the filename or nothing if alt text is absent.
• Screen readers announce the presence of an image before reading its alt text, so avoid stating “a photo of” or “an image” unless this conveys important, meaningful information (e.g., “a photograph of a woman smiling held up in front of the painting of the Mona Lisa in the Louvre”).
• Mark purely decorative images that do not add information or meaning as “decorative” in the accessibility or image options and leave alt text description empty.
• Screen readers cannot read images of text. Any text that you cannot highlight with a mouse is not “true text” and will not be read by a screen reader.

Example of Appropriate Alt Text

If you are using an image on an employee directory, the alt text likely needs to be the person’s name, not the full image description. Let’s consider the example below, in the context of a faculty bio page which includes his name and roles at NECO:

Let’s consider the content and function for this image:

1. Content: The image’s content informs the user that this is a portrait of Dr. Jeffrey Ho.
2. Function: An image only has a function if it is linked, in a button, or is indicating an area (e.g., a map of countries). In this case, the image does not have a function.

Based on this, which alt text below best suits this purpose for the image above?

• “Dr. Jeffrey Ho”
• “A professional headshot of a smiling man with dark hair combed upward. He wears a dark grey suit jacket, a white shirt, and a dark patterned tie against a plain light grey background”
• “Jeffrey Ho, OD, FAAO; Associate Professor of Clinical Optometry; Attending Optometrist, The Dimock Center”
• Empty alt attribute (alt=”” ) and decorative image checked

The appropriate alt text would be “Dr. Jeffrey Ho”, as it describes the image. The text on the faculty page would be redundant if read by a screen reader in both the alt text and on the webpage.

Writing Alt Text

If a text equivalent of an image can be provided concisely (e.g., a short phrase or sentence) use the alt attribute in the image.

1. To add alt text to an existing image, right click on the image to open its editing options, which should include alt text in most documents or applications.
2. Concisely describe image content that is relevant to its purpose. Think about how you would describe the image in its context to someone who can’t see it. For example, here’s a picture of “a lensometer in a clinic” and some possible alt text options for different situations.
3. If there are no image options to edit alt text, you can do so through the HTML with the alt attribute on the <img> tag. Example: alt=”Write your alt text here”

Additional Resources

• NECO TLC | How do I build accessible course materials?
• WebAIM Alternative Text
• Canvas | Managing Alt Text

Need Extra Support?

We are here to partner with you as you enhance your courses. If you run into technical issues or want a collaborative consultation on designing custom interactive modules, please reach out to our team: