Tablet

Alt text is a description of an image that cannot be seen by a sighted user but is available to blind users via screen readers.

When it comes to the web accessibility principles, the inclusion of an alt attribute with an image in HTML code needs to be at the forefront of the developers’s mind. They provide for a rich user experience for every visitor to your site by offering the content of the image in a text-based format. If you don’t provide alt text, then a screen reader will only to say IMAGE or provide a useless file name.

How Long Is Too Long?

When creating alt text in your code, it is important to remember that these descriptions should be kept short. The longer the text, the more difficult it is for the screen reader and the browser to read it. I have on occasion found myself typing extremely long descriptions of images, including every artistic detail contained within it.

While this could be commended, it may not be helpful. Remember to provide a description that is useful in the context of the document and keep the word count short in the range of 5 to 15 words. You may be able to skip over purely decorative images, but those that have significant information need to have this information spelled out in the alt text.

Decorative Images

When it comes to images that have only been included for aesthetic purpose and which serve no purpose other than enhancing the mood of the page we still need to include an alt attribute. In this case the attribute can be empty (alt=””).

Long Descriptions

In general, alt text should be kept short. However, some images might be so complex that extra information needs to be provided. In these cases, it may be beneficial to repeat the description in a text-based format below the image so that all users benefit from the information.

To Conclude

If I could give any additional words of wisdom they would be not to overthink alt text. It should really just be a simple sentence that adds to the content of your website. By including it in your code, you are demonstrating that you are an inclusive developer, one who wants your content to be available to everyone.

Provide text alternatives for non-text content that serves the same purpose.

Introduction

Users who cannot see images, hear audio or perceive video benefit from having text alternatives in their place. These can be read by the user or voiced by assistive technology.

Text alternatives must therefore provide the same information as the non-text content.

How to Pass Non-text Content

  • Add a text alternative to your images describing the image
  • For video and audio, add a short description of the media but ideally provide a transcript
  • Where a control or input field is non-text, add a name

Exceptions

For the following examples, you must provide a text alternative, but it doesn’t have to give the same information as the non-text content.

  • Tests (if it would invalidate the test)
  • CAPTCHA (but provide an accessible alternative, or even better don’t use CAPTCHA)

For these final examples, implement them in a way assistive technology can ignore them by using blank alt text.

  • Decorative content that has no meaning
  • Content is used solely for visual formatting
  • Content that’s invisible to all users

Tips

For images, the alt text should describe the image and give the same information as the image would if seen. This isn’t always easy, and people don’t always agree on what the ‘same’ information is. Ask yourself: what does the picture convey?

If the image is your company logo, your company name is a good bet. If the image is of text, replicate the text exactly. For all other images, describe the image helpfully and succinctly: we don’t need to know it’s a picture of 17,387 trees if the word ‘forest’ will serve the same purpose.

If you do use CAPTCHA, use one with an audio alternative and add your contact details somewhere close by to help your users if they get stuck.

Blank (or null) alt text is as easy as adding an alt tag with no space between the quotes.

<img src="location-of-image.jpg" alt="" />

Screen readers will skip the image rather than reading the filename or trying to substitute an alt text.

Related to Non-text Content