 Great, sorry for that two minutes delay. I'll be talking about accessibility for back-end engineers. Because I'm a back-end engineer, even if you Google, you might find very few talks or articles about back-end engineers or accessibility for back-end. So let's see why it is often overlooked, or it's kind of, I would say, even sometimes skipped. Because in my experience, based on my experience, I did accessibility for the work that I did, very few. It's because maybe we built on top of WordPress. WordPress already has good accessibility scores. Maybe some blogs or certain stuff still needs to be improved. But overall, back-end is more accessible. But still, when you extend certain plugins, certain themes, they don't have accessibility. So let's see how we can fix them one by one. And in terms of interaction, I'm Lax. I'm a back-end engineer. I focus on data migration. I work with mostly on CLI. And I also build custom plugins and extend WordPress. So today's goal is to see what, why, and how. So what does accessibility mean for back-end engineers? What is we are missing? Also, we can see why is it important, or why accessibility plays a major role, not just in the front-end and also in the back-end. Also, some simple examples on how we can fix it. And if you are not a back-end engineer, or if you're not a total coder, you just use WordPress. You are a business owner. You just have a, let's say, you want a business, or you want a small agency, or you are like a builder. You use page builders and build sites, whatever it is. Or you're a blogger. All are welcome. This is not more of a technical talk. So whatever that you are going to listen, I hope it will make sense to you. Let's get started. So do we really review accessibility on the back-end? To be honest, it's not often, or we don't check how we do on the front-end. Because when it comes to the front-end, we think about the front-end. We think about, let's say, you use any test, whether it is Lighthouse, or PageSpeed Insight, or any test, you're going to see, my accessibility score is like this, and I want to improve it so that I will have more visitors on my site, and the bounce rate will be less. So then, more visitors, it's like, you are getting more impressions, more visitors, and then visitors can be converted into customers. That's all we want, right? Whether it is we want them to read, or we want them to click on something, whether we want them to buy, whether we want them to come back, whatever it is, we want the users to have a good user experience. And to have all that, we consider accessibility is one of the crucial, vital thing, right? Because it's like, not only the persons with, let's say, visual or hearing or any other disabilities, sometimes, let's say a person like me, I have ADHD, so you can literally see, I may not be looking at the camera, or I may forget some points, or I may be sometimes too fast, and sometimes I'll be on the normal pace, or sometimes I may miss a point. But here, I'm not missing the point. So here, we don't review accessibility on the back end. We do it more on the front end because we think that helps with reducing the bounce rate, that helps with the user retention, more sales and stuff, but we kind of ignore it, at least to my knowledge or to the way I've seen it. Let's see how we can fix it. So what does accessibility mean for the back end? Forms. What are the plugins or any widgets? No, we don't have widgets anyway, so many plugins have forms, right? So then only a few plugins doesn't have a settings page, but most of them do. They have a form, whether you're going to enable or disable some settings, add some data, add some API keys, whatever it is, and some are almost all, say, let's say you're popular or famous SEO plugins or contact form plugins, whatever it is. They will have a page where you go to your admin and maybe it's on the settings page, on the tools page, or it can be a separate menu. So you are going to see your pages, the admin pages, or sometimes it can be a pop-up, like it has a small pop-up menu that shows like click on this, save this. I think now recently I haven't seen any pop-ups from WordPress plugins, sometimes they do. Or you can say if you are showing up, I can say the recent ones as the page builders, they show a pop-up of what the block variation would be or what the templates, like let's say in the case of a page builder and you are browsing the templates and they are going to have header section, footer section or anything. So when you click on something, it opens in a pop-up, right? So that's where the pop-ups comes into play. And also blocks. So blocks are now like the incredible, every day they are evolving, right? Every day we get a lot of interesting news about blocks and they are all evolving back in the day versus now. It's like, it's so nice and we are all adapting from different page builders to WordPress. That's great. Good to see the more progress coming in and also they are now getting more accessibility friendly. So, and then images, images not just with the alt tags. Sometimes if your image is not at all to be displayed, you can just keep them in the, for the screen readers, right? So when you say accessibility and the backend, so we have to consider all this stuff. Actually you can combine the forms and pages or pop-ups but I just give them a separate because for a developer's form or something it's like you have the inputs, you have form validation or labels and stuff. And when it comes to the pages you might have tabs or you may have more settings in a page. And then also you can consider having a block whether it is your block may have forms inside them. Let's say a query loop block. It has a lot of inputs, right? Whether it can be on the editor itself or it can be on the sidebar of the editor. So you have to consider that as well. And images, just now I said just a minute ago, it's like images, sometimes you may want to add alt text to them for the screen readers and sometimes you don't really need it because they are just for representation or purpose. It could have been an ad, like user doesn't have to click on the ad or to mine, for me personally, I feel like you can display your, if you are selling a plugin or extension, it's okay to have ads, but it doesn't have to be within the main content. You can have it like a separate area, call it like discount section and ask the user to go there. That's a good way to do it. And then why accessibility is essential for the backend? So the short answer would be, there is something like a competitive advantage on this. Maybe some of you might have already guessed it. So I will talk about it again in the summary section. So because accessibility on the backend is often overlooked, people tend to skip this one because we don't even, when is the last time you feel it's a in-person conference, I would have asked you to raise the hand. I'm not looking at the hopping anyway. So even if you raise the hand, I cannot see it. So accessibility on the backend, we don't often check it. Maybe I'm saying things that the broken record but actually I got the chance to talk about this topic here thanks to the organizers and people who are attending watching it. Nice. So that's why I keep repeating it. We have to check it. I, last week or say two weeks ago, I got a chance to attend World Camp Mumbai and I met one amazing person who was visually challenged Mr. Sadeesh Kumar. I asked him about the accessibility and how he feels about WordPress backend and the accessibility, whether it is accessible or where he finds the disk, where he finds the problems. He said about the navigating through different blocks and certain stuff. And he also feels like now there are a lot of things got improved but he mentioned one more thing. Nobody asked for a feedback. So in the case, it's like when you are creating a plugin or doing some stuff, we always focus on the front end and we don't actually ask someone who is visually challenged or someone who has other difficult disabilities. We don't ask them. We do some small testing maybe, but we don't ask them for feedback. So accessibility on the backend is overlooked. So that's important. And also accessibility is mandatory in Canada and also in many countries. Everyone has the right to access the website, access the information. So irrespective of their disabilities. So you are legally bound to make your backend also work well. And also accessibility is important for a good user experience, right? So imagine you have a website, let's say whatever it is, there are certain key factors in the site roles, like editors, like the site plugins or pages that use backend more, backend heavy applications. Someone who is entering the content, someone who is checking the order and processing the data. So if your application is not accessible on the backend, so we are losing out on that, right? Imagine this one. So let's say you run a magazine and someone with some challenges, like let's say visually challenged person or with other disabilities, like let's say color blindness, they could find a job like adding the content but we take away that because the backend is not accessible and someone could help with the order processing, right? It doesn't have to be all automated or the jobs like that, we take it from them because we don't focus on it. So accessibility on the backend is also good for user experience and that makes it easier for people to use and it can even create more jobs with the advent of AI because a lot of jobs are being taken away but accessibility can be a competitive advantage. You can give jobs to people who are in need. And now what to look for? So for example, if you are a backend engineer or let's say you are a theme author or a plugin developer or you sell plugins or you are buying something. So what are the things that you can look for in a plugin when it comes to accessibility and primarily on the backend? So you all might be already aware of this one because when we say accessibility this is the key core principle of web content accessibility guidelines and the content should be perceivable, operable, understandable and robust. So I can go with a quick examples, I hope they will not take much time. So when it's a perceivable the content doesn't have to be seen, it can be also be heard. And for example, sometimes a person may like to let's say, in the case of it can be a podcast it can be a video. So we may look for closed captions or we may look for transcripts. So those are the stuff that comes under perceivable. And when you say operable it's about operations. So whether you're able to access the site with like tab keyboard navigation and it should not also have a tabbing hell. Like, you know, you're able to go one way and you cannot go back to the other one or certain elements cannot be focused on that and things like that. And also let's say if you have a many pop ups too many pop ups it's like the user might be clicking on something else or the screen reader might be saying something else but it's not focused on the right thing. And the content should be understandable like, you know, right from navigation like which color or which element is highlighted the labels and everything matters. I'll go with a story personal anecdote. I once created a small application it's not WordPress anyway. So back in the day it was like 2010 I was just I'm a fresh graduate I created a application and I didn't write the label. So the label just it's like I used the label was just a no type and it doesn't say or align properly and those days responsive web design was just not adapted universally like now. So in the end it's like we check the data and every response was mostly no but it's supposed to be yes. So it's like we expected yes but we got more of no in the responses in the form. And then when my senior someone who checked it and he found out like, now this is where the issue comes from because we didn't tell the users whether to click on the button whether it's a yes or no. So right now we have toggle buttons I have a small example as well with a screenshot. So it's like it's not that intuitive or not understandable. And when you think about this it doesn't mean just for someone who's with a disability like surely if it's like someone is a blind or someone is having color blindness or something else it can be for anybody. If you don't pay enough attention it's not that they're not able to click on it or they might enter the wrong data. And this happens with anything, right? When you see certain websites like Submit button, this is the cancel button someone they both have the same equal highlight or they don't have enough color difference or they use a different branding colors. That's another thing. So it's like there are small minute details that makes the user confused and it's not understandable at all. When it comes to branding let's say I love blue color in even this the slides the background. I like all shades of blue but I don't want to keep the let's say register button or a success message in blue, right? It has to be in green. So it comes in natural for people like they kind of think like green means a success message or green means it went well. So small things like that and it doesn't have to be sometimes you may have some small variations of colors because maybe your brands coloring is like that actually. So those type of things makes the user confused. So instead of a going smooth user may get stuck and if we imagine that's for someone with a disability or someone with a let's say someone like me with Hedi actually I get when we really tensed whether I clicked or something right or wrong. In here in India, I can give two, three examples. We have a train booking website and it's a why the government of India itself. So when we are trying to book a train I often tend to choose the things wrong and it's the primary reason is because they are using like orange color button or something I tend to think it's cancel or like it's not the right way. It's a reset or cancel button but it is the other way around. So things like that. So that's the labels, buttons, colors and whatever you are adding it should be understandable and the navigation and the instructions everything and robbers to like for example, right now we are talking about a one set of rules in future or tools. In future, if we are adapting or evolving your code the application should be able to adapt and match to use on a different thing. For example, if you are just working on the desktop mode it should be able to work on the mobile device as well. So you should be able to the buttons and all the elements and the main content skipping to the main content, all the stuff, right? Very basic small things and it should be able to be adapted and can be used in the future or wherever the new principles are coming out or when we are adapting to the new ones your application should be able to adapt. If you are let's say left behind you are not catching up with the standards like let's say you are stuck with the old version and it will be hard for you to catch up with the new one as well. So consider all these points when you are building or when you are let's say you don't have to be the developer maybe you have employees you have developers who build this stuff so explain them about all these core principles. WordPress has a long detailed page with more explanation on this. I have it on the resources section of this slide and actually you can Google about this as well WordPress and accessibility you will get that documentation. So kindly go through it and add it to your part of your workflow. Now let's see how you can do a small accessibility review on the backend. So here I have few examples. One I created a simple block and I'm going to show you how it failed and what we can do about it. And then I created a simple settings page as well and I also have got an example of some other plugin from the plugin repository. So I didn't have the name of the plugin because it's not about just blaming them or anything it's just my observation. It's like plugin was working fine it's just the accessibility could have been better. So before we go and see the examples let's see what are the tools we have and how we can do automatically test this stuff because accessibility is a big topic and we have a lot of points to see and accessibility is also not like a one size fits all like someone who is blind may have some other difficulty as well someone who has ADHD may might be having color blindness or might be having something else or they may not be able to access the keyboard at that time they may be looking for something just to read out loud things like that. So there are multiple tools when we have some automated tools as well these tools can guide you. But I would say in my experience people use these like the page performance testing. For example when you let's say Bingdom tools or web page speed test or GT metrics when we talk about all this we think about the scores we want the good grades we want the site to be load fast and we want to just fix everything and we think we are going to get more visitors and your business is going to grow magically or your client's business is going to grow exponentially it's not the case because you just solved one part of the puzzle a good website is nice I mean when it loads fast but all these guidelines and principles and these tools it's all about like guiding you hey we found like these are the mistakes that you could improve but you can go beyond that you can do more in all the whole main the whole purpose of not just accessibility the whole purpose of giving good experience or making more sales out of your website like a website that sells is to give the user what they want right you know whether they search coming through a search traffic whether they are coming through a newsletter or landing page whatever it is when the user comes to their page they should know able to see like you know hey I'm looking for this information it should be there I'm looking for this product it should be there I'm one to file a complaint I mean I'm looking for a form it should be there so whatever the user is looking for it should be there it should load fast and it should not be confusing and it should be accessible so coming back to all these tools there's like tools or like guidelines you can say that like a God rails but they cannot take you from point A to point your destination they can move you from one place to another but not the user experience your sales growth and everything depends on many other factors as well let's see this automated tools Google comes up with this lighthouse if you are using Chrome browser which I use often if you are using Chrome lighthouse is already inbuilt if you cannot if you don't have it you can add it and enable it in your developer tools I think it is command F12 or like you can right click and see the inspector tools in Chrome and you can also find similar type of tools in other browsers as well or you can use the site improve and wave is very common and popular or accessibility insights by Microsoft so just maybe I kind of repeat certain points again because I feel just to stress them out enough it's like these tools can help us with like and guide us for certain stuff that we missed but it's not like 100% or it's not done you still have more room to improve for example even if you finished on one plugin or one settings page you still have to check for others and improve you can also implement this to all your future projects and if you are doing already good very good I'm cheering and happy for you and then let us know as well like if you are already doing all accessibility well like teach others like come to work camps like this and share your points with others so people will know like how to do better and they will be inspired by you and that's great let's go and see the other other points like so that when you have automated testing you will have some list of guidelines some errors and the areas of improvement and then you can use the keyboard navigation test like basically tabbing right and tab and see whether you are able to go from one tab to the another so usually on this test you can notice whether your elements have the right index so that you can go from one to another for example you might be displaying first name like here on the left side and right last name on the right side in your contact form let's say you built it but the tab index should go from first name to the last name right even though it's on the right side it should not go to first name and go to the email address because email address maybe on the it's maybe on the second row or the one row below the first name and the last name fields right so the keyboard navigation when you add a key index to your elements whether it's input field or it can be let's say manual links whatever your tab you can check on this keyboard navigation test tab through them and see if you are able to see them correctly and if it's not go ahead and fix them heading tags or header tags it's like H1, H2 and stuff or most common issues that I see here we use heading tags as two times or even more sometimes because this happens just kind of you might be embedding or you might be itself in adding some other code in terms of teams you can see that often but in terms of maybe back end it's little less but still it's good to have followed the right hierarchy so if it is something like worth the subheading go for a H2 header tag to level two so H1 should be only one so when someone says read me like they are using a voiceover or some other screen reader so it's going to read the main heading so the person who is listening on the screen reader will know hey I'm on this page for example about this talk they are reading this slide it's going to say a comprehensive high two accessibility for back end engineers that's H1 and it might say World Cup Montreal or my name as a H2 it should show go to the next level of heading it should not be again H1 it will be confusing and it should not also you don't have to go all the way down to H4 and H5 unless you require so follow the heading tags in the right order so that will make the user to understand them better both visually and also if they are reading it with a screen reader it will helps and also it helps with the SEO as well but not for back end applications and the color and contrast so just now just a few minutes ago we were talking about the train booking site in India so where you go and book trains like the buttons are a little bit confusing and they have a weird capture it's not at all it's not only preventing robots it also prevents humans 100% you know because it's like it's confusing it's not when you type the capture it's like the capture the input is not highlighted by itself things like that so coming back to this color and contrast your buttons input the outlines or the highlighting when you are highlighting something should have that good color and contrast you don't have to do for example if your branding colors are light and you don't have to use the light colors you can use the dark colors like go for the opposite side of the color wheel you don't have to stick with my colors are green and yellow you don't have to use all the way like everything like a green background and yellow text or yellow background and green text so things like that use a good color contrast and make sure things are readable and not only for someone with color blindness like someone who has a poor vision it's also a good and general practice it comes to back end and also the front end and then test with the screen reader so right now you started with automated testing and started doing some manual testing like the screen reader and stuff now when you are using screen reader for if you are using Mac use voice over and if you are on Windows it's I think NVIDIA and there are other tools as well you can go for the screen reader tools and see how it works and most websites nowadays come with the speak now button so it's like they're going to read the content as well and browsers are already catching up in evolving and here I'm going to show some examples quickly about how to use light house or any other things for the back end whatever the accessibility checker of your choice for me I just use light house because it's accessible sorry it's readily available that's what I was trying to say it's readily available it's just on the browser itself so I don't have to tap through or use a different emulator or something let's see so I created a this is a block click to tweet block so whatever the text that you are going to add it will be shown as a click to tweet on the front end but this is on the back end so you can see I have a block and it has color contrast and it's like text or readable and the button is also a custom thing you can change the color of the button as well but you can see it looks okay right when you are a developer you're going to think like I did a good job it's fine it passes the basic thing see it has a filter icon now maybe it should say Z or I don't know how to say it it should say click to X X means close right so things are confusing the world is changing right so the accessibility score for this one is 22 out of 27 so there are like there's ample space for improvement and just I gave a repeated boring lecture again it's like these are just guidelines it's not like when you fix this it doesn't mean your thing is done you can still check ask for someone with disabilities and ask them to use it and see like whether they are able to add the content and whether they are able to change some text in the button for example if they are able to add the text add what they want to tweet and what they want to change the colors and things like that so in this case it's like area area fields are not set properly and you can see also the role it doesn't have to be fixed so I got this one from this is another example I got this one from LMS learning management module so this is from my LMS plugin so the name of the plugin is not that important it does its job but when you see this one and if you are using WordPress for quite a long I'm sure you are watching this in the webcam so if you are using this for WordPress for a while you might see this kind of tabs even WooCommerce has these kind of tabs so there are a tab navigation in that's how you can show sub menus anyway this is a better way to show it but you see the payment processor the status that toggle is not accessible it's not accessible by tab navigation so you can see that in the error and you can see like there are six points that can be improved I'm sorry that text is kind of too small well share the slides you can go ahead and see them so this is another case of whatever things can be improved just like I mentioned here in this one it's not on the screenshot but it's like maybe this paper logo or some other image doesn't have all the attributes it's like if someone is with someone is some blind person is using this page they may be wondering what this image is maybe they are missing something or maybe they are going to assume or they're going to you know skip some information from it and this is another example like I created a small sitting page just for the demo so you can see I'll see the chat later I see a lot of people already guessed it has two header tags right this page doesn't have any additional styles from WordPress sorry any custom styles it uses just the WordPress styles so you can see H1 tag as repeated like you can see that it's twice but many plugin authors now like to use or any other it's not bad like they are using it's not bad or wrong I'm not saying I'm not against using custom styles in admin area but whatever you are using make sure that it is kind of uniform or follows this accessibility and the core principles of WordPress like when someone for example you have custom styles and if someone is changing the admin theme or something it's not sometimes I notice certain plugins if I change the admin theme it's like the plugins or something is not the buttons or the text is not readable at all so things like that and the notices people have a lot of common topic in WordPress industry right like we have plugin admin notices and even in the notice the text is not readable or it's not when you click it's not closing at all there are things like that so you can check that as well whether even if you are showing a notice with a custom style or wherever you are using custom styles make sure the contrast is correct and also make sure you are following the guidelines correctly so in this one it looks more closer there are two things to fix so we can see that the labels are not labels doesn't form elements to not have associated labels so there are the things that has to be fixed so now we are going to see how you can add accessibility at every stage of your development workflow so let's say whether you are developing for an enterprise application or a small business or you are doing it like a hobby you might be having two sites like a development staging or on production site as well or you might be having like a local backup like you have local everything and your local machine and you are just pushing it so you can start checking accessibility on your local machine as well before somebody else is going to check and find it so if you are a solopreneur I understand it's kind of a little bit tricky so you spend some time on your testing phase before you launch the site or if you have the bandwidth and budget and team like allocate a resource, allocate some time to do accessibility and for backend as well so all these are talking about backend so it's not about just to print it in the design itself when you get over the Figma XD or anything, when you are designing make sure you are the plug-in on your screen or any markup that you have if you are having a plug-in product owners already on top of their game when you have the design itself make sure the color contrast is fine and everything is visually it's easy to navigate it's simple principles are working fine like you are able to operate you are able to adapt and it's easy to navigate and that's the design phase so once you are finalized with the design and it can be also thinking about it's like here not just the colors and stuff let's say if you have pages if you want to move from one to the other one you can have what do you call it say your plug-in has two, three settings pages you can think about whether all these three should be a separate menu in that mean or you can keep it like WooCommerce I mean like keep it like a tab things like that so you can think about all that in the design itself and also you can think about your target audience if anyone is in your team or you can potentially think about whether if someone is doing visually challenging portion of the team or like anyone whether it is easy to use and stuff that's the design phase you can potentially eliminate many stuff there as well any accessibility issues there and then go to the alpha stage whether you are having the very first beginner initial release of your product and the beta like a close to release to your audience you can also do A, B testing like make a small group of users use this design versus the other one you know these are all sound more for the front end like a landing page but still you can do that for back end as well especially if you are investing so much on your product admin screens and then once even the product is stable still it's not done so you did the accessibility review and everything is fine your product is now stable still it's good to check like I know things are changing with WordPress so you can keep ahead like today 6.4 released or few hours ago I would say so when 6.4 is ready and you have to check your plugin and change the version you are going to change like test it up to 6.4 during that phase as well you have to check also accessibility if you have admin screens I'll be quick we are on the takeaways so before I go with the remaining three points on the takeaways the differentiating factor or the factor that you can distinguish yourself from your competitor is accessibility making sure everyone can access your stuff so for example you have a form plugin or you have some set of blocks or you are building a page builder or you are building extension for the page builder whatever you are doing and I know that WordPress ecosystem is highly competitive a lot of good products are already there if you are even starting out or you are already established a product it's hard to get that market cap so to stay ahead on the top of the competition go for that extra mile I can say definitely it's not not at all crowded very few people or take the accessibility seriously on the back end so follow the principles of the web content accessibility guidelines and when you follow that you may not have any issues at all and then add accessibility to your development workflow if there is a PR template if someone is submitting a pull request make sure ask the developer hey did you check for accessibility and also you have automation tools like deploying something to the the pipelines in your continuous integration and delivery you can also add accessibility but for back end it's tricky because it's like back end needs authentication someone has to log in and see it so you can still add it to your development workflow and audit the application with the help of accessibility expert this is really like going to the extra mile so we know a lot of experts in our team so you can go with the WordPress space definitely they are going to help or at least by themselves or they are going to guide you or point in the right direction and also you can create support tickets as well join the accessibility channel and you can get some help and if you find a group of accessibility group in your local area join them and just show them about your product ask them to check it and take it from there so these are some resources and thanks to Christina Workman she is from Canada I refer a lot of her work and let's stay connected I am Blacks on all social media platform if you have any questions I will be on the hopping for a while and also on the Slack thank you thanks for having me I hope I am on time