168: Oxygen Builder Accessibility Reality Check, Firestone Walker Brewing 805 Blonde Ale

By /

In this episode of Accessibility Craft, Amber, Chris, and Steve talk through the National Federation of the Blind’s lawsuit challenging the delay of federal web accessibility protections, and what six months of real-world accessibility remediation looked like on a large WordPress site built with Oxygen Classic.

The conversation covers the practical impact of ADA Title II and HHS deadline delays, why organizations should not treat extensions as a reason to pause accessibility work, and how a large healthcare-related WordPress site went from more than 26,000 automated issues to under 3,500 through steady remediation work.

Then the team digs into the messy reality of fixing accessibility problems inside Oxygen Builder, including inaccessible mega menus, autoplaying sliders, ambiguous “Learn More” links, dynamic content limitations, and what was (and wasn’t) easy on the remediation side.

The featured beverage for this episode is Firestone Walker Brewing Company’s 805 Blonde Ale, a smooth, simple, cookout-friendly beer that earned mostly positive reviews from the crew.

Episode Outline

  • A quick tasting of 805 Blonde Ale from Firestone Walker Brewing Company
  • Why the National Federation of the Blind is suing over delayed federal web accessibility protections
  • Why accessibility deadlines may shift, but the need to make websites accessible has not changed
  • A real remediation case study from a 1,140-page WordPress website built with Oxygen Classic
  • How the team reduced automated accessibility issues from 26,346 to 3,494
  • Why global components like headers, footers, navigation, and forms are often tackled first
  • The challenge of remediating inaccessible mega menus inside a page builder
  • Why sliders and carousels are still such a common accessibility problem
  • The importance of pause buttons, labels, ARIA semantics, and non-ambiguous links
  • How page builder limitations can slow down accessibility remediation
  • The team’s honest take on Oxygen Classic and accessibility

Links & Resources Mentioned

Tune in to Accessibility Craft conversation episodes like this one every other Monday.

Accessibility Craft is hosted by Amber Hinds, Chris Hinds, and Steve Jones. They are experts in digital accessibility and creators of software, courses, and specialized services that have made millions of websites more accessible through their work.

To learn more about us, you can visit our website.

Listen

Watch

Youtube video

Transcript

Chris Hinds: Welcome to Accessibility Craft, where we explore the complex challenges and emerging trends that are shaping digital accessibility, while sipping on unique craft beverages. This show is proudly produced by Equalize Digital, The most trusted name in WordPress accessibility. Join us every week as we break down accessibility news and share the expert strategies we’ve used to help make millions of websites more accessible.

Grab a drink, the show starts now!

Amber: Hey, everybody, it’s Amber, and I am here today with Chris.

Chris: Hey everybody.

Amber: And Steve.

Steve Jones: Hello everyone.

Amber: And this is episode number 168 of Accessibility Craft. So if you want to find show notes and a full transcript, you can find that if you go to accessibilitycraft.com/168. What are we drinking today, Chris?

Today’s Beverage

Chris: We are trying out an ale, ’cause we haven’t had an ale in a while. So we’re trying Firestone Walker Brewing Company’s 805 Blonde. And I don’t, I don’t, I honestly don’t know much about this. I think it’s just you know, it’s a blonde ale, and we’re gonna try it, and we’re gonna see if Firestone Walker knows what they’re doing in the ale department.

Amber: Okay, so I will tell you Chris said to me, “I have to go out and find a drink for our next podcast episode.” And I was like, “Hey, you know what I saw in our purchase feed for Accessibility Checker this morning?” Like literally right before he went to go buy the beverage. 805 bought our plugin!

Aw, so thank you very much to Firestone Walker Brewing Company for caring about making your website more accessible. We’re very excited to taste your beverage, and now I feel like I’m probably not going to give it a thumbs down, no matter how it tastes…

Chris: I was gonna say…

Amber: Tastes.

Steve Jones: Yeah.

Amber: Weird pressure. I did scope out their website. It’s really interesting ’cause it’s all black and white, like everything, all the imagery. And they have videos, and they have, like, a ton… They call them films, but they’ve interviewed like, athletes. And there’s this one woman who runs this whole organization called Babes on Bikes that’s about, like, getting more women into motorcycling, and they have a little short video about her.

And all the videos are in black and white. They are captioned. And yeah, I don’t know. They, they have, like, a podcast about surfing. I think they’re out of California, right? And it says it’s Properly Chill. So I don’t know…

Steve Jones: Is, is it properly chill or should I properly chill the can?

Amber: I will say I was tiny bit sad because I went on their website and I saw that they have, like, michelada style beers.

Steve Jones: Yeah.

Amber: But they don’t have them anywhere near us. So maybe you can only get those if you live in California and you’re next to the brewery. If they’re listening to this, please send those to Texas.

I would love to try one.

Steve Jones: So here’s a little detail I find interesting. It’s got a black tab, like a…

Chris: Yeah.

Amber: (Cross-talk)

Steve Jones: On the top of the can. It’s a kinda little detail, goes in their black and white theme, right?

Amber: You already cracked it open, Chris. What’s it smell like? Oh, and you’re tasting it.

Chris: Smells and tastes like the most middle of the road, agreeable but good beer. Is the only way to describe it. Like, it’s…

Amber: Is it light?

Chris: … not exaggerated on any front. It’s just straight shot down the middle.

Steve Jones: It’s beer.

Chris: And I don’t mean like straight shot down the middle as a bad thing. If I have a beer that I don’t, that I don’t want to, I, I feel like no matter what I’m gonna say sounds mean. A, a beer that I don’t, a beer that I don’t wanna chew, that I don’t wanna think about that I don’t wanna analyze, but I just, I just wanna have a beer, and I want it to be good.

Steve Jones: Yeah.

Chris: That is what this is to me.

Amber: You’re making fun of my beer preferences.

