Using Accessibility Checker Pro + Claude AI to Remediate a Large WordPress Site: Courtney Robertson

Amber: Welcome to WordPress Accessibility Meetup: Using Accessibility Checker Pro plus Claude AI to Remediate a Large WordPress Site, presented by Courtney Robertson, who is a Technical Writer at Pantheon.

Courtney: Hello, everybody. New hat, new role, but it’s great.

Amber: Yep. I’ll give you a minute, in just a minute to fully introduce yourself. Let me run through just a few things.

For folks who haven’t been here before, it’s good to know that we have a Facebook group you can use to connect between meetups if you go to Facebook.com/groups/wordpress.accessibility.

Everyone always asks, “Is this being recorded?” The answer is yes, it is being recorded. You can find both upcoming events and past recordings in one place if you go to EqualizeDigital.com/meetup. It takes us just a couple of days, but usually by the end of this week we should have the recap and the recording fully edited, transcribed, captioned, and all of that, and up on our website.

You can get notified when it is available if you join our email list. We send out a newsletter once a week, and event announcements, and the recordings. And you can join that if you go to EqualizeDigital.com/focus-state.

The other place, if you wanna catch a recording in audio format, is you can listen to our podcast, AccessibilityCraft.com.

If you have any suggestions for the meetup or need any additional accommodations to make the meetup work for you, please contact us by emailing meetup@equalizedigital.com.

I am Amber Hinds. I am the organizer of WordPress Accessibility Meetup and the CEO of a company called Equalize Digital. We are a mission-driven organization focused on WordPress accessibility.

We have an Accessibility Checker plugin that helps you find and fix problems on your websites, as well as a couple other micro WordPress plugins, ArchiveWP and BoardScribe, that support remediation efforts.

We offer online courses for NVDA and VoiceOver screen reader testing, as well as selling accessibility and do accessibility audits, remediation, and consulting.

We do have a sponsor who I want to thank today. A big shout-out to GoDaddy, who is generously covering the cost of live captioning and transcription for this event. GoDaddy provides a managed WordPress experience that is as easy as it is effective. The latest version of WordPress comes pre-installed with exclusive themes, plugins, and tools to get you up and running quickly with automated backups, updates, and malware removal so that pros can spend less time on monotonous maintenance and more time building their businesses. You can learn more if you go to GoDaddy.com.

I always ask if you are willing to give them a shout-out on whatever social media platform you are on, tag them or comment on one of their posts and say, “Thank you for sponsoring captions for WordPress Accessibility Meetup.” It helps to encourage them to want to continue.

A few upcoming events that you should be aware of. On Thursday, October 29th, my partner Chris and I will be presenting Progress, Not Panic: A Practical Approach to Your Title II Deadline, specifically targeted at public entities that have those deadlines coming up next year.

Then, on Thursday, November 5th, Cam Coulter will be presenting I Didn’t Realize WCAG Meant That.

And on November 17th, we have definitely hit the time when there are lots of meetups , I will be giving a presentation about items that Need Review: How You Would QA and Fix or Address Issues that are Flagged by Automated Scanners that are not obvious problems, but are more like those warnings need review items.

And now I am very honored and excited to introduce our speaker, Courtney Robertson.

Courtney is a WordPress contributor and a co-founding board member of the WP Open Community Collective. In addition to, I mentioned she works at Pantheon. She is a computer science educator background, a full stack developer, and shares practical insights on contributing to open source and supporting sustainable funding for developers.

Off stage, Courtney plays a 7-string electric violin, experiments with 3D printing, hikes with her garden, or hikes with her camera, and tends a vegetable garden. All from Pennsylvania, as we mentioned earlier.

Courtney: There we go. Yeah.

Amber: I am so excited to have you here today, Courtney. You have been a great friend of Meetup.

I will say that Courtney was instrumental in us getting some of our sponsorships to help cover our captioning costs.

Courtney: Yeah.

Amber: So we very much appreciate all of the support you’ve had, and I’m excited to hear how you’ve been using AI on your website.

[00:04:53] The Website

Courtney: Yeah, thanks Amber. So it’s good to see a couple familiar faces here in the crowd.

These days I am one month in on my tenure at Pantheon.io. Pantheon does a lot of enterprise level hosting of websites, WordPress, Drupal, et cetera, and I find myself in the developer relations department with probably friend of the show, Chris Reynolds, as my manager working on Technical Writing.

We have a lot of unique interfaces for managing how you maintain your websites, how they stay up to date, and thus far I’ve found it to be very appreciative of accessibility advocacy at Pantheon. If I’m saying, “Our docs need to have these alt texts on them,” “We need to do this for accessibility,” or, “Here’s a little glitch that I found over there,” people are very quick to want to improve things for accessibility purposes, which is a delight, and it’s fun to switch gears a little bit from being on the road quite as much as I was.

I will still be traveling due to some family health concerns and such. I’m gonna stick where I could get to my region by car or train within a short range of time and if you wanna know more on that, feel free to find me elsewhere later and we’ll discuss.

But this has been a long time coming. It’s been a while since I’ve probably been on the podcast with you, Amber, so I’m delighted to be back here for the meetup to be able to share the recording.

And I’ve been working on my website a lot in the last half a year because AI and coding with AI means that now I have… I feel like now I’m cooking with gas, as they would say, meaning I am able to do a lot more than what my skillset normally would have time for or capacity to do. So it’s been a lot of fun.

I know enough to be able to steer things at least. And so along the way today I’m gonna share some of the things that I was doing on my website. Absolutely high priority for me is making sure that my website is accessible in the migration. That it’s performant too, but performant usually happens when you optimize for accessibility.

So it’ll be really good.

I am a… My background, as Amber shared, is that I’m a former computer science teacher. I was sharing with Amber right before starting, one of my things in my college background that I think is really supportive and almost the most important thing out of my teaching background, two classes: Intro to the Exceptional Individual, which is the beginning of understanding what regular ed teachers need to know about special education, and then the other one was Multicultural Education. And that one also includes being aware…

