Live Session (2025-26)

Hello everyone. Uh welcome back to this uh what is week seven, I think, of our little uh course. Uh this is going like really quickly by and now we're uh in the beginning of December already so uh yeah over the next couple of weeks or next four weeks there would uh there's going to be a lot. Um And uh yeah, the uh I have three things on my mind. The first or actually maybe like four things. The first thing is we have published the examination information. So if you have questions about that, you can ask that today. The second one is that we have a break over Christmas as it is tradition. Uh and uh I have set uh all uh like I think all January topics I sent them to publish before Christmas, so you have time. You know, you can manage your time like you want. Um so if you have any questions about that, you can ask those. Uh and then you know the questions about the images topic that we uh that we are talking about today. Those are the three like things that we might want to to talk about. So any questions about the examination and how that's going to work? Maybe you haven't even looked at it, uh and if you haven't, like this is your like making you aware that it happened uh and uh and that it is published. Going, going, gone. Okay. If you have any other questions, you know, feel free to put them into Slack and ping us. That's usually how that goes Alright, then any questions about like the break or how you should organize yourselves? Just organize yourself how you feel it works best for you. Um I can open the canvas real quick. Uh oh if I always n remembered what The URL was just academy. infrastructure. com. There we go. Uh, and share it And here we go Really like zoom, but you have to always reorganize your windows afterward When you share. So um current course is this one And if we go into the student view. So we have all the um courses here and currently we are at Seven, that's correct, I knew it. Um and so at the bottom of the page it's a it says examination Should say examination. I did publish it. So apparently I did not publish it.

Yeah, I was going to say the same thing, but I don't see it.

Oh, the the section is not published. Oh, of course. The module. Uh Yeah, continue. So I think you could have seen it through other means, but not through the through this display. It's Uh yeah, it's it's a it's a complicated system and sometimes you don't and you don't like make sure that everything is clicked on uh and then it's not seen. Like And it is not seen. Why is that? Do I need to reset the student? Yes, there it is. So it it thought I had already like took part on the examination. So here you can see what you need to do. It's due February 20. So it's still like a lot of time and we will have a lot of like things that you need to know before you can actually, you know, make the submission. Um is supposed to go through easy checks which is basically a step-by-step guide on how to make um stuff accessible uh and then you know hand in a report and if you want to have the better grade uh also like a little video pitch there that like where you describe your findings and just uh um yeah make make an uh uh uh an argument for accessibility that's that's the goal um you know i I think we think about like five pages uh uh yeah typical report is between five and fifteen a four pages long then depends on how many screenshots you put in and stuff like that So you know, not there are no hard rules here. Uh and feel always free to ask us, you know, if you if you feel you're done and you but you don't feel confident that you are, feel free to ask. Uh and you leave. you're you're good. Um yeah and then you can at the bottom of the page like when you click start assignment then you get on the bottom of the page this file upload uh field where you can submit the assignment And you can do it multiple times. So if you find an issue or an error or something like that, you can re-upload. You only have to do all files all the time. So if you submit a Report in like word format and a video uh and you make an update to the Word document, you have to upload the video as well, otherwise it gets lost. And I mean we can find it again, but it makes our life easier when you when you do both at the same time. Um yeah, and if you don't know how to record, you can do that from directly here. So they have a lot of like things that you can do. can do. Um yeah, and that's that's the examination. I don't think there's a lot to discuss uh around it. Like you know, a lot of the different individual aspects who will uh pick up over the next couple of weeks, you know, until January, uh mid-January, and then you know, uh I think you will have a better grasp on on on what to do. Uh yeah, um any questions around this? Apart from why didn't you think about like publishing it correctly the first time? Alright. No questions. Oh there's a chat message. I see it now. I see it too. That's good. Alright. I'm gonna leave this page and we're gonna come back to this. Um yeah and I I think for images uh I should ask like are there any questions anything that you didn't understand anything I should go more into detail um Because I know it's like it's a complex uh you know topic with a lot of details and uh uh and yeah, uh always questions usually.

Yes, I have a question. And it's actually about complex images. I have some notes here and my notes are saying ask. about this again. And nothing more than that. I'm guessing I I think you showed us some graph and charts, but I think what I got lost is I think in the video you showed us the example, but I I would like some more in-depth, maybe. Oh.

