Test Site in Accessibility

Pragati Sharma: Now moving ahead, so the application that we would be using is a todo app, so this is basically an average gives you the flexibility to create your todo list. So now, if I want to say that, sanitize your hands, wash your hands. That's my todo list. And as soon as you complete that, you can strike these things off. So now this is what we are going to automate today, let me refresh this. For this, like I mentioned, we would be using Axe, let me give you a manual demo of what we are trying to achieve here. For that, we would be needing. A plug-in called axe coconut, so this is a chrome extension, you can simply go and add this after adding this go to your web application that you want to test for accessibility issues. And here, core axe coconut click on analyze and you'll figure out the various accessibility, vulnerabilities that your application has now this application has 4. Let me walk you through a few of them and then we can get started with the hands-on automation, so this one shows that there is a lack of sufficient color contrast, now think of a person who has a poor vision for that person this background and foreground seems to get merged and he or she is not able to read that out properly. So now this is an issue that has to be solved for that he'll have to change the color of your foregrounds so that there is sufficient contrast. So that it doesn't become incomprehensible. Now, if you see that there are certain tags so now this is a category of color which is getting violated and these are different guidelines, so now these over WCAG standards and these are like different versioning of standards as well. So now you'll have to go ahead and ask your product owners as to what have you complied to and testing that we do should be according to that, because you'll have to prioritize our issues. According to which standard are you complying with. Let me talk about some other issues. Now, this issue says that every element should have a lang attributes so lang is the language attribute. And this is a category that is mentioned as well. Another thing that we should understand is why is this issue important? This issue is important because people who cannot see who are visually impaired, so they would not be able to see it, but they would be able to hear. For that they use tools called screen readers that are various screen readers like in mac there is an inbuilt screen reader called voice-over then there are other screen readers like NVDA. So you can actually make use of those screen readers and you can navigate through your application and figure out what every element is by hearing it out now, if you do not provide a language attribute your screen reader would never come to know whether the things they did on this application are in English, German, French. What is the language? So it becomes all the more important for us to provide this attribute. And in case you don't know more about any issue, you can simply go on doing more and it would give you entire details of how to fix the problem. Why does this problem even matter? I'll go back and you'll see that we have impact serious, but not this is a serious issue. This one is a critical issue. The other one is a moderate issue. Then again, we have a serious issue. So this would help you to prioritize your issues in a way. 

Comments are closed.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}