Now remember, this would’ve been the early 2000s, but starting to be aware of how diversity is represented in children’s literature all the way up through the textbooks that the kids are using, to all sorts of things. So DEIB and inclusion has long been on my mind. And so with that that really steers a good bit of what I do with my websites.

So today, instead of slides, I have a blog post and I will be able to help share the link for that one later. As I’m sharing my screen now, Zoom notoriously, if you’re running multiple monitors, will just pick kind of roulette style which one it wants to show you the Zoom window inside of.

So trying to get, make sure that I could see all of you as well as we’re going. Here’s my blog, and my website is courtneyr.dev, C-O-U-R-T-N-E-Y-R dot dev. And again, disclaimer is that I could teach people how to get up to being junior devs. I would not consider myself somebody that is a uppermost echelon of senior engineering or an accessibility expert or even a designer, right? I am none of those things.

So before I dig into the actual meat of today’s things, I’ll share with you a little bit about where my site is and what I’ve been doing with it, because that’s how I’m finding the accessibility issues that I’m working with, right? Homepage of the site is it’s got a little bit of slight motion that’s in there, but nothing that’s too major going on.

There’s some color contrast deliberately in here, and then I start playing with color and oh boy, I’m still learning as we go.

As I’m scrolling down my screen, the beginning, the top part was a photo of myself with a newsletter opt-in on the right-hand side, followed by another row section area that’s got a bit of a blue background to it, and it’s talking about how a newsletter would help somebody to grow, and it’s got some descriptions of what they can expect to learn.

True story, I haven’t actually started sending messages yet. I’m still working on my website. So we’re all guilty of this at some point. Just make sure that you feel okay with that.

After the next row that talks about my newsletter that is yet to get moving, I have blog post previews, and that section is called Field Notes, and it’s got kind of this aesthetic that looks like somebody ripped up magazines out of, to make a ransom note. That’s intentional. Cut letters out of the magazine. So the style that I have gone to and I describe with Claude Design that I want things that are a mixture of an old school 1990s style zine. I want things that give it a little bit of a comic book feel or scrapbook or those types of things.

And I gave it, “Here is a color palette,” and let it help me from there. So this, so one section says Field Notes in this ransom letter, ripped up type of thing. And then Blog Post previews. There are four blog posts that are available to be previewed. It would show a featured image if I had put one on today.

Always with ourselves, right? We’re, we take care of our customers more than ourselves, I think.

And then the last row area is called Stream. And so the Stream and the blog are essentially… they’re both just posts. They are little Archive Loops previewing what’s going on in the posts. But those two things are distinct in that a blog would be what you would think of as the blog, and then the Stream goes along with the tab at the top of my site or the navigation menu item that says Stream in it.

And the site is using Ollie as its theme. Love working with the Ollie folks. And the Stream area in particular, this is a child theme, because I wanted the ability to get a lot of coding and not mess up actual Ollie theme when I run an update, so we’re doing the child theme.

And the Stream area, if you’ve ever heard of IndyWeb. A lot of this goes with it, so indieWeb.org, and it comes from this era of Foursquare when we all used to check in when we went to places. “Hey, I’m eating at this place. Let me put it on Foursquare or Yelp,” or what have you.

So what I’ve done is that IndieWeb says, “Here are all the different types of activities that you could do,” and I’m working on building out a plugin that integrates the IndieWeb type of ideas, right?

And so I’m listening to this song. If anyone’s Gen X, Gen Y kind of era, you might remember Last.fm, and you can Scrobble your music here, and it will tell Last.fm or the other way. And so I’ve been doing a lot of really fun projects and you get that scrapbook vibe to it.

And I’m thinking that as Amber’s probably watching along in the background, she’s like, “Yeah, I see where this could be an issue. That could be a thing.”

My little drop-down carets in my navigation menu at the top those were even a bit of a thing because it was the drop-down carets were things that Accessibility Checker at some point was starting to flag for me.

So if I were to go into these, I’m still not completely done with it yet, but if I were to go into this like my gallery image that’s here. It’s got a picture of turkeys crossing the road near my house. Up the street of my neighbor’s house there was wild turkeys just walking across the road, as you do, and it’s meant to look like the photos you would get if you walked into the mall and you went to a photo booth. So Zenial crowd, you’re gonna dig maybe some of what’s happening here.

So it’s still a work in progress, and I’m not entirely done with it yet. And oh, by the way, I also have my site in light and dark mode, and pick from the system which way that you’re doing it. And I’m not done quite yet with building it. So the Stream shows those areas, whereas the blog tab will show items from the blog. I’m working in the Stream area to have alt text.

Okay, let me think through. In the Stream area, things that I’m still doing yet, sorry, Archives. If I were looking for, let’s go to next page and see here are VHS tapes. The night that I was watching Ted Lasso, I checked in on my site and said I’m watching Ted Lasso, and it’s meant to look like a VHS tape with the tape wheels and things.

And then, I was listening to U2’s song American Obituary, and it’s meant to look like a cassette tape player.

But also when I go into the Archives of these things, I’m trying to get AI to help me design the way that these Archives will look. So if I went into this one about Ted Lasso, and then I said, “Go show me the Archive from all things that were the Watch kind,” now it’s going to look like a physical, like you’re walking into Blockbuster and the DVDs are on the shelf that you wanna go through and find and rent, or VHS, or maybe it’s that weird area of both.

Amber asks in the chat if our kids will even know what those were. No, and mine frankly don’t even know what DVDs are. I never really got into them ’cause they all just get scratched up, and a lot of the ones that we play, that we pay for, the Streaming systems we pay for, they’ll let you download for offline viewing.

I’ve never even, never worried about it. On the Watch Archives, if I say I’m watching a show, a movie, whatever, it’s gonna show up on these shelves. And so you could start getting the idea of where might Accessibility Checker have ideas about things for my site, and also what would be unnecessary to explain to other people, right?

And so some of them, like if I go into this single post for Ted Lasso, earlier I was on the Archive, you could see that I’ve got some decorative text that’s here. So to describe the page a lot of folks in this crew will probably know Alex Stine, who has contributed a lot with between this meetup and to the WordPress Project overall, and I always think if I were sitting down and having a conversation with Alex, how would I describe this page before making Alex use the screen reader to go through?

