008: Your Website Makes Me Want to Puke, Pentire Margarita

By /

Listen

In this episode, hosts Amber Hinds, Steve Jones, and myself, Chris Hinds, talk about the trend towards having lots of animation and movement on websites, why that might be occurring, and the adverse impact it’s having on accessibility overall.

Mentioned in This Episode

Tweet discussed during episode.

Transcript

>> CHRIS HINDS: Welcome to Episode 8 of the Accessibility Craft podcast, where we explore the art of creating accessible websites while trying out interesting craft beverages. This podcast is brought to you by the team at Equalize Digital, a WordPress accessibility company and the proud creators of the Accessibility Checker plugin. In this episode, hosts Amber Hinds, Steve Jones, and myself, Chris Hinds, talk about the trend towards having lots of animation and movement on websites, why that might be occurring, and the adverse impact it’s having on accessibility overall. For show notes and a full transcript, go to accessibilitycraft.com/008. Now, on to the show.

>> AMBER HINDS: Hey, everybody. This is Amber and I’m here with Steve.

>> STEVE JONES: Hello, welcome.

>> AMBER: And Chris.

>> CHRIS: Hey, I’m here.

>> AMBER: Hey, so I am excited. We have a fun topic today. It is, “Your website makes me want to puke,” and we’re going to talk a little bit more about what that is in a minute. Before we make ourselves nauseous, we’re going to have a drink-

[laughter]

>> AMBER: -which seems like sometimes that happens in that order. [laughs]

>> STEVE: Yes, before the ice melts.

>> CHRIS: I’m hoping this drink won’t result in nausea unlike some of the website features we’re going to be talking about. What we have today is called the classic margarita from Pentire coastal botanicals. This is a non-alcoholic mocktail that’s essentially supposed to be like a margarita. They say it’s a blend of lime agave, sea salt, and a dash of Mexican chili. It’s supposed to be very much like a margarita.

>> AMBER: We are drinking this. I suggested one of their drinks. You picked the one. Because on the way back from WordCamp Birmingham camp, on my flight, I always get just club soda on the flight. Well, I asked for club soda. I got a club soda that was this brand, which was surprising to me because, normally, they give you cheaper name-brand club soda, but not a unique craft beverage.

Then later that afternoon when I was home, I was on Facebook. I was getting ads for this brand. [chuckles] I swear, I did not look it up. They have, I don’t know, a marketing deal with the plane. They can tell that you were on the plane that their drink was served or something or my phone was listening to me and it heard me say “club soda,” and so it knew I ordered it. I don’t know. [laughs] I’ve been stalked by their ads, so I was like, “Well, maybe we should give them some money, I guess.” [chuckles]

>> CHRIS: If you look at the back of the bottle, it’s a cute little bottle, right? We don’t always describe the bottle early. Steve, do you want to be our bottle describer today?

>> STEVE: Sure. As Chris said, it’s a cute little bottle. It’s a glass bottle, has a label on the front, “margarita.” What herb is this that is on that image, that little image there? Is that an herb?

>> AMBER: I don’t know. It might just be an illustration. [chuckles]

>> STEVE: It’s got to be something in the drink, right? It has a little herb there as I said. It says, “With a dash of Mexican chili,” with a little chili icon. Then we got the basic stuff on the back with description and nutrition.

>> AMBER: You know what I thought was interesting? On the front, on the side, they have this botanist with the signature of, I don’t know, the person who grew our botanicals that were included in the drink. It’s like they’re very clearly going for artisan on this. I feel like they have a little signature with them. You can’t read it, so it’s probably fake.

>> STEVE: Yes, certified B Corp.

>> AMBER: Oh, are they?

>> CHRIS: I don’t know.

>> AMBER: That’s cool. I see the logo on the back.

>> CHRIS: On the bottle, they have a serving suggestion, which was to have some lime and chili in there with it. Amber and I did that. For the listeners’ benefit, we have a lime squeezed in it. We’ve got this poured out over crushed ice and then I had a serrano pepper laying around, so I took a couple of slices of that and crushed it with the flat of my knife and stirred it in two hours. Amber and I are having it according to the serving suggestion on the rocks.

>> AMBER: Well, I asked him to leave me a little bit because I want to taste it before he made it spicy.

[laughter]

>> AMBER: Maybe we should do that. We should taste it. I have a little half-shot here of it that is just like the way it is out of the bottle.

>> STEVE: I don’t have anything–

>> AMBER: Let’s take a sip.

>> STEVE: I don’t have anything fancy. I’m doing it straight up as well.

[laughter]

>> STEVE: You can definitely taste that.

>> AMBER: Steve, you made a face.

