Live Session (2026)

There we go. Welcome back. from well, I I was at Easter vacation the last time we met, so or between the last time we met and now. So welcome back myself from from that and I hope you had a good time over Easter and like a little bit of leisure time. I know that Humphreys like did did call you in directly after Easter Monday to for for a nice session, so that's always good. And yeah This week is about all about images, and I have a couple of examples here. I hope I can show a little bit of screen reader images stuff and other just interesting things around images. So so that should be should be quite fun I just wanted to ask, especially because the videos went online a little bit late, are there any questions that you have, anything that you need me to like explain again or like you know give you a little bit more context or anything like that.

Yonatan, go ahead. Yeah. I haven't prepared a question, but I know that Um I my spidey senses were tingling when you mentioned this kind of group summary of images. Um and I think it was thing caption and of course we we don't use that anymore But I was wondering in an e-commerce website, for example, you have a bunch of different images of the same product, usually within a carousel, but the images still need alt text. Um how how would you tackle that situation when you have a lot of different images of the same Right.

Good question, good question. Um so you have in general the The the thing that you have two things that you can have. So you can have an image description, like an alternative text, and you can have a description of like the group of image and it's it's basically it can be both. Um and for a carousel with like different like items or like the same item in different like views let's say you have like an e-commerce site with clothes or something like that you would see like let's say a shoe from different angles you would want to like So my preferred way to do that is to have the main image very detailed and then only say what's different on the other images, right? So you would have like let's say you have a sneaker, you would Explain how it looks, like what the colors are, you know, if there's any like stitching on it, stuff like that. And then if the second image is just that same sneaker from above, you could say the same sneaker from above, right? And that would be a sufficient text alternative. You don't have to always like disc re-describe what is new in there. But there might be stuff that you can see for the first time from the top. For example, the s inlay in inside the shoe is yellow for some reason, you know, and you would say like shoe from the top the yellow inside of the shoe can be seen or something like that, right? So so it really depends on the actual contents of the image. Um in extreme situations like when you get like a lot of images from some third party, like let's say you're having like your your business is to like rent out homes like vacation homes and you get those images from the vacation homeowners and you cannot like you know make you know create accessible alternative text for each of them. Um I have seen that like people go like, you know, describing like one image, like the grand idea of of the images and then just go and say image two, image three, image four. And the reason is that you might want in these situations like ask someone or like get some information from someone else so you could say like hey my friend who can see the image describe image four to me instead of like, you know, I don't I don't know what the images are and and so you have like a at least a reference point. but it it depends a little bit on the on the actual like image.

Thank you.

Yeah. No, but if but that's like how how images play together. I mean there is the groups of images. Um example in the in the images tutorial I can share Um it has groups of images and I'm talking about that but I also know like this has like multiple permutations, right? Like there are two examples in here where you basically go like, oh, there are multiple images, but they basically together they are an image, which is like the star rating. Um and then you have like oh we have figure and fic caption to like basically group individual images and give them like a common name or describe like what this group of images is but there are a lot more variations that you can see And and yeah, and both are a pretty good way to do it, , but it really depends on your use case, really So yeah, you you know always when you're thinking of like multiple images that act together, you have to think about like how Really do they fit together? Like how do I make sure like because you could do like, you know, it wouldn't be an error. I would just like be very Yeah, it wouldn't be the best thing to say like full star or filled star, filled star, filled star, half star, empty star. You could do that. But it wouldn't be as easy to to read, right? So you want to to like really see okay what's the What's the best way to convey the meaning behind these images? And if you have multiple images, they might fit together or they might be individual images. And depending on that, you have to make your your decision here. We do have a carousels example in here as well. It doesn't really fit because it doesn't have like it's not about the same images, right? it has three different slides and they have different contents. so in this case it makes sense to like to have individual alternative texts but Um if you have like if it's only about like the same item, you want to say like, you know, image of item one, image of item two, at least, just to make make sure it can be distinguished Um as well. Yeah, any other questions Opening the chat so I can see that as well. Nope. The rest was crystal clear. I hope so. Um, there is a question. Great. Go ahead.

Actually I had a lot of questions, but I don't know what's what's relevant for the other ones to I don't want to take other people's time. Um but I I think, for example, the complex images when it comes to graphs and charts and all of that, that bit is a bit challenging. Because well a couple of things. At one point I think you said that we should generally avoid links and new windows. But then here we were giving links to new windows. that's one, if I even understood that right. And the second is that longer description text on that other page. seems very tricky to handle because it's it's about how you interpret those graphs, right? It's it's a matter of You can skew data and and you know, it can be looked at in different angles, a different point of view. So how do you accurately and fairly describe something so complex?