Explanation. Alright. Um yeah, I mean, so the complex images is a complex topic. Uh da da. Um I really should have a sound effect for that, uh for very of uh uh you know um things that are very obvious. But uh so the important thing is that complex images take more than the classical like text alternative text that you put would put into an alt attribute, right? So you have to do something that is more detailed and usually that means that you want to have your text structured which you can't have in an old text right it's all it's just one long sentence basically. And there are a couple of different ways to do that. And even those like four, three ways I think we shouldn't talk about the long desk anymore. Even the three approaches in here. Um you know, are not all the approaches that you could took. And I will show an an example in in a in a bit that uh I I thought about like showing Um so that's good. So um yeah, so the your main goal is like if the is determining like how or when is an image complex and the complexity usually is because you present a lot of data, a lot of information in the image. It's not about like an image being like complex. So it's more basically about graphics than about images, right? So, you know, you could have like uh, I don't know, a jungle scene where a lot is going on. I mean that would be um uh image that you could describe. in a way as a complex image, but you don't, you know, maybe just a lot of jungle animals in a jungle is a good enough description, you know, just depending on the context And there are a couple of things like if you have data, if you want to show something. That you can do. So uh one of the main things where we see long descriptions is stuff like graphs. uh diagrams um is things like uh technical drawings for example like let's say you have like a uh drawing of like uh a house uh of a you know, an architectural drawing. Uh that's when um the approach of like using complex image is warranted because you want to put in like much more detail and you also want the user to be able to navigate through that detail as well, right? Um because as I said, like if you have alternative text, yes, you can put all of the details in the alternative text, but the user cannot pause it. um if they use a screen reader of course uh they cannot um like jump between headings because there are no headings so um that's that's why you usually want to have complex uh descriptions. Uh and here you have like multiple uh or mul multiple data points as well. Like of course you have for January, February and March, uh and all the information for the sites and then the quarter the total for the quarter. uh as well in here uh but there are things that are visually obvious that are not obvious If you just put the data in a spreadsheet. So for example, here you have the downward trend, right? January, February, March. Although this is the maximum or the highest. total in this water um it actually is like a downward trend and here you know site three has like the lowest Total, let's say visitors, yeah, it's visitors in thousands. Um, the lowest total visitors, but there's a pretty steep upward trend, and that information is visually clear. Right. But it's not clear if you just have like the uh the numbers uh As a like table or something like that. So you you want to have a long description for exactly those use cases. And you can do that in a couple of different ways So one way is you have just have an image description link. I always kinda like this because it's like very simple. And you just go to a different page and it has like You know, you can use all your HTML as you want. Like here we have the long description example and you have like the overview, you have the individual values, and then you have also uh like like a paragraph about the presentation of the data, which can be, you know, I mean not for like a traditional bar graph, I think, but like for some other visualizations, it might be very important to say like um oh the like colour uh represents because like the the person who cannot see the image might want to talk to another person. about the the image, about the graph, about the data. So it might be a good idea to say like This has colors for from red to green for let's say income. Um and then you have circles in that are smaller and bigger uh that represent the um the population density, for example. So you could go and you say like, oh, you know, this is something you cannot put into like an alternative description. It's impossible, right? You cannot describe every like relation. in a graph but you could put like that information how it's visually conveyed into your d uh extended description here uh and then like a blind person could go to another person and say like, hey, you know, uh can you see where there's the highest income and uh the most den dense pup population. Like what's you know, w what do you think? And then they can like look at it and like give a qualified feedback. So yeah, it's a uh that that's the goal to give like a user who is blind or low vision like as much information as they can get uh from such a uh complex image And then the second way to do it is to describe the location location of the long description, the alt attribute. So this is when you have it on the same page. I like this too. I sometimes would use like an expand collapse after it, like a details element. And then you can uh describe in detail what's going on in the uh in the image. But you want to pull like from the um alternative text at least you want to like point to the uh to the full text or to to the description description because otherwise it's like the user doesn't know that there is a detailed description. And if you only have bar chart showing monthly and total visitors for the first quarter 2014 for sites one to three, then that's not enough information, right? Even if that information is somewhere else on the page, you have to be made aware that like, oh, there is detailed information somewhere else. And then you can use figure elements with fig captions. I'm not the biggest fan of these. uh anymore. I don't know if I say that in the video, but like uh yeah it's uh I I think the idea is good but like in practice I think this is not not not the best way to do it. But you can. And then that groups give you a groups group information when you use a screen reader. And uh and and you can find the figure caption relatively easy. Uh yeah, so those are the ways if you want to give textual alternatives, but there are other ways to to give alternatives to. Especially for charts I think it's really important to like uh to learn about like what chart accessibility actually is. Um and there is a whole like workbook from chartability that you can read if you if you want to if you have a to do a lot with data visualization. I think it's super interesting. Um but I'm also a data visualization nerd somehow. Um but yeah chartability is other people that do a lot of of that work. And if you look at the workbook, uh da da da da Then you see like the methods that they use, uh and like what failures are in their view, uh and you know what are critical for them. Uh and then uh how to test, like visual testing. um like how how should the keyboard move? Yeah, and then you have to of course try it out with the keyboard, right? uh and then screen reader inspecting. So this is a way where you make actually the image not an image but an interactive um chart that you can inspect and use. And that's uh in general what you should do when you're using um complex images and they are charts. Uh so you get the these like really nice ways and I can show that um in a minute how you interact uh with those uh things then there are cognitive barriers um there are evaluating content like d does it actually make sense with like things like high contrast mode, there's a lot of things that you can do. Um and that helps you to uh Uh yeah, to make them you know perceivable, operable, understandable, and robust, like um making things CVD-friendly. I think we saw that here. Um that's basically the um uh CVD is color vision uh deficiency. So uh what we used to call color blindness. uh is uh is basically what uh what you try to do. So you know there are a lot of more things like making something visually accessible uh than just um just putting alternative text on it. But this is a good like uh very practical workbook to do that. Yeah, and uh the um the library I like to show is the Visa chart components. So this is from the uh credit card company visa. Um and you would say like, oh that's logical it's in the name, but you know, sometimes it's not it's not that that clear. Um and they have this line chart and you can you know click into it and then it goes away. That was not what I was expecting. Uh Okay, this is weird. I mean I can't tap through it, right? I can go here. Yeah, so that works. But I thought I could also like Oh no, if I press space it also goes away. So maybe that's a problem with having it in Safari. I try to open it in a different browser. Just to double check. I can share that too. Uh du That's it. only so that you can be my uh you can also see uh if it disappears so I'm now clicking on it No, just nothing happens. Which is okay. I thought there were there was something like an information window or something. Uh you know, the demos are are what they are. But basically this is The idea is that this is an accessible chart and you can inspect it using the keyboard or a screen reader. And I will show uh let's go back to here. Because if I switch on the screen reader you want to like it's it's fun it every time I reload it has a different chart here and now it has uh like a a world like a globe uh with like different countries and they have values which you know nobody knows what they mean because it's a demo But that's fun. And maybe I can show this in the screen reader. Let me try. Share sound. And let's see

