HTML Course 11.2 Correct use of the alt attribute on images

11.2 Correct Use of the alt Attribute on Images

The alt attribute provides alternative text for an image. It is crucial for accessibility, SEO and fallback content when images cannot be loaded. Every <img> must include an alt attribute—even if it is deliberately left empty.

1. Why the alt Attribute Matters

• Screen Readers: Reads the alt text aloud for visually impaired users.
• Broken Images: Displays alternative text when the image fails to load.
• SEO: Helps search engines understand image content and index pages accurately.
• Context: Provides context when CSS or images are disabled.

2. Accessibility Considerations

• WCAG 2.1 requires all informative images to have non-empty alt text.
• Decorative images should use an empty alt='' so screen readers skip them.
• Complex diagrams may require a longer description via longdesc or adjacent text.

3. Guidelines for Writing alt Text

1. Be concise: 125 characters or fewer if possible.
2. Be descriptive: Convey function or meaning, not appearance.
3. Avoid phrases like “image of” or “picture of.” Screen readers announce it’s an image.
4. For purely decorative images, use alt='' (empty string).
5. If image is a link, describe the link destination or purpose.
6. For charts or complex graphics, provide a brief summary plus a longer description elsewhere.

4. Common Use Cases and Examples

4.1 Informative Image

4.2 Decorative Image

4.3 Complex Image with Long Description

4.4 Image as a Link

5. SEO and Performance Benefits

• Search engines index alt text, improving image search visibility.
• Users on slow connections understand content before image loads.
• Proper alt support may reduce bounce rates.

6. Common Pitfalls and Anti-Patterns

Missing alt Attribute

Violates HTML5 specs; screen readers often announce the file path.

Redundant alt Text

Avoid “image of John Doe”; simply use “John Doe speaking at conference.”

Overly Long alt Text

Lengthy descriptions overwhelm users; break out long text into adjacent paragraphs or use longdesc.

Using alt for SEO Keyword Stuffing

Alt text should describe the image, not jam keywords.

7. Checklist for Proper alt Usage

• Every <img> has an alt attribute.
• Informative images: meaningful, concise text.
• Decorative images: alt=''.
• Linked images: describe the link target.
• Complex graphics: brief alt, with detailed text nearby or via longdesc.

Summary

Correct use of the alt attribute ensures your content is accessible, SEO-friendly, and robust. Always consider the user’s context, and write alt text that conveys the essential information of each image.