Images

Last modified March 25, 2020

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.

figcaption example

<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

  1. Every image should have an alt attribute, even if it’s null (alt=””).
  2. Do not use phrases like “image of…”, “picture of…”, “graphic of…”, etc. The screen reader will tell the user that it’s an image.
  3. Be clear and brief.
  4. 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.
  5. 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.

Screenshots

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.

Need Help?
The Digital Help Desk is the process for communicating with GTxcel regarding new title setups, questions, and technical issues for the Web Reader and/or Apps.

You can submit a request to us through the Request Help button located in the Publisher Dashboard or call the support number: 800-609-8994, option 3.
Contact Us GraphicContact Support
8AM - 5PM EST
Monday to Friday
800-609-8994, option 3
Response Times
General Question/Requests – A Customer Success team Member will begin working on your request within one to two hours of receipt. We will complete the request as soon as possible; we aim to have all requests completed within 24 hours.