>> STEVE: You can definitely taste the chili.

>> AMBER: It’s not spicy, is it? Oh, maybe it is at the end.

>> STEVE: Yes, I think so.

>> CHRIS: Yes, it has a little heat on the finish. It’s interesting. It’s definitely not sweet. You get the lime. It comes through pretty heavy. There’s definitely the undertone of that earthy, astringent, chili flavor definitely comes through, but there’s not a whole lot of– Granted, I’m not very sensitive to heat in capsaicin because I eat a lot of spicy food, but I’m not getting a lot of burn.

>> AMBER: I don’t think it’s spicy. Honestly, I actually think, no, and that was me drinking it plain before you added a bunch of serrano pepper stars. [laughs] It’s kind of perfumy to me. That’s the word. I don’t smell it as much perfumy. When I had it in my mouth, that’s the flavor. I don’t know.

>> CHRIS: It’s hard to place what that underpinning flavor is, but it’s definitely not just like your typical margarita where it’s like lime salt, sugar, tequila, right? I think it’s the botanicals. Maybe it’s whatever that funky herb drawing is on the front. Amber has the bottle, I don’t, so I can’t see it.

>> AMBER: The actual ingredients are water, agave syrup, lime juice from concentrate, natural flavoring, Pentire plant blend, and Cornish Sea Salt. I’m guessing their plant blend is what they’re doing to try to mimic an alcohol flavor maybe. For people who are like, “I like tequila in margaritas,” which I don’t totally get a tequila flavor. I don’t know how you would.

[laughter]

>> AMBER: Tequila is just burning anyway. [laughs] I don’t know. Whatever that is, which they probably don’t have to give you the ingredients because it’s proprietary or something, but it tastes like perfume. [laughs]

>> STEVE: You ever got furniture polish in your mouth? [laughs]

>> AMBER: No, have you?

>> STEVE: I don’t know. Maybe. When you’re spraying it, I don’t know. Okay, so I’m the least versed at this kind of things, right? For me, it’s off-putting. I don’t want to keep going for more.

>> AMBER: Well, that taste lingers. That’s the thing about it. Wait, I have some salt because–

>> CHRIS: I’m going back for more and I wonder if some of that undertone is maybe rosemary or maybe if that’s in their herb blend. I feel like that sharp herbaceousness that lingers, I wonder if rosemary is maybe part of their blend.

>> AMBER: I don’t know.

>> CHRIS: It’s hard to place though. It is strong and it does stick with you though.

>> AMBER: I like margaritas on the rocks and I like salt with it. I have some salt and I just tried a little salt and then had a drink of it, wondering if maybe that would help, but I actually think it erased some of the limey and it just left me with a perfume. I don’t know if I’d recommend putting salt on the rim of your glass with this drink.

>> STEVE: When you say “perfume,” are you referring to the chili like the–

>> AMBER: No, I don’t think it’s– Honestly, it tastes like how I imagine a woman’s perfume tastes. [laughs]

>> STEVE: Or furniture polish.

>> AMBER: You said “furniture.” I said “perfume.” It’s floral-ish to me. Maybe it’s rosemary. I don’t know. I got to try that again.

>> CHRIS: I don’t think it’s just rosemary. There’s got to be more to their blend because it’s a heady combination of different things.

>> AMBER: Once you said “rosemary,” I taste the rosemary now. It’s actually heavily rosemary to me now that you’ve said that.

>> CHRIS: That can happen sometimes. If someone says a flavor, then you taste the flavor. I was really digging deep to come up with a name for what I was tasting. They may or may not have rosemary in their blend, right? It’s all subjective, which is what’s fun about tasting these things where you don’t quite know what’s in it.

>> AMBER: Also, we could just make it up. [laughs]

>> STEVE: It does leave a little bit of a tingle on my tongue after a bit, after a few.

>> AMBER: Yes, maybe that’s the chili a little bit. I don’t know if I really get that as much off the plane, but I think it is improved when you add lime juice and muddled hot peppers. I do not think it’s improved with salt. I think salt is one of the reasons why I like margaritas. [laughs]

>> CHRIS: One thing I will compliment them on is that they’ve gotten down the heavy herb extract and getting that flavor to come through, whereas I can think of a previous botanical drink we tried that was just really weak and just like water basically. This one–

>> AMBER: When you look at this, it tasted like water.

>> CHRIS: This one is like, it hits you as far as the flavor and it stays there. I don’t know if I personally love the flavor. It’s very earthy and mature and not light and fun. It’s like a thinking drink or something.

>> STEVE: That’s a good way to put it.

