004: Accessibility in Elementor, Allagash North Sky Stout

By /

Listen

Have you ever wondered if an accessible website can be built with Elementor? In this episode, hosts Amber, Chris, and Steve drink Allagash North Sky stout and talk about their efforts to build an accessible website using the popular WordPress page building tool Elementor, as well as the ways in which page builders can both help, and hinder, accessibility overall. 

Mentioned in This Episode

Transcript

>> CHRIS: Welcome to episode four 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 Equalized Digital, a WordPress accessibility company, and the proud creators of the Accessibility Checker plugin.

In this episode, host Amber Hinds, Steve Jones, and myself, Chris Hinds, talk about our efforts to build an accessible website using the popular WordPress page building tool, Elementor, and the ways in which page builders can both help and hinder accessibility overall. For show notes in a full transcript, go to accessibility craft.com/ 0 0 4, and now on to the show.

>> AMBER: Hey y’all, we are recording this just back from WordCamp Birmingham and I’m excited to sit down with you all and chat some accessibility stuff, but I think we want to start off with our beverage. Do you want to tell us what we’re drinking today, Chris, since you’re our beverage guy? 

>> CHRIS: Yeah, absolutely.

So, I’m pretty excited about this one. And this time I’m not going to make the mistake of waiting five minutes to say the name of the beverage like I did last episode. 

>> STEVE: [LAUGHS]

>> CHRIS: So today we are trying out Allagash North Sky Stout. And this is a brewery name that I know and love because we used to live in the Northeast US, specifically on Nantucket Island.

I ran a restaurant out there and we would bring in beers from this brewery because they are based in Portland, Maine, just a stones throw north of Massachusetts. And all their stuff was good. And I remember doing, beer tastings in partnership with some of their salespeople. So their salespeople would come out.

I would come up with specific pairings with the different beers. And this was one of them that I did. And I remember pairing this one with a dessert actually. 

>> AMBER: Really?

>> CHRIS: It was like with a chocolate mousse, and we put some of this stout in the chocolate mousse. So it’s like a, a stout chocolate mousse.

And the interesting thing about this stout, and I think it, it probably is going to mean that Amber is gonna like it a little bit less, because I know Amber with your stouts, you like it to be like you’re drinking a bowl of oatmeal or drinking a, a loaf of bread. 

>> AMBER: [LAUGHS] I’m drinking a loaf of bread! I don’t wanna chew it.

>> STEVE: [LAUGHS]

>> AMBER: But yes, I do like heavy bodied stouts and porters. Yeah, I do.

>> STEVE: So for the uneducated drinker. Can you define what stout means? 

>> CHRIS: So to me, and I’m not a brewer, right? So, but to me a stout means something that is very full-bodied. It’s gonna be dark in color if you pour it into a glass.

T head of the stout – so, you know, you always get that little bit of foam at the top of your beer when you pour it. It should be more creamy than foamy. Generally speaking in terms of its texture and you’re gonna get a lot of darker flavors. So you might get like coffee and molasses and and some, and some of these more like roasted sort of notes versus, you know, something lighter might be a little fruitier. 

And they tend not to be, they tend not to be sweet, like in terms of sugar content, but they do kind of give you that vibe still because of the types of flavor profiles that are in them. But I’m super excited to reunite with this beer because, since moving further south and further west, I haven’t had a single thing from Allagash in probably six, seven years. 

>> AMBER: I think stouts usually, I think, have a higher alcohol content too. 

>> STEVE: Oh do they?

>> CHRIS: Oh yeah. That’s a good, that’s a good point. So this one is 7.5% A B V.

>> AMBER: Yeah. So can we open it? 

>> CHRIS: Yeah, let’s crack it open.

>> AMBER: It’s a can everybody, so it’s a can not a bottle. 

>> STEVE: It’s a full pint can, right? 

>> CHRIS: Yeah. It’s a 16 ounce. Yes. I got the 16 ounce can.

>> AMBER: I’m excited. I love stouts, but now I’m a little bit like, is it not going to be flavorful? 

>> CHRIS: No. They call it a super-sippable stout. So that’s what I was alluding to earlier, Amber.

>> AMBER: Oh, it’s lighter. 

>> CHRIS: Yeah. It’s a little bit less thick. But it’s got, it’s got a nice mouth feel. It’s got nice flavor. I’m excited to taste it. 

>> AMBER: All right. All right. So, what can you taste in it? And I don’t know, Chris, if you read any sort of flavor notes, but, do we think that this is like a, so it’s definitely not a milk stout.

I don’t know if it’s like a coffee stout either. 

>> CHRIS: Let me, no. 

>> STEVE: I mean, I get a little bit of the coffee, kind of dark vibe from it. But it’s a little smooth.

>> AMBER: Yeah.

>> CHRIS: Yeah. I would call this like a, and this is one of the reasons I remember pairing it with a dessert, is it’s like a, and like a dessert that’s like fluffy, right?

That’s got a lot of air content, not super dense, is it’s like it’s a good entry level stout, and it’s a stout that I would give to someone who was like trying their first stout, right, to give them an idea of what it’s like, but it’s not “bang you over the head.” 

You know, like I, I would liken the, the texture of this, like the, the look of it is, is definitely, it’s like black coffee, right?

It’s very dark. 

>> AMBER: Oh man, Chris, so Chris poured his in a glass, but hold it up again. I wanna see it. It’s like one quarter head.

>> STEVE: Yeah. 

>> CHRIS: Yeah. 

