In this episode, we discuss how we went about designing and building a new, accessible portal for Equalize Digital’s customers, the reasons why we did it, and our takeaways now that the new portal has launched.
Listen
Watch
Mentioned in this Episode
Transcript
Chris: Welcome to the Accessibility Craft podcast, where we explore the art of creating accessible websites while trying out interesting craft beverages. This podcast is brought to you by the team at Equalize Digital, a WordPress accessibility company, and the proud creators of the Accessibility Checker plugin.
And now, on to the show.
Amber: Hello everybody, it’s Amber, and I’m here today with Chris.
Chris: Hello everyone.
Amber: And Steve.
Oh, I can’t hear you, Steve.
Steve: Hello everyone. I’m here, unmuted.
Amber: There we go. Yeah. And we are gonna talk about some work we’ve been doing for ourselves lately. Last week, a week ago from when we are recording this episode, we launched a new My.EqualizeDigital.com website, which is our customer portal, if you will.
And so we’re going to talk about that on today’s episode, which I think is exciting. But before we dive in, of course, we’re going to have a beverage and I want to remind everyone that if you want to get full show notes and a transcript for this episode, you can access those if you go to AccessibilityCraft.com/084 Chris, what are we drinking today?
Today’s Beverage
Chris: The trolling continues in the drink department with Este Vinho Verde, which comes in a can, a cute little tall skinny can that I’m holding up to the mic here. So, this is a Vinho Verde, which is a light bodied white wine, and it should be nice and acidic and refreshing.
And based on some of the information I was reading about this, it should be just a little bit bubbly, just a hint of bubbles. It should be dry and not sweet. And it is from Portugal.
Amber: And it is wine in a can, which is either going to be really great or just horrible, I mean I don’t know. Does it count as a craft beverage if it’s in a can instead of being a bottle of wine?
Chris: I don’t know.
Steve: Yeah.
Chris: I don’t know. This is, we’ve, we’ve gone a step beyond the controversy of the of the early 2000s and the 90s where there was the cork versus screw top debate, which is maybe still an ongoing debate. I don’t know. But now we’re into the can versus bottle debate. Maybe they’re, they’re pushing the envelope even further in the wine, in the wine territory these days. I’m going to crack mine open here and see, see what this is all about. This will be the first time I have ever personally had wine in a can.
Amber: I mean, but we’ve all had box wines that our moms buy, right?
Steve: Just sneak a little bit.
Amber: I am a mom. But for the record, everyone listening to or watching this podcast, I do not drink wine out of a box. I’m just telling you right now.
Steve: She drinks wine, just not out of a box.
Amber: No, usually out of a glass, not a can.
Chris: Yeah, it smells crisp and clean. Smells like white wine. No, no, nothing super notable on the nose for me, but you know, it’s been in a can and hasn’t been allowed to breathe at all. That’s the other thing I was like, I was like, I was wondering, I was debating whether I should pour this in a glass or not. And I ultimately decided not to because this is apparently intended to be consumed from a can. So it being in a can, I’m not getting a lot on the nose, I will say.
Amber: No, it’s very, very subtle. There was a, so way back in the day when we were doing a lot of marketing with our old marketing agency for food brands, there was a, a brand of canned wine, which doesn’t exist anymore. But I thought that their marketing was amazing. Clearly it wasn’t amazing enough or, or it outshined their product. Maybe, maybe that’s what it is. Because they don’t exist anymore, but they had a lot of like videos and stuff of people like going camping or hiking, right. And like carrying the wine and sitting around the campfire with a can of wine, you know, so it’s like portable.
Steve: Yeah, there you go.
Amber: You guys have tried it. What do you think while I try mine?
Chris: Very tart, but I will say like, like it’s not unpleasantly tart, at least to my palate. The bubbles are definitely there. They’re subtle. But it’s, it’s definitely very tart, very acidic. The, the tasting notes that I got, got for this: They said dry, light lemon, lime, citrus, and green apple, some bubbles, great summer wine. And that was one of the reasons I picked it, but I will say, I, I, this is, I went into this with low expectations because it’s wine in a, in a can, and it has exceeded my low expectations. I’ll put it that way. Like…
Steve: It, the first, the first drink does hit you kind of, kind of hard, but after the first drink, it, it, it seems to calm down a little bit.
Amber: It’s kind of tinny to me. Is it tinny to you? Like the taste?
Steve: Metal?
Amber: Yeah. Metallicy.
Chris: Maybe.
I mean, you’re definitely, you definitely have a lot more surface area of the wine being exposed to metal inside of a can. A lot of white wines, you know, because there’s like, there’s two kind of main categories of white wine, if you want to call it that, where it’s like you have the ones that are oaked, versus the ones that are unoaked. So stored in wood versus not stored in wood when they’re fermented. And the ones that aren’t stored in wood are typically stored in stainless steel tanks, and that’s where they’re fermented. So there’s no exposure to wood. And so the wine will be exposed to metal no matter what, but maybe the fact that this is, you know, a small amount of wine in a tiny can, there’s a lot, there’s a lot larger of a ratio of wine to metal versus a giant, you know, 2000 gallon steel drum, right?
Steve: This is likely lined. I mean, all cans are lined with like a plastic, right?
Chris: One would hope. I hope I’m not drinking aluminum residue or something.
Amber: I mean, hopefully it’s not BPA. Do they line cans with that in Europe? Probably not, actually. We do worse things to our food and beverages here in America than they do in Europe.
So
Steve: I don’t know.
Amber: I’m on the fence about it being like Slightly effervescent, like the, I really like sparkling wine, like Prosecco and Champagne. I mean, who doesn’t like that, right? This is like, It feels kind of a little bit bubbly in your mouth, but not really. And in a way that it almost feels like a mistake.
Do you know what I’m saying? Cause I don’t think, like, I think of regular wine as not like, it’s, it’s not bubbly at all. It’s flat. I don’t know.
Steve: Well, well, like it’s not, well, regular wine is not flat. It’s just like, there’s not none in there at all. But like this, this feels a little flat because it has a little.
But it just doesn’t, the bubbles just don’t kick much, you know, like.
Amber: So, so, so this, this, let’s see. So we have a, I let, I give them points for the label. I like the label. It’s kind of a watercolor-y rooster. There’s some info on the back of the can that it says the rotating rooster is a weather vane that combines a rooster figure and a compass rose that driven by the wind indicates the direction of the incident wind and was an object present in many Portuguese houses and churches. So I think this is like a symbol that would be familiar to people from Portugal and they’re telling us it’s about halfway fruity, halfway acidic. It only has two out of five wine glasses for body and two out of five for alcohol, but.
Chris: I would, I would say, I would say this wine is highly acidic.
Not, not like, not, not vinegar, not vinegar level. I think to me that would be five glasses on their rating scale of one to five, but I would say this is definitely a four and not a, not a three in my book. I appreciate it.
Steve: You think it’s the fruits doing that? Like…
Chris: It’s just the, I think it’s the Vinho Verde grape. So I remember learning about this grape Vinho Verde is a it is one, it has a reputation for being one of the lightest bodied kind of crispest white wines. It’s very distinct for that. And it’s, it’s a wine that is known to be like most predominantly produced or being from Portugal.
And wine snobs may know more about this, or there may be slight inaccuracies in what I just said, because I’m trying to remember stuff from 10 years ago. But generally speaking, I associate personally Vinho Verde with Portugal and with being very light bodied and, you know, high acid in that, that like citrus green apple, like that’s very classic Vinho Verde.
The slight effervescence to me is a little bit, like off base for what I would expect. I, most of the Vinho Verdes I remember tasting were still, they weren’t sparkling but they always recommend pairing it with like shellfish or seafood, right? If you think about Portugal and where it’s located being a long strip of coastal space they , I mean, I think it’s I think I remember always recommending people pair it with like seafood or shrimp or things like that when I worked in wine back in the day.
Amber: Do you guys think it’s bitter? Like, I keep thinking about that. I don’t get a green apple flavor. I kind of get a citrus, but it’s almost like a citrus peel.
Chris: Yeah, there’s, there’s some like astringency, going on there, some, some bitterness. I would also say like, if you think about the, and this is going to sound weird, but if you think about like the smell of wet gravel after a rain, like that minerally, like taste slash scent, I get a little bit of that in there.
Like it’s minerally. And that might be
Amber: He’s really selling this beverage right now, Steve.
Chris: Rocky soil.
Steve: There’s definitely something in, in it, like, in like the aftertaste or something that is unpleasant. I’m not sure exactly what it is, but like…
Amber: Yeah, are we ready to give this one a verdict?
Chris: Yeah. I’m kind of, teetering towards a down, but I’m kind of in the middle, personally.
Amber: Where are you, Steve?
Steve: I mean, after some of those wines that we had in Italy for WordCamp EU, like, I’m going to go down cause those were like amazing.
Amber: Honestly, I’m with you. I give it a thumbs down. I would not buy it again. I think that we get. Better wine off the shelf from Texas wineries. And that’s saying something.
That said, I will probably continue to drink it. We’ve had beverages that I’ve literally sat to the side and not drank. So, you know, it’s not, it’s not zero stars, but it’s just not like, eh, I don’t know that I’d buy it again. Even with the convenience of you can stick it in your backpack and take it on a hike.
You know, I don’t know.
Chris: Yeah. I don’t know if I would want to drink this after it’s been baking inside of a backpack on a hike. I think, I think the, I think what is saving this for me, at least partially is that it’s cold and my office gets hot when we record.
The New My.EqualizeDigital.com
Chris: I don’t know, but we’re we’ve probably spoken enough about Este Vinho Verde and we’re, what we’re really here to talk about is the new My.EqualizeDigital.Com website, which is a new accessible customer portal that our team has been building diligently in the background for the last couple of months. And we’ve put that together to be FSE compatible. We’re using easy digital downloads and Affiliate WP on that. And where I’d like to begin, because I kind of, I didn’t do a lot on this, so I get to be the interviewer this time is Amber and Steve, whoever wants to answer first, what is the background on the My.EqualizeDigital.com website? How did that come to be? And why did we create it initially? So not this new version, but like thinking back, like why does this My.EqualizeDigital.Com website exist in the first place?
Amber: Yeah, I can take that one and also talk about why I advocated so hard for rebuilding it as part of that.
But My.EqualizeDigital.com is the website, which is, it is a sub site of a multi site, so we have a WordPress multi site and that is the sub site that we use where we sell. products. We originally discussed when we were first building our site, whether it made sense to build our, or sorry, sell our products through our main dot com. And we ended up deciding that there might be the need for there to be a different theme. There wasn’t really in the beginning.
It sort of looked like it, but it was the same theme with a whole bunch of customizer garbage that I take full responsibility for. And, and actually, originally, it wasn’t part of a multi site either.
It was a separate install that the subdomain pointed at, and it was Products.EqualizeDigital.Com. We’ve gone through some iterations here on what is the best way to get people in and sell them. We ended up migrating it in and converting to a multi site because of complexities with, using Affiliate WP in order to track conversions across different installs and different subdomains was really challenging. So, we made that switch, what do you think, Steve? Like two years ago to a multi site?
Steve: Long time ago. I don’t remember two or three years ago.
Amber: And at that time we also changed the subdomain, which was extra fun for you because our plugin licenses were looking at the old one. So we had to maintain the old one, but not allow people to log into it for some amount of time until everyone had updated. To start looking out to the new one.
Steve: To some degree, right? Because like that required them to update their plugin. And, and, you know, if somebody was running a really old version and we kept it up for a long time, didn’t we? I mean, like several months.
Amber: Like more than a year, I think.
Steve: Oh yeah. That long. Yeah.
Just because we wanted to give a current paid users time to upgrade their plugin so they would have access to the, to the current API. I mean, we could have done some fancy redirects maybe, I don’t know, but it worked. We didn’t have any, any complaints or any support or anything like that.
Amber: I, I wanted it to be a separate site from our main site because mostly from a management perspective, like I mentioned the different theme, but also on the backend, our main site has many custom post types already. It has a lot of data. And I think even in the long run, who knows if we ever decide that we’re going to sell a different way, like, heaven forbid we decide we want to take on our own payment gateway creation or something like that. We might not even have it be part of the multi site and, and have licensing run off a different server because certainly there’s server implications of sharing our marketing website server with our license keys server, which is a whole nother conversation that doesn’t relate to rebuilding this.
But, but for now that’s, that’s what it is. It’s a sub site where if you make a purchase or you sign up as an affiliate, you actually get a user created there instead of on the main Equalize Digital website.
Chris: So we decided to rebuild the site this time around because we thought it’d be fun and we had lots of free time, right?
Steve: No.
Chris: I’m kidding. So why did we redesign it really? What outcomes were we going for with this latest iteration?
Why We Built It
Amber: So let’s be real and let’s talk timeline. I knew in January of 2023 that I wanted to rebuild both My.EqualizeDigital.Com and EqualizeDigital. com and between everything we do for clients, and that we brought in a plugin developer to work full time in 2023.
And so there was an increased demand on me to create designs or partner with Steve to provide direction to that plugin developer. I didn’t get started with designs even until last August, and we did designs for My.EqualizeDigital.com then. And then we went to WordCamp US, right? All these things.
So then I think they were finalized in October, but then I don’t think we started building it until January. The, the primary reason why I advocated for rebuilding it was twofold. One is that we use Hotjar on our website, which is a tool that you can use to record user interactions. And, I was watching people bounce off our checkout page.
We were using the oldest version of Easy Digital Downloads checkout that you could possibly have. It wasn’t really optimized. It didn’t look like a trustworthy checkout. I wish I had a screenshot that I could just put up and share. I was digging around trying to see if I could find one, but I couldn’t.
But it, it was just like a single column field stacked. And we sent both our free users and our paid users to this. So I watched in Hotjar free users bounce all the time because they’re like, why do I have to give you all this information? I didn’t want to do it. So that was the first thing I was like, we need better checkout flows.
But then also I just wanted. I wanted something that actually looked like a portal and looked nice on the inside and didn’t have the exact same header and footer as our public website. And there’s a lot of things foundationally that we’re preparing for potentially adding an LMS and being able to have courses.
We’ve also talked about allowing people to view the accessibility status of multiple websites, with Accessibility Checker in the site. So we really needed to have a better platform to support that. And that was why I advocated for redesigning and rebuilding it. And I don’t know if you have thoughts, Steve, on some of the outcomes, once you got those designs that you were hoping to achieve from a dev perspective, as far as like, Any code improvements that we, you were hoping to make at the same time or anything like that?
Steve: Yeah. Yeah. I mean, the technical stuff, I mean, maybe, maybe I could step back a little bit and, and kind of, we could talk about that timeline a little bit and priority. Because that was definitely a real challenge for all of us. And yeah, we had brought on, and we more developers and we’d had some, some developer change over here and there, which kind of threw a wrench into it, to this a couple of times but like deciding, you know, what would be it being. a lean team, the way we are deciding to do one thing is, is deciding not to do another thing, right? So that was, from my perspective, that was a very difficult pivot to make because we had been making pretty good progress on our, our plugin.
Amber: We had to pause plugin development for a time in order to make this site happen.
Steve: Yeah. We started with the, with the. One of our web developers and and then, and then that, and then it transitioned back over to, to me and I did a little bit and then we brought in our, one of our plugin developers to kind of help push this over the line. And so yeah, so it was a trade off for, you know, some release, you know, a couple release cycles got missed on the plugin so that we could focus on this.
So that was definitely the hardest for me. And I think I actually, I actually probably kicked the can down the road for several months, you know, with that argument. And…
Amber: I know, I think we might’ve had a few meetings when I was like, I’m like, I have designs.
Steve: And Amber, Amber is very persistent. So…
Amber: Well, maybe at the end, after we talk about all this, we can talk about what the results were. And you can tell us, don’t tell us now. You can tell us whether you think it was a good investment of time or not.
Steve: Well, I mean, I can tell you this when I initially like, so I’m a little ashamed to admit this because I was so focused on the plugin side and some of our services side of the company that when we initially made this, this website, I wasn’t involved in it all that much.
Amber: Our old website, you mean?
Steve: Yeah. The, the old my, my dot website or what would we call it? Product products dot. Yeah. So when that was initially built to support the plugin, when we released it in late 2020 or early 2021 Amber and another one, one of our website developers worked to put this together while I was doing the finishing touches on, on the plugin.
So it was kind of a team effort to get this, this plugin out. Right. And we were pushing hard. So, I actually had not had a really good picture in my mind or really run through the user flow of the checkout process. And when I did, like when I started comparing it and I was like, okay, yeah, this is not good.
I mean, it was like when you’re going to get a free product, it, it, it’s, it’s weird to always get thrown into a shopping cart that is like a $0 purchase. Right. And it’s asking you all the same information that it would if, if I was buying besides, you know, my credit card number and stuff. So, definitely like it was, that was eye opening to me.
I was like, yeah, this is definitely a problem. And it didn’t convey like that. It was kind of EDD out of the box. And that doesn’t really convey like, you know, you know, authority or like, it doesn’t look super great, like design wise.
Amber: It doesn’t make us look trustworthy, like what impression, that’s an interesting thing, right?
Because that checkout page, Is one of the first impressions that people have about the quality of the things you code.
Steve: Right.
Amber: So what does that say about your software? If your checkout page looks really bad or is broken.
Chris: I mean, fortunately for us, there’s so much other stuff that we do in the community that puts us in front of people as a trustworthy resource that I think we were kind of able to make up that difference a little bit for a while, but it is really good that we have gone back and address this. And before we get to the next question, I think we need to take a short commercial break.
Amber: All right, let’s do it.
Brought to you by Accessibility Checker
Steve: This episode of Accessibility Craft is sponsored by Equalize Digital Accessibility Checker, the WordPress plugin that helps you find accessibility problems before you hit publish.
Thousands of businesses, non profits, universities, and government agencies around the world trust Accessibility Checker to help their teams find, fix, and prevent accessibility problems on an ongoing basis. New to accessibility? Equalize Digital Accessibility Checker is here to teach you every step of the way.
Whether you’re a content creator or a developer, our detailed documentation guides you through fixing accessibility issues. Never lose track of accessibility again with real time scans each time you save. Powerful reports inside the WordPress dashboard, and a front end view to help you track down hard to find issues.
Scan unlimited posts and pages with Accessibility Checker Free. Upgrade to Accessibility Checker Pro to scan your website in bulk, whether it has 10 pages or 10, 000. Download Accessibility Checker today at EqualizeDigital.com/Accessibility-Checker use coupon code AccessibilityCraft to save 10% on any plan.
Chris: And we are back.
Steve: And we’re back!
The Design Process
Chris: So we took a a different path when, putting this portal together compared to what we typically do for customers. And I’m wondering if you all can tell our listeners about the design process this time around, how it was different and kind of why we chose to do what we did vis a vis the, the actual like visual design of the portal.
Amber: Well, wait a minute. We did something different than what we did for customers?
Chris: We used a certain set of styles. We used a certain set of styles that we, we have not used previously.
Amber: Oh, I see what you’re saying. I was going to be like, I’m going to ask you a question. What did we do that was different?
Okay. I, I get what you’re, you’re getting at here. So when you’re doing things for yourself and you’re trying to speed time, right? And also, one of the things I love about designing for us is that I can just go back and forth with Jacob, our designer, and it gets done so much faster because there’s no like three to, I don’t know, twenty other people that have opinions on the designs, right?
But one of the things that we had decided early on was that we were going to use styles similar to Tailwind, whether or not we actually decided to implement Tailwind, which I don’t think we did. Did, did we, Steve?
Steve: No, no. I can tell you why.
Chris: Oh, I think, I think we should, I think we should get into that. That would be interesting.
Steve: Well, so, so Tailwinds is great for if you’re building a, you know, a custom application, right? If you’re building like a, a Vue or a React app, right? Where you have full control of the output of the markup. When it comes to WordPress and when you’re utilizing plugins like EDD or Affiliate WP, or Gravity Forms you don’t really have control to all the, the source code markup elements to add the, the Tailwind classes that need to be applied to, to those elements. So…
Amber: So it doesn’t save you time?
Steve: No, not really. I mean, like, I guess in some sense you could use some kind of hack way, hack way around with extends and stuff like that, but even that would, would be fairly difficult.
Like so, so we’re, I think it sped us up with the design by kind of giving us some restraints to work within from a design standpoint, which I think is good. And, and, and when we came up with I, there were a couple iterations that we went through and Amber, you know, like, tables, right? So like Affiliate WP and EDD use a lot of tables.
And they, they, they both have their own ways of styling tables. And I hate to admit it, even within the same plugin or the same plugin sets, right, EDD is like a set of plugins. There’d be different ways to style a table in the, the core EDD plugin than like one of the add ons. Right? So, so, and so Amber basically just pulled up Tailwinds and said, here, just make the default styles look like this.
Right? So we didn’t even have to go to a designer.
Amber: Yeah, so, yeah, so what we did have our designer do, our in house designer, was we did the shell. That’s kind of what I call the, the thing, so the header and we have a left side navigation and I don’t know if you want to pull any of this up or maybe…
Steve: We can show it.
Amber: Yeah let’s see I’ll figure out how to do that. We’ve never screen shared on this thing before, but here we go. So, so we have the, a left side navigation, a header that has breadcrumbs and it has a user menu on it. And, and so basically that L, upside down L, I don’t know, across the top is what we designed.
And then. We had Figma files for that and we had hover states, focus states. There’s a lot with like, if you go under billing, maybe that that’s drop down is actually a button. It’s not a link. And then there’s styles for different things in, on pages inside that for the current and active that. So we did all of the sort of design that we needed to do for that part. And the part in the middle, I mostly said, I don’t think we need to design these because we’re just going to sort of copy some Tailwind styles and our devs could just go look at it on the Tailwind side. So that’s what you were talking about with you know, some of the tables and, and then all of this.
I did in the block editor. So like we’re seeing sections that have one pixel gray border with rounded corners around each section and columns, and that’s using a group block. And there I made a lot of use of like the grid classes and, Steve’s opening that and you know, there’s a lot here with where we’re using WP Fusion is another plugin that we use and we use it to show and hide different things based on tags that people have on their account so they get the right kind of content on this page.
But I didn’t, it’s something that I knew and I just knew how to do and I didn’t want to have to spend a bunch of time explaining to a designer. Okay, we need a layout that looks like this for this people. And then we need another one that looks like this for this person. Because then, then I’d have to go back and work with our designer and do it.
And then I’d have to explain them all to the developer. So I was just like, you just design that and I’m just gonna, I’ll handle all of the centers. Which we don’t do for customers. For customers, we do all of the centers. Yeah, right. Because I can just make decisions on the fly about, Hey, these are all going to have this border that looks like this, and it’s going to have this amount of padding and, and that, and nobody’s going to come back to me and be like, oh, I really think the border should have been purple.
You know, right? Like…
Chris: Well, I would say too, that the other advantage with this is it’s a portal, right? So we don’t really expect like super flashy visuals or overlapping sections or anything fancy. Like it is a more utilitarian, sort of website, which makes it easier to, okay, this is our governing set of styles and we’re going to use a, a probably fairly narrow set of elements and just implement, right?
Amber: We did do some cool things. Maybe you could show them the button, Steve. This was something I had our designer work on, which was the button components. You could just hover over it. So, so one of the things that we did here is the, the regular state, maybe you can get out of it for a second or maybe on the front, yeah, the regular state is it has just slightly rounded corners, but it’s more rectangular and it’s blue, and then when you hover or focus, they get, I don’t know, what is that, like a 50 percent border radius on the right and left?
Chris: Yeah, it goes to like a pill shape.
Amber: The pill shape with yellow. So we have, we, I really like this because we went from having a, only a color alone difference on our buttons to now we have both a color and a shape change. So this is what I consider a really great accessibility enhancement that we added on here.
We have some link buttons, which maybe there’s one lower down there in that office hours section. Steve can see everything because he’s an admin, so he has stuff and, and these are, I mean, they’re links that look like links instead of links that look like buttons, but they have arrows. And when you hover over them, they get both an underline and the arrow grows.
So we’re, we’re doing a lot to try and have two ways to indicate different state changes. So this, I did have our designer do, and we talked through a lot of different options and he mocked up all these different kinds of buttons and stuff, because we’re like, we want. Something that is really accessible, but also clean and, and fits in nicely.
And I’m, I’m pretty happy with how those turned out. So, and you just did that with a block style or something on the button, right? I can just go in and I really like that.
Steve: Yeah. Yeah. I believe, I believe we have a style. Yeah, you can change it from a, you can change it from arrow to default. So that’s the arrow button.
That’s a default button.
Chris: Oh, that’s great. That’s great.
Amber: See, there are some things about the block error that are pretty fabulous, which that is very easy. And honestly, I’ll say I got started working on this and I’ve been used to doing it with our clients and, and then I was working on our main site, which.
We started in 2020, very beginning of 2019. So it’s early days of block editor still. And a lot of it was just helper classes.
And I was doing something on there the other day and I was like, I can’t remember what the class is to like put check marks next to bolded list. So I had to go like inspect it on a different page. It’s so much nicer when you just click a button to be like, make lists have check marks. Make buttons have arrows, right? Instead of having to remember all these classes that you have to apply to things.
Adopting FSE (Sort Of)
Chris: So speaking of how WordPress has continued to evolve on the editor and structural side Amber, you pushed for something on the technical side that I’m going to call controversial in the sense that most of WordPress hasn’t started doing this yet.
From a technical side, how do we build this new portal?
Steve: Yeah. So I see in our, our notes here, we keep saying full site editor. I don’t know that I would categorize this as a full site block theme. It is, it’s a hybrid theme, but maybe a little more like, if…
Chris: It’s like a step towards it, we kind of like put a toe towards it.
Steve: Well, I mean, if, if, if hybrid is a spectrum, we’re, we’re, and, and full site editor editing theme is, is over here. We’re more on that end of it than we are just like, we did a little bit with the, with, with the block editor, we did a lot with the block editor and, and we have been making you know, Gutenberg enabled themes since the, you know, I mean, for five years.
Amber: 2018, yeah.
Steve: Yeah, for a long time.
And they’re, you know, not to, I don’t, I’ll tell you what, what my experience has been. I don’t want to, want to, you know, make bold statements about the block editor, which if you want to find people’s honest opinions and bold opinions about that, you can find them on, on X and, and argue about it back and forth.
Yeah, whereas there are really good things about it, especially from a user perspective, from a development perspective, it has been very challenging. And I think that, we have a hard time with legacy websites that we’ve built with it actually you know, staying solid and not having backwards compatibility problems.
So we’ve had a lot of backwards compatibility problems. And a lot of that stemmed from utilizing third party block libraries. So, so with this, we approached it from, and, and, you know, I think that the, the group block in WordPress core in the block editor has, you know, has improved a lot. So that used to be our big thing was we need, we need to be able to have some kind of grid or some kind of column block that works really good.
Amber: So we would pull in a third party plugin for that. And then sometimes we’ve gotten burned when they…
Steve: Yeah, when they update, when they update or when they don’t update, right? Like we’ve gotten, or when core updates or I keep saying core. When the block editor updates, I understand those are two separate pieces these days.
But so, so our approach here was no third party block library, right? We’re going to utilize the theme.json to its full extent in, in this theme. Which that was a huge challenge. So for Amber to be able to go in, I’m still sharing my screen. For Amber to be able to go in and add all these sections easily, there was a lot of work on our end we had to do first to make sure that the theme was all set up for her to be able to do that.
If I, if I switch back to the back end, you’ll see that. This experience is, is pretty spot on from a layout and design perspective for what you see on the front end, aside from all the shortcodes. So, EDD and Affiliate WP, and of course, when you’re trying to, you know, gate content, yeah, with WP Fusion, they’re still, they’re still using a lot of shortcodes.
So those are here, but. As you can see, the experience is, is pretty similar to what’s on the front end. And that’s what we wanted. We didn’t want any strange wonkiness with you know, widths of blocks. And, and that had always historically been a real big problem for us. And, and, and I say that because.
We’ve been making these themes before there was the theme.json file. So where we would have to write our own block styles. And what happens, I think, between those custom block styles that we would create and, and, and the block styles that are generated by the Gutenberg editor at some point they start to like, conflict or collide with each other. And so there’s some maintenance over time that has to happen. But with this one, what we’re trying to do is we’re trying to, we’re trying to make sure that we don’t have that problem moving forward, but what that means, the trade off there is that we have to do everything kind of the WordPress block editor way.
And from a developer standpoint. It, that is incredibly an unorthodox workflow for a developer, especially when it comes to styles. And if you’re not used to writing styles this way, it, it is, it is a whole new paradigm and like, and like, you have to, you have to really think about how you want to do it and we kind of went all, all in with this and so all, well, we had we had to still have our own styles.
A lot more than I actually wanted because of EDD, because of Affiliate WP, because of Gravity Forms. We need a way to style that. Now, could we have put those styles inside of the theme.json file? Yes. There is a CSS field to some degree. We could have I mean, to some degree we could have, but. I have a weird, I don’t really want to be writing JSON formatted CSS, like, like…
Amber: I mean, we’ve used Sass for so long.
Steve: Yeah. And, and it’s very, it’s, it’s, it’s a disjointed developer experience to say the least, so like Amber talked about buttons.
Amber: It took me so long to get those right. And I was like, they’re so great. And it’s so easy for me. And you’re like, it was not easy.
Steve: Not easy. Well, I mean, it’s, it’s easy. It’s easy. No, I will say like the global styles and stuff in the theme.json file, I was pretty impressed with, and like, we, we kind of, we were kind of like racing updates to like, like. When we started this, you couldn’t enqueue your fonts inside the theme.json file, but you can now. So it’s like an update came out. I was like, okay, well, this updates out and that, let me put my fonts in the theme.json and see how that works. And it, and it works great. Like, so there’s a lot of things, especially the global styles. Like there’s a lot of things like defining my color palette.
Like, okay, well, I’ve been doing that in my, you know, functions.php file with a, you know, with a, with a, with a little function here to define those, and then I would have to match that to kind of my CSS. So there’s kind of like a little bit of back and forth, but you could do it. But the theme.json handles it all.
I’m like, okay, this makes sense. Right. But where it gets real tricky is, yeah, yeah, there’s, there’s definitely stuff that was easier. And, and then the, then the trick was that with the buttons is that, well, we need these, I need these styles in the buttons too. Like, like , in the buttons in EDD and Affiliate WP and Gravity Forms.
Amber: Like the literal buttons, the button tags, not the fake ones that are actually links.
Steve: Right. So, so we had to write like a, a mix in. In SaaS, a SaaS mix in that pulls those same styles and the variables for those styles from the, the block style sheet that gets inc queued by the, the block editor. Not ideal.
Like it’s, that’s not my ideal. Like I would love if there was like one like class or one selector or something that I could get to match ’em up, but there wasn’t, I had to kind of grab all the styles and create a, a mix in that then can be applied to those, throughout the style sheet. So if I go into the theme.json file and modify the button styles, they will carry over between the block editor and between all the third party plugins we’re using. So that was pretty slick, right? So that’s where this is kind of like a hybrid theme to some degree, but like…
Amber: I think too, for people, and yeah, we should definitely talk about this checkout page, but I was, I was going to say one thought on that, like, this is really, when you think about, you know, we build websites that are enterprise websites and they start at a lot of money.
I don’t remember what the starting price is right now, but it’s really high. And some, and I’ve had like, you know, people say to me, well, how do you. How do you even get to that? Like, how is it really actually 150 hours of work or whatever? But this is one of the things with WordPress and one of those lines, right?
Because there are a lot of people that are, that say, I installed this plugin and, while the tables in it look different from the tables on my blog posts, or they look different from the tables in this other plugin or the, the buttons look different, but they don’t restyle them. And this is a big thing that, you know, it’d be great if somehow we could all figure out how to use the same classes, but we can’t apparently.
And so that is just a huge amount of time trying to make every individual component look like it belongs to the same design system. If you’re not, building everything custom and you’re pulling in other tools in order to manage your things. Like there was so much where I was just going through being like, Oh, this button was missed.
Oh, this link was missed. Oh, this, right.
Chris: Yeah. There’s a lot that goes into making things look like a cohesive experience. If you’re implementing stuff that is, it saves you time to, you know, implement a plugin rather than try to reinvent the wheel. Right. And so it’s easier to take something that exists and modify it to look cohesive.
Steve: Yeah. I mean, I, I think it’s, it’s definitely hard for third party plugins, right? Because. This would be, those would be breaking changes, right? Like if EDD, even if EDD modified a CSS selector on one of their divs, that’s a breaking change, right? Cause what if somebody like us is targeting that? And we are, you know, I mean, ideally a lot of this to get the cohesive.
Amber: We don’t run auto updates on this website ever.
Steve: Yeah, yeah, yeah. Totally . But like a lot of it would have to run through the block editor and we could argue whether or not that is a, a good idea. Like, I think my opinion on how we move forward with, with block editor stuff, it is still kind of in flux after, after this website, I, we, we learned a lot of kind of trying to do it the exact WordPress way and trying to meet those needs of, you know, a cohesive layout for all the third party stuff. And we did use block templates. Like, we used block template parts here. We used block template parts here.
Amber: Yeah. Describe where you are.
Steve: Yeah. So this is the, this is the checkout page.
So, this is been completely revamped and
Amber: This we did have designs for. So both our free checkout flow and this. So we had designs for the shell of just all of the logged in pages, but we spent a lot of time on both are paid and are free checkout. And we looked at several different WordPress plugin companies.
And we looked at a lot of SaaS software, both accessibility SaaS, and then just random SaaS is like project management tools and, and all that kind of stuff. And the, and our designer, Jacob and I went back and forth on a lot of things. Like, what do we think is a checkout and, and, or a free opt in process that would convert people?
And then Joost. Joost the human also reviewed our Figma files and gave us some feedback, which was very helpful. And. Yeah. And so, so, but you were able to do some of this with Easy Digital Downloads and there was a lot that you had to modify, right, Steve? And then you were about to say some of this is template areas on this checkout page.
Steve: Yeah. Yeah. I think just to finish up kind of my, my block editor rant or whatnot. I mean, the summary is that, can you get there? Yeah, you can get there. And, and I think as you do it more and more, it’ll become easier and easier and you’ll find ways to make it work with your workflow. If this was a full site, a complete full site editing theme, I think that we would have ran into some serious challenges with the way we wanted this to look, but I really think the happy medium here is a hybrid of some sort.
And I think it’s necessary, really. Like I don’t. Like, especially with all third party plugins, we needed this style, but yeah.
Amber: Well, I mean, one of the problems right there that I remember caused a big issue was we have, but right below our order summary, there’s five stars and then it says five out of five stars on WordPress.com with the WordPress logo, and you had created a short code that actually auto syncs this. So this is real and not us faking that. And then it no longer functions because shortcodes don’t work in the template area. I don’t, I don’t know.
Steve: Well, yeah. So the, the block editor is moving so fast that that. by the time we had found a solution…. So with block template parts, there’s, there’s a bug. It’s a known bug. It’s been out there for over a year, year and a half, maybe two years. I don’t know. That shortcodes don’t work in block template parts. Right? But there was a workaround. There’s a, there’s a filter that you could put in, but I think I was worried about some security concerns around using that. Or you can, you could create a block template part, a custom block template part inside the, the block editor and or the full site editor and put the shortcode in it.
Then put that template part in your custom theme defined template part and it would work and it did work. And then the latest update before we launched the latest update of WordPress came out and they removed the ability to make that custom template part. Like it’s like you’re noticing it all says patterns now and instead of they used to say like and when you go to appearance and say template parts and patterns and now it just says patterns. My guess is that they’re moving to just everything being called a pattern rather than, I don’t know, a template part.
But anyway, we couldn’t get it to work.
Amber: And, it blocked you on launch day.
Steve: Yeah, definitely. That’s where like, and, and these template parts, yeah, blocked me on launch day. So the, since we were already hooking in and we were already outputting in PHP, we were hooking into this sidebar here in EDD and we were outputting this block template part.
We just went in and just output the echo do shortcode and did it the old school way. But so migration was difficult in that respect that, you know, these template parts like here and, and I mean, the sidebar below our sidebar and the our disclaimer and then our footer, like, it’s harder to migrate that stuff when it’s in template parts and, and, and, and when I said we, we were migrating, we weren’t migrating anything in the database.
So we wouldn’t lose any data. We were doing a manual migration when we, when we launched this. But that’s kind of, that’s kind of where I would leave that.
Big Gains in Conversions
Amber: Should we show our, our free opt in page, just since you have the checkout up, like to contrast it, so we went to a much nicer or more standard looking checkout and then we, for free users, instead of going to checkout completely.
We’re now taking them to a page that says, get started with Equalize Digital, sign up free, no credit card required. And then there’s a continue with Google button. So we also, with this, added the ability for people to register accounts with Google. And then there’s an email address field where you can just type in an email address.
And then if you hit continue, so you could do Google or you could do just an email address.
And then. It actually registers the user when they just give us the email address. But they do get sent to an interstitial form here where we see first name, last name that are required, phone number is optional, and a password required to create their account. But the idea is, is, the moment they give us an email address, we know that they came and tried to get our free product, and we have the ability then to to send them cart bounces, those sorts of things.
But it’s asking far less than it was asking before.
Chris: Yeah, I’d say that’s like 50 percent to 25 percent of what we were originally asking. And it’s even broken up into multiple steps. So, and what have you seen as a result of this, Amber?
Amber: Well, Steve pulled those numbers today.
Chris: Oh, Steve pulled the numbers.
Amber: Yeah. What were our percentages? So it has been launched for less than seven days, right? Six and a half days. And anecdotally, I was thinking everything is up in the last seven days. What did you poll, Steve? As far as percentage wise.
Steve: I just did a week over week. And it looks like our conversions are up 95%.
Chris: Wow.
Amber: So that’s between free and paid, obviously, but yeah, 95% increase says 94% increase in new customers.
Steve: Yeah. Yeah. So on the, but the, on the paid side, it’s up 67%.
Chris: Interesting. Just week over week. So it’ll be interesting to see if this week is a blip or if it, if it, like, if those numbers hold over time, right?
Steve: Yeah. I mean, I, we, we have a, you know, we use Basecamp for our project management and Amber has a little You know, Zapier feed set up every time somebody purchases, we get a little notification. Just makes us all feel good and happy when those come through.
Chris: I call it the dopamine feed.
Steve: The dopamine feed.
Amber: Someday we will be overwhelmed by that feed and I will turn it off. But for now, every, it’s like, it makes me so happy every day. Like throughout multiple points in my day.
Even the free signups make me happy.
Steve: Oh, yeah, totally. The, the we launched, I think it was just like about six, six o’clock Eastern. And that’s where I’m at. So about five o’clock your guys time, last Friday. And I almost immediately started seeing more, a lot more emails coming through that. And I didn’t know, yeah, I was in my head. I’m like, maybe it’s a fluke. And then it’s like, what, what a couple of days this week, it was just so many of them coming through. I was like, I think this is working. Like. So…
Amber: Yeah, I mean, that’s, that’s the thing that’s interesting, right? Like UX and, and user UI changes can really make a huge difference on things like conversions and people’s interest in something or trust in a company or willingness to submit a form. And so spending a lot of time on that. Which we do a lot of times hand in hand with accessibility can really make a big difference.
Steve: Yeah, totally.
Accessibility in the New Portal
Chris: Absolutely. And speaking of accessibility to kind of wrap us up here, I did have one final question cause we’re using third party tools like EDD and Affiliate WP and others. Were there some accessibility issues that we encountered with some of these plugins that you either want to highlight or just in general and kind of how did those, how did the various organizations respond to those?
Amber: Also, before you start answering that, Steve, I want to say, I know we’re seeing our little timer and how long we’re recording, but I think this is just going to be a little bit longer of an episode because it cannot be Accessibility Craft without us having a conversation about this and it needs to be a good one.
Steve: Yeah, I mean, it’s definitely so, you got to make it block editor compatible, you got to make it responsive, right? You got to make it accessible. So it’s, it’s, it’s, and no, they were not accessible out of the box to say the least.
Amber: I I’ll say and I did reach out to the two primary plugins that most of our customers engage with are Easy Digital Downloads, EDD and Affiliate WP.
And I did reach out to them and they both said that they were open to, you know, reviewing issues and things like that. And I’ve had an open conversation, especially with EDD about some issues. And I don’t know, let me know if you think we should put the screen share back up, Steve, but one thing that for sure came up, that I discovered while testing, and this is why you really have to test everything on every page, because this was something we found out with skip links. Sometimes people only test them on the homepage and yeah, it works great on the homepage. But I got to the checkout and I was like, why does the skip link not function?
Well, wait, the ID’s there. It should work. And then I realized none of the buttons and none of the links on this page work at all. And so William, our plugin dev, investigates this and he’s like, there’s a script in Easy Digital Downloads. It’s, they may be copied from Stripe maybe, but on the checkout page, it blocks the return key from functioning on any link or any button.
Like it just removes functionality from the return or enter key.
Steve: Right. Yeah. So…
Amber: That has been reported. They are going to fix, but we will also put in the show notes, a link to a script that they came up with in order to fix this on our site. Because I literally said, this is a breaking change. We can not launch our website with this.
And it didn’t exist on our prior website cause we were using the old legacy version of the EDD checkout.
Steve: Of the Stripe checkout. It was actually the…
Amber: Stripe checkout.
Steve: The Stripe checkout. Yeah, it was, and it was interesting how we found that, right? Like, so, you know, I did a lot of the work around the checkout page.
That was kind of my piece of this that I, I took on a lot and just based on the importance of getting this right. And, and while we did have designs for the checkout page there’s a lot of things that happen inside of this checkout that are, you know, especially around the order table, when you add, when you add coupons, those things were not figured out in the designs.
So there was a lot of design decisions that I had to make on the fly. And unlike unlike your typical developer, I do have a quite a bit of an eye for design. I actually have a college degree in design. So, that, that helped a lot to push this through without having to go back and forth between Amber and a designer and, and all that.
Chris: One of the many reasons that Steve is a unicorn.
Amber: He can never leave the team.
Steve: Jack of all trades.
Amber: I wonder if it’d be, could you like start at the top and kind of talk about some of the accessibility features. Maybe even like, you know, like, oh you’re logged in. So you can’t see it as a logged out user.
Yeah, I can log
Steve: out. Let me, let me, let me try to log out here.
Amber: You use the logout button maybe. It’s always fun when you do that live and then it doesn’t function.
Steve: Yeah. Yeah. So if I go to checkout, I’ve already got this stored somewhere. If I go to check out.
So we wanted to kind of do things that are outside the box of the way EDD is set up. And while EDD is a great product, it’s extremely difficult to, to really like they, they do give us templates that we can move over into your own theme and modify, I’m always apprehensive to get too crazy in there because I actually want to be able to update those at some point in time.
And once, once you grab that template part and you move it into your theme, it, it, it then becomes, you know, it’s not, like it’s not going to get updates. But we, we did move in a lot of template parts. I mean, you can see I’m sure.
Chris: Oh, wow. We’re getting real nerdy now.
Steve: Yeah. Yeah.
Amber: Steve has opened up his, his IDE and he’s showing us code.
Steve: Yeah. So you can see, I’m, I’m looking at the EDD templates folder and we’ve got, you know, a handful of templates that we’ve pulled over. We did the same…
Amber: Check out. Purchase History. Yeah. And the same thing for Affiliates WP. There’s probably, what, like 12 or 15 there.
Steve: Yeah, I actually think these are all of them for Affiliates WP.
Amber: Yeah, you know why? I’ll tell you what the problem with Affiliate WP was that drove me bananas. All of their shortcodes have an H3 at the top of them. And I was like, I’m putting this on a page where there’s an H1. Half the time I didn’t think it needed a subheading at all. But then I was like, even if it needed a subheading, it should have been an H2.
And there’s no, there’s not like an attribute that’s like heading level that you could set on their shortcode to define that, which would be really great Affiliate WP. I am also going to tell them that like outside of this podcast that they may or may not be listening to.
Steve: But, but…
Amber: But we ended up having to template it just to remove.
I mean, there were other things, but it was like, get rid of this heading that makes no sense.
Steve: Right. So there was a lot of that. But like even, so moving the order table, like the, the, the normal order order table is kind of a big piece of the checkout, right? It’s this big wide section piece. And we wanted to, kind of minimize it into this sidebar piece that, you know, attaches and follows so that it’s real visible, real easy to see. So there’s a lot of things in here that we kind of had to pull out. We wanted to make a custom have a coupon. Normally in EDD you have, you have just like an input field over here that has a coupon.
Well, I want to extend that. So it’s not super easy to do that. And so we actually had, those fields are actually still there, but we’re actually created a separate module that kind of, that talks back and forth between that one to make it do what we want to do. So we, we now have this field here and like, if I put in a code and I hit apply, you know, it goes through and adds it.
And then we pop this up and this, this was actually not.
Amber: You should have used Accessibility Craft.
Steve: Yeah. Oh, well, sorry. This is the only one I knew in my head, but all good. Use coupon code Accessibility Craft.
Amber: No. And we’ll even talk about that because
I’ve seen that check out on other Awesome Motive is the company that owns EDD and they have other things where they’ve done something similar and we kind of looked at it, but they weren’t doing it accessibly.
They aren’t. Like that have a coupon is a link, not a button. It doesn’t have ARIA control. So you spend a lot of time doing things like things, things that were links should actually be buttons. Like even that login up at the top that you added there, that is a button that has accordion markup and expands this accordion, you know, or changes, it has ARIA pressed.
Steve: Yeah. ARIA expanded true and false. And, and it has an ID to the element that it controls. So that, so that it’s accessible and it shifts focus into that when you, when you, when you open it. So yeah, a lot of considerations like that. Like, so this is actually core EDD here.
That field, but this is custom. And then we’ve written a lot of JavaScript to make these things work back and forth. And, and just like with this, yeah, like you said, Amber, it’s, there’s been a lot done on this piece to make it accessible, to make sure things are, to make sure things are, I’m showing on my screen, I’m showing the coupon button and I’ve got the inspector open and I’m showing that this is actually a button and it has the, the ARIA controls for the discount field.
If I click it. Shifts focus into the input field.
Amber: The input has a label. I’ll tell you, that’s another one we ran into.
Steve: Has a visible, has a visible label.
Amber: A visible label. Yep. When you click on the label, so the label is positioned like a placeholder, but when you click it shifts up so you can still see it.
Steve: So like, yeah. So in the context of somebody’s typing in a coupon code, they still need that label. That’s why a placeholder is not enough when it comes to accessibility. Because you know, some people may forget. What that field is, they started typing in. I, I’ve even done it. I was like, I’ve even started typing in a field.
And I’m like, what am I feeling?
Chris: You’re in the middle of filling a form. You get up, you walk away for 30 minutes because something distracts you. You come back and you’re like, what was I typing here? And if there’s no label, it’s like, well, who knows?
Amber: Or also sometimes, you know, auto complete fills in fields and it fills in the wrong way.
And I always say when I’m like, wait, was this, if I have to delete the information? Oh yeah, that was in the right field. You have to type it back in, right? Yeah.
Steve: So we even have a clear button on the input field and I’m showing in the inspector, I’m showing that it’s a button. I’m showing that there’s an ARIA label that says clear coupon code.
And then of course we have the apply button. And once you apply a code, I’m not going to type Accessibility Craft because it’s too long.
Amber: But We like Kori Ashton. That’s all right. She’s pretty awesome.
Steve: Like, and then this, you know, what, what has an ARIA live on it, right? I sure hope it does. Let’s, let’s pull up the inspector.
Yeah. So totally.
Amber: The alert that says that it’s, it’s been applied.
Steve: Yeah. Yeah. So our, yeah, so our alert, we have a role of alert and we have an ARIA live flight on it, so when, in a screen reader, it’ll read that out. Once that’s applied and then we have a, you know, another button here to kind of remove the, the discount.
Amber: Yeah. So, so I think at a high level, what you were asking, Chris, and like what my takeaway for folks in WordPress community, especially if we have any product owners is currently right now, out of the box, Easy Digital Downloads and Affiliate WP do not output accessible markup. There was a lot that we had to do.
Some examples of things just like, broadly, I mentioned heading levels being incorrect. We ran into instances, for example, in the Manage Sites forms with EDD, where you can add a site on your license. That input is unlabeled in the short code. There were a lot of instances of tables that didn’t have proper heading markup.
Oh, links. This is something we had fixed on our, this, this is the thing that’s hard. Some of this we had already fixed in our prior version, but it lived in our theme and we didn’t remember cause it’d been so long. So I said, we’re just gonna. Have vanilla EDD and Affiliate WP and then I’m going to go through and find all the problems and then you’re either going to go find the fix that we previously had in our theme or you’ll come up with a new way to do it.
But what do you have up right now, Steve?
Steve: Yeah, so ideally, when you’re making accessibility fixes to things, you want to do it at the server level, right? You want it, you want it done in your markup or in your PHP. That way the search engines can see it. The, but, in this case of all these third party libraries and our third party plugins sometimes you have to utilize JavaScript and and and you have to you have to utilize it for the sake that you can’t edit that plugins files like it. Maybe they don’t provide a template part for you to to modify and I will say this too: Even if a template part is provided, there’s functions within those template parts that sometimes.
That, well, I mean, that will have string outputs. So like, like if you have like a, a function that outputs, you know, I don’t know, short and say a coupon code or something, it’ll output it’ll, it’ll, and at least in EDD, I noticed this a lot, it’ll output a string. And, and it’s HTML, it’s an HTML string, but like, if I want to modify one element within that string I can’t do it.
I have to use like regular expression to be able to change it. And that gets a little, it feels hacky to have to use regular expression on strings like that. But sometimes you have to use like, even like Amber just said, the manage, the manage license page. And you know, they’re, you know, just changing a header, right.
And sometimes it has to be done this way, which is not ideal.
Amber: So you had to write basically, I don’t know, 10 lines of JavaScript to convert an H5 to an H2.
Steve: Yeah, correct. Yeah. Yeah. So that’s, I mean, it’s not a lot of JavaScript and let’s be honest we have this little helper these days called AI that helps you write these things.
But so I can prompt it pretty easily to, you know, with what I’m trying to do. And it’ll help me write things like this. But of course we’ve had to, we’ve had to write this stuff all along and we can just do it a little quicker now. But so you can see we have a, in, in this JavaScript folder, I have an EDD folder, and these are all the EDD JavaScript files that we created to either create a custom component in the checkout or to fix accessibility issues.
Amber: And just eyeballing it, it looks like there might be like 15 or something different.
Steve: Yeah. So yeah, I mean, I can go through them all, but like checkout and, and a lot of, you know, this probably has accessibility fixes within it, but yeah. So the discount piece is a, is a, it’s a pretty, pretty beefy module here, does quite a few things, about 190 lines of code, so.
Amber: So I am hopeful that Easy Digital Downloads is going to take some of the feedback that we give them and make some fixes, but I will note for sure, Easy Digital Downloads checkout page, that is 100 percent falling under the European Accessibility Act requirements for June 2025. So if you or your customers are using Easy Digital Downloads to sell things, you need to go test it if you have not tested it and start working on fixes before June or, you know, message EDD and be like, hey, we really need X, Y, Z things fixed because this, this is a perfect example. And it’s not just selling software, right? It European Accessibility Act is about any, selling things.
And then of course there’s a whole bunch of stuff once you get in and high, what I’ll give you high level on Affiliate WP is we’re not using, and I don’t think we have a good page to show for this without revealing customer data. But we are not using the main Affiliate WP dashboard because there’s so many problems with it, but there is an add on plugin that allows you to have extra shortcodes for Affiliate WP.
It’s one of their official plugins that then you can output just segments of their customer dashboard. And honestly, I thought that was better anyway, because then we can have our own navigation. We control where things sit in the navigation. We can put them on what page we want. And I built out a really nice, I’ll maybe screenshot it and tweet it out somewhere.
Dashboard that shows Affiliate WP data. Now there are still, I’ll say it right now. Our website is not perfect. There are issues that we were not able to fix. Not on the checkout page. The checkout page is really good. But there were some in some of the customer pages, in some of the shortcodes from both of these plugins that we have reported to them, because it would just take so much hackery.
Or, you know, at one point, Steve and I were chatting, and it’s like, it almost makes you want to just build your own, but then you’re like, how much work is that? So…
Steve: I think there’s a time and a place for a product company to build their own. And I, I don’t think we’re quite there yet, but…
Amber: No, I, I think, you know, we’re, we’re still iterating.
We’re going to continue improving on the accessibility of that. And hopefully, you know, partnering with. The plugin companies that we use their products and hopefully that they will, you know, take our requests seriously and make those changes. So far it seemed positive and, but you know, it remains to be seen once issues get logged.
But I will say if you’re using any WordPress plugin and you haven’t tested your stuff, if it’s customer facing, you really should go do that.
Does that, does that kind of get at your long winded question that you asked us like 20 minutes ago?
Chris: No, I think, I think we’re good and I am officially out of questions, by the way, so maybe we can close with just how each of us is, is feeling high level with this new portal launch and, you know, optimistic? Concerned?
Tired from all the work?
Amber: Was it, was it worth one week out? What do you think? Was it worth setting aside some plugin dev time and doing, working on our own website instead? You go first.
Steve: So yeah, I’m real protective of the plugin. And I do like to keep resources on it as much as possible. So it was definitely a really difficult trade off for me. And and it was, it was, it was a pretty, I mean, I want to say probably a good month and a half diversion from the plugin. And now we’re back in ramp up, which, you know, ramp up is always a little slower before you’re up to speed. But I think that, you know, seeing a 95 percent increase, increasing conversions week over week says something, right? Even if that’s a fluke, it says something. And I think that the, you know, we’re set up to, like Amber said, we’ve got a framework for this portal. We’re set up to just put a you know, a learning management system inside of this thing and, and sell courses.
And I think it’s just a better home for all the things and all the ideas that we have to live in. And I think that it will pay itself off in spades, I think, eventually.
Chris: Couldn’t have said it better myself. It looks good too.
Amber: Yeah. Well, I think we can do a toast to our, our new website that we worked on for, it’s way longer than we probably should have.
Do cheers! Cheers.
Steve: It’s warm. Should I drink it?
Amber: Oh, don’t know.
Steve: Oh man. It doesn’t get any better when…
Chris: It doesn’t age well.
Steve: Let’s chase that with some Diet Coke. Some, some…
Amber: All right. Well, we will be back in two weeks with another conversation episode. And until then everyone, if you haven’t yet, go check out our new website and we love feedback, so feel free to send us a message or tweet at us or whatever you think.
Chris: Also, this is airing the Monday of the week of WordCamp US. So find Amber and Steve at WordCamp US in Portland. They will be around. Amber will have koozies, Accessibility Craft koozies. And yeah, Steve will too.
Amber: I’m not the only one that can give away fun things.
Chris: And come check out Accessibility Checker at the first, at the first ever WordCamp US product showcase day.
Amber: Showcase day. Yeah, we’re very excited about that. All right.
Steve: Alright!
Amber: See you later!
Steve: See you guys.
Chris: Thanks for listening to Accessibility Craft. If you enjoyed this episode, please subscribe in your podcast app to get notified when future episodes release. You can find Accessibility Craft on Apple Podcasts, Spotify, and more. And if building accessibility awareness is important to you, please consider rating Accessibility Craft 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.