Images are a very common part of most websites. Help make sure they can be enjoyed by all.

Technical implementations of images

TL;DR

• Always use an alt text. Empty for decorative images, meaningful text for non-decorative images;
• Use the <figure> and <figcaption> elements to group images and describe them;
• Avoid using the title attribute as this contribute nothing to the accessibility.

Alt text

alt attributes (alt text) give a description of an image for people who may not be able to view them. Either by a failed download or assistive devices.

When an alt attribute isn't present on an image, a screen reader may announce the image's file name and path instead. This fails to communicate the image’s content.

Decorative images

Decorative images do not enance the content of the page but are there for decorative purposes only. In this case, the alt attribute should be present, but left empty.

Example

<img src="patern.png" alt="" />

Non-decorative images

Non-decorative images enhance the content of the page. In this case make sure the alt text describes the image.

Example

My portfolio of cat art.

<p>My portfolio of cat art.</p>
<img src="patern.png" alt="Illustration of a black cat prowling through a stylized garden with abstract green and beige foliage. The cat has an arched back and a curled tail, appearing alert and stealthy against a light beige background." />

Figure and figcaption

The <figure> element is used to group elements and optionally caption them. The <figcaption> element is used to describe an image, video, or other media.

A figcaption is different from the alt attribute. It is not mandatory, but it is recommended when the image on it's own needs some extra description.

Example

My portfolio of cat art.

One of my artworks.

<p>My portfolio of cat art.</p>
<figure>
  <img src="patern.png" alt="Illustration of a black cat prowling through a stylized garden with abstract green and beige foliage. The cat has an arched back and a curled tail, appearing alert and stealthy against a light beige background." />
  <figcaption>One of my artworks.</figcaption>
</figure>

Title attribute

Using the title attribute is not recommended. It contributes nothing to the accessibility of the image and it's not accessible on touch devices.