>> AMBER: It is very foamy. When you poured it, did you pour straight? 

>> CHRIS: No, no. I poured at an angle, but it, it definitely was high in the bubble content.

I think that effervescence it, you know, that amount of bubbles is part of what makes it likeable and like a lighter stout. Cuz some stouts, you know, you try it and it’s they’re, they’re not as bubbly, right? They’re a little thicker and the bubbles are, are smaller or less prevalent. But what I was gonna say about this one, like in terms of what I’m tasting:

I feel like like, like Steve said, there is a little bit of coffee there. I also taste a little bit of like molasses kind of flavor. Like, have you ever had like a, a molasses cookie or something like that? It’s not super strong. 

>> AMBER: Oh, it’s not sweet.

>> CHRIS: And on the nose, I’m kind of getting like a, a little bit of honey, a little bit of vanilla.

And it is not like a typical Stout. It’s likeable. It’s drinkable. You could have it with food. You could not have it with food. And that’s what I always remember enjoying about this one.

>> STEVE: Yeah. It doesn’t taste, it doesn’t taste as dark as it looks in the glass.

>> AMBER: Yeah. I agree. I was expecting a little bit stronger, but I’m also now wondering why I didn’t get a chocolate mousse to go with my stout. 

>> STEVE: Yeah, same. Same.

>> AMBER: Why did you not order that for us?

>> CHRIS: No, it was, it was really fun to make that, cuz we would take, we would take the stout and we would combine it with sugar and make like the sugar syrup.

Like a stout sugar syrup. 

>> AMBER: So would you cook it down? 

>> CHRIS: Mm-hmm. ? Yeah, we would cook it down to concentrate the flavor a little bit. 

>> AMBER: Oh, so alcohol was out it?

>> CHRIS: All the alcohol was out of it. But then we would, we would whip that stout sugar syrup into a combination of like whipped cream and melted super dark chocolate. So it was like a dark chocolate stout. You get a little bit of the beer. And then we had we had like a candy coated pretzel with it, like a caramel coated pretzel to kind of compliment the, the caramel and the and all that. So it’s like a hard sugar coated, salty pretzels.

You had salty, sweet stout, you know, like pretzels with beer. I had a lot of fun with the beer tastings at The Brotherhood on Nantucket when we were doing those in the off season. 

>> AMBER: Yeah. So now all of our listeners are thinking, I need to go find dessert.

>> CHRIS: So I’m gonna, I’m gonna segue us while everybody’s sipping their beer. And just off the cuff, Amber, why the heck did you just build a website with Elementor? What, why? 

>> AMBER: Yeah. So our, our podcast website is built with Elementor. I really want to prove that anyone can build an accessible website and you do not have to be a developer to be an accessible, to build an accessible website.

So that was sort of my thought behind that. I mean, I could have chosen any page builders. We to still have a agency license from way back in the day with Elementor. It’s the one that I have used the most, but it’s not, I wouldn’t say that I’m an expert. I definitely had some moments when I got really frustrated.

>> STEVE: yeah. 

>> AMBER: Building this website. But also I will note like my personal blog, which also was built like four years ago now. You could tell if you go to the about page. Tell by the, the age of my chil-. Oh, maybe it was, no, it must have been three cuz I had a tiny baby on my about page and my haircut is way different.

But that is also Elementor because sometimes I think you don’t wanna have a designer, you don’t wanna have a custom dev. And I, and, and that is where I think a page builder can come in and there are definite pros to that. And I think there are places for that. And, now my website, it has some accessibility issues, which I have a goal this year of resolving them.

I haven’t done much work on my website for a very long time, but I want to resolve those. But I wanted to prove, or I was going try to prove, and I think I was able to, that you can build an accessible website with Elementor. 

>> CHRIS: So I want to hear a little bit about that journey because I’m guessing it, it was a journey to get to, to get an Eleamentor build to the point that something’s accessible.

And, and just like from from our agency days when the way we used to build websites before we started doing everything from a custom accessible starter. I know one of the first steps we would always take is, is selecting a theme or a template. And so I, I’m wondering how did you, how did you identify an accessible element or template or theme?

>> AMBER: Yeah, so I went first, so I, I figured I was gonna use, I think they called them template kits in Elementor. . I didn’t think I was going to use the Hello Elementor theme because I was, I’ve been aware from auditing other websites that there are some accessibility problems that exist in the Hello Elementor theme.

I actually went to Theme Forest and I went through the template kits. That was really hard, because the first thing I was, well one, I knew that we didn’t need a ton of stuff. Like we didn’t, you know, it’s a pretty basic website and, and I didn’t want a ton of like background and like all those different shapes, like I wanted to be plain and apparently it’s really hard to find a plain Elementor kit.

But the other thing was I didn’t want it to have movement. and a lot of the Elementor template kits have like things flying in and out and like scrolling up and all kinds of stuff. So that ruled out a bunch. But I did eventually find one, which I don’t remember what it’s called right now, but we can link to it in the show notes that I bought.

It did have some movement that I ended up removing and there was some stuff that I had to fix, which maybe we can talk about in a minute. But, so I put that on and I thought I was going to use our theme because I was not planning on building the header and the header is not built with Elementor.

Because I wanted skip links and I wanted a better nav. Right? And then I, I was like, this is our theme. And then I realized that our theme doesn’t respect Elementor when you like set the background color ? 

>> STEVE: This is our theme.

>> AMBER: Steve, why not? 

>> STEVE: Yeah. This is our internal theme that we use for custom builds.

