Complex Images

For 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

have more questions on that, you know, we're happy to, 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 longdesc 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

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

Yeah, you can, 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 caption 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. Um, and then people can go, uh, underneath.

Yeah. And that's, that's basically what's going on here. Uh, and it's, uh, pretty, uh, pretty

straightforward. Um, yeah. And, uh, basically what you also can do is of course, put the description

directly on the page. This is using aria-describedby 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 like,

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, you know, 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, go

half a sentence 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.