Using Alternative Text to make your web site more accessible

Mike and I are trying to make our 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 Alternative Text (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.  Here’s an example:

An image I uploaded to Bricolage:
woman walking toward tree on fall day

I have added this alt text: “woman walking toward tree on a fall day” to the image within Bricolage. I did that in the Alt Text box in the Content Section of the media element (right under Caption):
where to put alt text in bricolage

Here are some simple tips for writing alt text:

1.  Keep it short – no longer than a tweet.
2.  Describe what’s going on in the image.
3.  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!):
a decorative element that adds absolutely no meaning to the content of this blog

But if you did, you don’t need to add alt text to it!

4.  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:

http://webaim.org/techniques/alttext/
http://en.wikipedia.org/wiki/Wikipedia:Alternative_text_for_images
http://web.mit.edu/atic/www/accessibility/guidelines.html
http://www.umich.edu/webaccess/best/quickguide.html#alt

Please contact Mike or me if you have have questions!

Jen

This entry was posted in Bricolage, Web and tagged , , , , , , , , . Bookmark the permalink.