Live Session (2024)

All right, welcome back to this lecture about images. Images are very important because they're everywhere on the web.

And as always, if you have any questions, understandability questions from the lessons, you can ask them here.

And if not, I will just go through, you know, repeat a couple of things, like pointing things out a little bit, like, you know, more clearly or differently.

And then we're going to see if there are any questions on that.

That's the big plan, which is like not a super big plan, I guess.

All right.

Anyone who has a question, just like, you know, put your hand up in Zoom or put something in the

chat or just start speaking because otherwise it's just me speaking. So I know if it's you, I guess.

Okay, Alicia, you go first.

Yeah, so I was wondering if you could maybe explain some more in the images. That was the

informative there was a alt for a dog that was this dog has a bell you should have this

in at the alt image but then in the decorative example there was also an example with the dog

and there the dog was not considered important so it was like you should use the

space like a empty quotation i'm just wondering i don't see the difference between those two like

could you explain like because the text was describing what the image was showing on the

informative so why what what was the contributing great question so let me share my screen and then

I can talk through it because this is actually like a fantastic question. There we go. I will

also share this and then press return. So this is not what I wanted to show you. There we go.

So those two examples are quite different. So in this case, the text says off-duty guide dogs

often wear a bell. Its ring helps the blind owner keep track of the dog's location. This actually

does not really describe what's inside of the image and that's a dog with a bell. And I think

it's like a very reduced example just trying to like yeah get across like you know is there

information and in this case the information here on this image is that like this is a dog with a

bell and it doesn't say like you know dog with a bell colon and then describes why the bell is

there it just describes what the bell does and and what's happening but it doesn't say like oh

and by the way the image here that is an image of a dog with a bell so it's like a little bit

more information um and you know and if i if i was making like an audit or something like that

um there's always a little bit of wiggle room around those issues as well so you know because

we also look at like what could the intent be and you know i would probably wouldn't fail it but like

if you're starting a website or or a thing like i would i would recommend you to put

alternative text on it.

And to be honest, I feel the same goes for this.

I think they are very similar and that's on purpose.

And the big difference is that here,

this text does not directly have anything to do with the image.

Like it's just the sleeping dog and, you know,

And it's basically established that that's related to the image.

But then it is about a proverb and not actually about the dog with the bell.

So one of the things that you have with the first image is like,

if someone who is blind, like comes across this,

just like, oh, bell, that sounds interesting.

I would like to know like what that bell looks like.

It doesn't come off the alternative text of this image,

but they could go to someone who is seeing and saying,

like, hey, this dog, I know that this image of the dog has a bell,

so can you describe that bell in detail to me?

Well, if you leave this empty, that possibility wouldn't be there

because they would not know that there is an image of a dog with a bell here.

and there is a good you know there's a good argument that you can put like a sleeping dog

into like the alternative text here I don't think that would be wrong

but it's like it's a little bit redundant so you know it's totally also fine to leave it empty

because this is a very generic image if it was like more specific you know if it was like

I don't know

like you have on your website

you have like multiple articles

that feature a specific

dog that people know with name

then it might be good

to say like oh this is that dog

you know that is sleeping

and then you edit so it's always

like the context

and that's how these

examples come together

I hope that

helps a little

so and and i mean that's that's like one of my pet peeves i think people put in empty alternative

texts too quickly um and you know i was involved doing this page uh and when was that 2016 i want

to say it was 2016 when i worked on this so this is like a long time ago um and personally i

probably would recommend putting an alternative text in for this image um because it's not purely

decorative so i think that has a little bit changed over the years but but also like if i

came across this in an audit i would not mark it as a failure so you have basically both like yeah

i would recommend to add an alternative text but if the alternative text wasn't here it still would

be understandable what's happening in the text. All right. I see there are chat messages.

Okay. You mentioned, that's me, mentioned that it was preferable to have an empty alt text for

images and not say that it's just a presentation element. Is this the preferred way for images

only or is it similar for other elements and how come we want to do it like this for images?

Okay, good question. So you want to use empty alternative texts whenever you have redundancies.

And having a nonsensical alternative text makes not a lot of sense. Like if you have

this like separator thing and it's just like a visual flourish on your website,

saying this is a visual flourish, it is a big line and a small line,

that does not give any information to the screen reader user.

And especially if you have multiple of those, it gets overwhelming

and you don't want to do that.

And that just makes it harder to actually pass and get to the information on the page.

So that's your general advice.

