Types of Images

It's important to know that there are different types of images, especially when you're describing them.

And you need to have alternative text. So when a person with disability, especially blind people, but also other people with disabilities, come across an image, they might not be able to know what is on there or what it says and so on.

on. And so alternative text gives you a way to say what is on the image and convey that to a user.

And there are different circumstances when you want to have which type of alternative text.

And that is basically why this is such a complex topic. You don't get to

to like just put one alternative text on an image. Let's go to an example here in informative images.

And I like to use that because it makes a lot of sense this way. So in this example, we have a phone

a phone icon and then we have the phone number next to it and then we have a fax icon

and a phone number or fax number in this case next to it and if you can't see those images

then you don't know which is which I know might be able to infer it from the end of the number but

You know, it's like if these icons wouldn't exist, you wouldn't know.

So what would you do?

You add telephone or fax as the alternative text for this image.

So it has an information and you add alternative text.

There are many ways to add alternative text.

We will concentrate mostly on images with alt attributes here.

And the reason is that this is the simple instance.

And also, you can use the same principles and apply them to other technologies.

So, for example, if you have an SVG, you can use alternative text in a different way by using ARIA label and role image.

But, you know, there are many different ways.

So I don't want you to think about technology in this case.

I want you to think more about what is the text alternative for this image in its context.

And that's the main thing.

Otherwise, you get a really wrong understanding of alternative text.

You want to understand the principles behind it and then you can apply it to anything.

You learn how to apply alternative text and then you add it to anything.

Yeah, so this is an example for an informative image.

And as you have seen, or if you have looked at the tutorial, there are different kinds of images.

And they are useful to distinguish just for the level of information that you want to give.

So if I go back a little, we have a couple of categories here.

And the most important ones are informative images, decorative images, or functional images.

Those are the three big buckets you usually want to put your images in.

And that basically dictates what level or what kind of alternative text you need.

So for informative images, you want to make sure that the alternative text reflects the content of the image.

for decorative images you want to basically silence them and say like oh this is just for

visual eye candy so i don't need to put an alternative text in there and then there are

functional images and that is when an image is on a button or inside of a link and there are

different considerations around there which are important