All above combined

Hello and welcome to the images week, basically week six, as we like to call it. And we're going

back to these W3C tutorials and I will talk you through the images tutorial. And you might be

thinking, especially after watching the last series of videos, why am I doing this? I'm, you

I'm telling you what's inside of these tutorials and take you along there.

And why do I not give you the actual content and overview in a different form and then just point at the tutorial?

And the reason is because in practice, it can be super hard to remember what's going on.

So in showing the tutorials, making sure that you know where all the resources are, you can make better decisions and, you know, refer back to them if you need to.

And that will overall, I am super sure, help you to make better decisions and think about, you know, what's going on when you are doing testing or when you are learning more about accessibility.

And that's why we're going through the tutorials.

And the first one is, oh, the first one, the one we're talking about today is images tutorial.

And it has a couple of subpages.

And just as an FYI, I will not talk about image maps because they are so old and you really shouldn't use them.

They are there if you need them, but we won't go into details on there.

And, you know, I will.

And that is something that I can do is I can give you a good impression on like what is the level of knowledge that you need to know about a specific section here in this tutorial.

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.

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 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 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.

You might be able to infer it from the end of the number, but 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 roll-image. But you know, there are many different ways. So I don't

don't want you to think about like technology in this case i want you to think more about

like what is the text alternative for this image in its context and that's that's the main thing

otherwise you uh you get like really a 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 like 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. 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. This 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

a 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, well, 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 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 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 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 or as descriptive as needed.

So, you know, you need to have some, yeah, some devil of like, okay, what's the best approach here?

And I think this is one thing that you only get through experience because, you know, these are very abstract on purpose, very abstract examples that try to like say, OK, these these are the extremes of this 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 or 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 a big log of a tree, that's not really what the image is saying.

An alternative text that says we are family-friendly could be a good option there.

It's always 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 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 it 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. And now we move to decorative images.

Decorative images are basically images that do not add any information to the page or they are

not used to describe a user interface element. And the general gist is that you want them to

disappear from view you want to make sure that they are not read to screen reader users that

they are not like showing up anywhere and in general you're doing that by setting the alternative

text to an empty um to an empty string basically so alt equals and then just uh uh scare uh

That's how they're called.

So this image is part of a page design, so it's basically not carrying any information.

And you get this line that is just there to make it look nice.

And then you can use alt equals with an empty alt here.

Can also use aria-roll presentation.

I would not do that. Don't do that. You can do it, but don't do it. Don't do it. Just don't.

Here decorative image is part of an alternative text. So you have this link to crocus bulbs

and the illustration is actually a crocus blossom. But describing that as crocus blossom

and linking to Crocus Bulb makes no sense inside of the link because then it would just be doubling up, right?

It would say Crocus Blossom, Crocus Bulbs, but you actually want to sell Crocus Bulbs.

So in that case, just having the link be text, so the link text is basically always taking the alternative text into account.

So if a screen reader gets to the link, it would read what is in the alt text of this image and then what is as text inside of the link.

So it would always read both.

And by making the alt empty, it will just not read anything for the image.

And then you only have crocus bulbs as your alternative text, which is actually what you want.

Then there are images with adjacent text alternative. So in this case, basically,

the text already says the sleeping dog. And so you don't need to, to really,

you don't, you don't need to like describe, oh, this is a dog. And you know, it's a golden,

whatever breed that dog is, and they have their eyes closed and appear to be sleeping, that does

not add anything to the page. So having an empty alt is a good way to handle this.

And then you sometimes have just images for eye candy.

So in this case, this is like in a catalog for vacation homes or something like that.

Don't miss the impressive tropical house, a huge greenhouse that displays examples of exotic plant life from every tropical environment on the planet.

And then you just have like a very generic tropical imagery to like give you something to look at.

also like having an empty alternative text here is the right way to go. And as the note says, if you

had like a specific plant on there, if you had like a specific arrangement on there, then it

might contribute information and then you don't want to use an empty alt instead. Let's talk about

about functional images. So these are images that actually carry out a function where you have something that is an image. But if you click it, or if you interact with it, it's also a user interface element. Usually those images are inside of a link or button, but not always. But, you know, if you want to have keyboard accessibility, then they should. And Hampus is going to talk more about that. And let's see how

