The alt attribute is an HTML code element that specifies alternative text to display when an image cannot render. Also called "alt text," it lives inside image tags to describe content or function for users who cannot see the image. Marketers need alt attributes for legal compliance, search visibility, and ensuring content survives broken images or slow connections.
What is Alt Attribute?
The alt attribute attaches to <img>, <area>, and <input type="image"> elements to provide fallback text when visual display fails. It holds a plain text string that represents the image's purpose or content. The attribute first appeared in the HTML 1.2 draft in 1993 and became a formal requirement for <img> and <area> elements with the release of HTML 4.01 in 1999 (Wikipedia). All modern browsers support the alt attribute, which reflects the HTMLImageElement.alt property in the Document Object Model (MDN Web Docs).
Why Alt Attribute matters
- Legal protection: Missing alt text has triggered accessibility lawsuits citing violations of the Americans with Disabilities Act (ADA), including National Federation of the Blind v. Target Corp. in 2006 (Wikipedia).
- Screen reader accessibility: Blind users rely on screen readers like Orca or text-based browsers like Lynx to read alt text aloud or display it instead of images (Wikipedia).
- Image search traffic: Google Images uses alt attribute content to index and display relevant images, treating the text similarly to regular page content (Wikipedia).
- Resilience: When images fail to load or users disable images to save bandwidth, alt text preserves the page's informational meaning without changing context (MDN Web Docs).
- Machine readability: Alt text makes images machine-readable, improving overall search engine optimization beyond image search (Wikipedia).
How Alt Attribute works
The alt attribute reflects the HTMLImageElement.alt property in the Document Object Model (DOM). When a browser encounters an <img> element, it attempts to load the source file specified in the src attribute. If the image fails to load, loads slowly, or the user employs a screen reader, the browser displays or vocalizes the alt attribute's string value instead. Search engine crawlers extract this text to understand image content without visual processing. The W3C recommends that every image displayed through HTML have an alt attribute, though the attribute does not need to contain text (Wikipedia).
Best practices
- Describe function, not appearance: For a logo linking to a homepage, use "Company Name Home" rather than describing the logo's color or shape (Wikipedia).
- Leave empty for decoration: Use
alt=""for images that add no information, allowing screen readers to skip them (W3C Web Accessibility Initiative). - Never duplicate caption: If nearby text already describes the image, use empty alt to avoid redundant screen reader announcements (W3C Web Accessibility Initiative).
- Distinguish from title: Use the
titleattribute for tooltips, not thealtattribute. Internet Explorer incorrectly rendered alt as tooltips before version 8 (released 2009), causing widespread misuse (Wikipedia). - Keep it concise: The alt attribute handles short descriptions; use the
longdescattribute or nearby text for complex charts or graphs requiring detailed explanation (Wikipedia).
Common mistakes
- Mistake: Using alt text as tooltip text. This stems from legacy Internet Explorer behavior fixed in 2009. Fix: Use the
titleattribute for hover text andaltfor accessibility. - Mistake: Leaving alt empty on informational images. A 2021 Google Lighthouse audit found 27% of alt attributes were empty even though most of those images conveyed information (Wikipedia). Fix: Provide descriptive text for all images that contribute meaning.
- Mistake: Describing visual details instead of purpose. Fix: For a search icon button, use "Search" not "Magnifying glass."
- Mistake: Omitting alt attributes entirely. Fix: Include the attribute even if empty; without it, screen readers may read the image filename aloud, creating confusion (Wikipedia).
Examples
Informative image:
<img src="chart.png" alt="Q3 revenue increased 15% over Q2">
This describes the information conveyed by the chart, not its appearance.
Functional image (link):
<a href="/"><img src="logo.png" alt="Example Corp Homepage"></a>
This tells the user where the link leads.
Decorative image:
<img src="border.gif" alt="">
Empty alt tells assistive technology to ignore the decorative border.
FAQ
What is the alt attribute?
It is an HTML attribute within the <img> tag that specifies alternative text displayed when the image cannot render or when accessed via assistive technology (W3Schools).
Is alt text required for SEO? While not explicitly stated as a ranking factor for general web search, alt text serves as a factor for image search rankings and improves machine readability of page content (Wikipedia).
What is the difference between alt text and title text? Alt text provides accessibility and functional replacement for missing images. Title text creates hover tooltips. They serve different purposes and should not be used interchangeably (W3Schools).
When should I use empty alt text?
Use alt="" for purely decorative images, redundant images already described by nearby text, or images containing text that appears verbatim elsewhere on the page (W3C Web Accessibility Initiative).
Can missing alt text cause legal issues? Yes. The U.S. Department of Justice cites missing alt attributes as an example of ADA barriers, and courts have ruled against major retailers for non-compliance (Wikipedia).
How long should alt text be?
Keep alt text short and concise. For longer descriptions of complex images, use the longdesc attribute or include descriptive text in the page content near the image (Wikipedia).
