In this episode, we take a deep dive into accessibility best practices for modals and popups, whether they are good or bad for user experience, and whether there are any solutions in WordPress that produce accessible modals by default.
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: Hey everybody, it’s Amber and I am here today with Steve.
Steve: Hello everyone.
Amber: And Chris.
Chris: Hey everybody.
Amber: And we are going to be talking about pop ups and modals and a bunch of fun things. This is episode number 110. So if you are looking for a transcript or show notes, you can find those at AccessibilityCraft.com/110. But of course, we always start every episode off with a beverage.
Today’s Beverage
Amber: What are we talking about today? Or no, what are we drinking today, Chris?
Chris: I think we’ll, I think we’ll be talking about it too because we are all legendary at this point for our dislike of IPAs. And I realized it had been ages since we’ve tried one.
And so I grabbed the first IPA I saw that I hadn’t tasted that, grabbed my attention for reasons that will soon become apparent. So we are tasting Evel Knievel IPA from Destihl Brewing which my understanding is they’re based in Illinois. So we have a non Texas, non California beer and we’ll be trying an IPA today.
I know nothing about this. I don’t know what to expect other than intense quantities of bitterness.
Amber: Spoiler alert. We’re we have another IPA in our future because I am working on booking a guest who asked for an IPA. So as much as it’s not our favorite beer, it is a lot of people’s favorite beer.
So I think it’s good that we try it.
Chris: And emblazoned on the can is a picture of Mr. Knievel himself In a ring of fire on a motorcycle. So a cool can. And it’s like black, or at least, I don’t know, maybe it’s powder coated, but it’s like black aluminum can too, which is different.
Steve: Oh, yeah. Is that going to give me cancer?
Amber: Yeah, instead of being silver?
Chris: Probably. I mean, if the paint doesn’t, the alcohol will.
Amber: This says nine percent alcohol by volume.
Chris: Oh dear. Okay. We’re going to be terrible.
Amber: So this is fun. Evel Knievel Imperial IPA is a daring west coast style brew that is ramped up with a thrilling burst of hoppiness, fruity aromas, and perfectly balanced bitterness.
Citra, Mosaic, and Chinook hops take center stage, soaring through the flavor profile while a vintage malt backdrop brings a touch of nostalgia. Cheers.
Chris: We will see if we taste any of that. Yeah. I’m gonna get the can crack on the mic.
Amber: Yeah. I mean, it definitely speaks to me with their labels. Oh, you’re foaming up.
Steve: Yeah, it’s making a mess.
Chris: It’s hoppy and it’s happy
Amber: Did you shake your can before you opened it, Chris?
Steve: No, I didn’t shake mine either.
Chris: So mine is extra for some reason, but I’m going to try to get a pour here.
Steve: So when I was a kid, I used to go, my dad would come and get me from my mom’s and we would go we’d get some dinner and then we would go to Blockbuster video.
And I would rent like compilation VHS videos from Blockbuster of Evel Knievel, like doing his jumps and stuff and breaking all his bones.
Amber: So for folks who don’t know, you should tell who Evel Knievel is. And also, look at that beer. It’s beautiful. You should describe it, Chris.
Chris: Yeah, it’s got a cloudy orange color.
And I didn’t do the best pour. I’m like 30 percent head, but also my beer foamed out the second I opened it, so I don’t know if it’s totally my fault. But, and it’s like lots of bubbles big open bubbles, so not like a creamy head more airy. And …
Amber: I like when it has that much foam because it very nicely contrasts with the Accessibility Craft logo on the pint glass. It’s easier to read.
Steve: How is the color contrast on the head of that beer?
Amber: It is definitely, I think, triple A.
Steve: Evel Knievel was like from the 70s, 80s, he’s like a daredevil guy does stunt motorcycle jumps. Basically, I think he got famous for lining up like 15 school buses or whatever and jumping them and he jumped like Caesar’s Palace. I think in Vegas. Like he jumped…
Amber: The building?
Steve: Like the water fountain area, like he jumped over and he would spectacularly like wreck and break all like what, break his bones. I think that one interview I heard, he like said he broke every bone in his body twice. In his career.
Chris: Wow. Didn’t he also attempt the Grand Canyon at one point?
Amber: Did he fall?
Steve: In a rocket. It wasn’t on a motorcycle, was it? Maybe.
Chris: It was like, it was something that he had fashioned.
Steve: ! Yeah.
Amber: Did he do the whole get shot out of a cannon thing?
Steve: Yeah, but it was like in a rocket capsule that he tried to do the Grand Canyon. I don’t know. His son, Robbie, I think Robbie Knievel? He was a daredevil too and did the same thing. Jumping big buildings with motorcycles and…
Amber: I’m surprised your parents let you watch that. Did it give you ideas? Did it make you want to go jump off things?
Steve: Yeah, man. I broke my collarbone jumping my bike off of ramps and stuff when I was a kid.
Amber: Wait, for real?
Steve: Yeah, for real.
Amber: Wow. I never knew that. It’s like fun facts about Steve right now.
Steve: But fun fact, I grew up in the eighties, I’m like an eighties kid.
Amber: Come back when the streetlights turn on, hopefully you’ll still be alive.
Steve: Come back when you’re hungry.
Chris: I like the body of it. It’s not super watery. As far as flavor go, I mean, it’s hop forward. What else can you say? . As far as their mixture of hops. I’m not, my palate is not getting as much citrus. I’m getting a lot more like pine and like herbaceousness and like that kind of thing.
Amber: I feel like on the front, I get a citrusy flavor. On the end, I see what you’re saying about the pine. Like the flavor it leaves in your mouth is a little, I mean, it’s not really piney. But it definitely has a little bit of that woody ish but like a, yeah, like a pine wood kind of, not like an oak.
Chris: So, it’s going to be hard to separate my personal opinion out of this one when we get to our thumbs up, thumbs down, but I’m going to try to be objective. What do you think about it, Steve?
Steve: Man, it’s just so bitter. I can’t with these IPAs.
Amber: You can’t taste anything else in it?
Steve: I can get the citrus on the nose, but once I go to drink it, it’s just bitter. It’s just really bitter.
Amber: Yeah. I feel as far as IPAs go, I actually think it’s lighter.
Steve: Yeah?
Amber: Not as bitter or hoppy as I think of some of the other IPAs that we’ve had.
Steve: Yeah, the aroma is not nearly as strong as some of the other IPAs we’ve done, but the taste is still pretty bitter.
Chris: Yeah. I feel like other IPAs we’ve done, I’ve enjoyed the noses more. This one has this weird funky undertone that I really don’t like. Like you get the, you get the IPA, but then it’s like the undertone for me is like gas station men’s bathroom. Like it just smells like pee. I don’t love the nose on this one It’s not agreeing with me
Steve: And it’s got a it’s are you getting an aftertaste like you like you got some furniture polish in your mouth or something?
Chris: Yeah, not as, not like that one that we tried that was like the botanical non alcoholic thing. But…
Amber: oh yeah, that was bad.
Chris: It’s, for me it’s just like lingering bitter. Like I haven’t taken another sip of this in a good 40 to 50 seconds and I’m still tasting bitter.
Steve: Yeah.
Amber: I I will start off, I will give this an in the middle. It’s not, it is definitely not my least favorite beer that we’ve had. For me, it is not my least favorite IPA either. I think I’ve had other IPAs that I didn’t like as much. So I’m in the middle. I wouldn’t choose an IPA, but I am going to continue drinking this as we do this podcast episode.
Chris: Yeah, I’m I’m middle too. There are things that about it that I feel like were done competently, but there’s an equal number of things that kind of about it that kind of rubbed me the wrong way. So I think that puts me squarely in the middle as a non IPA person, that’s about the fairest score I can give it.
I have had IPAs that I’ve genuinely liked. They’re few and far between, but this is not one that I genuinely like.
Steve: Yeah. It’s like when you’re a little kid and You think, I wonder what my dad’s beard tastes like, right?
Like you took a drink of it and you’re like, ah, this reminds me of that. So, so it does have me reaching for my chaser here. I’m going to go, I’m going to go with thumbs down.
Chris: For our listening audience, Steve just held up a Diet Coke. If you didn’t guess already is if you’re a frequent listener.
Amber: Yeah. I’m just saying we need to start sending Coca Cola invoices for these podcast episodes. For real.
Accessibility Requirements of Modals & Popups
Amber: So, all right. Evel Knievel. I was trying to figure out, in my nerdiness, I always want things to connect.
Steve: Yeah.
Amber: And he jumped up over a lot of things popped up. I don’t know. I’m being a dork here or stretching way too far, but I realized we have never really talked about modals and pop ups. And recently, Steve, you wrote a post on our website about modals and pop ups and provided some code there.
So I thought it would be good for us to talk about modals and pop ups and that’s today’s topic, jumping the accessibility gap in modals and pop ups.
Chris: Let’s jump in and I’ll jump in with a question for our audience. Let’s just describe Amber or Steve or a combination, what the requirements are to have an accessible modal.
Steve: Yeah, cool. I can do that. I can run that through. That’s a little technical. So, so from the article basically for, from a coding standpoint, you want to have a proper triggering element, right?
So you want to use a button because it’s triggering an action on the page typically controlled by JavaScript. You don’t want to use a Link you could with a roll a button, but then you would have to make some considerations for the state of that link as well. And then you want to make it available to screen readers.
So to do that you add some proper ARIA attributes to the modal itself, you want to add a role of dialogue an ARIA modal equals true. And then we want to label it so the screen reader can read it out and you can use the ARIA labeled by or ARIA described by. And typically what you do is you’re you’re point that to the title of the modal.
So that reads out like the heading inside it, the heading inside the modal and possibly the description inside the modal. So you can use those two ARIA attributes to do that, but where I think where a lot of people really struggle is you want to make sure that it’s properly keyboard accessible as well.
So you want to ensure that the focus states move from when you initiate it from the button. You want to make sure that your focus state moves into the modal when it’s popped up. And then you want to ensure that you can get out of it with an escape key. And then while you’re interacting with the modal, you want to be sure to do a focus trap.
In doing all that, you also want to make sure that there’s visual focus indicators just like you do with the rest of your website. And then finally some scroll management. So you want to freeze the scrolling of the page behind the modal. So that, if you don’t, a lot of times what it’ll do, it’ll scroll.
If the modal has scrolling itself, it’ll scroll that, and then when it gets into that, then it’ll start scrolling the page behind it. So you want to do a little bit of work to make sure that you disable the scrolling on the mainframe of the website, but that’s the quick rundown.
You got anything to add, Amber?
Amber: Yeah, I mean, I would add some additional information about what focus trap means for folks and why that’s important, because I think, for us who do dev all the time, we know what that means. But basically, when Steve was saying that you want to have a focus trap inside your modal, that means that you don’t want a person who is using the keyboard to be able to leave the modal without closing it.
So if they’re using the tab key to tab through elements that are in the modal for, if you had a form in there, like it’s a subscribe pop up, you’d be able to go to all the fields. In the form, and then you go to the close button, and then if you keep hitting tab, it will cycle back through like a circle and then also you use an ARIA attribute to define it as a dialogue, and that it’s modal, so that a screen reader user who’s using the arrow keys to just listen to elements in there also can’t leave the modal.
A lot of times I think I’ve seen where developers have gotten the tab part but they’ve forgotten to set it to ARIA modal equals true. And so it’s not locking for screen reader users. And really this is important because you don’t want someone to be able to accidentally leave it, continue through the website, but not close it and then not know how to get back.
There’s a lot of keyboard users who are cited and seeing that open, it would block content on the website. But but yeah, I think those are maybe some things to check.
Chris: We have a lot more about Modals to discuss, but before we do that, let’s take a quick commercial break.
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, nonprofits, universities, and government agencies around the world trust Accessibility Checker to help their teams find, fix, and prevent accessibility problems on an ongoing basis.
New to accessibility? Equalized 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 percent on any plan.
How hard is it to build accessible modals & popups?
Amber: So. You wrote this blog post and provided code and a video walking through the code, which is really awesome. I always feel like while there is. A fair number of things that have to be considered when building a modal. I feel like it’s not actually that hard or complex, as long as you keep those things in mind.
And the code you provided wasn’t like it was, I don’t know what I want to say. Ten pages, but pages is not the right word for code. It wasn’t thousands and thousands of lines of code. It was pretty basic, but it seems every time we do an audit or we’re looking at plugins that include modals they don’t get it right.
Why do we think this is?
Steve: Yeah. I mean, I don’t know if I would preface that it’s easy or that it’s not complex, but there is a fair amount of JavaScript that it actually takes to get this right. And and really to make a modal if you’re just a developer and you’re not really thinking accessibility first, to make a modal is not hard at all, right?
Like it’s pretty quick and you can do it with maybe a few lines of JavaScript and you’re good to go, right? But when you have to make considerations for finding all the focusable elements on within the modal and then looping through those to create your focus trap. And you have to write a custom event handler to handle your escape key.
And uh, the JavaScript can get to be quite a bit. And then, and if you’re not thinking about accessibility, it’s really not in the scope of what you’re building, right? And so they’re more focused on what they’re trying to achieve at hand, rather than something completely accessible. And I think that’s the overarching problem with accessibility as a whole, when it comes to development.
Amber: I have, so I have two followup questions for you on this. And the first one is, do you think part of the problem with a lot of WordPress plugins, at least is that a lot of WordPress developers are really good at PHP and HTML and CSS, but not super strong in JavaScript? And that could be why this feels more challenging to them, or is that no longer the case? And do you feel like there’s more JavaScript, but I feel like historically WordPress was so PHP driven?
Steve: Yeah, I think that’s probably, there’s probably some truth to that. Definitely.
I mean, I know that we’ve, we were tasked many years to go to learn JavaScript deeply. I think there’s been a small subset of the WordPress developers that have, but they’re by and large, I think there’s a a large subset of less, junior level skilled, maybe even below that, like power users that are building WordPress websites that have not really upped those skills, but I really don’t, I don’t think that like creating a focus trap or, creating a event handlers to open something there or event handler to close something is really that difficult. It’s something that could have been done in jQuery, which we used to use, all the time years ago, very easily.
So I think it’s just going that extra step. Making sure it’s accessible. Thinking about accessibility. I think you do have to think about accessibility in this regard, because it’s like, why would I spend this time to make a focus trap? It’s and these are WordPress websites too.
Like you said they’re PHP built websites and the JavaScript is imported. It’s not a, it’s not an application where I can import a focus trap package. And then I can just utilize this package that somebody else already ensured is accessible, right? I just have to put the right tag on or the right attribute on, but no, it takes a little bit of work and it takes a little bit of actually thinking about accessibility.
Chris: Yeah. And I think it’s that actually thinking about accessibility piece that, is maybe changing a bit now, but I think that’s where we’ve been lacking. And probably the root cause of a lot of this is I feel like when a lot of people build their website or their solution or whatever it is, they’re the primary stakeholder that they are often thinking about is themself.
Or maybe they’ve taken it a step to try to put themselves slightly in the shoes of their customer. If they’re a little bit more forward thinking, but they’re just thinking about how would I use this? And unless they have a relative or they themselves use this kind of method of navigating the web.
They’re probably not going to think about it unless they’ve been educated and made aware that it’s a requirement either by direct experience or by a properly written, dev or design brief that basically expounds on what they’re supposed to be implementing and making that a requirement in the spec.
Can AI help developers do this?
Amber: Yeah, you know what this makes me think of, and this kind of goes into my next question that I wanted to ask Steve, because Steve, you do a lot more with AI, like coding helpers, I know that we’ve been experimenting with, and by we, I mean you and William and the developers on our team not me personally, although I do sometimes let Chad GPT help me with things, but I’m curious. Do you see the code suggestion tools defaulting to accessibility for modals if you go and you’re like, hey, help me build a modal, would it supply all the JavaScript to do everything right by default, or would you have to prompt it?
Steve: I don’t know if, okay let me take, a small step back and how LLMs work. Large language models, so AI, what we call AI is I, they, I think they really think, in an accessible way, like when you make a semantic page and you make it accessible it’s almost programmatic.
And I think those models do a really good job of interpreting that. So if you went to chat GPT or Claude, and you put in you put in create me a modal, right? And I mean, we could do it here live, but create a modal, right? Don’t even preface it with accessibility, right?
I think it would probably be a lot closer than most developers would do on their first take . Without somebody like us auditing it and saying, Hey, you need to add this and add this.
Amber: Because most developers won’t think to add ARIA at all. And that might actually use some ARIA because it’s trained on things that include ARIA.
Steve: Totally. So, so I think that you would probably get better results starting with it, with an AI prompt for making a modal . And this is like somebody flying blind. They don’t know, right? I don’t know about accessibility. I think that the AI is going to spit out something more accessible. Now now if you do prompt it, say, Hey, give me an accessible modal. It’s going to be, I mean, it’s going to be pretty spot on, like, give me the JavaScript to make an accessible modal. It may not get the focus trap. I really want to do it now that you said.
Chris: Yeah. Yeah. Just a number of different elements. I mean, I think it’s interesting that that, that is possible and that it might be putting out something that’s more accessible than a junior dev or an uninitiated person might produce. And honestly, I find that pretty encouraging as a non coder.
Amber: I mean, and I don’t want to totally tangent into this too much, but I do feel like it’s really interesting. There are so many conversations in the accessibility space about how AI is not there yet or is not great. And there are some people who are very anti AI, but I like to think, I tend more like to what I just said, which is it’s not there yet, right? I do think AI is going to be a solution that will help with accessibility. We just have to get it there and it needs to have somebody who’s smart enough to look at whatever it returns them and say, Oh, hey, you forgot this.
Chris: Yeah. And it may not take the form we’re currently seeing AI in, right?
Like it may take a different form. It may not be this thing you slap on as an afterthought. It may be something that helps you at the beginning of the process to produce something that’s better.
Steve: Yeah. I’m going to eat my words a little bit. So I just told it to make, I’m not going to show the code, so we don’t have to explain it, but I told it to just make them a modal for me.
And it, yeah it used a button to open the modal, which is great. And it has the modal markup, but there’s no ARIA. I have JavaScript for opening and closing it with an escape key, which is good, but I don’t have a focus trap. So…
Chris: So it missed a few things.
Steve: It missed a few things.
Amber: Is it shifting focus into it and shifting focus out?
Steve: No.
Amber: Yeah. Which is that is honestly, if we want to talk about modals. That is probably one of the biggest, most annoying problems with modals is that you trigger a modal to open.
And a lot of times in WordPress, the modals are like in the footer. They’re the last item in the body. And you trigger it to open, and it visually opens.
But it doesn’t shift you into it.
Steve: Yeah.
Amber: You’re still stuck on the page that you can’t see.
Steve: I know.
Amber: And you’d have to, if you’re really high on the page, you’d have to tab through, I don’t know, 40 things before you can reach the modal that’s at the bottom of the DOM.
Steve: I think that goes hand in hand with the focus trap.
Because if you’re, if you build a focus trap, basically all you’re doing is looping through the thing and getting all the focusable elements, and then you’re just cycling through them. You have to shift focus into it first. Or it’ll never trap, so that kind of goes hand in hand with that.
Popups vs Modals: Different accessibility needs for each?
Chris: So there’s, obviously, modals take different forms but one of those forms is pop ups. I have a more pointed question about pop ups I want to get to, but first, are there different expectations regarding pop ups compared to just a standard modal? Or is it pretty much the same?
Amber: I mean, in my opinion, and Steve, you can correct me. I think they’re generally the same. The biggest difference about a pop up is that there’s not really an element that triggered it. So where do you return the focus when it closes?
Steve: Yeah, I think so I think we get in trouble a little bit in accessibility with our language around modals. Really, there’s a modal and a pop up kind of are two separate things.
Amber: Are they really though? I mean, I’m curious about this. Like that actual HTML behind them. Isn’t it the same?
Steve: No, I think the accessibility is what’s different. Like the, like a tool tip is is a pop up, but like a, what we call a pop up a lot of times, like on website, like when you go to a website and it pops up and, download my thing. That’s a modal, right?
Amber: Okay. That’s not a pop up.
Steve: I mean, I guess not. We call it that, but so like a tool tip is like a pop up. And I think a good example of this is our our accessible new window warnings plugin. When this plugin adds a adds an icon and a visual indicator and updates the ARIA text for links that click off to a new tab or, that are the target is set to blank.
And we had a handler on it. When you would hover over it, like a, it would pop up and say it’s a little sentence or a little tiny popup would pop up and say, opens in a new window. And we recently updated the access accessibility of that to make it more accessible because it was a little popup that was only done on mouse hover.
So, but a, the actual user actually still needed to be able to tab to it to read the text of it and they needed to be able to close it with a keyboard which we couldn’t do before. So we updated it so when you hover over it stays there the screen reader can actually make it into that little pop up. Which is not doesn’t have a focus trap or anything like that or a close button. And they can read that text and they can hit the escape key and it’ll actually close that little pop up. So I think that’s what …
Amber: Yeah, that was a WCAG enhancement that we resolved that we realized, whoops, this failed. And I will say props to the person, I don’t remember her name right now, that flagged that for us because we missed that in our own testing and which is the reality sometimes. But we really appreciate when people flag issues for us and then we can resolve them. But yeah, it’s interesting. That is, it functions a little bit like a pop up.
Steve: Yeah. I think another example might be a notification, right? Yeah. Okay. Like a notification with an ARIA live on it is a pop up, but it’s not like keyboard focusable, right?
Amber: Yeah, like what we talked about on the episode of Accessibility Craft, where we were talking about building out our multi site add on. We had a good conversation with William, so people can go look for that about snack bar notifications. These are another kind of pop up.
Are popups evil?
Amber: It comes in. I know you were going somewhere with this question about pop ups, Chris. Where were you going?
Chris: !It’s still fascinating. No, I was gonna ask, and you alluded to what I was hoping you would say, Amber which was, that it, that some versions of pop ups, at least in the popular connotative definition of a pop up they like rip the user away from what they were intending to do, right?
And steal attention, maybe they steal keyboard focus if they’re doing it right, or they just completely trap the user if they’re doing it wrong. But my root question is, are pop ups fundamentally bad for user experience, no matter how they’re implemented?
Steve: No, you gotta say evil.
Amber: The ones that are not action triggered.
Chris: Evil, yeah.
Amber: The evil, Steve holds up the Evel Knievel drink.
Chris: What do y’all think? As the people who frequently design …
Amber: I’ll speak to this first. I, all right I am trying to dig real quick because I didn’t have that number right in front of me, but I have battled with this because we have one on our own website.
We have a pop up. Not on the entire website, on the blog posts and our documentation in a specific category for accessibility checker that gets a lot of traffic because they rank well in SEO in SEO in Google. And so I ended up putting a pop up there to try and get more people to download our ebook about accessibility for small businesses and in WordPress and which of course, gets them on our email list.
We did screen reader test it with a blind person before we published it live. But I, in my heart, I was like, is this horrible? And I still have moments when I think, is this good? Is it not? We, but I do want to say we do get a lot of email subscribers off that and as an example, I’m just looking right now at our form entries, I have a form for that blog post that has that ebook and it has 170 entries.
And I have a form that has the pop up for that exact same lead magnet and it has 302 entries. So it works. And are they evil? What do you think, Steve?
Steve: I mean, there’s a personal preference and then there’s what works for business. And so, so my personal preference is I hate pop ups, right?
Hate them, right? I think like the pop ups for cookies and all it’s just too much. But like from a business standpoint too, yes they convert and they convert for a real good reason. But like the piece that you might be living, leaving out a little bit is that, is it converting just for the sake that it’s a pop up or is what we’re offering through that pop up?
You give us a little email and we give you this. This magnificent ebook, like 50 page book, 50 page ebook. I dunno what it’s that we that we labored on a lot and put a lot of money into. So there’s a lot of value in, in that trade off for a pop, a little bit of a popup in your face, give an email and you, you get a lot of value out of it. Now if you’re just asking for an email with nothing in return, I think it is a little bit of it’s not cool, right?
Amber: I will say so I’ve debated this and I’ve never said I haven’t said this to you guys yet But I’ve been thinking a little bit about maybe changing what triggers it. So i’m curious we could do this live right now on podcast. Surprise. So right now I think it’s set to trigger maybe just like five seconds after page load or three seconds, like it’s really fast.
And the reason why I did that is because so this is a custom coded, it’s using a plugin, which is pop up maker. I’ll say that right now. I do think pop up maker does a really good job as far as accessibility, but the page loads, it pops up. If someone closes it, it returns focus to the top. So to like the skip link.
Which I think is really, that is the user experience that makes sense in that scenario because they’re, they expect to be at the top of the page. And that’s what we tested with the blind tester who tested it for us before we made it live for everyone. And he’s yeah, I think this makes sense and it works.
And he said, okay, it’s all good. So we made it live, but I’ve been thinking from the marketing standpoint that maybe we would have better conversions if we weren’t popping it up right away. If people could experience whatever was on the page that they came for first and then either like delay trigger it or maybe trigger it on exit intent, although that’s a little weird because I don’t know if it exit intent.
With Pop Up Maker, I’ve never investigated this, if it’s only mouse driven. So it would literally never pop up for a keyboard user because there is no, quote, exit intent. I don’t know. And, cause I’m thinking maybe we would get more conversions, but then the weird scenario is, where do we return someone to if it pops up when they’re in the middle of a page?
We have to try and figure out where they are? I don’t know, I’m curious what you guys think about that.
Steve: Yeah yeah I’m thinking programmatically, like what the, since you said that, I’m like you could track the last focused element and then store that.
Chris: And I was wondering the same thing. That would be possible. But …
Amber: Would we be able to do that? Would we ask Pop Up Maker to do that? Is that go to them and see if there’s feature requests or is that something we just need to do on our own website?
Steve: It may already do it. I don’t know. We’d have to test it, I think, and see what happens.
Chris: I mean, yeah, if you’re going there to engage with a specific piece of content, which isn’t always the case, sometimes you just have a general sense of curiosity when you’ve clicked on something and no specific mission that you’re going there to do, I would say if you’re in column A where you’re there for a specific thing, it’s going to feel like an interruption. And that frequently does for me when I’m going there to do a certain thing, and then this thing pops up.
And actually I just posted in our private chat that I want to wrap this episode up soon, but now I’m going to go down a tangent because I think it’s actually super relevant. So I just logged into our bookkeeping platform Xero today because I do bookkeeping on Fridays and Fridays when we’re recording this and they’re promoting this new feature where they’re rolling out bill pay.
Internally in their bills platform, which historically has just been for tracking your upcoming expenses, right? And mapping them to transactions and trying to forecast. They have this bill pay thing and what they’ve done is they’ve added a column, a very disruptive column to the far right hand side of the bill pay view, where normally all the amounts would be, and it’s just a button over and over. Pay bill. Even though I haven’t opted in.
And I went into customize my columns, on this feature, and they have grayed out or removed my ability to remove their new pay bill column for this feature they’re trying to introduce. And so I’ve already reached out with the support ticket. I’m like, this is you’re objectively making my experience worse as a paying customer to promote your new, service that you’re trying to sell.
I get you’re a business, but this isn’t acceptable. You need to let me disable this column.
Amber: So do you think pop ups, objectively make people’s experience worse on websites?
Chris: Having just literally had that kind of visceral experience where I’m trying to do something and your BS website software insert thing here is interrupting me.
That is a very visceral feeling. If you’re going to somewhere for a purpose and they’re just like, Hey, new shiny. Look at this. Like it’s it’s super, it’s horrible. It’s horrible. So yeah, I, I love the idea of delaying and maybe looking at, what is the average time a user is spending on the page?
Can we try to target when our pop up appears to around or just slightly before that time, right? And I don’t know, there’s also like the slide in pop ups from the bottom that are less obtrusive which probably also convert way less, I don’t know.
Amber: So that’s an interesting thing on those because. Those can be visually less intrusive, but if you want a blind person to know that they’re there, you still have to shift focus to them.
Chris: Yeah, so for a blind keyboard user, it would be the same thing, effectively, because their focus is going to get shifted and their screen reader is going to read it out.
Yeah.
Amber: Yeah.
Chris: I don’t know. That’s my story.
Amber: It’s hard. That’s your story. That’s your trauma for today.
Chris: Yeah, that’s my trauma.
Steve: Yeah, it’s all a trade off. I think it’s like what Chris is talking about. He’s talking about a service that he, that we’re already paying heavily for. And a website, a lot of times is a free transaction.
And if what we’re, what’s behind that pop up is of real value and that we think that the education that can be gleaned from that, that PDF ebook is worth a little bit of an annoyance. It’s probably worth it. As long as, like you said, it’s easily dismissible, it’s the modal itself is accessible, . It’s really bad if you pop it up and then a keyboard user has no way to close it or get it right,
Amber: Or even get to it. Like they’re sighted, they can see it.
Steve: Yeah.
Amber: They can’t find it to close it because it didn’t shift their focus in, that’s probably the biggest issue there.
Chris: Yeah, and I guess that’s really my root problem.
It’s not that it’s interrupting me. It’s that it won’t stop interrupting me, right? And so that’s really the issue. If Xero had allowed me to just remove the column, I’m like, okay, yeah, I get you’re selling this thing, remove. I would not be, I would have not taken the trouble to go write them a support email.
But it’s because they’re literally not allowing me to customize my view and dismiss this new thing they’re trying to sell. And so I guess, yeah. And you’re right, Steve. If you’re. If there’s a value, if there’s an exchange of value that’s probably lopsided in the favor of the person who’s putting their email in.
That’s, that probably makes it a little bit more fair game. I don’t know. Amber, do you have any closing thoughts? What do you think?
Amber: It’s so broad. Okay, my closing thoughts are all modals and popups should be accessible. I think there are cases where it is okay to do a popup as we have done on our own site. Obviously, I’m not a hypocrite, right? I think there are legit instances in which users do want them. As long as they’re, figure that, they’re disruptive, but a user can return to whatever they were doing, I think maybe it’s okay. I don’t know. Also, my closing thought is, if you drink more of this beer, you go from in the middle to thumbs up.
Steve: I doubt it.
Chris: I will say, I’ve only had a third of my pint glass and I’m feeling a little bit of that 9 percent already.
Amber: You just haven’t drank enough sips there, Steve. You will like the flavor better. Yeah.
Chris: Let’s see. Now that it’s warmed up, how is it?
Steve: It’s gross. It’s gross. It’s, it’s still bad.
If you chase it, it’s a lot better. Just both of them. It’s the same time like.
Chris: Pop ups, maybe not evil, but should be accessible.
Amber: Yeah. Yes, they may be evil, but they should be accessible.
Steve: I think like Evel Knievel, right? Evel Knievel was, a super cool dude and he would pop up off those ramps and he, sometimes he would just hit the landing smooth. And I think you can do the same thing. If you think about modals from an accessible standpoint. If you don’t think about accessibility, you might be that time that like that time that Evel Knievel jumped and missed and broke all his bones in his body. He popped up, but it didn’t go well.
Amber: And that’s our closing.
We’ll see y’all in two weeks.
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.