Chris: Mm-hmm.

Steve Jones: This is a man’s, man’s beer, right? This like what your dad drank when you were growing up. Like…

Amber: It’s like Duff Beer?

Steve Jones: Yeah.

Chris: Yes. Yes. Duff Beer. An accessible beer perhaps for, for beer drinkers

Amber: Yeah. It, it is interesting. It doesn’t … You’re right, like it doesn’t really have any notes. Like, I was trying to think, “Can I smell anything on it? Can I taste anything interesting?” It’s smooth. It is definitely seems like on the lighter side, but I think that’s the way blonde ales normally are. Like, they’re, they don’t have as much bite, so it’s kind of friendly.

This is the, Steve, you always talk about, like, if I’m gonna have a beer after I mow the lawn, like that’s what I think of with this beer

Steve Jones: 100% a, a Steve-approved beer.

Amber: Yeah. I mean, maybe they are targeting, you know, they’re not into lawn mowing on the beach, but it’s like you’re done surfing.

Steve Jones: Yeah.

Amber: You come in with your board, you’re just chilling on the sand.

Steve Jones: Yep.

Amber: This is the kind of beer you drink.

Steve Jones: You and the boys. That’s right. Yep. Or, or the girls, you know.

Chris: I feel like this would be killer with a hot dog. It’d be great, you know?

Amber: That’s your food pairing?

Chris: It’s a cookout beer.

Steve Jones: Total cookout, pull this out of a cooler on the back patio. Good times.

Amber: All right, so where are you guys on the thumbs up, thumbs down, thumbs in the middle scale?

Chris: I’m always a fan of simplicity, to be honest, as long as it’s the quality’s there, right? This is high quality but simple, so it’s a, it’s a one thumb up from me.

Steve Jones: Yeah, yeah. I’m a big fan of the light ale beers, so it’s definitely a thumbs up for me.

Amber: So I’m gonna give it an in the middle. I do think the brewery is interesting. Like, I thought it was cool that they had this, like, art and, like, they’re doing more, like, not just creating beers, right? And they have, like, a surfing podcast, so I like that. This is not my style of beer, but I’m not thumbs down on it.

Like, I’m gonna keep drinking it. It’ll be good, but I don’t think I’d go out of my way to buy it again. That said, I really do want to try their michelada beers, as I said earlier. Like, I’m into the brewery. I think this is good beer for what it is, so I would just want to try a different style from that brewery.

National Federaton for the Blind Sues Over ADA Title II Delay

Chris: Awesome. Well, let’s get into our warm-up topic, shall we?

There has been a lawsuit from the National Federation for the Blind the current administration for the delay of the accessibility requirements under ADA Title II. Now, we’ve talked about this before, but maybe for the uninitiated Amber or Steve, would one of you want to talk about the delay?

And then I can share a bit more about the lawsuit.

Amber: Sure. So the state and local government was supposed to, if you had 50,000 or more constituents in your service area, for lack of a better word, depending upon what you were, city, county, or whatever, they were supposed to have a fully WCAG 2.1 AA conformant website by a date earlier this year in April.

And I don’t know, five days before the deadline, there was a one-year extension added for the entities with more than 50,000 people, and then an also a one-year extension which results in two extra years to comply for entities with fewer than 50,000 people that they serve. And the National Federation for the Blind is not super happy about this extension.

What they said, Mark I’m gonna butcher his name, but Riccobono, who’s the president for the National Federation for the Blind, he said, “We will not wait. We’ll fight to ensure that the promise of America’s laws and its founding documents finally become reality for blind and disabled Americans.” And they were talking about, you know, WCAG has been around for a really, really long time.

The ADA has been around for decades, right? And they’re like, “Why are we adding an extension here?”

Steve Jones: Yeah.

Amber: That’s what this is about. I don’t know if you have takeaways, Steve.

Steve Jones: Well, I mean, just a little bit, you know, the state and local governments, and I think it even includes some healthcare entities as well, right?

Amber: There was a Health and Human Services deadline that was supposed to be in May, that also got a one-year extension, which I think is covered under this, which would be, like, doctor’s offices and hospitals

Steve Jones: Yeah. Which, you know, if you think about those type of entities, they typically have some of the worst websites that’s why this is important.

Amber: And they, and they maybe are even more frequently visited by people with disabilities. Especially if you have a disability that’s triggered by maybe a chronic health condition, you might be having to visit doctors or pay medical bills more frequently than a typical person and go to these kinds of websites more frequently.

So to think that you can’t access the care or pay for the care that you need.

Steve Jones: Mm-hmm.

Amber: It’s a bad situation.

Chris: So what do you think, like, because my brain always goes to, feasibility, practicality, what is the real, what is the real impact or meaning behind this, like boots on the ground? Do you think this materially does anything other than make a statement? And I, I’m cool with either answer. You know, it’s just like this is where my head’s going.

Like, what is this doing?

Amber: So my immediate thought is lawsuits, especially lawsuits against the federal government, take years for there to be any action. Maybe I’m wrong. I don’t know. Maybe this will go to the Supreme Court real quick, but it seems unlikely to me. So I feel like that first set, the 50,000 entity organizations, which at this point, we’re in June, they have less than a year already.

They’re going to have to comply before there’s any decision in this lawsuit, I would guess. So maybe it’s more likely to impact the smaller entities who thought they have two years, but it– they might come back and be like, “Nope, you only have one, and you also have to comply by next year.” But that was my first thought, like, seems unlikely to move that fast.

Steve Jones: Yeah. So from the point of view of being a citizen, I think it’s always good when when Americans and organizations such as the, the National Federation of the Blind hold their government accountable. You know, regardless of where you land or what you believe or how you align politically, I think it’s always good to hold them accountable. And I think it’s probably a necessary move in regards to almost say, “Hey, we’re, we’re continuing to fight this always,” right? At every turn. And, and I think it’s probably the right thing for the Federation to do for their members as well, right? That they’re probably there to advocate in their place.

