Listen
In this episode, we discuss the state of accessibility in WooCommerce, and whether a low-code accessible WooCommerce store is achievable for everyday WordPress users.
Mentioned in This Episode
Transcript
>> CHRIS HINDS: Welcome to episode 52 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 in Equalize Digital, a WordPress accessibility company, and the proud creators of the Accessibility Checker plugin.
In this episode, we discuss the state of accessibility in WooCommerce, and whether a low-code accessible WooCommerce store is achievable for everyday WordPress users.
For show notes and a full transcript, go to “AccessibilityCraft.com/052.”
Now, on to the show.
>> AMBER: Hey, everybody. It’s Amber, and I’m here today with Chris.
>> CHRIS: Hello, everyone.
>> AMBER: And Steve.
>> STEVE: Hey, everyone, how’s it going?
>> AMBER: And we are going to be talking about our new swag shop that we, mostly I, built. But of course, we need to have a beverage.
What are we drinking today, Chris?
>> CHRIS: So we are trying out a sparkling soda that has some fruit juice added to it, but no added sugar. And it is Sanzo Lychee Sparkling Water.
My can’s a little dented up, but hopefully this gives an idea.
It has a stylized picture of a lychee fruit on the front, and only 20 calories. The ingredients are carbonated water, lychee puree, and citric acid. So three ingredients, nice and clean.
Lychee is one of my personal favorite fruits.
>> AMBER: Where is lychee from? I don’t actually know this.
>> CHRIS: It’s an Asian fruit. I believe, primarily, like Southeast Asia. You see it a lot in China, Japan.
>> AMBER: Thailand or no? Do they have lychee in Thai food? That’s where I feel like maybe I’ve seen it.
>> CHRIS: You might see it in, like, a fruit salad there, but, I don’t know, not as often.
>> STEVE: Yes, I’ve never. had it.
>> CHRIS: So you’ll either love it or you’ll hate it.
>> STEVE: Yes. [laughs]
>> CHRIS: Like so many things that we do.
>> STEVE: Yes. Yes.
[laughter]
>> AMBER: Have you ever had Boba tea, Steve?
>> STEVE: No, I don’t think so. I’m not hip like you guys.
[laughter]
>> AMBER: Well, you can get tapioca pearls, which are like a dime-sized kind of gummy things made with tapioca that are like balls, which they put in the bottom of the tea. They give you a really wide straw. But I’m not a huge fan of those. I like to get lychee pieces in mine, and that’s pretty good.
>> STEVE: So you’re supposed to suck them up the straw? Like this?
>> AMBER: And then you have to chew it. It’s like you drink and chew your drink at the same time.
>> STEVE: You, like, choke on it? Like, somebody… [laughs]
>> CHRIS: No, that’s never happened to me. I would imagine you might if you weren’t expecting it. But if you if you get it, hopefully you’re expecting it.
>> AMBER: Yes. So shall we open these and give them a taste?
>> CHRIS: Yes, absolutely.
Smells like lychee.
>> AMBER: It smells like lychee. It smells like a fruit.
[laughter]
What’s that face you’re making, Steve? How do you feel about the smell?
>> CHRIS: Steve’s encountered an unfamiliar smell.
>> STEVE: Yes. It reminds me of something.
>> AMBER: Grapes?
>> STEVE: Grapefruit or…
>> AMBER: It smells the way I expect a lychee to smell. And it has actual lychee in it, which is probably why it’s not fake, right? It’s not artificial, like some things we’ve had where they’re trying to fake a flavor. But I guess, to me, lychee feels a little bit grape-ish on the undertones.
>> STEVE: It’s like one of those smells that takes you back to your childhood and you can’t quite figure out when it was, you know.
>> CHRIS: Maybe little Steve had some leechy before.
>> STEVE: I know. It’s all coming back, and making connections.
[laughter]
[crosstalk ]
>> STEVE: A song about it? No, I don’t want to sing a song. [laughs]
>> AMBER: Celine Dion?
>> STEVE: Oh, [laughs] it’s all coming back to me now. Yes.
[laughter]
That was a good reference.
>> AMBER: I like this. I like it a lot.
>> CHRIS: Yes, it’s tart. It’s a little floral. Typical levels of carbonation. It’s not, like, “whack you over the head with lychee flavor.”
>> AMBER: But there’s a lot. Like, it’s not subtle.
>> CHRIS: Just the faintest hint of sweetness.
>> AMBER: Yes, I like it.
>> STEVE: It tastes better than it smells.
>> AMBER: It tastes better than it smells? Is that what you said?
>> STEVE: Yes.
>> AMBER: How would you describe the flavor?
>> STEVE: It’s subtle. I would probably like more carbonation, but this is probably a better subtle carbonation for fruit drinks.
>> AMBER: Oh, it’s softer. It’s not as biting as some. Is that what you think?
>> STEVE: Well, I mean, I’m used to good old diet coke. It’s pretty carbonated. [laughs]
>> CHRIS: Yes. It’s sour. It’s a little floral. It reminds me of smelling a bouquet of roses or something like that. But it’s nice. I will continue to sip this as we talk about WooCommerce accessibility.
>> STEVE: Yes.
>> CHRIS: Right?
>> AMBER: Yes. This episode is going to be one of multiple, talking about WooCommerce accessibility. And it sort of stemmed from us talking for a while about needing to have a swap shop. By the time this episode comes out, you’ll be able to go to shop, “EqualizeDigital.com” and buy T-shirts and pint glasses and mugs and other fun things.
I do think at some point, we’re going to make a T-shirt that says, “Chase it with a Diet Coke,” [laughter] with a quotation marks [inaudible]
[laughter]
>> STEVE: I don’t know. Do I want to be known as that guy?
[laughter]
>> AMBER: So anyway, we have a shop, and I built it myself.
Steve hasn’t even looked at it until probably, like, right now. So we’ll see what he has to say as he looks at it.
I kind of took it as a challenge. We’ve been auditing. We have two different accessibility audits going on for different WooCommerce stores, both of which are pretty big and have a lot of products in them. And I thought, “OK, it’s time for us to set up our swag shop.”
I wanted to sort of get a good baseline, because sometimes when we’re doing an audit, it’s hard to know where the problem is coming from; the theme, from other plugins, and that kind of stuff. And I haven’t done much with full site editing. So I set out to create this. It’s with 2024 and WooCommerce. It does have a small handful of plugins, and there’s probably one or two that I’m going to do. And we’re just using Printful to do print on demand.
So we have a shop now.
>> STEVE: Pretty cool.
>> CHRIS: So this is using the 2024 theme. You said there was a handful of plugins you’re using. Can you take us through maybe a couple of the the highlights and why you picked them?
>> AMBER: Sure. That’s a good question. Now I’m going to have to go log in because I don’t remember. So, of course, I have the Printful plugin, which, for people who aren’t familiar, that allows you to go create products on their website. People will order them. The orders will go to them. They’ll actually make them ship them, because obviously we’re not in E-commerce business. We’re not going to start mailing T-shirts to people.
So, of course, Accessibility Checker and Accessibility Checker Pro is on the there. And actually, in just a little bit, when we maybe dive into some of the accessibility problems I’ve found, I will say, like, “Accessibility Checker found those problems in WooCommerce for me, and now I’m opening GitHub issues.”
I have our Accessibility New Windows Warnings plugin. I almost didn’t need it, but there were a couple instances where it did make sense to open links in new tabs. So I added that on so that it would have the warning.
Admin Columns Pro because I really like being able to edit columns in the admin, and not just have to see default WordPress columns. I mean, we use that on almost everything, right, Steve?
>> STEVE: Every website, yes.
>> AMBER: Yes.
>> STEVE: It’s great.
>> AMBER: I just added the advanced shipment tracking for WooCommerce. I haven’t figured out totally how it works yet. So that’s there.
We have Gravity Forms for our contact form.
>> CHRIS: Of course.
>> STEVE: Yes.
>> AMBER: I added the SimpleTOC table of contents block, which we used on the WordPress Accessibility Day website. And there were a couple of accessibility problems with it, but the dev fixed them the same day we reported them, which was awesome. And I only have a table of contents on our privacy policy. That’s it. But I wanted to be able to smush the table of contents and not have to manually create it, so I used that block, which is super easy.
We’re using Stripe, and it has WP Mail SMTP, and Yoast SEO. That’s pretty much it. It’s a pretty light website as far as plugins goes.
Do you know, on average, how many plugins we think we use on the custom websites we build for clients?
>> STEVE: The ones we build?
>> AMBER: Yes.
>> STEVE: Oh, I don’t know. It’s probably… I don’t know. You want me to say a number? Like, I don’t know. Is it 20? Does it get that many?
>> AMBER: It might be more.
>> STEVE: Yes, depending on the website.
>> AMBER: Forty?
>> STEVE: No, I don’t know. Sometimes we go into it clean with our own base install. And then sometimes we inherit a lot of plugins from an existing site. So it varies quite a bit.
>> CHRIS: Yes. They’re, like, “You can’t get rid of these for XYZ reason,” right?
>> STEVE: Right.
>> AMBER: I think in WooCommerce, you probably sometimes end up with more.
I have one deactivated that I just installed. And I know I want to do, but I haven’t figured out because I’m going to have to test them all to see which one is the most accessible. It’s, like, right now, when you choose your color, like, if your T-shirt has black and blue and you’re trying to choose between black and blue, it’s a dropdown. And I want what they call, like, variation swatches, where it’s like a circle with the actual color. So I’m going to add those.
I feel like a lot of times, I see people adding side carts, where the cart comes in from the side or different things. 2024, in full site editing, WooCommerce had that already, which was kind of cool.
>> STEVE: Yes.
>> AMBER: But I do feel like on WooCommerce stores, sometimes you do see more plugins because people are looking for a lot of really specialized functionality.
>> STEVE: Yes. Our base theme starts with 24 plugins. So it can grow or shrink from there. It’s likely the shop will end up with more, if we have Redirection or Perfmatters, you know, utility plugins and stuff like that.
>> AMBER: Oh, yes, because I started clean on this. I didn’t use our base. And so you’re right. Like, I don’t have Redirection and I don’t have Perfmatters. I don’t have Smush. So my images aren’t optimized yet.
>> STEVE: Solid Security, you know, like…
>> AMBER: Yes. That should all be there by the time people are listening to this episode, though. We will have security on our website.
[laughter]
>> STEVE: Don’t hack us. [laughs]
>> CHRIS: Yes. So this is, I think, Amber, one of your first times really playing around with full site editing, and the new 2024 theme, and taking plugins we’ve used for a long time and seeing how they work within that system. I want to start positive. I wonder if there are some areas where maybe you were pleasantly surprised, if you can think of any.
>> AMBER: Yes. I do think having the global footer, especially, but header, too, built in full site editing instead of with widgets, that it is actually a lot more flexible. I kind of fought that for a long time, but I really, really liked that.
I didn’t even do design because I was, like, “I just want to do something.” So I use patterns that already exist in the 2024 theme. And I think there are some pretty decent patterns. I modified the heading structure in some of them.
If you go to the “about” page, that had no subheadings, and it just had a lot of paragraphs, some which were styled quite large. And so I inserted headings and did a few things. But I don’t think it took me a huge amount of time to set that up, which I think is good, especially if you’re someone… Like, I think I can tell if something looks good or not, but I don’t consider myself a really great designer. Like, maybe I’m not super great at coming up with the ideas. I just know if it is good or not.
>> STEVE: Yes.
>> AMBER: But I definitely had some frustrations along the way.
>> CHRIS: Yes. So what were some of those? I know a couple of them made it to Twitter, or maybe one of them.
>> AMBER: Yes. So number one, navigation menus. A few things. So we have three nav menus in our footer and then one in the header. The one on the right in the footer was synced with the one in the header, and it took me a while to figure that out. And I kept being, like, why did the labels keep changing? I would edit one and then it would change the other, because it was the same nav menu. And then I figured it out, and then I removed it and I added a new nav menu. Like, I deleted the block completely and I added a new one, but it kept adding that same one.
So I don’t know if it just defaults to the most recently created one or something. But it took me forever to figure out, “How do I create a new nav menu?”
Our header right now, it’s got the text, “Equalize Digital Shop,” like, the name. And then it has a small menu with three items in the middle. And then it has the cart button.
The 2024 has just the header and the nav, and the nav is right-aligned. And I was trying to put the cart and the “my account” link in the nav. And I was going to do them as icons, which normally, in the classic menus, I can just go add, like, a [inaudible] or some icon tag, and it would add an icon. And then I can put a span around the text and “screen reader only,” and all that. Well, the navigation list items strips HTML.
Do you think that’s a security thing, Steve?
>> STEVE: I don’t know. Probably.
>> AMBER: But I couldn’t get it in.
>> STEVE: Could you add a class, though? Could you add some [inaudible]?
>> AMBER: I didn’t see any way to add a class. Someone on Twitter told me that they make them bold, and then they target the strong tag. And I was like, yes, but what if you [inaudible] too?
>> STEVE: Yes. You could do it, yes.
>> AMBER: I mean, they might have an ID on them.
>> STEVE: Well, you could target the child. If you had multiple, you could target first child, last child.
>> AMBER: Yes. But it was just so frustrating. But then I found that WooCommerce mini-cart block. And I was, like, “OK, I’ll use this.” And then I decided that “my account” is just going to be text, “my account.” I’m not going to make an icon. And I think it worked out the way it looks.
Although, I spent more than an hour trying to figure out how to set up the nav menus. Trying all sorts of hacky different ways to figure out how to put an icon with screen-reader text in the nav menus, and not having them sync. I might have even spend two hours on the nav. And I was just, like, “I have been going with WordPress for 15 years.”
>> STEVE: Yes.
>> AMBER: But it’s so different.
>> STEVE: Well, and you’re trying to do the most basic of basic, too. You’re not trying to make flyouts, you know, dropdowns. You’re not trying to make a mega menu.
>> SPEAKER 1: 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 a 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 PPI 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.com/Accessibility-Checker.” Use coupon code “Accessibility Craft” to save 10% on any paid plan.
>> AMBER: The other thing was when I started screen-reader testing it, they all just have ARIA labels that said, like, “navigation one, navigation two, navigation three.” So then I had to go figure out, can I name these? Which you can. It’s super varied. I don’t remember exactly where it is off the top of my head, and I don’t have the full site editor open. But it’s, like, two tabs in and in an accordion where you actually name it and give it a name for screen-reader users so that it could be meaningful. Like, primary navigation, “policy” pages, “about” pages, product categories, like, whatever that is. And so that field, to me, needs to be moved. It needs to be way more front and center.
I think nav menus were a huge pain point, and probably the biggest one. Now I’ve been going through and I’ve been doing some testing. And there’s a few things, like, WooCommerce has patterns in the plugin or templates, for the shop and stuff that works with 2024.
One I noticed, and it’s a super minor thing, but I ended up opening a ticket on their GitHub, is whoever created that template, they didn’t use the main tag. And so there’s no main tag, except on ours because I changed it.
However, anyone who creates a WooCommerce shop with these templates and doesn’t go fix that, it’s just a div, which means there’s no main tag and there’s no skip links. So the way the skip links work in 2024, it’s like looking for the main tag, and then it will create the skip links.
If they fixed that, Steve, do you think that it will roll out fixes to everyone’s website? Or is it only forward-looking, and anyone who’s already created with that block have to go fix it themselves? Do you know how that works? Because I don’t know.
>> STEVE: It may be deprecated. It could have an upgrade path. It just depends how the block is created. My assumption is that they wouldn’t edit that HTML. Maybe if you edit the block again at some point in time, I don’t know. I don’t know the answer to that. But my assumption is that it’s not going to be like you install and it’s an automatic update, because that HTML is saved in the database.
>> AMBER: Yes.
>> STEVE: It’s not dynamically generated or anything. So they would have to write an update script that goes into the database and updates all those blocks. I don’t think that happens. I could be wrong. If anybody’s listening, you know, hit me up on Twitter and tell me I’m wrong. [chuckles]
>> CHRIS: This may be my ignorant speaking, but I’ve seen this before in plugins where you’d run a major update and there’s something like a conversion process that you can opt into where it’s, like, “We have to convert all your blocks or all your sections into this new system. Click this button to start. Make sure X, Y, Z is done before you do this.” Is that the kind of thing we’re talking about, where they might be going through and updating, like, front-end code for some of those things?
>> STEVE: Yes. I haven’t seen that in regards to themes. You’ll see that in regards to updating your database. If you update your network on a multi-site, it’ll sometimes prompt you to update the network, and then it runs a script. It does that. Or like in plugins, I’ve seen that. I haven’t seen that too much with themes.
[crosstalk ]
>> CHRIS: Oh, so that’s frequently a database thing?
>> STEVE: Yes, yes, I think so. I think so.
>> CHRIS: OK.
>> STEVE: They would have a script that would convert the custom post types to their custom table. So yes, it’s typically a database upgrade.
>> AMBER: I think they would be able to write a script that would run. I mean, it’s just those two pages, right? So they could run through and look and just change the tag on those two? But I bet they’re not going to, which probably means that until they roll out this fix to their templates, anyone who has built a site is going to have no skip links and no main tag on their product single, and on the archive, like, the main shop page. And it’s literally in full site editor. It’s a little dropdown. it’s not hard to fix. It was very easy for me to do myself. But it is an oversight by the person at WooCommerce who built that block template and then saved the the template JSON to WooCommerce, right? And it almost didn’t fly for me.
I missed it when I was testing on the shop page. But when I went to the product single and I was going through, I was, like, “Wait a minute, why are there no skip links?” So then I had to dig into 2024 and try and figure out what’s triggering the skip links. And I was, like, “Oh, it’s just looking for a main tags.” So then I was, like, “Wait, there’s no main tags?” So then I went back and I checked all the WooCommerce things.
So to me, it highlighted why you really need to test every unique page type or template, right? Because I had tested the skip links on the homepage, so I just assumed they worked everywhere. And that was a mistake on my end, although I did discover it once I got to the single. It wasn’t after we launched.
Also, thinking about whoever built that block, like, it’s a simple thing that they forgot to do. Toggle, change the HTML element in the dropdown in the settings. But it is a major thing. And then I guess they never tested it, and no one else tested it. They were all just, like, “These blocks look good. OK,” right?
>> STEVE: Yes, you’re probably right. It’s probably not going to update. I haven’t seen that as the practice, going backwards and fixing things, because I really think they could run into all kinds of issues.
What if you started targeting those elements with CSS or JavaScript, and then they changed them and it breaks about millions of websites, right?
>> AMBER: So what I did was I edited the current group block and changed the container to main. Another valid solution is they could have added a different group block around that one and made that one main, and left that one exactly the way it was. And so then if they went to fix theirs, that person would have two main tags. So probably they can’t fix it.
>> STEVE: Yes. You’re probably right.
>> AMBER: Now, in an ideal world, they would notify all their users or like programmatically figure out, “Is this person running a full site editing theme?” And then they would alert them and be, like, “You have a problem on your website.”
It’s a WCAG Violation. On Accessibility for Ontarians with Disabilities Act violation, it would be considered a European Accessibility Act violation. I don’t know how many government websites have that, but Section 508, ADA, like all that. So it really does need to be fixed. And it seems like, to me, they ought to disclose things like that, and tell people, “Here’s how you can fix it.”
>> STEVE: Yes.
>> CHRIS: Yes.
>> STEVE: Very good. Just to jump back to the menus for a second on the full site editing. I admittedly have not played around with the global elements that much. I did a while ago when it was in beta and was not satisfied.
>> AMBER: And abandoned ship, quickly?
>> STEVE: And abandoned ship. And I’m, like, “The way I’m doing it works.” And we make nasty mega menus that have to be accessible, so it’s not really applicable in our workflow currently.
So if I’m editing a navigation menu, how in the world do I get out of it? I’m inside of the menu and it shows I’m in [inaudible] navigation. It says “my account.” So that’s the link I’m on, right? [crosstalk ]?
>> AMBER: Well, if you click the little WordPress icon in the top-left corner, that’s it open the sidebar. The left sidebar. The menu to go back.
>> STEVE: Is that the only way to go back?
>> AMBER: I think so.
>> STEVE: Are you kidding me? [laughs]
>> AMBER: There’s stuff about it that is just not intuitive, and there’s no instructions so you just have to figure it out.
I tried Googling one or two things and I couldn’t find… Like the icon thing. How do I put icons in there? I couldn’t even find any questions and answers, like, on Stack Overflow or anything about that, right? Because it hasn’t been around that long.
>> STEVE: Yes. Wow. That’s some strange UI, that the WordPress icon mark is the only way to go back.
>> AMBER: Yes. It seems like there should be a text label there or something.
>> STEVE: That is really odd.
>> AMBER: Yes.
>> STEVE: Oh my goodness. And don’t even try to tab around and decide this thing. [laughs]
>> AMBER: It’s in full site editor. Yes, not on the front-end. The front-end of ours will work just fine. Thank you.
>> STEVE: Yes, yes. [chuckles]
>> AMBER: I have opened a couple of issues for 2024 as well. Most of the issues I found are WooCommerce related. For example, I didn’t use this block, but there’s a pattern which I shared on Twitter, the FAQ pattern which uses the details block, and it has four of them stacked like accordions, which is not the way to build it.
Accordions are not accessible. I opened an issue, and I think that block needs to be completely removed from 2024. I don’t think we should be encouraging users to build sites that way.
>> CHRIS: So are there other areas where, in terms of accessibility, this is less than perfect? And what have we decided to do about that?
>> AMBER: Yes. So we have a custom accessibility statement page on the website, and here’s what’s hard about this.
I’ve been debating, and maybe Steve, we can chat about some of these. Initially, I set out. I was building this and I was, like, I want to do this low-code or as close to no code that I possibly can. I’ve always had this goal, right? This was way back when I built our podcast website with Elementor, and I was, like, “I want to prove that you don’t have to be a really experienced developer to do this.”
So I’ve been trying not to write a ton of code. I even didn’t really write much CSS. I did fix a few things with CSS, like focus outlines and some other things, some color contrast, and one or two things.
What I’ve been doing so far is, every time I encounter something, I’m opening a GitHub issue for WooCommerce. And in our accessibility statement, you can find a list for those.
So anyone who’s interested and wants to know, I have a list of every issue that I have found, and it’s linked over to the GitHub repo for WooCommerce where the issue is posted, if people want to follow along with those.
That’s how I’ve approached it. I don’t know how you all feel about that. So far, I haven’t found anything that’s a total blocker. And so I’m, like, maybe that’s OK, and we can wait and see if WooCommerce fixes it, but I don’t know. Maybe we’re going to encounter certain things where we just have to fix it.
Do you guys have thoughts about that?
>> STEVE: Yes. Ideally, fixing the problem at the source is the future solution. I know with our clients, a lot of times, we have to step in front of that and we have to come up with some solution ourselves, right?
This is for plugin developers out there: Sometimes the option is that we don’t use that plugin. Or it has to be a plugin that’s not allowed to be used in our arsenal because it just doesn’t follow accessibility, and there has been no effort to add it.
Like Amber said with that table block, right? She put in a request for an accessibility fix, and they fixed it that day. Is that what you said? Like, right away?
>> AMBER: Yes.
>> STEVE: But sometimes we have to work on some kind of patch ourselves, right? Like, We have to fix it.
For instance, the mini-cart. You tab to the mini-cart, you open it up, you tab through it. It locks focus, which is nice, right? But when you hit the “close” icon, the focus, for me, it turns back to my browser toolbar.
>> AMBER: Yes, it totally takes you out of the page.
>> STEVE: Yes, it’s just restarting. And it doesn’t return focus back to what initiated that modal, which is the cart icon.
>> AMBER: In the nav or in the header?
>> STEVE: Yes. So if this was a client, and we needed to make sure it was accessible, we would have to write our own little piece of JavaScript that catches when that button’s clicked, and then it grabs the focus and returns it to the right place, right?
Although that’s outside of the plugin. That’s our own little hack. It works for us. But long term, I don’t think it’s the best solution.
>> AMBER: Yes.
>> CHRIS: Well, if it’s technical, that has to be serviced in perpetuity until the actual developer of the main software goes in and fixes the problem. And if at any point, they release an update, it could break that JavaScript, in theory.
>> STEVE: Or our JavaScript could break their fix, right? Or it can nullify their fix. So they both could conflict in some way.
>> AMBER: Yes. That was one that I was going to ask you. How hard would it be for you to… This is Steve’s fun when I’m, like, “Steve, can you write me a JavaScript [inaudible] for this?”
[laughter]
Is that hard to fix something like that?
>> STEVE: I don’t believe so. I’m inspecting the page right now. No, I don’t believe so. I think I can add another on-click handler to that “close” button.
I could look into the WooCommerce documentation, too, to see if there’s hooks. If they have a hook or an action that happens when you close that button that’s available to me, I can hook into that and use it. And ideally, that would be the best way to go, because I probably would not conflict with an update that they would get. But no, I don’t believe so. I think we could write something to patch this, like, our own little JavaScript hack. I don’t think it would be too difficult.
>> AMBER: Yes. Like, that one, knowing that a lot of people are going to use that cart, that is probably the closest thing I found so far that seems like a blocker.
The other thing that was sort of problematic, which you see if you go into the products and you set variations, then it pops up a “clear” link, which actually should be a button. This Accessibility Checker flags, because it’s like a hashtag link, right? So we flag it as improper use of link. That’s another one that could be a problem.
There are some other things I found that I could work around. For example, the main product gallery image on the product single includes a title attribute, but I could just resolve that by deleting all the titles [laughs] in the meantime, right?
Sometimes, there’s little workarounds that you could do without a developer. So then it would be an empty title attribute.
>> STEVE: Yes, that “clear variations” link, which should be a button, I think that it exists on the page. It’s not being added to the page. It’s not being added to the DOM after the fact. So even if it’s not there, it’s there.
>> AMBER: Yes, which is why we can still see it when we scan.
>> STEVE: Oh, yes, yes, yes, yes. So I’m pretty sure we could just switch that from a link to a button. As long as WooCommerce is not targeting that A tag directly. As long as they’re targeting the class or some other attribute, right? But if they target just the actual link in some fashion, maybe off of a parent element, right? If it’s a parent element selector and then A, that could be problematic if I switch that from a link to a button, like, with my own [crosstalk ].
>> AMBER: So is a better fix in that scenario to do role equals button? And then also write the JavaScript for the spacebar handler?
>> STEVE: Probably. Yes. That’s a good solution.
>> AMBER: It’s a safer fix?
>> STEVE: Yes, I think so.
>> AMBER: Yes.
>> CHRIS: So I know we’re going to have a meetup about this where we present about it more. There’s probably going to be another podcast episode about it, too. But kind of in this early foray into talking about this project, do you have any big takeaways or biggest piece of advice for anybody else that’s attempting to do low-code accessible WooCommerce?
>> AMBER: What I’m going to say is, of course, you have to test. We preach that on almost every podcast episode, right?
>> STEVE: Yes.
>> CHRIS: Yes.
>> AMBER: So for example, I almost missed the missing skip link. So look for it on more than one place.
>> STEVE: Oh, than just the homepage?
>> AMBER: Yes. I only tested it on the homepage, and I didn’t test it…
>> STEVE: I mean, that’s a great note.
If I’m just like checking somebody’s site because I’m being nosy or something, I’ll just pull up the homepage and be, like, “They don’t have…,” right? That’s a good point. You got to check every page.
>> AMBER: And the most important ones, right? And arguably, on this, the shop archive is probably more important than the homepage. The homepage doesn’t have much content on it.
>> STEVE: Yes.
>> AMBER: I’m not totally done with my testing. I have found issues. So right now, the answer, if you need a 100% accessible, compliant thing, even if you use core WordPress 2024 and just WooCommerce with pretty much no add-ons, it will not be 100 percent accessible.
>> STEVE: Right.
>> AMBER: It’s going to have to be fixed. I’m going to have a great little list for people if they want to know.
I think that you can get close to low-code, but I don’t think you can be no-code. And it may require JavaScript skills. So if you don’t have them, then you would probably need to bring in a developer to fix some things for you.
>> STEVE: I think even with what you covered with the ARIA labels on the nav menus, where that is actually there, although all be at buried, right? But out of the box, it’s not necessarily set right, right?
>> AMBER: Yes.
[crosstalk ]
Although, I don’t know why the primary one in the header wasn’t labeled primary.
>> STEVE: Yes.
>> AMBER: But it makes sense that the ones in the footer, they didn’t label, because they didn’t know how people were going to use them. And if someone doesn’t change it, and they put “about” pages, but it’s actually blog post categories, I don’t know, that’s a problem, too?
>> STEVE: Yes.
>> AMBER: And I will fully admit this, I haven’t dug all the way into full site editing documentation. But I will say that within the WordPress installation process, there is not enough documentation or guidance for users that exist in the editor.
>> STEVE: Yes, yes. Because most people aren’t going to go to the documentation. They’re going to start playing around with it. Just like I did a few minutes ago, and I’m, like, you know…
>> AMBER: “How do I get out of this?”
>> STEVE: I’m a developer. I use this stuff all day long, and I couldn’t figure out how to get back.
>> AMBER: Well, when UIs change, it really can cause problems for almost every user. It doesn’t matter if you’re super technical, not technical at all. If you’ve been used to a certain user interface and that user interface radically changes, there is a learning curve. And I think that’s something that any creator of a content management system or any user interface or app needs to consider before they make major changes.
I’m a little nervous. We got a tangent for just a second about the whole admin is about to be redesigned?
>> STEVE: Yes. That was going to be my question. Is the admin redesign going to bring it into alignment with what we’re seeing on the full site editing side? Is that what you think?
>> AMBER: Maybe. I know they have some design out there. I haven’t dug into them yet. I think they’re trying to more modernize it and at least make it match the way the block editor looks in Gutenberg.
It’s so hard because I’ve thought about it. I’m, like, “Yes, I get it. It does look dated.” A lot of our screens just use core WordPress, and we are probably going to get to a point where we rebuild them so that they can look nicer [chuckles] than core WordPress. So I totally get it, but I also am just, like, “But it’s not broken.”
>> STEVE: Yes.
>> AMBER: And all of us know how it works, and what it looks like, and where to find things.
>> STEVE: We don’t determine the priorities of WordPress, right?
>> AMBER: But you could.
>> STEVE: You could. I mean, you can try to influence it, but it’s not that easy. It’s weird when the priority is a visual refresh, over like some serious issues that have been sitting out there for a long time, you know.
>> AMBER: Yes. Going back to that FAQ pattern, I totally understand why whomever designed that website was, like, “Let’s use this block to try and fake accordions.” Because almost every website these days has accordions on it, and there isn’t an accordion block in core. And when they build core themes, they’re not allowed to use non-core blocks. But there’s this race of, “We’re trying to get ahead of where it is,” but not always doing things in the right order. And then people sometimes try to come up with workarounds that can cause issues that are way bigger.
I’ve seen client websites where they have 50 different FAQs on a page. In that details block, the biggest problem is there’s no headings. So how would anyone find the question that they needed an answer to, right?
>> STEVE: Yes.
>> AMBER: But we’re trying to force that, but it’s, like, maybe somebody should just go build an accordion blocks first.
>> STEVE: But they got to build it correctly. It’s like with the core table block. It really just needs to be scrapped, and a new one made. The whole thing needs to be deprecated, and a new one created. So I don’t know.
>> AMBER: Yes.
>> CHRIS: As we’re getting close to time here, I want to wrap us up with kind of a fun question. Now that we’ve all had a chance to look at this store, the three of us, what product is number one on your shopping list? Or which one do you want the most?
Me personally, “Accessibility Craft Podcast” T-shirt, 100%, is where I’m at.
>> STEVE: I thought the pint glass was pretty cool.
>> CHRIS: Yes.
>> AMBER: Yes. I definitely think we all need pint glasses that we can drink out of when we’re doing our recordings.
All of these have different colors, which you can’t tell yet, which is part of why I’m trying to figure out the swatch thing. Because I’m hoping on the main archive, I can have little dots that indicate things have different colors. But I have the… It’s a like a baseball. It’s called a raglan [phonetic]?
>> STEVE: Yes, yes.
>> AMBER: But it’s like a baseball style “Accessibility Craft” T-shirt with green sleeves. And I’m totally ordering that for myself. I want that one.
>> STEVE: I thought that one was pretty cool.
>> AMBER: I made the original version of the “Make WordPress Accessibility” T-shirt. I have a light mode, which has a couple of different colors that are all light with black text. And I have a dark mode, which has a couple of different colors, like black and dark gray, maybe, like, a dark blue with white text. And I can guarantee you, “Make WordPress Accessible” dark mode T-shirt is going to sell the best.
>> STEVE: Yes. Because I have the light mode one. And I’m digging this dark mode one. I like dark mode everything.
>> AMBER: So you got to have dark mode T-shirt too?
>> STEVE: That’s right. Do I get an employee discount on this? You got a coupon code for [laughter]…
>> AMBER: I’m going to go make a real order as I’m doing my testing, because I also just want to really make sure. Because I don’t know how it’s going to work with Printful. We haven’t had a client use this, ever.
So I’m going to go submit one real order, but I need to check. I think we might be able to log in to Printful and make purchases without [inaudible].
>> CHRIS: The markup? Yes.
>> AMBER: Maybe it’s a company [inaudible].
How does that work? If we pay for it with a company card, or this?
>> STEVE: Yes, it doesn’t make sense, does it?
>> CHRIS: No.
>> AMBER: Yes. Is that revenue?
[laughter]
Or an expense?
>> STEVE: No.
>> AMBER: Or what is it? I don’t even know.
>> CHRIS: Yes.
>> STEVE: Yes, correct. [laughs]
>> CHRIS: Correct.
>> AMBER: Yes.
>> CHRIS: [inaudible]. Yes.
[laughter]
>> AMBER: I’m really excited to launch a shop. Everybody, go check it out. Let us know what you think. I have a lot of other ideas for T-shirts and fun things kicking around. I just did the easy stuff to start with because I really wanted to focus on building the website, not designing a bunch of T-shirt. But I have a lot of ideas, so it’ll be fun.
Also, stay tuned because there’s going to be more where we’re going to follow up on WooCommerce accessibility in a couple of future episodes.
>> STEVE: Cool.
>> CHRIS: All right. See you all later. Thanks for joining us.
>> STEVE: Yes. See you guys.
>> AMBER: Bye.
>> CHRIS: Bye.
>> SPEAKER 1: 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 help make thousands of WordPress websites more accessible at “EqualizeDigital.com.”