 Hi everyone. Welcome to the latest installment of the accessible technology webinar series. Just getting my desktop in order here. And I have a few slides that I want to use to sort of introduce the topic. We are here, of course, to talk about web accessibility. The emphasis today is going to be on tools. And so we're going to demonstrate a variety of different web accessibility tools that we use, but I wanted to make sure everybody's on the same page in terms of what is this all about. So this may be a review for some of you, but it is essential content. First of all, your speakers, myself, Terrell Thompson and Ann Marie Golden is also here going to be going to be joining me. We're both part of the IT accessibility team, which is part of UWIT Accessible Technology Services. So we provide all sorts of services, consulting, developing resources, providing trainings and so forth to help with IT accessibility issues. So any questions you have related to web accessibility or document accessibility or video accessibility or accessibility of software that you're purchasing, those sorts of things, we are happy to help. So web accessibility, what is that exactly? And what are we talking about? Who needs access to the web? Well, obviously, everybody needs access. We're doing a lot via websites these days, both academically and administratively, and there are lots of different ways that people access digital information. So the old school model, which is depicted on the slide here, is to use a keyboard or a mouse for input into this system where you're making requests or you're typing. And for output, you get information back through a monitor. So visually, you access the output from that system. And it is kind of an old school model. What we see here is not the way most people access information on a regular basis, that we also have people using their iPhones or using their Android devices or using their Microsoft devices. You've got people who are using tablets and all shapes and sizes and platforms of tablets. You've got people who are not accessing the output visually, but are listening to content that includes people listening to content on these mobile devices. But historically, that has been the domain of people who are not able to see the monitor. So somebody's blind, they're using a screen reader to read the content of the screen through a speech synthesizer. Also, people may be using voice for input. And that too is something that more and more people are doing with mobile devices, having more of a hands-free interface. But that too has historically been the domain of people who are physically unable to use the keyboard or the mouse. They may be using their voice, or they may be using other assistive technologies, head pointers, and a variety of other things. Somebody who's blind may also, rather than using speech output, they may be using Braille output, or they may be using Braille input. This is a device, a refreshable Braille device that can do both. It's got cords. The eight keys you see across the top allow a person to type in Braille. And the row of dots allow a person to access the content of the screen in Braille. And so I ran out of slidespace. Otherwise, I could go on and on and on with the different ways that people access digital information. And we have a few examples here as well. This is Jennifer. She's using an Antelope keys keyboard, so a much larger keyboard than a typical keyboard. And she does that because the keys are larger and they are therefore better targets for her. She has a stick in her right hand. She has enough dexterity to grab that stick and to press the keys and the keyboard with it. But she cannot use a mouse. And so a lot of people are physically unable to use a mouse, but they can use the keyboard perhaps with some assistive technologies to tab through the interface on a website and to use other keys as makes sense to do so. This is Courtney. She's using a refreshable Braille device. We saw that on a couple of slides ago. Here's one that's actually in action. And here is Courtney, pictured with a friend, Conrad, who uses a lot of different assistive technologies, including voice input and various other AT that can be controlled with a sip and puff device to do clicking and double clicking and so forth. So he's a power user of lots of different assistive technologies and has a graduate degree, a law degree from University of Washington Law School. And this is Hannah. And she is doing some programming here using Zoom text. So she needs to magnify the content of the screen, make everything a little bit bigger. She is now a developer at Facebook, I believe, after graduating from University of Washington. So these are just a few examples. Students who have been at the University of Washington who use a variety of assistive technologies just to kind of reinforce that this is a human issue but accessibility is about providing access to people. So all of us fall somewhere on this continuum of being able to do certain things and not able to do certain things. And we generally fall somewhere in between on the spectrum. So some people are, they have 20-20 vision. So, you know, perfectly able to see some people are not able to see at all. Some people, most everybody else falls somewhere in the middle scattered all over that continuum. Same thing is true if we were to plot, you know, the ability of people to hear or walk or read print or write a pencil or communicate verbally or tune out distraction. That scatter plot would be all over the place. It's not a binary thing, you know, people with disabilities and without. It is just having either very good abilities, not so good abilities or somewhere in between on lots of different things. It just depends on sort of what characteristic you're measuring. So all of that is to say web accessibility really is about diversity. It is, you know, making sure that everybody can use your website. So creating a website that works for all users and all users are very, very broadly defined. They're using all sorts of different devices, all sorts of different configurations. We want our content to be accessible to all of them. Web accessibility is also about creating a website that complies with web accessibility standards. So there are standards that have been developed to specifically document what it means from a technical standpoint to have an accessible website. So the standards, most web standards are owned by the World Wide Web Consortium or W3C. HTML is an example of that. That is their, their, you know, high-tech markup language is their specification. Also, from an accessibility standpoint, the web content accessibility guidelines are WCAG as well as accessible rich internet applications or ARIA. These are all guidelines or standards or specifications that the W3C maintains. So WCAG, what is that? That actually plays a key role in accessibility for us. That is essentially the standard for web accessibility. It's an international web accessibility standard. It's been around for a long time. The first version was published in 1998. And then every 10 years after that, they've released an update. So 2.0 in 2008, 2.1 in 2018. And that is the most current version and is the version that, for many reasons, we need to comply with. The state policy that says all state agencies, including higher education institutions, need to make sure their websites are WCAG 2.1 compliant. And they also specify a level, level 2A. And that corresponds with the success criteria that are the deepest level within WCAG. So if you drill all the way down into WCAG, you get at the deepest level success criteria, which is sort of like a checklist of the things that you absolutely need to do in order to have an accessible website. There are 78 of those in WCAG 2.1. So lots of details. And each is identified with a level, level A, level 2A, level 3A, which corresponds with kind of a balance between importance and difficulty. So the level A issues are critical for access. And they are reasonably easy to implement. Level 2A may be a little bit less critical or a little bit more difficult, but still pretty important and pretty easy. Level 3A are either not so important or are more difficult. So after many years of sorting this out through legal settlements mostly, but also policy that kind of was driven by those legal settlements and resolutions, we ended up with level 2A being defined as the bar. We are expected to meet WCAG 2.1, level 2A. So that's 50 success criteria that we're talking about. So a few examples just so you know we're talking about. At level A, everything on this slide actually is level A except for one, but having non-text content for having texts for non-text content. So for example, having alt text on images, for people who can't see those images, having very clear info and relationships in the code. So using heading structure properly, identifying lists and tables properly, using HTML properly to communicate the relationships between all the parts. That really plays a key role in accessibility. It's another level A issue. The one level 2A issue here is color contrast. They have a very specific ratio that varies depending on whether it's large text or not, but that because it's very specific is easily measured. You can tell whether your color contrast is optimal based on WCAG standards. And keyboard accessibility, all functionality should be operable with the keyboard. You saw Jennifer earlier who's unable to use a mouse, Tom Conrad who's unable to use a mouse. If people are unable to use a mouse, they should be able to access everything using the keyboard. And then the last item here, name, role, and value, basically means if you have a complex dynamic website that changes based on user behavior, then you need to use ARIA, which is a separate specification that enhances HTML with code that makes those complex interactions accessible. And we can do a whole session on ARIA and do talk a lot about that when we get into deeper content. But so that just kind of gives you an idea. To learn more about all the stuff, our websites, we've designed it specifically for that purpose. So go to uw.edu.accessibility, all sorts of things there about accessible technology, not just websites, but documents and videos and online courses and meetings and so forth. We also have frequent events where you can do a deeper dive or you can get one-on-one interaction with us on lots of different things that we post opportunities for that. So you can access a current list of events that are upcoming through uw.edu slash accessibility slash events. Just add events onto the end of that. You can also use an accessibility checker or other accessibility related tools, which is what we're going to talk about today. And for that, there's actually a comprehensive annotated list on our website at uw.edu slash accessibility slash tools. So a few tools or web accessibility checkers listed here. The first is your keyboard. Just try accessing your website without using the keyboard. Take the no mouse challenge and see if you can access everything that you could use with a mouse. Also listed several tools here. Wave accessibility book marklets, web developer extension, Lighthouse which is built into Chrome DevTools, and Axe from DQ and accessibility consultancy, which is also available in Chrome. All these are available in Chrome, also most in Firefox. And site improve, site improve is a tool that we have a license for here at the University of Washington. And Anna Marie is actually going to do a site improve demo. So I've got just a couple more slides before we get to that, but just wanted to put accessibility checkers in perspective that we are going to be looking at these tools and giving you a sense for what they can, what sort of insights they can provide to us. But most accessibility problems can't be automatically detected. So these are really great. I encourage you to use them. And I encourage you to try to remove all errors using these tools. If you can get to zero errors or 100% score, depending on how accessibility is reported using the tool, then that is a really great start. And we'll definitely have a positive effect on your accessibility, but it's not a guaranteed accessibility. We talk a lot about technical accessibility, which is what a checker can measure, but functional accessibility is a very different thing. Actually, you know, what is the user experience for somebody who's using an assistive technology or has a custom configuration or something? You know, can they perform the functions that are intended with the website? And can they do so easily? Can they find their way around and so forth? Those sorts of things are very difficult if not impossible for automated tools to measure. Also, you'll find as you get into playing around with checkers, that they all are different. Results vary from checker to checker. And that doesn't mean that any of them is necessarily right or wrong. It's just different perspectives. So I think that is important to keep in mind. So I'm going to stop my sharing and turn it over to Anna Marie to show us what how site improve fits into all of us. Good afternoon, everyone. So as Carol said, I'm going to be talking about site improve. And a little bit further, they have a couple of browser demos that I'd like to show you today. So if you're not actually using the site improve platform at the moment, maybe you're wondering, are these browser extensions a good alternative for you? So let's take a look at that and I'm going to go ahead and start sharing my screen now. Okay, so first off, I have a demo page that I created for today. And so I'd like to start by doing a tour of the demo page so that you guys can get a good view of what it looks like, all of the different things that are on it that we're going to be looking for in the checkers. So first off, I have a heading structure here that's listed out of order. We go from accessibility here, a heading two to heading structure, which is an h five. And then the next one alternative text for images is an h three. So we skipped from an h two to an h five there. Then the next thing in the page here is alternative text for images. So I have a image of strawberries that I placed on the page here. And I did not add my alt text. So this is what that looks like in my markup right now, I just have an image with a source, there is no, no attributes, no alt text. And what that really should look like, because I want people that look at my image to know that I have fresh strawberries, not just people who can see it, but I want everyone to know that. So in this case note, I have alt equals fresh strawberries. Sometimes a image is just a decoration. For example, I could have used this image of strawberries as a background photo for something else or to have text imposed on it. So in that case, it's not really all that important for folks to know that I have strawberries. So in this case, note, I have alt equals quote, quote, that will allow assistive technologies to ignore the image. Next thing on our demo page here is color contrast. So I have two boxes here. The first one is presented in good contrast with a black background and white text. And then the second one that says poor contrast is presented in a black background with a dark gray text. And for your visual users even that's kind of hard to read, isn't it? So imagine if you had low vision and those colors that are so kind of close together, if you don't see well, just kind of meld together and you don't see the text at all. And then next thing I have here is link text. We can write link text so it's usable for assistive technology users. So instead of this, so notice I have click here to go to the accessible technology website with click here being my link. And then learn more about our events and collaborations with learn more being the link. But instead of that, it's a lot better if we do it like this. So visit the accessible technology website with accessible technology being the link or learn more about our events and collaborations with actually events and collaborations being the link. And so I get this question a lot, why is this really important? Why do I need to think about this when I'm editing my website? Well, next here I have a photograph to help illustrate why that's important. So assistive technology users have this whole other way of navigating that us visual users don't know about or I didn't know about until I started learning about accessibility and that is they can navigate the page by various keyboard shortcuts. So one of those keyboard shortcuts is bringing up a list of links on the page. And when I bring up a list of links on this page, I have a little snippet of that here and you can see here it says click here learn more. And then my second set of links accessible technology and events and collaborations. So if I'm looking at this list, even since I have it in a visual format now so that I can see it visually, I still don't know what click here and learn more really mean what's going to happen when I click those. So there's no context for users to know that. But notice in my second set there accessible technology and events and collaborations, you have a pretty good idea of what you're going to find then when you follow those links. So on to quality assurance items and those items are things that maybe don't necessarily affect the accessibility of a page but affect the overall quality and usability of the page. And so I'm talking about broken links and misspellings in particular here. So the tools, at least the web platform, it flags broken links. And so I have this link here and it's rendered on the page or in and in my so notice it says Washington dot edu slash accessibility. But the way it appears in my code editor is the Washington is missing the H so the H is misspelled thus breaking my link. And then I have a short list here for misspellings some words that are commonly misspelled. So we have acceptable that's with a TIB in the middle when it should be TAB. We have height, which should actually be height so there should not be an H on the end. And receive remember that rule I after E except after C so the I E should be E I in receive. So okay, so here's the demo page. And I'm in the Firefox browser right now. So what I'm going to do is I'm going to activate the site improve accessibility checker plugin for browser for Firefox. So what I get is this little window that pops up it's still spinning as it checks the page. And notice how it doesn't even fill the fill the height of my browser right now. So I'm going to go ahead and pull this down so that I can see the height of my browser so I can get more information. So remember one of the first thing on our demo page here was about heading so we can see here that it flagged my headings are not structured. And when I click on this it can give me a little bit more information about why that is an issue. Note one thing also there's an Explorer tab here in the Firefox checker and that's kind of handy for checking different visual impairment so I can apply filters to this page using the so that I can see what that would look like to somebody that has a visual impairment. Okay so I'm going to go back to the issues now so that was headings. And we missed some alt text on our image. So here I have image without a text alternative. And then it gives me the occurrence of the issue here and it will even outline it on the page for me. And I can even see a code example for how to fix this issue. Okay the next thing was color contrast. So notice here I've got you know since we're going for the AA I'm going to look at this contrast minimum it's telling me that my color contrast is not sufficient. And then it goes right to that box with the poor contrast with the black text and the dark gray poor contrast in text on it. And then it doesn't really do anything for our link text it doesn't really do anything for broken links it doesn't tell me if it thinks I have a misspelling on the page. So let's compare and contrast that with the one in Chrome. So now you should be seeing my Chrome browser is that correct Carol? Okay and here's our demo page. I'm going to go ahead and activate the site improve accessibility checker plugin for Chrome. And as that as that loaded it kind of made my page spin a little bit there didn't it? And notice how it it docked the information there on the left side of the screen. So it's not obscuring any of my content that I'm looking at on my page and I don't have to pull it down so that I can see more information. And also just notice as I'm looking through here it's giving me a lot more checkpoints than we saw in the Firefox version. And one thing I want to point out so I'm looking at this issue here that has 59 occurrences and I'm like okay what has 59 occurrences on my page? Well it's actually the focus order and notice how it has this little icon with an eye and that means it needs a manual check. So that doesn't necessarily mean that this is indeed an issue but it needs a human eye to know whether that is indeed an issue. But in looking at the issues that we laid out in the demo page so the heading structure we're going to find that here under navigable and I have section headings here. So it's telling me here headings are not nested properly. So I'm going to go ahead and click this and look at there it highlights right there on my rendered web page in this browser where that issue is. Now if I want to know where that is in the HTML I can bring up the dev tools to take a look at that and it tells me to use control shift eye when I hover over that to bring up my dev tools. Now let me just scroll that back into view and it has this link here viewed code snippet in dev tools so when I click this code now that they're already open it's going to take me right to where that lives in the HTML so that makes it really easy for you to go back to your web page and figure out where that is in the code. And then alt text for images so we're going to find that under text alternatives under non-text content and here it is image with no alt attribute and when I click there it's now highlighting my image of fresh strawberries on the page and if I open the dev tools and click that link again it will show me again in the code where that lives. So the next issue we had then was color contrast here it is under distinguishable so when I click this it's actually going to tell me that there are five occurrences of this so when I look at this I see that there are a lot of issues here that are in the template that I don't necessarily have control over but if I go to the very bottom one note that it says poor contrast so when I click that it takes me to my box that has that black box with that dark gray text again so it points out where that is on the page. And then one thing different about this plugin that the Firefox doesn't have is it actually tells me about the link text so if I go back down to navigable and link purpose in context so it's kind of interesting it points out that click here link on the page it's not pointing out to learn more link which is very interesting because two days ago it was finding both of them so it's just another clue that while these tools can be very helpful in helping us fix our accessibility they're not always the bead all end all and it really does need a human to discern whether something is actually an issue and it's not maybe going to flag everything every time and then as with Firefox as far as broken links and misspellings we're kind of out of luck on that so this platform is not going to give me give me that kind of information. Okay so let's take a look at the actual site improve platform in the web platform so what I've done here is I already have this page loaded because I did a single pet page check on my site improve demo to make things simpler for our demo it's already completed and what I'm going to do is I'm going to go ahead and open this in a new tab so when this page loads notice that it gives me an interface it looks a lot like the chrome plugin doesn't it it loads where I have the all of the information for the checkpoints on the left side of my screen and I have the web page in view on the right side of my screen so in looking at those issues on the demo page again heading structure was the first thing we had and I'm finding that here again under navigable section headings and when I click on it here headings not are not nested properly again it takes me right to this heading structure heading that is out of order the difference between this and the chrome plugin however is I don't have to bring up my dev tools to see where this is in my html code I can just hit this html button and it will take me right there so that's kind of handy so the next issue was the alt text for images so under text alternatives non-text content it's actually not showing me this time so this is an issue we often have with this platform they are working on a new engine that we are going to be switching to sometime in the near future but we have not done that yet but I'm getting a false positive here no occurrences of this issue detected so again it just points out that even the most robust tools aren't always perfect and it really takes a human to be able to look at what's going on so color contrast under distinguishable I get color contrast is insufficient oh let's go back to the page content view here so it's giving me all of these areas where the contrast is not sufficient again and notice how it starts to paginate them so it's finding more things actually I think it's picking up on our previous issue here so we're getting some of those code or the examples that it was pointing out highlighted but here's my poor contrast one here and it's you know goes right to highlighting that and again I can see where that lives in the html code so going back to the issues list we also had link text which is going to again be under navigable under link purpose and context and it says link text is too generic in its current context and when I click there again it's only finding the click here link for some reason it should be also flagging the learn more but it does give me a good start on where where to look for things and what things to look for and I can again see that in the html code so these are the issues that we saw or or not saw in the browser extensions but there are a couple things that this web platform does that the browser extensions don't even touch and that is the quality insurance that I talked about earlier so on my quality assurance tab it gives me broken links and misspellings so when I click on broken links it takes me right to that broken link on my page and it's pointing out where that link is broken and again if I want to see that in the html it's pointing all of that out there for me too it also does misspellings or what it thinks might be misspellings and so look it found my misspelled link so sometimes that can help you fix your broken links too if you happen to do a typo as I have done here and again I can go look at that in the html if I want to but also what I'm seeing are some misspellings in that list that I had here so as I go into each one of these I can highlight where those live on the page as well so this is really nice because it gives you a couple extra things to check for to ensure the quality of your website so let's just take an overview of them all so I've got a I've got a document up here for a site improved comparison in the first column I have the issues listed that were on my demo page I in this two middle columns I have browser extensions firefox and chrome and then the last column is web platform so the heading structure is reported in firefox chrome and the web platform as well as alt text for images and color contrast when we get down to link text we're looking at chrome and the web platform if we want to find those and then with broken links and misspellings we don't get any of those in the browser extensions but we do get them in the web platform so my comments about them in general would be that the firefox plugin is not really very robust the chrome plugin however is very robust but the most robust one is the web platform so in firefox it doesn't dock it it obscures content the resizing is not saved by the way so every time you refresh that you have to resize it oh I forgot to show you about the filters that were in there so in each one of these there are actually filters you can do to filter by conformance level and at UW we go for AA you can you can do it by the expert level responsibility so this can be kind of iffy for us at UW because so many folks wear so many different hats but site improve is attempted to break down each task into where where it what role it thinks does those tasks and then this one actually lets me select elements but I don't have anything selected so by default it's it's not filtering down on everything it's giving me everything it's got the chrome version does that as well but the beautiful thing about the chrome filters is if I close my browser and I open it back up it saves whatever I select in here and then so going back to the comparison sheet so again the firefox doesn't dock it obscures content resizing is not saved the filters are not saved it does have a code view and explore for the visual impairment views which we don't really see in the other two versions and as an overall suggestion I would use the firefox browser plugin as a complement to other tools I would not use it as a standalone checker because there's a lot missing from it the chrome one is more robust it docks to the left of the window it doesn't obscure the content it auto sizes to the window height the filters are saved the code view via the browser tools as well and it gives you more checkpoints the most robust the web platform we have web pages in the platform it doesn't obscure the content it auto sizes to the window size the settings and filters are saved you again have a code view it's a little more um easier to use the code view because you get a direct link to it and it and it has most checkpoints so that's kind of where we're at on comparing and contrasting the three of those so at this point I know terrell has some great tools to show you thanks i agree there are there are a few questions in chat that I think have all been so we're so we're good there a couple of them one one was about how to how to get access and and that was a person from you know medicine and so they they do have a separate license but for the central license we actually have a fixed number of pages and but we are always trying to make room for people that are interested and and I shared the url where people can go to the siting group page and there's information there about how to request access so now meanwhile if you don't have access to siting group there are lots of tools that are available for free still and that's what I want to show just give you a quick quick look at a few of those and before I show tools themselves I wanted to show once again the tools and resources page which is again at uw.edu slash accessibility slash tools we have lots of information here including tutorials we can learn about what accessibility links directly to the guidelines and standards and then we got links and in some cases some annotations about various checkers and browser extensions um code validators color checkers and an assistive technologies and much more so check this out it is the definitive resource um from us on tools that we um you know we feel are are useful and should be a part of everybody's arsenal and once again you know try try many different tools because they all give you a different perspective on your website so the site that I wanted to look at actually in demonstrating these tools is one that we developed for the purposes of um accessibility demos it's called accessible university now I'm actually looking at a local version currently but if you just google accessible university demo site then you should land on this it it is maintained by us on a couple of grants but the heart of it is that we have an inaccessible university website web page home page and we have an accessible version of the same page so I've got both of those pulled up here there's the inaccessible version here is the accessible version which basically looks the same has all the same content but it's coded in a way that it is accessible so in some of our other presentations we actually go through all the issues that are are here and demonstrate what accessibility using this tool um the third you can do this yourself actually the third um page in this set of three um page number two is a list of accessibility issues so if you go to that you actually see what all the problems are and explanations of those problems and um and information about how to fix them so the solutions are there too and there are 18 known problems on this page so since we know that there are 18 problems and we know what those problems are then that really comes in handy when we use um accessibility checkers because we can kind of compare you know what we know with what the the checkers are communicating to us so the first one I want to show is WAVE which is from web aim that is a group out of Utah State University really have great resources related to web accessibility both just things that you can learn from as well as tools and we've got the web the WAVE plugin um like site improve they have a firefox plugin and a chrome plugin and the chrome plugin does have some more features than the firefox plugin um but if we click on the on the WAVE icon then it gives us an overview in the summary side of things it says there are 21 errors um so actually three more errors than we know about there also are four contrast errors and then it gives you some additional information some alerts which would be things you need to review manually um and then also structural elements and features um and aria if they're using so um so this and then there's an icon there are icons scattered throughout the page that you can click on to explore and you know and learn within the context of your web page what all the issues are um this does get a little bit overwhelming particularly if you have a lot of errors and so if you go to the details tab which I can do by clicking on the details tab or by clicking the details then you can actually turn things off so if I don't want to see contrast errors right now and I don't want to see alerts or features or structural elements I just want to focus on those errors that cleans it up a little bit and then you can you can focus in even further um if I I don't want to see all these missing form labels right now I just want to focus on missing alt text so so I click on the first one of these and it it highlights the image that is missing alt text so I know then okay that accessible university banner at the top is missing alt text I need to fix that um so and so forth you can just go through uh with each of these issues you can you can navigate through the sidebar or if we do actually show the label label missing labels down here you can click on any icon and it gives you more information as well um and you can actually you can go to reference page where they describe the issue in more detail you can click on code to see the actual html that is causing this problem so lots of different ways to to view the issue and you'll find that every tool pretty much has these same features you can view the code you can highlight the problematic element on the page and you are provided with some reference material to learn more about this issue and that in particular is kind of what makes and breaks the different tools I think is how well do they explain things so just so do follow up on that and you try to learn about the issues that it is communicating to you and you probably will find that you like how some tools describe things and don't like how other tools describe things one particular issue I want to point out uh with wave is the contrast checker it throws up an icon for every contrast failure and it turns out it's the menus the all four of those menu items fail look at contrast requirements the nice thing about this is you can change the color so this is the foreground here that's gray and then that's on kind of a cream colored background if we decide we want to fix this by making the text darker then we can just go down a little bit gradually watch the pass fail ratings until we attain a pass rating for level 2a this is what we're trying to meet level 2a normal size text and we find that 575 e75 that that hex period will meet our needs that passes and it's within the same color family as the original so then we just plug that value into our style sheet and we fix the problem so that is super helpful you know to have not just reporting errors but actually giving us a tool that enables us to fix the errors so that's all I want to show with wave at the moment so um and the next next few tools I want to show on the the accessible site because no they won't show up with anything on the not accessible site and the first of those is accessibility book marklets so I have up here across the top of my browser a few book marklets that I'd say these all have the separate book marklets but they provide particular functionality related to accessibility so one of those is headings so if we wanted to see the heading structure of this page what I believe it should be visually so that it forms an outline of the page and doesn't skip levels is accessibility of that banner you know maybe that's a heading one and then you get several others that seem to be peers in one another welcome bienvenido in Spanish can you spot the barriers au enrollment trends those all seem to be h2s so if I click on headings then it outlines the headings and I see that indeed this page does correspond with what my visual expectations are the h2s are h2s in fact there's another one over here for the apply now form and there's an h3 inside that that allows you to jump directly to the security question um so that's just a quick way to see the headings you can do the same thing with aria landmarks um it identifies them it draws a boxer on them super helpful it also has the means of checking images for alt text and checking accessibility forms and lists so another tool that can do all those same things but does a little differently is the web developer toolbar this I find to be super helpful because it just has so many things um and really it's designed as the name implies for web development yeah any anything you want to do to explore your website or anybody else's website you've got features here to allow you to do that and accessibility just happens to be integrated into it so if I for example go to outline I can outline the headings and it gives me kind of a similar um interface to what we saw with the book marklets but but a little bit different and I actually find that this is a little more robust so it can find headings on dynamic pages where the book marklets sometimes don't find them and also if you scroll the css that it added to the page stays in place whereas with the book marklets css tends to get a little wonky um if you scroll so um oops wrong icon um another thing you can do is look for alt text on images different ways to do that but the one I like to use is display alt attributes and then it um it actually shows the alt text next to any of the the images that are here so you got accessible university for the banner you got previous slide next slide for these buttons and so forth um the other tools I want to show are in the dev tools that come with the browser firefox has these two but different um and just be font up a little bit there so you can see oops that might be a little too much but I can't see my menu options um so the two the two things I want to show that are accessibility related are lighthouse so this is built into chrome you already have it and when you select that lighthouse will generate a report based on a lot of different things performance progressive web app best practices accessibility seo you can do desktop versus mobile so if we just look at accessibility we click generator report it warms up analyzes the page and it then gave us perfect score of 100 that's because I'm on that accessible side of things if I go over to the not accessible and go to dev tools and run lighthouse accessibility reports then it only has a score of 52 which actually since this is intentionally you know the worst the least accessible that we could make it arguably should be a lower score than that 52 is kind of generous I think um but it um it then provides um information about um the things that it observed there are issues related to navigation there are issues related to contrast it's kind of a kind of a high level um the html element does not have a lang attribute to identify what language this page is um if we look at let's say the contrast issues just open that up expand that and it shows us an image of the failing elements that's handy and if we click on that it zooms in a little bit on it and it also gives us the failing element um which I thought we could click on that to go to the element but not seeing that at the moment um but anyway this is um you know this has some nice visual features and and it's just a different sort of interface for reporting you know the same sorts of issues that you might need elsewhere but once again likely it will be communicating some different issues as well one final tool I want to show is axe dev tools um this is available as a free plugin but they also have a commercial version in there they try to get you to upgrade pretty aggressively so that gets a little bit annoying but it's a good tool and the axe engine is widely used as an api to drive a lot of accessibility tools um they they it is an open source um accessibility checking engine and really does probably as good as anybody at um you know sort of advancing and innovating the state of accessibility checkers so so it found that there were 58 issues um and you know I can go through and I can find the different issues I can take their guided tour of the various issues and um and it kind of walks me through all of them um lots of lots of the same features you can look at code you can look at the object on the web page it gives you know information explanation about the various issues um and it's kind of neat that you can also hear in the dev tools console you can it'll take you right to the source code you can make a change right there in the source code and then this value will hopefully decrease if you get it correctly then you'll see that number go down so you can right there in the dev console um make changes in what your score get better and then of course you've got to go apply those changes to the live site but um but it's nice it gives you that live feedback so I'm going to stop now we only have a couple minutes left but I want to respond to any questions that came in and chat are there you've been following those animals yes um we don't have any questions everything that's been asked has been answered up to here okay so let me just ask then are there any questions I'm not seeing any okay well let me let me go to I saw a somebody has a cracking is it Sarah has a cracking logo it's actually asked today whether the cracking website is accessible and so we can use this opportunity for me to do a live check and I'm just going to use the wave tool wait for a moment and the cracking website unfortunately has 147 errors so then we could go through the details and we could find out what those are the 25 images missing alt text 111 this is the biggie linked images missing alt text so they really you know have got a lot of work to do related to the alt text and and I don't I don't want to blame the kraken specifically because I you know I want to be a kraken fan and I do think this is NHL all the team websites kind of look the same they're all using the same template and so um this really is probably an NHL issue that they need to crack down on on the the lack of accessibility across the board on their websites okay well um that's all the time we have today this this session is going to be up in the archives so I encourage everybody to send others towards this presentation if you think it's going to be useful for others we'll once again go to our accessibility slash events page to find out other opportunities to learn more about um IT accessibility and all of its flavors thanks everyone