 All right, glad to be here. And today I'll be talking about open source accessibility testing with the tool that my team at Carthage is building for PurpleHeads. So before I do that, I'm going to just give you a short introduction about myself. Can you guys hear me? How do we need to push this tree? OK, I guess you're mine. Thank you. Bill, huh? Thank you. What? Thank you. We are reminded that accessibility is true. Yes, you should be making a microphone, right? Thank you. So a bit about myself. I mean, yep, let's introduce. I'm an engineer at Carthage. Myself, I've been working with computers since I was primary school. And I had a visual impairment. And one of the reasons why I'm working on accessibility is so that I hope that our services that we build can be more inclusive and accessible. Oh, right, OK. That always happens. OK, so my favorite topics include DevOps, DevSecOps, Quality Engineering, as well as recently accessibility testing. Yep, and on one type of topics, I do talk about inclusive employment, especially employment, employment of persons with disabilities. So actually the last speaker probably talked about accessibility testing, but regardless, why accessibility testing, right? Firstly, accessibility testing as previously mentioned, and as you know, it's about making testing to ensure that your websites and mobile apps are friendly towards PWDs. And one form of accessibility testing is this thing called automated accessibility testing. Automated accessibility testing aims to help it's a kind of software testing to help you uncover and ensure that applications that develop are accessible to PWDs. And for common types of disabilities include color-blinders and those who are vision impaired. So probably a lot of vision impaired just use things such as screen reader as well as keyboard. And these PWDs use these assistive tech tools not just to access the web and to use the mobile apps. And these services today that we roll out, chances are they're not. If you don't test for these people, they are not accessible. And what my team and I are working on is to create accessibility testing to proper hacks that aims to help you crawl through at least the entire website very quickly, right? You have five minutes at a time to install proper hacks, try it out, crawl the entire website. Are you better yet, right? If you want to make sure your websites, especially like new websites, are continuously tested, you can use accessibility testing as well in CI-CD. And some of the benefits. Well, automated testing actually helps you to make it, you know, make part of your optional requirements. It is not already so. And today you can use automated accessibility testing to help catch accessibility testing issues early with that. And of course, you can categorize accessibility testing to issues such as color contrast issues, things such as improper headings or lack of headings, and you can not catch all these recurring issues and categorize them. And what we support is the console app as well as the interpreter. For those who run it, you can say get up, get back. And we are actually trying to shift a bit more towards the user side, the designers and now everyday users are trying to change the version of it as well. So much about what this tool can do, but how can verbal heads really help? They just tool. So I give you this scenario when a person who is working on your app is not able to understand things such as your shopping cart, your shopping cart research button or your checkout screen is not intelligible to the reader, doesn't read out what exactly the online items are correctly and what happens to that? Well, verbal heads can ask at least if you have done proper accessibility testing with verbal heads, you could find that actually some of these code issues are already flagged out like the partnership in labelled properly or your text should have proper headings. And you can actually pick up on these issues and hopefully with the tool you can actually categorize them by WCAG. WCAG is the web content accessibility guideline. It's a lot to be unpacked so just Google it and you realize that there's a lot of different standards out there, but WCAG one helps you unpack accessibility issues in different categories of issues and you can find out what exact issue the user is facing with their basic website. And with that one of the selling points of verbal heads is you can scan it across pages. Your files is great, but you can use it on one page. It is quick scanning. Every time you use or refer to a page on an X screen verbal heads can help you to do that. And I'll show you how you can do that even for websites that require interactive access. You need to sign in and with that I hope that people will appear and then planning all the issues flagged up and planning as a security roadmap. So the text is purely open source. You can choose various methods of crawling as well as playwrights to help automate the workflow of scanning accessibility. Crawling is for crawling and playwrights is for automating or writing your tests. If you are a functional tester or quality engineer, you know that you can write quickly record tests and then using the same tools out there. And the report we use as core. And most of us say report HTML that we use to help us generate that report. And for the core environment, you can run it across this. You can run it on node and you can run it on GitHub as well as talk. Some of the features briefly alluded, you can crawl a website for accessibility issues. You can then scan the pages either as a website, like a URL or you can provide a website. If you have a new website just throw in the website. And lastly the fun part you can record your own flow with our custom flow feature. All that will be reported through using as core and up to WGCWCG guidelines. So this is an example of the console app. All you do is just once you install it, just run the Ending Node application which is the code index. It gives you a series of prompts for the user to understand what they want to do and do a crawl. And then type in your URL and you can scan whether you want to scan in desktop or mobile and you can start scanning your website. You can scan about 100 pages in less than a minute depending on your type of laptop or period. Then you get a very brief report like what is the accessibility and what kind of accessibility issues are there and we categorize it according to the S4 engine like whether it's critical, serious, mobile etc. And then you can download a report. The report looks like this. It tells you the website. Again how many issues are there or unique issues and exactly the HTML and the issue tied to the HTML elements. So it looks like that. If I zoom in it gives you the impact rating the WCAG clause as well as the description of the issue. And then the page you can click on the page to bring you back to where you were to find out where that issue is as well as the HTML elements so you can do your highlight and inspect element. If you need more help you can just click on the shortcut there and it will bring you to help guide DQ University that lists out very comprehensively what issues about how you can approach it, how you may fix it. So for the people who are developing things like e-commerce sites who are behind our login screen you can use our custom flow feature that allows you to scan a website by recording a series of actions. So this will allow you to scan websites where they are known in certain cases where you need to fill in the form first and then for some pages also there is a new website today where this thing got a single page architecture where the mirror hasn't changed so people can also handle that because we use image based scanning to interview whether there is a lot of HTML elements changed on the screen. So same thing you go to our console you select custom and choose the format of the scan in this case you do a test of scan and choose the website that you want to scan and in a few moments time you open a browser, it's not an ordinary browser this is actually by play right that we use, where you can notice and highlight over elements and every time you interact with an element be it a mouse click or a keyboard type it will record a series of steps. So say here I'm just searching for accessibility and graph text on the website happening and here is the flow that I want to scan right so that I went through different pages actually went through my form element notice that I have to create a search button before the form element appeared so that indicates that new elements on the page and then what happens is we have to then run, scan and repeat that series of actions for you and as it does it's actually scanning the entire page for accessibility issues right and then you have the same format of the report as we saw earlier so how can you start without a simple application you go to our report tree just search for four heads probably one of the top page one of the search you can also scan this QR code for quick installation guide so one of the challenges for non-tech info is how do I you don't understand why is this package management tools so we have packaged a zip file that you can literally just download and double click a command or shelf with file and you will load the entire shelf for you so you can run the command line with everything in stock for you and of course lastly for those people who work in the software development team you want to bring the test scripts that you just recorded you have to bring the crawler into your dev environment how can you do that so we have as mentioned we have our we support Docker so we have a preview or rather we have a Docker file which you can use to build an image and then you can just deploy it either in your favorite or in the same command line right so that's about the tool that we are working on if you have any questions I'll be around for my time left for Q&A and if you'd like to find out more about the work we do I'll scan the left QR code for the proper page on our software development portal and on the right you can link that with me on this here I'm wondering if there are codes open for submitting to request if there is anything that you can craft with yes you are open too if you take a look at the PR and see what makes sense I've got a question that's curious does this make you say you can when you want to test you can have it test as if you are looking on a mobile device yes does that mean a PWA site will be exactly that scenario so you simulate a PWA site as well exactly so if I may show it on the screen do I have to adjust the screen sharing so that audience can see what's on the screen I will go on alright okay great so I'll put the mic down here so say you have a PWA app right you have a URL to the page you can expose and point for it then you can just enter the same thing here you can choose mobile and if you use the CLI you can choose a lot more options like down to the view pod you want to test for the user agent that you want to test for I'll just give the same website this is actually running against an iPhone 11 user agent with the user agent and rendered yes you can so we have the entire list of user agents presented on the repo page so you can choose from there as well this is exactly how fast it all works okay