So I clicked on From the Archive of Watch, which looked like a bookshelf with a TV on top of the shelf and like a bucket of popcorn. Now, I’m onto a single post, and on this single post I’ve got a VHS tape up at the top, and it tells me the title of what I was watching, Ted Lasso, season four. Highly recommend if you need a good pick-me-up, feel-good kind of thing.

Below it, it’s got the link to IMDb, where you could learn more about it. Then it’s got some hand-drawn type of effect to it, and this one just says, “Watched. Noted. Kept.” It’s literally decorative. So tuck into your brain, oh, that might trigger an ARIA thing because it is decorative, and for somebody that’s got a screen reader reading everything to them all the time, that might not be important enough for them to want to hear it.

You and I that have sight might look at this and say “I’m just gonna keep skimming over it. Clearly it’s not the important part.” So at what point do we make decisions for ARIA to hide things or not? Important. Below that’s a card that looks similar to an index card that says details on it like this was a TV series, the title of the series was Ted Lasso, it’s season four, episode three, what year it was published, what date that I checked in on my website saying that I was watching it.

Below that’s, again, some more handwritten type of effects that’s mostly decorative along with little squiggly lines on the side that are decorative the meta info of what time the post was published, et cetera, and then a, “Hey, do you wanna get on the newsletter?” And I auto-close posts from comments after 14 days on my site just to help keep the cruft down.

And then below, that is a footer of related blog posts, and below that’s the whole site footer that has my social media links as well as a link to my About page, my theme, my supporting Indie Web, and the Accessibility Statement because I’m using Accessibility Checker Pro. So That’s a orientation to where we are with the site, and this is a pet project or a passion project for me of I’ve always wanted to be able to do something like this with my site.

And before AI with as much as it can do, I really would never have gotten nearly this far in the time that I am, nor would I have been able to say, “Every single time that you do a color, a contrast check on my site, I need you to test light and dark mode for both of those things.” And so those are some of the kind of the ideas to keep in mind with it.

[00:18:10] The Tools

Courtney: And so that brings me to the blog post for today. And if Paola, if you’re able to put the link in again, or I see that you did recently. For anyone that might have missed, here is a link to this post, and it’s gonna give us kind of the outline or the tools that are with this.

So as I’ve been building all of this out, I say in my skills or my prompts, and you can find links to them in this post you need to adhere to a certain amount of color contrast from the beginning.

Here is my color palette, but you must adhere to color contrast, along with other types of details. If I ever am doing… If we get a jump to show the blog preview for the whole blog loop, you’ll see that I use kind of these sketch notes for my featured image as I’m looking through this four-up view of a post that I’ve written on the blog itself recently.

A lot of them have this. I’m using Google’s NotebookLM to draw a sketch note, so a graphic. And inside of it I tell it to include skin tone diversity ability diversity, age diversity, hair textures, colors, all of it. The things that my multicultural education class told me that I need to pay attention to with students I want that represented even in kind of the art style of other things that I’m using on my site, too. I just think that it’s important to always be thinking through that.

I’ve moved from looking at the entire blog preview back to that single post. And actually, I think I’m gonna take us into my dashboard. Pardon, I am a plugin maximalist, so no scare there.

And I’m gonna jump over and take a look at…

I am running both Accessibility Checker and Block Checks. Block Checks is one that Troy has put together. I’m blanking on Troy’s last name at the moment, but let me go into Issues Explorer. So I’m navigating Accessibility Checker, Issues Explorer, and I told it to do a run last night before I went to sleep.

So not everything on my site is completely done, and I wanted it that way for today. I wanted you to be able to see, here is what I have done so far, and here is how I’m using AI, because I think that it can be really useful. There are times that I’ll forget to check the color contrast, but my brother-in-law is, has a profound color contrast issue and is definitely color blind and sees greens as browns and muted tones and things. And so I forget things. People that have the opposite experience seldom forget the experience they’re having. So I like AI to be able to help include some of that. So the things that I would jump at first the things that would stand out to me let’s see if I can shrink up my browser just a bit.

And Amber, if you spot anything that you’re like, “Oh, I wonder if she’s gonna cover that,” please feel free to help yourself and jump in. Okay. So I’m looking at the Issues Explorer here for Accessibility Checker, and under my buttons I’m getting a a three criticals that are listed here, and it tells me a little bit about them.

And honestly, it’s like I don’t know that info. I’m not an accessibility professional by trade. I just think it’s really important to do on my site. So it tells me that there’s some button code that’s in there that I might want to look at, and I might want a deeper explanation about what that is or means, and I could take that info and go ask an AI tool what that looks like.

It says it’s really important, so I’m gonna trust that what Amber and crew have built probably is. But that it’s an empty button, it indicates. So I might wanna go view the page and see, and if I see that there are lots of issues with it, then I might have something to say. So in this case, Amber, do you have a rough guess as to what it is that it thinks it’s doing that is not correct based on what we’re looking at?

Amber: Yeah, I can come back on. Okay, so the thing I noticed initially when you clicked over was it said it wasn’t visible.

Which happens sometimes if it’s something that isn’t… it’s only on mobile. Yeah. Or If it’s in a modal or something.

Courtney: Yep.

Amber: So there are a couple of ways you can find that, but one of the easiest ways is if you go back and click the link again so we’re on that right issue.

Courtney: Sorry.

Amber: From the Issues Explorer.

Courtney: Yep. So-

Amber: It’s the View on Page.

Courtney: And then… Sorry. I’ve got my… Let’s turn Arc out of that mode. Probably driving some people crazy with the amount of things that are open and going here. Scroll. That opened this one. Yep.

Amber: Okay. So here’s where it’s saying it’s not visible.

And we’re cut off on the right a little bit. I don’t know which way-

Courtney: Yeah.

Amber: … You’ve adjusted your windows, if you wanna put it back. Yeah. There we go.

Courtney: There we go.

Amber: So if you click the three dots next, at the top of the Accessibility Checker bar, you could actually Disable Styles, and this is a quick way which if, for folks who’ve never seen a website with no styles, sometimes it gets a little scary.