I think the theme that you chose was Astra, right? 

>> AMBER: Yes. So I. So I was kinda like, okay, I can’t use ours. Well, at first I just thought something was wrong with the template kit and I was like, why won’t the background be blue? So I put on hello, and I was like, oh, the background got blue. So I was like, no, it’s something in our theme.

So then I kind of was like, what am I going to use? I tried one of the 20, whatever, the green one, I don’t remember what that one is, but it’s like the last one before there was full side editing, 2020, 

>> STEVE: Twenty Twenty-two? Twenty-one?

>> AMBER: Yeah. Maybe. I don’t know how to edit navs in full side editing, so I wasn’t gonna use a full side editing theme.

>> STEVE: Yeah

>> AMBER: I haven’t tried it. I’ve heard it’s hard.

>> STEVE: Yeah. It’s a challenge. 

>> AMBER: So, so I tried the green one, but then it wigged me out that the blog posts were green. So I was looking at the WordPress most used themes, cuz I was also thinking if I’m trying to pretend to be a user, what would I do? So I, I landed on Astra.

And so that is what we are using for our theme. There were a few things that I ran into with that as well. But, but that’s what we’re using for our theme. And we have a template kit from Theme Forest. 

>> CHRIS: Yeah. So Steve, I’m gonna put you on the spot a little bit because I, we, it again, like agency days before we did our custom starter.

We were doing some stuff with Astra for some customers, and I think that you worked on a, maybe one or two of those and or were at least involved. And I’m wondering if you have any high level thoughts around Astra, like as it, as it, you know, as a theme and in terms of accessibility. 

>> STEVE: Yeah, I mean, I’m probably not the best to answer that.

I mean, I think when we, we would you know, I would be working on custom builds and then we would have like our junior devs working on the kind of the Astra Elementor builds. So I didn’t get too deep into it, and if I did it was like after the fact, right? To fit to, to the, do some finishing touches on it.

But I don’t know. Maybe Amber’s a better one to answer the how accessible Astra is. I mean, obviously she chose to go with it, so it must have a certain level of compliance, right? 

>> CHRIS: So, Amber, what worked well? What worked well? Or what, what parts of it worked well enough that made you go with that one?

>> AMBER: Oh, for the theme? So it has skip links. Now what I did figure out, this frustrated me. You guys, I spent like two or three hours trying to figure out what theme to use and then I was like, this is why people think WordPress is hard. Yeah. Like I kept drawing all these things and I tried Astra and I knew that Astra had skip links and I put the, I put it on and I like went to the homepage, I hit tab, skip to content shows up, and I hit enter and it visually scrolls down.

But if I hit tab, I’m still in the nav. It didn’t shift my focus. And at first I was like, what is this? It’s broken. 

And I, so then that was when I tried a 2020 theme, but then I was like, no, I gotta go back to Astra. Cause I was like, well I’ve come to find out in the customizer there’s like a little scroll tune toggle where you can turn on fancy scrolling.

If you watch your website to be accessible and you’re using Astra, don’t turn that on. 

Cause it will visually scroll you. I don’t know, is it possible to have that fancy scrolling work, Steve? Like the smooth scroll and shift the focus or no? Is that just impossible? 

>> STEVE: No, I think it’s, I think it’s possible. Yeah.

>> AMBER: They, they just haven’t done it. 

>> STEVE: Yeah. I think we just need to submit a ticket with Astra. Yeah. See if they can fix that. 

>> AMBER: Yeah. Maybe that’s what we need to do. So, I mean, Really the only thing that Astra is mostly controlling is the header and the navigation. 

I don’t even know if I could say that I think the navigation on Astra, if you were to have a ton of dropdown menus is the most ideal. Cause I haven’t tested it and we haven’t dropped on menus cuz we have literally three things in our nav. But from a basic framework it was okay and it was easy enough for me to customize the colors and things like that.

On the Elementor side, you know, one of the major problems that I see all the time on all of these themes is like the heading orders is totally random and incorrect. Like somebody’s like, I want this to be small, so I’m gonna make an H6, right? Or, I want this sentence to be big, so I’m gonna make an H2.

Even though it’s like a sentence, it’s not a heading or anything. So I did have to, on the template kit that we bought, I changed like all of the headings. But in Elementor, it’s really easy. There’s a little dropdown where you can select what you want the tag to be. So some of them I change back to a p or I change the H number and it didn’t change the styles at all.

Which honestly, that’s way easier because if we were to get a custom coded thing where I’m like, well, you made this a heading and it’s, it’s just supposed to be large text, like that is not a one second change.

>> STEVE: Right. I mean, typically like with Gutenberg, what I’ve done when that happens is like when I create my headings, I also create a class for each heading, and then in Gutenberg I’ll just add that class to that heading block, you know. 

>> AMBER: So if it’s like, it needs to be an H three, but for some reason the designer designed it to look like an H two, you’d, it’d be an H three with a class of H two on it. 

>> STEVE: Yeah. Yeah. Correct.

>> AMBER: Yeah. So, so that works if you have that coded into your, a custom theme. But if you’re using another theme in the block editor, that might not work. And so that’s where I think that worked well on the Elementor side. Yeah, so I mean, there were some things that I, you know, it’s definitely easier to do, like user friendly dragging and that kind of stuff.

But there were definitely problems that I ran into and that I couldn’t resolve on my own. 

>> CHRIS: Mm-hmm. . So that, I mean, that shifts us right over. So like what were some things. Presented some either severe or moderate challenges in terms of building something with Elementor and trying to make it accessible?