Uh don't know what's PolyPane Line Sharp PolyPane has new dial world map interaction dialator storybook welcome.

So here we are. Why am I in PolyPane now again? shouldn't have done that. Oh this is very weird.

Default example but polypad with window. safari axl slash chaz slash images chart Storybook preview I F R A N E web content.

Okay, let's try this. So I'm now using the uh oh I should actually share this differently. Give me a second.

Voice over off.

Uh because you cannot see my like the screen reader output and stuff. And I want to show you So let's do this portion of screen.

So something is wrong with my computer. It does just does stuff.

Muted. Okay. Weird. My computer has done a lot of d weird stuff uh uh like a minute ago and uh it looks like it also muted me. That's great. So I'm just preparing like trying to make sure that you can see things. And I'm not sure what's going on. So maybe I have to restart. Yeah, this doesn't not look good. Aww. This doesn't yeah. It's very laggy and I think I have to uh I don't know what's going on. So I will stop sharing and close the meeting and then I will try to come back like really quick. Because I can't even like click the right things at the moment. Now that I closed sharing, it works perfectly again. So I don't know. I will be back in a second Uh I leave the meeting

Hello, I'm back. Let's see if this works. Oh and I cannot claim host role anymore. That's fun.

Well Anna, you're you're the you're the host now So I would be able to do this. Interesting. Uh okay, let's try to do this. uh properly. It just closed everything in the background. So I hope I hope we have a better experience now. Oh, closing this. There we go. So it does put it at the top, so I will just put my stuff. here at the top. Yes, perfect. So we do have the um the the keyboard is now shown and now I tried the screen reader again and I hope it works.

Voice over on Safari, XL slash chaz slash images, bar chart, default title.

I put the screen reading.

Storybook preview I f r and e web content.

So you can see it as well. And then we see. Like, but like my mouse pointer is very j jittery. I don't know.

Storybook preview I font.

Okay. And now I'll navigate through the chart.

Title Storybook Preview I F R A Storybook Preview I F R A N E MT Frame Title Storybook Preview I F R A N E Storybook Preview I Stor

Are you kidding?

Item was removed. Item was removed. Sorry, sorry book preview I F R A N E empty frame. Subtitle Storybook Preview IF Storybook Preview IFRA N E MT France Storybook Preview IFRA N E Web Content

Okay, I have no idea.

Voice over off.

So I I will be your screen reader today. So uh usually what you can do, you can tap through uh the uh through the chart. Maybe I should have tapped instead of using the arrow keys. But the arrow keys should work too. Let's try tabbing

VoiceOver on Safari, Axel slash Chaz slash images, bar chart, default got operator storybook window, display keyboard instructions, collapsed button has keyboard focus.

Okay, that works. So then you can like press space to open the to press the button and show the keyboard instructions.

Close keyboard instructions expanded button.

And then you should be able to navigate through those with like the voiceover keys and arrow keys in the controls fifty selected tab one of three

Actions 5 tab 2 of 3. Code tab 3 of 3. Change add an orientation D button.

That's No, that's not the right thing. I don't know where it is.

Keyboard instructions group. Voice over off.