So I think this is the right move. I don’t… I’m with you, Amber. I’m not sure what the, outcome will be, but sometimes the outcome’s not realized now, it’s realized later, and the past actions kind of, you know, can help sway the future actions.

Chris: Yeah, so…

Amber: Yeah.

Chris: …point is more just to show you’re not complacent about these decisions.

Amber: Well, I will note that they did say in their lawsuit too, and this was something I think we’ve previously discussed, which is that when the year extension was added, there was some language there that left open the possibility that there could be more extensions or it made people think that there’s actually intent at the Justice Department to alter the language or the requirement itself in the future.

So maybe they’re less thinking about, “Hey, we need to get a judge to say, ‘Nope, you should have complied in April, and you need to start complying right now or you’re gonna be in trouble.'” And maybe they’re more thinking, “We need a judge to say this can’t be changed anymore.”

Steve Jones: Yep. Set the groundwork for the future fight. Yeah, I agree. Now, I will add a secondary piece to this too to the people running these entities, these state, local healthcare entities that are under, under this. Laws can change quick, like the extension, the extension was put in at the last minute.

But, you know, we saw it on our end. We saw a lot of entities scrambling to get to compliance before the deadline, and the extension came, and then we kinda saw a little bit of a, “Oh, okay, we got some time,” right? But, but but this raises the question, do you really have that time, or should you, should you aim for compliance now?

And really, year is a blip. Two years is, is, is a little longer of a blip. But, like, this is coming quick. You should get ready.

Chris: Wise words, Steve, and that lends itself to what I was gonna share, which is I had so many conversations right before this deadline. We had… I basically couldn’t keep up. There were so many people reaching out for help at the last second, and I was talking to people constantly at libraries, at cities, at police departments, you name it, and they’re like, “I heard about this two weeks ago.”

That’s, and that’s the weird thing, is in our country, at least this is my impression, they’ll put laws out, right, and regulations, but it’s on everyone else to understand these laws and what they’re supposed to do. There’s very rarely formal guidance. There’s not a lot of help that comes from the people setting the laws or the institutions that are enforcing the laws. It’s just you better figure this out on your own, right? Which is a, it’s a very US thing, right? It’s a very American thing, bootstraps, et cetera. But I– part of me sympathizes.

There’s another part of me that’s like, the ADA’s been around for decades. Why haven’t we kind of internalized this requirement and made efforts to just make sure that the digital experience and the physical experience are cohesively, you know, accessible to all?

But it’s an odd situation when I’m talking to someone who runs the website for an entire city or for an entire library system, and they’re like, “I heard three weeks ago that I need to meet WCAG 2.1 AA. I’m freaking out. Can you help me?”

Amber: So I will say I, I don’t know if this is just, like, a problem with the US or whatever. I think to some degree this is a little bit of a problem with the fact that there’s not as much education, or at least in my experience, there hasn’t been as much education for web developers on this front.

You know, we’ve talked before about the beauty of WordPress is that anyone can get involved with it, and anyone can learn to build a WordPress website. You don’t have to go to school for it. You don’t have to get some sort of formal certification. But the downside of that is that, well, hey, anyone, including people who don’t know any standards or whatever…

Like, I think when there’s laws that are passed that have to do with sales tax collection, most entities know about those because they have a professional accountant that they’ve hired who’s been trained and is certified by their state, and that professional accountant notifies them that there’s a new law that you need, right?

Because we can’t, as business owners or even individuals, we can’t read every law that’s written by our state and our city and our federal government. We rely on people to tell us about them. But the challenge with websites, and even those for cities or public libraries, I mean, you know, we’re working on one with a public librarian.

She’s a librarian, and she’s managing her website. Not a web developer, not, you know… How is she supposed to know, right? So I do think maybe there’s a takeaway of find your expert who can keep on top of these are the privacy laws, these are the accessibility laws, these are the best practices that your website needs to do.

I think any organization, whether that’s a government or a business organization, probably don’t try to do it all yourself maybe.

Chris: Well, I think that is a perfect segue, right? We spent the last six months fixing one of these websites built with Oxygen Builder, and I think we want to talk a little bit about that experience. But before we do that, we can take a quick commercial break.

Brought to you by Accessibility Checker

Steve Jones: 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, nonprofits, 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% on any plan.

Why are we talking about accessibility in Oxygen Builder?

Chris: All right, so we spent the last six months remediating a WordPress website that was built with Oxygen Builder. This was, without naming names, for a hospital system serving children. And they came to us because they heard about– I mean, primarily for them, it was the HHS stuff, right? Being a hospital. But broader compliance efforts were also a concern, and that is the primary reason they reached out. So these types of laws, regulations, and enforcement actions, they were concerned about that. They wanted to make sure they were putting their best foot forward given the audience that they’re serving, and they wanted to make sure that their website was accessible, that it met WCAG 2.1 AA.

And when I evaluate these, when I quote these, I don’t often look at the exact makeup of the website, right? I look at the front end. I look at the prevalence of errors. I test it with my keyboard. I plug a bunch of things into a fancy formula, and I come up with a best case scenario of what I think it will take to kinda hit that finish line within between five and seven months.

And this is something that I talk to people on sales calls about all the time as we scale the effort up and down to meet that five to seven-month target because it’s kind of a sweet spot. Particular website, we– as we got into it, we learned that it’s primarily built using Oxygen Builder which is a WordPress page building solution. Specifically version 4.9.7, which is Classic Oxygen, and the website has a grand total of one thousand one hundred and forty pages.

And like I mentioned before, I’m aware of, like, the structure and the size of the websites, but not how they’re built. So I think, will inform the rest of this conversation a little bit.

