Use Images Well

The CHSSWeb team works hard to make it easy for you to present accessible content to your site's visitors, but there are some things only you as an editor can do. Your tasks are not technical. You won't have to do any special coding or process your images in some special way. You just need to be mindful of what you are doing and keep a few do's and don'ts in mind.

When adding images to your site, there are many things to consider, but right now we are going to focus on a few things related to images. These are easy to do and, when done right, make your site much better for all visitors.

Don't Put All Your Eggs in the Image Basket (so to speak)

If you remove your image, does your content still do what it's supposed to do? If the answer is no, you are using your image wrong. Consider this page:

This article's primary purpose should be to promote this event by conveying all of the key information about the event. Instead, it is promoting the flier for the event by presenting the image of the flier.

Without the image, the article is just a title: "Language, Identity and Education in Québec and Puerto Rico." It has no other information. This is something we see people do quite frequently. It is a bad practice, both for accessibility reasons and in general.

Users visiting the article on a phone will see a tiny image. Visitors viewing the article using a browser which reads the article to them will hear only the title and the image description.

A better use of the article would be to use the text from this flier image and embed or attach the flier image. Or, even better, attach the image used on the flier. Visitors to the article, no matter what device or browser they are using, would be able to access the description, the date, the location, and all key details about the event. If you attach the image of the speaker and use the elements available to you in the CHSSWeb article and event applications, the presentation will be informative, accessible, and attractive.

An even better presentation would be to add all of that content to a CHSSWeb event and make this article redirect to that event, but that's another topic.

Write Image Descriptions. Good Ones

All images must have alt tags. What does that mean? Quite simply, an alt tag is a description of a web image that resides in the code.

What does that mean to you? One of our goals with CHSSWeb is to make editing your site a non-technical task. You should never have to even know that "alt tags" exist. To that end, we have made technical decisions which add or require the information we need to add alt tags to images automatically where possible. But in the end we need you to pay attention if your site is to have good alt tags. We hide much of the technical and logical decision making from you to keep your core concern very simple: "are my images captioned correctly?"

Images in CHSSWeb come in two flavors: embedded and attached. Embedded images are the ones you add inside a text area using the WYSIWYG tool. Attached images are those which you upload outside of the text areas using an "attach an image" field on the same form you use to edit the item on which the image will display. Embedded images offer you more control over the image's display, while attached images are easier to use and do a lot of the work for you.

Attached images automatically have alt tags based on a set of rules. Basically, they use the title for the page (article, event, etc.) by default. In some cases, you have the option of adding a caption. If you do, then that caption is also used for the alt tag.

For embedded images, we require an image description. That description becomes the alt tag.

In both cases, we use core web technologies to present the alt tag to the reader as a caption for the image. What does this mean? It means that when you review your article, event, page, or other content, you will see in front of you whether you have a good caption. If you have a good caption, you are reasonably assured of having made that image accessible as well.

So… How Should You Write Your Image Descriptions?

Look at your image description. Imagine you can't see the image. Does the description tell you enough without the image? If so, you've done it right. If not, you have work to do.

Another way to think of it, though it's not entirely accurate, is this: write good captions. It's not entirely accurate because there are differences between the purpose of a caption and the best possible image description for a non-visual browser. Writing strictly for a non-visual browser, you might say "headshot of Danny Collier" or "Danny Collier in garish shirt and ugly tie" whereas for a caption you might say "Danny Collier." But in general if you write a good, descriptive caption without going overboard, you will be doing a good job for all visitors to your site. Here are some examples.

This article has three images. The image description for each is the name of the student who is the subject of the article: Paris. A good caption for this first image might be "Paris Irizarry poses with friends" or "Paris Irizarry with [the other names]."

The caption on this image gives instructions to the visitor. Those instructions do not describe the image. Clicking on the image enlarges it. If the instructions for the image matched what happens when you click on it, they would be fine. The editor should either change the image so clicking on it takes the user to the destination described or change the caption to something which describes the image. I think "two anthropomorphized wedges enjoy a computer on a park bench" would not be that helpful, so in this case I'd suggest changing the link.

The caption here is "Don Gallehr in his element." This makes for a cute visual caption but we need a bit more to make it work both visually and as an accessible text alternative to the images. "Don Gallehr in his element: the classroom" doesn't have quite the punch of the current version, but it is more descriptive.

We'd like to leave you with one last image as food for thought. This image shows one page of a CHSSWeb report on image description usage on articles. The majority of the descriptions appear to have not been given much thought. We have "image" and "elephant" and "empty" and "GMU" and so forth. We hope that by making these tags appear as captions we are adding an important feature and also encouraging editors to make better use of the image descriptions. If we make better use of the descriptions, we will make our sites better for all of our visitors.