Awesome question. so for the first thing is yeah, I don't I I think the we do have a link to another page and you can open it in another window. I don't like it. I think it's a bad Like it's not the best practice, but if you have to do it, you know, you can do it. Like with always with accessibility, there is like the thing that you really want to do. Um and then there's the stuff that like yeah you can do But you shouldn't. And this is like one of those where like, yeah, you can you can do this, but you really, you know, shouldn't use external like links for for stuff like that. So yeah, I think I think it's a good good question. Um and the other one is like how to interpret charts. and this is like one of the big questions because like Basically you can put any like spin on on on on on f on a lot of charts. You can just put a spin on it and say like oh you know we see this and that and you compare different numbers and then you say like oh this this means that it means this and that which is a big problem and so we don't generally that is a challenge. Um but often with those charts you also want to say something, right? So this image description would be written from your point of view why you are putting the chart in. Um and that does not mean necessarily that that is a objective way to read the chart

It's gonna be biased.

Yeah, it can it can be biased, right? I mean if you and and that is but that is everything on the internet, right? If you can have wording in that, like you can say with the same graph, you can say like Oh look, we extracted that much lumber out of the forests and made like a huge benefit to our company and with the same graph you could say like this is deforestation like see what the impact is and you know there's no neutral way to well the numbers are neutral and that's why we recommend having them in there as well. But that might not work for every graph as well. So so yeah, there are some things. it's one reason why I think apart from like describing the graph generally and saying like this is the trend and this is what what you can see and get out of the graph. Um I think one of the big things that you should be doing is using this chartability process, which is basically a method to organize and and describe graphs in a neutral way or at least in an accessible way, right? And it basically gives your the the tools to describe graphs. Um and it's a it's a very good, very in-depth workbook that they have. Um but the other thing that I very much like is using interactive charts that allow the user to Interact with the charts. That was easy. Um so for example, if I go here to the visa charts. I like them a lot because they they work well as I would would expect them. They have a lot of interactive charts like this stacked bar chart here and you can basically hover over stuff and see the content and that is also translated to keyboard users and screen reader users like if you look at the keyboard instructions You can drill in and out of different levels in this bar. You can use the arrow keys to go from one to the other. You can use Escape to get out of a tooltip and stuff like that. And I will show that in a bit as well. Um, and that goes with line charts as well I think one of those not this one, but but I also had one example where it basically just produce the tone and you could like follow the tone and see like oh this goes up, this goes down. Um and so you have more interaction here. It's not one hundred percent covered by like just putting image alternatives on a on a chart but but yeah this is basically the next step.

So two follow-up questions on that. First excuse me Would I'm thinking as a user if I come in here and there's so many different things I can tab between, would it make sense then to Well f for one, have some kind of a skip alternative to not having to go through all of it, just skip the entire section. But also One description just saying what is this, like giving the context, and then one showing you step by step.

Yeah, exactly. You want you basically want to have both. I I agree. So you want to say like in this great idea Oh, it's difficult. Oh, this those are billions, so let's say group A earnings, group B earnings, something like that. Um and you know, and you would say like group A earnings on a high level up to nine point seven billions last year or something like that. And then you would say group B shows more of a, you know, up and down, , and the last earnings was 5. 6 billion or something like that. Right as the general thing and then you can drill down. How they did it here in these visa charts, which again I I like because they just work really nicely. you basically tap to Do the thing, you get keyboard instructions, then you tap to the actual chart, and then the next tap just goes out of the chart. So when you want to interact with it, you have to press return. then it will say that this is group A. if you want to interact with that you press return again and then you can use the arrow key to go through the individual values. Um and then you can press escape I think. No. Shift tab and then press let's say the left key and you go to group B, group A, group B And then you can interact with those values as well. And let me switch on the screen reader really quick and reshare my screen. And then we can see how that sounds in a screen reader. da da da da

And and my final follow-up question was how we handle it.

Okay.

UMUS, Zoom Annotation Entry Point, System Dialog, Image, Image, Safari, Axel slash, application. Yes, there we go. I'm a professional, I know how this works. Storybook preview iframe. What title?

So here we are in the title of Interactive Line Chart Storybook Preview iframe.

Web content Keyboard interactive line chart heading level 2 chart title Heading Level 3 Purpose Demonstration of a line chart built with Heading Level This example of a Heading Level 3 Heading Level 4 Statistical Information Tops display keyboard instructions button. Chart title, chart subtitle, navigate into the chart area by pressing enter web application.

