Functional Images

Let's talk 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 a button, but not always.

But if you want to have keyboard accessibility, then they should, and Hampus is going to talk

more about that. And let's see 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

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 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 image, an icon that conveys that a link opens in a new window. In general,

you should avoid opening links in a new window, but it's a good example for this. And so in

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