 I'll take, it should be fine. Hi everyone, good morning. Yeah, I know that, I'm a minute late. Sorry for that. So I was just setting up the settings. All right, so build it right, right from the start. So when we say this, what comes into our mind? So I'm just leaving it open to everyone. So normally when we think about build it right, right from the start, I used to believe in such a way like, it's better to be prevent and protect than ripple and repair, I would say. So whenever we are building a product or it's going to be a website, whatever it is, it should be in a proper way, like it should be accessible to everyone. Yes, I'm coming to the one which is like accessibility. So it would be pretty, what we would like to say is like, it's better to be opportunity to provide everyone to access whatever we have. The web is for all. It's not only the phone who can see, who can hear it and the same way the products. So let us take about a scenario like, a blind person is just trying to cross the road. So how many of us has been empathetic about that? We just feel empathetic for that, right? Okay, let us help him to cross the road. Have we ever thought about that? How can we ensure that it's not happening for him again? How many of us will be there to protect them? So we should be creates such a way like, the traffic lights should guide them so that they should feel the confidence. We should make them convenient about that. They are also belongs to the same world, whatever we are seeing, whatever we are hearing. So that's what the build it right, right from the start. And yeah, it's all about me. So this is my first Drupal event and that to Drupal Con Euro. And this is my first slide, I mean presentation experience as well. And I'm working for Accelerant as a senior quality assurance engineer. This is my team and because of that, I'm here right now. They supported me a lot to be here. So thanks to a bunch of my excellent team for that. So agenda is, why does accessibility matters? And how do people with impairments use the web? So I'm just sticking to the web right now, but still it's a wider options. There are a lot of products for that one. And the next is web content accessibility guidelines. So what are the guidelines? I will not deep dive into it, but still we can look into that. Accessibility considerations and the strategies when we build a product, that's what we have to look into it. And the role-based accessibility practices and the shift-left approach, how as a team we can ensure that we are building it right, right from the start. And the last one is key takeaways. It's just a consideration for all the points which I have discussed. All right, so global accessibility awareness day. How many of us know that? Is there any day like that? I remember, we remember like Valentine's Day and environmental day. So I just would like to know how many of us know about this and what is the date? It would be really helpful for me also so that I can, yes please, so it was about. All right, okay, so it's May 19th. There is an global accessibility awareness day. And this year, 2022nd, we have celebrated 11th year of the same day. And to be very frank, even I came to know that when I started preparing for this slide, I never know that before even. What you should know about the European Accessibility Act. So I just took these pictures into the one since we are just presenting it over here throughout the Euro. But there are different kinds of act. So the UK is having their own rules. United States of America is having their own rules for the same. The same way for the European, they have around 135 million in the people. And this I coded from completely copied from the Google. So I'm not pretty much sure about the statistics. I'm going with that right now. So they have mentioned like 135 million has been affected because of this. And how we can help them. So we need to create a more accessibility society for them to be part of that. We should make them convenient that I'm the happiest person, even I have the impairments. I should not feel like that. There is a lot of sympathy and empathy is created to me. So I had a scenario recently like I was part of an event where it wasn't cultural event and it was the dance event where the people were like deaf and they were able to just see that. I was thinking like how were they were able to do it for the beats because being I'm able to see, I'm able to hear but still I miss the steps at times. But they were practiced in such a way like the beats and we made them like so convenient that we are good to see. We are ready to accept whatever you're doing. And once after the event, I received a speech from the priest and he was asking that if you want to help us don't just provide the donations. Just give us the options to perform. We will get paid it for it. So that is how we need to ensure that they are feeling more confident with that. Next is what's the timeline? So right now, it's in June 2019, they have considered that there are a lot of acts which needs to be considered, all the guidelines to be ensured. Still they have given the time for us. So we have to ensure that all the websites should be enforced by the law by July 2025. I just would like to make one more note again. This is copied from the Google. So I'm not pretty much sure about the laws but still I go with this. And the last one, how does that cover and what does that have to cover? Yes, of course, websites, smartphones, ATM missions, and a lot more to come on that. So everything should be accessible by everyone. And when we say that accessible, it's not like the person who cannot see. Still we have a different segregation for the accessibility. We will look into that later. Why does accessibility matters? Yeah, so far I have explained different scenarios like why it is important. So that pretty much covering this particular slide like those scenarios has been why it is more important. So we are giving the emotional confidence to the people with the accessibility, how they can access everything, how they can see everything. And I have read it somewhere like an article regarding that there were two in the room, in the hospitals. So one person was like completely deaf. Another person was not able to see. So one person was just explaining what he's able to see through the windows, like the greeneries, and it was, he was explaining in such a good way to the other person. The other person was very jealous on that. Why he's explaining that? And once, because he got the window seat, that's what he was concerned about. Few days that person passed away. Then when he shifted to the next window seat, he came to know that the person who was there was not able to see. So he was explaining it with the assumptions he has. So that's what we have to brought into the products which we are working. They should be able to access it in all the ways. Why do you need to make your website accessible to all? So what we need to consider when we go for that. So what are the web content accessibility guidelines and why it is important to incorporate it? How does it work when we are incorporating it? Who is the intended audience for that one? And what are the differences between WCAG 2.0, 2.1, 2.2? So for those who doesn't know about the web content accessibility guidelines. So there are set of rules which has been already decided right now. So those will derive, there are three conformance levels on that. A, AA, AAA. So the A will refer to the severity of that and AA it's the minor level. And the next one is like AAA the one. Which is like for example, a person is having an injury on the back, on the shoulders or something like that. They are not able to access it, the website or any devices. They can't sit for a long, but still they are accessible. They can see, they can hear, they can do anything, but still they cannot hold it for long. So those things has been to be consideration and those rules has been taken into the AAA one. So this is how it's been segregated. So the A is for the severe ones and AA is for the next part and AAA is to consider the injuries and everything. So how the people with the injuries, another person is having the multiple injuries in the arms and the hands. So he's not able to use the mouse. So how he will be using the websites which we are building out. How they can use the assistive technologies with a keyboard or how we can use the voiceover to go through the websites. That is how we need to consider when we are going for this. So when I say WCHE 2.0, 2.1, I'm just going to the 2.2, but I'll just give a glance through the 2.0 and 2.1. The 2.0 was the initial draft to understand that what are the struggles they are facing. So it depends upon that. For example, we can say that there is a video when we are watching a movie, the subtitles has been come. So it has been accessible to everyone. Those who have the language barriers, those who are not able to see that or hear that, those subtitles will help them to understand the video. So that's been considered in WCHE 2.0. That is the one of the example, the severe impairments. WCHE 2.1, we completely forgotten about the devices which we are using. It was only about the internet through the desktops and the laptops. How about the tabs? How about the mobiles? That was not been considered when the WCHE 2.0 was initiated. So 2.1, they started building up a few things. So the Android has having the some voiceover options. The Siri helps the iPhone, iOS options and also the voiceover it's been added with iOS. So those couple of things which has been added for WCHE 2.0. 2.2, pretty interesting but we have not even tried it. It's going to be announced by December 2022 I guess but still it's in the draft phase. Lot more news are yet to come for that. So far what I have acquired, I have just shared it over here. So the first one is like accessible authentications. So the accessible authentication is something like when we log into a website, we need to enter the password. Now it's been a lot of things like there are something called password remember tools and they can use. So the person who's having the short-term memory loss that is also part of an accessibility. So they can go for that particular tool and they can import that password. So that is the one thing they have considered. When I see that no exception, no exception means like are we going out of the security rules? No, not like that. The person who just wanted to ensure that I don't want to enter the password but I want my username to be remembered. There are some exceptions which is getting created for that. So the person who wants to just say I'm ready to spell the password but or I'm just I can't type it. As I told I have some issues with my hands. So in that case the exceptions will be considered. That is the second point. And the consistent help. When we say the consistent help, recently we are seeing a lot of chatbots in all the websites when we go. Even being a visible person I would say like for me at times I'm getting why I'm getting it all the time I need to just minimize it. But yes, it's for the one who needs to access it. So if they wanted to go for it there is a voice message microphone message. If they are unable to type it they can go for that constant help. They can ask that. That is how the consistent helps comes into the picture. Dragging moments. Initially when we initiated the accessibility there is something called dropdown options which we are selecting. It is pretty tough for an accessible person to go through with key toggle options. They have to either go with the screen readers or the wave to analyze that. So WCG2.0.2 is more focusing on that how it will be accessible for them. So the dragging moments is something like dropping downs. We need to select the dropdowns or some pictures which we need to keep it in the separate slide. So those things it has not been accessible. For example when I'm creating the slide I was thinking about is how I can make this particular slide accessible. I had to completely derive that but yeah before publishing it I should be doing it. So that is how the dragging moments has been comes to the picture. Focus appearance. So focus appearance is like the fonts I would say like the color contrast which we need to check. So we should be ensuring that there is a contrast color behind the focus appearance. So for a person who is having very low vision he wants to read the things. Are we cross checking that our font styles and our color contrast, our colors in the websites has it been really going with that? I'm pretty much sure we are more focused on the advertisement part and how it should be looking more colorful. I would say like we never consider the one who has having the tough time in reading it or the color blindness I would say. There is a scenario like I read it somewhere like the Facebook one, the Facebook icon and the blue color has been created because the Facebook CEO he was having the color blindness. So he has created that when there is a blue background and the white is on top of it it is really contrasting. That's the reason it's readable. So he has come into the picture. Since he has that ability to think about it he was able to pick it up. So whatever we are creating it from the initial phase while we are going for the inclusive designs, the fig bar designs, I would say that it is pretty important to cover it in the UX designs. While you're deriving the entire content for the site consider them as well. It is pretty important for us. Focus not observed. So that is like three types of on that minimum and enhanced ones. So it will cover the text, headlines and the color contrast and also the hyperlinks. These are the things which you need to focus when we are designing the face. Redundant entry, yes. So when we are going through the Chrome if you have a password tool already enabled and Chrome is having an option to save the password as well. So we might end up in going for the redundant entry. So we need to consider that as well. So I have even being a visible person. I have a pretty tough time to remove that from the Chrome passwords and use the one which I have in the password tools. So that has to be considered for the redundant entry. Target size should be minimum. So when I see the target size should be minimum. The headlines, so when we are going for the H1 tags we should keep that the entire site should have the standard format. It should be like I have the H1 in the homepage. It is in like 34 font size and another page it is on 32. So while the screen readers use that it might not be in the right way because it will have a difficult time to understand that whether it is in the right one. So we end up in cross verifying it whether we have done it in the right way. We have to just manually validate it sure that whether the H1 whether it is showing as an error is it a correct or not. So consider the font size and whatever the styles which should be in the same way. And one more thing to be added is like so we have told that how we have to consider the accessibility is right. So the severe ones are the ones which is like really having the physical accessibility. Now the one is like with the low visions and cognitive accessibility issues will comes under the injuries which I was talking about. Okay, now this is a question to everyone. Ask yourself is your website allowing every user to accomplish the same thing? Are we doing it? And the next one is, so if not it's the time for us to target the audience keep them in mind and what devices those users can be using to find it. So ensure that we are keeping this in mind when we are developing the site. This is the first thing it should be in the objective. So accessibility considerations and strategy. So these are the few things which I'm just going to give a high level about. Accessible designs. So when we say that accessible designs I was talking about the UX designs. So let us ensure that we are considering the color, fonts, styles, hyperlinks and also the videos, the images, GIFs. So those things. So when the screen reader was used it was unable to explain the Google Chrome simple. We are using it very widely but it couldn't explain. For the Microsoft Edge it got explained as a simple with one. Does that helps us? We doesn't know that, right? It's just explaining that what the simple is denoting. What is the purpose of it? It's not been achieved. So we need to consider what is in the description how we are conveying the information to the accessible persons. These are the few examples. Embed accessibility testing during initial phase of development. So I'm just gonna tell about that in the next slide. Unit component testing. So while we are going for the unit component testing we consider only the functional testing. That's it. Accessibility audit and the testing phase. Reporting of issues along with the remediations how we can consider that. Generation of accessibility statements. Okay, so I was telling about that we need to start including from the development phase. This is just a technical term. So technical module is there. So Accelinto and extension which can be used for accessibility issues. So we have something called New Relic which is like code checker, quote quality checker. So when the developers develop their product they have a quote quality checker and it should be more than 85 percentage for a site to be ensure that it's been secured. At the same time the developer can go for this one and it'll highlight the accessibility issues right away. So for example when you are going inserting an image there is no link for that or there is no description. Right away it'll highlight that. So those things can be captured on the initial phase of the development itself. And it'll be really helpful for us to capture it in the initial phase itself in between the testing. Again it has to go to and fro for the tickets stating that the accessibility has to be considered. If we are able to capture it during the initial phase we have the time conception. We are really consuming the time. And also the testing team will be able to focus on more accessibility issues, not the obvious ones. They will go from some random ones. But if this is keep on happening what will happens during the test phase the testing team will first initially test the obvious scenarios. They will not be able to go for the negative scenarios. It'll take time consuming I would say. So let us have a practice of this one. Having this one on the initial phase of the development. So this is really helpful for us. So this is one how it has to be. And check for all A11Y issues. So these are the files which can be done. And the one more point which we need to be noted is like you have an option of disabling A11Y rules individually. So what are the rules we were discussing about? WCAG 2.0, 2.1 and 2.2. When we are doing this we do have an option to check for which one we required. So that can be done during this. Unit testing, component testing. So we have just started with like Cypress JavaScript components right now. However, why we need to focus on the unit component testing is like so while the development phase developer will have the accelinder to check that what are the accessibility issues. And he would have fixed it. And after it's coming to the unit testing definitely they have to cross verify it. It's not only the functional needs to be tested. Let us make a practice of having this accessibility for developers as well. It's not like only the testing team has to be tested. So let us just convey the message that whatever you have fixed as part of the accessibility that needs to be checked during the unit testing. There should be a checklist for them to ensure that to pass it on to the testing team as well. So they can have a checklist depends upon the websites I would say like certain websites will have H1 in this format, H2 in this format. So let us have a checklist for them. These are the format list and they have to cross verify it during the component testing itself. That checklist will help the entire website to be in the same format. Now, accessibility audit strategy for testing. There are three. We can divide it's fully automated, semi automated and manual. So when we say that fully automated so from the initial part the AXLinder checkup there should be an integration that it will derive the results and the unit component. And for the testing phase what that can be done is like we have to implement what are the rules which we need to acquire. So we need to ensure that the code has been ready with the fully automated and the results should be either mailed or should be in an HTML report or it can be an Excel sheet whichever the form which required. So we have to divide it in these strategies. Are we going for a fully automated? And if we are going for fully automated how much time we can consume? Those things we have to consider. Semi automated. So semi automated is something like still we will be reporting the issues and while we go with the assistive technologies like screen reader, wave and for example for iOS voiceover. So these are the ones for semi automated. The manual is something like still I would prefer like even if you are going for fully automated semi automated there are some things what's left to test that has to be taken care by manual I would say until we are completely migrating to a page which is like yeah we are good to go for all accessible people. So until that we should go for something like what's left to test and that has to be considered under manual. So this is how an example like fully automated like so once we done that you will get the results so this is how it looks like and this is the report which I was discussing about so once you fully automate or the semi automate whatever you are preferring the reports should be in a proper way. So for example if you see that we have the AI live and issues categories over here. So the color contrast. So it is checking for the color contrast. Frame title, image alt. When we say that image alt yes whatever the image is uploaded is it having the alternative descriptions. So we need to ensure that there should be a mandatory field. It should not let the people to save or create that entire development when the image alt has not been entered. That is a good practice. So the keyboard inaccessible the drop-downs I was discussing about and the hyperlinks. In addition to this I would like to add one more point is like we never used to have a practice of checking that is like whether the web content downloaded has been accessible for the accessible person. Why it is pretty important is like for example if you are taking the income tax site so the income tax rules or whatever it's in the PDF they have to download it and they have to check it. So we need to ensure that web content which has been downloaded that should be also accessible. That is the one more point to be added. Semi automated is something like assistive technologies which I was discussing and now the Cypress is also getting into the picture for that. Axe dev tools and there are two versions on that. One is the paid one I guess with the axe another one is like we can use it for few trial period time I would say. Manual ones. So I was discussing about what's left to test. So we have to coverage as follows. Site test, page test, page state test. So when I say the site test what it has to be all about is like consistency. So the how much the site is consistency. The person who have NATIVE maybe I would say like some issues in reading that very slowly. The site should be consistent for them. So we have to consider that. That is the one thing. Second one is like session timeout. So maybe we have to think about the person who is having to scroll down to the session the entire session. So he may take some time to go through it when he is having a hand injury. So the session times should not be very quick for them to access it. We need to consider that. These are the one. And the page test is like interruption on page load. So when we are going for a YouTube maybe not YouTube, the Chrome's or any websites now we are getting a lot of interruptions of the advertisements. They are tracking us in a very badly I would say like but still. So those interruptions has not been convinced to the accessible person. So I was trying to just go through the keyboard tabs. I was keep on tapping it. When there is an interruption comes in I'll end up in the one which is on the frame but not on the right side. We need to consider that interruptions on the page load also. And the multiple ways to navigate we need to consider that. Orientations, so a person should consider that landscape or the portrait orientations whichever is comfortable for them. The tabs, we have an option for that. Tabs are more accessible and the mobiles. So in the same way we should consider the orientations also for the pictures for the text which we are showing. And this needs to be tested as part of what's left to test after fully or semi-automated by the manual team. And page state test. This is very micro once I'm just articulated to the points over here. So when I see the automate behavior over here as something like scrolling or moving, blinking the lines or blinking the text those are automated. So how we are considering that has been accessible by the person. There is a blinking text on that. I'm really liking to see that when I'm going to the website like, oh it's so sparkling. I would say like, yeah it's too good to see but has it been accessible to the person who cannot see that or how we are going to convey that information. So we need to consider that automatic behavior when we are going for a development. Page meaning, so when someone is landing on that particular page so the correct reading order that should be considered for that one. And the page structures. So the proper ordering of the headings and the subheadings and I would say like the text or any questions. So that proper structure should be there in that page structure. Interactive elements are something like when they wanted to click or when they wanted to input something. So those comes under the interactive elements. Whatever the mouse and the keyboard elements. Static content is something like, yeah it's just a paragraph and sensory characteristics is something like a capture we would say. Forms, the web forms which they are able to submit it or not. Focus management, the color contrast which we already discussed. Text resize, refollow and spacing. And the tables, alternative for timed media. There are one more thing which is like when we are building a site it's not like all the videos has been controlled by us. Still we go for a third party. That is something like out of our control which we will not be able to do it but still whatever we will be able to make it up through our site I would prefer. We would prefer like let's go with these things and ensure that it's been tested and it's been accessible by the persons. Accessibility statements. So right now let us assume that there is some accessible statement which is given in your site. So I would prefer like I'm not a native English speaker but yeah still I will be able to make it up. I'll be able to read. But when I reached here Europe I would say like I was trying to find out has it been readable for me? So that is where we ensure that there should be some of the accessibility statements for them to convince that okay you are in the right place you can understand what we are doing. So we need to ensure it's a good practice to for us to have these kind of accessibility statements in our websites. And WCAG there is an already they have an option for generate accessibility statements. So you can provide your requirements over there and it will generate the accessibility statements for you and there is a team who reviews that as well by the communication team. You can go for that which will give an additional points for our sites. So these are the ones for that. So this is something like three points which we'll just maintain once like show your user that you are actually care about them. Provide them that commitment to the accessibility. This is where we have to focus by that. This is the one thing which we need to add. And one more things like since this is a Drupalcon I just wanted to add a point so still it's in the R&D phase. So this is something about accessibility scanner. There is a module in the Drupal.org. So everyone can try that out with a site. So it can be just installed with the modules and try it out with how it's working with your sites. This is the one. And this is the other one which we saw that added I saw that in the Drupal.org. They have added another module editorial 11 y accessibility checker. And when we run that this is how it's been reflecting. So the screen readers which we are using how the issues has been detected and what other recommendations for that. So how long does an accessibility audit take? So there are two kinds. Either we should start from the build it right, right from the start. And nowadays since we are just migrating to the site and the law is just enforcing we are kind of doing lot of audits for the lot of sites. So most of the people ask like how long will an accessibility audit take? It's a question like I'm asking like how will my car repair cost? The same way. So while we are doing it whatever we need to consider is like we have to consider the conformance levels where I talked about A, AA and AAA. So we need to conformance levels. How that size. So while we are going for the audit we need to ensure that the conformance levels has been taken into the picture. Next one is like what are the factors that affect that accessibility audit timelines? Project scope. When I say the project scope how many unique pages are there? We need to consider that. And also number of severity and accessibility issues. How many of that? Because it might have developed a long back. So it depends upon that we need to consider how it's working out. And the remediation guidance. So when we provide a remediation guidance we need to check how long it'll take. We need to consider all these things while we are going for audit take. Test estimations. This is the one part. So while we are going for the audit so when there is an audit is happening the initial team, the testing team they have to provide the test estimations. So how we are going to cover is like the types. So when we say the types is something like keyboard how we are going to cover that keyboard and what are the keyboard accessibility which assistive technologies which you are using that is the types of apps, number of pages you have to consider the number of pages and operating system. How many of operating system you will cover? Number of browsers. Number of devices. Why we have included the number of OS version is like it's not mandatory that all the people would have upgraded to the latest version. They might have the older one. So we need to consider that as well while going for the test estimations. And the base value for one page. So we have to keep a base value for one page and depends upon that how many pages we have given how many types that would get calculated. That is how it has to be. So these are the test estimations we need to consider. Four ways to improve your web accessibility audits. So when testing web content for accessibility don't rely on a single tool. That is the best one. And for example if you have done with a screen reader go for a wave. So ensure that we are going for the second opinion always and consolidate it. That would give us the best result. Keep what, how and why in focus. And this is very common for all. So ensure that we are keeping that. Make sure your entire team is involved in the effort. When I say the entire team it's not only the person testing or the developers. Try to include the people from the impairments as well. That will help us to give more input. So ensure that the entire team ever is involved. Stay focused on goals and the achievements not the mistakes. It can happen for everyone. So ensure that we are focused on the goals and the end of day what we have created as it's been accessible for everyone. That is the end result we are waiting for. So this is the entire team creating the digital accessibility culture at Accelerant. We are in the era and in the progress of that. So that's all about it. Thank you. I would like to thank you the entire team so who has supported for me. And yes, open to questions and I think, all right I have around six minutes. Yeah. Yes, please. Thank you. This is all very wonderful and noble. I'm just curious as to whether you have included people with visibility impairments or with hearing impairments or other impairments in your test teams. Do you actually have people who suffer from these issues to inform you about your efforts? Yeah. I would like my, I mean Shweta, my moderator. So she's here to help me out. No, we don't have anyone in the team currently suffering with the impairments listed, but there are talks going on with a few NGOs where we want our products to be tested by them as well. So yes, so but that's certainly on the cards but currently we don't have anyone. Yeah. Any other question? Thanks everyone. Thank you.