The Alt Text Decision Process

A comprehensive guide to creating effective and accessible alternative text for images

🔑 Foundational Principle: Context is Key

The right alt text depends entirely on why the image is on the page. Before following the decision process below, ask yourself: "What information does this image add to the content?" The same image can have different alt text in different contexts.

Example: A photo of a university server rack

For a prospective student brochure:
alt="A student connecting a network cable in a modern, well-lit university data center."

For an IT department's incident report:
alt="Server rack E-12 with a red error light blinking on the third SAN array."

START HERE

Is the image purely decorative?

A decorative image is one that adds visual flair to a webpage but provides no meaningful information that isn't already conveyed by the surrounding text. Because it's purely for aesthetic purposes, it should be ignored by screen readers to avoid cluttering the user's experience.

Key Characteristics

Examples

  1. Floral Borders: A fancy border around a page title or section. The design itself isn't informational.
  2. Generic Stock Photos: A picture of people smiling in a meeting on a "Contact Us" page. The image doesn't tell the user anything the text doesn't already.
  3. Divider Lines: An ornamental graphic used to separate sections of text. Its function is purely structural and visual.
  4. Icons with Text: An envelope icon placed right next to the text link "Email Us." The icon is redundant because the text already describes the action.
↓ YES

Use an Empty Alt Attribute

This tells screen readers to ignore the image, as it adds no informational value.

<img src="..." alt="">

↓ NO

Image is Informative

The image conveys information and needs alt text. Proceed to the next step.

NEXT STEP: What type of informative image is it?

🖼️ Simple Image

Photos, icons, illustrations

Rule: Write a concise description of the image's content and function.

Avoid: Phrases like "image of" or "picture of".

For Links: Alt text must describe the link's destination (e.g., alt="Read our full annual report").

📝 Image of Text

Text rendered as an image

Rule: The alt text must be an exact transcription of the text in the image.

Best Practice: Avoid using images of text. Use styled HTML and CSS instead for better accessibility and responsiveness.

📸 Screenshots in How-To Guides

A special case for instructional content

Best Practice: The alt text for a screenshot in a guide should describe the action and confirm the result of a step. The surrounding text gives instructions, and the alt text confirms the outcome for keyboard-only users.

Instruction in Text:
"Navigate to 'File', then select 'Save As...' to open the dialog box."

Alt Text for the Screenshot:
alt="The 'Save As' dialog box is now open, with the file name field highlighted and ready for input."

📊 Complex Images: Charts, Graphs, Maps, and Diagrams

Complex images require a two-part approach: a brief alt text that identifies the image type and purpose, plus a detailed long description that conveys all the meaningful data and insights.

The Two-Part Approach

1 Short Alt Text: Identify what type of visual it is and its main topic

2 Long Description: Provide all data, trends, and conclusions in accessible text format

Charts and Graphs

Charts and graphs present quantitative data visually. Users need both the specific data points and an understanding of what the data means.

Bar Charts and Column Charts

Short Alt Text:
alt="Bar chart showing Q3 2025 sales by region"

Bar chart showing Q3 2025 sales by region
Long Description (on page, near image):
Q3 2025 sales performance by region:
• Northeast: $2.4 million (35% of total)
• Southeast: $1.8 million (26% of total)
• Midwest: $1.5 million (22% of total)
• West: $1.2 million (17% of total)

Key insight: Northeast region leads in sales with a 35% market share, while the West region shows opportunity for growth at 17%.

Pie Charts

Short Alt Text:
alt="Pie chart of student enrollment by college"

Pie chart of student enrollment by college


Long Description:
Fall 2025 enrollment breakdown across colleges (total: 40,000 students):
• College of Engineering: 12,000 students (30%)
• College of Arts & Sciences: 10,000 students (25%)
• College of Business: 8,000 students (20%)
• College of Education: 6,000 students (15%)
• Other colleges: 4,000 students (10%)

Engineering and Arts & Sciences together account for over half of total enrollment.

Best Practices for Charts and Graphs

  • Always include actual data values, not just visual descriptions
  • Explain trends, patterns, or relationships shown in the data
  • Identify the highest and lowest values when relevant
  • State the time period or categories being compared
  • Mention units of measurement (dollars, percentages, counts)
  • Consider providing a data table alongside complex visualizations

Maps

Maps present spatial or geographic information. The level of detail needed depends on the map's purpose.

Campus Maps: Designated Outdoor Safe Meet Areas (DOSMAs)

Short Alt Text:
alt="Map of Designated Outdoor Safe Meet Areas and Blue Light Emergency Phones for the Engineering and Athletics district."

Map of Designated Outdoor Safe Meet Areas and Blue Light Emergency Phones for the Engineering and Athletics district.
Long Description (Integrated Accessibility):

This map identifies 15 Designated Outdoor Safe Meet Areas (red stars) and 4 Blue Light Emergency Phones (blue phone icons) throughout the Engineering and Athletics district.

Blue Light Emergency Phone Locations

Designated Outdoor Safe Meet Areas (15 Locations)

Northwest Quadrant
Southwest Quadrant
Engineering Key (Central Section)
Northeast and Southeast Sections

Diagrams and Flowcharts

Diagrams show relationships, processes, or structures. Users need to understand both the components and how they connect.

Process Flowcharts

Short Alt Text:
alt="Flowchart of the course withdrawal process"