Enough, enough of like experimentation. So basically with the screen rear you expand can expand collapse that can then read through this. I don't know why it didn't didn't let me And then you can use the enter key to go drill down into the chart and use the arrow keys too. will like navigate through the data. And I will show that using the keyboard and then I will also try to show it using the screen reader again because I'm not giving up. But um the idea is that you that you go through and maybe it's just incompatibility with like voiceover or something that I'm running in the background. Worked worked better last last year. I can tell you that. Okay, so we have the display keyboard instructions. Also good that they make it very visually, so you know what to do. if you need help um and then you go on to the focus is now on the graph and then as it said pressing return goes you into the graph And now what we're selecting is basically the first, which in this case is the only data in here. So we press return. And now we're in quarter one and it will announce in the screen reader it will uh announce quarter quote Q1 value 1. 1k and then you can use the arrow keys and it would be announced uh all the time. Quarter Q3 value 2. 1k, quarter q4 value 4. 1k And I think there are ways to even get information if this is higher and lower than the previous one. Uh no, I don't think they have that here, but in some of the um uh the types of content. You can do more because this is like a very simple bar chart. Then you have like things uh like this where you have multiple things in here right oh this is just for the amount oh clustered bar chart I think that's what they are thinking of. So this is much more complicated already, right? You have three different uh types of information here and then you have them like intermixed with like each other uh and for the different years so in this case again you go to uh in here you tap in this and now it basically would read like Like all the different values, so A15, B23, C45, and that's how you would like interact with this and you use the arrow key. to navigate through. But it also has an outline so you probably can like drill into that even, which is correct. And so now you have AB uh and see here and you can just like you know skip through those to make the comparison between Um I know in some yeah, in some options they have the up and down keys as well. So if we go in here and we use the down key, it goes only through the A values. So this way we can look into like okay how does A work throughout the uh the history basically in this. Um and that's useful because like it gives you like another dimension to go through this data, right? And so uh so that is that is very useful. Go ahead.

Okay, it's about the down key. That kind of requires for the user to know that there's a value that goes under. So how does that work?

So uh in this case first the keyboard instructions here have the information that you can use arrow keys and up and down keys. So um And like if you go into the if you tap into it, it would always announce it as like a group of data. So in this case it would say it won't announce the chart. title I guess and then it would say like okay this is 2016 um data for A B and C or something like that and then you can you know that you can can go into that and you know and then you probably explore it with like just trying to to see what happens with the up and down key uh and the left and right key Like there's no, you know, that there's a level of like where you go to describe something and a level where like the user have to figure Has to figure it out a little bit. You know what what what information is in for important for them and how they use it. Like Um, you know, and and this is like one thing, you know, maybe as a user of this chart you actually are interested in like how C did over the years. But you will always have A and B if you're a visual user. As a screen reader user, you can pick only C and go through those values. So you know it's like It's uh actually actually quite nice to have that. So yeah, but it's like it can be different, you know, different things for for different people, I guess Yeah, and you know, and you also don't want to over-describe stuff because like if someone is very familiar with this type of chart. If you tell them, you know, oh use the up and down keys to do this and that, use the left and right keys to do this and that, you will get like a lot of repetition. Uh and that can actually like drive people away. So, you know, it's uh it's difficult to find that balance sometimes. And uh I think if you have like an information that like lays clearly out okay these are the like three keys that you interact with stuff because it's enter it's tap and it's the arrow keys Uh I think that's pretty powerful to like give people, you know, so that people can know what what's going on.

Yeah, just a quick question about that. So I'm guessing that the first thing that happens is that the user gets on the I icon, right? Or does it announce the chart title first and then goes on to the I Hi Col.

Uh I think how it's all nice here is the chat title is just an HTML title and uh then a paragraph and then and then it goes into the uh display keyboards.

Oh, okay. Okay.

So which is uh about what I would expect to Yeah, and uh and like this is this is a simple one. You have the line charts. one that I like to show. Yeah, this also only uses uh very simple instructions, same thing like using enter. But here you have like the prediction and then you have also the boom. graph which is basically its own graph and so that where it um splits here it gives you like both options to explore as well so you can use this and explore the whole data And that will only go, I think, the gray one. No, it goes actually the the red one. Um, because I guess that's the real data. But you can use uh up and down keys to like say, okay, at the on the same line. Can I go up and down? Like it's you know, I I think if you see it and you use the keyboard, it's very straightforward. I think if you're using it um as as a pure screen reader user it's probably uh more difficult to use but like it's you're able to use it. So it's like it's it's like uh you know it's like I mean and and that's like the big challenge right I mean these are graphs that are made for people who can see them. Like fundamentally. Um a lot of when we especially when we talk about complex images and stuff like that. Um the images are made for people who are visual users of the web or of apps. And then like making them accessible is always a secondary target group if you want to if if you want to call it that, right? So that makes it makes it all often like more difficult to make it accessible But on the other hand, like if you are uh getting blind like later in life, so you have seen a lot of graphs and a lot of like visualizations Um you might be like, oh, I don't want to hear all the numbers, I want to see the see, experience the graph, right? So there's always this uh this like back and forth of like what's what's the best approach. Um and I I really like this. I mean They are very straightforward. Um, and let me try again using the screen reader. I know that that didn't didn't go well today. Um But I'll try again. And if if it doesn't work well, um I will make sure that um uh after we're done here I will record a few snippets and put them uh on uh on the canvas as well. So after restart or like reformatting my computer or whatever is necessary.

Voice over on Safari Image Image Image Image Image Storybook Preview I F R A N E Web Content Title Okay, display keyboard instructions collapsed button. Chart title. Chart subtitle. Navigate into the chart area by pressing enter. Web application.

So it says navigate into the chart area by pressing enter. I will do this now. Usually it should announce something here. But it doesn't. So I press enter again.