Courtney: Yeah.

Amber: But if you scroll down the page, you might be able to see the pink highlight around the element that was flagged. It was… So there we go. So I think that button-

Courtney: The consent.

Amber: … That’s being flagged, it might be something in your cookie consent.

Courtney: Yeah. That’s what it’s looking like.

Amber: And if you click Show Affected Code sometimes that is helpful. But what I would do now is you could re-enable styles.

Courtney: Yeah.

Amber: And there is a button there to turn it back on-

Courtney: Yep.

Amber: … Or you could always refresh the page.

Courtney: Yep.

Amber: Do you know how to open your cookie banner? Can you trigger it to open?

Courtney: Hold on.

Amber: Oh, yeah. So if you-

Courtney: Hold on.

Hit the Accessibility Checker and-

Amber: If you dock-

Courtney: There we go.

Amber: … Yep, if you dock Accessibility Checker-

it’ll open Accessibility Checker, and you could either move it to the… You can drag that window wherever you want.

Courtney: Yeah.

Amber: You can also dock it.

Courtney: Over here, yeah. And so the-

Amber: So I suspect that it might be the button that’s on that manage consent.

Courtney: Yeah.

So the way that I would, if I were gonna go digging down this rabbit hole, I would probably, just going off of the info that Amber has shared, I would take a heavy amount of screenshots with this and then drop that into chat and say, “Here’s the experience I am seeing.” Or if I were somebody that was using a screen reader, I would prompt things to be like, “Get me all the code. Tell my AI, here’s what it’s doing.”

And just yesterday I had my first audio chat with AI that was like a work-related thing. I was proofreading stuff and my brain just wasn’t firing. So I’ve started dabbling even with using audio chat for things, and I would audio chat at it and say “Oh, hey here is all the different stuff that I want you to get in there and fix and what I am seeing.”

But one of the other things that we see that’s in there is, so I might realize like, “Oh, that cookie consent pops up in a lot of places, so now AI I want you to bulk edit across my site and I want you to go get and find all the places that is impacting if it is the identical thing.” Like the manage cookie consent’s gonna come up on every post, right?

So I might need to set something in manage cookie consent specifically, and I could have the AI then bulk edit things. I see that down below there are some other issues that are ARIA hidden and should this be hidden, and that’s the decorative text that I was pointing out for you earlier. So if I were to go View on Page, that would be the decorative text area.

The… Oh, no, so it’s not normal decorative text. In this case it’s going to take me into the title area, and so I would need to dig in and say like I don’t know that I want the title… The issue in part is that I’m showing an Archive that has nothing in it yet, so there’s that. But I guess another really good…

i’m trying to think of what are some of the other examples that I have for all of us, and one of them was for instance, if I look at this blog post, hold on. Here we go.

I was on WP Builds recently, and I’m fetching a blog post, and this is one of the things that definitely came to mind for how I’m using AI to manage my site as well, is that I mentioned about doing bulk audits, bulk triaging of things.

Once I figure out what the issue is once now we have to fix it everywhere, and we could, go if you’re old school like myself, you could go at the database in SQL and, do a search replace from that, or you could have AI just help you along with that. So one of the things that I found is that when I was embedding YouTube videos into my site, Accessibility Checker Pro was saying, “I see that you’ve got these videos. Are you sure that it is whatever?” And then I did some looking at also a friend of the meetup series, Joe Dolson, has Able Player, and I was able to say, “Ah, Able Player is going to cut down on a lot of these YouTube embed issues that we’re having, and I want to be able to swap it out, and ideally we should have transcripts with it.” And Able Player gives us that ability.

This is… I was on a podcast series, a podcast show, and this one took place in, let’s see, this was in May from this post from the looks of it, and I wanted to move all videos that I had of YouTube in my site everywhere and say, “Go drop this instead inside of YouTube from YouTube into Able Player, and then also get the transcripts.”

And there are ways to do that, so what I had done, and I’ll walk through some of this. I’m just grabbing a YouTube link, and I’m gonna silence that right away and say, if I were in editing this post- That, let’s take a look. So I was able to tell Claude “everywhere that you see a YouTube video, this is almost verbatim the prompt that I gave it, everywhere you see a YouTube video, I want you to go wrap it inside of Able Player, and that Able Player is using a short code for that embed, and it needs to know the link to the video, so it’s Able Player and then the video source is from YouTube. Here is the link to it, and then the caption file and the heading auto.” In order for … It was pretty easy to be like, “Go wrap this link for anytime that there is a YouTube episode and you know that it’s gonna give you the quotes around the link go wrap it with all the rest of this.” “Hey, Claude, everywhere that you see this, I want you to, one, go install Able Player on my site,” which I did over probably WordPress MCP.

I also have it as a local config setup where I have SSH or at Pantheon we’re using Terminus, but I can go through the terminal and issue commands, like WP-CLI, to maintain my sites. Go install this plugin and activate it, and then wrap all of this inside of Able Player, and oh, go get the transcripts.

How’s it gonna know to get the transcripts? There are tools that will help us do some of that. Erica’s a fan of Terminus, yes. I am coming to love it as well now that I get a chance to play with it, and I’ve got content happening there. So I had reached out to Amber and Joe, and I said, “Hey, folks. I really love both of your plugins. Could you make them appreciate each other, too?” And they said, “Absolutely, yes,” and they have both done so since then. Amber, I saw that in one of the changelogs come through recently, but basically it’s saying that Able Player makes the controls more friendly for various types of accessibility needs. So wrapping it in that’s part of it, but for people that want transcripts as well, if you need some hearing support or English is not your first language and you’re watching a video in English or vice versa for any other nationality. I would be turning captions on even if I was just in a noisy room.

I just like having captions on all the time. So what I also had Claude do was it will go and use, find where all of the missing transcripts are, and then there are some tools in here, and I’ve got links to all of the resources that you could see down below. But there are some tools like YouTube DLP, which is a…