And that chart title and chart subtitle should explain what the chart is about. And then you can press enter to Navigate into the chart area.

Group A line 1. Image Interactive Line Chart Web Application

Then press return.

Group A01 slash 01 slash 16 7. 7 B point 1 image. Group A02 slash 01 slash 16 7. 6 B point 2 Image

And now you can also say like, oh, but I want to compare that to group B. So I instead of using the arrow left and right to go along the line, I think you can use the arrow down to go to the to the other group. Let's see if that works.

Group B02 slash 01 slash 16 4. 6b point two image.

So that way you can also compare not only on the x-axis but also on the y-axis and and and know like okay I can make a comparison from that because that might be might be important like if you If you are blind and you want to look at that, you know, you go here.

Group B01 slash 01 slash 16. Group A01 slash 01 slash 16

And you see that like, oh, they're very close here. And then if you go to the raw all the way to the right.

Group A group A group group A Group A Group A 11 slash 01 slash 16 A. 9B point eleven image

Read it.

Group A twelve group B12 slash zero one slash sixteen five point six b point twelve image zoom us has new window plus tilde to Open pop-up.

Alright. So that that's the screen reader experience for this. There are a lot of other things that I will also share.

But Show base items button. Voice over off.

So I hope I hope that came through clear. And I saw that we had an hand up. But yeah, this is this is like one way to do that. to make sure basically that you have interactivity and also have the data in there and not just the interpretation. So that's why I thought I'd share this. Yeah. Jonathan.

So there's no v cag requirements for charts like this. It's just you need to be intuitive and make sure to try to do a good job for people or 'Cause I mean it's it's different companies will do it in different ways and interpret things differently, I guess, but having like keyboard instructions as you had here doesn't necessarily meet a certain standard, but like how how does it work

Yeah, correct. So what WCHAC does is just the baseline accessibility. It's the, you know, bottom of the like the foundation of things. That's why it says like So there are a couple of success criteria that apply to this. So 1. 1. 1 non-text content obviously does apply. Like this would be your usual images, alternative text. Um and that is a way to meet the success criterion. If you have it as an image, then it needs to be described. Then you can say like, oh, but I want to make the graph interactive. And then you all the other success criteria come in like keyboard, no keyboard trap. folk visible focus, you know, and and even if you go back to like the images example, like th that's actually for both. Non-text contrast, for example, applies to charts. So you cannot just use, you know bad bad looking contrasts and also only color applies to to the charts as well so you cannot just make charts distinguishable by color alone. So here they use the dashed lines versus the well filled lines so to say the non-dashed lines And if you had that as an image on your page, that would apply too. So there's a lot of WCAC stuff that applies to those images. Um but there's not like a separate because that's not how WCH works. Um there's not a separate like this is how charts are accessible to meet WCAG, right?

I don't know how we are on time. Do you have time for another question?

Yeah, sure. You can you can ask as many questions as you want.

Okay, I was curious about dynamic and live like not dynamic but live things. For example, KPIs or like daily charts that keep changing. Um and also men maps were men mentioned like Got curious, but it's not within what I do, so maybe I should that's not the priority for me. But I was curious like how do you make it accessible if you can't see with these Google Maps and stuff? And make it make sense. But but primarily data that is visualized every day, different KPIs, it's updating constantly. How do you make that accessible?

Yeah, so for for stuff that updates often I would either do something like this, like make sure that it is in that Users can interact with the data and analyze the data. In some instances that just means like putting out a table with all the data in. That might be already enough in some instances like something like this would be you know more actionable to just be be sure that like you can make the comparisons a little bit easier. I mean this Why I like this is if you click on the butt little button here you also get the information in a data form Um this is not my preferred way I I would display this, but like you get group A and group B and you get all the the data to explore as well. But yeah, that's that's basically what I recommend to do for stuff that changes a lot. If you want things like oh, we we want to convey general trend data, like if the individual points are not important, you know, you could have that If it's like a small widget or something like that, then I would use templates and say, like, oh, if this happens, it should say like, oh, there's, you know, the trend is going up, the trend is going down. Stuff like that. You can you can make that dynamic with with some templates. and it's not like the worst effort to do like you know, usually with like three, four templates you you cover like ninety percent of all instances that you need. Um and then for the rest like the data is there and and you can interact with that or you can can read that. at least. Um but yeah that's that's like the approach that I would take with like charts that change like daily. You just make sure like you don't Just say like, oh, this is a chart and it changes daily, but that you say like, oh, and it's like the KPIs are better than yesterday, or they're worse than yesterday, or like in the this chart displays three months of data and the trend is upwards or something like that, right? And that that's something you can easily or relatively easily ex interpolate and explore from the data that is behind the chart. So that's that's the approach that that I would take for those.