Category Group A Day April 1, 2016, Value 8. 3b. 4. Image interactive line chart. Web application.

Okay, that was a little bit late. I think it's just super slow. No, I don't know what's going on. I will uh I will switch it off. again.

Voice over off.

This has hasn't happened to me in a long time, but sometimes it happens. So but but this is basically how you how you know that like um things are uh are announced and and where you are in the um uh in the chart so they give every like line a name and they make sure that that you know where you are. You always have the option as well to have um uh the data in a raw format uh which I personally I think that's good. Um it also like It's it's also a good option for people, you know, when you need like this linear version of data. Now the questions like what's happening here with the boom? How is that in here? Oh, it says So everything until December 1st, 2016 is the group A, and then you have the prediction, which is the uh gray line here and then you have the highlight which is the boom red uh line here. So they basically replicated that data, which I I think it's not like the most I don't know. Doesn't feel like the c the the cleanest way to do it. But it does work. Um here's also just arrow keys. So here's the same thing. Now we have a lot of more things going on. So here we have group A and this is this is actually a nice visualization where they put where they basically um made the uh the values that we're not looking at more opaque. So you can like use the arrow keys and you'll see that like the um the charts that we're looking at currently they are highlighted and the rest is like in the background don't doesn't even have like the numbers on it So uh that's a good way to say like okay we make it also cognitively easier to like to know what's going on and what the in this case the uh the trend is then you can like go into the details here as well just like normal uh A couple of fun things here too, like dot matrix things, like uh here they use different different color or like in in this case patterns. And patterns are important for you know color vision deficiency. So you you get those same same thing basically, so you can go into into them. Always press tap once to once too often A, B, C, and then if you are in B, you can go through one by one, year by year, and then you can also go up and down to like hit the other axes And what up and down does if it goes from like value to value, that always depends on like okay, what is the, you know, how is it set up? So there's always a little bit of um exploration in there as well. Um yeah, and we have the the world map again return and then can press return again and then you can basically go through all the values. Um or or I press x escape is not a valid thing to do. Or you can uh you know see if there are any other groups which there are not so there's only that one group uh and then you can go in Like through those. Yeah, and this is just highlighting. I don't think there's any fun anything fun in here No, this even doesn't let me use the arrow keys to go through it. Oh there we go. I arrow keyed wrong. So yeah, you have some that are highlighted and some that aren't. Fun stuff. What is an alluvial diagram? Oh, this is like votes going from somewhere to some to to some other party. Uh oh always an interesting thing because we see these in like elections here in Germany. We love these Um I don't know if they are as much known uh elsewhere, but uh but yeah you always want to know what's going on. So you have one, usually the biggest Value that goes to the same place. So this would be like voters of party A also voting for party A this election versus the last election. And then you have like uh voters from party A going to party B or going to party C and you can see how how many people are there. Um and they have named those high 2018 to low 2019. um so uh those are the parties are basically medium high medium and low um and increased i guess Weird. So yeah, you can oh and then you have new voters basically. Yeah, that's incredibly important like um graph uh and usually it's just like an image and it's not like you have no way to know uh and like the explanations are also not good right like this is difficult to explain in text. You know, you can you can put it in a table and you can you know verbalize it but like it takes a lot of like time to go through it. Uh yeah the question go ahead

It's actually about if we go back to V3C, about complex images. If you don't mind, if you have something to say left here, it's okay if we stay. No, okay wait if we go up uh at the top or for the first there the first chart So you showed us the example where you can click on example C long description and we get to a new page. I've seen examples where next, so let's say this this uh this is an image and next to it is a paragraph just summarizing everything that you normally would see, maybe Is that something that you could do? Because I don't really understand why you have to get sent to a new page.

Uh you don't have to. It's just one approach. That's why they are examples and approaches. Uh like this uh second approach. No, uh approach two that has the uh paragraph like or the information directly next to it. So that's totally a valid way to do. You could have also an expand collapse next to it. That's how a lot of accessibility companies are doing it. doing it. So yeah, there's there's no rule where it has to be or how you have to do it. The important thing is that you know the user can find it. it um and that's why it's important that you put it into the alt text or like you know make make other uh other uh make it clear like how how the user can go to it

And then I have a question about aria described by. In the video that you said that from translating this from Swedish in my notes, but you said this is a bad example because the user can't or go back. Maybe I'm is it because the the coder has used ARIA described byte that that doesn't work or if in my head you can pause.

Do you understand what I'm saying? So Aria described by is the same thing as an alternative text or ARIA label. Everything you refer from ARIA described by is smushed into one long string of text. So y once you start reading, you cannot stop. Well you can stop, but then you have to start from the beginning again. So there's no way for like for a screen reader user to pause in the middle. and like think about what they just heard or like you know do stuff like that. So it basically once you use ARIA described by it's just like one long str one long text

Okay. Thank you.

