Images & Alt Text

Images play an important role in storytelling and user engagement, but they must also meet accessibility requirements. This page summarizes the essential accessibility practices for images on School of Medicine websites. For full instructions on adding, aligning, resizing, and managing images, see How to Add an Image in the User Guide.

Covered In This Tutorial

• Why Accessible Images Matter
• Meaningful vs. Decorative Images
• Alt Text — The Most Common Mistake: Describing Only What You See
• Alt Text —Two Things Matter Most: Link Destination and Context
• Alt Text Examples
• When Images Don’t Need Alt Text
• Images With Text
• Complex Images
• Alt Text Guidelines
• How to Add or Edit Alt Text
• Alt Text Inheritance
• Using AI to Generate Alt Text
• Image Search Engine Optimization
• Training Videos
• Resources

Why Accessible Images Matter

• Screen reader users rely on alt text (alternative text) to understand the image’s purpose.
• When images fail to load, the alt text will display in it’s place. This ensures the content remains understandable to all site visitors.
• Accessible images improve SEO by helping search engines interpret your page.

Alt text is required for all meaningful images on SOM websites.

Meaningful vs. Decorative Images

Meaningful images provide information, reinforce content, identify people or places, or serve a functional purpose on the page. These images almost always need alt text.

• Photos of faculty, staff, patients, or students
• Images of buildings or facilities
• Charts, diagrams, and infographics
• Images that support or enhance nearby content
• Linked images

Decorative images are purely visual, adding aesthetic appeal but no new information. These do not need alt text.

• A decorative divider graphic
• A custom bullet icon
• A background texture

Alt Text — The Most Common Mistake: Describing Only What You See

Many authors assume alt text should simply describe the visual appearance of an image or what’s in the picture. This is usually wrong.

Alt text should describe why the image is on the page and what it communicates to a sighted user. A visual description that ignores context often tells screen reader users less than they need, or describes things that don’t matter for understanding the page.

When a Visual Description IS Appropriate

• The image’s literal appearance is the point — for example, a page about campus architecture where the visual style of a building is the subject being discussed.
• A complex image (chart, diagram, screenshot) where describing the visual layout helps orient the user, in combination with a fuller text summary nearby.
• A scientific image or diagram
• Images where visual details convey important information

In most other cases — especially when the image illustrates a concept, supports a story, or links somewhere — describe the image’s role and meaning, not its visual details.

Alt Text —Two Things Matter Most: Link Destination and Context

If you remember nothing else, remember this priority order:

1. If the image links to something, the alt text’s top priority is describing where the link goes — see Linked Images below. Screen reader users need this to decide whether to follow the link.
2. If the image is not a link, the alt text’s top priority is its context — why this image is on this page, and what it’s meant to convey to the reader.

Visual appearance is, at most, a supporting detail, included only when it adds meaning the reader would otherwise miss.

Linked Images

Images can also serve as links. For example, a logo that links to a website’s homepage or a photo linking to a larger version of the same photo.

• When an image functions as a link, its alt text becomes the link text for screen readers.
• Every linked image must have alt text that explains where the link goes.
• Describing the destination is the priority over context, because that’s what screen reader users need to decide whether to follow the link.
• Add context only if it adds meaningful information.

Examples

Context

The meaning of an image depends on its context. Alt text should reflect the image’s purpose on the page and not describe everything visible in the image.

For example, a photo of a doctor examining a patient would need different alt text depending on where it appears:

• On a patient care page: “Physician listening to a patient’s heartbeat during an exam.”
• On a medical education page: “Medical student observing a physician perform a patient exam.”
• On a research page: “UNC researcher [name] conducting a clinical study on heart health.”

Describe only what’s relevant to the page’s content and purpose. Focus on what helps users understand the surrounding information.

Writing Alt Text for Photos of People

When images contain identifiable individuals, include who is pictured and why they are important to the page.

Poor example: “Woman seated indoors in profile, smiling beside a water bottle.”

Better example: “Dr. Smith discussing treatment options with a patient during a specialty care clinic. ”

The second example communicates both identity and context.

You may need to work with content owners to identify individuals and provide appropriate context.

Alt Text Examples

Example 1

The image below shows medical students before their White Coat Ceremony. Imagine this image is being used on a Medical Education page and consider what meaningful alt text would be appropriate.

Poor Alt Text (Too Generic)

