Alt Text Strategies and Resources

Last updated: 5/21/2025

The purpose of alt text is to provide, in text form, the visual information conveyed by a graphic.

Alt text is relied on by screen reader users who cannot fully perceive a graphic, which may include users who have vision disabilities but also, possibly, cognitive disabilities like dyslexia; in web pages, alt text will be provided as a substitute for images that fail to load; and alt text can aid in search engine optimization.

Strategies

Context and message

Alt text shouldn't just be a literal description of a graphic, at least not in most cases. Instead, it should be a concise description filtered through the specific intent or message one had in mind when choosing to present the graphic.

For example, here we have a screenshot of the Seabright Beach Hotel website homepage, which includes an image of a smiling gentleman with gray hair and a gray beard, wearing a sports jacket and collared shirt, standing at a hotel's front desk, with clocks behind him displaying times in various world capitals. While that description of the image is accurate, it's also rather long — in a way that provides little value relative to the amount of time screen reader users would have to expend listening to it (hence the common recommendation that alt text be succinct) — and that description doesn't capture the intent or message the website designer had in mind when choosing to use that specific image, which likely involved making the hotel seem enticing to guests.

"Smiling staff member standing at the hotel's front desk, ready to welcome and assist guests," alternatively, also accurately describes the image, while trimming out unnecessary detail and incorporating key phrases that speak to the designer's intended message: the hotel's staff is friendly and ready to help make your stay the best it can be.

Text in images and alt text

Per WCAG 1.4.5 Images of Text (AA), text should not be conveyed through images, if it can be avoided.

If text must be conveyed through an image for some reason, ensure that all non-decorative text conveyed through the image is equivalently conveyed in the image's alt text or through body text in a way that makes clear the connection to the image.

Brevity and detail

Alt text should be concise, in part because that helps screen reader users digest it more easily and because alt text is simply not well-suited, programmatically, for conveying large amounts of information. For this reason (presumably), Storyline now includes with its alt text controls a recommendation to keep alt text under 150 characters; that's not a hard-and-fast rule, but it is a good guideline.

But what should you do when an image conveys more visual information than can be captured concisely? For example, images of graphs and diagrams often convey more information than can be described in 150 characters.

In such cases, the information should be conveyed through a "long description," which is essentially just a body text rendition of the information, often supplemented by structure as appropriate, such as using list structure to convey text that's presented as a list, or in a list-like way, within the image or using a table to convey data points shown in a graph. Long descriptions, or the buttons/links used to access them, should be proximate to the image they describe and presented in a way, such as with labels, that makes clear to all users the image with which they are associated.

For example, you may give a graph image alt text that labels the graph and conveys a highlight, like "20th century literacy rates line graph showing that rates rose steadily in America throughout the century and accelerated greatly in the 1950s," and then you may give the button used to access the long description of the image alt text like, "Open 20th century literacy rates line graph detailed description pop-up," and you may introduce the long description with a "20th century literacy rates line graph detailed description" heading.

In eCourses, wherein slide real estate is often at a premium, it may be easiest and/or most appropriate to present long descriptions in pop-up layers or dedicated slides accessed within the eCourse, proximate to the image they supplement.

"Image of...," "photograph of...," etc.

A common mistake made with alt text is starting it with some form of "Image of...," "graphic of...," "photograph of..." etc. Such labels tend to be redundant, as screen readers will already announce the "graphic" structure type when they encounter an image (which may humorously result in screen reader users hearing "graphic image of..." if you make this mistake).

You only need to note in alt text an image's medium if it's important contextually: for example, if you were asking learners to compare a photograph of a subject to an illustration of the same subject, learners would likely need to know which image is the photograph and which is the illustration.

Decorative and duplicative images and alt text

Under WCAG 1.1.1 Non-text Content (A), images that are decorative or duplicative do not need to be given alt text and can instead be hidden from assistive technologies. (In these cases, hiding the images spares screen reader users from having to spend time reading through and trying to make sense of information that is not meaningful and may even be confusing.)

An image can be considered decorative if it was included for purely aesthetic purposes — that is, purely to make the environment more visually interesting. This often includes design accents, background shapes and sometimes even the photos or graphics we pull from stock image libraries to include in slides. If you can't think of any meaningful, unique information to convey about an image through its alt text, it's probably safe to consider it decorative and hide it, but if you're unsure, you can always give the image a very brief, literal description: that way, you're covered, without inconveniencing screen reader users with a long read out.

Note: the WCAG definition of "pure decoration" includes guidance for what text in images can be considered decorative or not.

An image can be considered duplicative, and also hidden from assistive technologies, if the information it offers is already conveyed, in full, through proximate text. For instance, many of the images in this Checklist are hidden because the information they're intended to convey is already conveyed by adjacent paragraphs.

If some, but not all, of an image's visual information is conveyed through proximate text, that information needn't be duplicated in the image's alt text. The alt text need only provide the visual information to which screen reader users wouldn't otherwise have access.

Resources

See also within the Checklist