Yeah, and uh I think yeah, this is the this is the example, right? And so uh I wrote these so such a long time ago that I sometimes just forget. Let me open PolyPane for a second. Because I think it uh it shows it very well. So if we go to the example and then we open the right click Inspect element. So now we have the um the uh image here and it uh points at the description which is this uh paragraph so this all works and then if we go to the um accessibility information here uh which is here Um oh it doesn't it it doesn't actually uh put uh the description in here, but like and and this is like a bad example because like it's one paragraph with only text anyway. But like if you had like headings in here, if you had like lists in here, they would all be like put into one long string. Uh I think we actually can see that if we go into DevTools and Uh I wonder if the accessibility inspector here has that. Yeah, yeah. Uh d-d-d- So yeah, it has alt here and then description here, here it is. Like it's basically like one. long text right there's no there's nothing in it where you can pause it and like as a screen reader you'd get that whole text as one like in one swoop like there's no there's no in-between there's no way for you to like to know that you should be pausing in between it Yeah, so that's that's why you usually wouldn't want to do that, like only if you are in a very specific situation where you cannot make any changes to the HTML, which I think these days you probably are never in that situation, so uh so that's good. All right, good questions. Uh any other questions? Going, going, going gun. Yeah I think that's like like complex images is is is the most complex and the and that's that's also where the are the most question about but on the other hand they are extremely extremely rare like you know we do we we make a big song and dance about them because like If inform like if uh complex images are not well handled and they are there and they are missing, then it's a big like black hole of information for someone who has accessibility. needs, right? Because it's so there's so much information in there. Um and it can lead to like people not understanding their uh let's say pension plan like you know stuff like that like really uh important information. Uh and so um yeah just thinking like I I actually worked with like a pension insurance company like you know last year or something And and that was one of the things. They had graphs that showed like, oh, this has a higher risk and uh and and uh you know higher reward if you if you use this type of pension, if you use this type of pension, this is like how we did it in the last twenty years, you know, how how the uh the things go you know went went up and this is like how the the uh how the whole like market worked out and stuff like that and that's a lot of information and they didn't have no alternative text or other ways to interact with that data and so It was like for me as someone who can see the page, it was like very clear, oh, this is this is the plan that has like a lot of risk even uh uh you know even if it's like very stable times and this is the other plan that has like no risk at all but also very little reward But it's incredibly steady, uh, even if like the overall economic goes up and down all the time. So that that's super info important information and as a like visual user you can like see that. in like a half a second by looking at the charts. And then, you know, there were no alternative texts and no no like proper real descriptions on then and I was like, yeah, th you have to do something about that because like Like this is so much information that just vanishes. And that's always the risk with like complex images. That's why it gets such an emphasis. But in a lot of like places you will never really encounter complex images that much. So that's that's also fun truth about this. Like, you know, we have to think about all the edge cases. Um And sometimes it's just like it's just like good to know about the edge cases, but the common case, like the informative images and the uh the functional images, you have probably like one complex image for or every yeah I want to say thousand other images. Right? So it's like it's like yeah there's the this happens and you you know you it's good to know about it but it's also like extremely rare. So uh so that's uh that's good to know. Uh I did have some other tabs open This is just WCAG. I don't know why I opened this. Um I think I want to show a couple like A couple other examples. So I would say we are taking a break. Let's say until 1410 I'm I'm generous with breaks today. 1410 and then we come back. And I will restart my computer in the meantime. And then I will see if the screen reader is like more cooperative And then I will talk a little bit about the fig captions and how to use those because that's always a big question. And I also have like a small thing about SVGs and stuff like that. Uh yeah, so uh let's see each other at 2. 10 and uh I will be back hopefully with a more functioning computer. See around.

And I want to pause the recording Oh I can't because it's goes into into the cloud. So um see you around. Hello.

I am back and I have a functioning computer. It's like magic. Um sometimes a restart is all all that works.

So uh yeah Let's try to do this again. Maybe it's also also it could be just zoom acting up, so uh So you know, uh I'm I'm making no promises. But let's see if this works. Um so I'm trying to switch on the screen reader again. I just had the screen reader on and it worked. So

um you know knock on wood voiceover on safari axel slash jazz slash images alluvial diagram default dot operator storybook window 68 increased low 2018 high 2000

So this is the um this the chart. So I I will now use the arrow keys to navigate around to the chart

title three three point two three interact and display keyboard display heading alluvial diag heading this chart is used heading level four this chart is using dummy data heading level four alluvial diagram heading level three display keyboard instructions

Oh it doesn't it even skips it so I uh I guess the chart title is part of the chart. So it first goes to display keyboard instructions.

Uh close keyboard instructions expanded button.

It's magic when it

Close keyboard instruct table 2 columns, 8 rows. Action table. Row 2 enter. Result. Enter the chart area slash drill down a level on the chart area or node. Call row 3 shift plus and enter, drill up a level on a node or link. Row 4 tab, exit the chart at any time. Row 5, leftward arrow, and rightward arrow, move among sibling nodes or links on a node or link.

So magic, this just works.

Um Row 6 action action slash rack row act lush row 2 enter. Result, enter the chart area slash, close keyboard instructions, display keyboard instructions, collect chart title. Chart subtitle, navigate into the chart area by pressing enter. Web application.