how that works. So here we have just an image of a logo and the scenario here is that's on the top left, like it is actually on this website. Here you have the link here to W3C and then to Web Accessibility Initiative. And this is an image and this is another image. So you have these images that are linked. And so W3C might be enough in this case, but

but you could even say like W3C home, just to make sure that this is where you link to.

Having W3C logo would probably also work because people are used to having a link on the top left, but in general, it would be better to like really be specific what the action does.

Here is the other way around. Again, this is a little bit the Crocus Bulbs example, where you

have W3C Home as actual text inside of the link and the logo, so you don't want to repeat W3C Home,

so you just leave the alt text empty. Here we have an icon that conveys that a link opens in a new

window. In general, you should avoid opening links in the new window, but it's a good example for

this. And so in this case, the alternative text says new window. And so if you read this with a

screen reader, it would say W3C homepage, new window image. And then you would know, oh yeah,

this opens a new window. So this is the functional part of this. Sometimes you have standalone icons

like this print icon and as an alternative text you can use print this page. You don't want to use

something like printer because that would not tell you what the functionality is that happens

when you click the link or press the button. The same goes for this search input. In this case,

we're using the input type image. It's a terrible way to do this. You should better use a button

element around this and a normal image element, but this works and you can still do it.

And here the alternative text is search. So when you go here, it says search button,

which is, you know, that's what you want. Yeah. And those are all the functional use cases.

I think this is pretty straightforward. You always want to, when you look at the button or the link,

you want it to say what happens when you activate it. That's the main point.

Let's talk about images of text. So in general, images of text are not allowed in WCAG. And you

should never, if you can do it otherwise, you should never use text on an image as the only

way to convey that image. And that has a couple of reasons. For example, you can't properly resize

text that is on an image, you run into like pixelation and stuff like that. So it's much

preferred to have it in text. You also can't copy and paste it though that is changing as we speak,

because a lot of computers just get OCR by default, you know, and if you have like an iPhone,

and I think Androids also can do that where you can just copy and paste text from an image.

But, you know, it's still a challenge for many people and you have to be aware of the functionality and you have to be aware that there's actually text inside of the image, which you might not be.

So there's, you know, just using images or text on images is not the best thing to do.

And it can also interfere with user preferences.

For example, if I want my text to be always white on black, I couldn't do that with a text that is on the image because that's just burned into the image.

So often you get these style texts with decorative effects that you can see.

And this is the old version of like, oh, you have an image and you put the text over it and just put the image somewhere.

And yeah, as you can see, I can actually copy and paste it.

Let's see if that works well.

Just paste it here into the top.

And it says you need to the entity just an access.

It also does not know.

So in this case, this functionality wouldn't even have worked for me. So, you know, that's just the

reality of all these OCR tools. They are good, especially with normal text, but if you have

something that is styled, it just doesn't work well. So in this case, you could use your alt,

your access to the city, that would work. Or you could use something like CSS3, which, yeah,

we wrote that in, I want to say 2016, 2017, where like web fonts and stuff was a big thing. But yeah,

this is like real text, so I can just copy it and then paste it to the top. And of course it works

because this is like real text that I can manipulate. So that's fun.

And this font is a little bit more readable. We didn't have the font ready to use in this case

for it. Now exempt for text on images are logos. So you can use logos that have text in it. Here's

the old Web Accessibility Initiative logo. And basically it also uses the old attribute.

When you're using this, you have to make sure that all information that is inside the image

is also in the alternative text. This is especially important if you're using images of

text on social media, like on your Twitters, your Mastodons, your Instagrams. If you have text on

images there, you have to make sure that in the alternative text all of the text is in

the alternative text functionality. And then there's an example on mathematical expression,

which we will just skip because I won't go in there. This is niche knowledge, and if

want to read up on it, you know, it's there and you know, you know about it. From the next section,

let's talk about complex images and complex images. They can be a little bit daunting

because there's often a lot to describe and there are newer things and newer technologies that can

help. But this is like the gist, the high level information on that. And if you have more questions

on that, you know, we're happy to answer them. So as a little bit of an history thing in here,

long descriptions, this used to be a thing where you link out from your image, there was a long

desk attribute that linked to a different HTML page that had a long description, but no browser

properly supports that. So forget that that long desk exists, but the concept is still good. Like,

