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:

Aerial view of the Sydney Opera House with the Sydney Harbour Bridge and city skyline in the background.
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:

Wayne Enterprises home
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.

Venn diagram depicting content category relationships. Detailed description below
Image description

HTML content categories include:

  1. Flow content - the base content type
  2. Metadata content - slightly overlapping Flow
  3. Sectioning content - within Flow
  4. Heading content - within Flow
  5. Phrasing content - within Flow, overlapping Interactive and Embedded
  6. Interactive content - within flow, overlapping Phrasing and Embedded
  7. 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>

Photo by Caleb on Unsplash

Testing home