>> STEVE: This episode of Accessibility Craft is sponsored by Equalized 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. 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. With accessibility checker free upgrade to a paid version of accessibility checker to scan custom post types and password protected sites. View sitewide open issue reports and more. Download accessibility checker free today at equalizedigital.com/accessibility-checker.

Use coupon code AccessibilityCraft to save 10% on any paid plan. 

>> AMBER: So when I was trying to figure out the footer and what I wanted to put in the footer, at one point I thought I was gonna put a search there. The Elementor search field is an input that’s not labeled. 

>> STEVE: Hmm. 

>> AMBER: Which is super annoying. Yeah. And, but in the past, one of the things that I have done is like actually the, I’m pretty sure the WordPress core search field, like for widgets, also doesn’t have a visible label. It’s labeled for screen readers, but it doesn’t have a visible label, and you actually do have to have a visible label all the time on every field. 

And I have been able to add labels myself in the HTML by just calling the ID and connecting it that way.

But there’s no ID on the field.

>> STEVE: Oh no. 

>> AMBER: So for about a second, I was like, well, let’s see, what can I do? I could take a Gravity Form and I could put one text field in it, and then I could just have it, the results go to S equals like parameter , right? 

And then I was like, okay, I, an actual user wouldn’t know how to do that,sSo if my goal is to be like a user… And then I also said, well, when we launched this website, we’re not gonna have any podcast episodes on it, so I don’t think anybody needs to search. So I just abandoned the idea of having a site search because I couldn’t come up with an accessible way to do it. 

Now, I did not try – I have no idea if Astra might have site search. You could add to the header, maybe. You know people do. 

>> STEVE: Yeah. 

>> AMBER: I don’t, I don’t remember. I did not try that. So if we keep this website for a long time and we have a lot of content, then that will be something we’ll have to explore. 

On the other hand of my goal of making it truly no code, I did end up writing some CSS for things like link decoration, so I don’t know why, but in Astra there’s a setting where you can say, I want all of my body links to be underlined and in Elementor where I also set my style so that links would be underlined, but it didn’t reliably do it in all the places.

So I ended up on a lot of blocks just adding A with a decoration of underline and then a hover of not underlining in the css because they don’t have that in their style toggle for everything. So I ended up putting that on a bunch of things.

And then there were some things I had to have Steve fix because I couldn’t even figure out. Maybe you could talk about those, Steve.

>> STEVE: Yeah. So yeah, while we were listening to some talks at WordCamp Birmingham, we were doing some final final touches on our podcast website. And so I think a couple of the issues that came up was like there were, it’s under the “find episode now” listen now, right where we list out the episodes.

So it’s like a grid was that, was that a grid block or, or something? Amber. 

>> AMBER: The focus state? No, it’s a post block. Actually, it’s an Elementor post block. 

>> STEVE: So it’s a core Elementor post block. So like when you would tab to the headings, right. The focus outline would be cut off.

And it’s because a wrapping div element had an overflow of hidden on it. So like, your focus outline on the title would be like, cut off on, on like the left side and the top. And so we had to like, you know, traverse through all the divs that, that Elementor adds, you know, there’s just a lot of nesting.

And to find the right one to override those styles so that the focused outline was fully visible.

>> AMBER: Oh, another thing that that kind of brings to mind when you’re talking about focus, because I ended up having to add some CSS styles for Gravity Forms. Because we have it on a reversed background, the required indicator text was too dark, like I had to lighten it and stuff like that.

And I tried using the Ultimate Add-ons for Elementor, cuz it has a Gravity Forms styling block, which would’ve allowed it to be no code, but for whatever reason, it was forcing the focus, it was making that the first focusable item on the page. 

So if I hit tab, it would go to that. And I tried messing with the whole tab index settings on that block, and I failed.

And so I ended up being, okay, I just have to go back to being a shortcode and not using, this Elementor add-on.

>> CHRIS: So you’d go to the page, you’d hit tab and it would bypass the entire navigation, everything, and goes straight to that form. 

>> AMBER: Mm-hmm. 

>> CHRIS: Wow. 

>> AMBER: Yeah. Well, it’s actually a common problem that I’ve seen on websites with forms because someone has set some sort of tab index on it and it’s making it take priority over everything else.

>> STEVE: So I, I had a similar issue on the icon, the Elementor icon list with the, you know, I, I don’t know if it was set to like inline. Or if it had an overflow. But also the focus state outline on that was cut off, so I had to do a little bit of CSS modification on that. 

>> AMBER: Oh, that was on our, our social media links?

>> STEVE: Yeah, the social media links. Yeah. Yeah. So when you tap through those now it, the focus state fully outlined, you can see the full outline. 

>> AMBER: Yeah. You know, a thing about those that I did, which people will see if they inspect. Elementor doesn’t have a way to add like an Aria label on those or screen reader text, but it does support “sr-only” will work for hiding things in Elementor. 

So if you inspect all of those, I have added hidden screen reader text that says specifically like This is Amber on LinkedIn versus Chris on LinkedIn versus Steve on LinkedIn. So that was a good thing about Elementor. Like I didn’t have to add the CSS for that.

It supported it. Or maybe it’s Astra, I don’t know. One of the two. 

>> STEVE: Oh yeah, I can see it. It’s nested right below it in the span element icon list text and then Screen Reader Only Steve on Twitter. Yep. Very cool. 

