<img src="images/decorative-divider.png"
alt="">The empty alt attribute tells assistive technology that the image does not need to be announced as meaningful content.
Do not omit the alt attribute entirely just because an image is decorative. An absent alt attribute and an explicitly empty alt attribute have different accessibility implications.
C. Functional Images
An image used as the only content of a link or button should have alternative text that describes the action or destination.
<a href="/courses/">
<img src="images/courses-icon.png"
alt="Browse courses">
</a>In this example, the link's purpose is to open the courses page. The alt text communicates that purpose.
D. Images with Captions
When an image needs a visible caption, use figure and figcaption.
<figure>
<img src="images/html-structure.png"
alt="Diagram showing the head and body sections of an HTML document">
<figcaption>
Basic structure of an HTML document.
</figcaption>
</figure>The figure element groups self-contained content, while figcaption provides its caption. A caption does not automatically replace the need for appropriate alt text.
6. When Should Alt Text Be Empty?
Use an empty alt attribute when the image is purely decorative or its information is already adequately represented in adjacent content and the image adds no additional meaningful information.
Example
<p>
Learn HTML today.
<img src="images/star-decoration.png" alt="">
</p>The star is decorative, so announcing it to a screen reader would add unnecessary noise.
Common Alt Text Mistakes
- Leaving alt missing on meaningful images.
- Using filenames such as IMG_1234.jpg as descriptions.
- Repeating entire paragraphs in alt text.
- Using keyword-stuffed descriptions.
- Describing an image's appearance when its actual purpose is to perform an action.
- Adding redundant alt text to decorative images.
7. Image Width and Height Attributes
The width and height attributes provide the image's intended dimensions in CSS pixels. They help the browser reserve space before the image finishes loading.
Example
<img src="images/profile.jpg"
alt="Profile of a web developer"
width="400"
height="300">These dimensions describe the intended display size and aspect ratio. The browser does not need to download the image first to learn the layout space reserved by these attributes.