How to Make Images Accessible and Write Effective Alt Text

Images must be accessible to users who rely on screen readers or who have images disabled. Under the updated federal Title II digital accessibility standards effective April 2026, all meaningful images on public-facing webpages are required to include appropriate alternative text, commonly referred to as alt text.

Alt text exists to communicate the meaning, purpose, or function of an image to users who cannot see it. It should not be used as decorative copy embellishment, a caption, or an SEO field. Alt text is functional content that ensures equal access to information.

When is alt text required?

Alt text is required for any image that conveys information, supports understanding of the page content, functions as a link or button, or contains text that is not otherwise available on the page. 

Decorative images that do not add meaning, such as background textures, visual dividers, or purely aesthetic graphics, should use empty alt text (alt="") so screen readers can skip them without adding noise.

How to write useful alt text

Effective alt text is concise, descriptive, and written in context. It should describe what the image communicates, not simply what it looks like. A good rule of thumb is to ask: If this image were removed, what information would the user be missing?

Alt text should be written in plain language and reflect the intent of the surrounding content. Screen reader users already have access to the page text, so alt text should not repeat nearby headings or paragraphs verbatim. Instead, it should complement them by filling in the missing visual information.

Recommended length

Alt text should generally be short and efficient. An ideal length is between 5 and 15 words, with an upper limit of approximately 125 characters, which aligns with common screen reader behavior. If an image requires a long explanation to make sense, that explanation likely belongs in the page content rather than the alt text.

What to avoid when writing alt text

Alt text should not begin with phrases such as “image of,” “picture of,” or “graphic of,” as screen readers already announce the element type. File names, keyword-stuffed descriptions, and overly visual details that do not contribute meaning should also be avoided.

Alt text should never be used as a substitute for captions, design notes, or instructional text that belongs elsewhere on the page.

How to handle images that contain text (flyers, posters, graphics)

Images that contain text, such as flyers, posters, or promotional graphics, require special care. Text embedded in images is not accessible by default and must be provided in an alternative format.

The preferred approach is to avoid using images to convey essential text whenever possible and instead present the information as real HTML text on the page. If the image must be used, the full text content should be provided elsewhere on the page in a readable format. In these cases, alt text should briefly describe the purpose of the image rather than attempting to transcribe all visible text.

If the image’s primary purpose is the text itself and no HTML version exists, the full text must be included immediately adjacent to the image. The alt text should remain short and direct users to the nearby content.

Example

A department has a promotional flyer image for a campus event titled “Spring Research Symposium – April 18, 1–4 PM, Student Activities Center.” The flyer includes the event title, date, time, location, speaker names, and registration details.

Preferred (best) approach:

Instead of relying on the flyer image to communicate the details, the page includes the event information as real HTML text:

• Event title as a heading
• Date, time, and location in paragraph or list form
• Registration link as a standard text link

The images included are photos from the original flyer taken off of the flyer and displayed on their own.

Alt text:
“John Doe standing at podium from previous symposium”

This works because all essential information is available on the page in accessible text.

If the image must be used and contains important text

The flyer image remains on the page, but the full event details are written out directly below it in HTML text. The alt text still stays short and descriptive, summarizing the image rather than repeating its contents.

Alt text:
“Promotional flyer for the Spring Research Symposium”

Linked images

When an image functions as a link, the alt text must describe the action or destination, not the visual appearance of the image. Users should understand what will happen when the image is activated, just as they would with a text link.

Using images in Modern Campus CMS

When adding images in Modern Campus, the Alt Text field should always be reviewed and intentionally completed. Captions or surrounding text do not replace alt text, and decorative images should be clearly marked with empty alt text. Alt text should be treated as part of the content itself and reviewed with the same care as written copy.

How alt text affects accessibility

Under the Title II accessibility standards effective in 2026, improper or missing alt text may result in accessibility compliance failures. These requirements apply to all public-facing content, including archived pages and low-traffic sections of the site.

Accessible images ensure that all users can fully understand and interact with web content. Writing thoughtful alt text is a small effort that delivers a significant impact on usability, compliance, and overall content quality.

How to generate starter alt text in Modern Campus using AI

Modern Campus CMS includes an AI-powered tool that can generate suggested alt text for images. This can be a helpful starting point, but AI-generated alt text should always be reviewed and edited before use.

The tool can identify what is visually present in an image, but it does not necessarily understand the image’s purpose, context or Stony Brook-specific information. Web editors remain responsible for ensuring alt text accurately communicates the information users need from an image.

How to Generate Starter Alt Text

The Generate Alt Text feature is available through an image’s Properties rather than the standard Insert/Edit Image window.

To generate alt text:

1. Upload the image to your site’s images folder.

2. Check out the image in Modern Campus CMS.

3. Select Properties.

4. Under Default Alt Text, select Generate Alt Text.

5. Review the generated suggestion carefully. Edit it to add context, correct information or remove unnecessary details. You can also generate another suggestion if the first is not useful.

6. Select Save.

7. Publish the image through the normal publishing workflow.

The saved text becomes the image’s default alternative description when you insert the image on a page.

How Default Alt Text Works

Alt text saved in an image’s Properties becomes the default alt text whenever that image is newly inserted on a page.

You can, and should, change the alt text in the Insert/Edit Image window when the context of a particular page calls for a different description.

Changing the Default Alt Text does not update pages where the image has already been inserted. Existing uses retain the alt text that was applied when the image was originally added to the page. Those instances must be updated individually. Because of this, the AI tool is most useful when uploading and preparing new images for use in the CMS.

Always Review AI-Generated Alt Text

AI can recognize many of the visual elements in an image, but it does not know why the image is being used on your page. It may also be unable to identify Stony Brook-specific people, buildings, programs, events or other context.

For example, AI might generate:

AI suggestion:
“Portrait of a woman standing in front of a building.”

If the person and location are important to the content, more useful alt text might be:

Better:
“Faculty member Jane Doe outside the Administration Building.”

For a headshot, AI might generate:

AI suggestion:
“Portrait of a man wearing a blue suit and glasses.”

If the image accompanies that person's profile, the better alt text may simply be:

Better:
“John Smith wearing a blue suit and glasses.”

The AI may also include unnecessary phrases such as “image of,” “photo of” or “portrait of.” In most cases, screen readers already communicate that an element is an image, so these phrases do not add useful information.

Use AI as a Starting Point

The Generate Alt Text feature can save time and help editors get started, but its suggestion should not automatically become the final alt text. Before saving AI-generated alt text, ask:

• Does it communicate why this image matters on this page?

• Does it correctly identify important people, places or subjects?

• Does it include unnecessary visual details?

• Does it use phrases such as “image of” or “portrait of” that can be removed?

• Would different alt text make more sense when the image is used in a different context?

• Is the image actually decorative and therefore better left without alt text?

Keep the suggestion when it works, edit it when additional context is needed and replace it when you can provide a clearer description.