Informative Images

Let's look at informative images.

Informative images, as I have said before, are images that carry information.

And I had the example with phone and fax in this case.

And the idea is if those images are hidden or invisible or you can't decipher what this

fax machine image is, which, you know, I don't blame you.

is very old technology, then you wouldn't know. And so these images carry information.

And so you would need to put that information into the alternative text. Now, what you see

is that you don't have like fax machine in there, you don't have phone. I don't I don't

know what the English word is, like the phone hand, handheld phone part in there as the alternative

text, you know, it's not, it doesn't describe what is in the image, it just describes what the,

what the information is in this image. So this is the second example, and these are images

that supplement other information. So in this case we have something like "Off-duty guide dogs often

wear a bell. Its ring helps the blind owner keep track of the dog's location." And then in the

alternative text in this example they put "dog with a bell attached to its collar." So that basically

gives you the information that is not in the text about the image. And sometimes, you know,

it can be a fine line of should you put an alternative text on there? You know, if you

remove the alternative text and you leave an empty alt attribute, then this image would be skipped

altogether. So a screen reader user wouldn't even know that there is an image in that case.

So in this case, you know, it might be that the screen reader user is saying like, oh, you know, I want to show my good friend that how it looks when a guide dog has a bell on its collar.

So I search for an image for it.

And then it is relatively important that you have the alternative text in there.

So I would say in doubt, if you're in doubt, you usually want to add alternative text in there.

Now, when you're testing, you have to trust a little bit that the author knows what they want to say with an image.

And so, you know, if an author would decide that this is redundant information and I don't want to add an alternative text,

then I can see that and I would not, in that case, fail that in a WCAG audit. So there is this

little bit of, yeah, trust or just like, what is the intention? Can this be the intention of the

author? And if that makes sense, you know, then it's probably okay for a test. I personally try

to describe as many images as possible. Then there are images that convey succinct information or are

like iconic basically. Here we have a diagram on this bottle that says basically "press down and

screw the bottle cap off counterclockwise" and the alternative text reflects that "push the cap

down and turn it counterclockwise. It doesn't say, you know, brown bottle with white cap or

something like that. It just says like, you know, what, what the intention is. This can be a little

bit like confusing or hard to decide if you don't have any context around it. You know, in other

contexts, you want to say that this is on the top of the bottle cap, for example. So all these,

these things, you generally want to be very concise, as concise as possible. And then

you want to be but you want to be also as descriptive as possible, as descriptive as

needed. So, uh, you know, you need to have some, um, yeah, some, some devil of like, okay, what's,

what's the best approach here? And I think this is one thing that you only get through, uh,

experience, uh, because, you know, these are very abstract on purpose, very abstract examples that

try to like say, okay, these are the extremes of this category of informative images. So you might,

you know, you might be somewhere in the middle and then you might say like, oh,

this is clearly informative or not. Here, this image, the scenario is that it's like in a park

somewhere and it's a family friendly place and so they put this image of a family on the website.

And because the information there is not like there are two grown-ups and a small child

looking at the camera in front of like a big log of a tree, that's not really what the image is

saying an alternative text that says like we are family friendly could be a good option there.

You know, it's always like the intention behind it. Yeah, then we have this one which basically

conveys a file format. So in this case, we have the little icons that have, let's say like HTML

or word or PDF and you would just put like PDF or word document or HTML in the alternative text. So,

you know, just making sure that what is on the icon in this case is actually conveyed to the

user. You don't need to say like, you know, anything else. Some people would say, and I

I think that's a good point that you could say 2012 annual report and account word document and put it in there.

But we have already talked about links in context.

And in the context, I think having a word document is probably fine.

Also, if you navigate through it with the screen reader, it would read 2012 annual report and accounts, 43 kilobytes.

Then you would tab and would say like Word document 248 kilobytes.

Then you would tab and would say PDF 353 kilobytes.

And I think that gives you all of the information that you need there.

Yeah, there are a couple of related WCAG resources that are in there, two techniques.

And basically all of these tutorials, they go back to 1.1.1 non-text content, which we should for sure look at at the end of these tutorial pages.