Visual Considerations

[00:00:00]
>> We've talked so much about the mechanics of all these factors of accessibility, probably so much more than you even really wanted, frankly. [LAUGH] But there's visual aspects that we have to consider as well, starting with color and visual contrast. When we tested with debugging earlier, color contrast, I think on one site there was almost 100 color contrast issues.

[00:00:24]
And so that multiplied across the web is a huge number of accessibility issues for color contrast. And so with this, we've seen some tools for this. The Chrome color picker and the Firefox color picker were super useful for this. And the ratios are mathematical, so we can calculate whether something passes or not, which is nice.

[00:00:49]
So the requirements, the regular non-bold text size below 24 pixels must have a contrast ratio of 4.5 to 1. 24 pixels is pretty big. So that's like big headings. Those pieces of text that are large scale only have to meet 3 to 1. They're bigger, they're easier to see, pretty straightforward.

[00:01:15]
WCAG, for some reason, does mention 18 points, but pixels, that's a unit that we're used to more, pixels or rems or something. Points, not so much. So just note, 18 points is 24 pixels. That's that threshold to get into the 3 to 1. There's also a criterion for non-text contrast.

[00:01:40]
That's things like buttons, form controls, icon buttons, those only need to meet 3 to 1. So we saw some tooling for checking contrast, there's the Axe Chrome extension, we'll touch some of this. There's one that we haven't looked at yet, that's the Color Contrast Analyzer, it's a desktop application.

[00:01:59]
This one's great cuz I could be in a Zoom call, and someone could be demoing a pattern or a design system or something, and I can sample a color in Zoom, and I could answer them right then. Might not be totally accurate cuz of the Internet, but you can sample literally any application on your computer for contrast.

[00:02:21]
It could be a PDF, it could be a Zoom call, whatever. So this one is pretty handy, gives you an eyedropper, you can go around and check foreground, background color. So that one's worth checking out. WebAIM has a contrast checker on their website. For design, there's Stark for Figma as well.

[00:02:44]
And there's also a Triple A criterion, that's 7 to 1. So we don't wanna rely on color alone. If you had, say on your e -commerce site, you have different colorways of products, you wanna describe what the color is also in addition to the color swatch. Things like data visualizations come up with this a lot, so that you can have some differentiation so that you aren't relying on perception of color alone.

[00:03:13]
And I have some links in here if you're curious to dive in more to color, including this pretty funny one, it's almost like a quiz from TPG. It says, when I get that low contrast feeling, I need non-textual healing. It's a really funny name. But the post itself is actually really great, because they have scenarios where they walk you through, I don't know, it's almost like a quiz.

[00:03:42]
So that one you should check out after this. Okay, reflow, so this is the bit about accessibility and responsive design and how closely coupled they are. And we did touch on this when we did some debugging. So designing for reflow, we want things to go into a single column.

[00:04:05]
Thinking about form controls, if you can stack the label over the form input, that makes it so you don't have to horizontally scroll if you are low vision. We want font size and things to be adjustable. I like to set the font size on the HTML tag and then use rems, and it will scale automatically, it's amazing.

[00:04:27]
And some web tools to test reflow, we saw just the built-in zoom is awesome, but there's also the device toolbar in Chrome DevTools. So just to point that one out, it's over here in the DevTools, there is this little toggle device toolbar. And you can change the device, you can change it to any screen width, you can throttle it, all these cool things.

[00:04:54]
But that is another tool for this. And then there's additional platform tools with macOS, iOS. Windows has a magnifier. There's also a third party tool called ZoomText. So reflow. Okay, reducing motion, this is what our exercise, our last exercise will be about. So motion is a big thing.

[00:05:22]
It can make people sick. It can make people faint or have a seizure. It can be pretty serious. And so fortunately, we have some tools that make it really easy to safely respond to user preferences, including something called prefers-reduced-motion. It's super well supported, and even on platforms where it happens to not be supported, you can add a little toggle or something to let the user still tell you that they prefer reduced motion.

[00:05:58]
So turning this on, on a Mac, we go under Accessibility > Display, and there's this little setting here called Reduce motion. And so that is really powerful cuz you can impact your web pages. We can see the state turning on and off with something that works with reduced motion just by checking that checkbox.

[00:06:25]
And so for this, we have a CSS media query, we can say media @media. And for our condition, (prefers-reduced-motion: no-preference). And that will say, if the setting exists and they haven't checked it, then we can do animation stuff. So the flip side of that is when things are animated by default, we can say @media (prefers-reduced-motion: reduce).

[00:06:53]
And that way, if the user checks that check or checks that setting, then we can turn animation off. So it's kinda the same thing, but it's whether your default is animated or not. You can opt in to animation when it's safe to do so, and that way, if the user is on a platform that doesn't support that, it won't be animated.

[00:07:13]
Whereas the other way, everyone gets animation until they opt out. Just two ways to do similar things. So here's an example. I'm gonna open this up. We've got this cat animation. This uses keyframes, it has this infinite animation in a mask. And then down here, we have prefers-reduced-motion: reduce.

[00:07:41]
And in my system preferences, Ha, it stopped [LAUGH]. I can stop the animation just by clicking that, and then our code matches and it responds, it's pretty awesome. So there it goes again. So, very powerful. I'm gonna turn it back on so we can look at our next example.

[00:08:05]
So that's the CSS media query. Sometimes JavaScript might be the way to go. And our example that we'll work on in a few minutes, our last example, we are going to use the JavaScript version of this. So it looks very similar, but instead of CSS, we store a variable for a motion query and store this matchMedia function, and that's where our CSS bit goes.

[00:08:34]
So the prefers-reduced-motion: no preference or reduce, and you can store a variable to flip when that condition changes. We make a motionQuery listener. The more modern version of this is to use a change event, have to get used to use a add listener API, it worked fine, but it was deprecated.

[00:08:59]
So the current version of this is to addEventListener, use a change event, and then it will call this callback function whenever that state changes. So the handleReducedMotionChanged then will go and watch that motion query. We call it once to make it fire on load, and then it will respond.

[00:09:20]
So here's an example of that, going back, kind of a throwback to my ActionScript days. These eyes will follow your mouse cursor, which is kind of whimsical and fun. So it calculates the vanilla JavaScript to move where the eyes are pointing based on where your mouse is. And then we have the motion query in here, that the mouse move listener will go and check that variable for the user's preference.

[00:09:56]
So let's go turn that off, Reduce motion, now the eyes are not moving. So in case you have some animation or motion that's all delivered with JavaScript, you have a hook now to go and turn that off. So that can be handy, so reduce motion. We have prefers-color-scheme.

[00:10:19]
This one is kind of how this theme of these slides are created. So you can match on light mode or dark mode, it's built in, similarly well-supported. And so it's under System Settings, and Appearance. And we have, like prefers-reduce-motion, we have prefers-color-scheme, dark or light, and then you can do the JavaScript version as well with matchMedia.

[00:10:45]
And just a reminder to check your contrast. So if you're doing multiple modes like these slides, I had to go in and change a few things. But we have some pretty awesome tooling for this now. Okay, so accessibility and performance, just a mention of that. We have this concept in performance these days of skeleton layouts, and they're pretty great.

[00:11:12]
I guess my hope is that we can think beyond the visual. And so if we're showing something on screen, maybe just add loading in a live region, or something to announce that the page is loading. Because that is a very visual approach to a performance problem. So consider making a screen reader announcement as part of that.

[00:11:34]
We want to minimize blocking interactions so the page will load fast, that really affects everybody. So we have some metrics we could use to track how long things are taking, that can help. Performance as a user experience metric. So I have a graphic from a Tootsie Pop commercial that made me think of it.

[00:11:58]
How many keystrokes does it take to complete a task? So I think that could be another way to think about performance. It's like how many steps does it take to complete something? It's kind of another way to think about performance. And this is really a throwback to one of the most pivotal books in my career that I read, was Don't Make Me Think by Steve Krug.

[00:12:22]
We wanna keep things simple, fewer steps, kinda gets into UX. But if you can invoke performance as not only how fast your site loads, but how complex is it, I think that could help in the pursuit of making things simpler and more accessible. And therefore, often, easier to build and maintain.