Alt text: “Medical students”
Or: “Group of medical students standing outside.”

Problem: the alt text examples are too generic and do not communicate the purpose or context of the image.

Poor Alt Text (Describes Appearance, but Ignores Context)

Alt text: “Group of smiling medical students holding white coats with classmates gathered behind them.”

Problem: The alt text describes what is visible in the image but does not explain why the image is relevant to the page.

Better Alt Text (Describes the Image in Context)

Alt text: “UNC School of Medicine students preparing for the White Coat Ceremony, marking the beginning of their medical education journey.”

Why this works:

• Identifies the subjects (medical students)
• Provides the event context (White Coat Ceremony)
• Explains why the image is relevant to a Medical Education page
• Focuses on the meaning of the image, not just its visual appearance

Example 2: Context Changes Everything — Same Photo, Different Context

The same photo from example one is used on the MD Curriculum website, but it does not represent a White Coat Ceremony. On the MD site, it is used as a generic image that links to the Foundation Phase curriculum section.

Because the image is now a link, the alt text’s job changes completely: it must describe the destination, not the ceremony.

Appropriate alt text in this context could be something like:

• Learn about the Foundation Phase curriculum.
• Foundation Phase — UNC School of Medicine curriculum overview.

Example 3: The Same Image Can Have Different Alt Text

Here is another example where the same image may require different alt text depending on how it is used. Take this photo of Roper Hall, a building on the UNC School of Medicine campus, as an example:

Context 1 — Linked image. The image links to a page about Roper Hall.

Alt text: “Roper Hall building at the UNC School of Medicine linking to information about the facility.”

The alt text mentions that it’s a link and where it goes, since that’s the priority for a linked image.

Context 2 — Curriculum page. The image represents where medical education takes place (not linked).

Alt text: “Roper Hall at the UNC School of Medicine, home to classrooms and learning spaces for medical students.”

The alt text focuses on the building’s role in medical education, its purpose on this page, rather than its appearance.

Context 3 — Architecture page. The page describes the architecture of various campus buildings.

Alt text: “Roper Hall at the UNC School of Medicine with a glass curtain wall, multi-story atrium, and modern building design.”

Here, visual description is the correct approach — because the page’s subject is the building’s appearance. This is the exception to the general rule, not the norm.

Takeaway: One photo, three valid — and very different — alt texts, all correct because each matches its page’s context and purpose.

More Examples

When Images Don’t Need Alt Text

Decorative Images

As previously discussed, decorative images do not require alt text because they don’t communicate any information or have a functional purpose. In these cases, leave the Alt Text field blank.

Examples of decorative images include background images, ornamental borders, and custom bullet icons.

Caption vs. Alt Text

If your image includes a caption, it might not need alt text – as long as the caption fully conveys the image’s purpose. If the caption is too brief or missing key information, that information should be added to the alt text.

Attribution details like image source, photographer credit, or copyright belong in the caption, not the alt text.

Images With Text

Avoid using images that contain text whenever possible. Text embedded within an image cannot be read by screen readers, indexed by search engines, translated by browser tools, or resized independently from the image. It may also become blurry or difficult to read on smaller screens or high-zoom settings.

Whenever possible, use real text on the page instead of text in an image.

If you must use an image that contains text:

• If it’s a short amount of text, include the full text in the alt attribute.
• If the image contains a large amount of text, provide that text in the page content area near the image. The alt text should note that the full text can be found in the content of the page near the image.

Example 1: Short Amounts of Text

Example 2: Large Amounts of Text

Provide the full text displayed in the image within the page content near the image. The image’s alt text should indicate that the full text is available in the page content.

Complex Images

Some images, such as charts, graphs, or posters, contain too much information to describe fully in alt text. In these cases, the full text or a summary must be provided within the page content, located immediately below or near the image.

• The image’s alt text should give a brief overview of what the image represents and tell users where to find the summary.
• The summary should describe the key points, trends, or takeaways from the visual, not every single data point.

Example Alt Text

• Example 1 – Departmental Organizational Chart
  • Alt text: Department of Psychiatry organizational chart. Full leadership structure and division listings appear in the section below.
  • Summary: The Department of Psychiatry is led by Dr. Jane Smith, Chair. Three Associate Chairs—Dr. Aaron Patel (Clinical Services), Dr. Maria Gomez (Research), and Dr. Kevin Liu (Education)—oversee the department’s main divisions. Each division, including Adult Psychiatry, Child and Adolescent Psychiatry, and Behavioral Medicine, reports to the corresponding Associate Chair.
