I’ve been on vacation and have not posted for a while. Even though I was in Wisconsin and not Mexico, I want to wish everyone Happy Cinco de Mayo and post a picture from from the Wisconsin trip.
Posts Tagged ‘images’
A few months ago (in December of last year, actually) I read an article in the Chronicle of Higher Education on the Best and Worst College Web Sites for Blind Students
And, it piqued my interest. As my colleagues will tell you, I am always (well, often) harping on whether web pages are accessible. So I thought I would begin this blog with the topic of accessibility. There are many resources on the web to help you decide whether your web page is accessible. Here’s a Quick Test Checklist from the state of Illinois, which list several things on a web page which can be easily checked and modified to improve accessibility.
Today, let’s consider the use of images and the alt tag. Even if you are not writing HTML code, but are using a web editor instead, you will be asked to provide alt text when you place an image on your page. It’s easy enough to add an alt tag, but it’s a bit trickier to add a good alt tag.
There are several types of images to consider:
- purely decorative images
- meaningful images
- images of words
- image links
First, decorative images are pictures that have no “real meaning” on the page. For instance, suppose the following decorative separator is added.
The alt attribute for this image should be blank, like this — alt=” “. That way screen readers know that there is an image present, but that it is not important to understanding the content of the page.
Second, are meaningful images. For instance, the following image (photo taken by Bonnie Fletcher)
could have alt set like this — alt=”cake”. But, it is more understandable to the user if the alternate text is more descriptive instead — alt=”Green frosted cupcakes in the shape of a Christmas tree for GSC’s cupcake war”.
Third, are images which contain words.
Since the image contains words which are important to the understanding of the content, the alternate text should be set like this — alt=”Module 5: HTML and CSS” — that is, the words that appear in the image should appear in the alt attribute.
Lastly, are images that are links. In this case the alternate text should identify the link’s destination or function, NOT a description of the image. So, for the image below the alternate text tells where the link goes – to the GSC Faculty Course.