>> CHRIS: That is cool. Yeah, that’s, that’s like accessibility to the next level. You’re always taking the next step, right?

>> AMBER: Well, I mean, it is, it would technically be a fail if we had no labeling on those. Cuz it would be like Twitter, LinkedIn, Mastodon, GitHub, Twitter, LinkedIn, Twitter, LinkedIn, GitHub, and nobody would know “whose Twitter?” 

>> STEVE: Right? The only context they would have is the H three above, right? 

>> AMBER: Yeah. But that fails. You wanted your links to have meaning without any surrounding content around them. 

>> STEVE: Yeah. Cool. 

>> AMBER: But you had to do some JavaScript for me. On one of my favorite Elementor bugs.

>> STEVE: Yeah. So we had to, we did have to do a little bit of JavaScripts just because I, I think Elementor was adding role equals button to links.

Is that, correct?

>> AMBER: So, not all links, but links that were built with their button block, which WordPress core has this too, right? Where it’s, it’s like a link that you want to look like a button. Yeah. And it’s still a link. It’s still an A tag. It’s not a button tag, although you could theoretically make it a button if you were going to make it open a popup or something, I guess.

But I was using them as links to go to other pages. So that’s like the “See all episodes”, that visually says “See episodes,” but if you look at it it says “See conversation episodes,” “See meetup recording episodes.” 

Those are button blocks, or widgets, I don’t know what Elementor calls them. 

>> CHRIS: So Amber, maybe you know, some of these, some of these things I think has been pretty clear, like why it’s a problem if you’re unable to tab to something or it jumps you to the wrong part of the page and, and why some of these things are problems.

But I think for our audience, it might be interesting for them to know why, like having a link that’s labeled as a button or that has a roll button as a problem in terms of accessibility.

>> AMBER: Do you want to answer that, Steve, or you want me to?

>> STEVE: That’s a great question. Yeah, I mean, a link should function as a normal link. It goes off to another website, a button normally instantiates an action, like a modal popup or you know, something opens.

>> AMBER: Submitting a form. 

>> STEVE: Submitting a form. Yeah. It’s closing something. It creates confusion when you turn a link into a button. 

>> AMBER:So the keyboard interactions are slightly different. A link only works with the return key. A button should work with the return key or the space bar. 

And also when you’re moving through a page with the screen reader, it will tell you what the tags are.

So it would say heading level two, listen by type heading level three, conversations, It won’t read you paragraph, like it won’t label paragraph . It’ll just read that text as normal text. But when you get to, so if you get to a link, it would say “Link, see conversation episodes” or if it’s a link that has a role=button, it would then say “Button, see conversation episodes,” which might make people think, “oh, if I click this, it’s gonna open a modal of them or something.”

And it might make them think it works with the space bar. Which I don’t know, actually, maybe it would’ve worked with the Space Bar then once it had the role of button. I don’t – or no. Cause they would still have to add JavaScript handlers, wouldn’t they?

>> STEVE: Right. Yeah. I mean, I don’t think if it has a role=button and you hit space bar, I don’t think it’s going to do anything 

>> AMBER: unless they’ve written JavaScript to the agent.

Yeah, if it, if it’s actually a link. Yeah. But yeah, otherwise they think, they think they’re opening a modal or a tab or an accordion or something, and they click on it and boom, they’re off to another website. Right. 

>> AMBER: Yeah, a different webpage. Yeah. So it’s disorienting and it’s about like giving people an understanding of where they might go.

And also how to engage with it, right? Because I’m sure they probably didn’t have JavaScript handlers for the space bar. So if somebody heard button, they might be used to this, their preferences use as space bar, and they hit space bar and they think it doesn’t work. 

>> STEVE: Right. And a lot of people that use the screen readers move so fast that they just be, they’re on to the next piece. They’re skipping right past it, right? 

>> AMBER: Yeah. So that’s why it’s important that you have things tagged appropriately. So you wrote JavaScript. It wasn’t, it didn’t look very long to me, Steve. 

>> STEVE: Nope. 

>> AMBER: What’d you do? 

>> STEVE: So the s the selector was Elementor dash button dash link.

So I just did a query selector just straight JavaScript on it. So I, so I targeted that selector and then I just did remove attribute role, so I just removed the attribute off of it. 

And being Elementor, like at first I was like, I thought for sure there was somewhere in Elementor to add JavaScript.

>> AMBER: Oh, but yeah, there wasn’t?

>> STEVE: Yeah, I think I’m confused with Beaver Builder, right? So, you know, I’m a developer. I like to do things custom, so I stay away from the page builders as much as possible. But the I don’t know. So we’re like, where are we gonna put this? Do I have to like, write, you know, 

>> AMBER: Go make a child theme

>> STEVE: … make a child theme, enque a  JavaScript file, but no, we just stuck it in the, the footer code in Perfmatters.

>> AMBER: Thank you, Perfmatters. 

>> CHRIS: Not to completely derail us, but you saying child theme and, and you know, having those developer focused solutions remind me of a conversation we had recently about extending or modifying a customer’s website and we were like, oh, we’ll just make a child theme.

But it was Genesis, so there was already a child theme and we were like, dang it, we can’t do that.

>> STEVE: Yeah. 

>> AMBER: Yeah, But I mean, the bottom line was, it was possible. But again, like I made a basic website. It’ll be interesting to see this year if I get some time and I go back and I fix mine because mine is a lot more complex. Like it has a lot of background images and it has things like that. Now it doesn’t have carousels or accordions.