Amber: Yeah. So I think when I was reflecting on what should we talk about, I think this actually makes a really interesting case study. Because this is the first time I’ve ever really spent time in Oxygen outside of our page builder comparison. We never built websites with Oxygen, never did that. So it’s kind of like I came to it without any preexisting framework or dev processes, and maybe Steve will tell me that he’s, like, a secret Oxygen developer in his free time.

But I didn’t really know much about it. So I think us going into this website and saying, “Here’s all these problems. How do we fix them?” The first thing we had to figure out is what is the builder capable of, and, and I think it’s kind of interesting. And Steve, I don’t know if you want to start by maybe talking a little bit how we approached solving all of the issues, and we’ll maybe share that number later.

And we’re not done yet. I should say that. We’re still in the process. We’re just at a six-month inflection point.

Steve Breaks Down Our Remediation Approach

Steve Jones: Yeah, so the way that we normally approach these remediations on the dev team side is we typically, one, get access to the website, which sometimes is the biggest hurdle. And then we do an assessment. So we go through the website and we kind of look, look at all the plugins installed and, and, and look at how it’s built and, you know, is it custom? Is it using a page builder?

We wanna figure out how we’re going to remediate because how the website stack is, is put together a lot of the times dictates our development process. And we typically don’t want to go in and, and circumvent processes that have already been implemented in a website. So instance, on this one, it’s an Oxygen Classic page builder website. It has, has two code snippet plugins. I’m not sure why there’s two, but there’s two, and they both have snippets them. There’s ACF, there’s custom post type UI plugin, there’s Gravity Forms, there’s FacetWP. So as I’m assessing all these, you know, I’ve worked with FacetWP a ton. I know the accessibility shortcomings of FacetWP already, so I’ve got some, maybe some code laying around somewhere that we can implement.

So in that assessment like on this particular case, what I noticed is that, you know, this is all very editor-driven, right? There’s not a custom theme. There’s no code. And the editors of this site are non-developer editors that are making content changes or, I think there is like a freelance developer that comes in and makes code changes when necessary, but those changes are done inside the editor. It’s not done in a IDE and pushed up to GitHub with a deployment script and things like that.

When we remediate, we want to remediate in a way that gives them the access to everything we’ve remediated, right? So if I was to go and like make a whole custom functionality plugin, put all this custom stuff in there, it has NPM packages that have to be built and, and, you know, deployments, that’s gonna be difficult for that client to maintain.

So what I’ve actually done if I take that route, is I’ve created a blocker for them. Working within their framework allows us to remediate and allows them to access those changes we’ve made later on if they become an issue. Like say the page builder actually fixes an accessibility issue, and now my patch that I’ve put in is now conflicting.

Well, it’s right there. You can just go disable it in the, in the code snippets. So that’s kind of a long-ish rundown on how we approach things and kind of a little bit on the stack of this website.

Chris: That’s totally gonna be a YouTube Short later, ’cause I think people would find that super valuable, that whole, that whole thing you just laid out. And it’s interesting to me, too, like the thing you mentioned about working within the customer’s existing systems and not reinventing the wheel or layering more stuff on top of it that maybe they can’t even maintain because it’s so technical. These are the questions that people who need accessibility remediation done should be asking the, the salespeople or the dev teams they’re talking to. Like, how are you actually going to do this for me?

Because to your point about solving accessibility in a way that makes it so that only we can maintain that solution, like from a business perspective, yeah, that’s amazing lock-in, if you wanna call it that or whatever, where now that customer can’t leave you. But from the customer’s perspective, I would be watching out for things like that because that’s not too many steps removed from some of the accessibility remediation platforms out there who basically deliver all the accessibility fixes via a JavaScript snippet, but they own all of the remediation code that’s targeting the elements on your website, and it’s still served through the snippet.

And so if you ever leave them, you lose all your accessibility fixes. And these are the SaaS solutions I’m referring to. But great point that just called that front of mind for me.

What Six Months of Steady, Gradual Remediation Looks Like

Chris: So we’ve been following this methodology that actually lets the customers keep and maintain the accessibility fixes done for them, and we’ve been doing that for six months in 24-hour sprints per month for a total of 144 hours. Amber, where, where have we gotten in that time using this method?

Amber: Yeah, so we do a combination of both manual testing and fixing issues with Accessibility Checker. When we first installed Accessibility Checker on their website, scanned the whole site all at once, which is a beauty, but also the maybe scary thing of Accessibility Checker, it came back with 26,346 issues.

So we did that, 26,000, and then we also around that same week in December did a complete manual audit of the homepage and the contact page, ’cause we’re like, “These are the two things. We wanna make sure we get the header and footer, and then if someone has to go get help, where are they gonna go? We wanna make sure the contact form is right.”

So in that time, the 144 hours, we have taken them from the 26,000 issues down to, I looked yesterday, it’s 3,494, of which those 2,002 are unique. Meaning there’s 2,000 issues that exist on one page alone and aren’t replicated anywhere else on the site. So basically where we are with all those automated fixes, and we’ve also, like, fully redone the header and the footer and the contact page and a bunch of other, like, global elements that maybe aren’t in the header and footer, but are, you know, a shared block that’s inserted in a bunch of other locations on the website.

We have wrapped up most of those global issues, and now we’re in the land of one-off, primarily content related fixes, so things like incorrect heading order, images that are missing alternative text, PDFs and videos that need to be assessed. That’s really a big bulk of what’s left in those 2,000, several of which the client is actually going to be handling themselves.

For example checking their videos for captions, ’cause they don’t wanna pay a developer to do that. So and I think even alt texts, which I did notice they’re experimenting with some AI generation for alt text, so we’ll see how that comes back. But that’s sort of where we are. I think it would be interesting to talk about a, a few of these key components, though, and some of the challenges that we ran up against, particularly Steve, from your perspective.

