 Okay. Also. Okay. Good afternoon everyone. Welcome to the accessibility webinar series that we have. My name is hardly ranking. I'm a member of it accessibility team. Working with other colleagues. Like an emory. Gabby, Dan and terryl. And then my primary responsibility in this office is mostly to make sure that software that we develop here on campus or we purchase are accessible. It's really the pleasure to work with many. I'm a local designer developer as well as the designer developer from third party. Or the software companies. So, today I'm going to talk about the noticing the screen reader. But like, as always, I provide a kind of preview. First, I would like that we just really elaborate a little bit about the difference between accessibility, the technical accessibility and functional accessibility. And we discussed to know how we and what you can test. Talk about the availability screen reader program, at least the North America. And then we look into how a screen reader works. And then we get to the core of the presentation, which is that we can be really use a screen reader for testing. And of course that the end to end I will have the demo and then we go through the some of the basic screen reader functionality. And then, finally, we have some tools and resources to share with you. Let me talk a little bit about the technical accessibility. In the technical accessibility, we check for the coding practices. We really make sure we try to make sure that the code behind the scene that we see to them are according to the standards or not. This will ensure that the assistive technology, as well as the other, you know, cited user or keyboard user can access those elements and interact with them. So, as it is clear, you know, we check really one item at the time. And then we said that, for example, a button is a button a menu is button and the code behind the scene is according to the standard. What really in this method we do not understand or we do not know is that we are testing only one piece of the big puzzle. And now we don't have any holistic view of the overall functionality of the application or the task that we have to perform. On the other side, we are sometimes we need to do the testing, we do the functional accessibility testing in the functional accessibility testing we identified the functional tasks associated with the application. I mean, we are going if we want to go to test a G and email program like Gmail. So, Gmail is a huge application, just a Gmail site, but we cannot test everything there so we have to identify here what task we want to do that. One of the tasks, for example, is just composing a new email. Another task would be finding a specific email and reading it. Another task would be you know, adding a, you know, someone to contact list. So, if we consider, for example, composing a new email that task itself can be divided in multiple steps. So, the step one probably could be it can be, for example, finding the compose button. And then clicking on it. And then going through the form, filling out the two fields, CC field, BCC subject, and then, you know, entering the body of the email composing some email, and then editing that running the spell check, and then once or add attachment as needed. And once you're happy and then you still find the same button, and you send it, and then you wait for a confirmation to make sure the email has been indeed has been sent. So, as you see this simple task has been needs to be done in the multiple steps in the functional accessibility testing. We check for every step. So we practically check the task as a whole from a to Z to make sure that every step is accessible. And if any of these steps is broken, then the entire task is broken. So, but for a real accessibility to make sure that really a task is accessible. We need both we need that every element that we land on introduces itself as it's supposed to do, as well as the entire task. So we for for functional accessibility, technical accessibility is required, but it's not sufficient. So we need to have both functional and technical accessibility in order to say that a specific task is accessible. A lot of people, I mean, as some of you might know that I'm blind, it happens that I use a screen reader, but my background is computer science and then I used to look in the code or write a code and look into the code a lot. I'm not doing that anymore. Thanks to the students that they have and they do the job probably. But for the screen reading all these years that I have been blind. When I run into somebody who hears my screen is the talking. They get the immediate feedback is that, ah, that's the you could you have we can all this stuff. Yes, indeed in some way, I can do it but with some limitation. And that or we as a screen reader can do that only when the elements or the app, the interface that the applications that we are dealing with are accessible. The fact that the screen reader just talks, it does is not enough. It's not in the real page when you go for example to log into your bank, and then you have to be able to see the page, you have to see the login page by logging link or button, and then logging, and then you go through the application and you browse and then find the information that you want. And then it is nice like like this when we see one piece of information at the time we do not have any information about the surrounding information, or how these elements are visually related. So, the fact that the VC only one piece of information at the time. The is really great, but application is only accessible when there is a structure is behind all those elements on the page, otherwise we really wouldn't be able to interact with the page at all, or in at least not in effective way. So, again, what I wanted to highlight that you know that when you see here is a screen reader, it doesn't mean that things are accessible. Yes, we are in that direction that to have some accessible experience but it is really not enough. The screen reader program, remember that they are made for screen reader users. Not, it is they are not designed for accessibility testing. Sorry to disappoint you, but it is not designed for them. They offer hundreds of functions to a to help assist to help the user to get the information that we are missing. As I mentioned that you know when you are browsing a page or when you are in an application you see only one element you have no idea if there are some. Something is changing in your interface. And a good example is that you know, when I, when I talk about this, you know the hundreds of function is like this. I am in this page that presentation that you can see that. The text that I'm on it said that hundreds of functions, blah, blah, blah. I do not know I cannot see the title of this heading of this page, but it's clearly there gives me a function to tell me and telling me you know what is the title of this page. And these are the really information that we need that, but otherwise I wouldn't know this piece of text is part of you know a notepad, the part of the website or part of the presentation that I am in. Or another example is that you know when you are, for example, working with outlook, and you are composing an email, you are in the body of the email, and then you are heavily involved in it, you know, editing your email. But you are about to send it. Instead of going and then checking the two field one by one, you can press a shortcut key, a screen, a short program, a screen, the shortcut key. It reads to you all the people who have been added to the two field or CC field. So, without these extra information, it would be extremely difficult to interact with the program. So what I am trying to say that these hundreds of functions are there that a typical user might not know or might not even utilize it. So, even though the people who use it. My headset is at the battery level. So I hope it lasts, but I don't worry if not, then I have another backup. So, in summary, screen reader are great tool, but note that it is not made for testing, and it is very complicated. And then you should not use it unless really you know what you are doing. And then what I usually tell everyone including my students who have been helping me, because some of them really they when we are testing something they jump into the screen reader testing because it's more fun for them, not for me but for them it is. And we can only use a screen reader to verify the issues that be found, not to determine it. So again, use a screen reader to determine it to verify the issues that you found, but never to do to to determine the issue. The problem is that the screen reader are so different, and they work so differently than it is very difficult to rely on your observation, because the screen reader might fail. And that but that failure, you do not know that because you cannot use a screen reader effectively, or your screen reader is not supporting that feature, or your browser is not for supporting that feature, or the developer has failed to implement that feature thoroughly. So you see that this is a chain of several possibility that you run into a failure, but knowing that which one is the real cause of that, it is not easy. Things that we have to consider. We need to do that on the basic understanding, we have the basic understanding of the, of the coding practice, you cannot just jump into a testing and then say that over, you know, it should work this way because you do not know different elements of this different element how we should, they should behave. So you have, you need to have, you need to know the for example how the combo box should work. You need to know the specification for each widget or each elements, but to make sure that the observation is in line with the spec. And, and then occasionally we see that some, some people they have their own preferences as a, you know, accessibility best practices. So please, please be careful whenever you are doing some testing make sure that you leave your personal preferences behind and make sure that it is in line with the spec. So there are a lot of accessibility tools that we use to check for the technical accessibility. As a matter of fact, we will be offering several sessions during the global accessibility day to introduce these tools. So you can see, you know, how we use these tools to determine some technical accessibility, there's no access. When we get, I think, material will send the announcement when we get closer to global accessibility day which is later in May. This technical accessibility tools, as I said, are great tools, but they can at the most I would say that maybe they can catch 30% of the issues. So we need some manual check and we need to make sure that indeed the application are technically functionally accessible. And then one of the important things this slide that I would like to share with you is that, you know, occasionally we run into some highly dedicated accessibility accessibility. The individual that they really like to make their product accessible, but since the technique that they use is not accessible, they try to come up with work around solutions and they need to add bandages to their application to make it somewhat accessible. The, you know, work around solution, we do not consider accessibility solution, they are just bandage. And then, you know, please, please do not go that route once you go there. As Dan usually says, it's a rabbit hole. So next time when you update something, you break your own work around solution. So do not do it. So what do we test usually. So consider you give me an application for testing. So what do how do we do, you know, yes, I am a screen reader user but it doesn't mean that I jump into testing with screen reader tool. We check for consistency. I don't see that but I have an army of students that they help me with with with all these tasks that I cannot do that for by myself, for example, visual consistency, functional consistency if you go from one page to another page or we can visually and the same page or structurally it is the same. The typical example that the example that I usually use for this slide for to highlight my point is that you see that in, for example, in the same domain, you see that they implement the developer the question about the gender male or female or whatever other option they give in some places at the radio group. And you see that you know in the next place, very, very, very close to that application. And for example, combo box. So note that for screen reader user or for every, everyone and when it takes some time to learn how the application is being used. And then when they get familiar to that technique that you are using your application to get used to it. When you bounce back on force between radio group on combo box practically you confuse your user. They go through that experience. So, please, make sure that functionally, once you decide you know to use combo box then use that across the application, at least for the same function. Now for your user development so are you using for example button and then links interchangeably, or you pay attention to links should be used for, you know, when you are navigating out of the domain and going to a different page and button are designed to perform a function. So, we differ we look into that. And so far as you see that has nothing to do with the screen reader program. Eboard upper ability that is one of their main focus that we put for the screen reader for accessibility testing. So we want to make sure that we can access every corner of the application and perform all the tasks at least those tasks that have been assigned to us to perform. All the tasks. And then it isn't really so simple that everybody can do that. So, everyone that is something that really you do not need any special education about accessibility you just need to press the tab key. You can see that if you see the focus indicator. If you miss or they do fail to, you cannot find the focus indicator then I'm sorry then an application designer need to look into that and then make to make sure the focus indicator travels with the focus. We make sure the tap order are correct. So we, you might be surprised if you haven't done that, you will see that you press tab key, but the tab key bounces back and forth and they don't go in the logical visual order that you are expecting. And then another point that we look into that you know some some designer developer they come with proudly to introduce us, you know, 65 shortcut keys that they have designed in the application. Yeah, it's great to put the thing to have, but they have nothing to do with accessibility. As you see that here I put not highlighted with the with the star of the asterisk. So shortcut keys are good features to have, but they are not accessibility features so they, they are good as long as a handful, and they are logical and consistent. But if you do that 65 shortcut keys for me meaningful to, or for keyboard user to access that. And then I think you are asking for computer user. I mean, we are human but it's not work like a computer. So another thing that really check into that area landmark area landmark really in very simple most one of the one of the simplest accessibility feature, but they have that high impact in accessibility. So what are they are the, you know, I try to explain them and I take you to a random page within the fraction of second you can identify the how the page is constructed constructed you can see that for example on the top you have a banner on the left side navigation might see there isn't maybe horizontal navigation bar, and you can see maybe the search area, you can see the footer and then the area where the main content goes. These are as as nicely it is a pleasant is to see that. And then within a fraction of second you can narrow down your focus and go to narrow your focus to that area that you came for. But screen as I mentioned earlier screen reader they see only one element at the time. I have no idea about this visual structure so or applicable because we call that application structure. So are you a landmark is a means to provide this application structure. So they are containers on the page. For example, all the band banner information navigation information all are there. And you just need to provide with semantical information and they're the hey this is my banner or this is my search area. And then, then the end screen reader user they can utilize it so I can show it when we get to the most side. So, we need to make sure that every, every content that we have in the page it is in a, it's maintained in a container, it is has a proper label, and then for the we use headings to structure content. So, let me repeat that we use audio landmark to structure the application framework, and we use headings to structure the content that goes in it. So, headings should be logical, hierarchical, and then complete with the completed means that we should have sufficient headings in the page. So when you see them as an outline. So it tells you enough. Hey, these are the content in this space that you should expect. We see that occasionally some content or some pages that have a tons of information but you know they have one or two headings. And then, then, then we ask the designer or the developer content creator, hey, how do you are, do you expecting the screen reader user would be able to see the other information on the page that they have no headings for. So with a completeness, we mean that the heading should, you know, should, we need to provide a good outline of the heading or heading should provide enough outline outline to tell us about the content of the page. So, grouping of elements. So you might be a good painter you might be a good artist and provide a lot of stylistic effect to mimic a list. But as long as you don't use the structure least the structure doesn't matter how good you are in the painting. So we will not be able to see those items in a group as a list. So if you wanted that your list is presented to screen reader as a list, then you need to follow the, you need to use the proper markup so we have ordered list definition list, a numbered list, and then all of them are well supported as well as a browser and screen reader so and this are extremely important. Otherwise, this list item they appear as an independent piece of text. So I go on the item one in your list, but I have no idea is your list. How many items are in your list five items or 50 items. And there is no way for me to go to the end of the list for the case here if I'm not interested in it. So there are some features that accessibility features that really we can utilize it. If you use proper markup. Then we can talk a little bit about the check about the graphics. We differentiate between stylistic graphic graphic and then informational graphic for informational graphic we do expect a meaningful all text. And they can be caught most of them so far I remember me I know that I think about it can be caught by the screen by the accessibility testing tools. Then we get to the little more complex stuff actually form is not complex and we when we get to the form elements so we are expecting that the forms they have proper meaningful labels. So when user with skill either tap to a form element. So they know that what type of the element it is, and what is the value if there is any, and then you know that so they can interact with it. There are more complex widgets, for example dynamic widgets that you know, it is really can be could be quite complex. And then we check also the error handling. If you make any mistake, how the error warning are presented to you and how you recover from the error. And then also with the expand collapse the widgets and many more complex things but let's go with this continue. What screen that are available. So, there are many screen reader in the world but in the in North America for Windows we have jazz NVIDIA and narrator for windows. And then we have voice over for Mac and iOS, and we have talk back for Android, there are different flavor of Android for for talk back depending on you have a Samsung Samsung or other other variation of Android. I think underlying of their skin reader is talk back at least for most of them in Android work. There is entity accessibility group. We call that the web aim. I'm pretty sure some of you have heard about them. They are great people, but we are greater accessibility team at you don't think number number one. They have been tracking the usage of a screen reader in the world. I believe I in the world. Yeah. They started few years back, but it is interesting that we see that jazz as a commercial screen reader program has lost its ground to know year after year. And I need to mention that the jazz is the commercial one, and then MVDA is free one, but they accept donation. So jazz has a lot of algorithm in it to compensate for the lack of accessibility. They do have a lot of we call that guessing guessing algorithm, for example, if you fail, or as a developer fails to provide a label for form control. And then they check for their closest text to that form control, and they introduce the closest text that they found as an as as a label for that form. Sometimes they are okay, they're right. Sometimes they do badly wrong. If you want to do any testing, please do not use jazz use MVDA and then use Firefox. So Google Chrome is too much I recall the Google ish so too much Google for a flavor in it. And then jazz has also a lot of guessing algorithm that could confuse you. So stay within Firefox and and MVDA both try to follow the standard and they do not have at least many guessing algorithm. So stay with Firefox and MVDA, if MVDA is free, and then they come with some pretty good way of some voices. If your voices are not pleasant to you spent you know $64 by new voices. You can keep those voices forever. So it is very cheap. Here the statistic, I think as of 2021. I was really I couldn't believe that the jobs has dropped to 16%. I mean, sometimes it was the number one provider in this business. So if you need to study more the trend, you know, we will be sharing this slide with you and then you can study by yourself. So a screen reader. How did they how did they work. I know a screen reader when we go to a page that has been the way how this car used in a web application or versus on a desktop application they are different. Our focus is mostly is a web. I did try to explain a little bit about the how they work in the web environment in the web environment all this is currently that they have two major mode. Browse mode, and then or reading mode, and then the or interaction mode. What does it mean. As I mentioned earlier, we see as a screen reader user one element at the time. So we have no idea about our surrounding information. We just rely on. You as a keyboard user. You see, you can press tap key to get all these elements that are because that focusable that they know they're accepted. The key or their focus. But there are a lot of non focusable element on the page there might be graphics that we there might be information or there might be piece of text or we call it static text or some graphs that they are there, and they are not focusable. So, for a screen in order to make this information accessible to screen reader screen reader program they introduce a mode that they call that reading mode or browse mode in that browse mode. Everything on the page everything is linearized from left to right top to bottom. So, practically I see every the first element. And then go next element, regardless they are focusable or not focused. And then depending how the coding has been done or if the coding has been done properly or not, the reading order the way that we read might be right or not. And just consider everything is comprised into one pile of text, you read one piece after another. But behind this reading or mess, if there is a structure behind those elements, then we will be able to utilize them. For example, they have created lists, list of five items. We easily see that you have started the list with five elements, we can go in it and see the reader item one, two and three. And if you are not interested to read that, we can press a shortcut key to bypass the entire list and go to the next element. It is cumbersome, but if it is a structure behind your page, then we will be able to utilize. I hope it makes sense, but we will hopefully see that so reading mode. That is the mode that we use to discover the page when you mean I am taking to a new page. I have no idea how the page is going to construct there are the first thing that I do is that to see that my, my headset is about to die but if it happens then I switch to another screen as another speaker. So when we go to the discovery mode, then we use those screen reader features to examine the structure of the application. We learn it how the page is constructed how then we navigate to the right section that we want to write region that we want and from there we can read. And if you read the list or headings or graphics or forms, then then we can, you know, interact with them accordingly. So, on the other side, there is also interactive mode, meaning that consider you know I learned about this enough about this page how do I interact with it so there is a form for elements. So if I need to interact with the page if I have to for example click on, you know, a combo box or radio group, then I have to switch to the interactive mode. In my screen reader and interact with it if it is a text box, you know, then I have to switch to interactive mode and then the whatever I am typing will go into that edit box. Otherwise, if it if I'm in a reading mode, everything that I type is intercepted screen reader as a command. For example, I mean I will talk about that in fewer slides. For example, I can navigate to the next heading while I am in a reading mode and then or look for the next form control next for the button next for the for example next graphic or table. So I can do all this stuff. All this navigation when I am in a reading mode slash discovery mode. So, now the answer to this question. Yes, or as we say in German line. But do not use it for kindergarten or the keyboard operability you do that for really selected testing and you should be really sufficient in using screen reader to do that otherwise the false positive will be high. And if you somebody tells you the screen reader, the, you know, accessibility job accessibility and we don't have such terms, you know, just say if somebody says that you know that it means they haven't completely figured out what accessibility is. When we say that accessibility then then something is accessible it means it is accessible for the mouse user for keyboard user for people with low vision to needs to enlarge the file account or change the contrast, as well as for the screen reader. We cannot provide you cannot afford to have separate interfaces for each group. So we have to have one interface and should be flexible enough to adapt to my need. So, as mentioned earlier, you know we need to use this browser tools or accessibility tools for technical accessibility that way we catch 30% almost 30% of the problems. Supplementally, you know you can check use the screen reader for again for some some issues that probably are easier to catch. For example, the announcement there are live region or dynamic events that are happening if they are announced properly or not and so on. Okay, I would like to rushing a little bit to 44 I would like to give you to demo, demo side. So I have a list of the phrase going to use commands here. And we will be sharing this with you so feel free to know then utilize it as needed, but every screen reader has its own long list of, you know, the short cut keys and commands. I think I included just the basic how to go to the headings how to list the area regions, how to do that, you know, graphics tables, and the most importantly how to start out to stop them. One thing that you want to know that is the control key is the shut up key. I have three pages of this commands. So, I have three pages that I had in mind but I cannot cover that but we decided to to just focus on a accessible university which is a fake page and third time tutorial, who has created this sometime ago, and it is really good page to demo accessible in accessible features so I'm going to exit and I keep it. I'm here I preloaded the page, and then I am going to, I guess, I need to stop the sharing and then redo it so you can hear my screen reader. I am once I start sharing the screen reader will be loud, but but immediately I will change it please. So it might not be bad it wakes you up. Okay, now I can get rid of this. Can you confirm that the voice is Okay, is the volume is reasonable? I think it's, it could be just a little bit louder perhaps. Louder. So... Is it a good level? Is it a good level? I think that's probably good. Okay. Yes button. No button, enter. Okay. So it is significantly slower than the normal. Okay, this is the page. Now it is a time that I'm going to demo I'm using for reference I'm using Google Chrome, even I told you Firefox, but my default browser is there and then I don't want to really load that the Firefox at this time. Those features that I want to do that. They work beautifully I mean easily here. So, as I mentioned, this is the, for those of you are familiar with this project. This is the fully accessible version of this page. And alongside with the fully inaccessible not fully means very inaccessible version of that. They look the same, but you see behind this page, a lot of the structure and you do not see almost any structure for the other version, though they look visually the same. When we get to this page for any page. The first thing that we do is that you know as I mentioned like you come to a new page you want to see the structure of the page you want to see that what is the major component of the page how the page is constructed or what are the you know, how is the application framework. So, what I do is that you don't need to worry about these commands, but you can study them by yourself or you can see some of the summary of the commands that I will be sharing through the slides. So, I am going to ask the screen reader telling me the list of their regions what are the major regions in this page document regions dialogue regions preview manner one of five. So it tells me this is the banner region zero main menu navigation main menu region main. This is main which is usually main content area apply now form, and this is a form called apply now content information and content information which is the very bad word for footer. It means that so but that those people are right as the road they standard, they like the content info but anyway, so we are getting used we got used to, but it is not really human understandable I guess. So, consider I am interested to come to go to the main content area apply now main. So, I selected main content, I press enter. And my focus is right at the beginning of that main content area, I do not know exactly if what the color behind that main content is, but probably material can tell you where I am but I'm right at the beginning of the main content area. And the first thing that I see that is that the future story slide show. Because no, I guess you can see where I am. And then here I consider the main region as a content main content area. So I am this region. And then I would like to say it would see a get an outline of the content here. Excuse me for a moment you've, there's a select all you've done a select all on the page so it's kind of hard to see somebody. Okay, can you click on somewhere on there. I just clicked and I'm curious now whether that messed your focus up it looks like it probably did not, but can you confirm that you're still in the same place. Yes, I'm still simply. Also just FYI that, how do you know we're playing with that earlier and it seems to be unique to, I think it's in VDA and Chrome is that correct every time you hit the control key. It automatically selects everything and so that is just kind of an anomaly maybe above. Yeah. But it happens that I use them and I didn't really think about that effect until a few seconds or I didn't want to change the game in the last second so. But in the meantime, if it gets highlighted. So, some spot to on the, the, what I got on highlight that. But thank you then for mentioning that. So, here I'm going to ask a screen reader to tell me the list of the headings using this baby dialogue. Accessible university one one of eight. Accessible university and watched for the heading level. The number that you see on the right side is the heading level. So the first one is heading one featured stories like show two. And heading to welcome to be a needle to can you spot the barriers to and these a enrollment trends to. I forgot that you can hear that so I don't sometimes I better not apply now to security question three. So, until here, I understand everything is a major section of the heading one, but when I see the next item security question three, security question three, I conclude this is part of this. This guy, so the apply now. So that is how heading structure they provide a good outline about the content. So I can see, I can see the outline and I can see the really, really the relationship between this section or these headings. And then focusing on the desired section is extremely easy. If somebody asked me what is the major problem on the web, I would say navigation navigation and navigation, finding out in a jungle of the information that some pages and I'll offer to you throughout you. So difficult so difficult you have no idea you know are you in the main content area or somewhere randomly and then you see no heading, and you have to browse the page from top to bottom to to just figure out and then the most difficult thing is that you scan the page from top to bottom and then you see that you don't find the information that you came for. These are the way. And then as I said, I am now in an interactive in a reading mode. If I want to show you how the pages is constructed. How the page is presented to me. So you will be surprised how messy it looks like. But besides this messiness visual messiness that you see, there are the necessary structure behind it. What you don't see here is the type of the element, because I just copied the text, not the structure. Let me find a list. So when you see this hopefully you can see that hopefully it is fun is a big enough. When you enter the list, it tells me list of three elements like one card slide, that is a good list of one, I might have one, I did three and list and consider that in a discovery mode or reading mode, I am reading this page. I get to this list. If I am not interested for this list to read about this at all. I can press a command. It jumps through this list and takes me to welcome. Again, there is a lot of benefit of providing this structure in your page, because it not only helps us to understand the application framework or the content structure. It helps us to be the navigation and then being effective accessible university. So a lot of other interesting stuff here is, for example, accessibility feature is the form control. Before you get to that, it is, we are pretty close to the top of the hour and I wonder if you want to pause and just see if there are any questions before in case there are people that need to leave at the top of the hour but then we could continue your tour for the benefit of the recording and then folks come back to that and watch the recording. I thought I am entertaining enough to keep people for two hours here. We did have one person who had to leave and they said, this is Nikki says that to say thank you to you that she learned a lot. So, but I wonder if anybody else has questions that they want to share before the top of the hour but do feel free to stick around if you have the time. But any questions feel free to either type them in chat or just raise your hand and we can call on you and you can speak. Do we have any questions then. Nope. Good. So, but please in the meantime, enter your questions or I do not know are we allowing people can turn on their microphone to ask but prepare yourself for the question if you have any. I know that for any application that you have you can meet with you and then go through the testing together. And so we can learn about the application that you are working on and then you can learn about accessibility. This is how we build this the accessibility of knowledge in the campus or in our community. But in the meantime, if I want to go for example to previous slide button. Next slide one slide two button slide three button submit button. Required invalid entry a Sunday bird Friday request submit button required invalid entry edit. Apply now form region Sunday bird Friday which of the Sunday bird Friday which of these is not a day edit required invalid entry type of text. At this time, I'm in that form controller that edit box, I have. I see only the edit box, I do not know I don't see the, the label associated with that, but the screen reader. It can determine the label from the coding that behind behind that edit box so when I ask a screen reader what is the label Sunday bird Friday which of these is not a day edit required invalid entry. So it reads to me, the proper the information or label for that. I am looking for that the Spanish text wrapping the top accessible in the features welcome heading level to be a minute of the section of the page just heading level to be a minute. A problem common problem that we see the screen reader is that you know when for the for the multi link all pages for content. If you do not do that proper coding, your screen reader will continue to read the foreign text with English accent. So, but in this case, you know, the the proper Spanish coding or label or line attributes is associated with that. So when I get to the page just heading level to be a minute. When we need accessible university. It's a university fictitious. This is a passion of fiction. This passion is designed to demonstrate a variety of the common. So my Spanish is not good but but I'm pretty sure some of you. If you understand the quality of voice is not greatest, but there are a lot of voices that you can use that I have not used for this profile. It is for one. So, officially we are at the end of the presentation but as I said, I can entertain you for another two three hours. But any questions, any feedback. Any, did I cause more confusion than help. She's usually the case. This is William Washington. I thank you. There was a lot here that was a review for me in particular but it's been a long time since I've had this type of review so it seemed thorough and helpful. So thank you. And with that I'm gonna, I'll jump off. So, thank you. Thank you very much for your question. Well, he said, thank you in the in the chat. Great information. Thank you to all who participated. But we stick around. Maybe they really want to stop recording but I don't know if you think what is needed. It's up to you if you want to go ahead and demo whatever you want to demo, you know, we could continue recording not for two or three hours but eventually I'd like to go have some dinner but I'm happy to stick around and continue recording as long as you want to and then people can go check out the recording. Okay, so there are other things that I can do that we did in the menu. I can navigate to the screen reader to go to the next regions. Heading level one graphic accessible university. Main menu navigation. I am in the main navigation region. So. Show menu keyboard shortcuts button collapsed. About menus of menu. About menu. Enter menu. Now I am in an interactive mode. So until now I was in a kind of discovery mode. But now I'm in the interactive mode. Governance to diversity. Down key. Contact us. Academic. Next menu. And then when I press tap key. Go to the next menu. Visitors for four. Leaving menus made region students engineering award league. So it went to the next focusable element. Virtual PC. Again, it moved. It is very difficult to navigate in a page that you are not familiar with. In interactive mode. Because once you jump from one focusable element to next, you do not know what. Other. If you are missing any critical information that is in between. So. I. Not only me or most screen reader user, they try to stay in a discovery mode or reading mode as much as possible. To make sure that they are not missing any substantial information. So I jumped out of the menu. But immediately I switched to the reading mode to make sure that I can. So I do not miss any information. So from here on, I continue reading. Previous slide, but I'm on the slide. Next slide slide. And then. List of free items like one current slide button. So. Here, for example, is clearly that tells me. The current slide is selected. So, I'm going to click on the second slide. And her list with three items like two current slide button now showing slide to three. You see that music and now showing a slide to have three. These are critical information. If you do not announce that. You know, the dynamic event there, it will be very difficult. And there is for special, when it's a slide is very difficult for me to know that if it has changed. It tells me the slide to is a current slide and earlier it said that is being shown. Slide three button. And then. Another thing that I can show it to you is the 13 columns and five roles. So when we get to the tables. The column header and row header are in really important. Very important. Because once you get to the table. When you get to the data cell. You need to know that the data that you're reading. Are so that we do which column header or row header. So a screen reader will announce the column header. And or row header. If. The designer or the developer has implemented those accessibility features. I am in the table. And then with the screen reader commands that I can navigate in this way and this table. Land row two. It tells me that I'm row two. I go right. 2007 08 CS column two. It tells me this is column two. And then she's what it tells me about this. Yes. And then it says I wrote the, the, the number. I don't remember, don't remember what number it said. 2007 08 and column three. So it was 2007. This was in engineering. 2007 08. I think it for economic. 2007 08 for 2007. So you can easily. Connect these pieces together. You can connect the. Data set with the corresponding column and row header. I can check also for the. For graphics use here. Select a graphic dialogue list one list. A large bronze tactile map with a speaker for audio output. Creative commons license. So these are the graphics used on this page. At least informational graphic. And then these are the labels that we see there. A large bronze tactile map with a speaker for audio output. Writing. All text is really an art. Don't take it, you know, to. Take it seriously. We always recommend. The all text for a graphic should be. Should be written by the author of the content. If it's an instructor. Is a professor. Is a journalist or whatever, whoever is writing that. He or she knows best why he or she used that graphics for on what information. Wants to be conveyed. Needs to be conveyed. So. If you are a content creator. Then think about the old text. It should give the message of the graphic. And then if you are just a web developer. And then if somebody stands you with a graphic. Ask them or have them write the old text for you. And you can help them to how to create that. But really it is important. Because otherwise you will end up with the old text that are not there. The old text that are not there. You can have a picture of the old text. And then just noise in our way. For example, you get. Picture. I mean, just is a picture picture of, you know, building. No, but. Is it, is it meaningful there. So if you think even some pictures, they have. No purpose. No, no. Message to convey. Set the old text for them. So by doing that, the screen reader just ignore them. So they do not even render. Okay. So that is so far. I wanted to talk with you. I can again talk about a lot of other features. Like, you know, switch to other screen reader and then go for more dynamic stuff. But I think for the. Basic accessibility or screen reader testing. It is enough. So I am, I would like to ask again, if you have any question. So we can elaborate a little bit. Any questions we're still down to four, we're down to 14 people. So if you want to just unmute and speak, then that would be fine. Pretty small group. Okay. It's good. Yeah. I need to first. Disable the sharing. Okay. Okay. I think now you are, you can, you can relax. You don't hear the screen reader anymore. So this is the way how we test, you know, before we really dive into a screen reader testing, we do a lot of. Checking about the consistency. About keyboard usage. And then making sure that all those things have been considered. And then done. Really, we do that. Screen reader testing after keyboard testing. We would love to see. That we do not really do the testing at the end of the develop development cycle. We would love to be engaged at the. To be engaged right at the beginning when you are designing. Developing your site, your application. There are some really important decisions that we have to make. Sometimes the technique. Sometimes the interaction mod that we are using. Are not accessible. And then it will take you in a lot of trouble later for fixing that. We usually tell designers. That they are responsible. You know, as developer for accessibility. They cannot just throw some interaction design or model and then throw it at the designer developer and then tell them implement that. Not every design can be effectively made accessible. And so they are some compromises. They have, we have to make some compromise. You know, we all have been talking about. Universal design and so on. But universal design doesn't mean that everything can be effectively as accessible. As is for one group can be, can be made for the other group. We have to sometimes make good in difficult decision. And then make it equally accessible. We see occasionally sometime that mouse user. It is clear, you know, just consider for example, Microsoft Office product, you know, the invention that they had with the ribbon. This is a public information. They know that this is peace of, you know, the most thing that they have ever done that in as far as accessibility, you know, it is accessible. I mean, it was not, but thanks to the many, many years of collaboration that we have with them. So ribbon are mostly accessible. But I would say at the most, they are technically accessible, not functional. If I for every single command, if I have to know that I have to press Alt H followed by R, then G, then for another command, I mean, this is not an accessible mod. Or I have to maybe just for a function like, you know, resend an email. I have to go through at least 26 tab key to get to reach that. Unless I know the, this weird shortcut keys, you know, sometimes three times to reach the keys for combination to get together. This is not an accessibility model. So for many designs for the application that we have, we determined that, you know, if we were involved, if accessibility was taught earlier in the design process, they could save a lot of extra work that has been done later to make it accessible. So the sooner you engage, you know, you consider accessibility the easier. And then I was a cheaper for, for you guys to do it. So we do that accessibility testing. And we would love to do that. But at the same time, we would like to be involved as early as possible. And then we have been collaborating with a lot of people and then we have been collaborating with a lot of on campus team. Unfortunately, I haven't looked into them. I haven't looked into the name of the people who are in the call yet. But if you are not familiar with our office, the work that we do, we would love to meet with you. We would love to work with you on the projects that you have. At the time, you know, accessibility is not required the skill for many people when a developer who are hired on campus. It is desired feature. But many designer developers showed interest in the past years. So we worked with them through these collaboration, as mentioned earlier, we learn about their projects, how it should work. And then they learn about accessibility. So if you are one of them or not comfortable with accessibility, we would love to meet with you, sit with you, and then go through your application and then exchange our accessibility feedback with you. And then hopefully together we can build more accessible university. Thank you. That's one of why you are sharing your screen there. As a bonus for the 12 people who are still left. Just kind of reinforcing the point about sort of the limitations of testing with a screen reader, unless you really are proficient as a screen reader user. But the table that you are reading has column headings and column headings, and those can benefit from an expanded abbreviation. And in fact they are coded for those of you that are HTML people. They are coded with an abbreviation tag, an AVBR tag, with title that spells out what that abbreviation means. So for example, for eco, that could be ecology, or it could be economics, but it actually says in the abbreviation, it's got abbreviation with a title of economics. And so that as you were navigating that, it didn't actually read that. And so somebody might think, well, maybe I've done that incorrectly, maybe it's not coded properly, the screen reader doesn't seem to be supporting it. But in fact screen readers, it's an option within screen readers that is turned off, I think in JAWS by default, and you'd have to go into your configuration to enable that. So, you know, it's so it's hard to tell. Sometimes it can be really misleading unless you are super proficient with screen readers. And so that's where, you know, validating your code, using accessibility checkers, all those things kind of come into play as an overall accessibility strategy. If I may share my screen reader settings here. I'm going to expand some of them Expand some of them. You know what I did, other way. Miscellaneous, open, not muted. Open, zero, miscellaneous. Open, we will drag it. Close, we will one, CL, no say no. Open, gesture, just one, zero, tip one. Zero convenient though they are. And need one, zero, one, service, zero. X, standard X, standard like one. Just to tell you to me how many function, I'm really not, I think if I say the 300 function, I'm not exaggerating. Zero, tip one, zero, one, zero, research it, low research it, plus keyboard. both key one, zero keyboard with those glasses, with one zero voice assistant, both voice aliases, both punctuation, both function, even punctuation, you know? Customized, or... One, customized, it's like a, it's like a pair of the first, rail of text viewer, for their braille, there's hundreds of functions here. Rail, but graphics and symbols, so both, traffic, traffic, one, zero... How to read for example graphics. Say all, both, speech and sound schemes. How to read the different labels. Speech, verbosity, both. Speech, verbosity, level of that. And video verbosity, video verbosity, zero text processing, form, both. Text, text, verbosity, both, web-slash, HTML-slash, web-slash, web-slash, read it, both. Zero, web-slash, HTML-slash, read it, both. I think I haven't, I couldn't expand all of them, but you can see the massive of configuration that they have here, just for this screen, it's huge. And then, and people use it in a different way. And then the abbreviation was a really good example. I mean, yes, since I want to check to make sure that my view is very consistent with visual view, I turn off that abbreviation, abbreviation feature. But that could, for example, confuse the typical developer because, hey, what I am doing wrong here. But this is indeed, this is clearly the feature that you can turn it off or off. Zero. So this also speaks to why you don't want to memorize a hundred keystrokes to use a new application. You've got a lot of cognitive load already, just getting familiar with this, this is essential tool. I mean, this is your livelihood. So you've got to learn all these configuration settings and shortcuts and at least a lot of them, maybe not all of them, but a lot of them. Then if you're using a browser app, you also have to learn all the configurations and shortcuts and so forth to navigate in the browser. And then if you're being asked to use a web-based application with a bunch of new keystrokes to memorize, the cognitive load is just extraordinary. So I hope this tour kind of helps us to appreciate that. Okay. Also for the 12 remaining people as a bonus, I'm going to paste in WebAims article on testing with a screen reader. Okay. This is a... I'm going to... Oh, Peter, I thought you wanted to... I can go off my screen, screen sharing, so you can show them if you want. Okay. Yeah, I just pasted that out. I think we can probably wrap up, but... But I just wanted to share that, that they have a really good resource that includes kind of an overview, but also if you go to that page, then there are links in the menu to tutorials for testing with NVIDIA, JAWS, and VoiceOver. Each has its own tutorial, and that provides just kind of a few of the highlights of using each of those tools, including keyboard shortcuts. So that in combination with the slides that... How do you put together that have sort of, you know, most common keystrokes? And we'll share those slides on the... You'll be able to access it through the events page on our website, along with this recording soon, probably next week we'll have the recording captioned and everything will be up and available on our webinar archives page. So, yeah, so there is a question, is it possible to get a recording or slides from this presentation? Indeed, that if you go to the events page, and Dan, do you still have that link in your clipboard? Did you just paste that in? There's a link from the events page to the archives of the webinars. And on that page, there's a link to each of the webinars in the series, including PowerPoints as well as the video recording. Great, well, thanks, Adi. Then thanks for doing overtime with this presentation. It seems your headset, you're no longer using that. Did you finally run out of battery? You handled that very gracefully. No freaking out. Awesome, well, and thanks to the people that stuck around to the end and hope you'll join us again for the next one in the series. So take care, everybody. Stop recording.