 Welcome everyone. We still have a steady flow of people coming in so we'll kind of let that settle a little bit before we launch. Okay, it looks pretty, pretty stable. Now I think people probably will be trickling in throughout the day actually so we'll just continue to welcome them, but welcome everybody to Global Accessibility Awareness Day. I'm Terrell Thompson, I'm manager of the IT accessibility team, which is part of UW IT accessible technology services. And, you know, we focus on ensuring that the technology that we use at the University of Washington is accessible and that includes all sorts of technology, websites, digital documents, videos, software that we're purchasing. Everything that has a user interface has the potential to either break down barriers for people and make life easier and make education easier and the work that we do easier. Or it has the potential to direct barriers and so, so we are all about removing those barriers and just making things easier using technology that's what technology is all about. And so this day I think of it's the 11th annual global accessibility awareness day that truly is a global event there are things happening all over the world. And we for at least the last six years have had a formal day ourselves on this day where we've offered trainings and workshops and done a wide variety of things to sort of commemorate this day, and to advance the state of technology accessibility at the University of Washington. So today is no exception. We are, I've got a full agenda of activities and and over 150 people registered so we're really excited about that that throughout the day we're going to have a lot of different things going on, and a lot of different people participating. And those of us who are speaking are from UW it accessible technology services. It really takes a community to make all of our technologies accessible and we really appreciate your interest and your willingness to to learn more about accessibility and to to do good work to help improve accessibility of our technology resources. So so thank you so much for for being here. I just want to share a few links I've got a slide up now. First of all the the official global accessibility awareness day website is accessibility dot day. So pretty easy to remember. There's a lot of really good stuff up there so check that out just to kind of get a better sense of what this is all about get some context. There are also links there to a lot of global activities that are happening related to accessibility. Also, check out our own website our accessible technology website we just launched a freshly redesigned and reorganized website so this has been in the works for many months now and many of you have actually participated in helping review designs and provide feedback feedback and participate in focus groups and so forth so. So check it out UW dot edu slash accessibility. That's our vehicle for communicating all sorts of things related to technology accessibility, mostly as they apply to the UW, but more generally as well related to accessibility of different technologies. That's also that same site is where you can see a schedule of today's events. So UW dot edu slash accessibility slash events has Gad featured at the top and there's there's a link there the schedule there brief schedule there but also a link to all the other activities of the day so now that you've got the zoom URL. It's the same URL for all events today and so now you know feel free to come back. I don't have any events but come back for the afternoon events as well so. So, again, welcome. Great to see you all. I'm going to step aside and hand off to my colleague, how do you rank it. Oh, will you stop. Okay. Okay. Good morning, everyone. I would like also to welcome you to our global accessibility awareness day. As I mentioned, this is the six years and we are pleased to that you have chosen. You have, you have chosen to come to. Thank you for coming here. So you have a lot of choices, but great welcome. So, as you probably have seen in the war in the registration, we will be offering a lot of interesting presentation and workshop. So, I passed it to my students to talk about the how to test how to utilize this accessibility testing tools I would like to share with you a few points. I have only one slide. This is one thing that I wanted to mention that, you know, today we will be checking a lot of stuff about the accessibility of technical accessibility. But remember that the end of the road, you know, we need to focus on functional accessibility. This is a different topic and we presented many times on that topic. So I think that accessibility testing tools that my students are about to present or show it to you the catch up to maybe 30% of the technical issues we need always to do that manual checking. And then, I do want to read you the share it looks like it's frozen on. Yeah, that was exactly what I was afraid of. So the technical issues is the biggest challenge. So, so can you do that from your hands right. Okay. What's that. So I stopped sharing you. Yes, I can. In the meantime, you know, while my computer flows, or says, at least a zoom is not working properly with sharing. He's sitting up his laptop to start but be ready for the next minute. We will be asking a few questions you would like to know get some idea who is here and then know about your role. And then also knowledge of accessibility. You should be the talk about it. You have decided. It's yours right. Yes. Now I think that that's good. I will be sending those slides. I don't want to be cut from your time. So, go to your presentation. Sure. Okay. So, Mikey will be asking you a few questions, please be ready to raise your hand to his questions. The questions about as I mentioned that this is about your role. And your knowledge of accessibility, just whenever this is the time, you know, you will feel that it matches your situation, please yours raise your hand. Sounds good. Yes, hello everyone. My name is Mikey Wilson and I'm a student on high accessibility team. We're going to be asking just a few questions about your, your roles and your familiarity with accessibility just so we can get an idea of who we have on the call here. The next question is, which of the following best described your position. And as Heidi mentioned if you could raise your hand through the zoom, when your position, the one that applies to the most is called not be great. So the first one is a developer. Thank you. The next option is a content creator. Thank you. The next option is a project lead. Thank you. The next option is a public information officer. All right, thank you. Our next question is how do you rate your web accessibility knowledge. So the first option will be beginner. Thank you. Next option is intermediates. Thank you. And finally, we have advanced. All right, thank you. We just want to get a quick poll the room, but now we're going to jump into our accessibility checkers. And if you want to request control and get started Jessica, then go for it. Jessica. Yeah, for sure. Hello, I'm Jessica and then today the first presentation and the first web accessibility checker will be going through is bookmarklets. A little bit about us. For me, I'm currently a sophomore at the University of Washington studying human centered design and engineering and as for Mikey. I recently graduated from the University of Washington studying computer science. And we both work with the unit by T and accessibility team to assess the accessibility of software used here at UW. So regarding this web accessibility tool bookmarklets, this is created by a by pixel and the disability resources educational services at the University of Illinois or brand a campaign. This browser bookmarklet essentially allows developers to visually see otherwise hidden accessibility features such as headings and area landmarks. This is also a useful tool for visualizing otherwise hidden features or showing whether HTML markup is used with proper semantics for accessibility. We can find this available on Chrome Firefox and also Safari. As looking in how this bookmarklet works on the right hand side of the page and as when you visit the website of this tool, you could see five rectangles and then on the labels on the top left hand labels. We can see the names of each of these links. These labels are respectively landmarks headings lists images forums and each bookmarklet link must be installed separately but you are able to successfully install numerous ones. From a pop we have landmarks which basically highlight all area landmarks headings which highlight all h1 through h6 headings lists which would highlight ordered and unordered lists, along with how many lists images which would highlight all of the images including their list, and the forums which would highlight all formulated elements and the information associated with it. Along with this it would also identify details such as name, role, element type and etc. And now we're going to just jump into a demo. And I will also show you all how to install them real quickly. It's quite easy. So you just go to Google and type in accessibility bookmarklets. It's just the first link here accessibility bookmarklets.org. Once you get here you're on the homepage and you can go to installation. And as we mentioned these are just browser bookmarklets. And so you can click on the text, whichever one you want to use and just click and drag it to your bookmarks bar. And then you'll be able to use it on any web page that you want to. So we come to one of our accessibility websites. And I will show you just how I would say the most, the two most useful ones for us at least would probably be the landmarks and the headings ones, mainly because the other three options, the list images and forms. You know, you can visually see those on the page, but landmarks and headings are, you know, not visibly able to be seen. So I can just click on the bookmark here. And it creates these little containers around any elements in this case that are headings. And so we can use this to check the heading structure of the page, where in general we know we're looking for an h1 that is descriptive of the overall purpose of the page. And then, you know, as it goes down into subsections, the h2 should be correctly identifying what the purpose of each subsection is. And then we also want to make sure that we're only going down one heading level at a time. So here we can see, you know, we start with a heading level one at the top. In this form, you know, we have an h2 saying apply now. And then it goes down into an h3 into the lower sections. And so similarly, we can use the landmarks bookmarklet to make sure that the already landmarks are also correct. And so both these ways are just structures in which screen users get a better picture of the page effectively. So with these landmarks, you can see that there's a banner, there's navigation, and you have your main content area. And so it's just ways that you're able to get information up your web page for screen reader users. And then for each of these boxes that come up, you can hover over them and get a little bit more information about the elements. So, yep, in conclusion, these accessible bookmarklets allow you to have a visual overview, otherwise hidden accessibility components on the page. And they're great for identifying these high level structural issues in your application, specifically with hands and landmarks, although like many of our other tools we're going to talk about today, they must be accompanied by other automated tools, as well as manual testing. Yeah, moving forward to the next web accessibility checker we have color contrast tools. These color contrast tools are really important as users who have low vision or who cannot easily distinguish between low color contrasts, mainly these tools. And while these web color contrast checkers can be found in automated checkers, such as Wave and Andy, which we'll be talking about later. In this specific demo and presentation we'll be talking about the web in color contrast checker. To use this tool, you essentially can input the hex values of colors to see their contrast. And while you definitely can use browser dev tools to check the hex of a certain color, we often use this in conjunction with another tool called color Zillow, which will effectively let you hover over a color and tell you what color it is in RGB and hex format. In this tool you can simply input the hex for the foreground color and the background color and it will give you the contrast ratio to these colors. You also have the ability to switch the foreground color and the background color as to adjust the lightness of the color. This could be really helpful when identifying like what shade is acceptable. Some more features include, you can see different places where the color is used, such as the normal text, large text and graphic objects and the user face interface components. And then you can also see whether the current color contrast, it will satisfy the WCAG AAAAA AAA standards. And for these different standards, for example the WCAG 2.0, low AA requires a contrast ratio of at least 4.5 to 1 for the normal text and a 3 to 1 ratio for the large text. For WCAG 2.1, for example, it requires a contrast ratio of at least 3 to 1 for graphics and user interface components. And for example, for the WCAG AAAA requires a contrast ratio of at least 7 to 1 for normal text and 4.5 to 1 for large text. Yep, so there are a few different ways you can extract color from elements. So I guess the regular way would be to right click on the element that you want the color of and go to inspect. And then in the inspector tab of the DevTools, you should be able to find the CSS that was applied to that element, usually in the middle of the three panes, and that will have the hex value of the color. So while this is a valid way of doing it, we like to use another tool called ColorZilla, where this is a browser extension where you can effectively trigger it and then as you move your mouse around the page, you can click on a color that you want the hex value of and it will automatically copy to your clipboard. So we will show you this. I'll use this as well. So it's similar for this one, you can just look up, you know, WebAIM color contrast checker and just our first link here. So you can see we know we need like a foreground color and a background color. We will be able to see the contrast ratio. So we come to our demo site here. I already have the ColorZilla extension installed. Just this one right here. You can just look up ColorZilla installation to find how to do that. And so once I click it, that as I'm going around the page, you can see at the top of my browser, it's currently identifying the current RGB and hex values of the colors. So I can come to, you know, click on this color here. Now the foreground color. The weird one there. Yep. So it's just that dark blue there. And then if we're comparing it's just the dark blue there to the white background. Right. We can see the color contrast ratio of 13 to 1. And as that is graphical objects and user interface components. That would pass the WCAG AA standards. So pretty easy to use in conjunction with both of them as you're able to extract the color from any element on the page and then put it into the contrast checker. So in conclusion, for the color contrast checkers is easy to do if you're using the correct tools. And as Jessica talked about, it's helpful for ensuring that for everyone, the codes on your page can be seen and differentiated between and your components, you know, can be differentiated between. And then yep, we noted that it is included in other automated accessibility checkers as well, such as Wave and Andy. This is a helpful way of doing it if you just want to know the color contrast. So next we're moving on to the Wave Accessibility Automated Checker. And we'll have Alyssa and Cynthia will be presenting on that. So I'll pass off to them. Alright, thank you Mikey for your presentation. We'll have Cynthia be sharing your screen as we give our presentation on Wave. Yeah, I can up here in my screen, so give me a second as I move this right up. I'm sharing my screen now. Alright, so this is our presentation on the Web Accessibility Checker of Wave. So before we jump in a little bit about ourselves, my name is Alyssa. I am a junior at the University of Washington and I'm studying Informatics. Cynthia. Hi everybody, I am Cynthia. I'm a sophomore at the University of Washington studying humans under design and engineering. Yep, and we both work at UW IT along with Mikey and Jessica, and we're on the accessibility team. And our job here is to evaluate and examine UW software use internally and externally for accessibility. So a little bit about Wave. Wave is a free web accessibility evaluation tool developed by the company web aim. And this tool detects errors automatically so it has an algorithm to look through the code and find any accessibility issues. However, this application is not going to give you a holistic assessment of your application. We're still urging you to do manual testing with users with disabilities or to do your own keyboard navigation testing or your own code validation. So in the end we're suggesting Wave as a facilitation tool meant for human evaluation first. So how do we access Wave? There are two ways to do it. You can use the online Wave tool and you can use the browser extension. So the first one is the online Wave tool. So if I click on the link here, you can access the wave.webbing.org website. And here you'll have a field where you can just enter the webpage address of whatever page you're looking at. So say we want to look at this webpage, this load up and the tool be loaded inside this tab. And you can also access it via your web browser. So if you go to your browser web store and you find the Wave evaluation tool page, you're going to just click on this button here and Wave will be loaded into your browser toolbar. And we mainly recommend the extension because you might have very dynamic pages or you might have a dev site that is only locally stored. So the extension is better for that versus the online Wave tool. Wave is essentially focused on six icons and these six icons are populated inside a dashboard of sorts in the left hand sidebar when you're using the tool. So there are six icons, errors, contrast errors, alerts, features, structural elements, and aria. And all these are populated in a sidebar where you have a multitude of tools to look at. This is the dashboard and do some extra tools that you can investigate further into these icons. So what are these icons? The first one is errors. And these are issues that the algorithm finds that will impact users with disabilities. And these are also issues that are WCAG success criteria failures. So a little summary WCAG is a documentation that is standardized by the W3C, the World Wide Web Consortium, to be issues that impact users with disabilities. And when these fail, this documentation is called a success criteria failure. So these are issues founded by the algorithm to fail the success criteria. The next is contrast errors. Jessica went over that a little earlier, but this is text that doesn't have enough contrast with the background. So this may be an issue for users with low vision who require a certain threshold of color contrast to visually see what's on the page. And this is found through the contrast ratio between the text element and whatever the background is. Next, we have alerts. So these are elements that need manual evaluation. So the algorithm is blocking it as a possible issue. However, whether this is an actual issue or how much the impact is, is up to human evaluation. And we have features. So these are elements that the algorithm is finding to be enhancing accessibility. Again, whether they're actually used correctly or actually helping people is up to human evaluation. These are structural elements. So as Jessica and Mikey were going over earlier, screen reader users need semantic structure in their website to correctly perceive what is visually shown on screen. And these include aria landmarks, headings and lists. And all of these are summed up in a way so you can get a good overview of what your site looks like to a screen reader user. This also shows off screen elements that might be hidden using CSS, and it also shows elements that are nested inside each other. Finally, we have aria. And aria is accessibility attributes that can be used to convey information. So you have real raw HTML code, but that isn't always accessible. So what we do is we have extra code called aria to supplement it to make the application more accessible. However, we're one of aria. Don't use aria. HTML is usually baked in to be pretty accessible. And aria is often complicated and confusing to use for developers. So we tend to advise to stray away from aria, but wave will expose where aria is used inside a website. Alright, so that's a little bit about the icons. We're going to jump into a demo to see how wave present this information, a typical workflow, and we're going to show you a real website. So we're going to have Cynthia share her screen, and we'll go into it a little bit more. Alright. Thank you, Alyssa, for going over the logistics of wave. So we will be going over how to use wave on an actual website. So we'll be using the UW Accessibility demo website, specifically the before version, because it gives a lot of common web accessibility errors and is really helpful for learning about accessibility. So like Alyssa said, there's two ways to access wave. You can pick the URL, paste it in the Wave website, and it will load the website in the Wave website, or you can do what we're going to do today, which is to use the Chrome or Firefox extension. And if you click on the instruction, it will open a side panel directly in your browser. So the website panel contains all the sections that Alyssa said earlier, errors, contrast errors, alerts, features, structural elements, and aria. The one we will be focusing a bit more on this demo is the errors section because it contains the most critical errors that affect accessibility the most. To go over the errors that Wave has detected in depth, what you would do is you could click on the detail section, which lists all the errors that Wave has detected. And to locate where the errors are located on the page, you can click on the icon for each error and it will shift the viewport to where the errors located on the page and also highlight it so that you know exactly where it is located. And Wave can also show you a bit more detailed information about what the error is. So, for example, let's use this error, for example, it said that the error here is missing alternative text, so image alternative text is not present. So, telling you what the error is helpful, but Wave is really nice and that it gives you more detailed information beyond just what the error is. As you can see in the pop up here is this button called the reference. And when you click on reference, it contains some paragraphs about what the error actually is, why it matters to accessibility, how to fix it, and also some guidelines. So, for example, here it says that the error is image alternative text not present, it says why it matters, each image was having an out of route without it, content of image will not be available to screen reader user. So, for that information in the context of this specific website, what that means is if a screen reader user enters the website and this image here at the standard has no alternative text, they will not see the content of this image at all. So, a sighted user could walk into the website, see the word accessible university and know that this website is about accessibility. But without the alternative text, which is what the screen reader can see, they will miss this text and information entirely. So what Wave does is it points out this error and lets you know what it needs to be fixed. So Wave is really good at telling you the theory of why an accessibility error is an error and why it's pouring when you see fixed. Wave is also good at telling you how to fix the error. And how you do that is next to the reference button, there's a code button. And if you click on it, it's really helpful for developers because it opens up where the error is located in the code. So it's a really good way to quickly find out how to fix the error, but more specifically where you want to fix the error in the code. Yeah. So if you want to go one more, there's a couple more things I want to go over for you. So two more tabs, there's the structure tab, I'm going to open that up. And this page doesn't have a heading structure but if you want to open just like the Visit Seattle website, we can show them the example with a heading structure. So if you want to get a good overview, this is an alternative to the accessibility bookmarklets. You can see the heading structure here as well as any possible heading structure issues. As Holly's always says, you want your headings to be complete, hierarchical and meaningful, and you can examine all of your headings as well as your all your landmarks in this tab. And here, however, of course, whether they're actually meaningful representative of the page is up to human evaluation. So you want to compare this view of all the headings on the left with what you're actually seeing on the right. And you can also see offscreen headings. So if you see Cynthia there's like there's great outheadings. That means that these are offscreen and not visible to users. So if you want to see where these are coming from, you can turn off and on the styles in that little toggle button at the top. And you also get a good linear view of what the page looks like without any CSS styling similar to how a speed reader would traverse the website. And finally, there's some contrast. We can go over that. So that is very similar to what just so was going over earlier in this presentation. The Wave shows you all the contrast issues in a website. And what you can do is you can click on any of these contrast icons on the page, and Wave will automatically populate the hex codes for the foreground and background color. Similar to the web aim tool, you can see the contrast ratio and the difference in the web tag, the violations in the normal text and large text. You can also play around with the lightness to see what will help you achieve a better or worse contrast ratio. That's Wave. Let me pull up the conclusion slide. Here to conclude, we believe Wave is great for people with some basic knowledge of accessibility wanting to learn more. So your content creators or your developers. And one thing we want to caution you is that there's a lot of detailed information. All of those icons can be pretty overwhelming to a new user. You're kind of a foundational level of accessibility knowledge of work jumping in. And of course, this does not replace manual testing. Please, please, please do your keyboard testing your co validation and your functional testing before you jump into a accessibility chapter like this. So we have about one more tool here. We're going to be going over acts now. So let me pull up this presentation. And share my screen with this new. So, one more presentation from us. We have the Web of Stability Checker acts. So if you weren't here for the last presentation. My name is Melissa Bo. I'm a junior at the University of Washington training informatics and this is Cynthia. Once again, sophomore at the University of Washington studying humans in the design engineering. And we both work at UW IT on the accessibility team, and we evaluate and examine the software for disability. So about acts acts is a web accessibility tool created by the company DQ and acts similar to wave and all the other extensions we've been presenting so far is a browser extension for developers to run a quick in browser test on demand to see how accessible your website is. So you can access packs similar to wave, it's a browser extension. So you're going to be wanting to visit your browser web store, and you can just click on this button, and similar to wave it'll install on the browser. However, while wave is located in your toolbar, acts is in a different place since this is a dev tool extension. So you're going to want to open up your Chrome dev tools. And go to your website of choice. And you can either do control shift I and that'll populate the dev tools, and you can then open it up there or you can use your context menu with your mouse user right click, click inspect, and it'll do the same thing. And from there you can access the acts dev tools in the tab panel in the upper right hand corner, or you can use the control left or right bracket to move your focus to the correct tab in the dev tools pane. And finally, once you're there you can tap forward into the tab panel and access the scan all of my page button, which will step tools extension. And we're focusing on the free aspects of the access tools. You can also get a pro version but the scan all my page button is what we're focusing on today. So let's go into our live demo. All right, and then we're back on the accessibility demo website. And so, like I said you can either press control shift I or I like what I have to do is to use the context menu click inspect. And where you would go specifically is that once you have acts installed this panel called acts dev tools will appear, and you click on that. Again, click scan on my page if you don't click scan it won't load any of the errors so yeah it's really important that you click that. And so acts is kind of similar to wait and that it captures accessibility errors, but how it's a big difference is that it presents the information a little bit differently, because. And then, for example, how you would navigate these errors is going to be a little bit different from how it does it. So with acts, all the types of errors they're categorized into what kind of error they are. So let's take a look at the alternate no out text error again, how you would have navigated navigated in acts is you would click on the section that appears images must have alternate text as it says here, and it will group all instances of alternate where this error appears in one category. And you can view these errors more clearly by clicking this highlight button which will highlight exactly where it's located on the page, like here. So, how access a little bit different is that where wave might present all these errors and sort of chronological top down order where the error appears on the page acts groups and together in a category, and then you would navigate them category by category. And so what another way acts a little bit different from wave is because acts is mostly a developer tool. So it doesn't go into the theory of why an extra issue is an issue the way wave does. As you can see here for acts the issue description is only like one line here that ensures image elements have alternate text or role or none of presentation, which is a bit more brief than the depth that wave goes into. So what acts does provide is that it goes in a lot more depth on the coding side of things so how you would fix that error in the code. So you can see down here it has a section called to solve this issue you need to, and it will list a bunch of different ways, possible errors and also ways to fix that error in the code. So, it's a fix at least one of these issues for example, element does not have an alternate attribute are you able to empty. So the benefit that acts provides is that it's a software that can tell a developer how to fix an accessibility issue from the coding side of things. Yep, and then just one more thing that there's a if you scroll up there's a little link that there's more info. So if you want to get a more in depth look DQ does provide that information and tell you how to fix the problem. So if you scroll down they tell you why the problem would impacts and also tells you a bunch of compliance data as well, which is a lot of information and heavily code based so it's another cautionary thing if you're jumping into acts. And I can share my screen to cover you with the conclusion slide. So to conclude acts is a great tool for an initial testing of web accessibility. Of course it's not an excuse to not manually verify the issues. As you can see throughout all of these presentations, each of these reports collects a different amount of issues depending on the algorithm. So you're going to need to do manual testing to verify what are actually issues and to get a good holistic view of your entire website. Of course acts really only covers technical accessibility. These are again issues that the algorithm is finding in the code and not optional issues. So access a great tool for testers and developers you have a strong knowledge of code we're able to correctly perceive everything in the depth tool space. All right, so that's acts and I'll hand it over to Mikey for our presentation on Andy. Thank you Alyssa and Cynthia for that. And I'll be going over our final accessibility checker today, which is called Andy. So again, I'm Mikey Wilson. This is for Andy. So a little bit about Andy, which is short for the accessible name and description inspector. It's an open source web itself accessibility checker created by a branch of the Social Security Administration. It's available for Chrome, Firefox, Edge and Safari. And similar to some of our other tools, it's installed as a browser bookmark. And it should be accompanied by manual testing. So in terms of how Andy works, it's a little bit different than some of the other completely automatic checkers such as Wave and Acts. In a sense that Wave and Acts check for all the issues at the same time and you can see all these results grouped together. But Andy is split into seven different modules where you can only scan the page for one module at a time and it'll show you all the issues related to that module. And so the seven modules are the focusable elements, which is the defaults and this shows pretty much all the interactive elements on the page. And you can have some other functionality in there, such as looking at the tab order, as well as labels and titles that appear. The graphics images one is more self-explanatory. It just identifies all the images on the page and make sure it has the correct alternative text. And you know it looks for no alternative text and just any issues related to graphics. The links and buttons module looks at the names of links and buttons and ensures that they're all unique and semantically make sense for their functions. The next module just looks at all the tables and make sure their structure correctly things such as making sure they have, you know, grow headers and calm headers, and at the their correct cell associations. Another important one is the structures one, which as we've talked about before identifies structures such as headings and aria roles in a webpage until it's very important for the foundation of understanding the webpage for screen reader users. We also have a color contrast checker, as you mentioned before, and finally, the hidden contents which identifies the hidden content on page. So for each of these modules, it identifies the number of elements that are related to the module. So in our example here we have we're in the graphics last images module, and we can see we found eight images. So each of these eight images, you can go through them and it gives some information about each of them. So things such as the type of elements. In this case that would be just an image, image tag. Number of accessibility components, where we can see here it has things like the old text being accessible university, as well as the source. The things that might appear here are, you know, aria, aria attributes and aria roles and other accessible attributes you add to your components. Another really helpful one is the Andy outputs, which is effectively what a screen reader would read when it gets to this elements. So it's helpful for verifying that your screen users are getting all information that you expect them to be getting. You can also see the number of elements down from the module. So in this case there's eight images found and split up a little bit more into what kind of images they are. And finally the most important part is the accessibility alerts. And so, similar to some of the other. These are alerts you can click on and it'll identify all the issues on the page and then you can click into them for more details and it will link you to the external Andy site where you can find out, you know, why it was alerted and what you can do to fix it. So just looking into all looking to one of these modules a little more closely. They're all quite detailed and they have a couple different functionalities within them. But we don't have enough time to cover those all today. So let's look into one of them for now. And so for the first module that loads when Andy does and is the default is the focusable elements as identified as a number of focus pool and interactive elements on the web page. And so with this you can do these things that do some things to talk to these interactive elements visually so you can do things such as toggling the tab order indicators. So as we can see in this first picture. It just puts a number next to each interactive elements on the page and shows where in the tab order it would be for screen users so you can make sure that it is logical and you know follows what you would expect. You can also trigger things such as the title attributes. So in this example table here visually in the column headers, we have just the text CS in an eco. But right, the, we have title attributes on each of these so that you know screen users we have to see those computer science English and economics. And finally we're able to toggle label tags for your form elements. And so when you screen users get to your form fields such as this, this text edit box here, they would know what's what they're supposed to do at it so in this case, but this was for the name there. So we will just go into just quickly how to install again. So if you can just look up and the accessibility should be the first link. Similarly you can just drag and drop this into your toolbar or your bookmarks toolbar. And this any website has a lot of great resources. The, if you use the tool you should definitely dig into it goes into into a lot of depth for each of the different modules, and has a lot of, you know, details about alerts as well. And so when we come back to use this on the page, we can just click the browser extension. Sorry, the bookmark link. And so in this case, we see we found 25 focusable elements on the page, and there are 19 accessibility alerts related to them. So I could click on these accessibility alerts, and you know it shows each instance of them. When I click on a singular instance of them, it will highlight on the page where where the instances so you can find it easier. And it will also have this error link here you can click on. And now redirect you to the specific alerts within the anti website. And here you can see. So like for example here, this form element has no H1 markup that would provide an accessible name for the element. It says why it's concerned. So if a screen reader got to this element for the form, it would read nothing or you know the screen user maybe may take a guess. And so a screen user might not know what information to put into this field. And then it also gives you know what should be done. Or in this case you can add a label tag or an already labeled by or an already labeled to ensure that's all your forms are labeled. And then just to show some other functionality that talked about the focus of elements, just an example. So we can go to our more accessible website which has, you know, the correct tab ordering we can see that it makes sense as it goes throughout the page and what user would go to. We can turn on the title attributes. So you can see, you know, this is the table I was referring to before, we can see the titles for each of the headers, and we can turn on the label tags. So for this form, you can see what the labels are for each of these form fields. I'm just going to strap it up. Yep, there's a lot. So in conclusion, it's another great tool for, you know, end up testing web accessibility. As you mentioned it's not excuse to not manually verify these issues. And I would say that it has many other useful advanced features that if you start using this will you should dig into. And it's, I would say probably the most advanced tool because you can do a lot of different functionality for each of the modules and so you have a lot more a lot more power to look at what you want to, in terms of accessibility on the page. But thank you guys all we have for the accessibility bookmarks. And I will hand it off. Thank you very much Mikey thank you everyone here. I really appreciate I'm proud of my student who have been working and helping with accessibility of the resources that we are dealing with. Wonderful job. Thank you, I appreciate that. So who are familiar with the offering such workshop or presentation where some of us are in person. Everybody's using his own computer. And then some technical accessibility issues that we have been facing. It has been a lot of work. So we had to coordinate a lot of stuff with each other to make it happen. But the one thing I wanted to just add to the presentation that my student have about the accessibility to using accessibility testing tools is that some of the some results, you know from one tool to another tool might not be consistent, because they might use a slightly different algorithm. And then but it is not rocket science everybody can learn it. And then one basic thing that everybody I think must do that is that keyboard testing. So that is a keyboard testing there is no excuse developer designer content creator whoever you are you know please make sure that you're able to do that test test with the keyboard. I would like to leave for five minutes for questions. And then after that we need a about 10 minutes to transition to the workshop because we will be changing lots of stuff here. So any questions are we receiving any question and voice of with or voice of chat today. We don't have any questions. It is break time so feel free to take a break but if you have questions for haughty and students feel free to put them in the chat. Thank you guys, we will be sharing the presentation with you, and then we will be actually posting that all at our website, not tomorrow. We all need a small vacation after this. It might take a few days or a couple of weeks, but you will be receiving a link to the presentation, the recording as well as all the slides. Again, we, I think we need 10 minutes break, and then then talk to you in 10 minutes. And I'm worried my computer has some problem I need to restart it please watch for my name when when I come make me close. Okay, great. Thank you. And we'll start the next session at 10 o'clock. Yeah, let's let's be. Let's be on safes out to 10 or five please.