Texas Tech University

Images & Alt Text

Quick Start: What You Need to Know

Alternative text (alt text) is a written description of an image that helps people who can't see the image understand its content and purpose. Good alt text conveys the same information as the image itself.

Immediate Actions:

  • Ensure every <img> tag has an alt attribute
  • Use empty alt text (alt="") for purely decorative images
  • Describe the destination if the image is a link
  • Include all text visible in the image within the alt text
  • End your alt text with a period so the screen reader pauses
  • Provide detailed descriptions for complex charts or graphs nearby

Why This Matters

Alt text is essential for blind users relying on screen readers, but it benefits everyone. It displays when images fail to load and helps search engines index your content. Think of writing alt text like describing a photo to a friend over the phone: share what matters in that specific context.

The Alt Text Decision Tree

Use this logic flow to determine exactly what to write for any image.

1. Is it Decorative?

Does it add information? If no (eye candy, borders, spacers):

Action: Use an empty attribute: alt=""

2. Is it a Link?

Does clicking it take you somewhere? If yes:

Action: Describe the destination or action (e.g., "Go to Homepage"), not the image.

3. Does it contain Text?

Are there words in the picture? If yes:

Action: Transcribe the text exactly within the alt attribute.

4. Is it Complex?

Is it a chart, graph, or diagram? If yes:

Action: Use a short summary in the alt text AND provide a full description in the main body text.

What to Look For: Detailed Checklist

Writing Quality & Technical Rules

  • Length: Aim for about 125 characters as a general goal. If you find your description becoming significantly longer, it may be better to use a simple Alt Text summary and place the detailed explanation in the main content next to the image.
  • Phrasing: Never start with "Image of," "Picture of," or "Graphic of." Screen readers announce "Graphic" automatically. You would be making them say "Graphic... Image of..."
  • Punctuation: Always end your alt text with a period. This forces the screen reader to pause slightly before reading the next element, preventing run-on sentences.
  • Context Matters: The same image of a dog might need different alt text on a "Pet Adoption" page ("Golden Retriever puppy needing a home") vs. a "Veterinary" page ("Dog being examined for fleas").
  • Avoid Redundancy: If an image is immediately followed by a caption or heading that says "Dr. Smith," do not put "Dr. Smith" in the alt text. It creates stuttering for the user. Use alt="" if the text is right next to it.
  • Transcription: If the image says "Fall 2025 Registration Open," the alt text must not just say "Registration Banner." It must contain the actual text.
  • Logos: Logos are the exception to the "no text in images" rule, but they still require descriptive alt text (e.g., "Texas Tech University").
  • Attribute Presence: Every <img> tag must have an alt attribute. If it is missing, some screen readers will read the file name (e.g., "DSC_00492.jpg"), which is a terrible experience.
  • File Names: Never rely on the file name to convey meaning. Users won't see it, and if the alt attribute is missing, hearing it is confusing.
  • CSS Backgrounds: Purely decorative elements (swooshes, patterns) should ideally be loaded via CSS background-image, which automatically hides them from screen readers.

Code Examples & Best Practices

Informative Images

Texas Tech graduates throwing their caps in the air at commencement ceremony.

Bad Example: Vague or missing alt

<img src="graduation.jpg" alt="photo">
"Photo" tells the user nothing about the image content.

Good Example: Descriptive alt text

<img src="graduation.jpg" alt="Texas Tech graduates throwing their caps in the air at commencement ceremony">
This description provides context and meaning, allowing the user to visualize the scene.

Decorative Images

Bad Example: Alt text on decoration

<div class="feature-box">
  <img src="decorative-swoosh.png" alt="red decorative swoosh">
  <h2>Student Services</h2>
</div>
This creates unnecessary noise for screen reader users.

Good Example: Empty alt attribute

<div class="feature-box">
  <img src="decorative-swoosh.png" alt="">
  <h2>Student Services</h2>
</div>
The empty alt attribute tells assistive technology to ignore the image entirely.

Complex Images (Charts)

Good Example: Alt + Detailed Caption

