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.

That’s I’ve done. Yeah.

I mean that I thought that was just your first name. Actually. I just had sir.

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.

wildflower flavors, maybe some light fruits like like maybe pears or white peaches.

get by maig Yeah, sure. Yeah.

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

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

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

So what what these are, there’s a series of these, we’ll we’ll run through them at the end of the show, too, that there are a number of user preferences that they can have set like at their system level, this isn’t just a browser setting, this is something you can set in the operating system, whether it’s Windows Mac. But what it does is it it lets you expose a user’s preferences to the browser, so that you can then make decisions in your JavaScript in your CSS, as to what you’re going to do. And you can probably guess from the name that prefers reduced motion is a flag for whether or not a user wants more or less animation on a page.

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.

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.

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

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.

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

The The reason for this, the one of the words you’ll hear phrases is vestibular motion disorders.

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?

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,

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, 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.

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 over@opennews.org 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.

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.

Yeah. Like, have you ever been like using your phone and think about like this, right? If you are watching YouTube on your phone, just turn your phone on, put a YouTube video on, set it down for five minutes, and then pick your phone up and see how warm your phone feels. That heat loss like that’s, that is a tangible feeling of energy loss. That is Yeah, I guess because video is playing and video is motion video is animation. Like if you have background videos on a website, you know, those kinds of things, you know, the that JavaScript that is running that that SVG animation on your page is running constantly.

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.

And it’s just good practice to maximize your performance, not just in bandwidth, but yeah, how, how chewy is that page, things like that are an example it isn’t animation related. But you know, you’ve heard about like crypto miners, JavaScript, crypto miners on sites, and like those, those will pay a CPU to 100%. Like they will take up all the threads.

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

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.

Yeah, drop down menus, you’ll see animated quite frequently,

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.

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.

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

you know, yeah. Oh, animation or something like that like in you? Because you would ask, is there a middle ground, right?

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.

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.

Now,

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.

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.

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.

Very, very sharp, very accessibility minded, focus person.

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 has a garbage refresh rate. So like, I’m actually I have exactly one of the devices he calls out. That’s like, yeah, he inks a thing. And folks need to remember that, like, they don’t all have 120 hertz refresh rates. In some of those cases, it’s like 12 or 10 Hertz. Okay, so that was the CSS side, let’s talk JavaScript real fast, too. Because you can come at this from the other side. Have you ever used a window dot match media? No. So there is a method attached to the window object in JavaScript called match media? And what do you do, you pass it a media query, just like you wouldn’t CSS.

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.

And so we can we can bind and unbind that JavaScript for that particular feature. So in this case, you can do this for prefers reduce motion, and then use it to do something like maybe control, you know, are you auto playing video? Well, if if prefers reduce motion, reduce comes back true, then maybe you take autoplay off of all the videos on your site, you know, you can interact with lots of things all at once that way, and like pull that stuff out or pull it back.

The article that Michelle wrote wrote, over at Smashing Magazine, Michelle Barker, she made a comment that was actually pretty sharp, which was like, maybe you’re using something like G SAP, I mentioned that earlier, the green sock animation platform. It’s a JavaScript library designed to empower animation. It’s a big library. It does a lot of stuff. And it’s like, if somebody is media query is set to reduce, then don’t load that module like save the overhead of loading this giant JavaScript module that won’t be useful to them. So can you can use that in JavaScript, then to conditionally load chunks of your code.

So that’s something you can look at there too, and sort of pare that it’s good for CSS, but because it is something that is being exposed to the browser, you can grab it out of JavaScript as well and make decisions about what you’re going to do there. Cool. So let’s, let’s go to your earlier question, right. Do we have to eliminate all animation?

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.

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.

Because when people animate things, there are there may be triggers in the JavaScript that will trigger behavior, like when an animation finishes, or things like that. And you’ll break those, if you just brute force turn off animations, like if, if a menu drop down is required in order to trigger a behavior on the page to maybe, you know, lock out the back of the page or something like that, or a, an error on a field, you know, needs to animate for whatever reason, whether it’s good or not, like you just put it in there.

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.

But the animation does technically run. And so it will then fire off any any triggers and events in JavaScript. So there is an alternative to this. And like I say, I think I don’t remember who wrote it, I think the web dot dev article and Tatjana those were the two but I’m probably gonna be wrong on at least one of those. But there is a blog that shows this technique of like, yeah, instead of like, turning it off, what you’re really doing is just turning it down. And you get all the benefit of reducing motion, but less impact and less risk of something breaking.

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’s yeah, I mean, it doesn’t technically do anything unless you honor it. But if you honor it, then you can do things like maybe you send the higher res photos versus low res photos. Maybe you don’t pre download a video, maybe you don’t download an extra, you know, JavaScript library or something like that. You can make choices than to say, You know what, yeah, we’re gonna, instead of having this giant photo background, that’s like, a huge, you know, 20 megapixel photo that’s, you know, 34 Meg’s. We’ll just have a color for the background.

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

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.

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.

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.

So that’s I think the lesson from all of this, go look up prefers reduce motion, see what you can apply it to, you know, try to, or come up with some interesting ways to even use it, you know, go out and make an animation with the purpose of giving people control over that thing, add a JavaScript fly you This is something else, we didn’t really talk about it. But, you know, you could set this create a function in your JavaScript for it.

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,

prefers no stories,

But equals there’s one right prefers snow ads or prefers reduced ads. Let’s say it that way prefers reduced ads.

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.

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’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.