Movement on web pages can cause users an assortment of issues for a wide array of reasons. Slowly, we’re adding controls to operating systems and browser so that users can define their preferences for issues that cause them harm. One of the mostly widely available options that remains highly underutilized on websites to to check if the user would like less motion presented to them. Utilizing it is simple, and shows care and empathy for the visitor by respecting their preference. This is a great component of Kind Design, and we’ll tell you everything you need to know.
- Designing With Reduced Motion For Motion Sensitivities
- MDN Web Docs: prefers-reduced-data
- MDN Web Docs: prefers-reduced-motion
- prefers-reduced-motion: Sometimes less movement is more
- prefers-reduced-motion: Taking a no-motion-first approach to animations
- Respecting Users’ Motion Preferences
- Revisiting prefers-reduced-motion, the reduced motion media query
- WCAG 2.1: Success Criterion 2.3.3 Animation from Interactions
- Your Interactive Makes Me Sick
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
Well, hello, everybody, I am so glad that you have donated your earholes to us for yet another episode of the drunken UX podcast. This is episode 109. For February 28 2022. This month, this week, this episode, this moment, we are going to be talking about a very cool accessibility feature called prefers reduced motion. I am your bearded host, Michael Fienen.
I’m not. I’m not the other host, because you’re the other hosts. I’m the other other host.
That’s I’ve done. Yeah.
That’s how that works. Yeah, that’s,
I mean that I thought that was just your first name. Actually. I just had sir.
Yeah, no, I had someone asked me what the other other hosts men. And so I feel like I should explain that because you’re the other host. I’m the other host. And I’m not the other hosts on the other other host.
I I’m just going along with you at this point. Yeah, I think you’re a little out there, but that’s okay. I don’t blame you. Let’s see. This week. I am drinking a metric but ton of gentlemen jack on the rocks. Because over the week, I enjoy whiskey and gentlemen Jack doesn’t drink like whiskey. It drinks kind of like water. It’s it is so smooth. And I don’t like Jack Daniels like plain old Jack Daniels. I don’t It’s not fun for me. I guess it’s too young tasting. I don’t like it.
I forget if I drank this in the last episode. I think it was having the email. I don’t think so. Yeah, I picked this up to deliver on 12 Note that is Devere on 12. It’s proper Scotch that gets made in Scotland. It’s Highland a single malt. Yeah. I’m not sure. We’re probably talking
wildflower flavors, maybe some light fruits like like maybe pears or white peaches.
The tasting notes at the liquor store said that it was like I saw like vanillas and not cinnamon but like those sorts of
get by maig Yeah, sure. Yeah.
I don’t know that I taste those. But it is good. Like I am enjoying it. And it’s very smooth. And it was I think it was only like 40 bucks or maybe $50. It was pretty cheap as far as Scotch goes, but I just guys know pasting notes. Yeah, that’s,
I mean, it’s impressive. Not to toot my own horn a little bit, but like for you to show up with a Scotch that like I haven’t heard of at all. Yeah, even if I haven’t had it, I used like I know all of the main distillers and everything. And so the bottle is
too. It’s like it’s like a bluish green like ocean colored glass. Like smoky glass frosted. Yeah, yeah, it’s really pretty.
It’d be something I’m always up for a new challenge. And I’m at just about the restock phase of my bar. So
I I found that this particular Scotch pairs really well with I have some sharp white cheddar, and dates, like the dry dates. So I had them on. So my Triscuit crackers, but I just had them tonight with just the cheese on the dates. And they go it goes really well like it complements it nicely.
Yeah, like the whole art of Scotch pairing is no different than wine pairing. I mean, it’s that different scotches go with different things or dessert scotches are purely by accident. I tend to like Dalmore is like a desserty kind of Scotch to me. Or like a sherry cask MacAllan. Something like an oxytocin. A lowland is real nice with like, pork, you know, like a white meat or a chicken. I do maybe a downwind a highland with steak. Or maybe a Balvenie. So yeah, like you can you can take these all different directions. So here I am giving another class.
I am actually pretty serious about that. Something else I’m very serious about is accessibility. And we haven’t talked about accessibility recently. So I wanted to go get like a deep cut and that’s where this prefers reduced motion came from. This would be kind of a fun, different very feature specific thick and kind of explain how to use it, why you would use it what it does. And and why it helps you know what it will help with accessibility wise because this is one of those real good meaty topics
we talked about prefers reduced data data, right? Yeah. On episode 77. All right. Very similar, very similar level, same kind of thing, right? Yes.
And you would be right, that is exactly what it does. I want to before we, you know, dive too deep. Thomas Steiner has an article over at web dot Dev, and he had kind of a breakdown of animations that I thought was really good that web animations basically fall into what are three camps for the most part, okay? One group is to provide feedback. So like you’ve done something, and so it gives you a little animation so that you know that it happened, you click to the Buy Now button, and animated and an image going into the car, you know, you you clicked on a number and made it bigger and something on the page grew in in line with it.
Feedback can be a very helpful thing to let somebody know that something changed on a page to see something move on that page to draw attention to it to say, hey, this thing needs something or this thing did something. Sure. The one of the other groups is simple decoration. You might also call this like salt, you know, it’s a little flavor for the page. But that doesn’t actually mean anything. Like maybe you’ve got little floating balloons in the in the background. Well, the floating balloons don’t convey any information. They’re purely aesthetic at that point.
You know, a button pulsing, if it’s not giving you feedback for something like the pulsing is to draw attention to it, but for no other reason. But because you want to write the third group is actually pretty interesting. And it doesn’t necessarily fall into what we’re going to talk about tonight. But it it is the third group. And so I wanted to mention it, which is it is a way of implying speed.
Okay, do you? What kind of speed do you mean? Like loading speed?
Yes, yes, exactly. So a good example of this is, have you ever jumped on let’s say, I know Facebook does this. I know other sites do it as well. I think Newegg does this. When you go to like a product listing page on Newegg or your you’re looking at your feed and the feed is loading on Facebook. And you see like placeholder elements with like, where the image would be and where the text would be. And they’re like little animated gradients kind of there until the API calls are done. And that animation makes a page perceive to be faster, rather than having nothing there and waiting on it.
Because you see the progress because you see something happening. Do you mean like old Ajax rollers, right? Like you’d like to call? Yes, being loaded? And you just show exactly, though it’ll meaningless progress circle? That’s right, actually implying anything
like, you know, we think of it from a UX standpoint of you know, we just need to let you know that something’s happening, and you need to wait on it. So that that actually is conveying information in that particular case. But this notion of like, oh, yeah, we’re, you know, it takes time round trip. Why do we have loaders, because we know when you submit that form, it has to go to API gateway, run through a little Node script to process it, submit to the database return a result. And while those things are all generally fast in aggregate, maybe that takes four or five seconds.
And so that speed feels much quicker if they see something happening on the page. And that’s something I’m pretty sure Nielsen Norman at one point, I didn’t think to go look it up, but I’m pretty sure they’ve done research on that too. And if it wasn’t them, it was one of the other UI he or one of them but like that’s something that has been studied that, you know, adding that in, make something perceived to be faster, which is it’s it’s both interesting. I don’t think it’s unexpected either. Maybe
The issue is, is not that we perceive it to be faster, we just don’t watch the boiling pot because we see progress and like, Okay, this is happening, I don’t have to pay attention to it. Yeah.
So at any rate, that’s the third group. So those, so providing feedback, adding decoration and implying speed. Now, for the most part, I mentioned implying speed. I mean, it could fall into this, depending on the style of animation you’re using. But most of what we’re going to talk about is going to deal with the other two groups, how you provide feedback and how you decorate your site, that’s what’s really going to be impacted the most, by by this feature. Okay, the first and foremost, we’ll have a link to the MDN docs, of course, for this, so you can go in and see some examples of this stuff and read up on it on your own if you want to.
The need for this comes out of a little bit of a deep cut in accessibility, like this is an accessibility feature. It’s good, you know, for to provide people help, but it is level triple A compliance. So it’s the highest level of compliance. And it comes out of if you’re looking at week hag 2.1, its success criteria 233. For animation and interactions, it says motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed. So it’s, it’s about user control.
You know, we talked about this a lot in terms of making sure if you’re doing something on your site that you aren’t asking the user to do give them away to get out of that.
So is this is this an all or nothing thing? Is it like either? Yes, I prefer reduce motion or No, I don’t care? Or is there like middle ground where I can have a little motion as a tree? But not a whole lot?
The ladder? Okay, well, and what you’re gonna find here in a minute is like, yeah, the, the whole thing is, you know, think about these words, prefers reduced motion, not demand. Oh, no motion. Right. And so that will come into play here when we start digging into this. But yeah, the idea is, the user is setting a preference to, you know, to have something not happen
while we request a little bit less motion. Yeah.
The The reason for this, the one of the words you’ll hear phrases is vestibular motion disorders.
That’s ear related, right? Yeah. So
a lot of it well ear and more basically, is, that’s gonna be inner ear problems. Some medications, medicines can cause like, this orientation, dizziness, infections, you know, an ear infection can obviously cause big problems, brain injury, traumatic brain injuries can cause it. But also things like epilepsy, things like ADHD. Animations, we’ll get into this as well, animations can be very distracting, right? The very probably, you know, we don’t think about ADHD as a disability. But right, it is in that it is in the sense of accommodation, right?
Yeah. So I’ve talked about this before, I don’t know if it was on this show or elsewhere. But that’s the legitimate thing that I think people laugh about. It’s like, oh, squirrel kind of thing, right. But like, my brain is wired to be really good at like hunting and searching for stuff. So you put me into a situation where I have to find a needle in a haystack, I’m great. But you put me in like the woods looking for blueberries or something doing awesome. But like, man, sometimes pages just are creating all these like false positives.
And all I’m trying to do is read something and my brain is working against me. Whether or not it’s you considered to be disability, like, the fact is, like, my brain and other people who are like me, our brains operate a little bit differently to stimulus. And so things that are flashing or shiny or like intentionally trying to get my attention, I’m more susceptible to that. And it creates a very bad user experience for me. Yeah.
And I think, you know, we should be careful of using that word disability, right? Because that’s not what accessibility is about. Accessibility isn’t about accommodating disability, it’s about accommodating, right? That’s it. Like, it’s about creating affordances for unique situations, whatever, wherever those may come and what shape they may take. When somebody comes to you and says, your page is hurting me. Like we have two options there. We can either listen to them, or we can blow them off.
And if somebody is like, yeah, I have ADHD, and we think well, that’s not a disability. I don’t need to deal with that. They’re there one person out of 30,000 who visit my page that’s not worth the With No, it’s the one that told you. But does I mean, ADHD, isn’t it like, you know, one in 12 People have ADHD,
I don’t even know because the diagnostic criteria are really fuzzy. And there’s like, sometimes, attention deficit can be a product of other things like depression or anxiety. And other times like, ADHD can cause those things. So, like, the exact like chicken and egg of this is not something that we fully know. And it’s also not something that we can like, look at a brain scan and be like, Oh, that’s your problem there. Yeah, it’s more of like an emergent quality, that it’s like the D, the second DN is disorder.
And it’s only if you’re, the presence of this in your life is causing your life to have more friction in it, than someone without it. And for some people, it’s manageable. And for other people, it can be like, really inhibiting, and it can, like, it can be very, very difficult and keep you from succeeding and stuff. Yeah, one of the diagnostic criteria is like, driven as if by a motor. And like, you know, just constantly being in motion. Yeah, I think the common term now is called like, stimming, like self stimulating, um, and it’s all related to like your dopamine systems and everything.
But, um, I was, I played percussion when I was in junior high, and I had a drum kit and everything. And I to this day, I will still, like just randomly tap out rhythms that are in my head, on the table or my legs. I’ve learned how to do it in a way that it’s less disruptive to people around me. But, you know, it still happens.
And you made me think one that’s that wasn’t on my list here. But you use that word stimming. Right, which is, I believe, a word that gets used with the people who are on the autism spectrum.
Yeah, yeah. There’s, there’s a lot of I think there’s a lot of similarities. There are a lot of like, comorbidities between the two.
Yeah, and but that’s another one that like things like animations on a page for somebody who’s, you know, on that spectrum can also be very distracted or put off by that kind of stuff, depending on the nature of it. And like I say, how severe their condition is. There’s no then the what the other thing about all of this is everything we’ve listed and mentioned, none of them are limited to a particular group of people to a particular age cohort, or anything. This could be anybody at any time.
If you got a concussion in a car accident tomorrow, I hope that doesn’t happen to you. But if and as somebody who has had a concussion and a pretty severe one, the dizziness component to things when you move your eyes around, that’s part of motion disorder, and that can make you dizzy. And if I’m snapping my eyes around on a webpage, oh, yeah, I, I will get dizzy. Sometimes it’s a split second, it’s not like, Oh, I’m gonna throw up or like, Oh, I’m dizzy for an hour. It’s not like that. It’s momentary things. But it’s very disorienting. When that happens.
I would say all this is to say that, like, whatever you may think about ADHD yourself, like whether or not you agree with us, if if someone like me comes to a page that you’re making, and I have a bad time, like, you know, you didn’t hurt me. But it’s a good possibility that I’m probably not going to come back to it if I can’t consume it. I hate looking at recipe sites. They’re just level of ads they put on them, and the inter like interstitial content and everything. It’s like, it’s annoying. And it’s takes me a lot of effort to read it.
But like, sometimes I need to have recipes. But like, if you have a print layout version, or a print preview or something like that, that’s like that’s a godsend for me. Yeah. Because Oh, yeah, I can actually recreate the content.
And we’re going to talk about that. That’s actually that’s a that’s one of those unplanned, happy accidents that that is right on topic for us. If you want to read more, though, about like motion sickness and how it applies to web development, things like that. Eileen Webb’s article email@example.com will be linked in the show notes. It’s a great look at like the consumption of web media and how that can be affected by things that are in motion.
She has several videos that do not autoplay on the page that demonstrate some of the things that she’s talking about, like she went out and found like news articles and things to show, you know, how these things can can be affecting them. So that’s a good article.
It’s only tangentially related but since you mentioned autoplay, that was our first episode has auto auto playing videos, number episode number one,
the horse. The other thing is this isn’t just about accessibility. And this is just kind of like one of those extra little bonus things. When you limit motion when you limit animations on a page, pages that have lots of animation libraries, Lots of things going on lots of calculations happening. You’ll see this people are using like canvas elements and things in the background, like do complex animations, if you’re using the green sock animation platform, things like that, that that shortens battery life.
As it isn’t material, like is it something that is measurable? Oh, yeah.
If it’s not running constant, like I’m assuming I’m this applies if it’s running constantly. And so that CPU usage, instead of your CPU usage sitting at three or 5%, when somebody is idly reading a page, your stat CPU may be opened up to 25% 40% per part of that. So I mean, you do have to take it as a factor of the length of time somebody is on that page using it, certainly. But there is an efficiency component to that. And I like it because I think we give up just like on other forms of web performance, you know, image size, think bandwidth, things like that, like we take for granted, I think, how powerful things are.
When I when I was at Cornell, we were using this social media aggregating service. I don’t remember the name of it now. But we found that the pages that had loaded it, but were not active. And I forget what that meant in this context. But it was using their, their, their embed, um, one of my co workers notice that his CPU use, like jumps to 100%. And it was with that tab. And then so we looked into the source code for the page. And they had loaded a coinhive. W. ASM file. So it was using web assembly to do crypto mining. And I emailed them about it.
And then as soon as I mentioned that, whatever lawyers review this, they stopped talking to me. But yeah, they said that one other one of their employees has suggested piloting it out, like less than a day ago.
That’s what we call a big Oof. Yeah. Big Oof. Let’s talk about applications of this. So sure. What are things that you will commonly have animations on that you’ll that you’d want to use this animated buttons are real commonly when
using? What do you mean? Once you use this? You mean what to use prefers produce motion, or do you mean want to use animation here?
Yes. The Well, I mean, a little both, right, like things that you will commonly see animated. Let me say it that way. Is that maybe a little more straight shorter.
So like menus?
Yeah, drop down menus, you’ll see animated quite frequently,
hover interactions. auto scrolling. Yeah.
Infographics, you see infographics real frequently with like, scroll animations, right. As you scroll down the page, you know, a car moves across the screen and Ryan, the son got rises and falls as you scroll. So like those kind of animated infographic things that that happen. Michelle Barker has an article at Smashing Magazine from late last year where she was talking about this exact feature. She called out smooth scrolling.
Okay, I thought when you’re talking about that’s, that’s where like, you click a navigation button to go to somewhere in the page. And then it jumps to the part of the page for you
opposite, it doesn’t jump it scrolls to it smoothly, if think of it that like the smooth scrolling. So you click an anchor, you know, an anchor to like the next heading. And so smooth scrolling will move you there. Whereas if you don’t have smooth scrolling, it’ll just jump in there. Now. A lot of people think smooth scrolling is good. And for a lot of people it is it’s one of those like it does convey some meaning, right because it’s Showing you Oh, we’re taking you somewhere else on this page. And we’re going to show like, kind of imply the distance, you know that you are traversing so to speak.
So you know that you’re still on the same page and all of that, that. But the flip side of it is, it’s not consistent, because it will, smooth scrolling has an execution window, and I don’t know what it is off the top, my head, two seconds, one second, something like that. It’s not much. So the distance you are traveling will cause the speed of the smooth scrolling to change, which can be very distracting and disorienting for somebody who isn’t expecting it. So it’s kind of it’s it’s a sword that can cut both ways.
It’s entirely subjective. I am not saying there’s any objectivity behind this at all, but I don’t like smooth scrolling, just jump me to the page. Like I don’t. Yeah, it seems like one of those like, ooh, shiny things like, Oh, look, we can do this is neat. looks futuristic, even though like what does that even mean? Like, like, if you can make text glow, or something, you know that it’s all fancy. And it’s neat. I’ve been I’ve literally used it recently. But um, you know, smooth scrolling? I don’t know, just jump in.
So prefers Reduce Motion has two values. It can either be reduce, lowercase or reduce, or it can be no dash preference. Okay, that’s it. So we said right, like there. No motion is not an option. Like, it’s just reduced or no preference. This creates a kind of opt in model, right? So you there is no positive affirmation for it either. So
surely animation animate as much as possible. Yeah, there there is no move,
you know, yeah. Oh, animation or something like that like in you? Because you would ask, is there a middle ground, right?
Have have the page act like you were I sitting down on a chair, constantly moving.
So without that, so what it means is, by default, your operating system is set to no preference. Because and here’s the thing, like it does make a that might feel a little weird. But it makes sense. If you think about, you know, this notion that this value never existed before. And people aren’t going to go in there and set it unless they need it, most likely. And so presuming no preference is sort of the way of hedging bets that it’s like, yeah, no preference doesn’t mean yes, I absolutely want animations, it just means you haven’t said no to them.
And reduces kind of a similar like, it’s, it’s not none, it’s just saying no, I need as few as possible. Because or, you know, there will always be some amount of animations outside your webpage, you know, other things do so you can’t escape it. But that’s the idea behind it. Which is pretty straightforward. And I doubt we’ll see other values come into play there.
To get into this.
So prefers reduced motion is a media query. It’s not a proper, it’s not a CSS property. It’s a media query. So if you had, for instance, I’m gonna, I’m gonna say this out kind of slowly, just so it paints a little word picture, if you had a little block of CSS, and you had, you know, dot class, you know, class name. Dot example, will say that dot example, curly brackets. And, by default, you would say animation, none. So and let’s assume that you’ve got, you know, some keyframes written out somewhere and like, you know, maybe it’s the background color changing.
And so you’ve got that on a 12 second transition or something like that, or are you going to bounce it and the bounce is a pretty easy one. But by default, think of it you know, how? When I say like mobile first, right? The idea is, all your CSS is written with the idea of being on a phone first, and then you’ll use a media query with min width to then during the next breakpoint up, this is very similar.
So so this isn’t, I see what you’re saying now. So this isn’t, oh, they’ve said they want reduced. So let’s go back and remove or reduce all animation here, you know, item per item, you’re saying start out with no animation and then if they specifically opt in to no preference, then show animation for them. Yes.
I like that. I will
say and I think Tatyana commented on this in an article over on her site. There isn’t necessarily a right or wrong way like doing it. First or no preference first, it kind of comes out in the wash a little bit that way. But I like the idea of addressing it like progressive enhancement. So like the default of none or very limited animation means layering on enhancement. And so then you would do a media query of prefers reduced motion, colon, no preference, and then you would say, dot example. And then curly bracket animation. Bounce 1200 milliseconds. Cool.
This seems like a. I mean, it’s, it seems nice, but it seems like you’d have a lot of media queries kind of peppered all over the place, wouldn’t you?
You could. Yeah. And depending on like, if you’re just doing like monolith style css, yeah. Okay, one thing I don’t know. And I should look this up, and I apologize for being lazy is I will bet there is a gulp tool or a roll, roll up tool parcels, something like that plugin, that would detect every time you use that media query, and would spit it out in a separate file. Okay. So and this is something Tatyana hits on in her article.
And the way she does it, and I like this is she shows you like in your, in your head tag, where you’re, when you’re listing out your CSS, you can pass media queries into a link tag. So you can say link rel equals stylesheet. Media equals and then because normally we do like media law, or sometimes you’ll see like media print, you know, for a print stylesheet.
It never even occurred to me that you could do this with media queries. Yeah. I mean, it makes complete sense. But wow,
yeah, you could do this with anything you can do a media query for whether that’s breakpoints you know, color schemes, anything. So yeah, you can say prefers reduce motion, no preference, name, the file animations, dot css, and then all your animations are all in one place. I do a variant of that’s really fucking cool. I don’t spit it out into a separate file. But I do keep an animations partial in my Sass builds, usually. And because I like using tools like anime stuff, for instance, that is like a CSS animation generator because I suck at animations.
I’m not, that’s, that’s a visual skill I’m not good at but I can like pick things and combine them and then let it spit out what I need them. And so I’ll use that partial to house like all of those because then I can also leave like code comments for like, this came from anime sta this URL, whatever, you know,
Guys, all that.
I do that with, um, I use primitive, primitive UI, SAS library, or framework, I guess. Um, and then I take, make a folder called vendor. And then I put in anything that I’m pulling in, outside laughing in the vendor folder, right? Because usually, like, if I’m changing it, it’s minimal changes. And this way, like, it’s clear, like, what something is in mind that I wrote, like, you just say, like, this just works. Just hand wave it. Yeah. So that I like that. That’s Tatiana is Tatyana Mac, right? That was a Massoud 18.
Very, very sharp, very accessibility minded, focus person.
Cool. I like that hats off to that a lot of respect. Thank you.
So yeah, like that. Because then, like, you don’t even need the media query in that file, then the media query is part of the link tag that determines whether or not everything in this file runs or not. So it’s, it’s a pretty elegant solution that way, it’s and it’s very, you know, keeps it very nice and siloed. Functionally. I mentioned progressive enhancement. I’m Eric Bailey has a great article over at CSS tricks about this. And he, cuz he approaches this with the same mentality of like, start from none, treat it like progressive enhancement. So add the no preference media query.
But he also talked about and you started hitting on this a few minutes ago, talking about like, being in like reader mode, you know, or print mode to read something on a page. You don’t as a developer designer, you don’t have as much control over how people perceive your animations as you think you do. Right? If people are taking your content through an RSS feed, or like Safari, Firefox, have reader modes, or you may use something like pocket or Instapaper, you know, to like save articles outside of the site. You don’t actually have that much of a guarantee that your animations are going to be included with that stuff.
And so if you are trying to convey information and do things that may not work to your advantage in some of those cases. those use cases will very, like long form content doesn’t usually have a lot of animation to it. But that very first article I mentioned, though, that Eileen Webb wrote, like, her examples were things like, you know, articles in the New York Times, or Washington posts that have these like real, very cool data visualizations with lots of animation, you know, so like, if I were to grab that article, and put it in pocket? Who knows? You know, if I’m actually going to get that animation when I read it there.
Oh, that’s a good point. Yeah, the other device, and I call this one out, because I have one is anything EEG, because he has terrible refresh rates. So it’s not good at doing things that need like several frames in the course of a second. My you know, I’m not talking about just like a Kindle, I have an E Ink reader that I use for all my books and things like that. But it is at its heart, just an Android device with an E Ink screen. Right. And so I can and do use it to pull up a webpage once in a while. And it works perfectly fine, because it is just an Android tablet at that point. But it’s black and white.
And it will return to you a Boolean of whether or not it, believe it or not matches that media. So in this case, you say window dot match media, and then you pass it your parentheses prefers reduce motion, colon reduce. And it will then say, true or false, you can do the same thing here, you can do this, with any media query, you can use it for controlling responsive behavior, we’ve got a a gallery, a carousel content carousel tool, that when you look at it on desktop, it, it has an overlay with controls to go back and forth.
But if you look at it on a phone, it’s, it gets rid of that, because it’s just touch based, and you just do normal side to side scrolling on it. And so we have a, we use a match media query there, that just matches the breakpoint. So that if something gets resized down, it turns off the overlay. And if it gets big in it re initializes the overlay.
I mean, not all, but what if we did it the same? It would be a very boring web. I don’t know. Maybe very boring. Pretty fascinating. So here The thing we talked about, like this is an accessibility tool. It’s to make a website more perceivable for somebody so that they don’t get migraines. They don’t get dizziness, they don’t get headaches, things like that. But animation can be good for accessibility, because it can apply indication that something is interactive or that something is happening, or that steps are transpiring.
Eric Bailey wrote, he says, animation can be a great tool to help combat some forms of cognitive disability, by using it to break down complicated concepts, or communicate the relationship between seemingly disparate objects. A little animation can actually be really good, I guess. I mean, it’s, it’s just one of those like, you have to evaluate Right? Like the usage, it’s easy to go overboard, I use that word salt earlier, like, you know, decoration, salt, add flavor to a page, and there’s a right amount of salt, you can add the food, and there’s a wrong amount of salt to add food, you know, too much can really hurt, you know, the way a page looks or feels.
And this really isn’t all that different. And it depends like, what is your app? What is it doing? Is that needed? Or is there a better way to communicate? What it is you need to see there? It just depends, like every case is going to be unique, and I can’t give you a right or wrong answer. Remember, this setting implies reduced animation. So what you can do is focus on things that aren’t conveying information. Is the animation meaningful, you have a background with balloons that float around. Is that conveying information? Is that animation meaningful? Probably not, probably not.
So it probably would make sense that you would stop that animation for a user who wants reduced animation. But if you were, for instance, showing the scale of something like you, somebody’s picking a number of things, and it affects the size of something. So maybe as they’re adding boxes, you are actually animating where those boxes are going in your interface to show by adding this, here’s how big it’s getting. You know, that can be good for maybe, you know, a shipment system or things like that you’re conveying information, the animation is meaningful, because it relates to the interaction the person’s making.
Now, maybe you tone it down a little bit, maybe it doesn’t move as fast, you can make decisions like that to say, you know, let’s reduce the animation, let’s maybe make it not bounce and move fast. Maybe we’ll just have it move slow, and then stop. But you can, you can make judgment calls on that. The other side is you can be too aggressive in this because with CSS, you can do a lot of powerful stuff. You can write a selector that says, you know, if media screen and prefers reduce motion, reduce, then star target all elements and set animation to none transition to done scroll behavior to auto and important all of those, and you will wipe out all your animations.
Fuck you animations that will absolutely get rid of everything. But then you can’t override it right? You You’ve important to them, you have wiped everything out regardless of if it’s good or not. It’s kind of Yes, you are honoring the setting the user use, but it is kind of a like brute force, target shotgun, everything kind of deal. So there are probably more elegant solutions than that. But I will say yes, it is like, if you don’t have time to do anything else, you can do that. And it will solve the problem. It will it will lock things down.
I would love to see a third setting for this property, where it’s none. And it just does that. Because I don’t know, I could just imagine there’s gonna be situations where you just don’t want any innovation or you know, you’re on an Ian crater or whatever. He just doesn’t fly, it should be none. And that should be an option. It shouldn’t be the default for most browsers.
But I think, technically, it’s different to do because it lies. Like if a user sets it to none, they’re gonna expect it to be none. But like, in this case, like this is shovel ready prefers reduce motion, you can use it in every browser right now. And I’ll bet the number of websites if I went and pulled 100 websites, CSS and searched it for FERS reduce motion, I’ll bet 2% of them use it. Like, and and so if I if a user says oh, I can set my motion to none, and the first thing to do is go to a site and see that motion is still there. They’re going to feel like the feature is broken.
Because, like like that, that’s theirs. A technical consumer level problem there that like honoring that setting is tough. Now maybe, I mean, there are ways around that certainly like none could mean that the browser itself takes that really aggressive selector that I just said, Star target every single element on the page. None all the animations important the rules and override everything with that, like, arguably, you could say none and have that have the browser brute force a selector like that. The risk is breaking things. And so this is an maybe an important takeaway.
And then you add it to behavior that is like once that animation is done, focus the field. Well, you’ll break that because animations in many cases still need to happen. There are in fact, in a couple of these articles we’ve mentioned, there are examples of how to do something similar to this. But instead of setting them all, like none, you set the you set an animation to like one millisecond. So that the animators Yeah, the animation is actually too fast to be percept, perceptual, a little bit of perceptual live, put some div ish, I don’t know, perceptual, perceptual life perception thing in my brain, that a person can’t see it. It’s too fast.
So that’s one of those like, it’s, it’s important to kind of know what you’re fiddling with in some of those cases. But that’s all. So that’s a long way of just saying like, there are some weird reasons why the options are what they are. And I think there’s room for that to change, certainly, and because there are things we could do in the UI, like, you could set it to none. And there could be a little thing, you know, in, in the iOS settings, it says like, not all sites will honor none or something like, you know, like, not all software is going to honor none.
But you know, this is your best chance so to speak. Right? Because, yeah, because that is like there is an expectation that you don’t want to break. Because not just because somebody has an accessibility need. Like that doesn’t mean they’re a power user. Right? Like they don’t, they don’t necessarily know a computer better than anybody else. If the computer says this is gonna do none, and then it doesn’t do none. It’s gonna feel broken. So, yeah, this is part of a suite of tools.
And I just want to mention these because these are like, no, they exist. Because this is the kind of feature most people don’t know it exists. It’s incredibly useful. It’s a very powerful accommodation affordance tool, and these other ones will be just not yet. So you mentioned earlier err in the prefers reduced data. And when we talked about that, a few months. Yeah, that’s it. Can you take a guess what that does?
It mean, it sends less data, it uses lower file size. Yeah, files.
You know, prefers reduced data has no browser support yet? Don’t use it. It’s, it is a spec. It is you can test it in Chrome and edge with an experimental fly. But that’s it. There’s also prefers color scheme, which I do think is better supported, actually. But the reverse color scheme lets you check for I think it just checks between light and dark. So like, how that’s become a real popular like having dark mode on a site, right? And so prefers color scheme gives you a way to like the tech the users preference. And then there’s prefers I
love sites to do that. Check it out, and
you’re gonna make me do it for our side, aren’t you? Yes, I wasn’t planning on it. But yeah. And then prefers contrast.
If it makes it any better. I’m happy to do the CSS edits to make dark mode work on our new theme. I feel like that can be contribution I can do.
So prefers contrast is good, except in Firefox. So far. Everything else supports it. You can it’s a I think, I think it’s just a boolean is all it is all it takes. First color scheme is supported across the board. Edge Firefox, Chrome, not IE, but I mean, no big deal. No, no big loss there. And it does, I am looking here, as I’m talking, it does, in fact, take just light and dark. Those are the values light, dark. My presumption is light is probably the default. So I think this is kind of one of those things.
One of the reasons I wanted to just talk about this today and talk about this specifically here, and these other ones is this, I think is going to be that sort of new frontier of web development, giving users the ability to control the kind of experience they have. And knowing those flags so that you can develop experiences that honor a user’s request. There are a lot of other directions, I think things like this could take and let you do things like maybe prefers reduced data, maybe I’m going to turn off web fonts as well, you know, prefers color scheme, if I know, in fact, you want a darks scheme that I can preload that for you ahead of time and have the site already dark at that point.
But maybe, you know, we have something for prefers color mode to deal with maybe colorblindness accessibility or something, Oh, nice. Like, if I know that you have a certain color filter, then maybe I can provide a different color palette to make the page more viewable. Or, alternatively, just always try to make sure you check your colors to make sure they differentiate. But I mean, and I’m just I’m literally talking off the top of my head here.
No, I mean, those are those are I like this idea of kind of specifying what accommodations you need to your browser, and then having a like, machine readable means of the browser communicating that to, like during the request as like additional headers or something. Yeah. that would that would be really like, I would love to see that that things move in that direction. That’d be great.
I mean, it’s it really is sort of that next evolution, right? We’ve we’ve gone through these iterations of the web and what what has been capable from the old Dark Ages, when we used to put on websites, this site is best viewed in Netscape at 640 by 480. Right? Talk about the complete antithesis of what we’re talking about here. Like, you were locked in to everything. If you wanted the right experience, you had no control at all, and it was like curated for you. And now we’re saying, no, let’s like, let’s absolutely give people all the control.
Let’s, let’s figure out everything they want, and try, you know, to make sure we present a page in a way that is pleasing to them. You know, there are plenty of folks that like I mentioned, web fonts. Some people go nuts with web fonts. And the two problems with that are a they can be big, and B, they can be hard to read like we mentioned ADHD earlier. Another one is dyslexia. And different fonts can make things like dyslexia much harder.
Different fonts will trigger dyslexia worse than other fonts up there are there are fonts that are designed to help with dyslexia, that they the letter is letter forms are designed in such a way to make them more distinguishable so that they don’t flip on people as much. So like web fonts, or a whole world of challenge that we could control things like this way, yes, your designer wants a specific font, whatever, that’s great. But the user needs to be able to say no, like, and it doesn’t matter what the The reason is, is that data is IT accessibility is it whatever, like, just honor those settings.
And if you’re concerned that maybe a user doesn’t know the option is in their operating system, just like, you know, with color scheme, right, websites all have the switch the light Dark Sun Moon switch, yeah, put a switch in your interface to turn down animations and just bind it to your same function. And then boom, whether or not they’ve set it in their operating system settings, they can still set it individually for your site. You know, getting get creative with some of that, you know, think outside the box and, you know, affordances and accommodation, those are the words of the night,
you know, you know what I would like to say if we’re adding accessibility features, I want to see a prefers recipe only. That would go on recipe sites for
prefers no stories,
prefers no stories, or ads, or interstitials.
But equals there’s one right prefers snow ads or prefers reduced ads. Let’s say it that way prefers reduced ads.
Never having, but it would be so good.
I think that is the feature to take a break on. I hope this is I think one of the big dips and like I hope you learned something new tonight on this because this is one of those like, I definitely feel like not a lot of people know about this particular tool. And it’s it is definitely a power feature for accessibility. It is a way to I think set yourself apart as a developer, especially to be like I am out here doing you know, the heavy lifting on these cool animations and making sure they operate the way they’re supposed to.
And it will show in your code it will show in your interviews, things like that. So pick this stuff up, read about them. And if you put together a cool, cool example let me know about it because I’d love to see that.
Yeah, come talk with us on Discord. You can find that on trucking comm slash discord. Or you can engage with us on any other social medias that we are on legends, Twitter and facebook.com/drunken UX. And comments support us. Oh, and I guess Instagram technically joking or whatever. And you should consider helping us as we’re talking about accessibility help support us getting human transcripts by supporting us at trunking USA comm slash support, which redirects you to our Patreon. And we have a lot of very reasonable tears and all that money is going directly towards transcription services.
With the goal of actually getting paying a human being to do manual transcriptions getting the best possible transcription. You’re posting a thing on Instagram.
I mean, I’ve never I’ve I’ve never used the the real function on on Instagram before. So like I’m I’m trying to be hip like the kids is this is this how tic TOCs work? I don’t know. This is how we record episodes though, folks.
I’ve heard that Rails is a great way because it’s promoted on different channel, your Instagram. So it’s a great way to get more audience. Audience people,
I’m doing it because you You challenged me You said we don’t use Instagram enough. And I’ve actually thought about how I can use it better and like show some behind the scenes stuff. So I’m doing that because you told me to I’m doing it. Because at the end of the day, I want to make sure people know that we keep our personas close, but our users closer. Happy March tomorrow. Bye Bye.