you have the description, you have a short description in the alternative text,

and then you have longer description somewhere else. I think that's just there. So in this case,

We have this first quarter visitors to example.com websites, and then you have different websites,

site one, site two, site three, and you have the different quarters in there.

That makes all sense. And then in this case, the alternative text is

Just like firstwatervisitors2example.com. And then you have the image description, which you can

click on and you get to a new page that has the long description, like in this case, an overview,

the chart shows this and that, then the individual values. So users can get information on that and

and then information on the presentation of that specific bar chart.

And that's useful, and that gives everyone a way to read that.

And the reason why I think this is one of the best practice approaches is that everyone benefits from this.

know, not everyone might make the right conclusions from this or understand what the colors mean, or people might be colorblind and stuff like that.

So you have all these different considerations, having a dedicated page that explains the complex image is always a good call.

Um, yeah, you can, uh, and, and this is basically what we did.

We added a link right after the image that links to this description.

You can use figure and figcaption for that as well.

And you can also, you know, if you have the information on the same page, you

can basically also put that information into the alt attribute as well, like

see below for the description and then people can go underneath.

Yeah.

And that's, that's basically what's going on here.

And it's pretty, pretty straightforward.

Yeah.

And basically what you also can do is of course, put the description directly on the page.

This is using aria-describeby and honestly, I don't think you should do this.

So I will skip this too, because this is like, so the problem is, and I will just say it,

this uses aria-describedby to basically pull all this information as a description here.

And the issue with description is it will first read the alternative text as a label

or as an accessible name.

And then there will be like short pause, like half a second or something like that.

And then it will just start and read the whole like paragraph in there.

And there's no way to pause or to skip around in the text in case you missed something, you know, go half a sentence, you know, back in time.

You can't do any of that with aria-describedby.

So I would not use aria-describedby in this way these days.

So just ignore that, I guess.

So there are basically two groups of images that can happen.

So the first one is that you have multiple images and combined they convey a single piece of information.

And then you might have a collection of images where every image individually contributes to the information.

And we'll see how that looks.

And the first one, you will be super like, okay, I understand this concept. And that's a star rating.

Everyone has used star ratings before. And this is like just the output. And it's three and a half

stars or five. And this is the information that is conveyed. Now, what they did in this example

is that they basically used five images next to each other. And the first three are starful.jpg,

should probably be PNGs, but you know, starful images. So they are fully filled stars. And then

you have a half filled star as the fourth image. And then you have an empty star as the fifth image.

And what you can do, but what would be pretty cumbersome, is to say like full star, full star, full star, half star, empty star.

And then the screen reader user would need to make that calculation in their head.

It would be technically accessible, I guess.

But in reality, what you want is to say like, oh, this is 3.5 out of 5 stars and then the

other images, they are only decorative and they don't matter anymore.

And then it might have collection of images.

So these are different like paintings of the same castle.

And so you have this castle through the ages.

And then you have like the 1423 charcoal painting and then you have the old base painting and

And then you have the photograph from 1936.

And basically the idea is that this is all like inside of a field set.

And then these individual captions are also field sets that describe the images above

them.

So what we have here is that we have this figure and figcaption and this figcaption,

caption basically describes the other three figures and then these three figures to describe

the fig captions inside of those back describe the image.

So you get these things.

Now those captions in this case are not, and I have to say that really clearly, are not

alternative text.

are basically additional information to it. So you'll see that in the first one it says:

"The castle has one tower and a tall wall was around it." And then you have as the second

alternative it's: "The castle now has two towers and two walls." While the fake caption is just

describing the style and from when it was. So there is these different, yeah, just these, you know, two distinctions on how you want to use the alternative text. So the alternative text is always, what do you see on the image, describe that.

Okay, and that brings us to the old decision tree, because everything I talked about, all these different image types, they come together inside of this old decision tree.

And the idea is that you have different questions and they lead you to the decision on which type of image this is and then what type of alternative text you want to have.

So the first question is, does the image contain text?

If no, you just continue to the next section. And if yes, there is a little bit of like another tree, another distinction there. Is the text also present as real text nearby? So this is real text that I can just select and copy and paste.

If that's true, then you want to have the alt attribute empty.

If the text is only shown for visual effects, then you want to have an empty alt attribute.