That’s where I think people really get in trouble with the page builders. But I think if you’re like doing more standard-ish design, I don’t know. I don’t know what to call it. 

>> STEVE: Yeah. 

>> AMBER: Not trying to have a lot of interactive components, then you’re probably safe, but I think if you’re gonna have like a carousel or something, just judging by the issue with the ARIA on that link, that’s not a button that they’re calling a button.

>> STEVE: Right. 

>> AMBER: I suspect there’s a lot of problems with some of those modules.

>> STEVE: Yeah, totally. 

>> CHRIS: So I, I have a question that, that I mean, spoiler alert to our audience. We do like, have discussion notes for these shows. We’re not just ad hoc-ing, all of this. We’re not that cool. But this isn’t on our list. So I’m gonna put Amber and Steve on the spot a little bit.

But I’m curious, like, as you’re out there assessing things or as our audience is out there assessing things, because we have a lot of agencies that we work with that they’re doing template based builds, what is one thing that they can do? Just that anyone can do, right? Whether it’s a project manager, a developer, to just quickly assess you know, is this theme that I’m about to recommend to a customer accessible enough or give me a good baseline?

Or is it a dumpster fire? Right? Like, what are one or two things that they can do very easily, that anyone can do? 

>> AMBER: This is actually a really great segue into, I wanted to talk about this one Elementor template kit that I – Elementor might not like me after this podcast episode, but Elementor, if you wanna talk, you, you can get ahold of me.

So it’s called NGO Independent Living, and it has a main heading of “Empowering people with disabilities for independent, fulfilling living.” And when I was first looking for template kits, and I saw this, I was like, “If it’s saying it’s for an organization that helps people with disabilities, maybe it’s gonna be more accessible. Maybe we could use this for our podcast website.” 

So what did I do? Well, one of the really easy things is, is if you have WAVE or axe or one of those browser extensions, you can just real quick, like hit the button. 

You can’t open their page. You have to view the source and find the iframe so you can actually the theme it on its own instead of in their little iframe. Cuz if you do it in their iframe, you won’t, you’ll get the accessibility of the page surrounding it, not the iframe content. 

So I had to find that and then I ran WAVE. Spoiler alert, seven errors, 20 contrast errors, , 

>> STEVE: Heading, heading order.

>> AMBER: So, the HeadingsMap Chrome extension is pretty handy. You could run that.  Again, if the template doesn’t have good headings, I’m not as worried about that in Elementor. Cause that’s a quick and easy fix. So I’m like, okay, fine. I’m gonna have to spend a little bit of extra time fixing the heading order.

Like, I can deal with that, right? 

>> CHRIS: Yeah. But when you are supposedly NGO certified or NGO appropriate, (I forget the right name for this, but template kit, something, whatever they call them) doesn’t shift your focus in onto a popup. When there’s a call to action popup and you keep tabbing, which I just did, and it’s taking you through the links on the page, you can’t dismiss the popup.

I’d say that’s a pretty big no-no. 

>> STEVE: Yeah. Actually, I think you can dismiss the. If you, wait, hold on. Let me try it. 

>> AMBER: If you figure out how to get into the popup first. It’s probably in the, it’s probably in the footer. 

>> STEVE: It definitely is. 

>> AMBER: That’s where I think most popups are. So if you tab through the entire page, I bet you might get into the popup.

>> STEVE: So at least the close button as far as I can tell without inspecting the page, the close button is in the footer, so I think I can actually close it. 

Now, I haven’t checked to see if this is actually a button or not, but, I mean, the big problem is 

>> AMBER: There’s actually no focus states. 

>> STEVE: Well, no, no, I don’t think that the fields are focusable.

Like I can’t get to the form fields. First name, last name, email, phone number. I can’t tab to those.

>> AMBER: No, I think you can.

>> STEVE: Can you or is it just not showing me any?

>> AMBER: There’s no focus. So they are coded as inputs, 

>> STEVE: But the text is white on white background. 

>> AMBER: Oh, if you type in them?

>> STEVE:  Yeah. 

>> AMBER: Oh yeah. Whoops. [LAUGHS]

>> CHRIS: Oh, dear.

>> STEVE: Oh, okay. So, so I think I can focus, I can tab to those inputs in the form in the popup, but there’s, there’s no visual indicator that I have tabbed to them. So, so for somebody like me that is very versed in testing for accessibility, even I was like, oh, I can’t get to them. And I’m a fully sighted person. Right. And then if you type in those fields, the text is white on a white background. 

>> CHRIS: So if we were to encapsulate this into a couple of nuggets of information it would be run WAVE.

>> AMBER: Don’t use this. 

>> CHRIS: Well, no, I don’t, I don’t wanna be, I don’t want to be that podcast that just you know, poops on people’s stuff.

Like, although they should fix this to be clear. 

>> STEVE: Yeah. 

>> CHRIS: Like, but if we’re helping, if we’re helping our audience better vet things, it’s to run, WAVE or axe or an equivalent front end scanner. And what, just go there. Like I go and I just start hitting tab and I see what happens.

That’s what I always do. 

>> AMBER: Yeah.

>> STEVE: The close button’s a link, by the way. Not the rag on it any anymore, but. 

>> CHRIS: We were just talking about that. [LAUGHS]

>> AMBER: This, this, you know, this, this podcast would not be fun to listen to if we didn’t ever speak the truth.

>> CHRIS: No. Right. No. You gotta raz people a little bit. I think they’ve gotten their razzing. 

