Transcript: Images in Context

Hi everybody. I'm Derek Featherstone and welcome to our first screen cast accessibility, "Images in Context". I work for a company called Further Ahead and we're an accessibility specialist. So that means we spend most of our time working with our clients to ensure that their websites, web applications, mobile phone applications and other electronic documents are as accessible as possible. We put together this site, Simply Accessible to share some of our thinking and resources on accessibility with you and to encourage discussion and hope that this helps you in your pursuit to make your website and applications more accessible as well.

I wanted to take a look today at images in context. Context is a really important concept that a lot of people are talking about these days and quite often it's surrounding content. I want to take a specific look at how that applies to images and what you need to do with Alt text for images. So we all know that from an accessibility perspective, we need to have alternative text for, some type of a text alternative in the images that are in our applications and sites.

So, I wanted to take a quick look at an example here. So, we're really looking at different types of images.

• We have content images that are functional or are part of the contents themselves.
• We have images that replicate and/or support other content on the page.
• We also have decorative images, and
• We have images that shouldn't even be images at all. Quite often we see text that is locked down on images when it would really be better off as text.

I really want to spend time today looking at images as content. So let's take a look at one particular example and this is by no means the only way to look at it but I do want to take a look at this one particular example because this is something that has come up recently in some of our work. So in terms of images as content, we know we need to provide Alt text for this particular image. (Cartoon head)

So an appropriate Alt text for this particular image might be something like this: alt = "Jordan with a surprised look on his face." That might be appropriate Alt text for this image and it seems quite reasonable looking at it, assuming, of course, that this person's name is Jordan.

We might also have other images such as this one and he has a slightly different look on his face and it might be something as simple as, "This is Jordan with an angry look on his face" or Alt text of "Jordan with a scheming look on his face" or finally "Jordan with a happy look on his face." What we need to do is analyze whether or not each one of those is an appropriate text-based alternative for what the image is trying to convey.

Is it an appropriate replacement for that image? And we can't really do that without looking at context. Even though each one of those pieces of Alt text seems quite reasonable, we need to look at it in context to determine whether or not it's actually going to be useful in that scenario.

So now if I give you a little bit more information and say, "let's say look at the context where this image is used," let's take a look at how it is actually used. So right now, it's being used as part of an assessment question. So in an educational setting, we've actually gotten an electronic version of say, a test. And the question is in the book, Hungry Like the Wolf, Jordan and Sue are the main characters. They have been friends for years. How did Jordan feel when Sue told him that: whatever. And so Sue has obviously told him something and Jordan has a reaction. So the educational objective behind this question might actually be to determine whether or not the student has actually understood the roles of the main characters as I've actually understood the dialogue and the history between these two characters.

So looking at this picture or this illustration, if we have Alt text on there that says, "this is Jordan with a surprised look on his face." By using that Alt text for that particular image, we're actually giving away the answer and we're not doing anything to satisfy the educational objectives of that particular assessment question or of that particular assessment. So, we actually need to look at this a little bit deeper and decide, okay, what is appropriate Alt text for that image?

In a non quiz or a non assessment scenario, it may be that it was totally fine for it to say, alt = "Jordan with a surprised look on his face." But in this particular case where we're trying to get at the students' understanding of that character and how they feel, that's probably not an appropriate Alt text. So maybe what we need to do is look at this Alt text and say, "well, what is appropriate? What are we trying to accomplish with that assessment question?"

So perhaps appropriate Alt text might be something that helps the person that's reading the question and using say, a screen reader to get out that Alt text, maybe appropriate Alt text would be something more like, alt = "Jordan's cheeks are flushed, his eyebrows are raised and his eyes are wide open. His mouth forms a small circle with his lips pursed." Perhaps that would be a little bit more appropriate and it may still not even be enough. But it may be more appropriate and give the appropriate clues to help the student answer the question without actually giving away the answer to the question itself.

So I hope that makes sense. Let's take a look at that of those other, those other illustrations. We might actually need to focus in on not just the eyebrows but also a little bit more about the corners of the mouth or what portions of Jordan's face have coloring. What directions his eyes are pointing. So we need to look at that for each of these scenarios and then come up with what appropriate Alt text might be.

So I hope that makes sense. We always need to look at images in context. We need to look at context for pretty much everything these days and I think the same thing applies to images and Alt text. It also raises the question in terms of your work flow, what person on the team should actually be writing the Alt text for images. And I think that's an important piece of this as well.

So thank you for watching. I hope this was helpful and we'll talk to you next time. We're again, Further Ahead. We do quite a bit for accessibility work. You can certainly follow us there. I'm @feather on Twitter and you can certainly get in touch. We're more than happy to help you with your accessibility needs.