One of the most basic techniques of web accessibility is adding descriptive text to images, which should convey the content and functionality of the image as concisely as possible to provide access to the content of the image.
The two attributes used for adding descriptive text to images are ALT text and figcaption.
The ALT text adds a text description to an image, and should be used for all images, graphical bullets, and graphical horizontal rules. ALT text is accessed by screen reader users to provide them with a text equivalent of images. In modern web browsers, the ALT text is displayed when an image is broken, or when all images have been disabled.
ALT text example
<img src="redrose.jpg" alt="A single red rose with stem">
Any information about the image, such as copyright information, image source or extra information should be placed in the caption text below the image, not in the ALT text.
<figure><img alt="" src="stick-insects.jpg" /> <figcaption>Although darker than those found on Lord Howe Island, these stick insects, from nearby Ball's Pyramid, are the same species.</figcaption> </figure>
Notice the ALT text is blank. This is because the figcaption is descriptive enough already.
Best Practices for Describing Images
- Every image should have an alt attribute, even if it’s null (alt=””).
- Do not use phrases like “image of…”, “picture of…”, “graphic of…”, etc. The screen reader will tell the user that it’s an image.
- Be clear and brief.
- Alt texts should generally be no longer than a tweet in length. This is not a hard and fast rule but a generally accepted good practice.
- The ALT text should be used ONLY to describe an image. It should NOT be used to introduce tooltip text, provide copyright, source or supplementary information about the graphic.
Adding alt text and captions from within the article editor is simple. If you add an image or double-click on an existing image, the image properties dialogue appears. Enter your alt text in the “Alternative Text” field. If you wish to have a caption, select the “Captioned Image” checkbox.
After clicking OK to close the image properties dialogue, you will be presented with a default “Caption” text
Simply edit that text to reflect the caption you want.