>> AMBER: I’ll also give them, I like that it’s not super sweet. That’s what I get nervous about with any margarita. I only drink margaritas at restaurants where they make their own stuff. Because anytime you get a margarita mix like margarita flavoring off the shelf from the grocery store or something, it is incredibly sweet. I like that this feels more balanced. It has a little bit of sweet, but it’s not like kick-you-in-the-face sugar. Would you guys drink it again?

>> STEVE: No.

>> CHRIS: No, I might try some of their other stuff though, given this one that they’ve figured out how to get some flavor into that bottle. Maybe some of their other combinations are more to my personal taste.

>> AMBER: Their club soda tasted like club soda, [laughs] but it was a quality club soda. I don’t know if I would buy this again, but I definitely am with you, Chris. I would try their other stuff. I’m intrigued. It’s flavorful. It’s not watery. It’s an interesting drink that I want to think about.

>> CHRIS: With the level of stalkerish marketing that they’re able to pull off, they’re probably listening to this podcast right now somehow as we record it. They’re getting their feedback direct.

>> AMBER: We are all going to get ads now. [laughs]

>> CHRIS: They’ve bugged our houses.

>> AMBER: Oh, Steve has a chaser. You really don’t like it?

>> STEVE: Yes, I’ve chased it four or five times already. My tongue still is tingling. I don’t know. You’re not getting–

>> AMBER: What are you chasing it with?

>> STEVE: Diet Coke? [laughs]

>> AMBER: It’s not washing away the flavor?

>> STEVE: It’s not washing away the flavor.

>> CHRIS: Tingling. That’s a little worrisome. On today’s episode of Accessibility Craft, Steve discovers a new allergy.

>> STEVE: Yes.

[laughter]

>> AMBER: Oh, I hope not. Okay, stop drinking, Steve.

[laughter]

>> CHRIS: Oh, man.

>> AMBER: Talking about things that impact us more than we expected, that is actually a pretty decent segue, I think, I wanted to talk about movement on websites and accessibility. There are a lot of people that have vestibular disorders. I think I saw one large study that said as many as 35% of adults in the US over the age of 40 or 69 million people have some sort of vestibular dysfunction, which for people who are not familiar with that, that’s something typically related to the inner ear, but it impacts balance. You can have dizziness.

Some people have chronic dizziness. This is something that one of my friends who’s deaf has also mentioned. A lot of people who are deaf also have balance issues. Not everyone, but a lot of them do. There’s different effects that we can put on websites to make them look fancy like parallax, video backgrounds, other sorts of animations, whether they’re fade-ups or fly-ins or other sorts of things that I think can really bother people. Then incidentally, yesterday, I saw a tweet from someone I follow and we’ll link the tweet in there.

She said that she was on a website doing their signup process and it had a background that looked like stars that were moving all around you. She said that it made her feel incredibly nauseous. She wanted to throw up or maybe she was going to pass out trying to create an account because this movement was happening and there was no way to stop it, or visual effect. I guess that appeared to be like movement. I thought that would be an interesting thing for us to sit and talk about.

>> CHRIS: Yes, I’m going to let my inner nerd show a little bit here, but it’s tangentially related. I’m having trouble saying that word. Maybe my tongue is numb from the herbal cocktail, which is a drink. I’m not sure.

>> STEVE: That’s what it is.

>> CHRIS: In the VR space, virtual reality headsets, so I’ve got Oculus Quest 2. One thing that comes up a lot is if the games themselves don’t hit a certain frame rate or don’t do certain things to tamp down on or alter the state of motion that would be displayed to someone on that immersive of an experience. Even just everyday people will fall over or just puke on the spot, right? Especially in the early stages of VR, I’ve been following this for a while, it was a serious problem. Now, we’re seeing all this movement and whiz-bang stuff on websites too. We’re hearing about similar issues.

I think to expand on that a little bit, you know what they did to tamp down on that is, basically, any sudden motion or any sudden shifts in focus or falling or anything else, they would gray or blacken the edges of the viewport area to the point where you’re only seeing through a pinhole essentially so that you’re perceiving less motion. Let’s think about that for a second as it relates to websites. How do we correct this while we display less motion? That’s how all the bigwigs in the VR space had to solve the problem is they basically canceled out the sudden movements and the sudden visual transitions.

>> AMBER: Do they put warnings in VR?

>> CHRIS: They do. Certain games will have warnings on them saying, “Hey, people who have inner-ear issues or who are prone to nausea may not like this game very much,” and even frame rate. If you have something that’s a choppy frame rate or you have someone that’s on a lower-end system looking at some of these websites with a lot of animated elements, even a lower frame rate can cause issues. If you have a low-performance system, you’re exposed to this even more.