And maybe we start with navigation because that’s always the first thing we like to fix on a website.

Steve Jones: Mm.

Trying to Fix Inaccessible Mega Menus

Amber: And their navigation menu, if I go back and I look at some of our things, I think you had to completely rebuild it because nothing about it worked at all.

Steve Jones: Yeah. So there’s a saying that you know, if it’s your job to eat a frog, do it first thing in the morning. If it’s your job to eat two frogs, eat the big one first, right?

So with remediations, I guess we follow that by eating the big frog first, which is the navigation menu. So of course, navigation menus really are, a lot of times, sometimes the most difficult part of a remediation. And they’re difficult for many reasons. One, making an accessible navigation menu is, is not the most straightforward process for a lot of people, and navigation menus are made in millions of different ways and, and millions of different methods, right?

Even though this is WordPress and the output is typically the same, but people modify these. They create walker functions that go through and walk through and add in extra markup and extra tags and attributes and things into the menus. And with page builders like this, like I don’t know, this…

I don’t know if the Oxygen one is completely custom-built. I think it is. It’s like a mega menu block. And I will iterate again that this is Classic Oxygen. I would probably… I’d love to, test out the the current, the modern Oxygen, navigation menu to see if it’s better.

So I can talk about this in two ways. I can, one, go through all the things that we fixed, which might be kinda long. I’ve got 15 points here. But and then the, the other way to look at it is from a remediation standpoint on how you approach remediating a navigation menu. And on this website, this was a difficult one, right?

So you’re being engaged to remediate, and we handle these remediations by hours, right? So the clock is running. So if an auditor has surfaced, you know, it needs separate controls for the drop-downs. So they can skip all the way through the top level without having to go through all of the submenus. If it doesn’t have the right you know, ARIA labels, doesn’t have the right expanded states, th- things like that. You can go through and you can start saying, “Okay, I can fix some of this with JavaScript,” right? I can write a little JavaScript snippet to kinda, to implement these small things, right?

Because this is a builder, I don’t have access to the source code. I do have access to the source code, but I can’t modify it, because once the plugin gets updated, my stuff gets overwritten, right?

So you start writing this JavaScript to kinda fix a few things, right? And you get into it, and then, you know, you send it back to the auditor to test it. And, they retest it and they’re like, “Okay, well, this is kinda working and, you know, we, we need this to do this.” And then you go, “Okay.” So you go and you rework your JavaScript snippet and it just keeps kinda growing and growing and growing.

And, you know, you’re kinda finding JavaScript that already exists for that menu as well. So, click events can bubble up and conflict with new ones that you’re trying to write, and yours can conflict with theirs. And clock is running the whole time. So you get to this point where it’s like, I’ve invested 10 hours into this navigation menu, and then you start to question, “Oh, was this really the right approach?”

Amber: I remember you saying in a, in a meeting, we were talking about it, and, like, the last little bit is actually the hardest sometimes. And you were like, “Man, looking back on this, it might have been better if I just totally removed it and made a custom menu.”

Steve Jones: Yeah, totally. And…

Amber: yeah.

Steve Jones: So, you to that point, so it’s kind of frustrating ’cause it’s like, well, how do I go forward to, to get at that last 10%? I throw away all those hours? You know, do we eat those hours, like on our end? Because the approach didn’t work, right?

You know, these are all questions that you ask. Is that is that considered part of the remediation process? I don’t know. So you have to make a decision, and my decision was to see it through, right? Was to like, no, let’s double down. Let’s, let’s run through this again. Let’s see if we can fix some of these you know, click handlers that are bubbling up and causing conflicts and get it right.

And, and that’s what we did in this case. I still question, know, would a better approach been to actually just remove the oxygen menu and build my own?

Amber: How would you do that? Like, create a short code that outputs in Oxygen so you could just put it where the nav menu is? Is that what you would’ve done?

Steve Jones: Yeah, that’s one approach. I’m sure you can probably put a menu widget into a block in…

Amber: Oh, like a WordPress menu widget.

Steve Jones: Now, where this gets weird is it’s a mega menu. So…

Amber: With columns, and all fancy styles, and images and all kinds of things that we hate to have in menus.

Steve Jones: Yeah, yeah. I don’t know if this one had images, but it was still a pretty sizable mega menu. So yeah, building it yourself has serious implications to think about too. So it’s, it’s definitely a real, like, can I get there with the JavaScript snippet and, and keep the Oxygen menu or should I really rebuild it?

But in this case, we saw it through. There were lots of things to consider. You know having separate link to control the navigations opening? Making sure they’re real buttons that open those as well. You know, adding the correct role, a button on there instead of it just being a link or a div. What else did we… ARIA labels for toggle menus and ARIA expanded. Ensure that dropdown panels actually have IDs so that we can target them.

Amber: Question, do you feel like the fact that you had to do all of this is a shortcoming of Oxygen’s menu? I mean, obviously, yes, it is. But there’s this weirdness of can plugin developers or page builder developers foresee… Especially with a mega menu, there’s a lot of different use cases.

Can they foresee all these use cases, and is it actually possible to be like, “This is going to be accessible when you insert it, and here’s the way it’s gonna work”? Or is there always going to be some case of, well, Oxygen couldn’t have done that, and the original developer of the website should have done that.

Or do you think it is on Oxygen? Such a question, sorry.

Steve Jones: This is not gonna sound nice, but I’m gonna say it. Are you asking me is, is this done by negligence or ignorance? Right?

Amber: It is interesting because obviously there’s blame on whoever built the website, which is not the developer who currently maintains it, so we’re not saying anything about that developer. They, like, the hospital hired someone just to build their website, and then they handed it over.

So I’m like, is it on them? Is it on Oxygen? Like, it’s so weird, right?