And that's why we use the empty alt, because then it's just completely removed from the accessibility tree.

So no screen reader will pick it up.

And that's actually what we want.

If you put in, you know, another text, then that will be read and will be announced as image.

And yes, you can also use role presentation.

And that would be a way to do it for other elements as well.

Role presentation or ARIA hidden true.

We get into ARIA in a couple of weeks, which is basically the specialist accessibility language that you can put on top of HTML.

And that's a way to remove other elements.

I also have an example for SVGs in a moment where we're actually using ARIA hidden true.

So maybe I want to show that right now.

But yeah, so you can hide things from screen reader users.

Generally, you don't want to do that

because then they might not have access

to all the things that are on the page.

So the recommendation is to generally

keep as much as you can on screen.

But sometimes you have different needs

and you need to hide something.

But that are already advanced.

use cases in my opinion. Yeah and because we don't talk about this a lot in the

tutorial I have this SVG example here. I will make it a little bit bigger

so you can see the code. Now the code is smaller that's not what I wanted.

So these are the two same Mastodon icons.

Yeah, when I made this, Mastodon was the big thing, and it's still for a lot of people.

But basically, to make an inline SVG in there, you cannot use the alt attribute, because that only exists for the image element.

So you have to use more specific stuff.

And what we do here is putting in role image.

that basically makes this an image element.

And then you can use aria-label,

kind of like the alternative text,

actually exactly like the alternative text.

And now when a screen reader will get to this SVG,

it will announce it the same as an image

with the alternative text Mastodon.

It will say Mastodon, image or something like that.

There's focusable faults in this example because that's old versions of Internet Explorer made every SVG focusable. We don't want that.

And then the decorative use case, let's say this was inside of a button that set Mastodon on it. Don't want to duplicate that up.

you would do basically aria-hidden-true and that removes it completely from the accessibility tree again and acts as the empty art as well. The links will be in the, like, along the side of the video.

so yeah you can do that but you have to be careful because if you use aria-hidden too on like

things that you want people to navigate through or like read in general you can get into like

problems because they are uh yeah it's easy to like forget about it and then you you hide uh stuff

One question. Oh, go ahead.

You mentioned that you shouldn't use rule presentation in the video for images. Is there a reason for that?

It's just like use the most. I think whenever you, and we will talk about ARIA in a bit, a couple of weeks.

Whenever you're using HTML, you should stick to what HTML gives you.

And the empty alt is already the way that HTML supports this, like putting role presentation on it.

And because the image itself has no ARIA label, it will not be read at all.

So it's basically acting as like it has an ARIA hidden true.

but that's basically using something that's more complicated and also more error prone instead of the native one.

So for example, you might put a new image on it and suddenly it needs an alternative text.

I have seen issues where people put in the alternative text, like in the CMS, but the coder has put role presentation on it.

And suddenly it will not be announced as an image.

It will just be announced as normal text because the role is presentation.

That means it has no role.

And that's problematic, right?

Out of the sudden, that information that there is an image goes away and you don't want that.

So that's why I think use the alt, all the CMS, all the things that you can use have that functionality.

So it's just like consistent overall things.

And that's why I recommend it.

Okay, thank you.

Yeah, it makes your life easier.

As someone who has done this a couple of times for clients, it was like, oh, no.

And now they changed their mind and we have to redo stuff.

Okay, another question: "When you show the group images, how is it actually read by screenreader, especially when jumping back and forth with tab? Could you show us, is it similar to a field set?"

It's kind of similar, like a field set. I actually do have a fake caption example here that I prepared. It looks like I'm super prepared for this. Well done me.

So, I have this figure one here at the top, my friend Garfield, and then we have this graph one, 10-year revenue at the bottom. And of course, these are only example images.

So when you're using fig captures, fig figures and fig captions, it's really hard.

I don't like the names for this.

You have the, they basically act as a group.

That means if you get into the figure, it will announce that you entered the group.

In this case, figure one, my friend Garfield.

But if we go into the example and let's copy that over, because I think that's a good thing to show.

So in this case, one of the issues had three images with different alternative texts in it.

to my friends Garfield and then I say comma Garfield two and here I do Garfield

three colon no space before the colon. And then here we have I don't know if this like looks great

because I've not tested this. Oh yeah, it just puts it next to each other. Oh, and I put it in

the wrong order. I don't want that. It's going to be confusing otherwise. Okay, figure two.

So, and I can share my voiceover.