Um do you mean that I would have to go in every day? I I don't think that's what you mean, but but like update the interpretation of What just happened or would some kind of AI help just analyze?

Yeah, I would I would say what whoever like you create the charts through some system. And I would think that system would be able to like to interpret the data and compare the the data f from yesterday to today and stuff like that. Um I don't think you need AI for that. I think any like program can do that. Like it's it's numbers. Computers are good with numbers. Um so usually that's that's not a big like problem to to solve and yeah I I think that's pr pretty straightforward. Um actually I think I think you have to do it once and like think through the individual things which can be like a little bit effort upfront but then therefore you have like really good understanding of like what the data is saying what you actually want to convey to people who cannot see the chart as well so I think it's totally worth it doing that once and then you can apply it basically to to all the other charts as well.

Thank you.

Yeah. And unfortunately for for that I don't have a good example. I I think I should prepare one when I when I have time for it because like I think a lot of people are struggling with it and I think it's like It's not as big of a challenge than it looks like when you don't have the experience, right? So yeah Um the other question was about maps and maps are for me a special case because I think most of the maps are very, very difficult to make, like accessible as maps so you might want to think about like alternatives for those map views. for example if you have a map that shows like stores around you. You would have a list of the stores around you and you would be able to order them by by distance and stuff like that. So you're you have just a different view for the map output because like navigating around the map is often not useful. I mean even if everything is focusable and has an accessible name and stuff. Um you don't know like how the focus goes you know visually around the tables around the the map so you don't don't really have an understanding of like how far away things are A few years ago I worked for the city of Los Angeles on a project and basically they had housing openings. throughout Los Angeles and it was a really big like website, very complicated. Um was a very strange and difficult project to work on. But one of the things was that they showed the houses and like. bus lines and metro lines and stuff like that on a map and that information wasn't available anywhere else So we came in and we said like hey you have to say like oh it's three hundred feet I guess meters whatever to like the next bus line it's like you know and the next bus lines Bas lines around this or in like the vicinity are the A one, B two, C three and stuff like that, and just put that somewhere else on the page because otherwise you don't have like that understanding of of what's going on. Um and that was that was a fun thing with maps. and if you have the data again it's not the the hardest thing in the world to do you just have to think about it and say like oh yeah we have to to make sure that we have that The other thing is directions, like if you have walking directions, for example, to make those accessible. And again, you have a description of the steps, you know, go left on the next corner, stuff like that But also what can help is, you know, some hardware like you know vibration or like, you know, for for example, this this is always my example, the Apple Watch vibrates differently if you need to go left or right, if you're if you're driving a car or even if you're walking. And that way you can basically very intuitively like make your way through a city and if you were blind it would be like an additional in addition to of course the voiceover it would be an additional like guidance to make sure that you can use those types of navigation hints. Alright. Any other questions? Going, going, gone. Okay. I want to show a few more of these charts because the this is really usually what I do. So they have so this is from Visa the payment company and I work Together with them on the education and outreach working group. back when that still happened and they have like really interesting things. Um I think the line chart is is a very nice option, but they also have like variations of it. Like these line charts that have breaks in between. Um which is a fun concept which I have never thought about. Like that's not not how I would do line charts, but yeah, if you have like gaps in between, that makes sense. Um Then here highlights like there's a prediction branch and then there's a boom branch because they make more money. A lot of those are about making money because they are visa. Um which makes sense. but like And I don't know. would be nice if they were like regenerative energy or something like that, you know, something more like positive that we actually want. Um and that basically goes the same as we have seen with the other line chart. So switching on the screen reader again.

Voice over on Safari. Axel slash chaz slash image image image image image image ill display data take chart title Chart subtitle, navigate into the chart area by pressing enter web application.

So moving in And sometimes it doesn't read it, which is okay. like that's just an implementation thing, slash sometimes voiceover is just weird. No, you should but you should read one of those.

Do I have to display day chart title, chart subtitle, navigate into the chart area by pressing enter web application

Why doesn't it want to read this anymore?

Interactive Lie Category Group A date January 1, 2016 Value 7. 7b, 0. 1 image So this is again Category Group A date February 1st to thategory group A date March 1, 2016, Category Cat Cat Cat Category Cat Category Group Group A Day Doc Category Group A date November 1, 2006 Value 8. 9b, point category group A date December 1, 2016 Value 9. 7 B, point 12 image.

So here we have like this value and then we can use the down arrow key