Let me find where that is. DLP. YT DLP is the exact wording. I’m pulling up the precise link for it as well. Sorry about that. So I would write a prompt to go to Claude, and I could show what that even would look like a little bit. YouTube YT DLP. YT… I want the GitHub link to it. DLP.

So Claude can access different types of skills, and this is one that is, gosh, I think every AI has picked up on how to use it, right? And you’re… You basically just say, “Here is the YouTube video that I have, and I want you to go use this tool,” and you could install skills that will depend upon that tool all the time to go get the… fetch the transcript. So what I did was that I said to Claude, “Here’s the video I want to embed, and I want you to get the transcript, convert it to the right format, and upload it to my site.” And there’s a link to the video, and I’m actually going to see what happens if I let it run without telling it.

” And put them together using Able Player in a blog post. Do not publish.” Since we’re live, live with everyone. So here you can see that this was my run of show that I had above, but I’m just saying to Claude, “I want you to go and get the transcript from this exact episode on YouTube,” gave it the YouTube link, “put them together, wrap it inside of Able Player in a blog post on my site. Do not publish.” So it’s off doing its thinking right now, and in the meantime, what that did for me is that… And I knew to tell it, “You’re gonna have to convert the transcript,” because I did this a few months ago. It needs to go get the transcript from YouTube, and you can get extensions that will add that in for you.

So for other folks, and I am not a lawyer. I do not know legal parts to this. My goal in this experimentation is I’m just a person that’s running a blog, and I would like to have my captions, right? So there are a couple of ways to do this. I am chatting at Claude Code and letting it go, but you can see I’ve got some extensions running on my site as well.

So for other folks, one of them that I’m running is YouTube Summary, and when I click inside of it, it gives me, on the right-hand sidebar above the chat area, there’s kind of a window for YouTube Summary. It says transcript, and I could copy and paste that markdown. That still doesn’t put it into the proper format that it would need on a blog as a transcript file. So those are SRTs or I think it’s VTT are the two different types of formats. And I told Claude, “Go get all of it and upload it to my media library and post it here.” And you can see that it says the caption files and which number. VTT, Amber says, is the correct one. Yes. So Claude is off still thinking, and I’m gonna take a look while it’s doing that.

Found this video only has auto captions, and it’s embedded. I still say auto is better than none. I understand the value of having the human in the loop at this spot, but when I’m doing a let’s get something over nothing, this is probably where I’m gonna go first with it, right?

And so it’s going to generate the transcript. It uses Whisper by OpenAI in that process to go get it and it’s gonna make a note about that, and it’s gonna take an hour because of how long the video is. So I’m not gonna actually let it keep running, but what I will do is take you to my Media Library where you can see how other ones are there.

So I’m gonna look at… I won’t actually refresh this post afterwards because if I wanna go add in media, let’s go… actually, I’m probably gonna need to go this way. I’ll take you straight over to the media library. We’ll do an OK. Library there. And the reason for this is because to make the Able Player shortcut we need something that’s in there.

So I’m gonna do a search media for VTT. I forget if I put it in as .vtt or .srt. SRT, let’s see. Search media. So it’s just a media attachment upload that’s there. Oh, it’s gonna be one of those days. I don’t like seeing the media in the new layout, Amber. I’m still adjusting to it. Try filtering by type instead of just searching the thing. Yeah. Media.

Let’s see, instead of by location, by all media, images. Let’s see what unattached says. Nope. Search. I’ll just go back to the old kind of squared-up way of looking.

All right, so I’ve got a lot of little art things that are coming in, but there you can see there’s a pile of VTTs that are there.

And it tells you what the caption number is that goes along with it. So these are just similar to a markdown file, but it’s VTT, and it’s got the timing attached for your transcripts. So I had already configured SSH, Terminus, you pick your tool of choice of hooking your website up to your AI, right? No, it is not a great media search experience that’s there.

I have all of the caption files that are there, and it knows the numbers, but if I did a batch of 20 of these like you see all listed here, that might take me some brain power to be like, which transcript went with which video? And I would just as soon tell Claude to go convert all of them in a batch, especially on one of those times where it’s the day before a reset hits and they’ve given you all… you have extra here to run. Give your own site some love. Go get your transcripts done. Wrap things inside of Able Player. And if the plugins that you’re using to pull that off need to cooperate more with each other, then go ahead, reach out. They’re friendly folks, and I’ve found so far that suggesting pull requests and things on projects has gone well.

That is how I got that information in there. Let’s see if… Sorry. Clicking all the buttons as it goes.

So under posts again, being able to swap out, for instance, just the video part of it quickly cut down on a lot of the notifications that I was getting. Media Library Assistant plugin, many features, but best is much better search.

Yeah. Let’s improve the search part of it itself. YTDLP is one of those tools. If your AI doesn’t suggest it, highly recommend that you grab the link that Amber shared and you just say “Use this tool for the transcript,” and it will then say “Do you want to install it? What do we need to do with it?” Et cetera, et cetera.

Other things that I have done… So for good maintenance of my own website- I actually tell my system once a week to run the full go get the audit results, see what’s going on in Issues Explorer, and I also have it go look at, for instance, Lighthouse scores, run an Axe test, et cetera, and come back to me with results. And so I have a skill that handles all of that, and it includes looking at my weekly accessibility audit because I’m writing posts and I may miss some details even when I’m writing posts with accessibility in mind that, oh, suddenly something changed somewhere and now I need to review that. So I’ve gone in and scheduled things, for instance, with if I look for audit, let’s spell it correctly weekly Site Health Audit is the one that I usually have scheduled.

And when I run this, I actually have the skill, and let’s go off to GitHub and take a look at that one, and this might be the last thing that I do is take you to where my skills are inside of GitHub, and ’cause I wanna make sure we have some time for folks. Agent skills. Agent skills. Schedule regular evaluations if you have new barriers at your website. Might also ask Claude to fix them automatically. Yeah, I’ve started playing with that some as well, Rodrigo so having it come back to me with those results. So you could see here is my big vault of agent skills, and it’s like anyone could go use whatever you get that’s inside of this.

