Images are a big parts of web content. Using the proper attributes on images will make sure that these are accessibile to users. Even for users with low or non vision.

In this document we will focus on the attributes that are important to accessibility.

<img> element

The <img> element is used to display an image on a webpage. In it's most basic form it looks like this:

<img
  src="http://placebacon.net/400/300"
  alt="An image of baked bacon stips"
/>

alt attribute

The alt attribute is the most imporant part for images in relation to accssibility. This attribute is always required. There are two options on how to use this attribute.

alt stands for alternative text. This text will be read out by screenreader software.

If no alt attribute is present, most screenreaders will read out the src attributes value.

Decorative images

If the image is only used as a decorative image, and is not contributing to the actual content, you should add an empty alt attribute.

<img
  src="http://placebacon.net/400/300"
  alt=""
/>

Non-decorative images

Images that actually contribute to the content should have a descriptive alt attribute.

Make sure to add a text that describes the image in most details.

<img
  src="http://placebacon.net/400/300"
  alt="3 Bakes bacon stips on a plate with a paper towel."
/>

Using an image caption

In some cases you might want to add a caption to an image. This can be achieved by using a <figcaption> wrapped by a <figure> element.

<figure>
  <img
    src="http://placebacon.net/400/300"
    alt="3 Bakes bacon stips on a plate with a paper towel."
  />
  <figcaption>Bakes bacon strips</figcaption>
</figure>

The figcaption differs from the alt attribute. An alt attribute describes the image in it's details. The figcaption is a supportive text.

Inline SVG images

SVG images can be loaded from as a src of an <img> element. But SVG images can also be used inline.

Example of an inlined SVG image

<svg
  viewBox="0 0 100 125"
  role="img"
>
  ...
</svg>

Decorative SVG image

Do's and dont's

Do

• Always use the alt attribute

Don't