Interactive display key display disp in inter category prediction date November 1, 2006 voice over off

This is a fun one because I show this off every year and it usually works really well. So some sometimes like updates in screen readers and browsers and stuff makes stuff not not be read correctly. So that can happen. Um I think if you are a very good screen a good screen reader user and you use it every day first you would notice earlier, , because you're using it every day. But the other thing is also you probably know your way around and I would need to experiment, so I don't don't want to do that. Um but yeah, you can basically go through all the prediction things and and have them read and then here at the at the at the end it should announce the outlier effectively as as like being available and then you can navigate to that. Um So those are the two highlight things. So it should also say prediction at the end. I don't know if it actually did. So yeah I don't know, but yeah, it should work. It probably does work if you're not like an occasional screen reader user like I am. and then this has this has interaction here, but I don't think we can interact with anything. No, I would be move along sibling lines, move along points across lines. No. Same thing. Basically just an example with like a lot of additional things. Oh, you can actually switch on and off different groups. So I wonder if we if we are able to do that with the keyboard as well This is group A. Oh, I just got into group A. B C D For me I I would think like having it selected and pressing space would select or deselect it, but that doesn't work, so I don't know how to do it. Space, select, deselect, yeah, space. It should work with space. Well this is one of the things that you also like. Also a thing you just learn by using screen readers and and interacting with the page. using the keyboard is like oh what are what are you expected to like press or do so you know that I have the feeling I should be able to press the space key to like open the group or like Select a group and then they say this is what you should be doing. It's just experience. Not that it works. So maybe maybe the line chart is a little bit broken since I looked last time, but but yeah, it's a good good way to to interact with these these types of charts. Um the pie chart works pretty similar so but it's obviously only one type of data so you don't have like two line charts So also an important thing to like think about when you do accessibility is like Is there things that I have done before that would also apply to this type of of like alternative So in this case it will work basically like you only have one line chart as well. Because you could put all these values on a line chart and it would just be 100% at the end or bar chart would work the same way. So it's basically always the same thing. So if I go here, I press return, I press return again, then I'm category A, B, C, D. And you see we have a really nice highlighter as well for the different like wedges of this pie. So that's pretty nice. And then you can Press space and make it disappear. No, that happened. Get me back. same goes for donut chart. Again, same thing. Like, oh, did we do anything that is like this? Yeah, of course we did the pie chart and this is just donut. Um not Not the hardest. And you can see for color only and and colour contrast distinction they also have like every wedge has their own like little pattern in it, which is great. Um I would usually be like doing it differently. Um so I'm not the biggest fan of like these very obnoxious patterns like these X's and these dots in there. I'm okay with stripes. squares are yeah they're they're also okay but I would I would usually say like you want to have one section that is very dark so a black section Then you want to have a section that is basically white outline or outline and in white. And then for everything in between basically I usually try to play with the shape of the thing itself. So for me like one of these would have like dashed outlines like as as you hover over them they get dashed outlines, I would have like one which just always have dashed outlines. Um and then I probably would have one that uses like, you know, dotted outlines as well and then you know you get like a little bit more more of that I don't I'm not the biggest fan of having having them like in the like main part of of of the thing because I I think it just looks noisy and I'm not the biggest fan of that. Another way could be to like take a pie wedge or category and pull it out. I don't think we have that as an example here I pull this out now. No, I have seen it, but probably not here. So you basically have one that is like highlighted and a little bit set out. And that can help to anchor the the visual thing as well. scatter plot, yeah, I don't use those as much. heat maps like they have these types of heat maps. I don't know the these might be interesting for people who are doing like educational stuff. Sometimes I see them there. And basically it's yeah, these are basically tables just with the color in addition here. Oh I'll just Tab and you can use your arrow keys just to navigate through and get to the values. Which is, you know, it's all useful. Um just you have to figure out like in which situation you use these charts and I don't I'm not I'm not a chart expert so I don't I don't I often don't have like really good examples like for this you go A B C through the individual Charts dot matrix charts and then you can go through and see like what they mean Quite useful as well if you want to show it like that. What is circle packing? Oh, I don't want to even think about that Um yeah, they're a lot they have a lot of examples, including like this type of map, , which you sometimes have. Um Yeah, and I think that's important to like separate that from like a map. Um like making a map accessible, but this is like just making like using a map as visual indicator for for information. And that's basically they did the same thing as they do here. is basically that you can go through And we'll read the individual countries and what their whatever this number is. Um And just goes through. I think in this case from like highest value to lowest value, that would make sense to me. Um See here we have the US. Yeah, and then we go no but this is lower than the US. So maybe it's just alphabetically. If we want to know, we can I think just go through the here. Oh yeah, it goes USA first, because that's always how it has to go. And then you have Angola, Zambia Afghanistan, Zimbabwe. I think it's just South Region 5, also great, great country. loved my vacation there. But basically Just go I don't know why they did that. Um basically probably to say like oh if you have something like oh we have Switzerland and Austria and Germany and they're like one company you can just group them together stuff like that. again, these are just examples all. but yeah it also works Just switching on the screen reader again.