Let me get into my Weekly Site Health Audit one, and this way you all can have at the skill, and I can read for you a little bit what the skill will do, and it’s run it, compare the results, and my results do include Lighthouse scores, Axe scores. It will also… I probably need to word this, give better wording to this as well, but it will also go get my results against…

let me do… I’ll say it this way. Describe all the things that checks, right? So the, my weekly site health audit checks. So it will go look at what are my results for the official scans, come back to me with a plan. So you could set your schedule up, Rodrigo, to say, “Once a week, I want you to go scan all of these things,” and you might use tools like at GoDaddy when I was working there, we had Hub. That gives you some results as well. You might have a couple of places that you’re pulling various info from. That could be accessibility, that could be page speed, that could be you name it security auditing, what have you.

And you could set up a skill inside of Claude and just say, “I want you once a week to go scan these things,” or you use… If they schedule themselves, like with Accessibility Checker Pro, I could say, “Once a week, run the scan.” I don’t have to make my AI do it. What my AI needs to do, though, is go get the results.

So I might say, “Every Sunday, I want you to go get the results from all of the scans, put them together, and give me a remediation plan with that.” And then a lot of times what I will start doing is I’ll start researching with Claude and say… that drop-down caret probably is fine to trigger whichever way for ARIA. Tell me the best solution for this. Are you really sure? And then I might say, “Okay, I’m gonna go check it again with a different AI.” If I… If this is I’m not the expert, I might be like, “Oh, the drop-down caret in my nav menu doesn’t seem to be doing what I want it to do with accessibility. Is that a thing? If it’s a thing, double-check it against a couple different AI tools, or ask someone that knows better than you, and then go and come up with a remediation plan that will work and implement across my site,” And it’s been pretty good with doing those things. But again, I tell it, “Go look at official documentation. Go look at… I challenge it with, does the other AI agree with it? And then if all else fails, I reach out to some folks that know more than me and say, “Is that true or not true,” right?

And here’s kind of the things that go on in my prompt. It looks for instance at clear the cache. It knows to do that, in what order.

PageSpeed Insights, look at my Accessibility Checker Pro results, look at my Yoast SEO type of things. Joey Kudish, who I knew from his time at Metric built a tool, Agent.ai, and it will look at if the AI can scan your site or not. It looks at my security headers and email stuff, and testing a form on my site. Does a check against WAVE. Does… Is my website carbon footprint going way off the rails? If so, something’s not right. Checks agents Agent Ready, which is Cloudflare’s AI crawler. WordPress Site Health. Come back to me with a full report of all the things. Let me review and work with you to come up with a plan to implement this stuff.

And while you’re implementing it, I might wanna sit there and watch, like… I’ll use Claude in Chrome a lot of times, and I’ll say, “Go ahead, start writing the reply on a comment, but make me be the one to hit Submit,” because I don’t wanna be caught unaware of something else. So Rodrigo, I’m glad that helped.

I wanna make sure that we’ve got some other question time that’s in there, so I’m gonna be looking through some of these. “Could create an agent to do this,” Sachin says, “but you want to be careful to not make changes to the live site. You always wanna review before it makes your…” Yeah. Rodrigo, at Pantheon, we operate in three different phases, and my background comes from just two, so I’m dealing with places… we host some really big very large websites that have a guaranteed uptime amount. And so we have three environments, dev, test, and live. But even if you don’t have those three, most people are familiar with I’ve got staging, and then I’ve got live, or I’ve got a local version, and then I’ve got live.

And I find that if you’ve got a backup of your… Pick one of them to be your playground, your sandbox, your thing you’re gonna intentionally make a mess of. Clone that as well, because you always want to have a pure version of your sandbox area to go back to. And you can point AI at it and say, “Go ahead, go make a mess of whatever you need to do to try and experiment to learn the things.”

But then as you’re implementing, one of the things I do is that as it comes back to me with all these results and we go and we implement it, that whole chat thread, at the end of it I say, “I want to conduct a mini retro and improve these skills.” So if it comes back and notices on my theme now I’ve got these drop-down menu carets popping up everywhere more and more, or I’ve started adding more little artsy embellishments on my site, and maybe I want a place that describes some of it, that might be actually something that I should ask a couple friends of mine that have some visual impairments how they would like to understand some of the aesthetics of my site.

Maybe I’ll make a page that’s just dedicated to explaining here is what some of the artistic little extra things that we’re hiding is. That way they can find out about it, but it doesn’t have to be in their face so to say, interrupting them a bit.

But make places that you can go make a mess of things, Rodrigo, absolutely, because you want to learn and experiment. You just don’t want, as Sachin says, to do it on your live site, ’cause then if something breaks it’s hard to roll it back.

[00:44:45] Q&A

Courtney: Yeah. Other questions that I can, I could help anyone with?

Amber: I can pop back in. So Mary had asked, and I don’t know if you wanna try doing this, ’cause we have 10 minutes, if you could show an example of Claude actually fixing something.

Courtney: Sure. Yeah.

Amber: Could we try and get it to fix that empty button?

Courtney: Yeah, absolutely. So let’s go. Here we go.

Amber: So you’re copying the affected code. I’m gonna narrate a little bit.

Courtney: Yep. Yes, thank you. Yep, so copy the affected code. I’m gonna say… Here we go. So I’m using Whisper as well, and Whisper will let me dictate at this.

Amber: And what is Whisper?

Courtney: Whisper is an AI tool that will allow me to voice speak. It is W-H-I-S-P-R. No, W-I-S-P-R, Whisper. And it will let me voice dictate. So let me here’s how I would say my prompt to it. Last night I had you run an Accessibility Checker Pro scan across Courtneyr Dev, courtneyr.dev, and it came back with some results.

I’ve copied and pasted one of the results that it indicates is a critical issue to resolve at the top of this. In discussing this with Amber Hinds, who is the creator of Accessibility Checker Pro, on staff with them, and a great accessibility expert, Amber has identified that it looks like this is coming from my consent cookie tools, which is Complianz with a Z on the end.

I would like your help in understanding what the issue is as well as how we might go about fixing it.

Amber: Okay, I’m gonna say something now that you’re done dictating.

Courtney: Yeah, say it. There you go.

