Alt Text vs. Title Attribute
What is the difference between the alt attribute and the title attribute on images?
What is alt text vs. title attribute?
The alt attribute and the title attribute serve different purposes on HTML images. The alt attribute provides a text alternative that screen readers announce to visually impaired users and that displays when an image fails to load. The title attribute generates a tooltip on mouse hover and provides supplementary information. Alt is required by WCAG for non-decorative images; title is optional and not reliably accessible.
The alt attribute provides a required text alternative for screen readers and is the primary way assistive technologies describe images, while the title attribute generates an optional mouse-hover tooltip that is not reliably accessible to keyboard or mobile users. Always use alt for accessibility compliance and reserve title for supplementary, non-essential details.
Why does alt text vs. title attribute matter?
Confusing these two attributes is a common mistake that leads to accessibility failures. Developers sometimes add a title attribute thinking it serves the same purpose as alt text, leaving the alt attribute empty or missing. Screen readers primarily use the alt attribute, not the title attribute, to describe images. Relying on the title attribute alone means screen reader users receive no meaningful description of the image, and mobile users never see tooltips since hover is not available on touch devices.
Key statistics
Missing alternative text for images was found on 54.5% of home pages, making it the second most common WCAG failure detected.
Source: WebAIM Million
Only 4% of screen reader users have their settings configured to announce title attributes, meaning information placed solely in title is missed by 96% of screen reader users.
Source: WebAIM Screen Reader Survey
How to fix it
-
1
Always provide a descriptive alt attribute on every non-decorative image. This is a WCAG 2.1 Level A requirement and the primary way screen readers convey image content.
-
2
Use the title attribute only for supplementary, non-essential information that adds context but is not required to understand the image. Never duplicate the alt text in the title attribute.
-
3
For decorative images that convey no information, use an empty alt attribute (alt="") and omit the title attribute entirely so screen readers skip them.
-
4
Do not rely on the title attribute for any critical information since it is not accessible to keyboard-only users, mobile users, or most screen reader configurations by default.
-
5
Test with a screen reader (VoiceOver, NVDA, or JAWS) to confirm that every meaningful image is announced with its alt text, not its title attribute.
Code example
<img src="/chart.png" title="Sales growth chart">
<!-- Missing alt attribute! Screen readers may ignore the title or announce nothing useful -->
<img src="/team.jpg" alt="Team photo" title="Team photo">
<!-- Redundant: title duplicates alt, adding no value and causing screen readers to repeat --><img src="/chart.png" alt="Bar chart showing 45% sales growth from Q1 to Q4 2025">
<!-- Clear alt text describes the image content for screen readers -->
<img src="/team.jpg" alt="The eiSEO team at the 2025 company retreat" title="Left to right: Sarah, James, Priya, and Marcus">
<!-- Alt describes the image; title adds supplementary detail available on hover -->Side-by-side comparison
Alt Attribute
The HTML alt attribute provides a text alternative for images that is announced by screen readers and displayed when the image fails to load.
Pros
- Required by WCAG 2.1 Level A for non-decorative images
- Announced by all screen readers as the primary image description
- Displayed as fallback text when images fail to load
- Used by search engines as a primary signal for image indexing and ranking
Cons
- Not visible to sighted users when the image loads successfully
- Limited to describing the image itself — not ideal for supplementary context
- Should be concise (under 125 characters) which limits detail
Title Attribute
The HTML title attribute generates a tooltip that appears when users hover over an image with a mouse pointer.
Pros
- Provides visible supplementary information on mouse hover
- Can add context beyond what the alt text describes
- Does not interfere with or override the alt text announcement
Cons
- Not accessible to keyboard-only users or screen reader users by default
- Invisible on mobile and touch devices where hover is unavailable
- Not a substitute for alt text and does not satisfy WCAG requirements
- Tooltip display is inconsistent across browsers and assistive technologies
- Carries minimal SEO weight compared to the alt attribute
| Aspect | Alt Attribute | Title Attribute |
|---|---|---|
| WCAG requirement | Required for non-decorative images | Not required |
| Screen reader support | Announced by all screen readers | Ignored by most screen readers by default |
| Visibility | Shown only when image fails to load | Shown as tooltip on mouse hover |
| Mobile support | Fully supported | Not accessible (no hover on touch devices) |
| SEO impact | Primary signal for image search ranking | Minimal SEO value |
| Purpose | Describes image content for accessibility | Provides supplementary context on hover |
When to use each
- Always use the alt attribute on every non-decorative image to describe its content or function for screen reader users.
- Use an empty alt attribute (alt="") on purely decorative images so screen readers skip them entirely.
- Use the title attribute only when you have genuinely supplementary information that adds context beyond the alt text, such as photo credits or additional details.
- Never use the title attribute as a replacement for the alt attribute — they serve fundamentally different purposes.
- For images where both are used, ensure the alt text fully describes the image independently and the title provides distinct, additional information.
Frequently asked questions
Related topics
Image Alt Text
Alt text (the HTML alt attribute) is a short text description of an image that screen readers announce to visually impaired users. It also displays when an image fails to load and is used by search engines to understand image content. Every non-decorative image on a page must have meaningful alt text that conveys the image's purpose or information.
Image Optimization
Image optimization is the process of delivering images at the correct size, format, and compression level while providing proper HTML attributes (alt text, width, height, lazy loading). Unoptimized images are the number one cause of slow page loads on the web, directly impacting Core Web Vitals scores that Google uses as a ranking signal.
ARIA Violations
ARIA (Accessible Rich Internet Applications) attributes provide extra semantic information to assistive technologies when native HTML elements are insufficient. ARIA violations occur when these attributes are used incorrectly — for example, applying an invalid role, using aria-labelledby to reference a non-existent ID, or adding redundant ARIA roles to elements that already have implicit semantics.
Scan your site for accessibility issues
eiSEO automatically detects and helps you fix issues like this across your entire site.