Making Images Accessible with Image Descriptions

By itself, an image is meaningless to a blind person because screen readers can only read text. To make your images accessible, you must add a text alternative.

In the CMS, we use the "Image Description" field when inserting an image, as this will populate the "alt text" attribute in the code automatically. Screen readers will use this description to help a blind person visualize your content. With this in mind, it is important that your image description be descriptive, concise, and accurate.

Our easy rule to remember for good image descriptions is to ask yourself the question, "what text would I use if I could not use this image?"

Please consider this example from Deque University:

When a screen reader comes to an image, it says "graphic," then reads the alternative text. An example would be "Graphic, An ancient cave painting in France showing two deer with antlers, plump bodies, and small legs. One deer appears to be fallen over or dead."

If you don't add alternative text to an image, a screen reader will not know what to say so it will either skip over the image, or read the image file name or link destination. It might say, for example, "Graphic, DSC800031.jpg."

If you are working in HTML, you would add the alternative text to appear like this:

<img src="puppy.jpg" alt="A black puppy standing on an orange blanket looking up at hte camera." width="220" height="225" />
Was this article helpful? 0 out of 0 found this helpful

Have more questions? Submit a Support Ticket