So Ch

3k remain high 2018 2. 8k decreased high 2018 medium 2. 8k decreased high 2018 low 2019 link 3 image 909 Increased Medium 2018 High 2019 Link 4 Image 12. 7k remained medium 2018 medium 2019 length 5 image 12 points at 3. 4k. Decreased. Medium 2018. Low 2019. Link 6. Image.

Yeah, so this this is how this should should work. It's magic when it does. Um and so you can uh you can explore it that way

way let's take a look at the break lines one break lines example bind chart component press enter or space key to view on canvas break lines table one column group Storybook preview IFRA and display keyboard instructions collapsed button chart title chart subtitle category group A line 1 image interactive line chart web application

So it says image interactive line charts. It says that you're in the category group A and that it's line one. So you could have different lines in a group. You know, because like in group B you do have different lines. You have uh but group A only has one, so we can explore that.

Category group E la two image.

Oh this is also one one line. And then you can press return. Should have announced that.

Category Group E date February 1, 2016. Value 4. 6b. Point Category Group E date May 1st, 2016. Value 4. 4b. Point 3. Image. Category Group E date June 1, 2016, value 3. 5b. 4. Image.

This should also be announced. So it's not it's not fixed. But voice over off but it it does work. Um and I don't know like maybe they have introduced an uh an error as well. Uh that you know with the stuff that gets announced it's always difficult to do and sometimes you uh yeah it's just difficult. So uh but I want to show that like yeah this is this is a thing that I Actually can work.

Um for this chart. Pardon? Sorry, can I ask A question about this.

Yes, sure.

Just uh to check like because on the image it says uh amount three point uh six or something. But the announcement the voiceover says value three point

Yes, I'm I mean I don't I don't know how this is a chart or is it Yeah, I I don't know. I I think it has to do with like these headings where they just put value. They should have put amount on it. Um and I think that's just just just the thing. When you go into it, it will announce that like or you can you can uh inspect that this is an amount and this is a date And then it's pretty clear that if if they say value is 8. 6, then uh then they mean the amount. But yeah, I I agree it should say amount instead of value. you think that would be much much better. Okay.

Thank you.

Yeah. Maybe they just made an error by creating this presentation so maybe uh yeah I don't know or or may you know it could also be on purpose maybe they had like user studies and the Users say like, oh I don't need to know that it's an amount, like all the time, just that it's the value, but like I don't know It seems unlikely to me if you ask me. Alright.

Okay, thank you.

