Accessibility Considerations

[00:00:00]
>> Matias Gonzalez: We have learned how to do a lot of animations and how to add things that move on the site, so we need to pay closer attention to accessibility because chances are we might have made things harder to use for some users. So there are a couple of things that we always want to check, like the color contrast of our text, add alternative text to the images, using proper syntax for the HTML things like headings for headers and buttons for buttons, that sort of stuff.

[00:00:48]
Label our form inputs clearly so if you're using a screen reader it's easy to fill out forms, and a rule of thumb is try to use your website just with your keyboard, no mouse, no trackpad, and if you can't then you need to keep working because some people won't have access to use a mouse, so you need to make sure that you can navigate just using tab and everything has different focus states and it's easy to understand how to use our websites.

[00:01:25]
Here the Lighthouse accessibility check is going to be your best friend. In general it's going to catch a lot of things that we can fix, so it's a pretty easy way to get started. Then also sometimes let's say that we want to create our own custom crazy dropdown, just try not to implement it from scratch. Use some library like Radix or Chasen because actually creating an accessible piece of component like a dropdown or a search menu or some complex thing like that, it's actually very hard to make it accessible, so these people already put a ton of work into solving that issue, and these are just primitives we can just style them however we want.

[00:02:26]
And it's actually easier to get started with a really solid primitive than create that from scratch. Also one trick on how to check color contrast on our websites. Let's go into Chrome again. Here, okay, so let's say that I want to check that this color has a good contrast. Of course it has, but let's just try to check it. If I go into my div, let's just set a color of, I don't know, white, and let's say I want to check this contrast for accessibility.

[00:03:21]
So Chrome has a really cool tool to do that and it's here, like the contrast ratio, and it will ask us to pick a background color because by default it doesn't really know what is the background of our text. So if we click in here and just click on the background color that we have, it's going to tell us, hey, no, this is actually, it doesn't have a good contrast, and it also draws two lines.

[00:03:57]
So basically the way this works is we want to get our colors below this line, so below this line we can be sure that the contrast is perfect for accessibility. If we are in the middle, it will depend basically on the text size. So if we have a very small text with a lot of words and it's with this color, it's going to be annoying to read for anyone.

[00:04:29]
So in general you want to get your contrast below this threshold, and also notice that if we change the hue of our color, this curve also changes, so just take that into consideration when you are picking colors in general. So as you can see if I want a really saturated color, maybe we can do this and it would just work correctly. Maybe we can take it in here.

[00:05:06]
But yeah, this is a really useful feature for that. Again, we learned a lot about how to add things that move all over the place into our websites, and that might be a problem for some people. Like, as you can see for example on this website that I worked on, things start by scrolling vertically and then they start scrolling to the side, and not only that but you have some fixed visuals that are the shadows that are in place while other things scroll.

[00:05:49]
So for some people this can trigger motion sickness. So motion sickness is when your eyes and ears don't sync. I don't know if you have ever tried a VR headset and after some time you'll start getting headaches and you can get fatigue and you'll start feeling really bad, and that's because your brain is, your ear is telling your brain like, hey, you are on a fixed position but your eyes just don't match that, so your brain gets confused and it's a really annoying thing to feel.

[00:06:27]
So if we start changing the direction of our scroll and have fixed things while other things move, we might trigger that into some users, and that is, we don't want our brand or thing to be associated with causing sickness to people. So there is a solution for that, which is the reduced motion features of the browsers. Using this media query we can actually detect if a user has reduced motion enabled.

[00:07:02]
Basically that person is asking, hey, just go easy on all of the crazy movement stuff. So as we can see we can create a different version of our websites where if you just scroll it will just scroll, no smooth scrolling, no horizontal scroll, no fixed things. It's okay to have a couple of fixed things if they are not too big, but in general you want to maintain everything reactive to the user scroll to make things easier to use.

[00:07:37]
So as we can see we can target both states. We can check if a user has preferred to use motion using this media query or if it's safe to use different animations.