it's the screen reader that i use uh share sound

okay so i switched the screen around it will probably be relatively loud

just like scream at me if it's too bad um but um but yeah let's switch it on

voiceover on safari images live preview window toolbar okay uh oh you can't see the

the thing let me share this differently share screen window system dialog

oh yeah great now you're talking to me uh video file selected advanced three of three tab control

portion of screen one selected

Zoom annotation entry point. System dialog. Zoom.us has new window.

Yeah. And then I'll make this smaller so you can see it better. There we go.

Nice. And now you have this little window that actually writes out everything.

And... Jacob Magnuson to everyone. Eric Safari.

I don't listen to podcasts really quick.

And this is like really slow for a screen reader.

Like if you have a real screen reader user who uses it every day,

and I think you had Claudio.

Manfred to everyone.

I think audio descriptions could be an option.

Netflix have a ton of series with audio descriptions available for Inspiration,

So apparently I cannot stop the chat from being announced.

So bear with us.

I don't post anything until like two minutes when we switch the screen reader off.

Oh, screen readers are fun.

But so if I go to the thing and now I use arrow key navigation.

So because these are not interactive elements, we cannot use the tab key to jump between them, right?

Because tab key only works with interactive stuff.

So we use the arrow navigation.

So that means I go and press the voiceover keys in this case, which is Alt and Option and Control.

And then I use the arrow keys to navigate.

Figure 1, my friend Garfield.

So it says Figure 1, my friend Garfield.

Figure, which is basically announcing, oh, this is the thing that you're looking at.

And then I press the right key.

Red and gray striped cat image.

And it says the alternative text and that it's an image.

And then it repeats the fig caption because that's just like where the fig caption is.

It's in the like reading order.

So it also reads that.

And now when I leave it, it should say that I left the figure one and I entered the figure two.

I think that's what's happening.

So end of figure one, my friend Garfield.

And then you press again.

my friends garfield figure and then you're in figure two and then it reads the three images

red and gray striped cat garfield image garfield red and gray striped cat image figure two my

friends garfield and a figure two my friends garfield figure graph one 10 year revenue figure

graph showing revenue numbers 2020 and recovering 2023 the trend over a long time is positive image

graph one 10 year revenue and a graph one 10 year revenue figure so and that's basically how you um

how it's announced by uh and uh and you know different screen readers are always different

uh because that's just you know the preference of the user and you can be like more verbose and less

verbose i think this is relatively verbose uh which doesn't say a lot but uh but yeah so so

basically the idea is that the screen reader user knows oh these three images they are grouped

together because of the figure and it announces when it starts and when it ends. And this is very

similar to a field set indeed. And the reason is because that's just grouping of different things.

Yeah. And if you had interactive elements inside of the figure, they would, if you use tab to jump

inside the figure it would say "oh you're now inside of this figure" like the start and then

the end they would also be announced. It's basically the same thing. Another question in chat:

"How come the crocus bulb link didn't need an image alt for the crocus blossom in the previous

example in the video you mentioned it's good to write the alt text for blind people who are able

to search for 'dog with bell' and show image. Why would the same trigger down to crocus plant that

you want to find the image of the Crocs plasmids? That's a good question again,

like really keeping us on the toes. So this is for functional images and they are just different.

If you have something in the content, it's always different than when you have it like as part of a

UI element. And if you go into WCAG 1.1.1, which you can... Oh, we only have the things here. So,

if you go to the image overview at the bottom, you have the relevant success criteria. I like

that a lot. You can see that there are exceptions for controls and input. So, all need alternative

text that serves the equivalent purpose except for controls and input. And here you also get

decoration at the bottom. But if non-text content is under control or accepts user input, then it

has a name that describes its purpose. So the wording is a little bit not very specific here,

but if we go to the functional images and then go to the link text here,

Where's the crocus bulb? Oh, we put that into decorative. Is that true? Yeah. Then you have

this as part of a control. And then like the complete content of the control need to say

what it does. And in this case, it has an empty alt because the crocus bulbs here already say that.

Now, what I would expect, and this also depends a little bit on the website, but what I would

expect is like when you click on this, you get a whole wall with images of crocus bulbs.

So this one image does not really matter too much.

I think it should also be crocus blossom, but you know, who is counting?

But yeah, that's why this is empty, basically.

So you don't have like, you know, if you have a long description, you would have like that

long description and crocus bulbs and what you can do in the screen reader is get a whole list

