Skip to main content

Making Images Accessible

Why Image Accessibility Matters—and How To Do It Right

Images are a powerful part of digital communication, but if they aren't made accessible, they can exclude people who use screen readers, have low vision, or rely on text-based browsers. The good news: making images accessible is simple and just takes a few extra seconds.

A digital window displays an image of a smiling apple with an 'ALT' text tag attached to it.

What Is Alt Text

Two young students stand side-by-side, smiling and wearing lanyards in a room with a wooden wall.

Alt text (alternative text) is a short description of an image that:

  • Explains what is shown and why it matters
  • Is read aloud by screen readers for people who can’t see the image
  • Replaces the image if it fails to load

You should add alt text to every image unless the image is purely decorative (in which case it should be marked as decorative or left blank appropriately).

Alt Text Can Help Everyone

If there are internet issues and an image fails to load, the alt text is displayed.

Example of a digital image that loaded correctly

A young student smiles as he colors in a workbook at his desk in a classroom.

Example of a digital image that did not load correctly and does not have alt text

A broken image icon is displayed in the center of a large white rectangle.

Example of a digital image that did not load correctly and does have alt text

A placeholder image containing text that reads, 'Young student looks at camera while sitting at a classroom table', alongside a broken image icon.

  • Keep it short and specific (1–2 sentences max)
  • Describe only what’s essential to understanding the content
  • Don’t say “Image of…”—just describe what it shows
  • If text appears in the image, include that text in the alt description or main body content

Examples

A smiling man wearing a blue Royals t-shirt and a lanyard stands inside a modern indoor space.

Good Alt Text: a nutritional services team member standing in front of a cafeteria

Bad Alt Text: a man

A jubilant graduate in a purple cap and gown raises their arms in celebration inside a large stadium.

Good Alt Text: a graduate cheers on stage while holding his diploma

Bad Alt Text: a student graduates

A man gives a high five to a young student wearing a backpack next to a yellow school bus.

Good Alt Text: a principal gives a high five to a student on the playground

Bad Alt Text: People outside

A student raises their hand in a brightly lit classroom during a lesson.

Good Alt Text: student raises hand in a full classroom with text: Board of Education Meeting Today

Bad Alt Text: Classroom picture

How to Add Alt Text in Common Tools

    • Click on the image in your email message
    • Select "Edit Alt Text”

  • A computer screen showing a document editor with a selected image and an open context menu.

    • Look for an "Alt text" field in the image upload or settings area
    • Some platforms automatically ask for it—fill it in before publishing

    Adding Alt Text in Finalsite
    In the Image Properties settings, find the Alternative text field and input your image description.

    A digital interface displays image properties with a text input box highlighted in red and a preview of cupcakes on the right.

    • Facebook: Before or after uploading, click “Edit Photo” > “Alt Text”

    A software interface for adding alternative text to an image showing graduates in caps and gowns.

    • Instagram: Before posting, tap “Advanced Settings” > “Write Alt Text”

    Two screenshots of a smartphone interface showing the process of accessing alt text options in a mobile app.

    • Twitter/X: Tap the image, then “+ALT” to add alt text before posting

Avoid Text-Only Images

Images that contain only text (like many flyers) are not accessible unless the same information is also included in the body of your post, email, or web page. Screen readers can't interpret text embedded in an image unless it's added manually in the alt text or elsewhere.

Always provide event details and important info in plain text.

Decorative Images

If an image is purely decorative (e.g., a border or background that doesn’t convey content), it can be marked as decorative or left with a blank alt attribute so screen readers skip it.

A horizontal decorative border with scalloped edges and floral motifs.

A white arrow pointing right, featuring motion lines inside, set against a solid blue background.     Next Topic: Accessible Videos and Multimedia