>> STEVE: Yes, it’s very interesting.

>> AMBER: Yes, so I think that’s interesting to think about. We could probably have a whole episode maybe at some point where we talked about accessibility in VR because I feel like there’s a lot that they have put into or started to think about how to make VR accessible. It is interesting. Some of that stuff really does apply even beyond websites, right? The web content accessibility guidelines that goes beyond that. First of all, before we even talk about what these are and how to handle them, I’m curious if either of you have a thought on why do we think clients ask for these kinds of things on websites, or why do we think designers are like, “Ooh, let’s do this and this and this”?

[music]

>> STEVE: This episode of Accessibility Craft is sponsored by Equalize Digital Accessibility Checker, the WordPress plugin that helps you find accessibility problems before you hit publish. A WordPress native tool, Accessibility Checker provides reports directly on the post-edit screen. Reports are comprehensive enough for an accessibility professional or developer, but easy enough for a content creator to understand. Accessibility Checker is an ideal tool to audit existing WordPress websites, find accessibility problems during new builds, or monitor accessibility and remind content creators of accessibility best practices on an ongoing basis.

Scans run on your server, so there are no per-page fees or external API connections. GDPR and privacy compliant, real-time accessibility scanning, scan unlimited posts and pages with Accessibility Checker free. Upgrade to a paid version of Accessibility Checker to scan custom post types and password-protected sites, view site-wide, open-issue reports, and more. Download Accessibility Checker free today at equalizedigital.com/accessibility-checker. Use coupon code “Accessibility Craft” to save 10% on any paid plan.

I think the clients ask for that because everybody’s looking for the wow factor, right? Everybody wants to have their business look the best to be the trendiest. Maybe the motion that is being added to it is getting them more attention. Visual people or sighted people are very, very visual, right? We like pretty things. We like things that catch our attention. Maybe that’s one of the reasons why.

They’ve got to be doing it for a reason because, like we said with that tweet, GitHub’s huge, owned by Microsoft. Apple, they’ve got some really crazy animations on their website specifically when you go to the latest iPhone page, right? There must be some big benefit to investing in those animations because even the development of those animations is costly, time-consuming.

>> AMBER: Do we think that having motion animations on a website makes it look more professional?

>> STEVE: Not necessarily. I think it could go the other way if it’s not executed properly.

>> AMBER: I just loaded the iPhone web page because I wanted to look at it. What I think I noticed differently about the– so I’m looking at the iPhone 14 page, is that there are a bunch of animations on this, but they’re all controlled by scroll.

>> STEVE: Right.

>> AMBER: It has a lot of interesting movement on how– It almost makes it appear that the frame is static and the content is coming in as you scroll rather than you’re scrolling to the content. I don’t know if that makes sense. What I think is a little different here is that if I don’t like it, I could stop scrolling and it pauses if I need a break. Now, I don’t know if they have an option that’s like, “Just get this information,” because what if it bothers you as you— You want to get further on the page, but scrolling really bothers you. That certainly seems like it could be a problem, but I do appreciate that it’s only actually triggered when I engage with the page.

>> STEVE: Yes, I can imagine us as an accessibility company being approached to audit a page like this. Can you imagine that? Just in the realm of contrast, how do you account for contrast at scroll point? So many pixels down at a scroll point, right? There’s a feeding gradient coming up from the top and there’s black text that’s being revealed, right? You’re then accounting for contrast at every pixel.

>> AMBER: Well, actually, this page fails color contrast even.

>> STEVE: Yes.

>> AMBER: They have texts that it’s in light blue, purple, and pink gradients. I bet they’re like, “I’m looking at this, watch the film–” Well, okay. Oh yes, that’s interesting because lower on the page, they’re like a lighter blue and then those links become a darker blue as they get higher up. The gradient types probably fails no matter what. What would be interesting to know and I probably can’t do this in the middle of our podcast, but something I might follow up on is if I go set my system to prefers-reduced-motion, how does this page load differently for me?

>> STEVE: Yes, not to interrupt, but I actually did a little bit of testing on that before the podcast. I was testing on GitHub.com’s homepage and on Apple’s iPhone 14 or 15, whatever we’re on, 14 Pro. If you do enable reduced motion in your system settings, the animations do stop.

>> CHRIS: Oh, that’s good.

>> STEVE: Just a little primer on that before we get too far down. In your system settings, on a Mac, you can go to your system preferences, display, accessibility, and you can toggle on reduced motion. What this does is the browser will inherit that. It will send a media query to the page that the developers of that page can then use that prefers-reduced-motion media query to modify the styles on that page for that preference.

