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: "Example Event". It has no other information. This is something we see people do quite frequently in articles, events and pages. 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 that add information to a page 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 described 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 ask for an image description. That description becomes the alt tag. Alternatively, the image can be marked as decorative. This will add a tag letting screen readers know the image can be ignored. Decorative images don’t add information to the content of a page.

In both cases, we use core web technologies to create the alt tag for the image.

So… How Should You Write Your Image Descriptions?

Look at your alternative 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.

The World Wide Web Consortium (W3C) offers an alt text decision tree that can help you decided when alternative text is necessary. 

This article from Section508.gov provides information and examples to help you create meaningful alternative text.