Adding Alternative Text to Images

The "Uploading Images into Bricolage" video touched on the importance of Alternative Text (alt text).  Let's explore this topic a little further:

Alt text makes your web site more accessible to users with vision challenges. These users browse the web using a screen reader. A screen reader allows visually impaired users to access web sites by interpreting sites and reading them aloud. It can also send that information to a Braille reading device.

The problem is that these screen readers can't interpret images – they can only read text.  This is where alt text comes in! When you use alt text to describe an image on your site, the screen reader will read this description.  It will then be able to give the user some idea about what the image is about.

Please add alt text when uploading your images into Bricolage. 

woman walking toward tree on a fall day

Here's an example:

When I uploaded the image on the right to Bricolage, I added this alt text: “woman walking toward tree on a fall day” to the image.

I did that in the Alt Text box in the Content Section of the media element.

(right under Caption):

add alt text to this section in bricolage

Here are some simple tips for writing alt text:

  • Keep it short – no longer than a tweet.
  • Describe what's going on in the image.
  • If images are merely decorative – don't add alt text to them.  That is to say, if images don't add any meaning to the content of the page – don't add alt text.  For example, let's say that you added a border image to separate paragraphs on your site (I really don't want you to ever do this!):
example of a decorative element

But if you did, you don't need to add alt text to it! (If you're checking the code on this page, you'll see that, in this instance, I did add alt text to this image of a decorative element.  That's because we're referring to it within the content of the page - so it becomes relevant beyond its mere decorative value).

  • Finally, always add alt text to images that have words in them.  An image of a logo, for instance, will have words in it that a screen reader will not be able to interpret.  This logo adds meaning to the content of the page, and it should have alt text.  For example, the Adams State logo at the top left of our site has this alt text: Adams State University Alamosa Colorado.

There's a lot of information out there on alt text best practices.  If you want to read more, here are some places to start:

So now we've covered Media Elements (PDFs and Images). Let's move on to: