Home icon
Data Visualisation Guide

Accessible images

2 minutes read

Accessible HTML

The content of images is by nature not accessible to visually impaired people. But HTML has many options to make <img> tags more accessible.

Most screen readers will read out the values of the following attributes of the <img> tags they find on a web page:

  • the file name, as provided in the src attribute
  • the title
  • the alt attribute

This shows the importance of giving your image files sensible names (and not machine generated names, like the names of photos on a photo camera or the ones generated by screenshot applications), and adding title and alt attribute to the images. The alt attribute was specifically added to HTML to offer an alternative text description for the image whenever the image is not available. So the alt text is what will be shown when fetching the image from the url of the src attribute fails. It is also used by web crawlers like the Googlebot to index web pages and images.

But in the context of accessibility the alt text is the most appropriate way to make the content of images accessible to screen readers. The alt text should always be a direct description of what is visible on the image, and what the image is trying to convey. Any other non-visual context should be provided outside the alt text, like in the surrounding text.

In the case your web page contains images solely for decoration, an alt attribute should also be added to the <img> tags (HTML requires all images to have it), but it should be left blank.

How to compose good alt text for visualisations is covered in Alt text.

Related pages

Accessible SVG and ARIA

Making SVG content fully accessible

Using a screen reader

Semantic HTML

Accessible tables

Accessibility inspectors and audits

Accessible HTML