<figure>
  <img src="enrollment-chart.png" 
       alt="Bar chart showing Texas Tech enrollment growth from 2018-2024">
  <figcaption>
    <strong>Enrollment Trends:</strong> Texas Tech enrollment has grown 
    steadily from 38,000 students in 2018 to 42,500 in 2024. The largest 
    increase occurred between 2020-2021 (3,000 students), with consistent 
    growth of approximately 1,000 students per year in other periods.
  </figcaption>
</figure>
The alt text identifies the chart, while the figcaption provides the detailed data for all users.

WCAG 2.1 Success Criteria Summary

The following criteria apply to images and text alternatives:

1.1.1 Non-text Content Level A

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. This is the foundational requirement for images.

1.4.5 Images of Text Level AA

If the technologies being used can achieve the same visual presentation, use text rather than images of text, except for logos or when a particular presentation of text is essential.

1.4.11 Non-text Contrast Level AA

Visual information required to identify user interface components and meaningful graphics must have a contrast ratio of at least 3:1 against adjacent colors.

Real-World Impact: Why This Matters

Story 1: Research Presentation
When data visualizations aren't accessible

A graduate student in economics who is blind uses JAWS screen reader to access course materials online. When her professor posted research papers with complex charts and graphs, her education hit a barrier.

One paper included a crucial scatter plot illustrating the correlation between educational levels and income over 50 years. The image had alt text that said "Figure 3." The alt text failed to provide any relevant information about what the trend was or how it supported the paper's argument.

She emailed her professor, who realized now that the charts were not accessible. The professor spent an hour writing detailed descriptions of each chart—describing the axes, trends, outliers, and significance. Everyone could now follow the research narrative.

Other students in the class found that having the data explained in words alongside the visual actually helped them understand the research better. The professor now includes detailed descriptions of all data visualizations in their papers. Good alt text helped everyone.

Story 2: The Decorative Image Overload
Too much information can be as bad as not enough

A student uses a screen reader due to a recent vision impairment. He was trying to register for fall courses on Texas Tech's registration portal. The page had a nice design with decorative red swooshes, decorative Double T logos in the corners, and decorative background patterns—all to make the page visually appealing.

The problem? Every single decorative image had descriptive alt text. As he navigated the page, his screen reader announced: "Decorative red swoosh... Decorative Double T logo... Background pattern... Decorative line... Decorative red box..." It took him three full minutes just to get past the header decorations to the actual registration form.

After reporting the issue, the web team updated all decorative images to use empty alt text (alt=""). The next time the student visited, his screen reader skipped right past the decorations and went straight to the content that mattered: "Fall 2025 Course Registration. Select your courses below."

The student could now register in under two minutes—the same time it took sighted students. The visual design stayed exactly the same, but the code was now smarter about what mattered and what didn't.

Story 3: The Unexpected Benefits of Good Alt Text
How accessibility helps everyone
  • The SEO Boost: When Texas Tech's Communications department started writing thorough, descriptive alt text for all photos on news stories, something unexpected happened. Their web traffic from Google Image Search increased by 40%. Search engines were finally able to understand and index their photos, bringing prospective students who were searching for "Texas Tech campus" or "engineering labs at Texas Tech" directly to relevant content.
  • The Context Understanding: A biology professor is creating course materials and finds a historical photo of early Texas Tech in the university archives. The image has excellent alt text: "1925 photograph showing the original Administration Building under construction, with workers laying the foundation and the distinctive Spanish Renaissance architecture beginning to take shape." This descriptive alt text helps her understand the historical context even before the image loads, and she quotes the description in her lecture notes. Students get historical context whether they can see the image or not.
  • The Voice Search Revolution: As voice assistants like Alexa and Siri become more common, good alt text helps these tools describe images to users. When someone asks their smart speaker to "tell me about Texas Tech's campus," the device can use image alt text to provide visual descriptions. Accessible websites are future-proof websites.

Additional Resources

Texas Tech Resources

WCAG Guidelines and Understanding Documents

Testing Tools

Resources

Student Disability Services

Support and Accommodations

Human Resources (ADA)

Workplace accommodations and compliance

Contact Us

Reach out to our accessibility team

Report a Barrier

Encountered an issue? Let us know!

Digital Accessibility

© 2025  Texas Tech University Nov 25, 2025 11:33 AM