Skip to main content
School of Medicine IT

Approximately 12 million people 40 years and over in the United States have vision impairment, including 1 million who are blind, 3 million who have vision impairment after correction, and 8 million who have vision impairment due to uncorrected refractive error.

Source: Fast Facts of Common Eye Disorders - Centers for Disease Control and Prevention.

Images

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.

Why Accessible Images Matter

  • Screen reader users rely on alt 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.

Key Requirements for Accessible Images

1. Provide Alt Text for All Meaningful Images

Alt text (alternative text) describes the context and purpose of an image, not just its appearance. It is required for all images that convey information or support nearby content.

  • Example: “Students practicing clinical skills during a UNC School of Medicine lab session.”
  • Avoid vague or redundant alt text such as “image of students,” “photo of,” or “decorative.”

2. Why Context Matters in Alt Text

The meaning of an image depends on its context (how it is used). Alt text should reflect the image’s purpose on the page and not describe everything visible in the image. Context ensures users understand why the image is relevant.

Example of context-based alt text variations for the same image:

  • On a clinical education page: “Student taking a patient’s blood pressure during clinical training.”
  • On a research page: “Research assistant collecting patient data for a cardiovascular study.”

3. Decorative Images Should Have Empty Alt Text

If the image adds no meaningful information, such as a divider, texture, or purely decorative graphic, leave the Alt Text field blank. This tells screen readers to skip it, reducing noise for users.

4. Images With Text

Avoid images that contain text, since screen readers, search engines, and translation tools cannot interpret text embedded inside graphics.

If an image does include text:

  • Small amounts of text → include all the text in the alt text.
  • Large amounts of text → provide the full text on the page, near the image. The alt text should briefly describe the purpose of the image and direct users to the full text description on the page.
    • Example: “Flyer for World Thrombosis Day; full event details provided below.”

5. Linked Images Must Describe the Link Destination

When an image is a link, the alt text must explain both the image’s context and link destination.

Examples

Page Context Image Appropriate Alt Text
Campus overview page Aerial view of the medical school “Aerial view of the UNC School of Medicine campus in Chapel Hill.”
Research news article Scientist working with lab equipment “Dr. Smith prepares tissue samples for cancer research study.”
Student recruitment page Students studying in a lounge “First-year medical students collaborating in a study area.”
Event recap post Speaker at a podium “Dean Burks addressing attendees at the 2025 Research Symposium.”
Faculty profile page Portrait of Dr. Garcia “Dr. Elena Garcia, Associate Professor of Neurology.”
Fundraising announcement Donor and student shaking hands “Alumni donor Michael Lee congratulates scholarship recipient Jasmine Carter.”

Other Examples

The following websites provide some great alt text examples:

6. Optimize Images

Optimizing images improves page load speed, mobile performance, and SEO. Before uploading:

  • Crop and resize images to reduce file size.
  • Image sizing:
    • Images in full-width sections: 2,000 – 3,000 pixels wide and under 800 KB.
    • Images in the body content area: under 900 pixels wide and 300 KB or less.
  • Rename files using short, descriptive names (e.g., anatomy-lab-2025.jpg instead of IMG_1234.jpg).

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.

Related Accessibility Videos

Improving Image Accessibility with Alt Text

Learn what alt text is and when to use it or omit it.
4 min. 20 sec.

Writing Effective and Accessible Alt Text

Learn how to write alt text for more complex image use, such as charts, graphs, and image links.
4 min. 12 sec.

Resources