>> AMBER: Yeah. So I think, I think tabbing through, making sure that everything could go and I think too, but I also think you need to take a little bit of some things with the grain of salt, right? So like I mentioned the heading order. I don’t really care if the headings are out of order because I know in Elementor I can fix that quickly.

And whoever built the template kit didn’t understand about headings, but I do – not a problem. Right. 

Color contrast, like we mentioned, there’s a bunch of color contrast errors. Now, would I like Elementor to have this theme have proper color contrast out of the box? Yes. Because if somebody were to use it and not change the colors, I want it to be accessible and I think that that’s what theme developers should do.

>> STEVE: Yeah. 

>> AMBER: But, I know. Or if you know for your clients that you’re going to be changing the colors of their brand, who cares that it has color contrast issues? Not a problem. Easy to fix. Right? 

Where I think you get into problems is something like with this one, with having the popup. If you’re going to keep that popup, because that’s part of the plan for the website, knowing that it doesn’t get focus added to it.

>> STEVE: It doesn’t lock. Doesn’t lock focus. Doesn’t return focus. 

>> AMBER: Yeah. 

>> STEVE: You have to tab through the whole website to get to the close button. 

>> AMBER: That’s something where as a, if I was someone building websites for clients, I would go well, or even myself, right? I’m not super good at JavaScript. I would be like, okay, this is gonna require a JavaScript fit.

So I’d either say either A, that’s a reason not to use this because it is too intense code. I can’t do it.

Or I might use this, and I might say, is there an alternative WordPress plugin to solve this problem? I’ll give a shout out to Popup Maker. They do a really good job on their accessibility.

>> STEVE: Yeah, yeah, totally. 

>> AMBER: They really do. So, That’s the interesting thing about WordPress, right, is you’re not just picking one tool. So you might be able to be like, there’s some parts about this that I super like, can I fix the other stuff in not too much time? And then are there other tools I could pull in to replace whatever it might be?

Or you might just say, there’s so much going on here. Like I will say all the, the themes or template kits where everything has motion. I don’t choose those. 

I think one time we used Perfmatters to block the JavaScript file that was causing animation on all of that. It like it, it succeeded in removing all the animation from everything. But the initial load was a little, like, it just didn’t look great, right? Like there’s a weird, like it was jerky or something. So I don’t recommend it. 

So in my mind I’m thinking the only way to do this in Elementor is to go to every single module, and go to the advanced tab, and then click on motion.

And then click turn off, which is a lot of work.

>> STEVE: Right. I mean, you could be an advocate too for, for helping developers improve their accessibility. Like if, if you purchase this theme, right, you should then get, this is a premium theme, right? Am I correct? 

>> AMBER: I think so. 

>> STEVE: Yeah. You should then get some premium support to go along with that.

So be an advocate, say, “Hey, you know, I’ve got, this is an accessibility error in your theme.” Either contact or support or submit a ticket on their GitHub and you know, just help nudge them to make their product more accessible.

>> CHRIS: Absolutely. If every developer did that, or every project manager did that, like pushed it up the chain for these, for these WordPress products and said, “Hey, you know, just so you know, there’s this problem” and open a ticket for them, or whatever their channels are.

Right. If that piece of software has a distribution of a thousand or 10,000 or a hundred thousand websites. By doing that little bit of advocacy, you have just made that many websites potentially at least more accessible.

>> STEVE: Yeah. 

>> AMBER: Yeah, but I mean the theme or the plugin developer has to take it seriously though, too, because the other thing when I was doing research for this episode was I saw on Elementor’s GitHub, there’s an issue where someone is asking for complete WCAG compliance in all Elementor widgets and theme.

And it’s been closed, and there’s a bunch of people being like, why is this closed? 

>> STEVE: Yeah.

>> AMBER: But Elementor was basically like, okay, we’re done closing this. We’re not gonna pay attention to this issue, you know? 

So yes, we all should raise it, but at some point, my hope is that plugin and theme developers will take this seriously.

And if someone does raise it like this person Tomas did in 2020, like it should be it should be taken seriously. Yeah, right. 

>> STEVE: Well, on the ticket thread. So it was opened in 2020 and it looks like it was closed in December, right at the end of December of 2020. And there’s tagged Elementor version 3.1, beta four release.

So I’m assuming that, that – there’s no context really given to. what’s been resolved or if it’s closed. So there’s just a tag to the beta release. So I’m assuming they thought it was addressed in that beta, but if, you know, if you go on through the thread, you can see that I don’t believe it has been addressed and there’s a lot of people asking for them to make this a priority.

>> AMBER: Yeah, so in Elementor they do have, which I turned on in ours, accessibility improvements under their experiemnts. I mean, I would really love to see them prioritize and just, and not be something that has to be turned on.

Yeah. And, and honestly, 

>> CHRIS: There’s problem. Why? Why is accessibility a toggle? Like that’s the stupidest thing I’ve ever heard. 

>> AMBER: Yeah. I mean, look, here’s the deal. You have to accept, and this is the hardest part I think for theme and plugin developers, is that there are going to probably be some fixes they have to make that might result in a breaking.

Yeah, like if somebody has styled something a certain way expecting an a tag and they’re changing it to a button, cuz it’s actually supposed to be a button, those styles will be lost. But I think you just need to communicate that in your change log and give people the opportunity, ideally if they’re developer or you know, a super user to test it on a staging site and adjust their styles as needed and then roll it out on their production site.

But I’m fully for breaking changes if it makes the web better.

>> CHRIS: So you think this was a backwards compatibility thing? And that’s why it’s a toggle.