Voice over on Safari, Axels Angola 14. 2, USA 50, 840, marker 1, image. Zambi Angola 14. 2, 024, Marker 2 Image Doesn't want to read. USA FIB, Angola 14, Zambia 41. 5, 894, marker 3 image, Afghanistan 37. 9, 004, marker 4, image Zimbabwe 34. 2, 716, marker 5 image. Rwanda 30. 7, Jordan 23. 9, 400, marker 7, image

So no idea what the four hundred is. Voice over off. maybe do have one here. Country oh it's just a country code. so basically what you put in in front of the phone number question mark, maybe. But yeah, that's no, that would be plus one for USA, so it's just a random random code. but yeah this is how you can make like a map visualization like this accessible. Um here they have highlighted like the big outliers. Um Sorry. And here you have the oh group one is just Mexico. That makes sense. and here you have like a little bit of like more circles that reflect the numbers as well. And then yeah, you might have seen one of these like they call it alluvial diagrams, , when you see elections and who has gone from what party to which party that's that's the diagrams that you see and you you know and they can be made accessible and it's pretty pretty fun like in this case where the labels are like on the left and the right because there's no space also an accessibility consideration obviously. Um and then you can yeah you have five to high and five to medium and then region five to low for the different different things and you can go through it with a screen reader and it works all really well so Yeah, lots of good good examples in this Visa Charts Components library and It's all based on the chartability workbook or made in conjunction with the chartability workbook. the chartability folks are really, really good And they basically also guide you through like your accessibility testing and verification of individual like charts. So you know visual testing. This is all about contrast and colors and only using like certain colors. Um also deciding like how do you want keyboard navigation to work? Um Then keyboard probing, that's basically what I did. Like just going through and like hacking around with the keyboard. screen reader inspection as well. and then they have checking cognitive barriers, which is of obviously a big part of it, but not covered by Um we can't get all because WICHEC does not have a lot of cognitive disabilities in there and then context so this would be like without color perception and and yeah, so you get all of these like nice chartability ways to to go through and make sure that your charts work and that is like You know, if you have a static chart that you only put an alternative text on, or if you have like an interactive chart, you always want to go through all of those. Um, you know, maybe not keyboard stuff with like just an image Um but it's still still good thing to do for these type of interactive charts for sure. Um yeah, so the the other thing that I want to show because we don't talk about this in the videos and it's also not covered in the images tutorial that I shared is how to make SVGs accessible because I I always get asked this and it's very straightforward and easy Um once you know, but like we just don't tell anyone, so that's that's on us. Um so if you want to have an informative image, so that means you have an alt alt attribute or alternative text, but you're using an inline SVG because they are just great. Like you can change the color and say like this has the same color as the text, and you don't have to think about contrasts anymore. Um and they are they are loading with the page HTML, so they are instantly there. You don't have to wait for them to load from a different server or like just being slowly loading and stuff like that. So I'm a big fan of inline SVG images, but you have to make them accessible too. So for example here if we want to make this Mastodon logo accessible we do two things and this basically reaches a little bit forward to our discussion on ARIA, which we will have after I've been on vacation sometime in May. Basically, you do two things. You do you use a role image, which makes this SVG, which is usually just like a group of things, like in this case a path. Or like there could be text in here, so SVGs can contain real text. But basically, you now say this whole thing is an image. So you put a role IMG on it and then use ARIA label to name it. So basically what used to be your alt attribute because you can't just put alt attributes on anything you you now use ARIA label for the SVG and that way This will be announced as mastodon image or graphic, depending on your screen reader. So you don't have any different in any different experience than if you use an image element with the alt attribute. It behaves exactly the same Because you say it's an image and then using the ARIA label you change the accessible name. Well, and I will explain what that all is. in in due course change the accessible name to mastodon and then you know that this is mastodon comma graphic or something like that If you have it as a decorative image, so this would be inside of a button where it says like master then next to it, you instead of using alt equals nothing or having an empty alt attribute, you have to say Aria hidden true. That does the same thing as the empty alt this SVG just gets completely ignored. So if I put on my screen reader Now I'm inside of the let me quickly log in here We can do it. Nope, it doesn't doesn't want to. Okay. Oh Sneeze. Um there you go.