• Example 2 – Research Graph
  • Alt text: Line graph showing decline in average blood glucose levels after 12-week nutrition program. Detailed results provided below.
  • Summary: The 12-week intervention reduced average blood glucose levels from 160 mg/dL at baseline to 120 mg/dL by week 12. The most significant drop occurred between weeks 4 and 8, coinciding with the introduction of weekly dietitian consultations.
• Example 3 – Infographic
  • Alt text: Infographic showing infection-rate reduction and prevention measures at UNC Hospitals. Summary provided in the paragraph below.
  • Summary: Between 2023 and 2025, UNC Hospitals reduced hospital-acquired infections by 40%. Key prevention measures included enhanced hand hygiene training, improved sterilization procedures, and expanded staff education programs.

Other Complex Image Examples & Resources

1. Arizona State University provides a detailed Accessible Complex Image Guide.
2. Harvard’s Data Visualizations, Charts, and Graphs page explains how to ensure data visualizations are accessible to everyone by being mindful of color, labels, descriptions, and design.
3. PennState demonstrates how to describe Flowcharts & Concept Maps.
4. See how University Libraries displays both a graphical organization chart as well as a text version.
5. UNC Office of the Chancellor opted for a text outline for their org. chart.
6. The University of North Georgia provides both a text outline of their organizational structure as well as a graphical representation in a pdf (link at top of page).
7. W3C’s Guide on Complex Images

Alt Text Guidelines

• Alt text should convey the purpose of the image on the page, not a visual inventory of its contents.
• Be concise. Keep it under 150 characters when possible, without sacrificing meaning.
• Don’t include “Image of” or “Photo of” – screen readers announce it as an image automatically
• Start alt text with a capital letter and end with a period; this helps the screen reader pause appropriately.
• Linked images must always include alt text that describes the link’s destination.
• Images with text:
  • If the image contains a short amount of text, include it in the alt text.
  • If the image contains a large amount of text, provide that text in the page content area near the image. The alt text should note that the full text can be found in the content of the page near the image.
• Complex images, like charts, graphs, posters or flyers, should have a summary of the image in the page text surrounding the image. The alt text should give a brief overview and point users to that summary.

How to Add or Edit Alt Text

Alt text can be added or changed in three places in WordPress: during image insertion, after an image is already placed on a page, and directly in the Media Library. Each method affects alt text differently — understanding which to use (and when) will help you avoid the inheritance pitfalls.

Method 1: During Image Insertion (Recommended)

The best time to write alt text is when you first add an image to a page, because you’re already working in context. You can see the surrounding content and can write alt text that reflects that specific page’s purpose.

The alt text you enter here is saved to the page’s content. It also overwrites the image’s default alt text in the Media Library. It does not, however, update the alt text on any pages where the image has already been placed.

Method 2: Editing Alt Text on an Image Already Placed on a Page

If an image is already on a page and you need to add or update its alt text, you can do so without removing and re-inserting it.

1. Open the page for editing.
2. Click on the image to select it.
3. Click the Edit (pencil) icon that appears in the toolbar above the image.
4. In the Image Details popup, locate the Alternative Text field.
5. Add or update the alt text to reflect the image’s purpose on the page.
6. Click Update to apply the change.

This only updates the alt text on this page. It does not change the image’s default alt text in the Media Library, and it does not affect any other pages where the same image appears.

Method 3: Adding Alt Text in the Media Library

You can also add or edit alt text directly from the Media Library. This is useful for setting a default description for a newly uploaded image before it’s placed anywhere.

1. In the WordPress dashboard, go to Media.
2. Click on the image you want to update.
3. In the Attachment Details panel, locate the Alt Text field.
4. Enter a general description of the image.
5. There is no save button because WordPress saves this automatically.

Important limitations to keep in mind:

• Changes in the Media Library do not update on pages where the image has already been placed. Only future insertions will pre-fill with this new alt text.
• Any pages where the image already exists must be updated individually.
• Alt text added here has no awareness of page context.
• This is a good place for a “default” or most-common-use description — but treat it as a starting point only. Any time the image is placed on a page, review and rewrite the alt text for that page’s specific context.

Alt Text Inheritance

Because images live in a shared Media Library and can be reused across many pages, it’s easy to assume that alt text “travels with” the image automatically. It doesn’t — at least not in the way most people expect.