You can create a listener in JavaScript to catch that and then maybe not execute certain things like if you’re using JavaScript to make a slider or some kind of carousel of sorts. That’s just a little primer on that, but it’s on the developer to utilize that to respect that setting that the user is setting on their system.

>> AMBER: For sure. I think that’s probably one thing that is very overlooked, especially in WordPress’ lens. I don’t know how many even theme developers that are making themes that are used a bunch. I’ve never tested. Has anyone tested any of the page builders? We were talking about Elementor recently. They have a ton of motion. If you have that turned off, does it just not happen or does Elementor not even pay attention to that?

>> STEVE: Yes, I’m not sure. That’d be a good test. Not to beat up on Elementor again, but–

>> AMBER: [laughs] Yes. No, I think it’s not just them. I think there’s a lot. We probably only started doing this a few years ago, right?

>> STEVE: Yes.

>> AMBER: I think a lot of people just don’t know that it’s something you can do.

>> CHRIS: Yes, I would make the argument too that it’s a “monkey see, monkey do” type situations in terms of people looking at the trendsetters like Apple, looking at things like the Webby Awards. If you look like the types of websites that get awards on that, they tend to be pretty outlandish in terms of their user experience and what happens when you scroll and everything else. I don’t know how much care is put into accessibility on some of those, right? It’s like Steve mentioned.

It’s chasing the next trend or differentiating yourself or marketing pros, right? Creative directors and designers trying to put the next feather in their cap or the next trophy on their shelf and not really necessarily thinking deeply about user experience. Then everybody else picks up on this and they’re like, “Okay. Well, I guess this is the trend if we want to look trendy, if we want to look appealing in the overall marketplace when this is what all the big players are doing.” Well, now, we’ve got to have all of this animation. We have to have all of these things that are scrolling funnily and making our users puke.

>> STEVE: [laughs] No puking. Another take on that too is where these corporations are spending. They’re hiring really high-end developers to work for them. They’re spending lots of dollars on the development of these features. At the same time, their websites have simple accessibility issues, or they may make the excuse that we don’t have time to focus on that or we don’t have capacity to focus on all that accessibility. It’s like you’re going to spend all this time to make these animations but not have an accessible website to start out with.

>> AMBER: I want to push back a little bit on this idea. I try to do this with clients a lot during discovery calls that adding motion makes a website look more professional, or even standing out or making your business make a mark. Why don’t you have really great content to make your business make a mark, or if you have a product like have really, really great product photography or mockups, or if you’re service-based like real photos of your team instead of stock photos?

Those sorts of things, I think, are what ultimately will make things stand out as opposed to– Do people say, “Oh, this is an interesting scroll experience”? I don’t know. I know we spend a bunch of time looking at this stuff, right? I go on a website and I see it. I’ll play with it and I’ll inspect the code, but that’s because this is what I do. Does my mom, if she’s trying to research a new iPhone, spend time even noticing that? Probably not, right? She’s going to care more about the pictures of it or the list of features or something.

I don’t know. I don’t see the benefit that there really is a true benefit to having this kind of motion that just having a really nice professional design that works at all screen sizes wouldn’t also achieve. There was an article and this goes to it because I had someone ask me recently about parallax, one of our agency partners. I was like, “Can we have parallax on websites and be accessible?” That’s what they asked. I was like, “Well, if you had it prefers-reduced-motion, then it doesn’t show up maybe.”

We can circle back to this on whether that’s actually sufficient. I found this article from the Nielsen Norman Group, which they do a ton of user experience research about parallax. They basically found that it’s not worth it. It doesn’t actually provide extra benefit versus the effects that they found with people reporting like vertigo, nausea, dizziness on websites. Maybe can you have it in a small side part or something like that? Ultimately, the benefit or the impact it brings to conversion rates, it’s not there.

>> STEVE: I’ve never really been an advocate for parallax. I’ve never liked it even from a development standpoint, right? Because a lot of this parallax, they’re hijacking the native scroll of the website. You get that jitter as you scroll down because it’s not from the built-in browser. It’s JavaScript mimicking the scroll feature. I’ve never liked it. I’ve always felt like it creates a jitter when you scroll down or it just creates performance issues on the site, and for what?

For a background that moves slightly at a different speed than your scroll speed? Even to some degree too, I would advocate, depending on what the background is against even fixed backgrounds, right? If you have maybe a starfield or something like a space image in the background and then people are scrolling white texts on top of that, that can be a little disorienting too.

>> AMBER: Yes. Honestly, I think background photos even should be minimized to some effect because it gets challenging with color contrast and true readability. On any important text, I wouldn’t put a photo behind it. Maybe accent texts.

>> CHRIS: You pretty much have to stick some sort of overlay over it or something that makes the photo barely visible to begin with if you’re going to have text in front of the photo.

