 So the original Presentation was accessibility testing in the CLI But or like you adding it to your CI but that In the process of actually testing didn't work out so well. So till they are no, you cannot do that yet for free Yes So All right, so this is accessibility tools as of April 2020. Let's continue. So what does a 11 y mean? it just means accessibility in No, no merriman like canine for canine canine or W3c for that that consortium stuff like that so you can pronounce it as a Ali or accessibility. Yeah, if you haven't If if you were wondering what accessibility means So it's quite important right now, especially that most of us now working from home and We have been looking at a lot of graphs So how Well, how accessible those graphs are for coated 19 right now Hopefully they are pretty accessible and All these Forms and Ajaxi and Very very dynamic websites How accessible are they and how accessible a mobile device? Websites on the mobile devices So that shouldn't be an afterthought It still is for many companies, but it starts with the design actually Some news from accessibility there was a draft out for accessibility 2.2 CAC 2.2 and one of the things is focusable area. So you cannot do what material design did to the focus buttons like if you can you can barely see a bit of a Shadow on those buttons you cannot do that now there is a strict Guideline there should be a minimal area. There should be a focusable contrast and the line should be quite Visible the focus line. So be aware of that. It's coming probably in a couple of years or maybe older Yeah, probably after this Conundrum with a virus That will delay That guideline a bit So next Which tools do you use for accessibility audit? So There is like 140 tools listed on the website That's quite a lot to try to find out if you need to test your website Is it accessible or not? I chose eight three tools and some cli tools that I thought oh, maybe I can just Incorporate it in my ci run it on schedule and say, oh, yeah, it's You need to fix those things on the website or it's all 100 percent so i'll talk about that and Yeah, the accessibility automatic Tests are only 20 to 50 percent Just like some covid tests Reliable, but I think they're actually less reliable than that So first tool Is wave it's very very popular It's quite the basic tool It actually has an issue Uh, this is how a website looks when you activate a wave plugin. It's it most of the plugins here chrome plugins You just install it on top of your chrome browser It tricks empty alt fields as uh error, which is incorrect It doesn't detect most of the contrast especially if you have a Background image on and text on it. It doesn't depend uh detect that Something happening But it has a really good indication what it has in the details what sort of Items it went through And shows you where they are and you can quickly Navigate to those items. So this is one tool So next is x by dq They also do a very basic audit. Uh, just contrast missing labels Um, it's a bit better with the contract detection You can export all the um errors But you have to uh, subscribe to the service It's a bit difficult to navigate through all the errors you actually have to click through So, um, it's a bit annoying Uh, then there is a quite a nice tool old tool, uh, fkac accept accessibility audit Um, it has detected Contrast issues everywhere and also it detected a focusable element that are not visible To users so you can actually tap to it But you cannot click on it if you have a mouse. So it's uh, um, like, um in your Um Accordion you would have links inside of the accordion You wouldn't want user to be able to tap to those links if the accordion is not expanded So here is the same. So this is quite a handy tool to check for things Um for these kinds of things For these kinds of errors. So I found that That's quite handy And you can also export all errors. It's html report so Next one is arc tool um, it's um quite good Uh, still quite basic, but it has a really good indication of what it's testing Um good contrast detection um And you can navigate to every Error or warning on the page as well. So you can see where the issues are and Clean them up as well So then is accessibility insights for the web uh, it uses axe as a Just to run or as x l i to run Um the basic accessibility tool Uh audit automatically, but it has the visualizer for your tab order Uh, which is pretty cool. So that If you need to produce a report to a client, um, or to your, um Um Department just saying that always that's not accessible. So you can see on this example You cannot get to Actually questions to the links At all they are not keyboard accessible And you can do a screenshot and show that how it works. Also, it has a manual Accessibility report. So you have to go through each Of the so it has automated checks Uh, which pass and Yeah, they're very easy, but you have manual Every single tag requirement you can go through manually and check if it works or not it's Takes a lot of time, but then you can see every single Uh issue On your website You can put comments and things like that in there as well, but it um You might want to probably get either a set of pages that you want to check not just one page because one page just One page and um, it might not have all the components that other pages might have Next one is lighthouse and lighthouse is building tool into chrome Um, I thought it used to be pretty good But I think maybe they did an update on it or something that and it's very basic and it Does not do a good job. So I doesn't detect Issues with even contrast Yeah, so It's something that you can pretty much dismiss and Firefox I think in October last year they released Uh an accessibility inspector It's still a beta version and only checks three Items keyboard navigation labels and contracts, but it does it really well So the keyboard navigation will um detect If you if if this item is only accessible by Uh a mouse and it's not accessible by a keyboard. So it will detect that and it will fail the test Um, the contrast is pretty good and the labels is quite easy is like if your Select box doesn't have a label Um, then it will fail as well. So yeah, it's um Quite unique in the sense that it detects something that other Tools to love detect Yeah, so this was eight Different tools and Here's the usefulness of them. So first, I think um accessibility insights per verb is quite useful for visualization of Of the tab in order and you can actually create a report manually Which is quite layout laid out really nicely and you just follow step by step Uh, so you can get that out Then my zilla firefox accessibility inspector detects those mouse on the features Uh, cargo accessibility or did detect the hidden Items that you cannot click on so that's vice versa of the firefox And you can use arc toolkit wave Um or x they're very similar Um I would probably use arc. Uh, it just has a Nice layout I guess Lighthouse as I said quite useless Also, there are no tools that detected focus state Um as the fcac 2.2 might come in with the focus like can you actually see where your mouse is Um, so neither of those tools detected those issues And the cli tools so some cli tools that I found was pauli I just do an npm install around it on your website and see what happens Um, yeah, it's pretty much useless at this stage um Detected just one issue out of 128 that x the cli x in the browser detected Uh, x li detected in cli it's very basic and detected five issues versus x on uh in the browser 129 like it's 129 because there's a lot of um Contrast issues were detected that counts every one of them as an issue But still even it's um quite a few quite a big difference and lighthouse li gives gives pretty much everyone 100 score. So um not Not not there yet I was quite excited to think about like oh, it can run every day and give me a report just like on How good or bad accessibility changes with more content, but yeah, no um Unfortunately, not there yet and also If we have pass us as um, I might dub a pass Which is accessibility testing as a service. So there's quite a few um services um That you can pay for and they either will run it um Automatically crawl your website and pass for accessibility Because all those free tools are quite limited. So if you are really serious on accessibility you can um subscribe to some of those like for example Hope dot tech it's um like new relic for accessibility. Apparently it will do everything for you I subscribe to dino mother um Just as a test run you can subscribe for 14 days for free and see what happens um It gives you a really nice um report and break down crawls all the website with all the content Um and shows where the issues might be So it's a good way to test But again, it did not detect any of the issues with the hidden um Hidden items or not accessible items by um Um by keyboard so Uh, the value of it will be like the value of All of this will be in more of research and checking what actually they do and how well they do that Yeah, so this is my quick skill about all of the um accessibility testing tools that I um had the chance to look at in the past couple of weeks And i've got some resources to look at um at all the things that I had a chance to look at and um how to do the accessibility testing in new cli and integrated into your um uh continuous um Delivery pipeline and things like that so um Yeah, so the um basically basically the um um Sort of take away from it. It's still quite a manual process. It needs to start from um From the top from the design from the um development um of your project that you want to Have the accessibility and it it will be really long and painful process of actually testing retesting and um Trying to port what's already been developed into um Yeah into being accessible. Yeah, so um how what other tools have you used? Maybe paid tools that you used uh if you anyone can share them on chat or talking um Anything that was quite useful for you morgan says visual area All right, anyone else use the paid tools Visual area as a chrome plugin helps print out area elements on page Dwight says I just use W3C standards manually Yeah, I remember. Okay, cool. So there were a couple of questions. So the first was does wave only work on chrome? um, I think wave has a plugin for Firefox as well Yeah, it has a firefox plugin And the second question was but I think you mentioned that if the tools are free or paid I think you mentioned most of them are free. Yeah, so I did the review of only three tools and the last one was um Was something that you subscribe but yeah, it pretty much gives you this just a nice report With nice graphs, but exactly the same Uh result Yeah, that's me