 Okay, okay, it is 1014 I wasted 10 minutes almost nine minutes of everybody's I'm sorry about it and we do the technical if you have technical difficulties and then again for those of you are familiar with the settings. It is very difficult because to have a Mac connected to the zoom and then having multiple speakers and multiple presenters was not good to start hopefully we will see that it goes better when we dive into the presentation. So, before I go into the Mac and the windows presentation windows demo of the screen reader. I need to share some information with you to guys know me how do you rank in. Just wanted to I need to a few seconds to concentrate you know because after so many issues one after another need to concentrate a little bit. So, let's let's start before we dive into a screen reader accessibility we need to check a lot of stuff in advance. So, and then, as I mentioned earlier, the keyboard accessibility is the first thing that we want to do. And then you have seen the presentation of my. We don't have any camera right now. Good. You have seen the presentation of my students that as they were, as they were introducing accessibility testing tools. As mentioned, why am hearing that I'm hearing audio feedback in my headset. So, every single few seconds that I hear. So, it is distracting. Hopefully it gets better. I do not know I hear the feedback on my headset. So, we. Again, it's happens. What's what's happening in the screen. Something is happening is this is repeating the information. Yeah. Anyway, let's let's start one more time. So we start with the keyboard testing. And we identified the some of the issues the accessibility of the screen reader depends on very much on keyboard accessibility. So, as well as also, as we mentioned earlier, using this accessibility testing tool you can get up to a really good condition maybe 30% of the access to a technical accessibility problem or you have to do that a lot of the manual testing code checking until you have their, you know, a reasonable could provide a reasonable experience. So, the thing that I wanted that you probably will be hearing from me throughout this workshop is that we never should use a screen reader to determine the issues we want to use the screen reader to verify or identify or verify the issues that we find and see that how the screen reader behaves. As you will see later screen reader, they are is are really complex application, and they come with the hundreds. I'm not exaggerating hundreds of fine tuning and configuration. And these tools screen reader are made for for end their their end user, not for, you know, for accessibility testing. So depending who is using that what is his or her skill screen reader skill set is under how dependent on what configuration it is and you can get a lot of different results. One thing that I usually hear from screen from the developers is that they say that he doesn't work. Can I add a kind of patch and then find a kind of work around solution for existing problem. No, work around solution or not accessibility solutions work around remain work around solutions so I'm going to record the audio there's a zoom alert that's covering part of the screen. If you go to, you know where to turn off the alert. Yeah, that's it. There you go. Okay. So, when we do that for a testing before really we start with the testing we check as we said that we do that first is with the keyboard testing and then these are the some of the protocol that we try to follow. We look for the consistency of the application. So functional consistency we want to see that they know from one page to another page as long as they are the same domain they look the same. Remember every every user not the only screen user. Do we have some we need some time to familiarize of itself so you do not want to surprise your, your, your user from one page to another page by changing the lens. So we want to look for the look and feel and behavior functions. We want also be consistent in the way how we provide these elements. A typical example to the use here is this, you see that you know in one page. In the form, they ask you, you know, about the gender, and then in one page you see that they use a combo box to select the gender, and then you know the subsequent page you see that sometimes they use radio group for that. So, everyone needs some time to familiarize himself or herself with the with the page. And when we see this consistency inconsistency, it causes problem. So keyboard operability. So, it is really essential we want to make sure that we can navigate inside the page, and then perform all the applicable functions with the keyboard from a to Z, and no cheating no no mouse you so you have to define your business processes for every application. And then you know try to perform there fully with the keyboard. So when you are doing that you need to make sure that you know that you never focus your lose your focus indicator you have to always know where your focus is. And then don't blame your eyes or eyesight that you are getting older or something is wrong with it or you need a bigger monitor when you don't see it and you don't see it. Another important we remember we will be using two term focus indicator and focus management focus indicator which will be focused indicator we refer to that that indicator that that what we call that you see the object that has a focus. We refer that to focus indicator in I think in Google Chrome which is usually a blue box, something like that but focus management is that you know how you handle for the focus. For example when you submit the form where do you set the focus back to do you send it to the top of the page or do you send at the bottom of the page or some other elements. And then if you are a keyboard user you will see that you know that it is extremely important that your man or focus goes to an expected area or except expected element as you want. You will be surprised to see that when you go for example to some of these pages when it is just one single page you update a form, and then your focus is no longer there focus indicator moves travels to the top of the page and then as a keyboard user you have to press and number of the key press to get back to where you left off. In the structure or before that let me mention that the area landmark, our landmark are essential, very essential. For those of you have haven't heard me about area landmark I usually say that this is one of the most simplest things to implement to make it. Your website or application accessible. With the with the least effort of, you know, work. It's very effective. What what are earlier are your landmark. Just consider you come to a page as a sighted person in a in a fraction of second you know that how the page is constructed you can see for example there is a banner on the top you can see there is a navigation on the top or left. Or this footer section. So screen reader user they do not see the page in the way that you see so they see one element at the time, and then that is, and there is no, you have no idea about the surrounding elements, or the relationship between those elements. So, are you landmark, it is a means to provide a semantic information about the, you know, big object or big containers that you are using. Seven predefined are your landmarks main where do you put your main content main content main information is the poor information of your page. There are another, there is another landmark or banner, as the name says that usually is used for to maintain the banner information. And there are content info which is a fancy or ugly name for footer. There are search complimentary and then and so on. You will see that later when we go to website. The first thing that we use is just to see that how the application how the website is constructed so and then all your landmark is the key tool or key means you know to tell us what's happened, or how the pages construct. The next thing that we would like to see that is a heading. Heading is the, again, another accessibility features or another means that we use to, to navigating the page and understand the page. For headings. We want that there as I just mentioned that they want that they are hierarchical meaningful and complete with a complete I mean hierarchical and logical and meaningful. This is clear but with a complete it means that every major section of your page should be covered by heading. So we I see that usually developers they say that hey we are using headings, but then when I ask them does the do these headings they provide an outline of the entire page. Then we realize that it is not the case. So, once you start using heading for your content, make sure that you every major section of your page, at least major section they get a proper heading. So the other stuff that you want to look for. If you want to continue others, someone want to try to fix with the, somebody covering the screen again, which is good. The zoom meeting toolbar. Trying to zoom out again. Was that the score should the screen sharing toolbars bottom of the screen. We're trying to use a mouse to move it. Okay. Do you want me to give put connected to the front. There we go. Okay. Over there. No, you want to. Other important information stuff that we want to consider is a grouping of relevant information you probably have seen or use every using that order and on order or definition please are extremely important to group our tools to have accessibility that way you skin reader user they know that they that they are entering or they are facing with the related information if this list. If you try to mimic your list without using the list markup. You will not, you will never know that they are part of the same group. So the only way that you can convey the relationship between element is list, either of those list they work. For the graphic, we want to make sure that the informational graphic, not a stylistic graphic, you are not saying that you should not use a stylist graphic you can use it but you know, of course, you know, a lot of stylistic graphic should be done through CSS but if you decide to have some graphic inside the page, then, if you need to make sure that it is not rendered by screen reader or do you do that by doing that all equal code code setting the value to know what informational graphic you need to provide meaningful information and then I said you're writing an alt text for images, it is an art. And then I guess this afternoon we have I believe that we have a session on that you might want to participate in it. Forms are again I would say one of the complicated component of the web for accessibility and then when we said a form, a form element we refer to text box combo box radio check boxes buttons menus. There's a lot of maybe not menus but the text area input field, they are considered as a form elements, or they are, and then interacting with them can be quite challenging. There are very well defined accessibility guidelines for how to make forms accessible, and as long as you follow them, you're fine. What is that testing for verification or error handling or wanting an error handling that is a piece that I see that usually is neglected. The user like any user they can make mistake, or they cannot follow the instruction properly. And the error could happen, but how we inform them how we lead them help them to identify the issue resolve it this is also another important thing to consider. I was a screen reader. The web aim has published. I think they're, I think annually they provide some statistics about their screen reader usage they make it a kind of public survey. And then you, you will have a calendar calendar 33 items 10 of you will see the too many things are talking to you. And you, you will receive the slide and you, and there is a link to their findings. But the windows environment we have narrator, jazz and NVIDIA, and we are considering NVIDIA today for demo. In the Mac environment we have voice over which is from from Apple, and this is well integrated with the OS. And then for iOS, we have also voice over. And then for the Android talk back there are some other screen reader that I'm really not familiar on not using them, but these are the major screen reader for different operating systems. So one of the most difficult part of this community interaction that you will be seeing is this, what I'm saying we call that linearization or visualization of the content. So when you go to, as a screen reader, when you go to a page, you see the elements you see there's a focusable non focusable element, static text next to no links next to graphic next to you can see all those components together. What for screen reader as I mentioned earlier we see only one element at the time we see one piece of text, for example at the time we see one button at the time we see one menu or menu item at the time. And then, when you go to a new page that you are not familiar, so you do not know how the pages constructed yet you are your landmark tells you the major component of the page, but at the end you know you want to go to the inside and then interact with it and then when you go there and you do not, you see the text you see links you see four elements and you have to understand and read it for example you go to your bank. And then you want to check your transactions when you go there, there are some, a lot of interactions or a lot of navigation things that you have to do to get to the body of the page, but once you're there and you have to, for example, make a transfer. You need to interact with those elements you need to understand what there is a form you need to understand there is, you know, no form elements, for example, from what account, what account you want to transfer how much what date and so on. So understanding all these elements, sometimes is understanding the overall the task that it is in front of you requires you to navigate. So, navigate in the page and read everything. And then you do not see their visual relationship. So, screen reader, usually they provide a virtual view of the page, it means that screen reader can see and read everything. In other words, everything is linearized from left to right top to bottom. And then you read element by element. For example, you go from piece of text to the next graphic from that graphic, you go to, you know, for example, radio group or text box or whatever it is in your way, or however, it appears in the DOM document object model. So, that is the most difficult part of the screen reader that is difficult to understand for non native blind user or a screen reader user. So, we will look into that in both Mac and then with Mac and NVIDIA, and then hopefully by end of the workshop you, it becomes a little clear. And then we go to a page, to a new page that we do not know how it is constructed. And once we get to the body of the page, then we have to do the page discovery. So, we have to read the page from top to bottom sometime to understand that, oh, these are the pieces that we have to are in this page and these are the functions that they offer. So usually, it is one time thing that we do that to familiarize ourself with page. So, it is, I would say the most difficult part of the screen reader interaction is this navigation and understanding the page. But once you are familiar with the page, then it will be a lot easier. I think I, yeah, that mentioned that so one thing that I need us to mention that when we are in a when the page is a linearized or virtualized that we are reading the page. In the screen reader come here to help. Sometimes you really do not want to read from upper left corner to the bottom right corner. You, you know that the page has, for example, heading and you want to go to the next heading. How do you find it. So, in order to do it, first you need to be in virtualized mode in this linearized mode. In VDA we call that browse mode. And then I guess in Mac we said that quick nav are on. So, they use the, you know, different vocabulary. So we did the generic term that we use in our shop here, we call that in a reading mode. So when you are in a reading mode of the page. So it's really there are watching for your case rocks anything that you press screen reader. US has new window can see options button menu window system. Quiet. Showing those one to 11. Yeah. So, a quick question in the chat is what is the word being synons to use synons for linearized. I think she's heard to virtualize virtualize yeah. So, again, in the screen in VDA they call that browse mode in jobs they call that virtual mode. And then in, I think in Mac, we call that when on. But again, let's let's use reading mode. So in the reading mode screen reader are watching for anything that you press. And then, and then they considered as a screen reader command for example, when you type letter age screen most screen reader for them they see that as a, oh, as a command for finding the next heading. And then they move your focus to the next heading. If you, for example, type letter T, T for table. So they check for the next table, or if you type letter. I will say that it is different in VDA, for example, if you type letter F, F for form control, it takes you to the next form control. So, but remember, you are in reading mode when you get to that form, but you have to interact with the form. So, if, if, for example, in the form says that you know it is an input field, input field, and then ask you for your name. As soon as you type. Now my name is honey, as soon as I type age, it considered that age, again as the command. So, I won't be able to enter my name, unless I turn off that virtual mode or reading mode until the screen. And here, I am no longer in a read, I don't want to be in a reading mode, I want to interact with that form. From then you have to switch your screen reader mode from reading to interaction mode. So that that way screen reader no longer steals the key that you press. So it is everything that you type goes directly to the application. That's why what that you can see that but again we see that I just wanted to, that you get some idea about that and form interaction mode versus reading mode. And then, again, we cannot be in a reading mode. And then at the same time, interact effectively, we can do that limited interaction for example select the checkbox or radio box. Definitely for form controls that requires typing like edit or text area, you definitely have to be zoomed out US hasn't the other mode. Okay, so we will be checking this stuff. I buy this this slide so that that is the key that every developer wants to know that if they can use the screen reader for testing and let's read that together. Yes. But remember this is not designed for the accessibility testing. It is designed to verify the issue, we can do that. Verified issue, not to determine the issue. Not for keyboard operability because the security there they they provide additional functionality that keyboard user won't have. And then for those of you are familiar with security there sometimes they have, since they are made for the end user they try to compensate for the lack of accessibility features so they have some algorithm to guess to do some guessing for the missing tools or, and then Jaws is very famous for that. But MVDA usually doesn't do that. Bottom line, don't use it unless you really know what you are doing. Okay. Now, we need to go to our Mac and walk you through the some of this stuff. And I hope that things goes well here. Okay, turn off. We need that again. Give me a few seconds. Zoom.us Safari, you view options button, you are viewing how you range and screen. View options. Can you just stop this one right? Zoom.us. Can you just stop this one? Desktop 11 item selected. You are currently on a switch. Live transcription closed captioning has been enabled press cmd plus tilde to return to the meeting controls. Zoom.us. Zoom meeting window. Notes 13 of desktop 11 item selected. You are currently on you have started screen share. Content is empty. And Is it okay. Participants can now say zoom, zoom. Safari. Okay, we are getting now to MAC and then I voice over utility window. Voice over utility. I hope you have followed the instruction that we sent you. So, I am expecting by now everybody has configured the Mac, the voiceover to their desire, the speed, rate, and other attributes. For Mac user, I need a confirmation that you guys are running voiceover right now. So, if you haven't done that, I can share with you, since you can go through that quickly, but we are not doing technical support. Actually, we need technical support here to resolve some of the issues. So, Command F5 starts voiceover and then there are some basic things that you should have done that by now. We are going to then turn on the full keyboard support. We have the instruction in the document, in the email that we sent it to you, and I hope you had the chance to do it. By default, Mac doesn't support full keyboard support. It doesn't do that. It does only, I guess, for links, but if you wanted to do that for every focusable element, you have to check that settings. So, refer to that email that we sent it to you, and then an oldest Safari that is also an accessibility setting that needs to be turned on. So, also refer to the instruction. And remember what we are doing with voiceover here. It is really, I'm just trying to help you to understand how screen reader or specifically voiceover is working. I have seen a lot of developers that are using Mac, and then they try to test with the screen reader, but they are not utilizing it properly, or they are a little confused, or they get overwhelmed with the information that they receive, or they are not shared about their findings. So, we will be showing only voiceover inside the browser, which we use Safari for this case, but to make sure that the instruction was correct, I would like that you try to do some basic adjustment. So, the voiceover command, voiceover modifier key, by default, is control and option. And if you followed our instruction, hopefully you have enabled the caps lock to be also your modifier too. So, when we say modifier, it means that we have to hold down those keys, or the modifier key, and press a command, or press another key to perform a voiceover command. And for example, you know, I am pressing voiceover, I mean, in this, during this conversation, I refer to this modifier, or voiceover modifier key as a vo, vo, for Victor, or Oscar. So, vo means control and option. And then I am pressing vo and key, starting keyboard help, type keys to hear their names, hold down the voiceover keys while typing to hear voiceover commands, press the escape key at the top left corner of the keyboard to stop help. So, I tend to slow down my screen later. Anyone finds this is too slow or too fast, slow probably not. For those of you, please, somebody tells me it is fast or too slow. So, let me control option shift, right arrow, right arrow, open the next speech attribute guide, open the next speech attribute guide. Do you hear, is it loud enough? Fast enough, slow enough? Okay. I don't hear anything. So, that's a good chat. Good chat. Wonderful. Thank you, Viva. Then we go with this one. But if we want to change it, I am pressing escape, starting keyboard help. Remember, command F5 starts voiceover. The shut up key or the key that muses voiceover is the control key. Just press control key once. And good luck. Sometimes voiceover doesn't stop. But we don't have very much control over it. But mostly, it stops voiceover immediately. So, control key, when it becomes too chatty, press control key to stop it. Now, I want to go to some of the basic settings that we shared with you. For example, changing the speed. So, the command that we are using to change that, there are many ways to do it. But if you want to do that with the keyboard, it is voiceover or vo plus command plus also shift, right? Voice, automatically select based online braille table, England intonation, closing intonation, command is vo command shift, you hold down them. And now I think you need to use your toes to okay, that is bad, voiceover is really bad for a keyboard, unless you have very functional fingers. So, vo plus command plus shift, I hold down and I use right row key intonation 50%. It tells me intonation 50%. I don't care for intonation at this time. Braille table, English, not relevant voice automatically select based on language. This is about the voice, what kind of voice I want to use. Most of you probably are, if you haven't changed the default, are using Alex rate 40%. Consider is that rate is 40%. And I am who is still holding these four keys that I mentioned that vo command and shift. And now I use a row up 45%. You probably hear and see that it is changing 50%, 55%, 60%, 65%, 75%, 75%, 85%, 90%. Okay, I get that. And so on. 75%, 65%. I am pressing arrow down 55%, 50%, 45%, 40%. Okay, I guess I don't want to come lower than this because otherwise I fall asleep. Okay. And then again, if I want to change other options for voice, from voice over pitch 50%, I press right through key while I was holding all those for the keys, vo command and shift volume 35% volume. And then it's the next option. I press up arrow key while I'm holding the other modifier 40%, 45%, 50%, 45%. 45% says good. So I released my those fingers. So I need to rest. My fingers need to rest. Okay, these are the stuff, the basic stuff that you can adjust it and then change it to a reasonable speed, intonation pitch and then and so on. The other place that you need to check that is utility, voice over utility has tons of options. Zoom.yout safari finder voice over utility here. One of my recommendations is that please, please do not change anything if you do not understand that because it can take you really to a place that would be very difficult to debug it. I don't find out what is wrong here. Note again that this is made for the script for the end user and end user, they have different needs and they change that based on their needs. If you change a lot of stuff here, then you when you go for the user for accessibility testing or checking, you might get different result. So again, there are a lot of options here that they could help end user, but it doesn't mean that everybody use that settings. A setting that it is good, for example, for my colleague might not be necessarily good for me because I am using in a different way in a different environment with different application. So it is important that you do not change the stuff unless you really know the consequence of it. So when you go to this, the following utility category is table. So you see the category here, I press arrow down, quit nav off, verbosity, and then speech, navigation, web, sound, it is a little bit slow, but okay. So with the general, you get a lot of Oh, I forgot to mention that when I am navigating, when I was here, I use just arrow key. Remember the most important thing is that if you are a keyboard user, it is your safe. If you are just mouse user, it will be some learning curve that you need to use keyboard. Yes, voiceover or Mac offers a lot of meaningless shortcut keys. But if you love Mac so much, then I think that is something that comes with it. So you have to learn also those ugly shortcut keys that sometimes you need to use your toes or do that handstand and a lot of acrobatic stuff to perform a function. When to navigate to the next element, I use usually voiceover modifier, I mean, Vogue command, Vogue modifier, which is in my case, it is command and option, and I press right through key. Speak the following greeting after login. You are currently on a text element. Welcome to Mac OS, display welcome by login keys to use as the voiceover or control option or capsule. Along and then I use the same keys to use as display what welcome to Mac. Speak the following utility categories, table, general, selected, and here our current the recommendation is that to use the default keys Mac command or Mac shortcut keys as much as possible. Is it not shortcut keys? But I just make sure that I press arrow down verbosity. When I'm verbosity, if I want to go to see the details, I press Vogue and go right. Speech, selected, tab, one of five, Braille, tab, text, tab, announcements, tab, hints, tab, five of five, default speech verbosity, you are currently on a text element, medium default speech verbosity, pop up button. So it depends on, you know, that is a place that you want to check that. I recommend that you do not disable hint. As a basic user, hint is the information that comes at the later time. So it reads, for example, the value of the element that I am, it types of the element. And then, you know, the instruction that it usually announces, it comes usually as last piece of the information that we hear. And we refer to that usually as a hint. So you can disable hint at some stage when you are more comfortable. But for if you are testing, you know, if you are a developer and you want to make sure that you get the right instruction for the elements that you are developing, so you probably want to listen to it to make sure that the instruction matches the stuff that you are expecting. Default speech verbosity. So there are a lot of hundreds of functions here. Hints, tab, five of five, announcements, tab, text, tab, three of five, text tab, selected, and punctuation. So you can specify the punctuation level. So do you want that it reads every time when it runs in the comma or the punctuation, any punctuation? They have some pre-default to pre-defined modes. Some, punctuate, some, punctuate, menu, check, none. You are customized at all. You are checkmark, some, you are. So you can even customize it and consider that, you know, for example, when you get to a dollar sign, do you want it reads a dollar sign or not? So a lot of fine-tuning. But again, do not change it unless you really know the consequences of that. Some punctuation, pop-up button. Because I didn't want to change it. Go back. Hints, tab, and now text, selected, and hints, tab, fuck, selected. Talk about the hint. Let me show it to you. Speak instructions for using the item in the voiceover cursor, check, checkbox. So you are current. That is, I mean, at this time I said yes, because, you know, it is important to me. When an item has a help tag, you speak help. When an item has a help tag, pop-up button. Choose how to announce an item's help tag. So then you will see here, menu, do nothing, speak notification, checkmark, speak help, do nothing, checkmark, speak, and so on. Speak help. And there are some settings for some event. If you can't even have some audio sounds with it. When speaking hints. So when it works, for example, to a specific interaction, it can create the sound. Announcements, text, rail, tab, speech, tab, utility categories, table, speech, navigation, viewer, speech, voices, selected, tab, one of two, pronunciation, tab, new speech, customize language, list, table. You are currently on a tab, add language, customize language, list, table. Okay. You are currently on a table. To enter this table, press in customize language, list, table, English, language specific, doge. Spanish. Doge, language, English. So actually, I didn't have Spanish. I had English and German, but for, I didn't have the Spanish yet. But last night, I realized that for the page that we are going to demo, we have some Spanish text. So I saw that it was not reading, switching to Spanish. But then I realized that oops, because Spanish language was not installed. So for those developer who are using multi-lingual content. So if you are testing that, you need to make sure that in your voiceover setting, you install those language or you check those languages. Otherwise, voiceover will not automatically switch those languages. Default. You are currently on a cell inside of a table out of customized Latin mute pronounceable voiceover utility. So you are currently on a toolbar, voiceover utility, navigation, web, utility categories, table, web, selected, navigation, general, tab, web, rotor, tab, three of three. This is becoming a little more difficult. The browser navigate web pages by you are currently on a selected radio button, one of two. Okay. Please do not change it. Let's go with the dumb. Grouping items when navigating web tables, you are currently on a text element group items within. So this is a little difficult to topic. I will discuss it when we are on a page. So and one thing that I wanted to make sure that we do not change it. Web, rotor, tab, three of three general, not utility categories, tape, sound, visuals, commanders, Braille, you are currently activities, voiceover recognition, voiceover recognition here using on device intelligence, your image descriptions, uncheck checkbox. Okay. I think most of you, many companies have started doing that, you know, recognizing images and then give you some alt text. Do not rely on their recognition. If you have an image or informational graphic, you need to provide meaningful instruction. Otherwise, the voiceover will come up with something, a statue or some generic information in the best case. And these are not acceptable as a meaningful alt text. Okay. Make sure that you don't check it. Zoom safari, launch meeting, zoom web content, launch meeting, zoom web, vertical splitter collapsed on left. You are currently on a vertical splitter to start and launch me close tab. You are currently on a vertical splitter success, accessible university web content. You are currently on web content. Success, accessible university page has heading level one. Now show in slide one. This is the page that we have been using throughout the day today. It was so far, I think, but my students, I guess you guys use this, this page, right? For them. Okay. Yeah. And then, so you are familiar with that. This is a page that Therial has created. And then, so thankful for having this page because it has an inaccessible and accessible version. They look visually almost identical. But one of them has almost zero accessibility features. And this page that I am on has full accessibility features. So it doesn't make sense if I go and check the inaccessible version. I want to show you how voiceover handles accessibility features. So as I told you here, robot with a friendly face assembled with various scraps of when we come to a page, consider I'm not familiar with this page. I want to know that what has the major component of this page. So landmark comes here to help. But for those of you who are familiar with Windows and then screen reader on Windows, you know that this is very, very different in Mac. Here in voiceover, we have different way of looking into the accessibility component. In this case, you know, I was looking for landmark. The easiest way is to, for you or visual, I do that for you. I think this is a page after submission, right? Yeah, I think so. You are currently on the text element. Okay. So I was surprised to not see the landmark. Okay, this is a page. Images menu, text fields, auto web spot, checkboxes menu, buttons menu, no items in web landmarks menu. Okay. What is this? This is a way that you can see a lot of accessibility features in quickly. Tables landmarks menu. I don't know exactly what the tool bar. You are currently on a tool bar to interact with the items on this tool bar. Press control, option shift. I am pressing vocay, starting keyboard help, type keys to hear their names, hold down the control. I want to see that what they really call that. I am pressing vocay. Option U, uniform, rotor, brings up a menu for selecting items found in escape, starting keyboard help. It's called, they call that rotor. I didn't expect that they would call that rotor. So you press the rotor command landmarks menu. And then although I'm pressing right arrow key to see the different different accessibility component that I have selected in my vocay utility web settings. The list of their stuff, buttons menu, checkboxes. You can select these elements in your vocay utility web section. Somebody might not care for, for example, buttons. So they can disable it and then it will not show up here. But for me as a person who will be testing for accessibility most of my time, so I would like to see that all those elements. So I enable most stuff here. So here what I'm trying to say that you, that is because that rotor and then rotor are a collection of accessibility features that that I can quickly see if they are present in my page or not. So I press right arrow key, auto web spots menu, text fields menu. And then if I want to see that if I have any text, any element on the page, I press arrow down, name required, required edit text, email required, required city, edit text, state slash province, edit text. The beauty of this rotor is this, that you not only can get an overview of the elements that you have on the page, you can easily, you can use this tool also to navigate to that section. For example, if I want here, country, state slash province, city, edit text. City, I can press enter, city, edit text. And it moves me directly to that city section, to city field. So back to rotor, text fields menu. As you notice that it remembers your last position or last rotor that you have selected, I press right arrow key, images menu. And then I arrow down, accessible university image, robot with a friendly face, assembled with various scripts. Just want to say that it shows me the stuff. But what I wanted again, I wanted to know that I got a little distracted because I realized that I didn't mention the rotor to you. I wanted to see that how the page is constructed. So the first thing that we look at the screen reader is the landmark. Text object buttons, no item landmarks menu. Landmark. I press arrow down. Banner. It's a banner. Main menu navigation. Main. Main. Content information. That's just perfect score. So I give in an A plus to that. So it has all those main regions that I needed. Then if I am interested, for example, to go to main. Main. I press enter. Heading level two, featured story slide show. My focus is right at the beginning of the main region. Back to the rotor again. Landmarks menu. I want to see that there. Learned a little bit about the content of the page. So I look for the heading. Tables met form page headings menu. I arrow down. Heading level one, accessible university image. Oh, the person who created this page. He knows about accessibility. I'm joking. Heading level two, featured story slide show. Heading level two, followed by heading level one, structure. Heading level two, welcome. Heading level two. Bienvenido. And you notice that heading love. Heading level two. Bienvenido. It switched automatically to a Spanish different voice, but we will look into that. Heading level two. Can you spot the barriers? Heading level two. Are you enrollment trends? And so on. So I use this usually as an outline of the content that I am facing. I am dealing with. So that is the power of the heading. So while I am here, let's see that how it automatically switches to the language after I enable the Spanish in my web. I don't know one of the settings heading levels heading level two, heading level two, welcome. Heading level two. Bienvenido. Okay, I press enter. Heading level two. Bienvenido. So you are currently on heading level two. I go left. So accessible university. So I am now going to then I press a wall right heading level two. Bienvenido. You are currently on heading level two. That's the instruction. Accessible universidad. Ua, es una universidad ficticia y esta es su página de ficción. Esta página está diseñada para demos. So my Spanish is not that good, but I guess you guys noticed that it switched to Spanish. And that is thanks to the language attribute that Teri all included in that Spanish. This page. Yeah. Okay. What are we doing with the time? 11.15. Okay. So we have already gone over there. So we have some. I so let's handle the with the form. One important thing I'm trying to start, but I do not know how it ends. I have never explained that in a webinar settings. It's switching between interactive mode and then reading mode. So if you notice that I am just using heading level two. Can this page page visited see a blank period. So heading level two. You enrollment trends reading the text. But if I want to interact with the page name required required edit text with auto fill H H name F 12 key button. You are currently on a button to press this button dot email required. So you are currently on a taxed out. I set my voice over. So when I tap to form control, it automatically goes into the interaction mode. But if it doesn't, if you first, you know, you notice that it is not typing in, for example, text field, then you need to change the reading of the mode. The key that are changing the that mode usually happens because they call that quick nav nav for navigation. I am pressing left and right arrow key together. quick nav quick nav off quick nav off quick nav on quick nav on when I am quick and nav on name required email required. Consider what's happened when I'm quick nav on heading level three security question. You see that as soon as a type letter H screen reader or voiceover stole my age and then interpreted as a command and moved me to the next heading. So in order for me to interact with the form, I have to make sure that I am in my quick nav is off off means, you know, normal, but quick nav on it means you are in the reading mode. So that is really an important concept that that I would like that everybody knows that. And and and if it's not clear, then, you know, study and if you want, you know, sometime we can meet and then I would like to help you to make it a little more clear to you. But again, in order to interact with some elements like edit box text box that you have to type, you definitely need to be in the quick nav off. Otherwise, it will not type quick nav off show sidebar button tab root picker go back menu button show show sidebar tab root picker go back menu button show the page or we should take a break. Annemarie, we are a little over the time because of the technical issues that we had. I think we we discussed some of the basic accessibility of voiceover how to use voiceover here. What do you think about taking a 10 minutes break and come back for NVDA, which would be much easier. You're muted. Okay, sounds great to me. Howdy. Okay. Hey, guys. For those of you who are interested to see also the NVDA, which is free screen reader for Windows. Please come back in 10 minutes. And then it will be fun. We will be using Chrome and NVDA or Firefox. Thank you, everyone. Hold on and then sorry for the technical issues that we have. But sometimes it is out of our control. When the device decides to go in a strike, then we can't change it. Thank you. And then talk to you shortly. Bye-bye. For now. This meeting is being recorded alert. Good morning again. Welcome to our NVDA voice, NVDA screen reader section. We will continue with our workshop. For those of you who joined us right now, we covered earlier with some difficulty, the voiceover section. But now we are going to Windows and then NVDA. We decided to use NVDA because this is a kind of vanilla screen reader program, which is free. And then it doesn't do that. It doesn't use this guessing algorithm like JAWS does. So that way you get a more straightforward answer or a more accurate result than JAWS. Again, if you have followed the instruction that we sent it to you, by now I assume you are sitting at your Windows computer. NVDA is running. And then let me get another feedback. How many of you are running NVDA right now? Or are you planning to follow as we go? You have one hand up? Two? More, please. It's easily an opportunity for you to start your NVDA and then follow along that you can see some of this problem or some of this configuration in action. Again, I assume that you have installed. So the first thing that we did in voiceover section is how to adjust the voice. And then the NVDA setting that it is comfortable, we choose the right voice, we choose the right rate and intonation and other features. By default, NVDA comes with a voice that it is very difficult to understand. It's not very sophisticated, but you have some free voices that you can use. And then I guess we have sent the instruction how to change it. I am using for some reason. I am using paid voice, which is also welcome to purchase it. I think last time I paid for that, this was $64 for one-time fee, but it gives you a lot more voices. So I would like to take you first to the NVDA settings, like voiceover. You can have caps lock as an additional modifier key. By default, it's the insert key. So having a full keyboard is really important or very handy if you have it. If you do not have a keypad or a dedicated insert key, it would be very difficult to use NVDA. Note that some of these commands that we have to use, they are on the left side, some of them on the right side. So it is good to have one modifier on each side. So you can handle these commands effectively. And as I mentioned earlier, you don't have to do that at handstand to trigger a function. In my case, in my computer, I have set the caps lock to be my modifier too. So I am going to the NVDA settings. Is your screen first? Good idea. Select the wind more drop down button. Accept participants can now see your screen. Zoom meeting. Accessible. Zoom meet. Accessible. Okay. I press caps lock N for NVDA. NVDA menu. Well, I hope that you have seen that before. Preferences of menu P. So preferences is where you see the options. Settings. S. And settings is the one most of those voiceover NVDA settings are. NVDA settings. General normal configuration dialogue. I am pressing tab in this setting. General property page. NVDA language. Requires restart. Save configuration. Probably you want to set it. Show exit options when exiting NVDA. Again, if you are a frequent user, you probably want that, you know, it silently quits and doesn't ask you every time for confirmation. Play sounds when starting or exiting NVDA. There is some general function. So logging level, probably you want to make sure. I think for those of you who are not a regular community user, you do not want to set it on. But it makes sense that I, for people like myself who we use all the time. So we set it on. Let's go to the list of the category of settings. Speech is important. Speech property page. Synthesizer grouping. Synthesizer edit read only multi-lineout plus S windows one core voices. We use one core voices. I thought we are using the other one, but one core, this is a free one. And this is good one. And if I want to change it. Change. Select synthesizer dialogue. Synthesizer. Combo box windows one core voices. No speech. Window, Microsoft's ESpeakNG. Code factory vocalizer. Code factory eloquence. That is a voice that I told you. This is a paid one. I used that. It is a code factory eloquence. Code factory eloquence. And then a code factory. Code factory vocalizer. Vocalizer has more pleasant sounds or voices. Yeah, I press it and select it. Voices for NVDA dialogue. You need to register your trial or permanent license before being. So the problem is that they may evenize this paid secure desktop lands. Synthesizer error dialogue could not load top. Okay. Select sent the top synthesizer code factory. But these micro windows what no speech windows one core. The problem was that, you know, for since this is a paid one, the code that I had is not it's not working. Once in a while, they they reset the code and then I have to enter. I don't have the code handy to enable that. But one one core is a good one to choose NVDA settings change voice combo box Microsoft David collapsed out plus be then you can use the different voices, you know, but Microsoft Sierra Microsoft mark Microsoft Microsoft David. I'm using it up and down to select it. So that is I understand this voice better than the others. Great slider 50 out plus R. I open down 51 52 50 54 page up 64 74 84 94 100 98 88 78 I press page down 68 56 57 54 and down 53 50 51 50. So let's go 50 a tab rate boost checkbox not checked out plus T how we don't want to touch it for slider 50 out plus P that here again if I change the pitch 60 70 evening 90 it's become more scary scary way 70 60 50 play with it and then find a good adjustment really the 50 is not I usually set that on 50 but I am realizing that not everybody hears in the same way that I hear. So change it to whatever setting that you prefer volume slider 100 out plus I can change out the volume for from NVDA here to 90 80 70 80 I go to 100 automatic language switching when supported checkbox check. So this is another feature that I say that you know for example if you are testing if you set this one to off even though the page where you have the proper lang attribute it is not switch. So that's why I think it makes more sense that I repeat my recommendation do not change these settings unless really you know what you are doing automatic dialect switching when supported punctuation slash symbol level like voiceover it has also punctuation level most so all some none okay it doesn't have customization but you know voiceover had customization for that but some most some most I usually use most trust voices language when processing characters and symbols checkbox checked I have no idea what it is include unicode consortium capital pitch change percentage and it's elected so how again a lot of fine tuning I don't think we need to go through all of them but see the other options yeah auto pitch rate boost rate vote synthesize categories list speech two of 13 braille three of their braille is not relevant to you guys vision four of 13 vision see that what we have in a vision vision property page configure visual aids visual highlight grouping enable highlighting checkbox have checked out plusy for example it helps you when you are going through the voice or through the nvda boy browsing with it so it highlights the area that you are going through highlight system focus checkbox not checked out plusy highlight navigator object checkbox not check out highlight browse mode cursor checkbox check out plus so again these are some visual aid and I guess the only thing that I changed that here highlight system focused enable highlighting checkbox enable highlight here I checked that so when I move on the page people can see where I am when I'm not in a when I'm in a browse mode in a reading category keyboard five of 13 keyboard keyboard property page keyboard layout combo box laptop collapsed alt plus k okay desktop okay the desktop select nvda modifier keys list caps lock checkbox check that is also another place that you can could come come and then see that you know to check their caps lock to be to add it to your modifier keep categories list now six of their review cursor seven of 13 input composition again there was a lot of setting I don't want that you spend too much on that but let's go and okay that cancel but okay accessible university demos another thing that you want to know that is you saw that in voiceover we have we call that what you got the voiceover panel caption panel that practically whatever voiceover reads you can see in that box because again caption panel here they call it in the slide have different name for it so if you want to see what voice what nvda says and then it is sometimes too much information you can go and nvda met preferences submenu tool submenu view log beat speech viewer they call that the speech viewer so when I check accessible university demo side dash accessible version m dash mausoleum I stop it so you see all the information that is spoken in that speech viewer okay so I am hearing from my student that sometimes it is in our way and we cannot see that I do not know how much you can move it around can we move it around yes and we show speech viewer on startup checkbox not check out plus s and so bookmark accessible university again this is good for the beginner because you can see what voiceover says sometimes you again you see that a lot of verbiage then processing that audibly it is difficult so you might want read and then make sure and then sometimes even you can see that for example you have sentences you have some aria labels that are merged with the other labels and you see that the text are running into each other so it helps you to see that maybe I use a comma to separate them or put a period to separate those texts okay now show speech viewer on startup show speech viewer on startup checkbox not check out plus s dismiss pass and show speech viewer accessible university demos now now here with nvda it is very different from very different from voiceover the way how voice nvda handles that have renders information we call that flat view so it renders everything that we see that we didn't have time in nvda in voiceover to see that how we handle for example tables so while nvda gives you a very flat view of the information from the DOM voiceover give you a top level access on the objects for example you can see everything there but you do not see the details of some of those elements for example if you have a table you will see that there is a table for example of a 10 row or five column but in order to interact with it in voiceover you have to press a command you know to get into the table and be able to see the content of the table or you have a toolbar you see there is a toolbar but you do not see the items in a toolbar until you decide to go and yes you said yes I want to explore the items in toolbar in nvda and jobs you see everything exposed so you see the toolbar along with the items in it you see the table along with all the column and rows and then data cells at the same time so somewhat it is easier you will be dealing with more context content here but these are immediately available so people have their preferences I grew up with windows view I am still more comfortable with windows view than voiceover where we have to expose every table as we need or when we need that so it is a little more work main menu navigation when we are browsing a page the first thing that we did that in voiceover was checking for the landmark here the shortcut keys are easier we don't have to do that so many press so many keys and most commands they involve insert key or insert key or yeah I'm pressing insert key and f7 that is a really one of the keys that you have to remember elements list dialogue tree view students engineering award one of seven levels elements list dial type colon grouping links radio button check out this panel it allows me to see the headings radio headings form fields radio buttons radio buttons landmarks radio check out plus d so when I switch to landmark it is something like a rotor but you know a little more simplified than the other one so tree view then I can see same information main menu semi navigation banner one of five levels zero started banner main menu semi navigation two of five levels zero main three of five levels zero apply now semi form four of five levels your content info five of five levels okay so so same audio landmark that we sell in the mac we see that here so and then if I need to switch to one of them a block main three of five for example main I press enter key main landmark in my focus goes right there do you see the visual there yeah you see the little browse cursor that's good so everybody can follow that where I am so the beauty again beauty of having this accessibility feature is not just to get to give you an idea how the page is constructed or the content is constructed it allows you also to navigate to it quickly so the next thing that we do checking for the content same shortcut key insert f7 elements list dialogue tree view but we choose this time heading type colon grouping landmarks radio but headings radio button check out plus h I press tab key to go to the section level one featured story slideshow level zero accessible university expanded one of one level one featured story slideshow one of six welcome bienvenido three of six level one so it did not switch the language maybe one core does not have that feature Spanish version bienvenido heading left index heading level two bienvenido addressable university adabria parenthesis it does not switch to the language probably I haven't installed a Spanish language for for nvda I have done for the other computer at home but not here so if we had that language that the Spanish support for for one core it would have done it have switched that but let me say that ES speak which is the default speaker at the default engine it has Spanish let me switch that menu preferences settings and speech to speak change selects he speak engine nvda settings don't work there speech okay so if I go to change the the language he speaks selected and he's selected and he unselected variant max voice version inflect volume volume set voice version voice ffz and voice fn if voice friend voice friend voice friend channel if you say these are the language at all language at the test yeah it's not showing on the screen you're going to select it for you yeah it's somewhat excited uh panel it's on english america eh english american okay english left correct american right现在 university level side having left me now go to navigate to the Spanish text main landmark feature welcome helping me in Ben Madel some sort ofLet me now go to navigate you guys at opening about those topics Sounds, sounds Spanish to me, but as I said, the quality of this, the default voice is so bad that this is very difficult. So if you are dealing with the multi-language content, you want to use it in VDA, you probably want to upgrade to a more better voice. So let me go back and change it to that one port again. It's 155, by the way. 155? Okay. So. Okay. So, thank you for that. Let me just use this. Okay, back to English. I don't know what didn't sound like it. Same thing that we had for voiceover, there's a lot of screen reader commands here that can help me to go to different, to help with the navigation for use of the headings. I can't even when I'm in text. I can just press letter H. Can you spot the barriers? Take me to the next heading. Oh, enrollment trends. If I want to go to the next table, I first let us T. Oh, enrollment trends table with six rows and 13 columns. And then navigating the table. Not in a table. Not in a take 2000, the year. Not in a table rows. Caption. Oh, enrollment trends. Not in a table cell. Not in a table blank. 2007, 2000 edge of table. Not in a table blank edge of tip edge of tip edge of edge of caption. Oh, and not in a table cell. Not in a. I do not. I mean, this is a good table, but this kid that is telling me that something does it does not see the table as a proper table. But you know, this is something that I need to discuss material, but again, I checked it last night. It was working fine. So it is, this is something NBDA is fading. I mean, this is good that you guys see that even for me, who is I consider myself as a professional user, we run into situation that it is out of our control. Probably I have to restart NBDA and then it will work fine. But let me also show you one quick thing with the. You know, changing the mode here like here when I go to form name, colon, left brand, I press the F to take me to the next form element. But NBDA shows each viewer on startup checkbox. See where you're at. Robot with accessible university demo site dash accessible version of email, colon main menu. For example, I am form name, colon, left brand. It tells me the name of the control. This is the name, but when I type list starts age to type my name. Security question heading level. It is stole my key and then can interpret it as a heading as if I am searching for next heading. So it did not work. This would mean that I am not in interaction mode. So the reading mode, the mode that I am right now in NBDA is called browse mode. And then if you want to go to to email, colon, name, colon, I am on that phone. If I want to type or be switched to mode, there are many ways to do that. The easiest way is to press enter on this field before you type your name or the default key is an insert space. Apply now. You probably did. You hear the sound. But again. Security question headed country called zip. Email colon name colon. Again in the reading mode. Press enter. I am in you probably the sound. Again, then they can start typing. Email colon. City colon. And it has on. Country called desired major left brand as right for checked. Engineering check, but he cannot physics check box Spanish. If a cow is purple. What color is it? I am not going to answer that to see that if I get an error. Submit button. Alert, please fill out this field. If a cow is purple. What color is it? You see that required invalid entry has auto complete blank. Thanks to the live. Region. And then, you know, thanks to our code programmer. Who implemented that. So it not only announced error is also. Moved me back to that where the error occurred. And so on. 12 colon zeros. It is top of the hour. We can stay or some of us can stay for another 10 or 15 minutes. If you have question, but if you need to leave, feel free to do it. Thank you again. For coming to this workshop again. Sorry if we had the technical issues. But I think those are of you who are in technology. You understand that sometimes we cannot. We have 100% control of them. I hope you found this workshop. Useful helpful. And then you can know that how to contact us. You will be sending the, you know, links to the recording and slides later. And thanks also to my students there who presented also this accessibility testing tools. And how to check for technical accessibility problem. With this, I pass it to terrio. And then, you know, if again, I am sitting, we are sitting here and then we will be glad to answer your question. But. You are welcome to leave. And thanks. Thanks to your team and thanks to everybody who joined us this morning. We do have a two, two hour break. And then those of you that are coming to the afternoon sessions. I encourage you to do that. We've got all text for images and accessible charts. Starting at two o'clock. Followed by accessible tables. In word and P. D. F. So you've kind of gotten a, gotten a glimpse at, you know, how generally how, how a screen reader user interacts with content and how you can play around with screen readers and, you know, try to interact with content as well. This afternoon we'll be focusing on a few specific things that we've gotten a lot of questions about how to author those in a way. That maximizes their accessibility. So I hope you can come back. I'm later on this afternoon and join us for those sessions. Thanks again, everybody.