>> AMBER: Then what’s the point?

>> STEVE: Right. Well, and too, when you bring in mobile, right? Look at your analytics. What is your audience using primarily to view your website? Is it a mobile device? These animations, sure, you might be able to achieve them on a mobile device. Typically, they’re reduced quite a bit on mobile anyway. If 80% of your traffic is on a mobile device, you’re wasting development time and making all these animations.

>> CHRIS: If I think about 99.9% of my use cases for websites, it’s me trying to access a function or a piece of information. I’m not there to look at the pretty colors. I’m not there to feel impressed by the quality of their animations. I’m there to do something or absorb information. Yes, there’s the other way the pendulum swings, right? You can’t have grainy photos and bad fonts and look like something from GeoCities from 1990. I like the happy medium. I think that’s what we’re all saying in different ways. I like the happy medium where we’re observing quality, but we’re not taking everything to the nth power in terms of excessive, fluffy stuff on top of the user experience.

>> AMBER: Let’s say client wants it, designer wants it, there’s going to be motion. We talked a little bit about prefers-reduced-motion. The other option, which would apply to background videos or something that just plays automatically, of course, is we have to have a pause or a stop button, which web content accessibility guidelines require that if it plays for more than five seconds automatically, which pretty much means anything that plays. [chuckles]

[crosstalk]

>> STEVE: Sorry. Even animated GIFs, right?

>> AMBER: Yes, an animated GIF. I think that’s why you see too on social media. A lot of times, they don’t play by default, or you can tap it and pause it. Yes, so a GIF would be the same thing. You shouldn’t use looping GIFs that can’t be stopped. I’m curious. If you have prefers-reduced-motion queries in your CSS, do we think that’s sufficient? Because do we think enough users who might have these problems actually know they can turn that on in their system? I have a side note on that because I was looking at a DQ article about parallax.

One of the things they said is maybe you have a warning right up at the top where someone could click and opt out of parallax when they load the page, which made me laugh a little bit because I was just like, “Why?” [chuckles] I’m curious what you guys think. Do we think, “Well, we have a motion, but we’re going to do prefers-reduced-motion and that’s fine,” or would it be better to have that button that’s like, “I didn’t know I could turn this on in my system, but I could pause all the animations on page,” or something like that?

>> STEVE: I don’t know how philosophical we get with that question, right? Who is the onus on? Is it on the developer who should be aware of what reduced motion is or is it on the user who may not be aware of what reduced motion is? On one hand, I think if we create these animations and we respect the reduced motion, we turn it off if it’s on. I think we’re taking the right steps, right? At the same time, if that user doesn’t even know that that setting exists, I don’t know that’s difficult.

I feel like from a development standpoint and a company standpoint, we’re doing the right thing. If somebody really has issues with nausea, if this website’s going to make them puke, I would hope that they’ve been given the education somewhere on the web that they’ve come across that they have the ability to have a say in whether or not that motion’s there. Like I said, again, that’s on a per-site, per-developer basis, right? They have to respect that. I could see the frustration if I was one of those people that suffer from nausea from parallax websites. I have reduced motion turned on, but nobody’s respecting it, right?

>> AMBER: I must wonder if that should be a browser setting and the browser should just override the website. Would that be possible or would the browser not know how to do it because of the code, which would be so unique in every case?

>> STEVE: You’re saying if you set reduced motion at the browser level, but then the–

>> AMBER: Or the browser recognizes you have it set and the browser kicks in to be like, “Oh, this developer didn’t build this. We’re going to strip all the motion.”

>> STEVE: I could envision that breaking a lot of websites.

>> AMBER: Because it would just start turning off JavaScript and CSS?

>> STEVE: Yes, who knows where that JavaScript is in queued if it’s in its own file, if it’s in a file with a whole bunch of other stuff? I could see that being very difficult.

>> AMBER: Does that mean we need the little button [chuckles] for those users that don’t know how to turn it on?

>> STEVE: Yes, maybe.

>> CHRIS: It is a weird, somewhat philosophical question, right? If your design decisions require a warning label for a not-small subset of people, we’ve got, what is it,

5.1%, about over 10 million US adults who have some sort of chronic balance problem or a chronic dizziness issue. At least that’s according to the National Institute on Deafness and Other Communication Disorders. If you’re making decisions that require a warning label when they’re avoidable, I would challenge that group of people or that individual designer to reevaluate their choices.

>> STEVE: It’s always like I have this knee-jerk reaction whenever somebody suggests putting another opt-in or opt-out on a website because we’ve got so many already opt-in for cookies for GDPR. Now, I got to opt in for motion or opt out for motion. Yes, it’s getting pretty crazy.

