In this episode, we take a deep dive into Accessibility Checker’s “Fixes” release, why we did it, what the challenges were, and our philosophy on doing automated accessibility the right way.
Listen
Watch
Mentioned in this Episode
Transcript
Chris: Welcome
to the Accessibility Craft podcast, where we explore the art of creating accessible websites while trying out interesting craft beverages. This podcast is brought to you by the team at Equalize Digital, a WordPress accessibility company, and the proud creators of the Accessibility Checker plugin. And now, on to the show.
Amber: Hey everybody, it’s Amber, and I am here today with Chris.
Chris: Hey everybody.
Amber: And Steve.
Steve: Hello, everyone.
Amber: And we are going to be talking about automating accessibility fixes in WordPress. This episode is episode 92. So if you want to grab show notes, or a transcript for the episode, you can find that over at AccessibilityCraft.com/092. Before we dive into our topic, we always start with a beverage.
Today’s Beverage
Amber: What are we drinking today, Chris?
Chris: We are drawing inspiration from my high school aged daughter trying a Alani Nu, the Juicy Peach flavor. This is an energy drink and I’ll just read their description.
Buh bye burnout. Refresh and reset with our bestselling Alani Energy. Each can serves up 200 milligrams of caffeine and bold flavor, all for 15 calories or less and zero grams of sugar with a dash of vitamins B6 and B12. These energy drinks will keep you and your natural glow at your brightest, even on your busiest days.
Amber: I’m being goofy over here and Steve and Chris were looking down and they had zero reaction.
Chris: I
Amber: All right. So I will out myself right now. I have never in my life drank an energy drink. I’m a little bit afraid.
Steve: Same here.
Chris: This will provide a better first impression than Red Bull will.
Steve: Same here. I’ve never had one either.
Chris: Or at least it should. I’ve never had the peach flavor. I had one time several months ago, they have like a Hawaiian Ice flavor. And I was like, this is weird for an energy drink because it doesn’t taste horrible. Because I thought energy drinks were always supposed to taste horrible, like the Monster Energies and the Bang and whatever else, like, they all taste awful to me.
Amber: Alright, so someone explain to me how 200mg of caffeine compares to like a cup of coffee and tea and how much caffeine is in your Coke there, Steve?
Chris: I don’t have chatGPT open.
Steve: Let me find it on the can. Caffeine content in a Diet Coke is 44 milligrams.
Amber: Oh boy.
Steve: Yeah, this is like four or five Diet Cokes.
Amber: Are you Googling caffeine in a cup of coffee?
Steve: Oh, it’s more than that.
Chris: A regular 8 ounce cup of coffee contains about 95 milligrams. So this little can is about the equivalent of two cups of coffee.
Steve: Yeah,
Amber: okay, so I’m a little, I don’t think I knew that our high schooler was drinking energy drinks, and this literally has a warning on the can.
It says not recommended for children. She thinks she’s not a child, but I think she’s still a child. People sensitive to caffeine. I think I might put myself in that boat, because I don’t even drink coffee.
Steve: Yeah.
Amber: Pregnant women or women who are nursing. So I’m a little bit scared.
Steve: Well, didn’t you send us a whole case of these?
Chris: Yes. Because that’s the size that Amazon sells.
Steve: I hope we like it. So it has a, on the art, right? It shows, you know, it says, it’s got like, what looks like a sticker on the can, it says juicy peach, and then it says peel. How many of you guys actually tried to peel it like I did?
Chris: Oh, I didn’t. That’s interesting.
Amber: It does look like kind of 3D. It looks like there could be a sticker stuck on there of a peach.
I mean, it’s cute art. It’s a teal can with sort of a coral colored text and peaches and like bubble letters. I mean, let’s be real. I kinda get why a high schooler wants, like it looks like they’re trying to appeal to high school aged girls or young women.
Steve: Yeah.
Chris: It’s very girly.
Amber: It’s like the strawberry shortcake beer.
It is a girly, as opposed to Red Bull, that’s kind of hyper masculine in a lot of their marketing and that kind of stuff, right?
Steve: And it says it’s gluten free and vegan free.
Amber: Vegan free? There are no vegans inside this.
Chris: No vegans allowed in the can.
Steve: It says vegan free.
Does that mean like vegans can’t drink it?
Amber: It just says vegan. It doesn’t say vegan free.
Steve: Oh, it just says vegan, okay. But I mean, like, so is my Diet Coke, right?
Amber: Yeah, lots of things are vegan. It doesn’t make them healthy. Like, Oreos are vegan.
That is what we call greenwashing.
Steve: Yeah,
Amber: I’m a meat eater, and I even…
Steve: Ooh, that had a nice
Amber: Of course there’s no animal products in a beverage. Alright, there just has to be milk in it or dairy.
Chris: Smells like peaches and chemicals.
Steve: Peaches and chemicals.
Amber: So I have a question. I did notice this has like a lot of vitamins in it?
Chris: Mm hmm.
Amber: Why? Do they normally put a bunch of vitamins in energy drinks? Or is that just like part of their thing? Like they’re trying to be a healthy energy drink?
Chris: Well, I think that’s kind of the idea. I mean they have like ginseng root extracts it’s sweetened with erythritol and not like aspartame.
Amber: But what about sugar?
Chris: It has a small amount of sugar, I think.
Amber: Oh, because this is low calorie, it only has 10 calories.
Steve: It says certified zero sugar.
Chris: Yeah, it has no added sugar.
Amber: Yeah, we give you cancer instead.
Steve: No, not yet, I was waiting for you guys.
Chris: Yeah, it’s very sweet. It’s sweet and peach, and kind of like, tastes like a drink that was made with a powder, almost. Like, I’m getting that powder mix kind of… Probably the artificial peach flavor, because when I was a kid, my dad used to buy the big tubs of peach tea powder that you would mix up. And we would drink that by the gallon. And it’s giving me that kind of artificial peach, like powder drink vibe.
Amber: It’s like crystal light.
Chris: Yeah. Something like that, right?
Amber: That’s what my parents used to buy. Crystal light powder. It’s like grown up Kool Aid.
Steve: Yeah, I mean, after the first couple drinks, it tames down a little bit, but at first, boy, it’s sweet.
Amber: It’s fizzy. It’s like a soft carbonation. It doesn’t have a bite, but it’s fizzier than I thought it would be.
Chris: I mean, I know what impressed me about this, when I like read the label, when she begged me for one at the store once, our teenager. I was like, oh, this actually has not horrible ingredients in it. Like, I don’t think there are any artificial colors.
Amber: Yeah, just caffeine.
Steve: It’s just going to speak to your heart a little bit.
Amber: Which is a literal drug.
Steve: But I mean, a lot of caffeine has made our company go a long way.
Chris: Caffeine makes the world go around. America runs on Dunkin. So what do you think, Amber? How was your first energy drink experience?
Amber: I guess we’ll know in about 20 minutes if I start going like this, getting really jittery.
Chris: Well, just drink like a quarter of the can and that will be the equivalent of a half cup of coffee. You’ll be fine.
Amber: Yeah, I think it tastes pretty good. I actually don’t think it’s as sweet to me as maybe some of the other like sodas we’ve had. Like it doesn’t taste like, whoa, that’s so sweet, I feel like I’m drinking liquid sugar. I kind of like the peach flavor. I’m girly. I like the can. I’m still on the fence about whether or not our teenagers should be drinking this stuff.
I guess after I’ve had a personal experience with it, I might go have a conversation and make her hate me. But you know, that is the joy of being a parent. So, I’ll give my thumbs up or thumbs down or in the middle at the end of this episode, how about that?
Chris: Okay, sounds good.
Amber: What about you, Chris? You have a rating already?
Chris: I feel like I’m kind of, thumbs up on it. Like if I’m choosing between multiple energy drinks, I think it’s a thumbs up, no brainer for me. If I’m choosing between this and many other drinks across many other categories, it’s probably a thumbs down.
Like I definitely am not an energy drink person and this hasn’t persuaded me to become one. But I am impressed enough with the flavor that I think that the reason I’m suddenly seeing them everywhere and the reason that I’m seeing my kids ask about them and talking about how all their friends drink one every morning and all that, like, I can see why.
Steve: Every morning?
Chris: Yeah. She had my teenager who, by the way if you didn’t like this, then you’re automatically sus because everything is sus, with teenagers. Everything is sus. But we’ve all passed the bar of not being sus by liking it, I guess. But she has a friend that apparently has a personal energy drink fridge, and this friend drinks a energy drink every single morning.
Amber: All right, look, Michael Pollan has a book where he talks about drugs and how they impact our bodies and our culture. And there’s a whole section about caffeine. And I think everybody needs to go read that. It is a drug.
Steve: Isn’t there stuff about like the discovery of coffee and caffeine, like, ushering in the enlightenment era?
Amber: That is true. I don’t, he doesn’t say that it’s all bad.
Steve: Yeah,
Amber: but it is addictive.
Chris: 100%. Yeah.
Amber: So I don’t know about the teenager with the personal energy drink fridge. Like her parents are starting her early.
Steve: Yeah.
Amber: But I don’t know. Maybe she’s straight A student and that’s why.
Chris: Maybe,
Amber: Do you have a rating yet, Steve, on this? Or are you holding to the end to see how you feel?
Steve: it’s OK. I mean, like…
Amber: Do you normally drink four Cokes across a day?
Steve: Oh, yeah.
Amber: So would you trade four Cokes for one of these?
Steve: no, the Coke tastes way better, so no, it doesn’t. Like I need to start a diet Coke scale, on a scale of diet Coke to water.
Where does this, you know, like…
Chris: Water’s the bottom?
Amber: Water’s the bottom? My scale would be the opposite of yours. That would be the worst.
Steve: That’s hilarious.
Or how willing are you to switch out your Diet Coke for this? Right? Like, I don’t know. I mean, it’s all right. it tastes fine after a few drinks, you get used to it.
I’m sure if I drank the whole thing, I’d like the caffeine buzz. I’m pretty sure but, yeah, it’s not bad. I mean, I’ve got like, what, how many did you send me? 24 of these or 12 of these?
Chris: Yeah, a stupid number. A number that is very stupid.
Amber: Has anyone else in your family tried one yet?
Steve: Yeah, Jennifer cracked into one already.
Amber: And did she like it?
Steve: Yeah, she liked it.
Amber: All right.
Chris: Well, good. If somebody likes it, then they’ll serve a good purpose.
Steve: There you go.
Automating Accessibility Fixes
Amber: All right. So we’re going to talk about automating accessibility fixes in WordPress today, because we had a recent large update to Accessibility Checker, one of the bigger ones we’ve done in the past few months where we added the ability to automatically fix some accessibility problems on websites using settings in Accessibility Checker. Steve, I’m wondering if you could describe that update a little bit for our listeners or viewers.
Steve: Sure. So, as users of the Accessibility Checker already, you know that the Accessibility Checker scans your page for accessibility issues. Well, we decided to take that a little step further and to provide fixes for things that we can accurately detect through programmatic methods and provide an option for you to fix certain things.
So, this release comes with 14 fixes. And these fixes allow you to fix things like adding skip links, blocking links opening in new pages, and adding labels to search fields and things like that. And then we added some fixes in our Pro plugin as well that allow you to block PDF uploads, to put file information on linked PDFs and other linked documents.
That’s kind of the release in a nutshell. And we’re going to go into a little bit more on how that works and how we ensure that those fixes are being applied appropriately. And if it’s not applied appropriately, what do we do in those cases? But in a nutshell, that’s kind of the release.
Amber: And so there’s 14 fixes that came in and we’ve got a breakdown of some are just available in the free plugin that you can download for free off our website. And then there’s some that are in the Pro plugin as well for paying customers.
Steve: So when it comes to releasing features, like Amber said, it’s been a while since we’ve done a big release like this.
And you know, when it comes to building a product like a WordPress plugin, how do we come to what to do next? so why did we decide that fixes was going to be this next release?
Chris: I think from my end, having had conversations with people at various points in their accessibility journey, there was some feedback at multiple levels of people saying like, hey, it would be great if the tool, beyond just giving guidance and being a teaching tool and helping flag things, if it would do a little bit more or make my job easier somehow, as I’m remediating. And I think we took that to an extreme, not in an extreme sense, but just like, okay, well, what could we literally do for people? And I know we’ve had numerous discussions about that. And I think there were some conversations on the product side too of like what and how we want to enhance the experience of using our product and how that helps our customers and also helps us as a company.
Maybe Amber has some thoughts there.
Amber: Yeah. I mean, I think, something that has come up more as there’s increased awareness of it in the community is we’re seeing not just developers use the plugin and that is, I think, always a really interesting thing as a product owner, figuring out who your audience is and how you can best serve them.
Because we have some people who are developers and accessibility specialists, and they really get accessibility and they like our plugin because it speeds up their work. but they don’t have questions about what accessibility problems are. They’re just like, this tool makes my job go so much faster, so I like it.
And then we have developers who don’t know accessibility and they can use it to learn accessibility, but they still have no problem with, I know how to fix things. So they’re like, okay, great. This told me this field doesn’t have labels. So I can go out and figure out how to add one on my own or write some JavaScript to solve whatever the problem is.
And then we have this third group of people, which are people who are maybe DIYing their websites, or you know, are more on the designer side. So they’re really good at designing with like a page builder tool or something like that, and building and implementing WordPress websites. They might even know some, like, CSS and a little bit of PHP, but they’re not, like, really solid JavaScript developers. And so for those people, they know accessibility is important, but they sometimes encounter things with the plugin that they don’t know how to fix. And we were constantly getting some feedback on that end. And so, you know, of course we’re like, how can we create a product that works well for those people too?
Because the last thing we all want is somebody to see all these accessibility problems, get overwhelmed and then just not do anything. And so I think that was sort of some of our ideas. and I will say like, as far as timing and, you know, why now? There is always a little bit of that. And maybe Steve, you could talk about this.
Like we were in a meeting and we’re talking about, these are priorities and different things to work on. and at one point we were like, well, this is one, it was like leading up to WordCamp US, it doesn’t need as much input from Amber maybe, so let’s bump it to the top of the queue and then put some other things that require a lot more input from Amber later.
Like, because also you, right? So our plugin dev could work on it while you and I were at WordCamp US and it was okay because it was mostly a dev task versus like a design decision kind of task.
Steve: Yeah. And, and that’s not to say that Amber’s input was not crucial, right?
Amber: Oh yeah, I did lots of testing.
Steve: Run everything through the Amber filter before we can release.
Amber: I am a bottleneck. I’ll admit it.
Steve: I mean, I will add on, that like, I think a little bit of it was kind of us scratching our own itch kind of thing, right?
So we do audits and remediation services for our clients. And I think when Amber’s in there doing audits and stuff, she gets a lot of ideas for, oh, well, this needs to do this, right? Like we need to show the file type and we need to show the file size on a linked document. Right? Like, to abide by certain standards, right?
And we’re like, well, we could programmatically do that, right? that’s not a guessing game or, and that’s not something that necessarily requires a human evaluation. So a little bit of that is, well, if we put that in the plugin, then on our audit client, we can just install the plugin and enable that.
And boom, there’s all what we needed for our own clients as well. And so I think that’s a little bit of us kind of dogfooding our own product and use it actually being users of our own product which helps us to make a better product for other end users and auditors. And so I think that was a little bit of it, was some of our own needs for these things.
And I know we, like, from a development standpoint, we go through and like on a lot of websites where, you know, we’re adding focus states, right? Like the simplest thing in the world, right? It’s like, we’re always adding that two pixel, outline that’s two pixels offset, right? and a lot of times we’re having to overwrite themes and then like, well, that’s not always a great solution is just to add one outline because we never know what the background is.
Then like, if it’s a dark background or if it’s a light background, right? We have to go in and write a custom focus state for whatever section, right? And then we’re like, well, if we add a fix into the accessibility checker that adds focus outlines to everything and actually unsets theme styles and which restores the browser defaults, which has the white and the blue outlines on all the elements that solves the problem for the whole website, right?
Regardless of what the background is, because it has both outlines. Yeah.
Chris: Yeah. Hold on a second. We’ve talked a lot about how we’re not fans of fully automating accessibility or accessibility overlays and toolbars specifically. And I’m wondering, is this an accessibility overlay? Is that what we’ve done here?
Brought to you by Accessibility Checker
Chris: But we’re not going to answer that question until these messages from our sponsor, which is us.
Steve: This episode of Accessibility Craft is sponsored by Equalize Digital Accessibility Checker. The WordPress plugin that helps you find accessibility problems before you hit publish. Thousands of businesses, non profits, universities, and government agencies around the world trust Accessibility Checker to help their teams find, fix, and prevent accessibility problems on an ongoing basis.
New to accessibility? Equalize Digital Accessibility Checker is here to teach you every step of the way. Whether you’re a content creator or a developer, our detailed documentation guides you through fixing accessibility issues. Never lose track of accessibility again with real time scans each time you save.
Powerful reports inside the WordPress dashboard, and a front end view to help you track down hard to find issues. Scan unlimited posts and pages with Accessibility Checker Free. Upgrade to Accessibility Checker Pro to scan your website in bulk, whether it has 10 pages or 10, 000. Download Accessibility Checker today at EqualizeDigital.com/accessibility-checker. Use coupon code AccessibilityCraft to save 10 percent on any plan.
Amber: I love that: Our sponsor, who is us. That is true.
Chris: We can say whatever we want because we’re our own sponsor.
Steve: That’s right.
Amber: Yeah. And you want to know, is this an overlay, Chris? Is that what you’re asking us?
Chris: Yeah.
Is Accessibility Checker an Overlay Now?
Amber: What do you think, Steve? Is it an overlay?
Steve: Nah, not in the traditional sense. Yeah. Are there, is the implementation similar like , it’s fixing things, right?
But I wouldn’t call it an overlay. And I wouldn’t say the way that it’s applied in the way that it’s evaluated, re-evaluated is necessarily how any overlay works. But, no, I would not call it an overlay, but I can see how somebody may see it as the same.
Amber: Well, so something that I would highlight about accessibility overlays that we are not doing and that we will never do. So first of all, is we don’t have a little toolbar panel on the front. But also along that same thing is we don’t try to detect if someone is using assistive technology and then serve them a different version of the website. What Accessibility Checker is doing, if you enable one of those fixes, is it’s fixing it for everyone.
And it’s giving everyone the same version of the website. It’s not trying to say, oh, maybe this is a person using a screen reader I’m going to hijack. and give them the screen reader version of the website.
Steve: And we’re not making any claims either. We’re not making a claim that by enabling, you know, if you go through our 14 fixes and you enable all of them, we’re not making any claim that your website’s 100 percent accessible, right?
we’re actually saying, hey, install these things. Let the scanner rerun, check it again. Do it on staging, audit it yourself, use your keyboard to check it again, right? We don’t make any claim that it’s a one, one click, everything’s fixed. And that’s part of the reason why you have to go through and individually check each one of these on as well, because they all may not pertain to your specific website.
Chris: and I think another thing that differentiates us is the validation loop that Steve, you and William came up with. And I’d love to have you go into that a little bit more and, what we’re actually doing there.
Steve: the way it works now is you go to the settings page and that’s where you can enable the fixes, right?
You can see all the fixes on the settings page. There’s a tab called fixes and you can enable those all there, If you have the Pro version of Accessibility Checker, you could run a full site scan after enabling those, and it’ll actually reevaluate all of those rules again. So say you’re getting a warning for opens page in a new tab, right?
And then you enable the fix to prevent pages from opening in a new tab. Our scanner will catch that fix. we went through and updated a subset of our rules to accommodate that re-evaluation from a technical standpoint, some fixes are implemented on the client side using JavaScript. So we needed to ensure that our evaluation also ran JavaScript, after the fix was enabled. So that’s kind of how you can do it from a global level.
If you’re on a post and there’s certain fixes that match up to certain rules, like I said, with the opens in a new window, if you’re looking at the details tab in the Accessibility Checker meta box there is now a button that says fix.
you can click on that fix button. It opens a modal for you to enable that fixed setting right from there. Once you check the box to enable it, you hit save in the background, what actually happens is without having to save your post, it initiates a new accessibility checker scan of that post.
Right there in real time, so you can actually see that issue disappear right after enabling it.
Chris: And that issue didn’t disappear because we disabled our rule from checking in the back end. We’re actually validating our own fix.
Steve: Yeah.
Chris: In that moment. And if our fix fails for any reason, you would still have a flag there.
Steve: Yeah. I think that was a crucial way to set it up. and I think I have to give credit to Amber for this.
Amber: Yeah, initially they had built all the fixes and we were going through and testing and Chris was doing some testing and I did some testing and I was like, well, wait a minute. If this is fixed, the rules should, like, the issues should go away.
Like, it shouldn’t show up. I kind of threw a wrench in your spokes a little bit on release day when I said that to you.
Steve: We had to add a couple of weeks of development to it, but you know, when you’re making a product like this, and especially when you’re dealing with accessibility, I think, and Amber is very in tune to the end users because she’s an end user herself.
And it’s paramount to make sure that we’re doing this the right way, right? We could have released it without doing that. and actually we could have done like a one to one, like this fix is attached to this rule evaluation, right? If this fix is enabled, just disable this rule altogether.
Well, we didn’t think that would be enough because, in the chance that our fix does not actually fix the issue, we still want to catch it. So we are basically just re-evaluating our own fix over and over again. So if you enable add field labels to fields, right?
that’s probably one that could be a little wonky. If you’re dealing with a really odd implementation of a form, right? And we’ve seen it, right? We’ve seen odd implementations of forms coming from very widely used plugins and themes. If it doesn’t succeed in adding that label to that input field, then the warning in the details tab will still be there. it’ll find it again.
Amber: Well, I think one thing that I really liked about this validation loop that you brought up, like another really good example of this is we’ve seen this on sites that we’ve audited where someone had already installed our friend Joe’s plugin WP Accessibility, which is a great plugin.
Sometimes when people don’t understand accessibility or they don’t understand how to test things, they just think I should just turn on all the settings because it will make my thing better. And what I saw on that website was they had a theme that already had skip links. And then they went into Joe’s plugin and they turned on skip links, even though they didn’t need to because they already had them, but they didn’t know, they didn’t know what it was. They didn’t know how to test for it.
And so they had two sets of skip links on every page because of that. and I thought one thing that you and William did that was neat was with, our skip link fix, if it first looks to make sure there isn’t already a skip link on the page, and if there is, even if someone has ticked that setting on, it won’t add another one.
Steve: Right.
Amber: Which I really like because it’s almost like protecting users from themselves. I thought that was really neat that you guys worked on that in the validation. Really making sure that if we are going to build fixes that are automated, they can be as smart as they can be, you know, WordPress specific, which a lot of these accessibility overlays are not.
They’re like trying to work on every single website. Built with every CMS imaginable and static HTML and JavaScript and all this kind of stuff, right? And sometimes that’s to their downfall. and that’s the plus of our solution being WordPress specific is that it can understand things about how the website is built and structured.
It can access things. I think there’s a couple of fixes that maybe reference WordPress functions that exist in WordPress core and use that to be smart about how the fix is implemented, whether or not it comes out. Or like, providing better information.
Steve: Yeah.
Amber: And so I think like that is another way that we are really different from an accessibility overlay, even though yes, we have quote, some automated fixing.
Steve: Yeah. I think again, it’s very WordPress specific, right? like you mentioned the skip links, right? So there’s a function on WP body open. I don’t know. Don’t quote me on the exact function. And that’s normally where a skip link is output, right? So we can check that to see if something like that’s being output, you know, the header, the title functions, the comment form on the WordPress search form.
So there’s definitely certain hooks that give us a greater sense of accuracy on what we’re doing inside of WordPress than just some JavaScript overlaid on top, that’s just kind of guessing and trying to be a generalist, right? our plugin is not a generalist in this respect.
It’s more, specific to WordPress.
Chris: Well said. So, did we already, yeah, I mean, I guess we really did talk about how the fixes talk to our rules because it’s really just that validation loop, right? Yeah, that’s really how that communication back and forth is happening. So, I know that added two weeks to dev time.
Steve: Yeah, at least two weeks.
Doing This (Right) Is Hard
Chris: How easy would you say it was in general to automate accessibility fixes in WordPress, and are there any challenges other than the validation loop that really stood out? Like what fix was the hardest, maybe?
Steve: Yeah, it was, you know, on the surface, some of these things seem a lot easier than I think they ended up being.
And maybe that’s just where Equalize Digital separates ourselves a little bit from a lot of others is that we go that extra mile to make sure that we’re not just doing the minimum to fix something that we’re actually making sure that it’s actually fixing it. And these are not all things that are defined, right?
It’s not just like, here’s exactly how you do this thing, right? Like with adding form labels to form fields, right? We actually have three rules in regards to this, right? We add it to the comments field, we add it to the search field, and then we have one in the Pro plugin that allows you to add form labels to any form field, right?
So the WordPress specific ones are a little easier because those are functions. We know what to expect to some degree coming out of those. But adding form labels in a more general way is definitely more complicated and it requires a lot of back and forth between, me William, our developer and Amber to come up with what’s the correct way to do this.
If we need to determine what a field label should be from what exists on a form, Like, there’s certain things we can pull out, right? If there’s an ARIA label, right, of course, that’s great. Pull that out, make that a visual form field label. But if it’s a little more, you know, and what’s the order?
So there’s certain attributes that we can pull data from to determine what to call that label. Right. And then…
Amber: So we should list those and maybe talk about how we change the order and why. So what are all the attributes we’re currently looking at?
Steve: That’s a good question.
Amber: So I, I think what I remember, tell me if I’m missing something is ARIA label, placeholder name attribute, and title attribute.
Steve: Yeah.
Amber: Well, but it started where name was a lot higher up in there and this is why, like concepting, sometimes you change once you start testing in reality. And we encountered a WordPress plugin, Spectra, that is actually, you can see this today. I am going to go open an issue for them, or if they’re listening, they can go open their own issue right now.
You can see this today. If you spin up your own free demo of Accessibility Checker Pro on our website, EqualizeDigital.com/demo. I’ll just throw that in there for fun. Because we used Spectra on there and I only discovered this when building that demo. Spectra, which has millions of active installs, if you use their form builder, their labels are all just divs.
So their fields are unlabeled. And I think the name attribute was higher up, but I think they’re using the name attribute, maybe to target JavaScript or something, but it’s just like a string of numbers. And so when I was testing a earlier version of the fixes with that plugin, it was like, okay, well I’ll put the, string of numbers as the label.
And I was like, well, this is not good, right? And we had to have this whole discussion about it. And this is what’s interesting, like knowing WordPress, because if that was a tiny plugin that only had like a thousand active installs, we might’ve been like, eh, that’s a weird edge case. But no, this is a plugin that has over a million active installs.
And so we then made a decision in our plugin reflecting on that because we’re like, we don’t want to add junky labels on up to a million websites because all of them are going to go install our plugin, I hope.
Chris: Well, they have to install the plugin and then they would also have to turn on the fix.
Steve: Yeah.
Chris: Let’s be clear.
Amber: Yes. But hopefully we can get Spectra to fix their input labeling on their own.
Steve: I mean, that highlights as well, the importance of not just, enabling a fix and then just trusting it like a hundred percent, because in this case, our recheck is actually going to say it has form labels because it does have form labels.
Amber: Now I did open an issue and this is something I think we need to do for a couple of our rules. I want us to just, flag things that have strings of numbers.
Steve: Right.
Amber: I open that for us to do in the future, like labels on fields, alternative text like there’s a few different use cases where strings of numbers should never be a pass.
Steve: And I mean, I think that highlights too, like, so there’s a second piece to this, right? Like once we implement fixes on the certain areas, and we’re doing our check on those certain areas too. And we utilize a highly curated version of Axe Core in our plugins. Our rule set is in no way a complete one for one implementation of Axe Core, we are cherry picking out of the Axe Core library, what we want to use for our rule evaluations. And not only just taking those at face right?
Like, we’re not just saying, okay, we need to evaluate for missing form label. Axe Core has this great rule that can do it very accurately, right? So we enable it and we’re like, okay, good to go. No, we actually are-evaluating if it’s actually doing it right. And I will say that we did find some areas that need improvement and we have worked with some people at the Axe Core team and they’ve been very responsive to make updates to those things and some of our feedback, but I think it underscores the importance at all levels of accessibility remediation, like you’re entrusting Accessibility Checker to help you fix things, right?
So you’re trusting that we’ve gone through and done our due diligence to make sure these rules actually do what they say they’re doing, right? And it goes all the way down to your own implementation of that fix, right?
That you validate as well. And you have all these levels of checking and evaluation on top of that. and I think that goes back to the original discussion. Is it in an overlay? You know, I think if the evaluation is done at all those levels, it’s hard to say that it’s a one click evaluation, one click fix.
No, you know, my website’s a hundred percent accessible. Right, right. No, we implore you to check these fixes and we’re checking the tools that we use in the backend to evaluate these things. And even if Axe Core doesn’t go far enough into doing a check that we want it to do, we will actually add additional code to that check.
And couple multiple rules and checks together. I know it gets a little confusing. Rules are kind of bigger than checks. Checks live inside of rules. It gets a little nerdy. I don’t want to go too far into that, but
Amber: Well, I, you know, I think though, like talking about challenges, I will say. Axe Core continues to be a challenge at times for us.
We started using it because it’s very well known, it’s open source, it, you know, is what started by a company called Deque that, you know, we trust like they’re doing really great things for accessibility. But there are times when we get in and we start evaluating some of the stuff and we just don’t agree or like, it misses things.
would say like, and I’ll be totally honest, like, there’s, there’s been a initiative that our friend Blake has started to use. He uses the axe core library and he’s scanning WordPress.Org and flagging things to try and make WordPress.Org better, which is great, but I’ve heard from multiple people on the accessibility team and on the make team that they see these reports and they’re just overwhelming. And that’s not a problem with Blake at all or what Blake’s doing. That it’s just, that is axe.
And if nobody goes through and curates axe for a non accessibility person, someone who just works on content on a website, that can, I mean, it’s, it’s a lot. But even like on the other side, like talking about the skip link one, that was one where we figured out their skip link is present rule doesn’t function in WordPress.
Steve: If you’re logged in.
Amber: If you’re logged in, because it only expects it to be the first thing on the page and there’s an admin bar and I’m pretty sure, I think actually William went and chatted and opened an issue and was like, there should be a way, can we exclude the admin bar or put some sort of flag on and they were kind of like, eh, no.
Chris: We’re not going to change this rule for a CMS that runs 40 percent of the web.
Amber: I know, right? It’s kind of frustrating to me that they aren’t, you know, open to that. Or even adding something where, okay, if you’re implementing Axe Core, you have the ability to say, this is my exclusion, right?
Steve: But like, a skip link should be the first thing in the body, right? It probably should be, but is it wrong if it’s not? I don’t think so.
Amber: Well, I mean, here’s, here’s what’s interesting. Technically what skip links relate to is WCAG bypass blocks. That’s the success criterion and bypass blocks say that you should be able to bypass repeated content. So what would actually be interesting is there ought to probably be a bypass block before the WordPress admin bar, if it’s visible, that allows you to bypass the WordPress admin bar and jump to the header of the website.
And then there are also use case scenarios where you might have a skip link that allows you to bypass, like, maybe a sidebar, if you have a left hand sidebar with navigation, right? Or any repeated content that exists across many pages.
Users are supposed to be able to skip that, not just like how we think about it. Like, skip the primary navigation, like there’s actually other cases. So, maybe there ought to be in core. And I don’t know, I’ve never looked to see if this issue exists, but a bypass blocks that just allows you to bypass a skip link, skip the admin bar and get to my website.
Steve: Yeah, that’s interesting. But yeah, so it’s, I mean, I guess this issue could be, like you said, it could be fixed on the axe core side. It could probably be fixed on the WordPress side too, right. But that might be, you know, Chris said, that’s 40 percent of the internet. If you update the way that works, that could probably be pretty noisy to a lot of users.
But so there’s things like that.
Favorite and Future Fixes
Amber: Can we talk about tab index just a little bit?
Steve: Oh yeah.
Amber: Before we move on.
Chris: I wanted to talk about blocking PDFs. Maybe, can we talk about our own favorite one?
Amber: Is that your favorite feature, Chris?
Chris: That’s my favorite one.
Steve: Why is that your favorite?
Chris: Because PDFs are probably the number one thing that I hear about in early and mid stage sales calls from anyone public sector or public sector adjacent. It’s the PDFs are a chief concern, having too many of them, needing to archive them, needing to find a way to not use them. And having issues with convincing people on their teams to not use them and finding good ways to block that.
Steve: Yeah.
Chris: So that’s why it’s my favorite.
Steve: So the way this works is you can enable block PDF uploads. And what this does, if somebody doesn’t have a custom user capability that we’ve created in our plugin applied to their user role, when they go to the media uploader, and they try to upload a PDF, it actually show an alert saying that, you know, they don’t have permission to upload a PDF document.
Chris: How hard was that to do?
Steve: That was super easy.
Chris: It was super easy.
Amber: You do need to have the Pro plugin in order to get that fixed. One of my favorite ones is the, it follows the U. S. web design system standards and it adds square brackets, all caps, file extension, and then if we have access to it, so if it’s an on site hosted document, it will include the file size at the end of the link
Chris: To any link pointing to a file, right?
Amber: Non HTML document.
Chris: Download, yeah, non HTML.
Amber: Yeah, not a website. It’s pointing to an actual, like, document, so, PowerPoint,
Excel, PDF, Word Doc, Pages, whatever that might be.
Chris: Is that one your favorite or was the tab index one your favorite?
Amber: Oh no, no, no. That one is totally my favorite because I oversee the team that does remediation and very frequently I have to do content remediation and anything that can stop me from having to manually edit thousands of links to PDFs, or Word Docs or Excel files and just have that automatically output that text. Total win.
Steve: Yeah.
Amber: What was yours, Steve? Since we’re doing favorites.
Steve: So mine’s not as, I mean, I like the form labels, right?
I like that because I feel like that’s going to be impactful, but probably my personal favorite, and it’s not nearly as cool as yours is the focus state. Like, because for me, that was like, it was just always a pain to go through and add focus states per section, depending on what color they’re using.
And then if they’re using the block editor, they could change that background at any time. And then my custom style was broken, right? So just being able to unset those styles and then restore the browser default. I don’t know. For me, there’s something I really like about the uniformity of that.
Amber: So the, the tab index, we should talk about that. Because that was kind of a challenge. So you want to talk where that started?
Steve: So the tab index we have a rule that says, you know, that modified tab index, right? So why that’s important is because, you don’t really want to, the tab index controls where the keyboard tab key goes to next, right?
And it should follow the visual order of the page, top to bottom, left to right, right? And if you modify that, it’s kind of weird. Like if you had tab index nine on a form field and somebody’s at the top of the page and all of a sudden it jumps all the way to the bottom of the page.
You’ve kind of lost a keyboard user or somebody that’s not sighted would lose context of where they’re at altogether. So we want to remove that tab index. And I think that we kind of, we looked at how other accessibility plugins are implementing this. and at first we like, okay, well, this goes back to validating, what you’re using, right? Well, they’re doing it this way. Maybe let’s try to implement it this way. And then we were removing the tab index. So we were just removing the attribute altogether and we’re like, well, there’s cases where, if a div has a role of button, it should have a tabindex of zero to make it focusable, right?
So, we modified that to take any positive tabindex and we brought it down to zero instead of removing it altogether because it could have been added there to make it focusable. And then did we modify the negative tab index?
Amber: I think in the beginning, the fix was removing all tab indexes.
Steve: Yeah.
Amber: And it was when I was testing that I said, well, hey, there are actual valid use cases for having a tab index of negative one, which removes something from the tab index. A great example of this is on loops. Like in the WordPress land, that’s like a grid of posts, let’s say, where you have a image that is linked to the post and a title that is linked to the post and you want them both linked for mouse users so they can click wherever.
But you don’t necessarily need a keyboard user to be able to tab to that linked image and then also tab to the title for every post because redundant links, it’s duplicate tab stop, it’s annoying. And so on the linked image, what would frequently happen then is that you would put a tab index of negative one and you would put an ARIA hidden equals true on it so that it doesn’t surface at all, because usually in that instance, the images are decorative.
And then that reduces the links, removes redundant links. And so I came back and I said, I don’t know if we should always be removing tabindex negative one. I think where we settled was we were not going to remove it at all with this fix, but we might add a different fix that allows people to remove that if it also doesn’t have ARIA hidden equals true.
And that’s kind of like a logical thing where it’s like, okay, well, it’s not hidden from screen reader users, then it should probably be like, they should be able to reach it because if they can find it, they should be able to focus on it. But I, I don’t know. We’ll have to think about that because I was just too worried that there are valid use cases that we’re going to make worse.
And that’s the thing I really was cautious about with all of my testing, thinking about what are like edge cases or potential use cases for each of these fixes or for the opposite of these fixes where the fix could potentially make a website worse. And that we definitely don’t want to do.
And I think we did a good job, especially with the work that you and William did, Steve, on that validation loop of like trying to make sure that if our fix is turned on, it’s not going to add accessibility problems to a website. That said, yes, there is always the footnote of you should always test these things, as Steve has talked about before.
I do think that was a little bit of a challenge and something that was written one way and then after a bunch of testing, William went back and recoded it based on feedback. So, and of course we love feedback from our users. So if you’re using any of these fixes and you say, hey, this doesn’t quite work the way I think it should, or, you know, I tried to turn this on and it didn’t do something. We would love to hear that because we love to be able to continue iterating and making things better.
Steve: So where can people go to learn more about our fixes? I know we’ve put together some documentation and training. Where can we find that?
Amber: Yeah. So if you are using the plugin and you want to find the fixes, where you do is in WordPress admin, you go Accessibility Checker, go to the Settings page, and then there is tab navigation. It is marked up as navigation for screen reader users, and there is a link there.
That’s how you can find them in the back end. You can also sometimes find them in the reports if they are related to a specific issue that has been flagged. There are documentation links there that will hop you over to our site, but you can also get documentation if you go to EqualizeDigital.com/accessibility-checker/documentation. And it would have been very smart for me to have that link ready to queue up and put on the screen, but I did not, but we will definitely include it in the show notes and you can find all of the fixes and explanations of them listed out in our documentation.
Chris: Yeah, and we did a total of 14 this release, which is monumental and amazing. but I know that there were some that didn’t make the cut. Are there, like, in the limited time we have left here, because we’re almost at the hour, is there one that you’re particularly excited about, each of you? Or one that you were excited to do, but it didn’t quite make the cut this time around?
Steve: Yeah, I have to pick one? Let’s see.
Amber: You can go fast. Do you have our product strategy board up? What’s coming potentially in the future?
Steve: Yeah. So this kind of depends a little bit on feedback on how receptive our users are to the fixes. And if they’re very receptive, we can move forward and add.
There were some that we started on that presented some challenges that kind of got pushed a little bit. So that we can get this release out, but I’ll run through a few real quick. We had a fix to make screen reader only labels visible. We have block incorrect heading level selection. That one’s a little bit different. I consider that a tool more than a fix. That would actually block you from putting the wrong heading level inside the block editor.
Amber: I love that one. That was one that I voted for. Because again, that’s like guiding content creators into making the right choices.
Steve: Yeah.
Amber: And that’s one that I know a lot of our users have asked for.
Steve: Remove offsite, embedded animated GIFs adding a pause button to animated GIFs and stopping animated GIFs if prefers reduced motion is enabled.
Amber: kind of based on some work that you did for WordPress core, right, Steve, in the plugin directory.
Steve: Yeah. If you have prefers reduced motion enabled in your system settings on your computer and you open any website in WordPress in the backend to search plugins, or if you go to your installed plugins, any animated GIF thumbnail will not animate.
So that was a few releases back in WordPress Core that I contributed to. So we’re trying to pull that over into the plugin so that we can make that available for all GIFs on your website. So let’s see, was there anything else?
Amber: So the read more links and that one might come out sooner cause it’s almost done, it just needed a little bit of a tweak and we were like, okay, let’s, I’ll submit writing documentation takes a long time, so I was happy when they were like, let’s bump this one to another release because then it gave me time to not have to write that article. But that’s a fix on if you have ambiguous links f or blog posts within that blog post loop that I was talking about, like read more, it would add the post title to that.
Steve: So that’s a few of the things we’re thinking about. Some of those were slated for the current release, but you know, In making a product, sometimes you have to fit the scope to the time that you have.
That’s kind of what we did. We wanted to get these fixes done. We wanted to get them done right. And we wanted to get them released to all of you guys before Black Friday. So we’ve got a, I don’t know when this episode comes out. I think it comes out next week, right?
Amber: Well, yeah, so let’s, let’s close with that. So Black Friday, if you have not bought the plugin yet, or you want to buy additional licenses or upgrade your license, make a new purchase. It won’t work on renewals, just to be clear, but on any new purchases, we will be offering a 30 percent discount on Accessibility Checker. You can get information on that on our website. It’s going to run, I always forget the dates, but it’s the Monday of Thanksgiving week, and it will run through, I think, December 2nd or 3rd.
So it’ll be good on Cyber Monday and the following Tuesday will be the last day. I would give you a, I’m going to tentatively give it a thumbs up. I think it tastes okay. And we’ll see how productive I am. I have some audits to finish and helping Steve up with that remediation.
Give this energy drink, a thumbs up for now. You can ask me on Monday, what I think. right. Bye everybody. Bye everybody.
Chris: Thanks for listening to Accessibility Craft. If you enjoyed this episode, please subscribe in your podcast app to get notified when future episodes release. You can find Accessibility Craft on Apple Podcasts, Spotify, and more. And if building accessibility awareness is important to you, please consider rating Accessibility Craft 5 stars on Apple Podcasts.
Accessibility Craft is produced by Equalize Digital and hosted by Amber Hinds, Chris Hinds, and Steve Jones. Steve Jones composed our theme music. Learn how we help make thousands of WordPress websites more accessible at EqualizeDigital.com.