Make your Images Accessible

MS Office

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

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

Websites

The web is a very visual medium. Insuring your site is accessible doesn't mean that the content and layout of the site needs to be ugly to all users. One of the biggest things you can do to insure your site is accessible is to properly label your site images with an alt attribute in your image tag. For example:

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

Screen readers will use the alt attribute to display the information in the image to a blind computer user. 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 sense images are turned off. Not only is this good practice for screen reader users but it is also something that helps those on mobile browsers who may not be displaying images as they browse your site.

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="">...

This first tip alone can make a huge difference in the accessibility of your site.

Resources