>> CHRIS: Yes, and then there’s the chat bubble that talks to you when you don’t want it to and there’s a–

>> STEVE: There’s a pop-up to sign up for the email newsletter. [chuckles]

>> CHRIS: That’s a good point though because we are getting so accustomed to websites like flashing all this stuff at us, right? Who’s to say, even if you put a warning label up, are they actually going to perceive that? If you’ve also got the cookie banner and the chat window, and the “engage with us” on social, and whatever else. Your subscribe pop-up when they go to the X button because they’re already about to vomit. It’s a lot.

>> AMBER: Yes, it is a lot.

>> CHRIS: A lot to put on the user.

>> STEVE: I feel like the avenue to solve this problem is definitely respecting the reduced motion of the user’s system settings, right? There may need to be an education component to that too for people when they set up their Macs. I know now when you set up a Mac, I think it comes with the accessibility on by default, the voiceover on by default. Maybe Apple and Microsoft and Dell and all of them when they’re making their computers, maybe on setup, that could be part of the education process or the wizard that they’re going through that, “Would you like to enable reduced motion on websites?”

>> AMBER: Yes, that’s an interesting question of who the onus is to educate on that. It is obviously probably the fastest way is what you’re saying, which is making that part of the setup process for a new computer. I have no idea. I wonder how much doctors are aware of things like this, right? I’m assuming if I develop some sort of problem and I’m noticing that websites are making me feel like I’m going to throw up or pass out or really dizzy, at some point, I might go to the doctor, right?

Would a doctor even know? Because they don’t know tech, but that would be a place that you’d think, they would be like, “Oh, okay, let’s figure out your problem. Can we solve it?” If they’re like, “Oh, this is a chronic condition. There’s nothing we can do,” but there’s a setting you can turn on in your computer, right?

>> STEVE: Yes, I think maybe as younger doctors come up, maybe that’ll be more part of their practice, right? I could see nowadays, even eye doctors, ophthalmologists, I’m sure they have to be aware of eye issues from mobile devices. Maybe the tech and the health industry are going to catch up with each other at some point.

>> AMBER: I was looking at the Understanding Docs for WCAG for Animation from Interactions. Down at the bottom in related resources, they have links over to how to turn it on in Windows 10 and Mac and iOS. Maybe if the information is googleable, that’s enough, as long as it has good keywords for what people would search because they won’t search for that, right? Can I make motion stop on websites or how do I make websites not move? Something like that is probably what they’re going to search. As long as maybe there’s a good, reliable article that ranks for that, then maybe that’s enough.

>> STEVE: Right.

>> AMBER: Again, the developers have to decide. Everybody listening to this podcast, if you have not looked up this media query, go look up this media query and start using it. I do think too, there is definitely some onus on us that are designing websites or deciding what the interactions might be to maybe really ask ourself, “Does this truly provide benefit and do we really actually think that it’s going to increase conversions?” Because if the answer is not 100% yes, then just don’t use animation at all.

>> STEVE: Yes, or even acknowledge that it could decrease conversion, right?

>> AMBER: Yes, I’ve seen themes, WordPress starter themes that you could buy that have so much motion on them that I’m just like, “If I saw this on a real website in real world, I would leave.” I would just be like, “No.” Not that it’s going to make me sick, it just looks dumb. It’s just annoying or sometimes they’re slow. I just want to read the content and I’m waiting for it to feed up. [chuckles]

>> STEVE: Yes, that’s exactly what I was going to say. I’m echoing what Chris said, right? When I go to a website, I’m there to gather information, right? The owner of that website has an objective for me as well, so that’s probably for me to create some sort of conversion, whether that’s me seeing an ad, me buying something, me signing up for something, right? I want to get to that website. I want it to load extremely fast. I want to scroll down and be able to just like– As a sighted person, you skim those headlines so fast, right?

I don’t want to have to wait 0.5 seconds for a headline to fade in from white, right? It’s like I want the information now and I want it quick. Animations typically will slow the website down. You’re typically not going to use them on mobile anyway. Check your user base. What devices are they using? You may be wasting your time, but I want to get that information. I want to get in. I want to get out. The owner of that website wants to make a conversion of some sort. The animations, a lot of time, can just get in the way.

>> CHRIS: I think a lot of business owners, I would say particularly those that are perhaps less web-savvy and I mean that in the kindest possible way, I think that they really anchor the value of their website and of the deliverable they’re getting and maybe even what they think their business is being publicly perceived as to a flashy website, right? If I don’t have a flashy website, I’m not successful, number one. Number two, my competitors and my customers won’t respect or value me.