Voice over on Safari, Mastodon, image Content in code pen preview frame. JavaScript Content in Code Pen Preview Frame New Mastodon Image. Mastodon image

So it just says Mastodon image for the first one. And then the second one.

Mastodon image.

There is n there is no second image because it's Using ARIA Hidden True, it's just removed completely from interaction with the screen reader, which you want to do if it was on a button or something like that. Voice over off. Any questions about that? Going, going on. Okay. Um and then I have this example for for figures and fig captions. again, figures are great for adding context, like visual context to images. So especially if you think about like textbooks or something like that, it makes sense to say like, oh, this is figure one, you know, our exothermic reaction. blah blah blah whatever and and that's why we have fig caption in there usually and they help to group one image but they can also be used to group multiple images and you know it could be multiple images that have you know different alternative texts, but they're part of the same group. So that's also how you can use the fig caption. By default, fig caption can be at the end or at the beginning of the thing. It will be read as a group. and and give you a little bit more context there. So if you look here at the example

Voice over on Safari, Axel Sl scroll area. Scroll area. Scroll area.

Yeah.

Let me in. Reload page. The code pen preview code pen preview frame. Red and grace code pen preview, web content, code pen preview, code pen preview, frame Let me in friend.

Oh there we go.

Red and gray striped cat image. Red and gray striped cat image.

So it reads the image alternative text.

Figure one, my friend Garfield. Red and gray striped cat image. Red and gray striped cat Garfield, red and gray striped cat imit Figure 2, my friends Garfield Graph showing revenue numbers dipping in 2020 and recovering in 2023, the trend over long time is positive. Image. Graph 1, 10-year revenue.

So it doesn't do what I expected it to do, and that is to announce the Code Penfree 10-year revenue.

Voice over off.

And that is to announce the caption as a group label for the content. I don't know why that is. Maybe that's that could be a setting that I changed in my in my screen reader. So usually if we go here it would say on a note it would say this is do where's the accessibility stuff Oh, it's on the bottom. There we go. It would say this is a role figure and then you have the fig caption in here. And you can see that the parent is the figure role figure directly and that this has a role caption. Again, the ARIA lesson will explain that in a little bit more detail. And here it says figure. I think there should be Aria labeled by this fig caption, but I don't know why it doesn't do that. Maybe that's a Safari change or voiceover change or something like that. But yeah, before it was like you went into the first image and it would say like figure two, my friend Scarfield. I think it would say group start or something like that, and then you had like the group and then at the end it would say group end that has changed. Maybe also the standard has changed. This happens. But yeah, as long as you're consistent, it's totally, totally fine. to do it like that. Solmas.

Yeah, I'm just sitting here thinking I I've understood that the cognitive bit hasn't been as formalized. like in the accessibility world yet. But wouldn't it make more sense to say like when I listen to the screen readers, they're not super user friendly. For example, they say B when they mean billions Why not just say billion billions in your previous example or when they say image after the fact that they've described? Something that might be confusing if you don't maybe I would I would think that knowing that it's an image that is about to be described would help the context. for the person listening to it. Like are they there any best practices in terms of how to do how to good question

So the the thing is that screen readers are all different. Some screen readers do say image at the front, some say it at the end. This is completely up to the screen reader and users will just pick the screen reader that works best for them. Voice over. says the role at the end. Usually sometimes when it's a link it says it at the beginning. So it's not it's not super consistent but it tries to do like they do a lot of usability testing with the users who are using that. Here in in in voiceover, which I use because it's installed, , you know, I'm really honest about that it here you have the image it says name status type so name is the alternative text And then it says the status and then it says the type. This is the default verbosity here. But you can customize this. And you can for example say like I want the type to be so to be set at the start. if that works better for you. So you put that at the top. And then you have the name. And maybe you don't care about the status of an item. I don't Images usually don't have a status, so it's like a little bit redundant. but so you could you know customize that to your needs. So if you are a screen reader user on an ongoing basis you will have your custom setting set that's also why I don't recommend like taking everything like testing with the screen reader and taking all of that for gospel because like it can be so much different between users, right?

But you were using the same screen reader this whole time, right?

Correct.

So in one example, the first example, it was saying zero da zero one dash zero one dash like not very user-friendly, but in the other example it was saying date and then saying the date.

Right. Because that was actually inside of the the text of the website.

Yeah, and that that's what I'm wondering. What can we think about? Like should we in the alt text say dates or is would it would we risk th the screen reader mentioning it twice then or like is there anything we can do to improve.

