Reviewing the four image types
Review the four different image types.
Type 1: Decorative image
Decorative example 1:
The desert
HTML markup
<img src="decorative.jpg" alt="">Type 2: Informative images
Informative example 1:
HTML markup
<img src="informative.png" alt="Aerial view of the
Sydney Opera House with the Sydney Harbour
Bridge and city skyline in the background.">Type 3: Functional images
Functional example 1:
HTML markup
<button>
<img src="functional.png" alt="Dismiss">
</button>Functional example 2:
HTML markup
<a href="#">
<img src="#" alt="Wayne Enterprises home">
</a>This does not need to be a functional image as there is text available that describes the function. So, it is a decorative image instead:
HTML markup
<button>
<img src="functional.png" alt="">
Dismiss
</button>Type 4: Complex images
Complex example 1:
Note: aria-details currently has poor assistive technology support and should not be relied upon as the sole way to provide additional detailed information. In this example, screen reader users can still navigate to the Image description disclosure and access the full description.
Image description
HTML content categories include:
- Flow content - the base content type
- Metadata content - slightly overlapping Flow
- Sectioning content - within Flow
- Heading content - within Flow
- Phrasing content - within Flow, overlapping Interactive and Embedded
- Interactive content - within flow, overlapping Phrasing and Embedded
- Embedded content - within Flow, overlapping Phrasing and Interactive
HTML markup
<figure class="example">
<img src="image-complex.png"
alt="Venn diagram depicting content category
relationships. Detailed description below"
aria-details="complex-image-details"
>
<figcaption>
<details id="complex-image-details">
<summary>Image description</summary>
<div class="testing-images">
<h3>HTML content categories include:</h3>
...
</div>
</details>
</figcaption>
</figure>