of all the links and let's say you're on a website to buy you know the like bulbs to like put in your

garden i think that's how it goes i don't do not have a green thumb if you haven't noticed

and you have things like crocus bulbs and oh god other flowers and other flowers and another

fourth kind of flower i'm really bad at this um then and you you just either as a screen reader

user you might not even think like oh i go with the tap through all the uh links i just get the

list of all the links and then i use the arrow key to to arrow down um and press return and go

to that page directly instead of like navigating through the whole website so that's why we don't

want, you know, the double text in there.

If you have a link, it should be as short as possible and there should

be no extra information in there.

I was thinking of decorative elements.

are often used for applying the Gestalt laws or more simply put to organize content in a way that

helps the UMTUM process. This made me think of Gestalt labs for sound, screen reader users,

could we use these laws in a way for sound? You probably, I mean, there's like a lot of that stuff

is actually already done if you're using, you know, your landmarks and your regions and stuff

like that. That will do audible Gestalt, if you want to call it like that, you know. Like in the

fig caption example, you get like that things are grouped and stuff like that. So yeah, if that's

visually important, then you want to convey that. And usually you want to convey that using

structured elements instead of like, you know, alternative text or something like that,

where that's possible. But yeah, I mean, I can look at that and give you feedback on that.

Can I listen to podcasts in that speed?

No, I cannot.

Also, it was very slow.

How would you handle videos?

Videos is next week, next time we meet.

We will not talk about this right now.

Or should you not just use videos for informative purposes?

I mean, I can talk a little bit about it.

You can use videos.

You just have to make sure that you have alternatives.

so you want to have your captions or and your usually your audio description and your

transcript if you can and that's and that's like much more complicated and takes a lot of time

mostly in planning like if you plan it well you can produce videos in a way so that everyone gets

all the information from that but I will I talk about that um uh in two weeks

yeah and Netflix is awesome with audio descriptions and uh Apple TV plus plus is also great uh Disney

plus is awesome uh like they're they're like the streamers do really a lot of good stuff with audio

description. Unfortunately, they also have started using text-to-speech like machine voices and they

are really terrible, like all the blind people hate it. So keep that in mind. Any other questions?

Going, going, gone. All right. Yeah, I think that was all good. I don't have like a lot prepared

for this because I think this is one of the more detailed things. I just want to like quickly give

another like rundown of the decision tree because I think it's quite important to get that. And

And that's also where like you might find that, you know, sometimes it's just not as clear cut as we'd like it.

Because a lot of the images also have to do with like the intent and what you want to show.

And that's, you know, not a lot of people can or you can't see that from the outside.

You have to go like a little bit and digging.

So that's just what happens.

So if the image contains text, it usually means that it has content that should be announced by a screen reader.

But there are exceptions. So for example, if the text is also there with real text nearby, then you should have an empty alt attribute.

the text is only shown for visual effects. So what do I mean by that? Let's say if you have an image

on a website and it's basically like a name of an event, let's say, and it's in the background,

and it's just there to basically be a pattern in the background, then that's just a visual effect.

It's not there to be read, it's more there to be like, you know, look nice.

If the text has a specific function, for example, is an icon,

then use the alternative text to communicate the function of the image.

So for example, you have a B, a bold B in your word formatting bar.

the text should not be "B", it should be bold. That's an easy example for that.

And if the text is not present otherwise, then you want to put the alt attribute to the image of the

text. I think it's pretty straightforward, but you have to, at least at the beginning,

like when you start out with accessibility, it really helps going through these step by step

And just getting clear on like, okay, where are the branches in this tree?

And where do I go?

And honestly, after you've done it like five times, you just know.

Like there's no, this is not like rocket science.

You just say like, oh yeah, this feels decorative to me or this feels informative to me.

And then you decide based on that.

And, you know, sometimes you're wrong and that's also okay.

Like, it's not like, you know, most of the times, like, it's so clear when an image needs an alternative text that it's just clear and everything that is, like, on the brink, you know, it could probably go either way.

If the image is used in link or button and it would be hard or impossible to understand what the link or button does if the image wasn't there, then the alt attribute should communicate the destination of the link or the action taken.

So, you know, that's basically also like the button, like insert a table button, like the button shows a table.

well, it shows probably like a grid, like a two by six grid or two by three grid or something like

that. But the alternative text should not be two by three grid. It should be insert table,

stuff like that. So that's how you want to do the functional images. And then you want to ask

