Make your Images Accessible
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
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.
WebAIM also explains the process for adding alternate text in the various versions of the MS Office Suite:
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.
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="">...
- WCAG 2.0: Using alt attributes on img elements
- Alt text decision tree - WAI web accessibility tutorial
- W3C: HTML5- Techniques for providing useful text alternatives
- Poet Training Tool: Helping you write effective image descriptions
- HubSpot - Image Alt Text: What It Is, How to Write It, and Why It Matters to SEO
- WebAIM: Accessible Images
- WebAIM: Alternative Text
- Adobe Illustrator - Alternative Text