Number three, perhaps I don’t even respect or value myself because I can’t even afford the flashiest website and so my business is a failure. I’m taking it to the extreme, but I feel like those are some of the internalized feelings, particularly in the client relationship that have to get overcome, and helping the customer to understand that what they’re placing value on should be shifted and is actually misplaced, right? They should be serving their customers by providing them the most usable thing possible.

>> AMBER: Yes, I don’t know. Do you have specific ideas about how to overcome that? I know I’ve certainly gone down the road of finding really big companies that don’t have a ton of animations and being like– The Apple homepage does not have a ton. I think I’ve used that before. Being like, “Look, this is a company that makes billions of dollars and they don’t–” Okay, so don’t look at the iPhone 14 page.

[laughter]

>> AMBER: Is that what it is? Do we just find other websites of companies that are very successful ideally in their niche and say, “Well, look, they’re not doing it. You don’t need this in order to be legit,” or is it finding articles like the one I mentioned previously that has a research? How do you think you sell clients on not having motion?

>> CHRIS: I think it’s important not to tell them like be the teller that says, “You can’t do this.” A lot of people will dig their heels in. I think if you can show, one way you show is you show them a competitor that’s more wildly successful than they are or an aspirational website that isn’t doing this kind of stuff of a highly-successful company. That’s one way. I think the other way is if you’re able to, show them how that design choice, or asking for those types of flashy whiz-bang features that don’t actually produce results, is actually counter to their goals and have those reasons ready, right?

Some of those actually Steve alluded to like having a reduced page speed, which is going to negatively impact search engine performance, number one, and, number two, could potentially reduce conversions, depending on how someone’s looking at your website. If I’m on my mobile device and I have just a couple of bars and maybe I’m in 4G instead of 5G and this website is trying to load all this JavaScript and it doesn’t load, I might bounce and move on to the next thing. I’ll give it three or four seconds and then I’m off.

>> STEVE: Yes, or if you’ve had four or five margaritas-

[laughter]

>> STEVE: -and you’re trying to like, “I don’t know what Uber’s website looks like,” and say there’s a bunch of animations on Uber and you can’t get an Uber and then you throw up all over the place, all over your phone.

[laughter]

>> AMBER: Then an Uber driver would not want you in their car anyway. [laughs]

>> STEVE: True.

>> AMBER: No, I think a big thing too for us is just not being afraid to have those conversations with clients and coming up with an arsenal of, “These are the websites that would be good,” that we can be ready to say, “Hey, look at these.” I think looking at analytics probably is really helpful. Like you mentioned, Steve, trying to figure out, are more people actually on mobile? It doesn’t really matter. That’s not always the case. We’ve had clients where they have mostly desktop traffic even now.

>> STEVE: True.

>> CHRIS: It’s 80% desktop.

>> STEVE: The elephant in the room when it comes to animation and WordPress specifically probably is sliders, right? [chuckles] Clients want sliders all the time. Even today, they still want them and the data. We don’t always typically track slide two and three, right? We don’t put trackers on those typically. I’ve read some stuff about people testing sliders that, basically, once you get past the first or the second slide, nobody’s looking at them or nobody’s clicking on any interaction there where you probably could get– Yes, go ahead.

>> AMBER: I was just going to say, that’s an interesting point is that if you have to do it. Let’s say the client’s like, “No, we really want it.” Maybe you do it for a month after the new website launches. You’re running Hotjar or some other tool that allows you to record user sessions and heatmapping and click interactions. A slider, you have to have a pause button if it autoplays. It’s great if it doesn’t play. Then it’s more of a user-controlled thing, but maybe that’s what it is on the data front is actually spending time watching.

It’d be also interesting to look at your bounce rates. Of course, Google Optimize went away, which is very sad. You could do A/B testing, where you have a page that has those scroll interaction motions like we were looking at on Apple and a page that doesn’t and see if the one with the motion has a higher bounce rate or lower percentage of people making it to the bottom in a heatmapping scenario because that might there be data that tells you this page isn’t as effective as the version with no motion.

>> CHRIS: If anyone in our audience has done this kind of A/B testing, please add us and let us know what happened. I would be interested to know.

>> STEVE: Yes, it’s very interesting.

>> AMBER: Yes, definitely. Cool. Well, I think we’re about at the end of the show, so it’s been very interesting talking about motion with you all. Hopefully, our listeners have learned a little bit. We’ll be back in two weeks with another episode.

>> STEVE: All right, take care.

>> CHRIS: See you later.

>> AMBER: Bye.

>> CHRIS: Bye.

[music]

>> 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, Google Podcasts, Spotify, and more. 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.