Why Alt Text Matters

Alt text is a short description of an image. It is written in the alt attribute of the <img> element.

Screen readers can read alt text aloud, and browsers can show it if an image does not load. Good alt text helps make your static website more accessible.

Good Example

<img src="images/coding-club.jpg" alt="Students working together at a coding club">

This describes the important information in the image.

Weak And Strong Alt Text

Build It Yourself

1. Open the same index.html file from the previous image task.
2. Find your <img> element.
3. Add or improve the alt attribute.
4. Describe the meaning of the image, not just the file name.
5. If you add an image to about.html or contact.html, give that image meaningful alt text too.

Common Mistakes

• Leaving the alt attribute out completely.
• Writing vague alt text such as image or picture.
• Copying the file name into the alt text.
• Writing very long alt text when a short description would be clearer.

Success Checklist

• Each meaningful image has an alt attribute.
• The alt text explains what the image communicates.
• The alt text is short and clear.
• The page still displays the images correctly.
• The homepage image is accessible as well as visible.