Steve Jones: I mean, if you take a step back, the onus is on the page builder. It really needs to consider… And I will caveat this, this was the Oxygen Classic. I have not tested the current Oxygen Builder’s navigation menu. But, having this many things to fix just shows that there was just a complete disregard for accessibility when it came to that mega menu. And now, I will caveat this too. There were Oxygen add-ons on this site, and the mega menu block may have come from an add-on.

But regardless, whoever made this menu really didn’t have a lot of consideration for accessibility. You’re building a page builder that’s gonna be put on millions of websites or hundreds of thousands of websites, like, getting this right is super important because actually fixing it sometimes is really difficult.

Like, you know, deprecating a feature in a page builder is almost a no-no, right?

Chris: Hmm.

Steve Jones: Because you’ll break everybody’s website on update.

Amber: Before we move on, I’ll say there was one thing that was interesting about… So we use our audit history add-on on everything we’re remediating, ’cause we like to see the graph and, like, show over time and be able to track. And it is interesting because every month you see when we weren’t working, it’s kind of flat.

And then when we worked, there’s a big drop-down, and then it’s flat, and there’s a big drop-down. But the month this, there was, like, a two-month period where this nav menu got worked on, and in that two-month period, there was not a big drop. There was a little drop, ’cause we did some other things, too. That’s how hard it was.

Steve Jones: Mm-hmm.

Amber: A 24-hour sprint where we were also doing some other things and having some calls with clients, there wasn’t enough time to fully fix the nav menu.

Steve Jones: Yeah, yeah. And like in regards to audit history showing your progress. A nav menu as a whole is like a whole bunch of accessibility issues all coupled into one component, and the accessibility checker doesn’t necessarily, know, say, “Hey, this is a nav menu. Check it for all these things.” Not yet, at least, right? There’s actually not a ton of issues to actually like check the box on when your…

Amber: Yeah, they’re not all automated. It definitely comes a lot from manual testing

Steve Jones: Yeah, totally. Big time.

Sliders, sliders, and oh, look! More sliders!

Chris: So the other big one, and I think whoever built this website and maybe the marketing team at this hospital, they were definitely fans of sliders. This website had sliders everywhere, sliders as far as the eye could see. I think the homepage had five different auto-playing carousels. So Amber, do you wanna talk sliders for a minute?

Amber: Yeah. I mean, classic. They all autoplay. None of them had a pause button. This, this I think was not necessarily on Oxygen maybe as it might have been on whoever set them up, which is that a lot of the buttons that use icons weren’t labeled. So, like, the pagination buttons are just, like, a circle SVG, and the previous and next are just, like, a right-pointing angle is how it reads or something like that.

Although this might have been on Oxygen, I also think none of those were actual buttons. They were all just divs. I think another thing that came up, and Steve, maybe you can talk about this and, and where this came, but some of the sliders were pulling content from custom post types, like locations for example.

And they all had Learn More buttons on them that didn’t reference which location.

Steve Jones: Mm-hmm.

Amber: Like, a news carousel, the same thing. It had a read more for the news posts, and you can see three news posts at a time in the carousel, but you can’t tell which read more is for which one. So I think those are kind of the high levels.

Also, just general ARIA semantics on the carousel.

Steve Jones: Yes.

Amber: Have regions. Pretty much anything that could be wrong with a carousel I think was wrong with these carousels.

Steve Jones: What I find interesting in remediating is going through that process back and forth to kinda come to like… So I’ll question the auditor, or I’ll question the tester so that we can actually come to, like, a real solution. So, if there’s a ticket that my team gets, and it’s like you know, fix the autoplay on this and that, the slider, right? My question might be, “Does it need autoplay?”

Amber: But that, that is one where… So we have this line where if it’s invisible, we usually don’t ask the client. But if they could argue that it impacts the design or the user experience in a visible way, then we always ask the client. So yeah, you came back and you had looked at some of Maria’s auditing, and you’re like, “Well, can we just turn off the autoplay?”

Steve Jones: Mm-hmm.

Amber: Then I went to the client, and I had to have a conversation about that, and I think the other question was, like on the homepage, do we need five carousels?

Steve Jones: Yeah.

Amber: Can some of them just not be carousels? And so I had to have a whole conversation with her about that as well.

Chris: Did you ever think you would be asking someone, “Do we need five carousels on one page?” Was that on your bingo card for this year?

Amber: No, I think this might be the most I’ve ever seen on any website on a single page.

Steve Jones: Yeah, yeah, totally. And, and you don’t always win. So I think we won in regards that there were, like, two sliders we current converted to static content, then we didn’t win on the autoplay. They still won in the autoplay. So, and…

Amber: So you had to make pause buttons, and are you telling me that wasn’t easy to do in Oxygen, Steve?

Steve Jones: So it was a thing that had to be done , and it takes time, right? And where it gets interesting in the stack that this website has is that it’s not just one slider package, right? So it, it’s multiple sliders. It’s like Unslider and Flickity, right? So I have to write a pause button script for Unslider, and I have to write a pause button script for Flickity. So I have…

Amber: I wonder, I wonder if that comes from they have Oxygen and they have Oxy Extras.

Steve Jones: Yes, yeah.

Amber: And so this is a thing where every time you add a third-party add-on to your page builder, you might be like, “Oh, it can do this thing that my page builder can’t do,” but you add, like, extra debt and extra scripts. ‘Cause I, I could almost guarantee Oxygen wouldn’t have enqueued two different sliders, right?

Steve Jones: Yeah, totally.

Amber: I’m sure that’s hurting page performance.

Steve Jones: Oh, yeah. Absolutely, it’s like you’re literally loading more, file size in JavaScript onto the page. You so it definitely hurts performance. And sliders are, you know, they’re actively running, changing states and stuff like that. So, like, when you write scripts for that, you have to… You can’t just write a script that runs something on page load, because basically by the time the page has loaded, their script has done something else. So, you have to write it you have to write a mutual observer to, like, actually almost just say, “Hey, has it changed? Do I need to add this again? Do I need to add this again? Do I need to add this again?” Just over and over again because the state of a dynamic like a slider, changes all the time.