>> STEVE: I don’t, I mean, I don’t know. I don’t know why it would be an experimental feature. 

>> AMBER: Or they weren’t sure what, they didn’t wanna say that, hey, or they knew that they hadn’t made it fully accessible. Right? Like maybe they fixed a few elements, but they knew that they didn’t do everything. 

>> STEVE: I don’t know.

Well, I mean, with the market share that Elementor has, I mean, I could imagine even the role attribute being added to a button, right? Even removing that could not necessarily be a breaking change for Elementor, but it could be a breaking change for any custom styles that somebody made that targets that attribute.

Cuz you can, you can style and, and target elements by attributes. So I don’t know if it’s that. You know, with this enormous user base, it could, it could cause issues, but I mean, and I think – 

>> AMBER: yeah, or also there’s all these add-on plugins too, so, right. Like I’m sure that’s something they’re considering too, is they have a lot of third party developers that are selling or creating free plugins to extend Elementor..

I mean, it’s hard. I’m not gonna lie; I’m sure it’s hard, but I would really hope to see more effort from Elementor, given the number of sites that are using Elementor. 

>> STEVE: Yeah, and I think this, this underscore is kind of what I, my speech at WordCamp Birmingham, is just the importance of one learning accessibility deeply, and two, releasing with a product that is accessible first, because it’s so much easier to have it right the first time out of the gate, then to go back and, and patch it later. 

>> CHRIS: Yeah. And that’s evidenced by what we’re seeing right here, where Elementor is, based on what you two are saying from a technical perspective, they’re locked into having a technically inaccessible thing in their, in their software because of backwards compatibility concerns.

And because it could potentially break, not only, you know, their template kit builders, but also their end users and their customers, what the solutions that they’ve built. 

The other thing I would say too, on this front, and, and I think we should go into a little bit in the couple minutes we have left, why we think it’s really important for them and plugin devs to think about accessibility in these terms beyond backwards compatibility, beyond building it right in the first place is.

There is a very real possibility that someone who is earlier stage in building their page builder could come along and say, okay, we’re just as good as Elementor in all of these areas. Oh, and by the way, we’re accessible. And it’s just another feather in their cap where they can gain market share over Elementor and Elementor could potentially lose their share of the market, could potentially get supplanted as a leading page builder in the WordPress base.

Because this wasn’t considered from the beginning. And because they have this technical debt that they’re now lo locked into. 

>> AMBER: Yeah, I mean the whole, like, why, why should it matter? This is my whole, I’m gonna be speaking on this topic at WordCamp Phoenix, and I’m pretty sure this podcast will come out before then.

But like the bottom line of it is, is that the only way we’re really going to make a difference on the web with accessibility is if people who don’t, who have never even heard of accessibility, who don’t know anything about, like the technical behind their website: the DIYers, the bloggers, very small businesses. 

If they can go build a website and the tools that they choose to use have no accessibility problems. And then the only issues might be them entering their content wrong, like we need plugin and theme developers, especially ones that have very, very large market share and a very large user base, they need to be putting effort into accessibility, cuz that is what’s going to make a difference on the web. 

And we’re talking about 40, what, 43, 45% of the Internet being built with WordPress. That is huge. And, and the plugin and theme developers are the ones who are going to enable people, everyone to be able to use websites.

>> STEVE: Yeah. Do, do you feel that the like pressure from the, from like Google to make your website accessible and well, I mean, this is that, and then like a second to that is you know real litigation, right? Litigation comes down. I don’t know what Elementor’s user agreement looks like, but I’m sure that they can’t be held responsible for how anybody uses their software. But, you know, I don’t know if there’s, at some point there’s a liability that passes through, right?

I mean, that would definitely put a lot of pressure on the community.

>> CHRIS: I mean, I, if you, yeah. If you were a law firm and you hired a, a highly skilled developer to go dig into the code and see, okay, you know, is this natively accessible or not?

Was this, was this in the source code or was this something that someone layered on with, with content that they added?

And when looking at a lawsuit and looking at whether, you know, who’s ultimately responsible, right? I could see, I could see a scenario where some developers of these solutions could get roped into this no matter what their terms say, because if it goes, if it goes back to the source code and it goes back to something being built, inaccessibly and that’s the issue that’s being raised in the lawsuit. It is entirely possible that they could be taken to task in a court and at the very least have a bunch of attorney’s fees, even if they ultimately aren’t found at fault.

>> AMBER: I have heard of web developers getting sued for accessibility. So I don’t, I, I don’t know. I mean, obviously we’re not attorneys here, but I don’t think it’s necessarily farfetched to think that at some point in time a tool will get pulled in on one of those. And even if you’re not, even if you’re just called in to testify, think about your team’s time.

All of that kinda stuff. So, well we’re, we’re probably kind of ending this on. Not very happy note. The happy note is, you can build an accessible website with Elementor. You have to be very careful though, and Elementor, we would love for you to do better and make it so that you have to be less careful.

I wanna be able to use all the widgets. And the search bar and everything on my website. That would be awesome. 

>> STEVE: Yeah. Yep, totally. 

>> CHRIS: All right. 

>> AMBER: Well, it’s great talking to you guys, and that’s soon. 

>> STEVE: All right. Take care. 

>> CHRIS: All right. See you all later. 

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, Google podcasts, Spotify, and more. And if building accessibility awareness is important to you, please consider rating Accessibility Craft five 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 helped make 1000s of WordPress websites more accessible at equalizedigital.com