Tip of the Week – Where Did The Pictures Go?

View larger Version of Graduate Assistant page with no images and no alternate text

Figure 2

View larger version of Graduate Assistants page with no alternate text

Figure 1

Revised Current Graduate Assistants Page

This tip builds on a previous one – what to do about images of text.

Our Web Accessibility Partner of the Week for January 25th, provided us with a perfect example as well as one solution.

The Challenge:

So here’s the situation: you have a lot of information that you want to add to a Web page, in this case, the names, photos and relevant details about the Graduate Assistants in the School of Technology Graduate Studies. You’re also going to print a flyer, a hard copy, with that information and have it available in the office.

So, thinking to get two outs with one pitch, so to speak, you create the flyer, save it as an image, and post that image to your Web site as illustrated by Figure 1.

And you think to yourself, well, this flyer has all of the information anyone would need, it’s attractive and it was super-easy to post.

Just One – BIG – Problem

Except for one thing – anyone is visually-impaired, and anyone who has images turned off in the browser, has no idea what’s on that page. They can’t read any of your great information. It’s completely lost to them as illustrated by Figure 2.

In the case of the Graduate Assistants, there was another problem. What looked like 16 individual image blocks was actually two large images. So if one of the assistants left and their details needed to be removed, the entire image would need to be edited.

What To Do? One Option

For the Graduate Assistants, we decided that a table would be the most expedient way to position the information on the page. We discourage the use of tables for layout, but sometimes the limitations of the software make it difficult to add content without them. The important thing to remember is that with a layout table, we do NOT use header cells, captions, summaries and scope, as we do with a data table.

Step one was to create individual photos of each assistant, by cropping the larger image into smaller ones.

Step two was to create the table to position them on the page.

Step three was to add the image and details for each individual. The photos were inserted, using the person’s name as Alternate Text and then their information was typed in below their photo, so that both a person’s image and corresponding details were in the same table cell.

The Result

Now, when images are turned off, or a person uses screen reader software to access the page, everything is right there, available to them, just as it is for those who can see the images.

Sometimes you may want additional styling, like borders or backgrounds and that’s something that University Relations can help you with in a way that keeps your content accessible and still gives you the look and feel you want.

What Do You Want To Know?

These tips are designed to help us all better understand the requirements of our Web Accessibility Policy and to offer some shortcuts and hints that will help you as you create and update your Web sites.

Questions and suggestions for future hints are welcome! Just send an email or fill out our online form.