Alt Text Decision Infographic

🔑

Foundational Principle: Context is Key

The right alt text depends entirely on why the image is on the page. Before following the chart 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."`

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.

↓

🖼️

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"`).

📊

Complex Image

Charts, graphs, maps, diagrams.

Step 1: Short Alt Text Identify the image in the alt attribute. alt="Bar chart of Q3 sales."

Step 2: Long Description Provide the full data and conclusions as text on the page, directly near the image (e.g., in a data table).

📝

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.

📸

Addendum: Screenshots in How-To Guides

A special case for instructional content.

Best Practice: Describe the Action & Context 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 (e.g., "Press Enter" or "press Alt+F, then A"), 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."

Logos

If the logo is a link to the homepage: The alt text must describe the action.

alt="BrandName Homepage"

If the logo is just branding (not a link): The alt text should identify the brand.

alt="BrandName"

Decorative Icons (SVGs, Font Icons)

If an icon is next to text that describes its purpose (e.g., a magnifying glass icon in a "Search" button), the icon is decorative and should be hidden from screen readers.

<button>
  <i class="..." 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=""`).

The Alt Text Decision Process