Accessible Images

Digital content typically contains images that serve a variety of purposes. Ensuring your content is accessible doesn't mean that the content and layout needs to be ugly to all users. One of the most effective practices is to properly label images with alternative text, or an alt attribute in your image tag. Screen readers will use the alternative text to display the information in the image to a blind computer user. As images are used for many different reasons, the reasons themselves can guide the way in which you make it accessible. Not only is this good practice for screen reader users, but it is also helpful for mobile browsers that may not be displaying images due to data or connectivity constraints.

Alt Text Quick Tips

Avoid "Image of, photo of" descriptors
Keep descriptions specific and simple
Don't describe decorative images (use empty alt tag)
Describe text within images

MS Office

Adding an image description to images in your documents is easy and instantly increases the accessibility of your documents for all users. Tip: If you are creating PDF documents from your Microsoft files, the PDF documents carry the same image descriptions.

Microsoft Support - Add alternative text to a shape, picture, chart, SmartArt graphic, or other object

WebAIM also explains the process for adding alternate text in the various versions of the MS Office Suite:

Websites

Using images on websites can be done in various ways and for different reasons. Below is a list of the different ways to correctly code your images, or you can refer to "An alt Decision Tree" from W3.org, to help guide you.

Alt Attribute image tag HTML:

<img src="ualogo.jpg" alt="University Logo"> ...

Tip: Turn off images in your browser and see if the messaging you are trying to convey is shown. You will see the text of the alt attributes, since images are turned off.

Decorative images

If the image is used for decorative reasons (horizontal lines, etc.) then an alt attribute is not required. For example something like:

<img src="line.jpg" alt="Horizontal line going across the width of the page">...

is really not that meaningful to a screen reader user. If your graphic has meaning that is only communicated as an image then put the messaging in the alt attribute. In the case of decorative images you should create an empty alt attribute on your image tag:

<img src="line.jpg" alt="">...