yourself, does the image actually contribute content and meaning to the current page?

or context. And that's always like, you know, there's no really hard and fast rules, but in

general, you just want to put an alternative text on it. If it's a very complex piece of information,

you want to do what is in complex images. Yeah, it's a common thing that it happens,

complex images, but it's also something like a bridge you only need to cross when you get there,

in my opinion. But I will talk a little bit about graphs in a moment and charts.

And then if it shows content that is redundant to real text nearby, then you can use an empty alt

attributes. So for example, on your website, you say like, oh, this is how our company developed

over the last three years. Two years ago, we had like X percent growth, and now we have X plus 2

percent growth and now we have extra three percent growth and then you have an equivalent like

image there that that says the same thing then you don't need to like repeat that in the alternative

text that's that you can um nobody is like prohibiting you from like saying oh i think

it's important for people who have a disability to know that there is an image. So for example,

if they want to share it on social media, for example, then it totally makes sense sometimes

to have redundant alternative text, because otherwise the image gets completely invisible

to assistive technologies, and we don't want that necessarily.

Yeah, and then if it's purely decorative or not intended for users, then you want to use the empty alternative text.

And that's usually how you do it.

And if it's not in any of those use cases, then you have to read the tutorial all over again.

That was a fun thing to write.

But like, yeah, there are like, you know, sometimes you don't fall into like these neat little categories.

And that's just something we have to live with.

And for me, the most important thing is if you're on the verge of, if you can decide and you're on the verge of, should I put an alternative text on it or shouldn't I?

I think you cannot go wrong putting a shorter alternative text on the image.

Because the worst thing is that it's a little bit more verbose than someone wants, but otherwise it's totally fine.

Yeah, I want to talk a little bit about complex images.

And, you know, you have the charts here.

You don't want to do long description.

I think I said that in the video too.

like what you want to do is the figure and fig caption route.

I think that's the best one with a good background

or like having the long description on the site.

That's actually like the easiest.

And now you can have like with details, elements and stuff like that,

or even with dialogue.

You have so many options now to make, you know,

to put long alternative text on the page

and do it really nicely and visually.

you know not not too confusing so yeah that's what i what i would recommend um but don't don't use

long description because that doesn't exist anymore and it also like you know it means to

have like a separate page for it it makes no sense at all um but of course you can do like more stuff

having an alternative text even if it's long and if it's like you know if you're unpacking like

the graph it's never like it's never explorable like graphs are you know one of the nice things

is that you can look at a graph and say like oh i see the trend of this and that's not what's

possible if you have alternative text you know if you don't think about like explicitly putting it

on the page, then it's unclear. There is this Chartability initiative that is really good,

that talks about data visualization and how charts can work. And they also have a workbook

that you can work through. So if you have to do a lot with charts, I think this is totally worth

your time. Very, very smart people doing very, very good stuff here. And to show a little bit

on like how would an advanced chart work. I have this example from the Visa chart component. So

these are the credit card people. They developed this. Let me get rid of the sidebar bit. I cannot.

I don't know what this does. Oh no. Okay, hello? I think I broke it. Oh no, I broke it.

I don't know what happened. Yeah, there are a couple of from the chat. Yahoo Finance also did a cool open source project on audio charts called Songbirds to be able to listen to a graph.

Yeah, there are a couple of those types of projects. And I think they're really interesting. And can be useful, like the sonification, for example, where basically if you have like one line chart, you can say like, hey, you know, beep this to me and it will go and just beep it like.

I wonder how that will look in the transcription.

But that's basically a nice way to say like, okay, how does this work?

Or does it not?

So this still has it.

What happens if I press it?

Okay, it does work in this view.

Then just ignore the rest.

So yeah, that can be actually a useful thing.

So for this one, they start with the chart and chart subtitle, and then you have like different data.

And this is all nonsense data.

You can actually look at the different data in the table, which is always very welcome.

And you can do, you know, look at the keyboard instructions.

So you press enter to drill down into the chart or into different areas on the chart.

I will show that.

and enter to go level up. Tap to go to the next item on the page so you can leave whenever you

want. And then you use arrow keys to move among sibling clusters or bars. And up and down keys

to move among the bars. And I will show that too. And escape to dismiss tool types.

And then press and hold control and shift with arrow keys for the best navigation experience on the Mac. Which is interesting because control and alt is usually the key that you use for voiceover but they seem to do something different which is cool.

So, first we look at it just with the keyboard, so I press tab, go to keyboard instructions

