 Well, hi everyone and welcome to part two of Global Accessibility Awareness Day here at the UW. Obviously it's a global event and so there are things happening all over the world on this day as there have been for the last 11 years, I think. And here at the UW we've been doing this for many years. Just commemorating this day with a variety of trainings and workshops and other activities all centered around phrasing awareness and building capacity around digital accessibility. And so some of you were here for the morning session where we kind of did a deeper dive than usual into how screen readers operate. And we also looked at a number of different tools that can be used for checking accessibility. And this afternoon, we're going to focus a little bit more on document accessibility and kicking things off with specifically looking at alt text and how to write good alt text, which is a question that we get quite frequently, actually. So I just wanted to share, I've just got this one slide and just wanted to share a couple of links. First off, this is again a global event, but the official Global Accessibility Awareness Day website is accessibility dot day. And I encourage you to check that out. There's a lot of really good information, great resources on that website. And also encourage you to check out our freshly redesigned UW accessible technology website at UW dot edu slash accessibility. This is the site that we use to communicate all sorts of things related to web accessibility and document accessibility and videos and online meetings and online courses and lots of information there about digital accessibility. That's kind of our hub for communicating to the University of Washington community and a lot of good resources out there for people who are outside of the UW as well. So we just launched the new redesign, which has been in the works for many months now, a lot of input from for many of you and we really appreciate that input. And hopefully we've provided a site that's easy to navigate easy to find the kind of content that you're looking for. Also, there is on that site a schedule of today's events. You obviously are here and so you probably know what why you're here. We're halfway through the day. We've got two more hours of really great information. And I'm going to stop talking and hand off to Gaby and Anne Marie to plunge into to that content. So take it away. I'm going to share my screen here. Some windows around right. So you should be seeing my title slide so Anna Marie go ahead and take it away and I'll pick up where you live off. All right. Good afternoon everyone. And welcome to the art of writing alt text. I'm Anna Marie golden and it accessibility specialist with the it accessibility team, a part of UW it's accessible technology services. Next slide. Alternative text. What is it. Why use it. Alternative text or alt text is an attribute of the HTML image tag. It provides a brief description of an image placed on a website for those who cannot see it. Someone may not be able to see an image for various reasons. Maybe they are blind and cannot see images. Maybe they have image loading turned off for faster page load times because they have poor internet service, or maybe the image link just gets broken. So what if you went to a web page and you couldn't see images that contain information that you need to know. So for example, what if your child in the ingested poison. And when you went to the website to get help. There was just this Mr. Yuck image on the right side of the slide that contains the poison hotline phone number. If you can't see it, how would you know how to get help. There are some technologies such as screen readers announced images. If you couldn't see an image. How would you understand why it's there. So what about the second image example on the right side of the slide. The 404 error lets website visitors know the link to the web page is either broken, or the page doesn't exist on the server. If you were on this page and you couldn't see the image. How would you know what happened with your browsing experience. So if you knew there was an image on the page but you couldn't see it, would you wonder about it. And if an image is placed on a web page for the whole world to see. Should you really have to ask someone else to describe it. So now that you know a little bit about why alt text is important. Let's have some fun and do some practice. Okay, so I'm going to show you a few image examples on upcoming slides. And these are images from actual slide decks that were used in college courses here at the University of Washington. So for each example will take two minutes to let folks take a stab at writing alt text in the chat. So here's what you think the alt text should be. There's no right or wrong here today and there's no judgment. This is just to get you started thinking about how you would do it. Okay, next slide. So the first example here is an image that includes Spike Lee, and it was used in a college film class slide deck. So what would you describe this image in alt text. So go ahead try it out in chat and then I'll read a few as we go. So go ahead and start now. Okay, we have some coming in. Director Spike Lee holds a street sign for do the right thing way. Image of Spike Lee holding a street sign with the name of his film, do the right thing. Spike Lee standing in the middle of a residential street holding a street sign that says, do the right thing way. Picture of Spike Lee standing on a city street holding hold a street sign that reads, do the right thing way. Image of Spike Lee standing in a street holding a street sign that reads, do the right thing way. So we have a lot of like minded thinkers here today. We're standing in a street holding a street sign which says, do the right thing way. We'll just take a few more seconds here. Go ahead and enter. If you haven't hit enter yet. Spike Lee African American director holding up a green street sign that reads, do the right thing. Spike Lee standing on a street full of parked cars holding a banner that reads, do the right thing way. Now you guys are great at this already. Would you like to see what the actual alt text that was used is? Next slide please. And the actual alt text that was used for this images, Spike Lee standing in the street holding a street sign that reads, do the right thing way. Great. Okay, next slide. In the second image example, we have a diagram of a Francis turbine that was used in a college mechanical engineering class. How would you describe this image in alt text? We'll take two minutes to allow folks to enter their alt text in the chat, and I'll read a few as we go. So go ahead and start entering your alt text for this one in the chat. So it's a little trickier than the first one, huh? Go ahead, take a stab at it. There's no judgment here today. Okay. Diagram of Francis turbine with parts labeled, parts include in clockwise order, mainshaft, operating ring, water guiding device, spiral case, guide vein, stay ring. And it just went out of view. Runner, draft tube, guide vein, head cover, water inlet, arrows indicate direction of movement. Okay. So illustration of Francis turbine diagram with components, excuse me, components pointed out. Digital 3D rendering of a Francis turbine with parts labeled. Image of diagram of the labeled components of a Francis turbine. I think this would require a separate descriptive text page. Yeah, that's possible. In the last section of Francis turbine diagram showing clockwise flow through the guide vein and downward flow in runner. Three dimensional diagram of a turbine with each component labeled, arrows show direction the machinery turns. And I'll read one more here. Technical diagram of Francis turbine label in different parts. See text for specific parts. Oh, nice. Francis turbine diagram with parts label. Okay. Good job. I just wanted to point out I like the one that says see text for more information so with something like this this is a pretty complex diagram and context is really helpful when writing all text for these kinds of things. So hopefully there's a more robust explanation of what a Francis turbine is within the context that this image was taken out of so I think that's a great way to incorporate the context within the alt text as well. So just wanted to point that out. Okay, next slide please. And the actual alt text that was used is a graphic figure of the Francis turbine structure. It consists of various parts like spiral case head cover water inlet main shaft operating ring water guiding device guide vein runner draft tube and stay ring. I just wanted to point out that this engineering diagram is a good example of why sometimes it might be necessary to enlist the help of a subject matter expert in writing alt text to ensure we are conveying the correct details to website visitors to make sure we're getting that correct purpose of that image out there. Next slide please. In this one how would you describe this image that was used in a college film class PowerPoint. Let the artist in you come alive as you enter your alt text for this one in chat, and we'll take two minutes to allow you to do that. Okay, up close image of a clock and microphone held close to someone's mouth. Nice. Close up of hand and mouth with stopwatch and microphone. Close up of an alarm clock showing eight o'clock a microphone and mustached lips. Okay, that's good. Close up of a black male with mustache holding an alarm clock set to 8am and a microphone at his mouth. Very nice. Partial image of a man's face who was holding a clock set to eight o'clock and the top of a microphone. Close up of an image of a man's lips against a microphone while he holds an alarm clock reading eight o'clock. Close up image of a man's lips against a microphone while he holds an alarm clock reading eight o'clock. Close up of photograph of pocket watch reflecting eight o'clock and a microphone held up to males lips. Nice. Okay, we got time for one more if you're getting ready to hit that enter. All right. Image of someone holding a small alarm clock set at eight o'clock and microphone close to their mouth. The image has a warm tint. Oh, nice. Okay. And the actual alt text used for this image was next slide please. A man holds a tiny clock near his lips and positions himself in front of the mice. Okay. Next slide please. Our last example today is another image that was used in an actual college film class slide deck. It contains a scene taken from the movie three times. How would you describe it? We'll take another couple of minutes to allow you to type your alt text in the chat. Okay, we have two men in 70. Oops, sorry. The adults stand and sit around a pool table with one in position to take their turn. Nice. Man leans over the corner of a pool table intent on the shot he plans to take his opponent, two men and a woman observe. Five people surround a pool table three observed the game one person awaits their turn and the fourth sets up the shot. Nice. Image from movie three times showing two men playing pool. While three adults view the game. A still from the movie three times a man is bent over a pool table while several onlookers watch him set up his shot. Nice. Five people around a pool table from left to right two people sitting one standing holding a pool stick one standing observing one bent over a table taking a shot with a pool stick. Okay. A man bends over a pool table with a queue in his hand while four others watch. There are three balls on the table. Nice. Two men playing pool one standing in the background holding Q and one leaning over taking aim one woman standing and two sitting observing all appear to be Asian and 20 something. Okay. So the actual alt text that was used for this image is next slide. A screenshot from the movie three times shows two members playing pool, a man bends down to aim while the other man is standing. You see that writing alt text is really kind of more of an art than it is a science. And just like from the various descriptions that folks entered into the chat today for the different examples shows you how subjective that could be sometimes and so especially like you know if if you're doing some kind of complex image like the turbine diagram that we saw before. So it's definitely a good idea to consult subject matter experts or go back to the person who created the message to make sure you understand what the true purpose of an image is. Okay, turn it over to gave you. Thanks, Annemarie. That was awesome. So for the rest of the hour, I'm going to talk about alt text for charts graphs and smart art. And then we'll also experience what it's like for when a screen reader encounters these kinds of charts graphs and smart art and how it announces those. So I'm going to set this up. So back in February, earlier in February this year, we performed screen reader tests with a PowerPoint presentation because we wanted to experience what it's like for a screen reader user to consume a PowerPoint presentation that is pretty much purely a visual medium for displaying or for presenting information. So we wanted to have a better understanding of what somebody who's consuming that information what they experience. So we had a we created a PowerPoint presentation with a bunch of different elements in it, and we were testing those different elements and then we recorded everything in a Google spreadsheet and what you're looking at on this slide is a snippet from that Google spreadsheet where we were testing specifically what a chart, how a chart is announced or presented by screen readers in a PowerPoint presentation. So we had two versions of the same chart, one without any alt text and then one with alt text. And I'm going to summarize the findings based on what we're seeing here on the slide. So for the chart that did not have any alt text, NVDA does not read anything. I think it might just announce content placeholder but it doesn't really announce anything else. JAWS announces the details of the chart, and it groups things by series such as each fruit in order, and then by point, the characteristics and we'll take a look at the chart a little bit later on here. And then for each point and announces the value so it really goes into depth as to, you know, announcing each one of the different elements of that chart. Similar thing for narrator narrator announced the chart is quote chart three clustered column, unquote, after the chart each one of the 51 individual items that comprise the chart is announced as quote chart clustered column, unquote, and is part of the focus order visible focus for each component as it's read for voice over voice over announces the chart as quote chart clustered column, unquote. And if the user drills down into the chart using the voice over keys and shift key and arrow keys then they can access the 51 individual items that comprises sharp, the chart, but it's all just a bunch of data noise. So then we compared that exact same chart. This one had alt text and this is what we found for NVDA, NVDA announces the alt text, but it does not expose the chart itself. JAWS announces the alt text and does not expose the chart either. The narrator reads the alt text on the chart and it does not expose the chart. And then for some reason voice over reads the alt text twice. So based on our experiments are recommendation for including charts and graphs in PowerPoint is to always include alt text to make those charts and graphs, more accessible. If you don't cite alt text to it then the screen reader will not read the contents at all, as in the case of NVDA, or it will read all of the very different elements within the chart, the different data points and variables and even will start describing some of the shapes within the chart. So, so what we wanted to do is we wanted to see if we could replicate this in Word. And so we did the same experiment with the same chart. Two weeks ago, a week and a half ago so last Monday because we wanted to see if we were going to experience the same thing so there's something to keep in mind. The chart has been updated since February. And so when I was initially running these kinds of experiments I was not getting the behavior that I was hoping to get. So this is just our screen reader expert, Hotty Rangan, if he could perform these tests and see what he got. And he was getting similar things that I was getting as well. So, so I'm going to go ahead and play for you and a recording of in this case this is JAWS announcing this chart that you see on screen it's a bar chart. This chart does not have any old text so let me explain to you what you're going to see before we actually run this so it's going to read the heading level. And then it's going to read the text and then I'm going to arrow down into the chart charts going to become the main focus it'll change color, and then you're going to hear what how the screen reader announces this particular chart without any old text. Heading level 3 bar chart. This example does not include any old text and includes the same data as the following line. Graph. Chart area. Chart title fruits. Legend series quote apples quote legend entry. Series quote oranges quote legend entry. Series quote bananas quote legend entry. Plot area. Vertical left parent value right parent axis. Access label value colon zero. Access label value colon one. Access label value colon two. Access label value colon three. Access label value colon four. Access label value colon five. Access label value colon six. Horizontal left parent category right parent axis. Access label category colon ripeness. Access label category colon fragrance. Access label category colon appearance. Access label category colon cost. series quote bananas quote point quote cost quote value colon five chart element layout options left pair and text wrapping and positioning right pair and available add element available styles available data layout available chart area okay so that was about i think it's like two and a half minute audio video of the screen reader reading that chart and what you're experiencing is um is it's reading all of the the data that is composed in there and it's reading it as one big chunk and the challenge for screen reader users is there's no way for them to stop that announcement and then go back and forward within that announcement to figure out the individual data points it's just all presented in one big chunk it's something like 1496 characters now if an individual was using a braille device then they could go back and kind of you know read different parts of that entire description but keep in mind that a very small percentage of people who use screen readers also use braille as well so this makes it really really confusing all of the data points are there but if you're trying to follow it it makes it really really challenging to understand the relationship between the fruits and the values so again so we talk about you know including alt text for charts and it's absolutely critical because it's really difficult to synthesize all of that information and one fell swoop and individual might have to listen to it several times to get the data that they're looking for heading level three bar did not mean to do that okay so um so how would you write actual art alt text for this particular chart so on this slide we actually have the chart itself on the left hand side and a left hand side of the slide and it's all about fruits and ripeness and apples and oranges and whatnot but when you create a chart by going up to the insert tab and then selecting chart what happens is excel automatically opens and you get this little representation here of I've got a screenshot of it excel will open and then you enter in your values and that populates your chart um and essentially in this case a data table would probably be a lot more accessible than you know reading all of those data points by having that chart in there but the charts makes it very visually appealing for many folks and so that's why you know people choose to use charts instead of data tables to represent data um I'm going to switch here to my web browser to a couple of different references that um I'm going to give you guys at the end of this um let's see if I can make this bigger bigger oops okay so this is let's see if I can put this in the chat as well this is a resource that we use for describing figures and this is from special interest group on accessible computing and it gives a little bit of information about general guidelines for writing alt text for charts and graphs so it's pretty helpful and informative but one thing that you'll notice if you're going through this information um is that it tells you in order to give more information about the the graph or the bar chart to include supplemental figures such as data tables and whatnot but the problem is in word documents when you're entering in your alt text there's no way to include a data table within your alt text um so so that's kind of challenging when you're working with complex graphics um so I'm going to go back here to my presentation oops so uh the other tip that those websites um tell you to do is to make sure that you include all of the different value points that are included within your chart and if there are any trends that are going upwards or downwards or essentially what is the point of the particular chart or graph that you've included within your document or um you know whatever content that you have so what we've come up with for the alt text for this particular chart would be here on the slide and it says bar chart value for rightness apples 4.3 oranges 2.4 bananas 2 value for fragrance apples 2.5 oranges 4.4 bananas 2 value for appearance apples 3.5 oranges 1.8 bananas 3 value for cost apples 4.5 oranges 2.8 and bananas 5 so that's a lot more meaningful than what we just heard and concatenates um all of the the information that is included in this chart so uh we also have had questions about smart art and how do screen readers um handle smart art so we did a similar experiment with smart art and in this case um you know we went to the same location go to the insert uh drop down menu and from there you choose smart art and then you can choose whatever option you want to in this case we decided to choose three lists in different um uh columns so again this smart art does not have any alt text associated with it and this is how JAWS would read this in word this example heading level three list this example does not include any alt text horizontal bullet list rectangle rectangle rectangle rectangle rectangle rectangle smarter diagram layout options left parent text wrapping and positioning right parent available horizontal bullet list graphic horizontal bullet list rectangle rectangle rectangle rectangle rectangle rectangle smarter diagram okay so it didn't read any of the text it just read the elements of the the lists themselves that happen to be in this kind of smart art so it was uh describing the the rectangles but completely missed the text itself so that's why it is critically important to have alt text associated not only with charts but also with smart art um as it seems that screen readers don't really access access the the text in that case um and I kind of want to go back to um the original chart that we were looking at earlier we go back here um now we also I also tried to do an experiment with the updated version of JAWS remember we did a test back in February and then we did a test a couple of weeks ago and I was trying to get the alt text to be read within the chart in word for windows but I was having a really difficult time and I thought well maybe my skills and JAWS aren't that great and so that's why we had Hottie kind of get involved with with this experiment as well but Hottie was having a hard time getting the alt text to read for charts in word as well but we think that's a bug and I'll tell you the reason why is because when we tested JAWS in um PowerPoint again we were noticing that the reading order is completely well JAWS is essentially ignoring the reading order in PowerPoint so uh so we think that so there's two bugs that are going on with JAWS there and then when we tested this chart again in word using NVDA um we noticed that it had the same behavior as what we noticed when testing it in PowerPoint so um NVDA if it encountered this chart without any alt text it would just announce content placeholder um or it wouldn't announce anything at all but if it did have alt text it would actually announce the alt text and not any of the individual components I also tested this chart with voiceover last night um in word as well and if you remember from our PowerPoint test without alt text voiceover will allow the user to drill down within the chart and read each one of the individual components but if a chart did have alt text it will read the alt text twice but when I tested it in word last night voiceover would only read the alt text once so um we're thinking I'm thinking that um Apple made that adjustment and fixed that bug so what we're seeing is we're seeing the behaviors that we should be seeing in other screen readers such as NVDA and voiceover which is they should announce the alt text um but there seems to be a bug within JAWS now that doesn't change our recommendations we still recommend that folks um include alt text for graphics and charts uh regardless um and then um when we do these kinds of experiments then we file bug reports so um that's just another bug report that we need to file with JAWS um to make sure that that it that the screen reader should be behaving um the way that um we anticipate um so let me go back so this is our again our um uh smart art and then I wanted to include what the um the uh alt text would be for this particular smart art list so this would be three lists the first list is about apples they are red or yellow and crisp the second list is about oranges they are orange and citrus and the third list is about bananas they are yellow and sweet um so that's just really simple um alt text for this particular small smart art diagram um I wanted to also give you guys an example of of what uh uh alt text sounds like when screen reader announces it accurately so in this particular case we did assign alt text to this particular design this is a cycle matrix um that um uh includes um some alt text so again I'm going to play this video what you're going to experience is that um the screen reader will announce the heading level first and then the sentence excuse me and then it will uh all change the focus to enter into the the smart art itself and then the screen reader will read the alt text for that particular diagram so I'm going to go ahead and play this heading level three cycle matrix this example does include alt text for the entire diagram but not for the individual elements tuckman's four stages of group development contained in the cycle matrix forming is stage one storming stage two norming stage three and performing stage four partial circle rectangle colon rounded corners partial circle rectangle colon rounded corners partial circle rectangle colon rounded corners partial circle rectangle colon rounded corners arrow colon circular arrow colon circular okay so I did read uh the alt text which in this case is tuckman's four stages of group development contained in the cycle matrix forming a stage one storming stage two norming stage three and performing stage four but then it also announced some of it started to describe some of the the shapes that are contained within this smart art and that seems to be unique to JAWS um NVDA does not seem to do that it just reads the alt text and voiceover doesn't seem to do that at all um so what we recommend if at all possible um not only including alt text for your charts in your graphs but if at all possible um artifacting the particular decorative elements within that chart itself now um there's a couple of different ways to add alt text or to mark certain things as decorative um and when you're in a chart or a graph um well usually what you can do is you can right click on an on an item and that brings up a context menu and within that context menu there should be an uh an item listed in there for edit alt text but that doesn't seem to be the case when we're talking about smart art or charts um the only way to mark things decorative is to select that decorative element and then go up to the review tab and then select um check accessibility from there and then from the check accessibility drop down list will be an option for um editing alt text so you have to go through the menu um the actual ribbon in order to get to the alt text menu for marking those those um decorative elements as decorative it's an additional step um and but it seems to be necessary especially for those folks who are using JAWS as their primary screen reader okay so Anna I'm going to hand it back to you because you have some more tips for writing alt text for us yeah well we didn't want to get you started without leaving you without some general tips for writing alt text um so we want to make sure that all images that convey meaning have alt text and think about when you convey the image's purpose I mean think about a linked image versus a regular image how the purpose of those might be different um limit alt text to around 140 characters or less this is a recommendation because a couple different reasons one has to do with the way that assistive technologies chunk up the data and relay that to users um so it'll it'll give like a stream of characters and then there'll be this really long pause and so sometimes users don't know that there's going to be more information after that but even more important than that is the way that users have the ability to review alt text so with regular text on the page assistive technology users can review that information like character by character or word by word and with alt text you can't do that it's just kind of a top-down thing it starts and that's it um you can't review it so it's a good idea to keep it short because you want people to be able to remember what they're doing there you don't want to have like this really huge cognitive load for them to understand your image it's not necessary to save photo of in your alt text because assistive technologies are going to announce that it's a graphic when they hit a graphic um and it's important to emit information that's not available to all users so for example if i'm adding information in my alt text that's not there visually on the page only people who access alt text are going to get that information and with decorative images on web pages make sure you're using that null alt text alt equals quote quote for your alt attribute and with documents use the checkbox for decorative images so when you do these things what that does is it allows assistive technologies to ignore those images so they're not going to get pinged that there's an image on the page and wonder what was that image about and as gabey was just talking about always assign alt text to an entire chart graph or smart art and then mark individual components as decorative gabey you're muted thank you thanks annemarie all right i wanted to share a resource page and share a link again with you with a special interest group on accessible computing but there's another link i also wanted to share it's effective practices for description of science content within uh digital talking books um let's see here if i can get to that so this is the sig access link and this is um this is effective practices for description of science content and this is from w gbh n cam um and uh this has a lot of great contents in here for um creating alt text um for digital talking books but this also um applies to documents and websites as well so it gives a lot of different very concrete examples for things like bar charts line graphs bend diagrams scatter plots tables and pie charts and so forth and so on so another great reset resource to draw from on there as well um and with that um wanted to share this last slide that says for free consultation for websites you can contact annemarie at am golden at uw.edu and for our consultation for electronic accessible electronic documents you can contact me at gabeyd at uw.edu um but i we have just a few more minutes left and i wanted to um i'm going to go ahead stop sharing here i wanted to address some of the questions um that we had in the chat i think some of them were addressed already but we can take a look at a couple of them that were not let's see here um let's see for some of the complicated charts would it work to provide a title or something brief and refer to text within the document via a caption on the body of the document yeah so when usually when people include charts and graphs within their document um there is context for that and that context should be included in your body copy as to why you're including that chart or graph um in your document or whatever and so that really should probably have more information or describe that chart or figure um a little bit more robustly than what could be explained in in alt text um so context is is huge in that regard so that's a great question um and then one other question does anyone have experience with converting smart art to shapes i've read that doing that then allows screen readers to go through the bullets regularly but i haven't tested it uh you know we haven't tested that either so um maybe one of our during one of our next um uh staff meetings we will all try that out convert that smart uh art to shapes and see if we can actually get the the text to to to be announced by the screen reader seems like an additional step um for that to happen and and i'm not quite sure you know what the results will be for that so that's uh uh something that we would like to test out in the future um and then um you know watch the space as we continue to do those kinds of experiments and um we can relate to you what the the outcomes are for that um let's see here there's another question about the number of characters and it looks like taro has that answered that but elizabeth asks i've been told there are character limits in the alt text should be worried about hitting those limits when trying to include the uh chart information and taro says there's no hard character limit for our alt text screen readers will keep reading however they can't read alt text like they can read other text there's no exploring the text it just reads it as a chunk um so it's best to keep it short and sweet okay and then sir has a question curious does that mean we shouldn't have said spiky on that spiky image since his name isn't anywhere on the image it's possible his name is somewhere else on the slide um i'm assuming that's referring to the earlier image that animers showed um you know if it's possible to include individuals names i don't think that that's something that needs to be omitted um if you know if you're and again it kind of depends on context as well um so that was that image was specifically taken from a film class um so you probably do want to mention spiky as he is the director and maybe you want to mention the fact that you know he is the director or filmmaker um so again it really depends on the context of how those images or charts or graphs are presented um in in your document or um or anything else okay um we are at 252 so i think we're going to go ahead and end for this session and we'll start up again at three o'clock for uh accessible tables in word and pdf