No problem. Uh the the other thing actually that they did. in the uh which I I don't did not like in the other one. here uh basically if you selected like this decreased medium 2018 to to low 2019 They did not announce the value as 3367. They said 3. 4K. And I'm not a big fan of that. I think if the value that you can like get from the um uh like hovering or like from like you know, the value that is there is exact, then you should also announce it as an exact value. Um at least if it's not like, you know 327 trillion five hundred and ninety-eight million, something like that. You know that it's like incredibly like a big number, and so it doesn't really matter. But for this, I think uh you know three thousand three hundred sixty seven to three thousand four hundred that's like thirty-three votes uh or or whatever. So it's like that's that's a big you know that's all all uh almost one percent. um difference so I think yeah they should announce the the full number and I don't know why they didn't because I think it's Pretty logical, uh, but uh yeah. Different people with different decisions. Uh but in f fun thing, if I was testing this for accessibility, I would totally like bring this up and say like this does not like you don't have the same information as a screen reader user. than you have like as a um visual user which would be petty and like people people would be like but like yeah this is how I feel like I feel this and Not a good approach. Uh one of the other things that uh I talked about in the videos is grouping stuff. And I always know that there is a lot of like unclearness in the uh groups of images uh when and how to use a fake caption element. And now I'm talking because it takes so long to load. Come on, you can do it Well here here we have it like without the the actual HTML which is fine. Uh so sometimes you have these like one-on-one um things where you have a fake caption that shows what's in this one image. And in rare occasions it's totally enough to have the fake caption and you don't need an alternative text for the image. Now the problem is if you don't have an alternative text at all for the image, it's treated as a decorative image, which this is not. So you have to put into the alternative text like you know sometimes doubling it up or you have to uh um you know, uh t say like image, which is like it's a little bit disappointing, but like if if the figure contains everything that's fine. But when you have multiple images, then it's really important because then the figure like is the heading or like the group name for all of the images. right not just for e for for for one image um and that's that's really when it becomes clear that like oh you have to explain each single image on its own And then they together make out the figure, the the group. Um and where would you find something like this? This would also be something like that you have in reports, like oh here are three different graphs of our you know earnings over the past ten years or here are the uh graph w which technically would be better as individual figures but you know not not always like you you would do it it. Um or you have like uh you have us three marketing companies to do like an inspection of what you know what the best way to like reach customers are and they have produced like three different um examples for your Let's say social for a social media post for standard social media post. And so you so you have like example social media posts as one figure with three different images. That would be the other way to do it. Um and uh and yeah I th I think that's that's good to know like then you want to describe each uh image individually in their alternative text and then you can group them and say like oh these are all the social media images that that we're doing uh yeah and you can also use fake caption for the like if you have a chart. Uh I think that's pretty clear. Uh what I didn't talk about or what you know is not in the um images tutorial is SVGs. Because SVGs are very old, but for some reason they weren't like super used until like Want to say 10 years ago or something like that. Like the the reason was that there was like a lot of different um implementations so they were very buggy uh and we couldn't use them like i before html5 and relatively late It wasn't allowed to just put an SVG, although it's like the same type of code, into an HTML document. We can now do that. Now it's allowed. So that's why they are more widely um widely used. And so this is basically the addendum to this. Like if you have an informative image and it's a svg So you would usually do like image source something. png alt mastodon if you put the svg directly into the HTML You might want to set four Crucible Falls. This is a Internet Explorer 9 thing. So if you don't support Internet Explorer 9, you can also get rid of it. I these days get rid of it. But it doesn't hurt. So you can just use focusable. fails on any svg. But usually you don't want to focus every uh SVG with the tab key. So that's why you need to put in for crucible fails. And then you use roll image. And this will basically make the SVG an image element. Like internally will now be treated the same. And then you can use ARIA label to you to replace the alt attribute. So So first you have to change the role and then you need to use ARIA label to put the accessible name on it. You cannot use the alt attribute. That only works on image elements. So keep that in mind. But apart from that, like it works pretty much the same. It will be announced the same in screen readers and stuff like that. So this is a very uh dependable way to do it. And then we have the decorative um I should make this a little bit bigger actually. So making it smaller again. We have the decorative use case where you have image and then you have an alt that is empty should hide it from screen readers. And here you do the same thing. You do focusable faults first if you are supporting Internet Explorer or you don't want to annoy people who are using Internet Explorer. And then instead of using the role image and the ARIA label, you just put ARIA hidden true on it, and that will remove it from the accessibility tree. screen readers will just skip over it. So those are the two things on how to best make inline uh SVGs accessible if that makes sense Any questions about that? Doesn't sound like it okay uh yeah I showed chartability uh really really great work what they do for like Like, you know, if you're producing a lot of charts, look at their stuff. I put all of the links into Canvas as well. Yeah, visa chart components. Those were the charts that I showed. It's a framework, you can use it for free. It's MIT licensed. So, you know, if you if you want to have charts in your in your company if you use charts and you don't want to do all that work yourself just use this library. It's really good. Like you know I'm I mean I'm I'm not biased or paid by them or anything. I just I think they make like a lot of good decisions about accessibility. uh and you know and it's like active developed so it has had gotten um last year when did they get their up last update November 15th. So just just a year since the last update. And yeah, it's uh it's it's pretty good. Um It's just another information and this is uh just the the other demo. Yeah, no, this is all I wanted to show Uh I think. So uh let me know if you have any questions. And if not, then uh I have another Yeah, go ahead.

Uh I'm curious about how to treat like portfolios, like where you usually have a lot of images and Uh yeah, how would you treat that? That it's mostly images.

Yeah, I mean you want to describe each image. I mean that's the that that's the way to do it. Um, you know, sometimes you can say like Let's say so so you you're thinking about like a designer portfolio, something like that? Where you show if you're not. Yeah. Uh so so I think there it makes sense to go into much detail, but I think even more important than just putting old text and old attributes on the images is to also describe them for everyone. Because like this is what you do like if if you're a designer, if you want to like show your work, you want to know that everyone can like understand what you do with your work. work. So I like I like it when portfolios have like a little like description text like an expand collapse or something like that where you can actually um listen to or read the the thinking behind like how you get like you have maybe 20 logos and I want to know the story of each of them I'm I might be a logo nerd, uh you know, admittedly, but like but like it it might be useful information and um If you don't want to do that for some reason or you think like, oh, these are like the minor logos, like I have them too, but I don't want to promote them as as highly, right? Then you would like really briefly uh describe them Like you know, I I don't know, I'm bad at logo description, uh, and uh uh the W3C logo is now nothing burger of a logo, so I can't can't really use that. I can use the old one. Um, which is like, you know, you would have said like, oh, the uh W and three uh in a dark blue color, um in a sensory font with um relatively like I don't know straight edges uh and uh and then the C as a like uh negative uh only only highlighted by its shadows. um uh in black. And that would be the W3C logo and then you you know you would you would do like really short descriptions like that for for for each one.

Okay.

Yeah. But you have to have some kind of description, right?

Because otherwise And rather description than uh alternative texts.

Yeah, in that in in that case, yes. Because because you you your idea is not to say like oh this is you know supermarket logo your information is to say how that supermarket logo looks in that context, right? So yeah, I think I I think there it makes sense to like describe it relatively detailed

Okay, thank you.

Yeah, no problem. Any other questions All right. Then uh I wish you a good rest of your week. Uh and uh let's uh I think we also meet in two weeks again uh and in between you have Hampus doing uh uh uh a lecture so that's going to be fun um and yeah have a good um early December and uh see you around Take care. Bye.

Take care. Bye.

Bye. Bye.