So this would be something like a watermark.

Or if you have like, I don't know, your Nike and you have like a Nike pattern on the background of your page somewhere, you don't need to put Nike, Nike, Nike, Nike, Nike into your website.

That would be terrible.

So if the text has a specific function, you're in a functional image and you want to describe what it does.

And if the text in the image is not there, otherwise you want to include the image text into the alternative text or maybe do not use an image altogether.

Then the second question is if the image is used in link or button and would it be hard or impossible to understand the link or the button, what those do.

If the image wasn't there, if that's yes, then you want to use the alt attribute to describe the destination of the link or the action that happens when you click the button.

Next question is, does the image contribute meaning to the current page or context?

If yes, then you want to use an old attribute in general.

If it's complex, you also want to have a detailed description somewhere.

If it does, but there's other alternative text, redundant alternative real text nearby,

then you want to keep the alt empty.

And if it is purely decorative or not intended for the user,

then you want to use an empty alt attribute.

So for example, if you have a single pixel gif

that you use as a tracking device, you can do that.

And that you don't want people to like stumble over it.

So an empty alt attribute is the right thing.

And if you still don't know into which categories it goes,

then you might need to read through the whole tutorial.

Yeah, which, you know, makes sense.

Couple of tips and tricks for picking alternative text,

good text alternatives.

So you want always to be concise,

and as concise as possible, but as long as needed.

So sometimes that means really long alternative texts,

and that's okay.

there is no limit to the length of alternative text.

You should be choosing the appropriate alt text

by trying to understand what does the image do on the page,

and then how is it used in this context.

Important information should always be on the beginning

because alternative text, how it works,

It doesn't let you like skip through it or reread information.

So the most important, like big picture pun intended, I guess, um, big picture information,

put that to the front, uh, and then, um, put like further information to the back.

Um, yeah, just use punctuation, how you would usually use it in sentences, um, and leave

anything that is superfluous. Screen readers will announce that this is an image or graphic,

so that's usually the indicator that the screen reader gives anyway. So you don't need to say,

like, "image of" or "picture of" or something like that. You don't need to do that. That said,

it might be sometimes needed to make a distinction. So, for example, you might say, "screenshot of"

of app XYZ. Or you might want to say like, you know, artistic photograph or something like that,

of this and that. So, you know, there's always nuance in these things.

Let's talk a little bit about how WCAG sees text alternative and images. And yeah, just take a look

on how that works. So we have the how to meet WCAG, the quick reference open, and I've selected

on the left all the responsible people and I selected images and images of text. So that gives

us the broad information. There's not a lot in WCAG on images and images of text, but there is

1.1.1 non-text content which has like the bulk of information on images on it. And basically what it

says all non-text content that is presented to the user has a text alternative that serves the

equivalent purpose except for the situations listed below. So anything that is not text

needs to have a text alternative unless it falls into these categories. And the categories are

control or input, then the name of the input needs to describe the purpose of this control or input.

This is the link and button situation. If it's time-based media, so that means an audio file

or video file, then there are alternative guidelines. So you don't need to describe

every video in detail, but you need to follow the time-based media information that follows in

guideline 1.2. If it's a test on exercise that wouldn't work with an alternative text, like

identify what's on the image. You don't want to put an alternative text in there.

But of course, you also need to make sure that a blind person, for example, has an alternative question in those cases or is exempt from answering the question.

Sensory images. And this is basically decorative stuff.

So, yeah, if it's basically meant to give you a sensory experience, then you don't need to put an alternative text.

Then you have captures, which basically means that if you're using image recognition to distinguish between a human and a computer,

then you need to not have alternative text on the image,

but you have to have an alternative capture that a blind person, for example, can use.

And then we have decoration formatting or invisible.

So if you have an invisible image or you use it for decoration or you format it or use it for formatting,

so for example, to force a certain space somewhere,

then you have to have empty alternative text. Yeah, that's basically what's in there. There is a media alternative in level AAA, which we will not get into.

But basically that says if you have, I'm getting into it, that says if you have a video or an audio file, you need to have a media alternative.

So you have to basically describe what is in the audio or video file.

And we have contrast.

This is important for images of text, but we will do this in design.

probably, and then we have the images of text success criteria. And that basically says,

when the technology that you use can achieve the visual presentation that you want,

