Practical Examples

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. Here, 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 laid out. 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 conditions 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.

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

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 page of the issue.

And that's all there is here.

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