first, which makes a lot of sense, because if you don't know how the keyboard works,

you can't use it.

And then you press tab again, then you get to the chart, and then you press tab again,

and you're at the next button, which is this toggle for the table.

But before that you can use return to go into the chart, then use left and right to go through

the page or through the groups.

And you can also use up and down, right?

You do nothing here.

And then you can go right and left through these other bars, like basically the subsection

for 2016 now and if you go up and down you go to the next bar of the same type so in this case if

i want was interested in like how did you know c do uh between the years i can do 2016 22 45 78 51

and eight so i have a good understanding of like how c does over the time don't need to like go

2016 then go to c then 2017 go to c um and so on um and let's let's see how that uh sounds with

the screen reader on i don't think i have used this for a long time voiceover on safari x slash

- Slash images, cluster bar, display keyboard instructions,

collapse button, main.

- And that.

- Chart title, chart subtitle, navigate into the chart area

by pressing enter, web application.

- So pressing enter to navigate into the chart area.

- 2016, cluster one, image, interactive cluster bar chart,

web application.

- And it says 2016 and this is our cluster one,

so all the data.

Then I can press return again.

- 2016, A dot minus 30, bar one, image.

- And it says 2016, A minus 30,

and that this is bar one. Now if I use the up key... A64 bar one image. And so I get that information, and then I can use left and right. And then shift and return to switch between the clusters.

image 2020 cluster 5 2009 2000 2016 cluster 1 image 2017 cluster 2 image so don't ask me why

the one focus is at the top i'm i have no idea it's not my code like but it's like this stuff

can sometimes happen it's a little bit disorienting but uh in in general like this is this is how it

should be you know it's really like oh you can explore the information here and now i tried to

shift and control with the arrow keys and see if that makes it better or worse or whatever 2018

cluster 3 image 2019 cluster 4 image 2020 cluster 5 image 2019 cluster 4 image i don't know

maybe this is like old uh old information but this is how you can like use this um for like knowing

knowing what's going on they also have um components or space key to view on canvas

trend table one column 55 rows open link and preview page page menu reader available

they also do have line charts with uh uh example line chart component presenter or space key to

view on canvas highlight open link and preview page with interesting like highlights here so boom

prediction and then what really happened so you have that distinction which is like i've never

seen such a chart like this is all like i'm not a finance guy i'm probably as good in finance as i

am with like plans so um that tells you a lot i guess link skip to canvas default example pie

chart component chart display keyboard instruction chart title chart subtitle navigation category

group a line one image interactive line chart web application so and this is important like it says

group a line one uh because there is od i think there's only one line let's see if everything so

january 1 2016. value 7.7 subtitle bias has left the meeting display keyboard and chart title chart

subtitle category group line one image interactive line chart web app category prediction line two

image okay so there are basically two lines it says the prediction is a separate line which is

totally fine category group line one image then you can category group date january 1 2016 value

I love, by the way, that Visa is just saying, like, yeah, we're using billions because that's how we feel.

- And now I probably can use the up and down key to go to the next group on the same date, December 1st, 2016. Let's try this.

- Category prediction, date December 1st, 2016, value 9.2B, 0.2, image. Category, date December 1st, 2016, value 9.7B, 0.12, image.

Nice. So that works. And I think that's actually pretty neat to be able to go through these like that.

Yeah. So, you know, play around with those. If you think like, oh, I want to have something that is like a little bit more complex, a bit more interactive.

I think those are very fun to go through and say, oh, what is the deal with this?

And one of the other things that they do really well, and I didn't talk about that.

I don't think I talked about this in the images, whatchamacallit, like in the individual videos, is that if you're doing charts and other complicated things, of course, you have to think about color blindness.

And this is one thing that these Wieser charts do really well.

Like they have these different patterns.

Unless you can see, if you can see the video.

And if not, I just tell you.

Like they're using like a pattern of like lines at 45 degrees and then dots.

And then they have like, you know, a rectangle pattern, like an X pattern.

on the third bar so you have like these different views and it makes it really easy even with like

different color vision deficiencies to distinguish the different charts and even if you go into

things like tritanopia which are very rare but also like works a little bit different than most

of the like red green color blindnesses color blindnesses color vision differences it really

gives you like a good way to like see okay what's the difference what is grouped together so I

really like that even if you look like the heavier like you know which goes into like

um blindness territory like uh acro uh acrometo melly oh that's that's a hard word and i only say