So, it is a little tricky. We have noticed in a lot of page builders, they fail to add pause buttons to any kind of moving content like this, which is very frustrating. I think that we’ve done, maybe even had some posts or something about adding a pause button to Elementor sliders.

Amber: I think I’d have to go back and look at the page builder comparison, but I feel like of the carousels that we looked at across however many 18 plus builders, only like two or three actually had a pause button as a setting.

Steve Jones: Yeah.

Amber: I do not understand why.

Steve Jones: Yeah, it should be default. If anybody’s listening that builds sliders, put a freaking pause button on there. Also, give the user a way to give it a proper label. So when you have a website that has five sliders on them, like you don’t want the screen reader to say, “Region…” What’s it, interactive element or something? Is that what it says? ” Region interactive element, region interactive element.” What is that? I don’t know what it is. So…

Chris: mm-hmm.

Steve Jones: Give it a proper ARIA label so that it, tells you what it is. Homepage slider or…

Amber: Every carousel needs a unique name, and it has to be editable by the content edit creators so they can name it for what their content is, like news carousel, locations carousel.

Steve Jones: Yeah, but most page builders don’t surface that level of attribute to the user for the slider. And where, where it gets… Well, maybe at the wrapper level you can put it. And I’ll say this, Oxygen does allow you to put attributes on this, but you ha- kinda have to know, the attribute.

But what happens when you have, like, a blocked component? Is a lot of times there’s separate components within that blocked component, and you only get attribute controls at the main block level.

Amber: So I will say for some of the frustrations we had, I will give Oxygen that, that it is relatively easy for a non-technical person to add attributes. You have to know where to go.

Steve Jones: Mm-hmm.

Dealing with Ambiguous Links, Working Around Builder Limitations

Amber: They do have support for screen reader text, so I was able to, like, add, like, headings or add additional text and put it like a screen reader class on the block and it automatically hid it. You didn’t have to add custom CSS for that. So I think some of that was good. But I, I know, like, the ambiguous links…

Steve Jones: Yeah.

Amber: A lot of how, if they were the button links, how I fixed it was I went and I added the attribute for an ARIA label and that works well. But you ran into issues whenever it was, like, a dynamic link in, like, a post grid or something, right?

Steve Jones: Yeah, because say you have latest blog posts, right? And you’re using a dynamic block to show those, and so I just have a button, you know, a Learn More button there. And I actually want to pull the string from the button and the post title, so Learn More about post title.

So there’s a concatenation of the title and the string that I need to add. For some reason, in Oxygen, at least it’s Classic Oxygen, you can’t concatenate text alongside a dynamic attribute.

Amber: Either or…

Steve Jones: Yeah, it’s either/or, and it became very frustrating. So the way we…

Amber: I thought this was hilarious.

Steve Jones: We actually did this two ways, and at first I put in a code block and just copied the markup and kinda made my own code to, like, build a Learn More button.

Basically, I grabbed the title and, and put it in a variable, and, and the string and the classes, and then I output the markup at the…

Amber: With PHP.

Steve Jones: Which, with PHP. So I basically just…

Amber: Because you are a developer.

Steve Jones: I am a developer, very much.

Amber: Yes.

Steve Jones: So I just use the code block to achieve what I needed to achieve. Now, kudos to Oxygen for giving me a code block to put in there. There’s another way that we achieved it in other areas too. So our, our developer, William, actually, he created a code snippet, a PHP code snippet, kinda does essentially the same thing. And in that dynamic attribute field, you can actually call a function. But that function has to exist globally before the page loads, so when you put that script in, it has to load on every page, which for a little piece of Java- PHP, it’s not, not that bad. So that’s another way to achieve it.

But where, where that gets difficult is that you know, that worked for Learn More. Like, that necessarily doesn’t work when I need to change it. Or, like, there was a slider, like, learn about this person’s story, right? Or your traditional, like, Learn More doesn’t always make sense too.

Because the post title was a lot different than the heading of the section. So there was, like, a heading of the section, and then there was, like, a post title. So just pulling the post title didn’t give as much context. So where the snippet works is when you just need it to say learn more, but if you wanna change it to, to something else, you gotta make another snippet or do what, do what we did in other places where y- you use the code block. Those are extremely frustrating things for something, in my eyes should be super simple inside of a page builder.

Our Take on the Reality of Building Accessible Sites wih Oxygen Classic

Chris: I feel like there’s, there’s really three parties kind of swirling around all these accessibility problems we were trying to fix.

There’s the person that built the website, right? Built it originally, not the current one maintaining it, as we established.

There’s the baseline, you know, page builder.

Then there’s the extensions to that page builder, the third-party extensions.

Between those three things, was this just, like, a perfect storm of everything going wrong, and there were issues everywhere? Or do you feel like there were… Like, was there a particular area where you felt like you were fighting more? Like, were you fighting the third-party extensions more or the way that the Oxygen site was configured more and having to reconfigure it? Like, what do you think? What’s, like, the gut feeling?

Amber: Do you want to go first, Steve?

Steve Jones: So my overall feeling is that I don’t know if it’s a perfect storm per se, but I find this to be par for the course for a lot of websites. A lot of websites use page builders, and a lot of websites are built from a page builder low technical perspective, right? And if I’m assessing Oxygen itself, I think this classic Oxygen leaves a lot to be desired from an accessibility standpoint and from just a standpoint of allowing an accessibility remediator to have access to the things they need to have access to. I was real frustrated having to wait for the Oxygen loader every time I would try to open a template. It takes forever. And It doesn’t let two people edit a template at the same time. But…