Yeah, so the actual output is not done by the screen So this this is where it gets complicated. So the actual output, like so the screen reader reads what's on the page or provided as text alternative or like hidden text or whatever. And then it gives that to the speech generator basically. And that is a completely separate program. In this case, you know, you have a voice and my English voice is Samantha and you know I have a a German and a and a Swedish voice as well. They will interpret the text string that they get differently. So for example, if if I have if I give to the German voice I give Fr to it which could be Frau you know, like like saying like Frau Meyer, or it could be Friday. It needs to make that decision for itself. and all those the the German voices go for Friday. So they s they say FR is Friday. So you sometimes you get like instead of like Miss Meyer you get the Friday Meyer which isn't like not the best but like Without any context, what can you do? Right. And these are very efficient, quick, they need to be very quick Because like they can't take up a lot of resources or have a lot of delay in them because then they're not going to be used. Um and so the yeah, the this is basically where you can't know and sometimes some screen reader voices will say like when they see a date that or or something that looks like a date in their language they will say like April fourteenth, twenty twenty six, instead of oh four like like fourteen point oh four point twenty twenty-six, right so but that's completely up to this to to the language or the voice that the user uses. and they have a lot of choice there as well. Like there are a lot of English voices that you have and you can in pronunciation in this case you can also make sure that like some words are are said differently like make sure that jiv is pronounced jiv and not you know gif or something like that. So you have a lot of influence there as well if you want to as a user and you can even like say diff have it say different things in different apps so lots of lots of different choices so Therefore, my recommendation is to not do too much. Like if something is like ambiguous And you need to say like, oh, this is this is a date now, you know, and it's very important that it's a date, then you can put date before. otherwise just leave it as it is visually. Like don't try to like Think well what would the screen reader output be? Because in the end, like the purest screen reader out output is usually the best. Um, and I just reviewed a calendar with a client and basically for every date in the calendar like they had a date picker and every date in the calendar said April 14th, 2026, April 15th, 2026. So when the user went through the date picker with the arrow keys, instead of knowing they are on like 12, 13, 14, 15 because on the top it already said April 2026. They always got it always said April 11th, A April 12th, April 13th. And it was like, okay, if you do that, it like it's too much information. Like it's already I already know that I'm on this calendar. thing, right? You don't that's why we don't put April 1st, April 2nd in the calendar because we already know. And someone using a screen reader also knows. So that's why I push that line to say like hey just get rid of all of that just say one two three four and it's clear from the context where I should put it is at the end where like you have grayed out The June, no, not the June, May. It's first April, then it's May, where you have the May numbers. You want to say May 1st, but then you don't need to say May 2nd and May 3rd It's probably totally enough to say like, oh, April thirtieth, May first, and then two, three. Right. So it de it depends. It's like unfortunately that's that's the way it is. Um And yeah, there are little bit overlapping needs as well. Like a lot of people with cognitive disabilities are using screen readers, and screen readers are not the best tools. if you want to lower your cognitive load they can be very complicated and very like in depth so there's like a little bit of of a like No want to say a problem there, but like it's it's difficult for one tool to make sense for a lot of people with in the default settings. But there are a couple of Koga cognitive accessibility things that are in W3C if I can find them This is all so badly organized. There we go. For cognitive accessibility, you think it's easier to to find. So for WCAC 2 specifically, there is this supplemental guidelines guidance. Um list that basically says like oh when you're thinking about this in WICAC then also think about this for cognitive disabilities Um and I think that's very good. So for example, help users understand what things are and how to use them. So you have like more descriptions, a a little bit better like information out there have users find what they need you know providing a search stuff like that use clear and understandable content. That's something we always try to do. But it's, you know, the impact is just so much higher for people with cognitive disabilities. Um and then you know help users focus, ensure processes do not rely on memory, provide support. and personalization very important and so you have like these different things that apply to for cognitive users with cognitive disabilities and also like, you know, are very closely attached to how WCAC works. So that is maybe a resource I can pack into the list for today of links. Any other questions? Going, going, gone. Okay. Yeah, I mean this is all I had prepared prepared for today. Um Yeah, decorative images, nobody cares about those. they're just decorative So yeah, no, I think that's that's good for today. if you have any other questions, put them into Slack. also if like The videos don't pop up for you, just ping us in Slack, me or Hampus, and we you gonna fix it really quickly. Um and yeah, that is everything I have for images. and I think next time it's about videos and audio and we're gonna talk about that next week. thank you very much and have a good rest of your week. Bye