it like once a year so that's that's uh that's what we got here like it can really help especially

like the axis uh and the um the line uh pattern here can really help making this stand out more

compared to the dots in this case.

So, you know, it makes a lot of sense to use those patterns for distinguishing,

but also like just for making sure that people have a good time.

And then this is the black and white version basically as well.

And all very easy to like put together.

Like this is not a super like hard requirement to do it like this.

But if you want to like make it easy for people, then it pays off to do it.

All right.

And a couple of other notes that I have.

And I think I try to wrap it up in a couple of minutes without like having a break.

Because I don't have any more prepared.

So if you have questions, put it into the chat and then we will decide. Just showing, you know, a little bit on like how to find image alternative texts and like making sure they're good. And here we have, you know, this like little chart here.

Now this I don't think you need to describe in detail, and we don't do it here in the before and after demo.

But if you look at it with inspect elements on the before page, it doesn't have an alternative text.

It just says nothing.

So the whole brain donations at City Hospital by month does not give you any data here.

And that's obviously bad, right?

This is content that needs to be available for everyone.

So if you go to the accessible page, first, it looks a little bit different.

And it's simplified.

But also, it's mostly simplified because the origin was unreadable.

And we couldn't do it, read the things properly.

But basically in the alternative text here, it says brain donations for May 13, June 13, July 12, August 8, and September 7.

And that way, you know what's going on without having big alternative texts or anything like that.

You know, sometimes this is totally fine.

And for this use case, where it's not like the main focus, I think it's totally good.

yeah here I think we say

homepage of Clara F

so this is Clara F's website

yeah this is basically a headshot of a baby

I guess

and basically they complained with the mayor

and that's all good

and because this is a link we don't want to describe what's actually on

the image, but we want to say what's happening when you activate it. So in this case, ClaraF's

website. You could also say like headshot of ClaraF website or something like that,

but you know, you don't need to do that.

Yeah. And on the like inaccessible page, if you do right click and inspect, you can see that this

also has no alternative text because that's how people wrote back in the day. Where's the image?

Oh there it is. There's the link.

Oh and the alternative says picture of Clara F and that's not descriptive of what's actually

happening when you use the link. So you have to say what's happening when you click it. At least,

it should be clear. Because this could also be linked to a larger version of the image. You can't

just say, "Oh, this is the picture of Clara F." Because it doesn't give you the same information

there. Yeah, and you know, when you're using different accessibility tools, you almost always

can run an accessibility scan and that will bring up bad alternative texts and stuff. So in this

case, like there are a lot of images that need to have alternative text or empty alts, like this

corner image here so this comes from a time when we didn't have the possibility to make shadows with

css so every shadow here is a little uh image uh and then uh you know or in this case it's spacers

uh for a background image but like this is all like old technology like this is like

telling you from the like you know pre-world war i don't know tvs or something like that

so you don't know what this is

they basically make sure there's space in the table

because of course we also use table

so every image would be announced as image

I think these days screen readers are very smart

and would just skip them

I maybe want to try that

but yeah

there was a time where they weren't that smart

and did read them all one by one.

Let's try that.

Yay, border underscore left underscore top dot gif image.

So you can see how that like having this alternative text for images that don't need to be read,

because they're just for like visual things, completely like make it harder to go through

the page.

And we have a couple of different examples here too.

Top logo next end gif image. Top weather image. You don't know what the weather will be. You

just know that there is an image. Mark.gif image. You don't know what's going on. And

That's what we don't want, right? That you get the image names read out. Because this

is basically how screen readers try to make it better for everyone. And this has nev-facts,

and it's a ticket link. So that even doesn't match with what's visible on the screen. That's

why we are so concerned about alternative texts. And if you go to the Accessible Web...

Open link in preview page. New line. Link. Head in. Current new. Link. Link. Link. Link. Visit link. Template. Demo starts here. List two items. Bullet one of two. Link. Skip to content within demo page. Bullet two of two. Link. Skip to end of list. Visited link. Image. City lights. Your access to the city. Sunny spells. Image. Explore site by topic. Quick menu. Explore. Go. Button. Traffic. Construction work on main road. Today. Tuesday the 22nd of October 2024.

Or heading level two, navigation menu. Visited link, home. News, clickable. Link, tickets. Visited link, survey.

So you only get like what it is and only says survey because it doesn't like also announce the alternative text for the links.

And now tickets here is a real text before it was like on the image, which we try to not do anymore.

