Decorative Images

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 showing up anywhere.

And in general, you're doing that by setting the alternative text to an empty string, basically. So,

alt equals and then just scare quotes. 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 like 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 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 need to like describe, oh, this is a dog.

and 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 node 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 old instead