Amber: I don’t actually think that’s where it’s from now that I’ve seen the code.

Courtney: Nope.

Amber: But this is how you dictated in without having to type all the prompt.

Courtney: Exactly, like giving it all of that context of things. One of my coworkers had a, an injury recently, and a shoulder is not working, and they too are discovering using Whisper for some things. Yeah, Whisper Flow, Sachin says. I was finding it… I am ADHD. I have my own bits of varying accessibility needs, and I’ve got two kiddos that are both on the autism spectrum. And so I think about, as a teacher would, around a lot of the educational side of it.

I’ll just hit send and see what this does since we’ve got time here. So I think about learning styles and needs a lot. Yesterday was a Monday of all Monday mornings, my brain wasn’t up to speed, and I was writing the glossary for a new product that we’re launching, and it’s pretty technical and in the weeds, and I’m still new and learning the product that I need to write the directions for.

So I found it a lot easier to go to Claude Chat and have a voice conversation where I could say “Tell me what Steve’s concerns are as he would comment about things on this document, and then what your advice is. Give me a simple ‘Where did the source information come from?’ Go get the links, et cetera, and then let’s leave a comment back as a revision tool.”

And I’m like mind blown on what this could do for various learning style needs. So we’re gonna let that one… It’s gonna look into this before guessing. And-

Amber: Yeah, so this is what I was about to say. It’s coming from the lightbox in Core.

Courtney: Yep, yep.

Amber: So- … yeah. You can tell that by the class.

Courtney: Let’s go find another one.

Amber: The interesting thing about this is the code on… So there is… If you go… I can tell you how to see it if you wanna view it on the front of the page now.

Courtney: Okay. Yep. So is it that because it’s a gallery post, and it would call for the lightbox?

Amber: So you have these set to open in the lightbox rather than being just static on the page.

So if you click on one of those images. It’s the X up at the top.

Courtney: That’s the issue that’s going on there is this.

We’ll see if it-

Amber: Yeah. Yeah.

Courtney: Okay.

Amber: And it’s interesting because it has a span in it which should be text, but it’s got a hidden attribute on it-

Courtney: Oh, yeah.

Amber: … Which also hides the text from screen readers.

And this is a weird one, because I’m all like I want to go inspect this core block on a site running like Twenty-twenty five. Yeah.

Because I’m like, is this actually right? Where did that come in, and why is the hidden attribute still there? And it’s got display none on it, which would also hide it from screen readers, but that’s why it’s empty.

Courtney: Yeah.

Amber: If you inspect the code, you can see it, but yeah.

Courtney: Yeah. Okay, so that one’s not… that’s one of those examples that we would have to navigate around, and so what I would do is then go back at, so it’s oh, here’s what all it said da, overlay buttons unlabeled at rest. And then here’s a little tip or trick I’m actually chatting with Amber now, and she said this. Here is the transcript of us talking, and then I could say “Write a plan that helps address the issue on my site. Tell me if we should ignore or do something to resolve the concerns despite the limits of Core. So we’ll just say it that way and let it cook there for a little bit.

And so it’s still thinking from before I interrupted it, and now it sees that I just interrupted it. So I gave it literally the meeting transcript that I’m running also. Knowing that we’re recording this for the public, I’ve got a transcript running for being able to keep my own internal notes too.

And I just literally grabbed that swath of transcript, dropped it in for some context, and then said, “Go find this information for me,” and what can we do? And we’re gonna see that it will… We might run out of time on it, but it might come back here with a plan for us of do we ignore it? If we ignore it, what’s the trade-off of doing that? If we don’t ignore it, then what can we do to confirm or work around it? So Claude says, “Amber’s right.” While we’re running…

Amber: Can I ask you a couple questions?

Courtney: Yeah.

Amber: Okay, so the first one is, how long did it take you to learn this whole process, and what tips do you have for someone who has never used Claude and is trying to figure out how to start doing this?

Courtney: Yeah. So getting started with Claude, Claude Code really has only been around for a year. It’s wild. We forget what life was like before it. But folks, my first coding class in college truly was paper and pencil, not even on a computer. Ooh, we’re cooking with fire now. So I’m in and doing this stuff all the time.

What I did with Claude is that I looked at- What would I be doing if I were maintaining other customers’ websites still? And how would I approach taking care of them? And I should be doing the same for myself. Even though I am primarily an employee, I do take care of a few other websites besides my personal and I needed to get my personal up to speed as so often many of us do.

I tried to practice those skills and I said “This is a lot of information from Accessibility Checker that I don’t know what I should be do- Like, I need a plan to actually fix the stuff.” For a lot of it what I would do is I would watch other skills that other people would put out. I would pick up on, some of the stuff that’s in my repo, because I watched Yoast the person’s repo of how he writes his agent skills.

Or I would see that Amber shared some kind of a tip tool or something on social media and be like, “Oh, I should make a note to integrate that into my approach.” So I’ve been slowly building towards this for quite a while, but also literally Claude Code’s only a year old, so you’re not behind if you haven’t gotten there yet.

So what a lot of things I have done, I’m moving away from using tools that are a visual interface. I long have used places like ManageWP. I’ve got the stuffie on my bookshelf right over there. I’ve used a lot of tools like that for a long time. I just said, “Go pull all of those reports together in my AI, and now help me come up with a plan for how do I remediate this, and what are other skills that experts are using that are out there?”

I’m on newsletters that follow website accessibility or other bits of web development. I’m constantly saving news articles and resources for a ‘I should implement this.’ One of the things I do sometimes is I’ll take the link right away to my AI tools and say, “Hey, does this have… Does this article have anything that would help improve this skill?

What would you recommend for how it improves this skill?” So if there’s some new development in WCAG coming along, I hear that WCAG 3 is in development I might start proactively saying to my system, “Get as close as you can towards WCAG 3 standardization as those articles come out and available. Would you recommend anything from that article that we implement now?”

And so following, the official sources with it. That’s one of the things that I did. But it’s also conducting retros with myself after I’m done with something. “Hey, look at everything we just did together. Based on everything we just did, do you have any suggestions for improving the skill that you have?”