And that's, you know, that's the difference between like having an inaccessible page and inaccessible page.

and yeah

these GIFs that we had

to make spacings

they are super rare now

but you know like

it's always good to know what's going

on there.

And yeah so that's

basically what we're looking at

and here you can if you use an automated

tool you can see them as well

and yeah

basically like the last resort is to read

the name and a couple of years ago some screen readers try to get like oh there's a heading

near here i grab the heading and use that as alternative text all kinds of shenanigans um

i think the uh file name is the only one that is left really uh and uh and yeah and if you

have one of these like more advanced like bookmarklets that let you show all the images

you can use those and every like good tool will say like oh there's an all text missing

or it will have like all the alternative text listed and then it will say ah this might be

overly long also mentions color which can be problematic like if you say like

you know we have two things and one is the the red one and one is the green one and you should like

you know look at uh something else and pick the same one let's say it says red uh red apple and

green apple and then it says like you know uh pick the red apple and you can't make that together

then that's problematic. So that's why color is always weird. Then you have images that are not

found, that's not good. And yeah, a lot of alternative texts that are missing and then

you get these empty links and that's always bad. Yeah, and that's basically how you can go through

it and then you can go to the accessible page and do the same thing and it will also show all

the images but you have not as many images and you can quickly look at the image and

compare that to the alternative text and say like oh yeah this looks about right and then you don't

need to like, go too deep. Because, you know, those are the

the biggest use cases here. All right, any other questions?

Yes, I have one. Before it was that you should also write

title on the image. And also alt text. How is it now?

I don't know what before is.

In general, title should be discouraged.

Do not use title at all.

Because title is only available if you're using a mouse cursor, if you're using an operating system that supports it.

It's not available on touchscreens.

It's not available if you're using a screen reader most of the time, or if you're using the keyboard without a screen reader, then it's completely not there.

So we don't use titles normally.

In many cases, titles are used when you're using a screen reader as like the accessible description.

So it will be basically read after the content or the accessible name of the image.

So of the whatever it is.

So for an image, it would read the alternative text, would say it's an image and then would read the title.

And so if you have the same value for the title and the alternative text, then it will just read it twice.

And that's not not super useful.

And so, yeah, you shouldn't use title on images, especially if it's like duplicating it.

You can use it for like, I don't know, additional annotations, but it's hard to discover.

And that's why we don't, or we usually recommend to, you know, ignoring it when you can.

Okay, any other questions?

going I'm sorry I'm just thinking about that with the title and alt sometimes I think it's good

nice to have a title for those that can access it but then also then you if you didn't put the same

and title and alt is there any way to avoid having it read twice then if you want to have it like

that not really not it's probably you could use some aria construction and override it with

maybe an empty string or something like that but it's like it's not worth it like if you

if you think like this should have a title um and you know sometimes we have that with like

tooltips on like uh let's say toolbars and stuff like that you know um then we then titles can make

sense if the icons are very like hard to decipher you know um questions how does that work with

people on like small screens and who are not using the mouse but you know that's sometimes you just

have to make like concessions uh because of space and uh and stuff like that so in this case yeah

you can use uh you can use title uh but like our preferred version would be to put the text

like directly on the icon so you don't have like this like guessing game for people who cannot

reach it um there is a new thing uh that is coming to the web platform right now which is called pop

over that is supposed to be solving some of these things i'm unclear if it does so but it might

because i i just don't have enough like uh i i haven't like played around with it i should

at some point but i haven't uh maybe i maybe i can prepare that for our aria uh and like

complex tutorial uh lesson but like uh yeah it's it's like there's a lot happening um

around like new elements and new like approaches to stuff so uh who knows but uh but in general like

title a little bit discouraged and oh apart from one thing because there are always exemptions like

this is something you should know by now for every like hard rule there's a hard exemption

and that's when you have iframes you always want to use titles on iframes to label them

so that screen readers know that like what is inside of the iframe that's that's the fun thing

of like accessibility, like there's always a hard rule and then a hard exception for it.

All right. Any other questions?

No, going, going, gone. Okay. Thank you very much for attending. A little bit shorter today.

If you have any other questions, put them into Slack. We're always there, always happy to help.

And yeah, let's see you.

I think I'm not, it's not my duty next week,

but see you in two weeks.

And in the meantime, you have fun with Hampus,

which is also awesome.

All right, take care.

See you around.

Take care.

Thank you for today.

Thank you.

Bye.

Bye.