Amber: Oh, not just a template, any page or anything built with Oxygen. That was my shock, because sometimes when we do this and we’re like, “You have hours,” it’s, like, multiple people on the same day.

Steve Jones: Yeah.

Amber: But we learned with Oxygen, or at least Oxygen Classic, that two people cannot edit two different pages at the same time.

Steve Jones: Well, and it’s not, it’s not just that two…

Amber: why?

Steve Jones: Yeah, yeah, why. It’s not just that two people are actually editing the template or the template part at the same time. There’s literally some kind of, like, boolean or some kind of, like, race condition or something to where it malfunctions itself.

So, like, if you open a template, and then there’s a template part, and you click on the template part, it, it opens the template part, and then it goes to the WordPress editor and says, “Somebody else is editing this. Do you want to open it anyway?” Well, nobody’s nobody’s editing it. You just think that the one that I came from was still open, and it’s not. So this, like I said, this may be something that they’ve resolved since, but unfortunately, this is kind of par for the course for page builders.

Some page builders give you a little more access to the things you need access to. What I haven’t seen from any page builder is that you get subcomponent-level controls. So, like, if you have a component, you get controls at the parent level. Like, you can add attributes, you can add labels.

Chris: Mm-hmm.

Steve Jones: Can add CSS classes and stuff, but if that component has subcomponents, like, say, another navigation inside of it, I don’t get that same level of control of the thing inside, which is very frustrating and very hard for a remediator. So…

Amber: Yeah, this is not about Oxygen, but I will say I just ran into that the other day on Elementor where I realized it’s like their latest post blocks and the thumbnail is on. When you have the thumbnail shown, it automatically puts on a link on it, and it doesn’t include the title of the post in the link, so if the user hasn’t put alt text on the image, it’s empty link.

But you can’t turn off the link. And I’m like, “Why is there not a setting to be like show the thumbnail but don’t link it?”

Steve Jones: Mm-hmm. Yeah, it creates restraints and it creates some kind of, you know, wanna be able to control all those things. Now, I will give Gutenberg a little bit of a hand for actually exposing all those things at the sub-levels, at least from a code standpoint.

Now, I’m a developer. I can get in there and I can modify the core blocks to make them do what I want them to do. For an end user for a page builder, don’t have that luxury to or, or I don’t know if it’s a luxury. They don’t, don’t necessarily have the abilities to go in and, you know, modify a core WordPress block. And, and I’m sure you could probably do this to a little bit of a degree in some of these page builders, but, like, we’re remediating Oxygen sites. We’re remediating Divi, Elementor. Is there any other I’m missing? Gutenberg, like, I can’t learn the filters of all of these, and then, and my team can’t always be expected to learn how to filter everybody’s blocks and components and stuff.

Amber: I do think there are definitely some major frustrations we had with Oxygen that maybe wouldn’t have existed if it was built with a different builder, but it’s not unremediatable.

Steve Jones: Yeah.

Amber: And we have made huge amounts of progress. And with what we have left like I’m not really worried.

And actually, after creating some documentation that says, “Here’s how you add attributes to those Learn More link buttons that have just been inserted in random places in all of the pages, and here’s how you fix the heading order or change it if it’s, you know, not supposed to be a heading and it’s just supposed to be a paragraph.”

You know, once I figured out how to do that in Oxygen, I was able to create documentation. Then our next sprint, I think we’re gonna have our content specialists do a lot of the work. So I think it’s possible to fix or create accessible websites with Classic Oxygen. I am curious to see what new breaking change, totally new version Oxygen is.

I’m assuming maybe it’s better.

Steve Jones: You know, you said breaking change, and we talked about this a little bit before the episode. We keep talking about this Classic Oxygen and this new, this new Oxygen where whatever it means by a breaking change is they released like a, I don’t know if it’s a 2.0 or a 5.0, who…

Amber: 6.0.

Steve Jones: Which is a breaking change, which means if they’ve fixed a lot of the things that we’re sitting here complaining about, like that’s great. But since making it a breaking change just locks all these old classic builders out.

Chris: It’s not as simple as running an update to get all that addressed.

Amber: Yeah, I mean, and theirs is such a breaking change that they actually have a separate website for oxygenbuilder.com is the current version. It’s weird because breaking changes sometimes could be good, we’ve talked about that before, especially if it’s an accessibility fix. But it is definitely rough. Like, this particular website is, I guess, only getting maintenance updates on their plugin, and it’s never going to really get better, I would assume, because why would Oxygen add new features to version 4?

But, and, and there’s no way to really migrate from one to the other. You’d probably just have to rebuild the whole website.

So, I don’t know. What do you think, Steve? High-level, would you call Oxygen good for accessibility? People always want to know that for us.

Steve Jones: I mean, brutally honest, no, not this classic builder. I would not choose this. Yeah.

Amber: Mm-hmm. Probably Oxygen doesn’t want you to choose the Classic Builder either.

Steve Jones: Yeah.

Amber: So if you are a developer who has a old lifetime license or, like, whatever legacy license for the old version of Oxygen, I would suggest you go buy the new version and try that instead. Don’t keep building websites with the classic.

Chris: Yeah. And if you’re someone working on modern Oxygen and you happen to know a lot about accessibility and are aware of some fixes or some enhancements that Oxygen has in their latest version, give us a comment or a shout-out and let us know what’s going on with the new version because we haven’t checked it out yet.

Amber: Well, thanks everybody. I think we’ll see you back here in another two weeks. Cheers.

Steve Jones: Cheers.

Thanks for listening to Accessibility Craft. If you found this episode valuable, please help us reach more people by subscribing, reviewing, or liking the show, and sharing this with your colleagues. Accessibility Craft is a production of Equalize Digital Inc. Steve Jones composed our theme music. To learn how Equalize Digital can support you on your accessibility journey, visit us at EqualizeDigital.com.