Image alternatives

Not everyone will see the images in a page. Images may fail to load or users may have a vision impairment. The alt attribute is one mechanism for associating alternative text content with an image in a HTML document.

Recommendations

Include an alt attribute with all <img> elements.

Ensure all editorially significant images have a meaningful alt attribute value, or a text alternative in the preceding or following content.

Decorative images should have an empty alt attribute.

Why it matters

Assistive technologies such as screen readers will defer to the image src attribute, reading out the file path and name as a text alternative, if an img element does not have an alt attribute.

All editorially significant images must have a succinct and meaningful text alternative, either as the value of the alt attribute or in the immediately surrounding text content.

For images that do not have editorial significance or are described in the surrounding text content, use an empty alt attribute (alt="") to inform assistive technology that the image does not need to be announced.

Examples

Recommended:

<img src="bbc-logo.png" alt="±«Óãtv">

<h1>Main page title</h1>
<img src="relevant-image.jpg" alt="context relevant image description">

<a class="extlink" href="website.url">
  <img src="extlink-icon.png" alt="">
  <span>Non ±«Óãtv Website</span>
</a>

<img src="decorative-line.png" alt="">

Not recommended:

<img src="bbc-logo.png" alt="±«Óãtv logo image">

<a class="extlink" href="website.url">
  <img src="extlink-icon.png" alt="Non ±«Óãtv Website">
  <span>Non ±«Óãtv Website</span>
</a>

<img src="decorative-line.png">

Testing

Check that each inline image has an alt attribute, using a tool such as or , or by searching for all instances of <img> in the source code.

Aim for alternative text that is appropriate to the editorial significance of each image and its neighbouring content. The alt attribute should be empty if the image is decorative or adequately described by immediate content.