Make Images Accessible on a Webpage

When inserting an image, you need to input alternative text (ALT Text) to describe the content of the image. This will result in creating an <alt> tag in the coding of the webpage. The advantage of this is: 1) When an image is not loading, readers can see the alternative text of the image. 2) Screen readers will read the text description of the image. 

Inputting alternative text in your image is simple. When inserting an image in the text editor, you will see an option called Alternative Text (Alt Text) or Image Description. Type a short description in the text box area. The following screenshots are examples of where to input the alternative text in WordPress and Blackboard.

input alternative text in "Alternative Text" option
Alternative option in WordPress

input alternative texts in "Image Description" option

Alternative text option in Blackboard

NOTE: Be sure to create alternative text that is usable. Usable ALT Text describes the content within the context or purpose of the image. To learn how to write a clear and specific text description, please read: Image ALT Tag Tips

The color contrast of the image should be sufficient so that people who are colorblind can read the image.

This page developed and maintained by IT, Center for Instruction & Technology. Send comments and suggestions to cit@ccri.edu.


Top
Last Updated: 10/2/17