Alt Text

This lesson explains Alt Text in web accessibility with clear examples, practical use cases, and implementation best practices.

Alt Text Overview

Alternative Text (Alt Text) is a textual description added to images using the HTML alt attribute. It enables screen readers to describe images to users who cannot see them, improves accessibility, and helps search engines understand image content.

Every meaningful image should include concise, descriptive alt text that communicates its purpose. Decorative images should use an empty alt="" attribute so screen readers ignore them instead of reading unnecessary information.

Feature	Benefit
Screen Readers	Describe images to visually impaired users.
SEO	Helps search engines understand image content.
Accessibility	Supports WCAG image accessibility requirements.
Image Loading Errors	Displays alternative text if an image fails to load.
User Experience	Provides context for meaningful images.
Best Practice	Write short, descriptive, and relevant alt text.

Alt Text Example

<img
  src="team.jpg"
  alt="Frontend development team collaborating in a meeting">

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

The first image contains meaningful information, so it includes a descriptive alt attribute. The second image is purely decorative and uses an empty alt="" attribute so screen readers ignore it.

When to Use Different Types of Alt Text

The purpose of an image determines the type of alternative text it should have. Choosing the appropriate approach improves accessibility while avoiding unnecessary screen reader announcements.

Image Type	Alt Text	Example
Informative Image	Describe the content.	Company team photo.
Functional Image	Describe the action.	Search icon: "Search".
Decorative Image	Use alt=""	Background graphics.
Charts and Graphs	Provide a brief summary.	Sales growth chart.
Logos	Describe the brand.	PHP Kingdom logo.
Complex Images	Use concise alt text with nearby detailed explanation.	Infographics and diagrams.

Alt Text Best Practices

Best Practice	Description
Be Descriptive	Describe the image clearly and accurately.
Keep It Concise	Use short, meaningful descriptions.
Match the Context	Describe the image based on its purpose on the page.
Use Empty Alt for Decoration	Decorative images should use alt="".
Avoid Redundancy	Do not repeat surrounding text unnecessarily.
Skip "Image of"	Screen readers already identify images automatically.

Common Alt Text Mistakes

Leaving the alt attribute completely missing.
Using file names such as "photo1.jpg" as alt text.
Writing "image of" or "picture of" unnecessarily.
Using keyword stuffing for SEO.
Providing lengthy paragraphs as alt text.
Adding descriptive alt text to decorative images.
Using the same alt text for different images.
Ignoring the purpose of functional images such as icons and buttons.

Key Takeaways

Alt text describes images for screen readers and search engines.
Every meaningful image should have descriptive alternative text.
Decorative images should use an empty alt="" attribute.
Keep alt text concise, accurate, and relevant to the page context.
Avoid keyword stuffing and unnecessary phrases like "image of".
Well-written alt text improves accessibility, usability, and SEO.

Pro Tip

A simple way to write effective alt text is to ask yourself, "If someone couldn't see this image, what information would they need?" Write only that information—no more and no less. This creates clear, useful descriptions for both accessibility and SEO.