In this episode, we talk about the current state of page builder accessibility across seven different products, what they do well, what they don’t do well, and everything in between. We also unveil which page-building toolset is the most accessible out of the box.
Listen
Mentioned in This Episode
- Jaimaica’s Finest Hot Hot Hot Ginger Beer
- Avada
- Beaver Builder
- Bricks Builder
- Divi
- Elementor
- Kadence
- Page Builder by Site Origin
- 016: How Lists Make The Web More Accessible, Liquid Death Rest In Peach
- How to Make Your WordPress Site More Accessible With Skip Links
- How to Add a Pause Button to Elementor Sliders
- Elementor Slides Widget – Hide duplicate slides available to keyboard users in the Dom for better accessibility (GitHub)
- Elementor Search Widget Accessibility Enhancements
Get the Data
Fill out the following form and we’ll email you a link to view the spreadsheet with data comparing accessibility in page builders.
Transcript
Chris: Welcome to Episode 72 of 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.
In this episode, we talk about the current state of page builder accessibility across seven different products. What they do well, what they don’t do well, and everything in between. We also unveil which page building tool set is the most accessible out of the box. For show notes in a full transcript, go to accessibility craft.com/ 0 7 2, and now onto the show.
Amber: Hey everybody, it’s Amber and I’m here today with Chris.
Chris: Hello everyone.
Amber: And Steve.
Steve: Hey everybody.
Amber: And we are gonna be hot and spicy on this episode. Which is perfect for the middle of summer. It’s gonna be July when this episode comes out. But it’s mostly inspired by this awesome soda that Chris found. Do you want to tell us what we’re drinking today, Chris?
Chris: We are having, and I’m not going to attempt the accent but we are having Jamaica’s finest hot, hot, hot, triple hot ginger beer. Fun fact about me, back in my restaurant days, I spent a good number of years working with a staff that was almost entirely from Jamaica. So I gained an appreciation for the food and the beverages and they like it hot, including their ginger beer.
So I’m hoping I’ll have a little bit of fun at y’all’s expense today with what should be an extremely spicy ginger beer. I would be cautious with your first sip. This could be like wasabi levels of spice.
Amber: Don’t take a giant swing and spit it all over our Mac books.
Chris: And I’m, and I’m learning one thing already.
We may have to put a cut in. Um, this is not a twist off.
Amber: Yes, it is.
It says twist off on the cap.
Chris: Then
I’m
weak.
Steve: You got to be manly.
Chris: I need to use my shirt.
Amber: I have, I have a bottle opener in, oh yeah, there we go. I had to use my shirt. It does kind of hurt your hand.
Chris: I felt like it was going to cut my hand.
Amber: This one
is, it is a very sharp edge on there. So, is this actually from Jamaica? This pop?
Chris: This one should be, yes. I believe the bottling company, well, it’s bottled in Vermont, but I think this is a actual,
Amber: It’s made with
Chris: ginger root oil.
Amber: Natrona Bottling Company. Jamaica’s finest. com. Drink me, mix me, it’s caffeine free, so Steve will be sad.
Steve: Yeah, it’s, it’s worthless.
Amber: Yeah, I also used my shirt to open it.
Chris: That is pretty hot. It’s not the hottest I’ve had.
Steve: I used my man hands to open it.
Amber: You’re very tough
Steve: from all that.
From all the coding. Yeah.
Chris: Yes.
Amber: All
the typing. It smells nice. Mm-Hmm. . It smells like a good ginger. Kind of spicy.
Chris: Yeah. Honestly, I’m not getting that as much of an afterburn as I was expecting. I was hoping for more. ’cause I’ve had some that are like obscene levels of burning. But this one is not this is not one that I would call hot, hot, hot.
But it is good.
Steve: I got a text. I got a text this morning when I was in another meeting from my wife. And it’s a picture of this drink, and underneath she said, this is terrible.
Amber: Okay, so I took my first sip, and I swallowed it, and my mouth feels spicy. But I know that, like, I don’t eat a ton of spicy food. You, like, will put two whole raw jalapenos with the seeds on like one taco.
Chris: Yes.
Amber: So I get you saying it’s not spicy. I think it’s kind of spicy.
Steve: I mean, I kind of like hot, spicy stuff a little bit.
Chris: It’s a
long burn. It’s like back of the throat. She’s like,
Steve: it hits your not like your nasal passages real hard.
Amber: Now I’m going to
cough kind of does.
Yeah. Okay. Also it says How smart are you at beverages and or did you do your googling homework pinpoint carbonation? What does that mean?
Chris: Oh, I have no idea.
Steve: Amber, can you talk?
It’s, it’s, it’s hot. It’s like spi It’s, it’s, it’s like spicy. It’s not like hot, right? It’s like spicy.
Amber: Yeah. My eyes are watering, you guys. I feel like I’m gonna cry on this episode.
Chris: It’ll
build up over time the more sips you take. So you have that to look forward to. Steve’s probably switching to Diet Coke.
Steve: No, I mean like, Diet Coke.
Amber: You like it?
Chris: Do you like it?
Steve: I kind of like hot spicy stuff. So I mean like there’s not like much enjoyable about it other than it’s like just hot, you know, spicy, you know, like.
Amber: So what I’ll give it is, because you know, you guys, we always talk about when we have the pops that I don’t like the super sugary.
So this is definitely not super sugary. Like it’s a little sweet when you first sip it, but then the spice takes over.
Steve: I
think, I think we should have a challenge and see who can shotgun it.
Chris: Oh my God.
Amber: Okay. Yeah. Right here. I’ll count you guys. The two of you try to chug that I, I can tell you right now that I won’t be able to chug because I can’t even I don’t drink normal pop like that.
Steve: Yeah. I don’t either. Yeah.
Amber: There is no way.
Chris: Five minute break into recover. That would be a lot of ginger heat.
Steve: Yeah, if this was 20 years ago, I totally would do it, but like, I’m too old.
Chris: Um.
Amber: How do they make it spicy? It’s literally just ginger.
Chris: Ginger extract or ginger oil, so it’s like really concentrated.
Amber: Carbonated water, cane sugar, ginger root oil of ginger, and other essential oils, citric acid, and caramel color. So it is a nice like kind of golden color, and it’s got a red and yellow label with. Kind of a retro looking logo. I feel like
Chris: make a good dark and stormy with it with some Meyers rum
Steve: Yeah, that’s what I’m saying.
Like you could sneak Sneak some alcohol in here and you wouldn’t really know it like it
Amber: would cover it Well, that’s probably why it says it’s good for mixing it covers up the yeah, it says
Steve: it says drink me or mix me Yeah,
Amber: yeah, you could have a like a spicy Moscow mule.
Chris: Mm hmm.
Amber: If you’re one of those people that likes this
Chris: So speaking of spice, Amber, I think you have some spicy takes to share on a number of different page builders.
Um, I don’t know if we’ll name all the names here, but maybe you can start by telling us. What you did exactly.
Amber: Oh yeah.
Steve: So we’re going to name names for real.
Amber: Oh yeah.
We are, this is the hot and spicy episode. We are going to name names. So I gave a talk at the page builder summit in May and I am giving an extended version of that talk.
Look, I can’t even talk. All right. You can leave that in, Chris, because that’s how much of a weenie I am. Everyone will know that I am not a spicy food eater or drinker. But I am giving an extended version of this talk at WordPress Accessibility Meetup on Monday, July 17th. And basically what I did was I tested a bunch of different page builders for accessibility.
Now, I didn’t test all parts of those page builders. I created a list of components that I thought were commonly used on most professional or business cases. kind of websites. And I looked at things like navigation and the accessibility ready stuff. And then I compared them to figure out which was the best and which was the worst.
So, the page builders I tested were Avada, Beaver Builder, Bricks, Divi, Elementor, Kadence, and the SiteOrigin page builder, which I had never even heard of, but when I searched page builder on WordPress. org in the plugin repo, because I wanted to make sure I wasn’t missing something, I found that one. And it has 700, 000 installs.
So, I was like, okay, I should test this, because it’s, It’s on a lot of websites. The one that has someone brought to my attention that is missing is, uh, what’s it called? Visual Composer.
Steve: Yeah, but would we say it’s really missing?
Amber: Yes,
I don’t, I mean, by number of websites that use it, I suspect I probably ought to go test it.
So between when we record and when I present at some meetup, I might also have data on that one, but I don’t have data on that one right now. So, and I, and I, I chose Kadence as a block library because a lot of the components I wanted to test don’t exist in core. So I couldn’t really just compare to The block editor or WordPress itself, I had to choose a block library, which the takeaway from that might be, you cannot build a business or professional website with the block editor.
Steve: What?
Amber: With core.
Steve: What?
No way.
Amber: Because
they don’t have common components that you need. Core is missing it.
So
how many people do you think just got really mad? That’s my first hot and spicy take.
Steve: That is super hot and spicy. That’s fighting words right there.
Amber: I know. And we build everything with the block editor, but we always have to build all these custom blocks.
So, so I picked Kadence. Okay. To represent block libraries. Obviously there are a lot of them, but I was only going to do one.
Chris: So we’ve got seven columns on this spreadsheet and 116 rows of data, roughly. That’s impressive. That’s a lot of work. What were you going to say, Steve?
Steve: We’re going to go through each one individually, right?
Chris: Yeah.
Amber: I mean, I think we’re going to
Chris: So, 2B is No, I’m just kidding.
Amber: I think we’re going to highlight some of the hot and spicy takes, because I like that. I’m being a dork right now. I think if you want a lot of detail, because otherwise this podcast episode would be like, I don’t know, five hours long. I don’t know.
You should definitely come to meet up or we will put a link or like a form on the show notes for this episode where you can enter your email address and info and everything, and then we’ll email you a link to view this Google sheet. So you can have all the data for yourself, but we’re going to talk about some of the most interesting things or things that jumped out at us today.
Okay. So do, so the first question I have is. Do we want to shout out who did the best or do we want to lead people in suspense on that?
Chris: Oh, they have to be left in suspense. I think. Yeah, I think
Steve: you have to do it like a YouTube video. It’s like, if you stick around to the end of this episode, we will reveal the best.
Chris: Yeah, I think we need to definitely say who did best and worst. But before we even get into that, I was curious, Amber, if you wanted to speak more to like, how you decided what to test and like generally what lists of components and if you like what your method was if that’s relevant.
Amber: Yeah. Okay. So the components that I tested, I basically started by thinking about what are things that we commonly put on the websites that we design and build.
Or, there’s a caveat there, I also tested a carousel, and we, well, we do put carousels but not like the traditional slider sense. Yeah, on websites we build, but we do sometimes have like text carousels or testimonial carousels or something. But I tested that ’cause a lot of people do it. So basically I thought of what are things that you typically would see on a website that’s like a professional business or nonprofit website, not a blog, right?
Like a lot of people don’t have carousels on their blogs, but a lot of people who are building a website to market something, want a carousel. So I looked at accordions carousels. The icon list blocks, if they had it, I couldn’t find one, but all the other ones did. And that’s basically, where there’s for features, maybe there’d be like a check mark and then text.
And then another check mark and a text. And it’s like list with an icon and text next to it. Because I see that a lot of times on websites. I looked at either a loop or a post block that would be a way for you, for example, to show like three recent blog posts on your homepage, something like that. Uh, tabs.
Testimonials. Now, testimonials was a little bit of the wild west. It was the least consistent between all the builders, because some of them, it was just like, A testimonial in their testimonial block. Some of them had, like, they only had a testimonial carousel. They didn’t have the ability to just show one testimonial.
So, these were the least similar between all the builders. And those were kind of the widget block, whatever you want to call it, components that I tested. And then I also tested some things that were more, like, theme related. So, was there a skip link? Did the skip link actually work? The, I tested the navigation, I tested the header search, which is if there’s a little search icon in the header and then you click it, it opens a modal or something, because we see that a lot on business websites.
And then I made a list of all the things that are required to be accessibility ready by WordPress, if you want to have that tag on your theme, and I tested all of those things as well.
Steve: It’s extensive.
Chris: Mm hmm.
Amber: It took a lot of time. I should actually go back, because I probably could see this in our chat. Timekeeping software, how much time I put into this. You guys will be like, is that the best use of Amber’s time?
Steve: Yeah.
Amber: I think so. I don’t know. I, sometimes, it was actually fun.
Steve: Yeah.
Amber: Right? Like, it’s like one of those little projects where you’re just like, I actually really want to know the answer to this. Because I had some gut feelings about who might be better or worse.
Steve: Well, what was, what was your gut feelings? And did that pan out?
Amber: So my gut feeling on the worst one was that Divi was going to be the worst one.
And Divi was the worst one.
Steve: Okay,
Chris: good. Amber, you were supposed to wait till the end.
Amber: Alright, well I’m
not going to talk about who the best one was.
Chris: Okay.
Amber: Alright. I wasn’t sure on the, who would be the best one. I was a little surprised. Like I had thought that Bricks, which a lot of people have been talking about, which is a more developer focused page builder, I don’t even know page builder is the right term, but
Steve: Is that a
theme?
Amber: Uh, yeah, it’s all operates like a theme. There’s no plugin.
Steve: Okay.
Amber: But it allows you to build things out in a very like. HTML, CSS, like code friendly kind of view. I don’t see a typical user using it, but a lot of developers in the Facebook groups I’m in are really liking it. And so I, and it’s newer.
So I thought by default, it’s going to do a lot of things right because it doesn’t come with almost any styles built into it. Like you have to add all your own styles. So I was like, it’s just going to be like the components can be really clean. It’s only a couple of years old. So my assumption was. You know, it’s harder when you have a page builder that you built 10 years ago, or 8 years ago, or whatever, right?
Like, the spec might have changed.
Steve: Yeah. Backwards compatibility, deprecation.
Amber: Yeah. But Bricks did really poorly on a lot of stuff.
Steve: Mm.
Amber: You know, I don’t know. Like that frustrated me a little bit. Cause I was like, it’s brand new.
Steve: Well, so you’re saying that Bricks is handling, I haven’t used it. So forgive me.
It it’s handing a lot, handling a lot of the markup, right?
Amber: Yeah. And that’s really where it failed was in markup, like on accordions. They were literally non functional because it was all divs. They weren’t using semantic HTML. They were missing the ARIA that they would need to use. Yeah, like that,
Chris: that really seems
like it’s failing about half of the accessibility ready features in your list here too.
And that really is buttons.
Steve: Yeah. I mean, that’s the foundation of everything, right? It’s semantic HTML. If, if, if we don’t get that right, then, you know, it doesn’t really matter what kind of JavaScript and CSS we pile on top of it. Right.
Amber: Yeah. Well, and that’s the thing I’ll note, like you asked about how I was doing it, like my methodology.
Basically, it kind of depended where some of these we have access to from clients. So, I was able to download and just work on them local. We don’t have a license for Beaver Builder, but they happen to have a sandbox. So, I just tested it on there sandbox. And then there was one, like, Bricks was one that we didn’t have, but somebody in our community gave set up, like, a sandbox for me. InstaWP or something, so that I could go play around with it.
But basically what I did was I just made a single page, and I just stuck all these things in it with filler text. I didn’t style anything. So, I wasn’t paying any attention to is it easy to build something that looks nice, right? Because I was like, I don’t actually care. I wasn’t really worrying about color contrast because my assumption is color contrast is one of the easiest accessibility problems to fix.
What’s way harder is It’s this semantic HTML that is like the bottom that underlies it all.
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. A WordPress native tool, Accessibility Checker provides reports directly on the post edit screen. Reports are comprehensive enough for an accessibility professional or developer.
but easy enough for a content creator to understand. Accessibility Checker is an ideal tool to audit existing WordPress websites, find accessibility problems during new builds, or monitor accessibility and remind content creators of accessibility best practices on an ongoing basis. Scans run on your server.
So there are no per page fees or external API connections, GDPR and privacy compliant, real time accessibility scanning, scan unlimited posts and pages with accessibility checker free, upgrade to a paid version of accessibility checker to scan custom post types and password protected sites, view site wide open issue reports and more.
Download Accessibility Checker free today at equalizedigital dot com forward slash accessibility dash checker. Use coupon code accessibility craft to save 10 percent on any paid plan. So
Amber: can I talk about something that literally almost everyone failed that just really frustrates me? And that-
Steve: Was it. Autoplay?
Amber: Yes. . So carousels when you turn, so if you have something that Autoplays Web Content Accessibility Guidelines requires that anything that automatically plays, which could be a slider, carousel, it could be a video it could be sound, sound actually has an extra slightly different requirement.
But if it’s just a visual animation. Animated GIFs too, fall under this. There has to be a way for the user to pause or stop it. If it’s longer than five seconds, which is pretty much everything because I don’t know what’s the point of having something animated for five seconds. The only one of the builders that actually adds a pause button or even gives you the option to add one, like I get maybe they’re like, oh, not everybody might want a pause button, which is dumb because you know me, I just want to be like, everyone needs a pause button.
Steve: Yeah, yeah.
Amber: But, okay, but they didn’t even have a toggle to turn on a pause button. The only one that did was Beaver Builder, but I marked it as a concern because In my testing, I’d have it pause, and then it would like, keep unpausing.
So it didn’t
reliably work.
Steve: Yeah, did it have a hover focus?
Like, did it have a hover pause?
Amber: Oh, I, I think it did.
Yeah. You ran into
this on a website. We remediated recently. What was it?
Steve: So we ran into the same problem with one of our clients has an Elementor site and we were redoing the homepage. And Amber sent over a couple of things to, to fix accessibility on.
So, and one thing was the slider block needs to have a pause button. So, um, I wrote some JavaScript and I think I have a gist of it in GitHub. We can provide that in the show notes, but created like a JavaScript patch to implement a a pause button. And, but I think we ran into the same thing in testing.
I think you test it and you’re like, wait, hold on. It’s. I hit play, but it’s still pause. I was like there’s a hover pause. So we went into the block and disabled the hover pause. Mm. To, to give it more of a, you know, a, a actual feel that the pause button’s working. Right. It was working, it was just that you had to mouse off of the slider for it to start playing again.
Amber: Yeah. I think, or I think it also was doing a reverse too, where it would pause it, but then if you moused over it and then moused off it. That would trigger it to play. Like it would make it start playing, even though it still said pause on the pause button. So I bet you’re right. This is probably just those two settings in Beaver Builder can’t both be turned on, but they don’t have any notice or warning about that.
Steve: Yeah. I don’t know. From an accessibility standpoint, I haven’t really thought about that too much, about hover pausings things. I’m assuming that doesn’t work on a focus, right? And the question is, should it work on a focus? I don’t know. It’s like,
Amber: Yeah, I definitely know.
So I put carousels on the page. And I would, like, tab to them. Some of them would do the thing where when you tab to a slide, it would, like, move the slide. A lot of them failed. Like, I’d be able to tab to things I couldn’t see. The screen reader would read out things I couldn’t see. I didn’t see any of them, actually, like, if I was focused on a slide.
It wouldn’t stop it. Like I would be focused on it, like listening to it, the screen reader, and then it would move away and it would still be reading the slide that was now hidden. I mean, you know, the thing that’s interesting about this, it, it really bothers me and I’m like, this is a major failure and I want page builders to fix this, like all of them.
If you work for a page builder right now, add an option or just by default, add a pause button when someone autoplays, but for a website owner, it’s not actually that big of a deal because. There is one really easy way to fix this problem, and that is, can anyone guess?
Steve: Don’t do it. Don’t use a slider.
Amber: Well, no, you could still use a slider.
I mean, there’s other issues with the sliders beyond this,
Steve: but you
Amber: could not toggle on the autoplay.
Steve: Well, right.
Amber: Right.
Steve: Yeah.
Amber: Allow users to advance the slides. at the speed that makes sense for them.
Steve: Yeah. I mean, I think, I think I get why people toggle that on. Right. Cause they’ve gone through the effort to make five slides of content and they think that that those five slides are valuable.
But I mean, really, if you were to, uh, most sites, I’ve seen some stuff in the past, like analytics on like, The number of slides that people actually initiate, and it is abysmal. I mean, beyond your first slide.
Amber: Yeah. First one or two. Yeah. Nobody really even sees them.
Steve: Right. And it’s like in two, if you’re trying to present, if you’re trying to present information in a slider and you have an auto sliding, there’s a potential that they may not see it.
See certain information that you would you would want them to see first, right? Like is it I don’t know. This is a weird way to say it But is it is it a list slider or is it an ordered list slider, right? Like does the first slide matter? Like does the order matter of the slides?
Amber: Yeah,
especially if it’s not the top element on the page By the time they scroll, it may be on slide three, not on slide one, even though you were like, slide one is my most important stuff.
Steve: Yeah.
Amber: Right. Oh yeah. That’s a good point. Yeah, we try really hard. I know we have almost never do we do any sort of autoplaying carousels. We do sometimes use carousels for text, and we have those on our website, too, to condense text information in a different sort of visual way.
But, yeah, the autoplaying. So that was a thing that I didn’t love.
Chris: So maybe flip side of that coin, what’s something in here we can find where almost everyone got it, right? I can see a couple. This is why I appreciate the color coding that you did, Amber, in this, in this sheet.
Amber: Oh, man. I love Google sheets.
What I did, can we take a, can we take like a, a side path down that for just a minute, because this is like super nerdy and maybe, if anyone wants to go get the link to the spreadsheet. From the form in the show notes, they can see this, but yeah, I basically have conditional logic or conditional formatting.
In the sheet. So if it contains the word fail, then it gives it red background. And if it contains the word pass, it gives it green background, but also down at the bottom, real quick, there’s a snippet where it counts. So you can see for each builder, the count of total pass, total concern, total fail, and then also a sum of concern plus fail.
So it gives you a real quick snapshot of.
Steve: Yeah. Yeah. It’s cool. It’s
Amber: doing well and not.
Steve: So, Divi’s the only one that doesn’t have a skip link.
Chris: Yep. I was gonna say, I was about to say kudos to everyone for figuring out skip links. Oh, wait. I
Amber: know. I like, that was the thing that I was like, what is something really easy that I expect everyone will pass?
Yeah. Skip links. But Divi doesn’t have skip links. Now there, so the other thing I will note about this is I just tested the core thing. I didn’t test any of the add ons. I know there’s all these.
Steve: Does Divi have a starter?
Amber: So it was a Divi theme.
Steve: Oh, okay. Okay.
Amber: Yeah. And the Divi plugin.
Actually, or Divi might just, it might be one of the ones that’s just a theme. I don’t remember, even though it wasn’t that long ago that I tested this,
Steve: I
Amber: tested a lot of page builders, but what I didn’t do was any for example, there’s ultimate add ons for Elementor or whatever, or like Bricks, a couple of people in the Bricks.
community were like, yeah, we know that those Bricks components are really sucky, but there’s this third party add on for Bricks that is better. So, I didn’t test any of those because I was like, well, I only have so much time and it takes a while to build a page and then test it, right? Yeah. But also I’m kind of like, I don’t want to have to tell people, oh, you can use Bricks, but instead of using the Bricks accordion, you have to use the third party accordion from XYZ developer.
No, you should, Bricks should fix their accordion.
Steve: Ooh, ooh, that’s spicy. I’m going to take a drink to that.
Amber: Yeah.
Steve: It’s a drinking game. Every time we say something spicy, we got to take it.
Amber: But I mean, really, if we’re thinking about website owners, a lot of times, and feel free to correct me if you think I’m being wrong, but a lot of times the people who choose to have websites with page builders.
are people with lower budgets.
Steve: Right.
Amber: And so therefore, wouldn’t it be ideal if they had to purchase the fewest amount of plugins or whatever add ons to achieve their website goal? And that’s why I don’t, one of the main reasons why I don’t like the whole, you have to have this and you gotta have that because it’s broken in this.
So now you need to also buy this thing. Like, why don’t we just make the base thing work really well?
Steve: Well, doesn’t Elementor have an add on, an accessibility add on? Instead of, right? Like, it’s a separate plugin, right?
Amber: Well, uh, so Elementor has the One Click Accessibility plugin which they purchased and maintain.
It’s a toolbar. It’s not like a overlay. Like, it doesn’t modify. I mean, it, it, it modifies a little bit of CSS, right? Like, so it has a contrast toggle. It has a font size toggle. So if you want to put that on your website and allow people to toggle the color contrast to like high contrast mode or dark mode or something, you can’t, I don’t know if I said dark mode, but I don’t actually know if it does dark mode.
So scratch that. It might, it might not.
Steve: We didn’t test that.
Amber: Yeah. Did not test it. So I don’t know. But it doesn’t, it’s not like. An AccessiBe or something that tries to fix broken or unsemantic HTML. So they don’t, they’re not doing that. I didn’t test any of that stuff because I’m like, I also just want the base stuff to work well.
So one of the reasons why we never design our client websites with a high contrast button on them. Because I’m just like, why don’t we just design it with the appropriate color contrast to begin with?
Steve: There you go.
Chris: And speaking of doing things the right way to begin with, Steve, I actually have a question for you.
Cause I’m looking at this, sheet with I’m going back to spit to the skip links and I’m looking at how Divi doesn’t have them. And I’m like, This is this thing that really a subset of users just have to hit tab and it shows up. It doesn’t seem like it would be a breaking change to roll this out in any scenario.
So I’m wondering as a developer, if you can weigh in on that and if you can think of any scenarios as to why, other than. Just obstinate refusal to do the right thing or laziness that they wouldn’t have implemented something so simple.
Steve: Well, I mean as a you know as a product owner and then a developer and probably wouldn’t call them lazy. Even though that is good.
I like it. It’s spicy, but
The I Don’t if it’s if it’s a feature that doesn’t exist, It’s not a breaking change to add it. Like I don’t see any now. I haven’t tested I haven’t tested these page builders. Amber has. I’m this does not sound like a pleasant experience from my end being a developer I try to stay away from page builders as much as possible, but I’m sure there’s like I’m sure most of these allow you to toggle it on or toggle it, not toggle it on, depending on if it’s already in your theme.
That, that’s the biggest thing. Do these detect if it’s already in your theme or your child theme, right? Whatever they’re using. So
Amber: all of these, though, that where there are plug in, I tested them with their recommended theme. I tested Elementor with the Hello Elementor theme.
Steve: Yeah say you have 2024 theme installed, already has a skip link and you put that on.
Does it detect it? And you turn it off things like that.
Amber: I don’t think the page builders that are like Elementor, I don’t think their skip link comes out of their plugin.
Steve: It
doesn’t come out of the plugin, it comes out of their theme.
Amber: It comes
out of the theme. So I don’t think there’d ever be a case where there’d be multiple.
On the Divi thing I don’t know. Who, I would love to be a fly on the wall sometimes, right? In other companies conversations. Who really knows? But the thing I will say, Is there is a plugin called Divi Accessibility which you can access off GitHub. Now it hasn’t been updated since like 2021. It used to be on WordPress.
org. When we were at WordCamp US in San Diego a couple years ago, Alex Stine, who used to work for Elegant Themes, I’m pretty sure, um, he was talking to them a little bit about this and why they haven’t fixed it and they were like, Oh, we’re going to do something about it. But, but here’s the thing. That Divi accessibility plugin was originally released in 2017.
So what are we talking about? Eight years ago? Eight years ago. Yeah, yeah. Uh, and how hard is it if you actually care to be like, oh, here’s this plugin that’s getting a bunch of installs that fixes problems. One of which I know this plugin does is skip links, focus order. And to be like, we should just roll this in.
Like, that’s what we’ve seen Gravity Forms do because there was the WCAG 2. 0 fields for Gravity Forms plugin. And that plugin is not needed at all anymore because Gravity Forms looked at it and they, like, rolled all their stuff in so you don’t need to have this other free plugin. And it’s not like you’re taking money away from the developer because it was a free plugin.
Yeah. Right? Like, so, to me, I’m just, like, they’ve had eight years to fix this. They don’t care. They don’t care. I don’t know how else to read that. And I’m sorry, people from Divi, if you think I’m wrong, you should tweet me. I’m not even kidding. I want to hear it. That you care and I want to, I want you to show me proof.
Because this is proof that you don’t care.
Steve: That’s super spicy.
Amber: And I’m being spicy.
We’re having fun with this episode.
Steve: Yeah,
I
mean, I think you’re right too. And I think that they have a, I think a lot of businesses, and we’ve had episodes about this, have a hard time attaching monetary value to accessibility. And you know, these separate plugins are a symptom of a bigger problem.
They shouldn’t be separate plugins. It should be baked in to the core of your product. And because like Amber said, these people are, a lot of these are like solopreneurs, small agencies freelancers that are using these page builders, you know, technical, but not super technical people, right.
And my assumption would be a lot of people when they are deciding one of these page builders is that they’re kind of, accessibility is an expected feature of your plugin. Not necessarily somebody would pay extra money for or think that there’s a separate plugin and they have to install it, but that it would be expected that, a company of the caliber of some of these companies would be thinking about these things.
But the reality of it is that. In some regards they are and in a lot of regards they’re not, you know, it’s, and, and it takes, you know, I mean, Amber has definitely put a light on some of the shortcomings of these plugins, which if you work for one of these companies, get this spreadsheet, share it around, be an advocate to fix some of these things.
Amber: Yeah. I’ve literally provided you a list of issues you can add to your repo right now.
Steve: I mean, that’s, she’s done a free audit of. Of your software.
Amber: A lot of your
stuff.
Steve: And it’s super valuable. But yeah, I mean, accessibility is hard, right? Like it’s it especially when you have a legacy code base, it’s super old and you have to deprecate.
And like, when you get, when you think about a page builder, right? Like that Bricks one kind of concerns me a little bit with the so much wrong with semantics is that’s going to be the hardest thing for you to mitigate in, in your plugin, because it’s going to, it’s going to present the most breaking changes to your software.
So I don’t know, I don’t know what the penetration is. No, because not because of the software itself, because what that developer can do outside of your software. So I can target. HTML elements based on the element. Right. I don’t have to have a
Amber: For styles or something. Yeah. Right. I don’t
Steve: for styles, for JavaScript.
Right. And if it’s a developer focused plugin, like you said, like it sounds like it helps you make the markup and the markups incorrect. Like Yeah. And you are doing the, a lot of the lifting when it comes to styles and, and, and, uh, JavaScript. You could, you could be targeting. Elements directly without class selectors and stuff like that.
So if you, I don’t even know if they can modify them, right? Like red, you know, retroactive,
Amber: I think this is where you end up. And I do have notes on these for some of them where I’ve got like. It’s supposed to be a button and I gave it a pass, some of the ones on sliders, and I put a note remediated with role equals button, right?
So what you end up with is, it’s not that you can’t fix it or you can’t make it accessible because that’s why ARIA exists, pretty much, is to like, save the web from the divs. But, but like, You just end up with code that is a lot noisier and messier than it would have to be, right? Like instead of just having a button tag with an ID and a class on it, you now have a div with an ID and a class and like.
ARIA. It’s calling it a button. And then you’ve got to write a bunch of JavaScript to make it function like a button. And you’ve got to add a tab into it. So, you can remediate it. But you’re signing yourself up for a lot more work to do that. And anyone else who comes in your codebase has to figure out how Why is there all of these extra JavaScript?
Like, what is this for? And like all this stuff, which probably makes it harder to hire developers, I would imagine.
Steve: Yeah. I mean, the ARIA spec, the ARIA spec is great and we use it when we need to, but I mean, like a little, a rule of thumb is no ARIA is the best ARIA, right? Like, and if there’s a, if there’s a semantic equivalent, it’s best to use that out of the box.
But if you’ve already implemented it sometimes, I mean, we’ve done it, like role button You know, we can’t modify that, you know, we can’t, or like, does some of these, now some of these page builders allow, would allow you to add an attribute like that, right? Like in the builder.
Amber: Yeah, so
I did have a few, so like on carousels, one of the things I looked at is ideally we want it to have the main carousel should have a role of a region.
So role equals region on the container and then an aria label that like indicates it’s a carousel because that provides really helpful information to a screen reader user that they’re about to enter a carousel because otherwise they can get caught in a weird loop if you have a lot of slides. Yeah. The only one who actually just did that out of the box was Kadence.
So, shout out to them. But I put this as a concern, because it’s not out of the box, but it’s not a total fail, because both Elementor and Bricks, it’s really easy in those builders to add custom HTML attributes. So, someone who knows what they’re doing, a developer that’s using those, could very easily add.
The region role and the ARIA label just right there without having to write any code. So shout out, to builders like Brix and Elementor who make that possible. But I don’t give that a total pass because they should do it out of the box and number one, and number two is like most average users, like of Elementor are not going to know to do that, or even know how to do that.
It’s buried under advanced settings that you can even add the HTML attributes. It’s like something a technical person would do, not a. random person building a website for a beauty parlor. Like, you know.
So you want to know another hot and spicy take I have on this?
Steve: Yeah.
Amber: If you name your block, list, it should output code
Steve: to the list.
Amber: In a list?
Steve: Oh my
gosh, that’s spicy.
Amber: Yes. I’m just like, it just sounds like one of those things that is obvious. Like if you literally called this. This is the list block or the list widget.
Steve: It’s a, it’s a, it’s a div list, the div list.
Amber: I’m sorry. What? No! So. Beaver Builder and Site Origin Page Builder. Why?
Steve: I mean.
Amber: Why? It’s literally called the list block.
Steve: If I was to give them the, and like, I mean, that is a complete misunderstanding of the semantics of a list, right? Like, there’s a reason why a list has its own semantic element.
Amber: And we should link
in the show notes, we did a whole episode about lists. And they really help for accessibility.
Steve: Totally. Now, let me play devil’s advocate here a little bit. Of why I think they may not be using a list element. Okay. It’s probably because they’re trying to mitigate conflict, uh, style, style inheritance, right?
Amber: Cause they’re worried that it’ll put a bullet point or something like that. Yeah,
Steve: put a bullet point or to inherit the, the margin that you have set on the left.
Yeah.
The margin that you, yeah, you have set globally for your list or fonts, it could be anything, font size, whatever.
Right. Yeah. There might be a little bit of a A reset that you have to do if you use a real list, like a reset of your own to ensure that your styles are what’s applied and nothing globally conflicts. But my guess is that’s why I can’t imagine. I’ve been writing code for websites since the late nineties.
I can’t imagine why. I mean, this was before, before I don’t even think there were divs when I started, right? Like
Amber: tables.
Steve: Yeah, it was like all tables. Everything was put in a table.
Amber: Okay, if you coded
that way, you would be fired.
Steve: Yeah.
Well, frames.
Amber: I did not find a builder that did that, so we can give them all kudos on not using tables for layout.
Steve: Yeah. Yeah, I mean, yeah, table for layout. That’s fun. But yeah, I don’t know. Maybe that’s why they’re doing it. But it’s just, it does seem, I do seem to see a lot of just like massive divs for everything. Div all the things.
Amber: Mm hmm.
Yeah. So the other thing that I think was kind of good, I know it’s like a mixed bag.
There’s some fails in a few spots, but I would say outside of Divi, I’m not even feeling bad anymore about that. They almost all had pretty decent menus. There were some things like You could access the drop downs. There was some difficulty in Beaver Builder on mobile or zoomed in, like a low vision user with accessing the drop downs, but on like regular desktop, it worked and all of them.
So I’ll give them, I’ll give like most of them, like they’re getting close and that’s the thing I’ll say about this sheet just in general. In my testing is like a lot of these, I did ideal scenario, right? So ideal scenario in a nav menu, and this is what we have seen when we’ve literally had phone calls with the people that are from the U.
S. government, because it’s mandated remediation and they want to see that there’s a separate button to open and close the dropdown. But technically WCAG spec is just, it has to be accessible. Now, it’s not great if you have to tab through all the things to get to the next item in the menu. But so I did, full ideal scenario, which included that.
It’s best case, it doesn’t necessarily mean it’s unusable without it. So I will say some of these, I put those notes But I would say a lot of them are getting there where their navigation works.
Steve: Yeah. Except for Divi. Like you said.
Amber: Except for Divi.
Steve: Divi’s in the ring.
Amber: Everybody used a nav tag, except for Divi.
Steve: Except
for
Divi.
Chris: Yeah.
I
Page Builder by SiteOrigin seemed to struggle with nav more than the others, but it still had the basics. I see it had focus. It, you could use the dropdowns.
Amber: Yeah,
but it
wasn’t labeling the nav tag, users can’t define the ARIA label.
Steve: But the big, the biggie one is not being able to access the sub menus, the flyout menus with a keyboard.
Yeah. That’s like completely breaking. Yes. And there’s
Amber: no way that a user can work around that when they visit your website if they cannot literally go page to page in your navigation menu. There’s no way.
Steve: Yeah.
Amber: They’re gonna leave. Yeah.
Steve: Even with an alternative, I think, even with an alternative submenu somewhere else on the page, I still think they’re going to get frustrated and leave.
Amber: Yeah and let’s talk about some people are like, oh, well, if the nav doesn’t work, they’ll just search for the page, but boy, those header searches aren’t super great.
Chris: Yeah. I was gonna say, I think that one, other than the court, then carousels had the most failures in it, right? Yeah. The header search.
Amber: Yeah.
Chris: Almost
nobody got it right.
Amber: A lot of, yeah. And then there were a lot of that ended up to be like N/As, like not applicable. Like I have a separate items because different things that I wanted to check. So for example, is there a submit button to submit the search form? Because you shouldn’t just rely on users knowing to hit the enter or the return key, like a lot of users will type in a field and then hit tab expecting there to be a submit button for a form, which is what a search form is, right?
So. That failed. So then a bunch of them ended up with a not applicable on it’s actually labeled because the button wasn’t there. So, of course, there’s not gonna be a label. So there’s some stuff, or like they didn’t have buttons to close the overlay when the overlay popped up.
Steve: Yeah, and Elementor did.
Okay, in some respects, but this was another one on that same remediation that we did for a client. We redid the homepage that I was talking about earlier. That was another piece in Elementor that we created kind of a JavaScript patch to fix some of those things. I think it opened up, actually, their search opens a modal, right?
So there was, there was some accessibility regard and, you know, locking focus and making, making the close button. A button. I’ll take a drink. I’ll take a drink. Yeah. Yes. It’s a little spicy, but Kadence looks like they did fairly well in that regard.
Amber: Yeah, the only thing that they got a fail for on the whole header search was that the search form label is visible in the field when data is typed in it.
So they have, what they have is a label that’s screen reader only. So it is labeled for screen reader users. And then they have placeholder text for sighted people. But, and this is something that a lot of even developers that are building don’t realize, is, You need to have a visible label. It’s not okay to just have a label for blind people.
Steve: Yeah.
Amber: Because there are some instances where someone’s autocomplete might fill in a field. accidentally, and they don’t realize it, and then they don’t, if the placeholder text is gone, how do I know that it, what it filled in, or what was supposed to be in this field, right? Now I have to delete all the information to figure out what I was supposed to put in here.
Or just people with cognitive disabilities, or memory issues, like those sorts of things, you need to have a visible label. So screen reader texting only your label, not okay. If you really, if you really, really want to like, Have it look like a placeholder. You can do that floating label thing.
Steve: Yeah, we’ve done that. Yeah.
Amber: Yeah, we’ve done it because designers really wanted it. Client really wanted it. Okay, fine. I don’t, I don’t love it. Like it should just be a visible label, but it is sufficient and it stays visible and it passes WCAG. So that is the one thing Kadence needs to do and then theirs will be perfect.
Steve: Perfect.
Kind of like that, that, you know, like for many years, it was this let’s make these clean looking forms, no labels, right? Like you want to know. No form
Amber: borders, no field borders, just like an underline or something. Yeah.
Steve: And now I’m like, now, it’s like accessibility to some degree can be freeing in that respect to where it’s like you, your designer just can’t go nuts and do whatever.
Right. Just because it looks good. It’s it has to have a form label. Like, I kind of liked that. I was like, okay. It’s going to have a form label, you know, I don’t have to do any weird stuff and it’s like Gravity Forms does a great job at that. And it was like Gravity Forms early on was the first, like they removed the option because you used to be able to hide the label, right?
And they removed that option. And then there was like this filter where you could, like, I remember-
Amber: Turn it back on.
Steve: Guilty, guilty as charged. But I remember like I installed that filter, because the design had no field labels, you know, it’s like you put that filter on to get rid of them.
And that, and now it’s like, no we need these, like a form is supposed to look like a form.
Amber: Saying it’s freeing, you know, it has, I have so much enjoyed. I just tell our clients straight up during discovery. We don’t do animation on websites. It’s.
Steve: Yeah. Yo.
Amber: There’s no
fade ups. There’s no,
Like every once in a while we get a little bit of pushback and be like, all right, we’ll choose one element.
We’ll put a little animation on that. But for the most part, they don’t push back. And we just explained why. And we’re, and, and honestly, it saves so much time.
Steve: I know.
Amber: Like in having to like code it, make sure it respects, prefers, reduce motion. And even if, like, if you’re a builder, you’re someone who builds with page builders, which is totally legitimate.
There are a lot of developers who build beautiful websites with page builders. But even this, if you’re not doing a custom, you know it takes extra time to go into like literally every section on every page and click that little checkbox, make it fade up. You would save so much time if you just told your clients, I don’t animate elements on websites.
And then when they push back, you send them some links of some really giant companies, like Microsoft. com or whatever in their industry and be like, Look, no animation on their homepage.
Steve: Yeah. Yeah.
Amber: Would you like to be as big as Microsoft?
Steve: Yeah.
Amber: Would you like to
look as big as Microsoft?
Steve: Just don’t send them to apple.
com.
Amber: Well, what I will say about Apple is like Some of their landing pages have animation, but not all of them.
Steve: Yeah, they’re getting better.
Chris: Yeah.
Amber: Yeah.
Chris: And also, if you have the reduced motion setting on in your browser, it’s totally a totally different experience.
Amber: Yeah. All
right. So that was something I tested on these carousels.
I didn’t test the if there’s animation toggled on, would that respect motion? Because I’m like, no one should use this setting. It shouldn’t even exist. So I wasn’t testing it. But I did on the carousels test. Prefers reduced motion to see would they turn off and let’s see, where is it? The only one who passed that was Kadence.
Everyone else totally ignored the prefers reduced motion and the sliders were still sliding.
Steve: Kadence seems to
do a pretty good job.
Amber: Yeah. Are
we about at the episode where we give shout outs to our top two that did the best?
Chris: I think so. And I think it’s probably obvious by now who got the first one.
Amber: Number one. Yeah. So number one goes to Kadence. Kadence Got the most right in my testing. They’re not perfect. There are some things that they can improve on, but they definitely got the most right, which is awesome and shout out to Ben and the team over there that are putting effort into accessibility.
Chris: And I think it would be good to give some numbers. So I think out of everything you checked they had 60 total passes and they had 19 combined concern or fails.
Amber: Yeah, let’s split that out though. There were four things. I was a little concerned about and 15 fails.
Chris: Yeah
Amber: for Kadence. So who wants to shout out a number two
Steve: number two.
So number two was Elementor yes our friends
Amber: So you asked
me? Like I do know because we’ve been talking to them a lot that they’re putting a lot of effort into Elementor and they’ve been doing A lot more but I’ll honestly say I was a little surprised Not because of that, it’s just Elementor gets a lot of flack from the community.
Steve: Yeah.
Amber: But this is a literal honest test where I compared the exact same things for all these things. And they did really well.
Chris: I think it’s like the top dog thing. Cause I think they’re the clear market leader. So that’s probably why they get the most flack. Because they’re front of mind, but yeah, they had they had 53 pass six concern and 18 fail.
Amber: Not too far behind Kadence.
Chris: Yeah, really not, really not. Um, and I think what’s also interesting about this, right. Is forgive me if I’m wrong about this, but isn’t Kadence is block based, right? So it’s like a theme and a block set.
Amber: Yeah. I tested it with both the theme and their block plugin.
Chris: Okay. So that’s like more, that’s closer to core WordPress at least.
So,
Amber: yeah, but the blocks are all custom and the theme is all custom, so it’s not,
Chris: Oh, okay. All right. Yeah,
Amber: as I said at the top of the episode, I cannot compare because the vast majority of these blocks don’t exist in core WordPress. And I don’t actually think you could build a business website just with core web WordPress.
Steve: Ooh, that we’re going to quote that on. We’re going to put that out on spicy. I’ll take a drink. Spicy.
Amber: WordPress is not ready for business websites.
Steve: Oh, jeez. Ow. You can’t say that stuff. That’s controversial.
Amber: Maybe that’s how we get the listeners.
Steve: Yeah.
Chris: Maybe so. No, I mean, there’s a reason that WordPress has just an absolutely massive, you know, ecosystem, right?
And that’s, that’s maybe its strength.
Amber: All of the, yeah, all of the plugins and the themes and the companies that produce things that extend core WordPress, for sure. That, like, that is why it works as well as it does and attracts so many people to build their websites with it because there’s a lot of options.
And you can, you know, be like, hey, I have Divi and it sucks at accessibility. Look at all these other options I could choose from.
Chris: Yeah.
Amber: Actually, our project manager,
Chris: we, we tested literally six other options and they’re all better than Divi.
Amber: She actually tweeted this after she saw my spreadsheet, apparently she had bought Divi very recently to redo her website.
She contacted them and asked for a refund and then she turned around and bought Kadence instead.
Steve: Oh gosh, that hurts. Sorry, Divi. I mean, it’s a spicy episode.
Amber: Yeah, it is. So yeah, I, I think, I think it’s kind of fun. I’ll see if I can, um, get another block library and visual composer. And before I give my talk at WordPress Accessibility Meetup, because I think that would be interesting to compare the different block options.
Cause there’s a lot of block library options and I’ll probably just look for whichever one has like the most installs or something.
Steve: Yeah. What about generate?
Amber: GeneratePress. Yeah, that’s really big in The Admin Bar,
Facebook group, a lot of people there use it. I think I might give that one, that might be a good one to look at.
Steve: Yeah.
Amber: So stay tuned, come to WordPress Accessibility Meetup for even more on this and feel free to grab the link to the spreadsheet if you want all the data.
Steve: All
right. I think that’s it. Good.
Amber: Yep.
Steve: That’s enough spice for today. Damn it. My tongue’s tingling. I think Chris hit the bottom of his bottle.
Chris: Yep. Absolutely.
Steve: Look at that.
Amber: I do not
drink as fast as Chris. He like finishes on every episode.
Steve: Yeah.
Amber: We’ll find out how many one star reviews we get on Apple podcasts after this goes live.
Steve: Yeah.
Amber: From Page
builder people. Yeah. Yeah. I, we never said at the beginning. So before we sign off. Would you buy it again? Is this, is it’s a thumbs up, thumbs in the middle, or thumbs down?
Steve: I don’t, I’m going to go thumbs up. I mean, this is fun. Like there’s a, there’s a fun component to it. You know, now, now we can find out what happens later on in our digestive systems.
Chris: I’m, I’m thumbing this one up, but what you do is you get this, you go about 75 percent this 25 percent coconut milk, squeeze lime.
A little sprig of mint and crushed ice, and you have yourself a nice ginger lime, coconut fizz with some mint.
Steve: That sounds good. I want one of those. Chris, come up here and make me one.
Amber: All right. Well, see y’all later.
Chris: All right. Bye.
Steve: See you.
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 equalize digital dot com.