Testing Web Accessibility

hi everyone and let's talk about testing web accessibility today so first of all I'm going to introduce myself my name is Adrienne I'm from Spain I'm a team lead and a front-end developer at my company and I'm a huge accessibility advocate and you can find me almost everywhere under my surname so accessibility I got always the same question about what is this a 11y that we see all across the Internet so a limb why is the International acronym for accessibility and this is because there is 11 letters between the a and Y in the word accessibility so said that I'm gonna use this a lot in the presentation so why is so obvious in the real world that those four situations are completely wrong so in the first tools there is a ramp very very steep there is the stairs at the end of the room in the third picture and in the fourth picture there's a ramp that is totally unusable so why is this so so obvious that this is wrong well for example a different situation someone comes with a wheelchair there is an accessibility button perfect this person poses that they up the door opens automatically but surprise there are stairs so it's so obvious that this is wrong but when we move to the online world this is not so obvious so web accessibility is a sensor for developers to not exclude anyone when we developers develop our applications that means that our tools our website every technology that we use is design and develop as well for people with disabilities so they can use them so let's see an example we saw some examples in the real world let's see something in the online world so you go to a website in e-commerce and you want to you want to see you want to check your latest purchases so you call the support and they can help you the typical answer could be all you need to click in the in the button in the top right corner or maybe you want to change the your email address or any settings in your profile so they can tell you you need to click in the button with the engine icon but for blind people there's no such as top right corner there's no such as and I can that look like an engine so we need to have this in consideration when we when we develop our applications let me give you some numbers couple of years ago we were around seven point six billion people in the world and more than 1 billion people live with some form of visual impairment it could be using glasses it could be color blindness or it could be hundred percent which is totally blind but when we develop our our online businesses we want to reach as mass people as possible so we cannot forget that this is our audience as well I'm not going to talk about developing web accessibility today I had a different talk it's called how does your website sound like you can find it in YouTube but I'm gonna talk about testing web accessibility how can we make sure that what we develop is accessible ultimate tests are very cool and they can free up your QA team your testing team from manual tests in every part of your application but is not magic they cannot automatically make your site accessible we cannot forget that these automate testing can only detect 20 to 50 percent of the accessibility issues so we need to treat this automate face as a part of a one bigger testing process as a one-step and where manual testing is as important as the automated testing so I've created a very simple application in react with three tiny component which the first one is a button the second one is a fake button which is an anchor link with a roll button sneak-peek never do that and the third one is an image so n in the entry point of the application I put a bunch of error so let's see if we can find and how can we detect those errors with some ultimate test tools so I divided this presentation in three different blocks the blocks for me is what I use every day so I can test while I develop I can tell you I can test after the I develop and of course we are gonna talk about these manual tests that I've said before that is asking about my test let's start with testing while you code so since I'm using a react application to show you some tools I'm gonna use the first one is react acts reacts the acts family is a library is a family of tools they query University of the equal apps create it right developed you can install it as a developer dependency in your application you can use NPM or yarn depending on the package management that you use you need to export this function this library only if you are using an environment which is not production that means you're exposed these logs and of course you use the react demand you pass it through the axe engine what is this library doing in your browser when you execute your application in the console log of your browser in this case I'm using Chrome I'm gonna see all the issues that my application is having as some kind of features let's say so one is that if you have several times the same issue is gonna be grouped those groups are telling what is the error so for example I said elements must have sufficient color contrast because it's not double layer to play or images must have an alternate test they are gonna give you as well a severity level from minor moderate serious and then with critical so this will give you more information about the priority of the of of when you need to tackle these issues it's gonna give you as well the information of where is the error so it's gonna give you the HTML element in your code where the error or the issue is appearing and I think the main feature of this library is that it's gonna give you a direct link to the dayquil university comm which is the official documentation from Dec way to help you learning more about the issue in helping you as well to fix the issue so it's gonna give you all information and all details about how to fix this issue you can use as well linters so for those who don't know what a linter is a linter is basically a conflict file where you put some rules and you tell let me know that I'm doing wrong when I am doing wrong so let me tell you that I'm that I'm making a mistake on this rule then you can you use a plug-in for accessibility so in you need to configure in your ears limit our situation file in the config file that I was saying before you need to include it in your plugins in line number 2 and in line number 12 we say extends and extending the recommended rules of the accessibility plugin which with this line it would be enough all the rules I prefer to extend my rules to define some parameters that's why I have some of the conflict parameters in the rules section and of course hmm as every linter is gonna show you in the code editor in my case I use visual code when you have a issues can I so this way we read underlined when you hover with your mouse is gonna tell you what is the issue and as well is gonna give you the same information in the terminal when you run the application so it's very useful to avoid shipping code that is not accessible during the development process the third one that I want to show you which prolly is my favorite is next acts so again we are back to the ax family and yest for those who doesn't know them is a JavaScript library to create unit tests in this case you can use yes ax to create accessibility unit tests so you need to install this as a developer dependency the same as the other ones and you can create a simple test so the one that I have created import the whole application so the whole app from the App tsx file I expect not to have any violation obviously and what I'm doing we using the react on server is to transform my whole application into a string and then I'm throwing the string into the axe engine and of course again I'm expecting not to have any violation so when I am going to my terminal and I do MPN run tests or a yarn run test and I can see the tests running and I can see pretty much the same information that I show in the react axe in the console so I'm gonna see what is the error I'm gonna see where is the error in my HTML it's gonna give you a bit of information and of course again this link directly into deck we anniversary calm which is again the official documentation so it's very very good library so those are the applications so that the libraries the tools that I used while I develop but sometimes we you are you can arrive into a company a mature project and they told you we've never done any accessibility work in this one or maybe you tend to think that you're done with your code so you want to be able to test the whole Dom structure of your application so in this part I'm gonna show you some tools that you can use in the terminal so you can pass the engines or the testers over a whole HTML or the over a whole website the first one back to the axe family they develop a CLI so you can use this into terminal in this case you need to install it globally in your machine with the task G and you can run it easily in the terminal put an axe followed by the URL that you want to test so in this case I'm testing the Stack Overflow website is gonna start a chrome headless instance and it's gonna perform all the tests free what is it gonna give in you well I mean the typical thing from axe again what is the error where is the error it's gonna give you a trace of the error and again the link to the acquit University so you can learn a bit more about this very similar tool p11 wine again the same as before you need to install it globally in your machine it it really works the same as as the axe one so you need to put pale my followed by the URL that you want to test and it's gonna the same test basically it's gonna run a headless browser I don't know in this case what they use and it's gonna give you what is the error one more thing that they are giving you is the principle on the WCAG that you are violating it's gonna give you the whole trace in the HTML Dom and it's gonna give you the exact element that is violating this principle this case of course is not access you don't have a direct link to the documentation is your duty to google it and do your homework and find out how to fix those those issues and as well you can run this against your localhost so you don't need to deploy anything to a test environment or even to a production to be able to test this pa-11 why as well has a very interesting feature because sometimes I heard people say like look I mean I have like 25 URLs I don't want to go one by one to test all these all these URLs and I don't want to put this into my into my processes right so you can you can create a JSON file a config file with some parameters so if you see the JSON file that I created I have three URLs so the first one is just a plain URL for Stack Overflow the second one I pass a time out of 50 seconds which is pretty much actually and I'm taking a screen capture what I'm can use for reporting purposes or maybe you have a visually regression test and you can use it to compare screen spots but I think the the biggest feature of T of the PLM my CI is that you can perform actions so you can click in an element when the element is loaded and this element you can find it through a CSS class or an ID in my case and navigate them in through a different part of the application and I'm taking to screen in this case you just need to put pa-11 why does CI is gonna look into the root of your project tool to find this JSON config and it's gonna perform the three tests so in this case it is found in three URLs the first one is gonna be very quick the second one fairly quick the third one is taking a screen capture then is navigating through the other one creating another test and making another screen capture so and the result in the terminal are gonna be pretty similar again what is the error where and what is the element that is violating the the principle you can see in the root the screen captures that it was taken lighthouse lighthouse is a application or a tool created by Google and is included in every Google Chrome browser but as well you can use it from the terminal maybe you want to include this into your releasing pipeline for example right or your continuous delivery continuously so you can use this as well in the terminal in this case again you need to select global in your machine and you can pass this parameter which is the stats view and with this one what it's going to do is after the test is gonna present you their results in the browser directly so in this case instead of a headless browser it's gonna run a full instance of Google Chrome and it's gonna do a lot of tests it's gonna do perform intense it's gonna do no JavaScript test its gonna do no internet tests it's gonna do accessibility tests responsive design tests so it's gonna create a full report at the end you're gonna end up with an HTML report you can click on accessibility and the same as the other ones is gonna give you what was the error a bit of information or how to fix it what exactly element is the one who's provoking or causing the failure and you have some click so on some link and to that leads you to the official Google documentation about accessibility in this case so I think I mentioned the main features in my opinion always of every tool that I show you how to test it on at the beginning we said or I said that only twenty to fifty percent of the issues can be captured via access automated tests so manual test is as important as the ultimate test so I'm gonna show you some of the extensions that I used in Chrome in my case it has in Chrome on how to test manually the accessibility of the websites that we create so those are some of the ones that we use I'm gonna show you one by one going back to the query to the axe family they develop a Chrome extension so you can find it under the development tools in your in your browser you and just need to click in and is gonna perform a full analysis of the website in this case again in Stack Overflow and it's gonna give you those information that they were giving you in the terminal what is the error it's gonna be grouped by the issues and in this case it's gonna give you those in this information that you can get in the Decker University in directly ended up in the extension of course you have this learn more link that leads you to the to the to the Decker University but you can see almost everything now from the browser very similar extension is the a or C toolkit you can find it as well under the development tools it's gonna do quite similar so you can perform these resin tests you can see the families that they are gonna perform so in this case I'm clicking in images and I can see what images for example doesn't have an alt alternator's I can go directly to the to the element and it's gonna highlight it in the window so I can easily see what images are the ones that they don't have alt property ring accessibility insights this this is really a really good extension one feature that I'm going to show you now is they will give you a map of atap indexes in your in your website why is this so important because normally people with is visually impaired don't use a mouse they normally navigate through using the 3d website using the tab key so the tab order of your website needs to be consistent with the content of your website you cannot jump from one place to another one so you need to be need to be sure that the order is the correct one so with this application you can build this map and you can see if it's consistent or not so you can keep on tabbing and it's gonna create this map off of the tab order so you can see if you jump around or you can or look this element is out of the order we need to skip this element because it's not really relevant so I think it's very beneficial to to finally get a full map and take it before sleeping this the website to production wave wave is probably the most complete extension so far but I am that I found it's very quick it's not found under the developer tools I think you can find it on the extension bar so has their own I can you can click and immediately you have the test already done you can see directly in the window all the images that doesn't have an alt the area controls every role that is not a correct one you can see the structure of the headings for SEO as well is very useful you can see the contrast or the issues with the contrast if it's not if it's failing the double layer Triple A you can deactivate all the styles you can see if the Dom structure the HTML is is really consistent and as well you can inspect the code two more into into the HTML code so I think it's quite quite complete this this this tool but not all the time we want to pass this we sometimes we want to put ourselves in the industries in the skin of someone who's visually impaired so I think no coffee it's a vision simulator and I think is a very valuable extension so you can simulate how those people people which is visually impaired will see your website so you can simulate different kind of impairments so for example you forgot your glasses at home maybe you someone will see it like this or maybe someone has some glare in the in the eye yeah you can see some snow in the in the eye or maybe color blindness or plátano Pia so the colors will completely change on not even colors so you cannot rely always in red is danger or bad and green is good you need to as well give some information you can as well simulate some real disabilities right like like central vision or side vision or glaucoma so I think it is very nice application then to simulate how how everyone will see your website right so those are the tools that I normally use while I develop what I do my my work there are more and I think this is your turn now to dig and research about new tools and if you find some that they are valid and they are really nice please send me a tweet with them because I really want to test them the application that I created for the first part of the presentation is under my github so you can find it there and then you can clone it and and play around with it all the slides of disabilities to this presentation and any other presentation that I did our under speaker comes last my surname Bologna on you can find it there if you don't like to we watch the presentation again and you prefer to read it I've wrote a three article series in my blog so you can read it there and you can see the code and you can click some links and play around with it I want to take advantage and recommend you a really cool course and it's not a technical course is an introduction to web accessibility to everyone and it's official but the w3c is under EDX and I think they extended the the period until September so I think is a very nice introduction on the accessibility world so you can do it and it's for free so please I encourage you to do this and I want to leave with a couple of sentences that I think is very important a couple of thoughts Trenton Merced one day is not just about this disable user being able to access your website it's about everyone being able to access your website you don't know if you forgot your glasses today if you don't have your mouse with you if you have kids and you have your kid in one hand and you you need to use a website with with a with one hand only with the tab key or some months ago I dropped my computer so my my laptop was completely black and I needed to perform some actions to buy some tickets so in this case when you when you're not a disabled users but you are situational disabled you realize how an accessible websites are so when you develop your application your websites please be aware that not only you're not developing only for one set of people you should be able to develop to the whole audience so everyone needs to be able to access your website because accessibility is not a feature this a disability is not an option so we cannot treat accessibility as a feature as a post process we will do it later because later never happens so we need to treat accessibility as part of our development process the same as we do with UX review the same as we do with testing with selenium test end-to-end test the same as we do with specification it needs to be a inside of our daily process because it doesn't take longer to include an aria-label into a button with a non meaningful name it takes you 15 seconds to create a meaningful text in an alt property in an image takes you 10 seconds to describe what you would you see in the image so if you have an image with a person using a computer takes you 10 seconds to say a person using a computer so it is not a model of time is not a matter of costs doesn't cost anything HTML provides everything you need everything is standardized the w3c is doing an amazing job here so it's free is quick and is is it needs to be done should be a must so just keep this in mind when you're developing your applications and thank you [Music] you

Channel: UXDX

Views: 2,033

Keywords:

Id: -dBsgG7L2EQ

Length: 27min 22sec (1642 seconds)

Published: Tue Jun 16 2020