then you cannot use text in an image with an exception. And that exception is that the image

can be customized to the user's requirements. So if it resizes with the user, if it changes

text color if the user can select that then that's okay and if the display of

the text is essential to the information that is conveyed so the biggest the

biggest example of that are logos because they only look like logos if

they are written in a certain font so there's it's essential that they keep

there how they are and other I don't know I don't I don't I don't think I

I have good other examples where like the visual appearance of the text is central, maybe tests or something like that as well.

I'm skipping over contrast.

Yeah, and basically you have those two exceptions in level AA, 145 images of text.

And then there's a AAA criterion that has no exceptions.

And basically means that you cannot use any images of text, including logos.

Or if you can't make the specific visual style that you want through the technology, you just have to abandon that visible style.

But that's only level AAA.

So it's not a requirement.

And that's it. There's nothing else on images in WCAG. I think it's pretty straightforward and

relatively simple to understand once you get a grip on what are the different types of images.

So as an example, just looking at how this all works, here we have the city lights before and after demonstration again.

And there are a lot of images here, like this is an image, this is an image, these are all images, the images are images, this is an image, this phone number is an image.

And so, yeah, you have a lot of images there and they have terrible alternative text because this is the inaccessible version here.

So if I take this list of images here and I move it up to be in view, actually, that's useful.

I have the W3C logo and the Way logo on the top right.

And then we have a lot of images that are nothing or don't have at least alt attributes.

And so if you don't have alt attributes completely, then it will read the whole file name.

And that might not be what you want.

Usually it is not.

So always want to include an alt attribute there.

And here we have, let's make this bigger. That doesn't help a lot. This bigger. Here we see we have the top left dot give and it has no alt attribute. So in this case, this would be announced as graphic and maybe even border left top graphic to the user. You don't want that.

And this is the image on top on the top left here, basically to make this shadow work because when this came out, box shadow wasn't a thing. So you had to basically use images and that could like be really annoying for users to wait through like a lot of images that had no alt attribute.

So, moving around the window here a bit so you can see both, I hope.

Here we have basically the opposite issue.

This is a super long alternative text for this top left image.

So if we show it here, this is the image.

It's city lights, your access to the city and the alternative text describes what is

seen in the logo and how the stuff is layout. You don't want to have that. So don't do that.

There's another image here. We have an image of the weather condition

and there's no way that a screen reader user could know what the weather conditions are.

Same goes for the navigation on the left. They have no alt attributes. So this home link is just a link and doesn't say anything. So you want you. You generally want to avoid that, right? You want to have your proper alternative text. These are also images of text. So you want to avoid that too.

So, if we go to the accessible homepage, we don't see a lot, like it basically looks the same. But if we open the same list images script here and moving it up. There we go. We see there's a lot less orange.

and basically this top left image says city lights your access to the city the

image with the weather condition says sunny spells instead this is this image there

sunny spells and then you have like the other images and you see that there are a lot of less

images as well, you know, because you don't need images for a lot of those use cases, especially

not in 2022. You needed them in '27, whenever that was. You can see that these things are now

not using images at all.

So let's see, go away. This only has news as the link in here and basically uses a background image

for the image here on the left. And that makes a lot of sense and just works. And also here,

the phone number is now in text so you can actually copy and paste it, actually call it, which is good.

I would encourage you to play around with this before and after demonstration. I think it's

really useful. It has a lot of different pages as well with other images on it and with other

situations. There's also a survey, but we won't talk about that for another couple of weeks.

And what you also have is annotations. So if you go to the inaccessible one and show the

annotations, you can actually see what the issues are. And here it says the text alternative is

overly verbose and does not serve the equivalent purpose of the image. And then, you know,

it links you back to the success criteria. So it's a really nice way, I think, to learn about

accessibility and test it out. And I will also put in the canvas the AliTools link that has

all the bookmarklets here that you can use that I showed for the images, the list images one,

And basically how you install those is you show your bookmarks bar. This is my

favorites or bookmarks bar. And then you can click on this link and just drag it to the top.

And then you have installed this little script that shows you the

the page of the issue. And that's all there is. Here, this page doesn't have images,

so it shows nothing. But yeah, you can then just go to any other page and just use it. And I put

mine into folders because that's convenient. Yeah. And that's basically all about images.