There are two separate “copies” of alt text to keep track of:

1. The Media Library default — the alt text saved in the Attachment Details panel when you click on an image in the Media Library.
2. The alt text on each page — once an image is inserted into a page, its alt text becomes part of that page’s content. From that point on, the page’s copy and the Media Library’s copy are independent of each other.

These two copies do not stay in sync — with one important exception: when inserting an existing image from the Media Library, any changes you make to the alt text in the Insert Media panel will become the new Media Library default. If you want to use page-specific alt text without changing the Media Library default, insert the image first (which bakes the current default into the page), then edit the alt text directly on the page using Method 2 (explained above). That way the page gets its own alt text and the Media Library default is left untouched.

If you discover that an image’s Media Library alt text was missing, vague, or incorrect, you must go back to each page where the image appears and update the alt text there individually.

Other Inheritance Pitfalls to Watch For

• Pre-filled alt text is a starting point, not a final answer. When you select an existing image from the Media Library, its previously saved alt text may automatically populate. Always review and rewrite it to reflect the context in which the image is being used.
• Modifying alt text during insertion updates the Media Library default — but does not affect any pages where the image has already been placed. Those pages must be updated individually.
• Editing alt text on a placed image stays local to that page. It does not update the Media Library default or any other pages using the same image.
• Copied or duplicated pages carry over old alt text. If you duplicate a page or copy an image from one page to another, it will bring its existing alt text. Review and rewrite it for the new page’s context.
• Reused images need page-by-page review. If the same photo is used on multiple pages, each instance needs alt text written for that page’s specific context.
• When in doubt, treat alt text as belonging to the placement, not the file. The image file is shared and reusable; the alt text is not. Every time an image is added to a page, pause and ask: does the existing alt text (if any appears) actually describe this image’s purpose here?

Bottom line: Alt text should be reviewed every time an image is placed or reused, regardless of what alt text (if any) is already attached to it. There is no “set it once and it’s correct everywhere” shortcut.

Using AI to Generate Alt Text

AI tools can help generate alt text quickly, but they should be used as a starting point, not the final result. Human review is still necessary to ensure the alt text is accurate, meaningful, and appropriate for the page context.

When prompting AI to generate alt text, include:

• The context or purpose of the image on the page
• A 150-character limit
• The tone and topic of the surrounding content
• Whether the image links to something and what it links to

Example Prompts

• This image is on the MD program website and is a clickable link to a page about the Foundation Phase curriculum at UNC School of Medicine. Write alt text in 150 characters or less.
• Write alt text for this image in 150 characters or less. The person pictured is Dr. Jane Smith, UNC faculty, and the image appears alongside her biography on a faculty page.
• Generate alt text in 150 characters or less for this photo of Roper Hall used on a curriculum page to represent where medical education takes place.

Image Search Engine Optimization

While accessibility is the primary purpose of alt text, it also provides valuable SEO benefits. Search engines rely on alt text to understand what an image represents and how it relates to the surrounding content. Well-written alt text helps search engines:

• Better understand what your page is about
• Correctly index your images
• Improve your chances of appearing in image search results

Google places strong importance on descriptive alt text. It uses both the alt text and text surrounding the image to determine how relevant an image is to a user’s search.

Don’t use excessive or irrelevant keywords in alt text for the purpose of improving SEO. This will hurt both accessibility and SEO ranking. Instead, write natural, meaningful alt text that accurately describes the image and its purpose. This will benefit users and search engines with improved SEO being a welcome side effect.

Learn more about analytics and SEO.

Training Videos

Resources

• Alt-texts: The Ultimate Guide – learn from a vision impaired web developer the best practices for alt text.
• WebAIM’s Tips for Writing Alt Text – Guidance and tips on how to write effective alternative text.
• WebAIM’s Tutorial on Creating Accessible Images
• W3C Image Concepts – documentation on how to provide appropriate text alternatives for images.
• Harvard University – Practical guidance and examples for writing meaningful alt text that focuses on the purpose and context of an image rather than simply describing its appearance.
• University of Wisconsin: Alternative Text – Comprehensive guidance on writing effective alt text, including examples for decorative images, linked images, complex graphics, and images used in different contexts.

Continue to the Full How-To

For detailed steps on adding images, resizing them, editing captions, and more, see our How to Add an Image documentation.