Flowchart of the course withdrawal process


Long Description:
Course Withdrawal Process:

Step 1: Student initiates withdrawal request
Decision point: Is it before the census date?
• If YES → Proceed to automatic approval (go to Step 3)
• If NO → Requires advisor approval (continue to Step 2)

Step 2: Advisor reviews request
Decision point: Does advisor approve?
• If YES → Proceed to Step 3
• If NO → Withdrawal denied, student must remain enrolled or appeal

Step 3: Registrar processes withdrawal
Result: Course removed from schedule, W grade recorded on transcript

Final outcomes:
• Approved withdrawal: W on transcript, no tuition refund after census
• Denied withdrawal: Student remains enrolled, must continue attending or appeal decision

Organizational Charts

Short Alt Text:
alt="Organizational chart for IT Accessibility Services department"

Organizational chart for IT Accessibility Services department


Long Description:
IT Accessibility Services organizational structure:

Director of Accessibility (top level):
Reports to: Chief Information Officer

Direct reports to Director:
1. Accessibility Compliance Manager
   • Oversees: 2 Compliance Specialists
2. Training and Outreach Coordinator
   • Oversees: 3 Training Specialists
3. Technical Accessibility Lead
   • Oversees: 4 Accessibility Developers

Total department size: 11 staff members across three functional areas focused on compliance, education, and technical implementation.

Technical Diagrams

Short Alt Text:
alt="Network architecture diagram showing TTU's accessibility testing infrastructure"

Network architecture diagram showing TTU\'s accessibility testing infrastructure


Long Description:
Network Architecture for Accessibility Testing:

Layer 1 - User Access:
• Faculty/Staff workstations connect via campus network
• External users connect through VPN gateway

Layer 2 - Application Layer:
• Silktide scanning server (monitors all public web pages)
• Modern Campus CMS (content management)
• Canvas LMS (learning management system)

Layer 3 - Testing Tools:
• Automated scanners: Axe, WAVE, Pa11y
• Manual testing station with screen readers (JAWS, NVDA)

Layer 4 - Data Storage and Reporting:
• PostgreSQL database (stores scan results)
• Reporting dashboard (displays metrics and trends)

Data Flow: Content flows from CMS → Scanners → Database → Dashboard, with continuous automated scanning every 24 hours and manual testing on-demand.

Best Practices for Diagrams and Flowcharts

  • Describe the structure or hierarchy first (top to bottom, left to right)
  • List all components/nodes and their relationships
  • Explain decision points and their possible outcomes
  • Describe the flow of information or process direction
  • For complex diagrams, consider breaking into multiple descriptions or providing a separate text-based outline
  • Include any color-coded information using text labels

Infographics

Infographics combine text, data, and visuals. They require comprehensive descriptions that capture all informational elements.

Short Alt Text:
alt="Infographic about web accessibility statistics and impact"

Infographic about web accessibility statistics and impact


Long Description:
Web Accessibility Impact and Statistics:

Who Benefits:
• 1 in 4 Americans (26%) live with a disability
• 7.6 million students with disabilities in US schools
• Millions more with temporary impairments (broken arms, eye strain, etc.)

Common Accessibility Barriers:
1. Missing alt text on images (38% of websites)
2. Insufficient color contrast (36% of websites)
3. Empty links or buttons (31% of websites)
4. Missing form labels (28% of websites)

Legal Landscape:
• 2022: 2,387 federal accessibility lawsuits filed
• 72% increase from 2021
• Average settlement: $150,000-$250,000

Benefits Beyond Compliance:
• 71% of users with disabilities will leave a website that's difficult to use
• Accessible sites have 50% lower bounce rates
• Better SEO: 78% of accessibility fixes improve search rankings

Conclusion: Accessibility isn't just legal compliance—it's good business practice that improves user experience for everyone.

General Guidelines for All Complex Images

Where to Place Long Descriptions

Best option: Include the long description directly on the page, immediately before or after the image. This benefits all users, not just screen reader users.

Alternative: If space is limited, use one of these methods:

Essential Elements of Long Descriptions

  • Context: What is being measured or shown?
  • Data: Include all relevant numbers, percentages, or values
  • Trends: Describe patterns, changes over time, or relationships
  • Insights: What conclusions can be drawn from the data?
  • Structure: Explain how information is organized or grouped
  • Comparisons: Highlight significant differences or similarities
Using HTML5 Details Element:
<figure>
  <img src="chart.png" alt="Line graph of enrollment trends 2020-2025">
  <details>
    <summary>View full data description</summary>
    <p>Enrollment increased from 35,000 in 2020 to 42,000 in 2025...</p>
  </details>
</figure>

Common Scenarios and Best Practices

Logos

If the logo is a link to the homepage:
alt="Texas Tech University Homepage"

If the logo is just branding (not a link):
alt="Texas Tech University"

Decorative Icons

If an icon is next to text that describes its purpose, the icon is decorative:

<button>
  <i class="icon-search" aria-hidden="true"></i>
  Search
</button>

Avoid Redundancy

Do not repeat information from a caption or surrounding text in the alt text. They should complement each other.

If the caption fully describes the image, the alt text can be empty (alt="").

Image Buttons

Alt text must describe the button's action:

alt="Submit form"
alt="Print this page"
alt="Download PDF report"

General Alt Text Guidelines

Feb 5, 2026