And then if you wanna get really fancy, you do things where you keep the GitHub repo of it, and that way no matter where you go, you can have my work identity AI now quickly knows my learning styles because I have it in a shared place that I gave it access to, to be like, “Here’s how I can support you in your, how you learn best.”

Or it can see I learned all of this on my personal account. My agent skills are just skills. They’re not proprietary skills, so they’re just out there in GitHub, so bring it in and make use of it in my other paid work account, et cetera.

Amber: Yeah. Simon had asked, “Have you written anything on your PKM and how you use Obsidian?”

Do you have any blog posts about that?

Courtney: Oh, you are finding it. I do. This site will load slowly when I give you all the link, but let me show what’s going on here. Yep, Simon you’re a, a quick watcher there, for sure. So yes, I am an Obsidian fan, absolutely. So I’m using Obsidian, which is a, a software tool that is an interface for reading markdown.

And Obsidian is my everything, my second brain is the common term for it. You see here’s my run of show today, of like I even said, “Hey, go look in my vault at all of the discussions that I have had with you, AI.” And so I set it up, it’s a RAG or a Retrieval Augmented Generation, and the link is gonna load slow most likely because I have a very large vault, and Obsidian Sync lets me publish all that info publicly.

Let me grab that link when it’s… It’s coming. So let this load ’cause it’s large and it takes a bit. But you will be able to see and get the idea. That’s the public version, what I’m willing for everyone to be able to see and share, and I don’t publish all of what’s in there, which is why it’s still loading.

But what I’ve done is that I’ve got a project going. Let’s see here. Collapse all my things. I’ve got this projects folder up at the top, and inside of it is one of it like Courtney R. Dev accessibility remediation, and I go get this path. From system root, and I say to AI “Keep your notes of today’s work in here and use it to help me prepare for this presentation,” even though I’m, like, quite literally in the presentation, but there you go.

I tell it, “Here’s the path. Go look at everything we’ve discussed. Keep your notes there about everything that we’ve done.” So it knows, for instance, that back in June I was prompting a certain way and doing something, and that was on a different Claude account. That was on… right now I’m using my work because I’m sitting at my work computer and presenting to all of you as part of a job, which is great.

But I started a lot of this before I even worked at Pantheon, and I was using a personal machine at that time, and it kept notes to my Obsidian vault. And then that vault just stays with me. It’s just note files, and you could keep yours in whatever place that you would like. But that’s how I’m using Obsidian and PKM, which is Personal Knowledge Management, PARA, and all of that good stuff.

I’ve been threatening that I need to get together with Joost de Valk, Remkus, and there are a few others that are, like, WordPress people with a lot of Obsidian interest and PKM and all of this nerdy, geeky stuff. But at the end of it what I hit that is published, you could see that in here I’ve been reading, hearing, watching, and there’s some accessibility news in there.

And Amber, I saw that just before last week’s Accessibility Day, the videos from the last session went live on YouTube, and one of the things that I do is that I go get the YouTube links on a daily basis of the things that I want to add notes about to my vault, and I toss them at Claude and I say, “You know my format of making notes. Take the notes, stick them in my vault.” And then once a week even I say, “Hey ChatGPT, Claude, go look at my vault at all the articles over the last week. Any skills that should be improved, news related to things, go add that.” So if it picked up something because of the videos from Accessibility Day that happened a year back that could be improved in my skills this week, it’ll catch it and start tweaking and adding that one.

Amber: Yeah, I think that is probably one of the best tips on how to get started using AI in your workflow is that you don’t actually have to necessarily know, you just have to tell it to build itself, right?

Courtney: Yeah.

Amber: Say, “Here’s a resource.” You create a skill.

Courtney: Yep, exactly.

Amber: And then every time you use a skill, say what needs to change or be improved about the skill to the AI and have it create itself, basically.

Courtney: Yeah. Yeah, exactly. Absolutely do a lot of that type of thing. Also give it the context that it needs.

You saw that I copied and pasted the transcript of Amber’s explanation so that way I didn’t have to ask Amber, “How, what should I type here?” Right? Give it the context of the thing. Say, “Here’s what I’m thinking about.” And one of the other things I do is that I’ll kind of info dump at… When I’m planning a really big project and I want this, my AI to go for a while, I’ll go to a different AI and say I might go over to ChatGPT and be like, “Blurt all of this context knowledge. Now, here’s how I want you to write the prompt.” The prompt I’m giving it goes to Claude Code. And so it will do better than me at writing the prompt that I then turn around and give to the other whenever it’s a really big, complex thing. And I’ll do things like, “Please look at my Obsidian vault worth of knowledge to see if there are best practices to glean from this.

Look at definitive sources. Go to WCAG about some of the accessibility needs. Go to MDN and look up the exact way I prefer that you write in vanilla code as opposed to bringing in extra frameworks or whatever.” And you start steering it, and you tell it, “Remember this, remember that. Now improve.”

Because, the AI tools themselves are iterating so rapidly that we have to keep pace with it.

Yeah. Carissa, when will it be available again?

Amber: I think we are at time.

Courtney: Probably about a week.

Amber: This has been phenomenal. Courtney’s link was shared in the chat, so definitely go there.

Courtney: Yeah.

Amber: It has tons of links to resources, and her GitHub with all her skills and everything. Is there any other places that people can reach out to you if they have follow-up questions, Courtney?

Courtney: You can find me, for those that are in, I’m in the Accessibility Day Slack, although I probably don’t check it particularly often.

You can find me also in my, all of my socials are in the footer of courtneyr.dev’s website, links to all the materials. But you can also find me in the Making WordPress Slack, Post Status’ Slack most any place that you’re already there.

And I saw a couple friends that are in a Signal group with me, so all the places. Yeah.

Amber: Awesome. Thank you so much, and thanks everybody. Don’t forget, we have a couple of extra things coming up. So if you are a public sector and interested in that towards the end of this month we will have one more meetup that is about Title II.

See everybody then.

Courtney: Bye, y’all.

Amber: Bye.

Access “WordPress accessibility remediation: Claude and Checker Pro” Website.