Use AI to improve website accessibility

- Alright, so the last thing that I'd like to talk about here on the front end side of things is how generative AI tools can be used to improve overall website accessibility, right? It's no secret that ADA compliance has become a larger and larger concern with building websites that are going to be used by the general public. And the number of lawsuits has also gone up as well for sites that aren't ADA compliant and therefore aren't usable by everyone. So this is a big concern, definitely a growing concern in the field and generative AI tools I think, have arrived just in time to help us out with this kind of thing. So, alright, so what I'd like to do here, I'm not going to walk through all of the different details around ADA compliance. You can find those online if you want and read through them all for yourself. I'm just going to show you some basic strategies for doing this with generative AI tools. Really the biggest thing to keep in mind when working with these tools to improve your website's accessibility is that because these tools are trained on publicly available source code, and a lot of the publicly available source code isn't actually meant for, you know, public consumption, if you see, you know, there's a lot of example websites on say, GitHub, where just for clarity and to teach people about the code itself without having to add in all of the extra accessibility details, the code isn't ADA compliant. So that's an important thing to keep in mind here when working with these tools is most of the time, by default, the code that they generate isn't going to be especially accessible, right? There's a good chance that it will have some accessibility flaws in it just because that's really the rule more than the exception for the code that it was trained on. So, there are a few ways around this really, the biggest way around it is specifically tell these tools that you want it to place an emphasis on ADA compliance. So for GitHub Copilot, for example, let's have it generate some sort of, you know what, we'll actually just use this React app that we had here. So what I'm going to do is I'm just going to open up this component and let's just take a look at this component and see what advice GitHub Copilot has for how we could improve the overall compliance. And this is kind of a similar thing as we'll see to, you know, dealing with security concerns, right? If GitHub Copilot or one of these other generative AI tools creates some code with vulnerabilities in it, you know, you can usually get it to correct itself just by mentioning like, hey, are there any security concerns? And you can do the same kind of thing with website accessibility here just by saying, are there any ways that we can improve this page or this component to make it more accessible in ADA compliant? So let's just give this a try with GitHub Copilot, we're going to say editor and take a look at the code that's in the editor and we'll say something like, what are some potential improvements we could make to this component to make it more accessible? And we can say slash ADA compliant, you can, you know, just to be very clear about what you mean there. So let's just see what that comes up with. And ideally it'll come up with a list as well as just some code samples that will explain how you could make all of this, you know, just a little bit more accessible. And sure enough, you can see that, especially with this slider, right? It recommends using things like label elements. It recommends that interactive elements be workable with the keyboard, right? Sliders are not something that are typically very accessible, although they certainly do look good on a webpage. So just by taking things like this into account, you can usually have these tools help you improve the accessibility of your site. And let's just see if GitHub Copilot can incorporate those now, or here we'll say something like write or here rewrite, there we go, rewrite this component now taking those suggestions into account, all right, and oops, I put a question mark there, we don't need that, but there we go. It says, here's how you can modify your dashboard component to make it more accessible. And sure enough, it adds all of those suggestions that it had. So, you know, in order to tell whether or not this is really more accessible, you'd probably have to test it out with a screen reader. And I'm going to leave that up to you if that's something that you're interested in doing, but you can certainly see that it's incorporated those other things into it. Anyway, you could always replace this dashboard code with this code that GitHub Copilot generated. But again, I'll leave that up to you and let's go back now to chat GPT and GitHub Copilot, Google Gemini to see how we can get them to write some ADA compliant code. What I'm going to do is I'm going to just create a new chat and I'll say something like, create an ADA compliant homepage for my blog site. All right and what it should do, you know, it should automatically take those things into account. So you'll see that there's things in there like this aria or area, these attributes that are added to different parts of the site. So, you know, just by being specific about that, what that's going to do is it's actually going to focus these tools on the code that they've seen that has something to do with that, right? So there's lots and lots of example code out there that is ADA compliant right? There's lots of accessible code out there. And by using keywords or key phrases like this ADA compliance thing, which I've found to be, you know, pretty helpful, that will actually focus these tools in on the code that follows those rules. So anyway, that's the basics. Feel free to experiment around with that kind of thing with Google Gemini as well. But anyway, that is the basics of using generative AI tools to improve website compliance.