WEBVTT 00:00:07.846 --> 00:00:13.197 For you, one of your biggest biases and issues as a designer 00:00:13.197 --> 00:00:18.550 if you're a visual designer or if you're working on a website or app that – you know – 00:00:18.550 --> 00:00:21.120 you're a stakeholder on the team, 00:00:21.120 --> 00:00:25.954 it's going to be the fact that you can actually  see what's on a screen, 00:00:25.954 --> 00:00:32.944 assuming that you're not blind, that you're actually reviewing visual designs. 00:00:32.944 --> 00:00:39.668 And the things that I found that are the biggest challenges for visual design are the *semantics*. 00:00:39.668 --> 00:00:47.372 So, words make sense when you look at them or descriptions are aided with a visual cue; 00:00:47.372 --> 00:00:54.053 you know – confirmation messages visually colored or it flashes up and there's something that gives you 00:00:54.053 --> 00:01:01.276 a visual cue there, error messages the same thing. So, these kind of semantics of – you know – 00:01:01.276 --> 00:01:08.223 that you understood an error message or you understood something are one of the things we just get used to. 00:01:08.223 --> 00:01:13.460 And then we forget what it might be like if you don't have the visual crutch. 00:01:13.460 --> 00:01:20.404 So, this example here is a quiz, and this is where we saw this, 00:01:20.404 --> 00:01:28.079 when we were optimizing this quiz, that  when we were looking at the accessibility of it, 00:01:28.200 --> 00:01:35.132 the problem with it – so we went through and we made it accessible, so you could 00:01:35.132 --> 00:01:42.134 keyboard and tab through the the different choices – and then we tested it with a user. 00:01:42.134 --> 00:01:48.951 And we were like, oh – we totally didn't realize this. What was happening is that the correct answer was appearing 00:01:48.951 --> 00:01:55.248 to the left of the answer choice. And the problem was that 00:01:55.248 --> 00:02:03.017 when it announced the correct choice, even though it was accessible, it didn't say which one it was. 00:02:03.017 --> 00:02:10.218 So, say Choice B was circled and then the correct answer was displayed over there, 00:02:10.218 --> 00:02:16.917 but it just didn't have this semantic of saying, "The correct answer is Choice B (blah blah blah blah blah)." 00:02:16.917 --> 00:02:23.385 So, very simple, but a good reminder of like, oh yeah – you know – reinforcing 00:02:23.385 --> 00:02:28.857 the fact that your visual bias adds context; 00:02:28.857 --> 00:02:35.251 that might not be there when it's read aloud or when it's navigated through an audible experience like a screen reader. 00:02:35.251 --> 00:02:42.432 The second bucket for visual bias is the interaction; it's the little animations or little micro-interactions 00:02:42.432 --> 00:02:48.500 that are occurring on a screen are another source of – you know – it's like, "Well, I saw that, 00:02:48.500 --> 00:02:53.046 but a screen reader didn't." You know. 00:02:53.046 --> 00:02:59.196 So, being aware of that, as well as the third one, which is *place*. 00:02:59.196 --> 00:03:06.000 So, like the location on a screen or movement that occurs – some meaning from a state change. 00:03:06.000 --> 00:03:12.022 Like a hover is a classic one – you hover on and off and it kind of tells you that it's a clickable element 00:03:12.022 --> 00:03:17.893 or it tells you that nothing's happening. Sometimes you click on stuff, play buttons or 00:03:17.893 --> 00:03:23.606 you click on elements on a screen that are loading like a button or something like that – nothing happens. 00:03:23.606 --> 00:03:29.327 And then you can kind of tell nothing's happening because if you have a little technical proficiency as a user, 00:03:29.327 --> 00:03:34.696 you can look down and see if the page is loading on your browser in the lower-left corner 00:03:34.696 --> 00:03:38.463 or you can see that nothing happened – you push the button and nothing happens. 00:03:38.463 --> 00:03:43.899 Well, if you don't have that visual cue or if something is placed in an area of a screen 00:03:43.899 --> 00:03:49.073 that you have to kind of navigate back up to the top if you're using assistive technology, 00:03:49.073 --> 00:03:52.888 that's going to be a blocker. Right? So, 00:03:52.888 --> 00:03:58.740 visual bias I think is our worst enemy because  we're so familiar with it, we're so used to it   00:03:58.740 --> 00:04:03.058 that we've forgotten that we are, so we have that crutch. 00:04:03.058 --> 00:04:07.456 There's more than one bias, though. There's *mouse-heavy bias*. 00:04:07.456 --> 00:04:14.588 So, we've gotten used to the fact that we use mice all the time and as designers we require point and click a lot. 00:04:14.588 --> 00:04:19.389 So, it took me a while to realize how important this was. 00:04:19.389 --> 00:04:25.370 Many years ago when I was doing lots of usability – you know – kind of user studies and going out and 00:04:25.370 --> 00:04:30.955 talking to users, then when you're doing B2B studies (business-to-business studies), you usually run across 00:04:30.955 --> 00:04:37.126 that one user who is the keyboard user,  and it's like "I don't use the mouse." 00:04:37.126 --> 00:04:43.953 Like, this woman is using this very important software for the company and sometimes she's the only user. 00:04:43.953 --> 00:04:51.788 And she's going through and just because of the speed that she needs to input, it's keyboard-driven. 00:04:51.788 --> 00:04:58.476 Now, we found this with many types of applications like that, so designing for keyboard accessibility 00:04:58.476 --> 00:05:03.018 for the heavy input user is just something  that you end up supporting. 00:05:03.018 --> 00:05:08.359 It's one of these universal type of design approaches. 00:05:08.411 --> 00:05:14.248 And so, with accessibility, we're blocking users if we make things 00:05:14.248 --> 00:05:18.060 too mouse-dominant because then they're not able to use the keyboard. 00:05:18.060 --> 00:05:24.410 And without the keyboard, there's  usually not a focus state related to that. 00:05:24.410 --> 00:05:29.100 So, we'll talk more about focus states just like we've been talking about since they're so important.   00:05:29.100 --> 00:05:33.858 Now, the other bias is the *color bias* – so we've talked about color blindness. 00:05:33.858 --> 00:05:37.700 And for example, putting error messages only in red text. 00:05:37.700 --> 00:05:43.770 And if you recall the guideline there is to add a supporting element like another visual element 00:05:43.770 --> 00:05:48.300 to reinforce the color. Don't just use color alone basically. 00:05:48.300 --> 00:05:55.147 So, watch out for those three biases:  *visual bias, color bias and mouse bias*   00:05:55.440 --> 00:06:02.384 because as a sighted designer or business person  or developer you're probably 00:06:02.384 --> 00:06:05.697 going to be biased by those things. 00:06:05.697 --> 00:06:12.320 Now, in the design phase, some of the very basic accessibility things you should be nipping in the bud, 00:06:12.320 --> 00:06:18.260 in other words, stopping them before the train goes down the track 00:06:18.260 --> 00:06:22.967 are things like *typography*, so the size of your font; 00:06:22.967 --> 00:06:29.851 designing and defining that up front or making sure that that's documented in a style guide is really important. 00:06:29.851 --> 00:06:35.024 If it's not, then that's where a developer needs to be familiar with accessibility so they can stop it 00:06:35.024 --> 00:06:39.620 at their stage of coding or a front-end web developer who's putting together 00:06:39.620 --> 00:06:43.007 a style sheet that will call those styles. 00:06:43.007 --> 00:06:49.833 So, *color contrast* is the other big classic, and I think if there's one skill that any good designer 00:06:49.833 --> 00:06:54.925 – and I'm talking visual designer – needs to learn, it's *high contrast* because that seems 00:06:54.925 --> 00:06:59.592 to be the big one from the dozens of designers that I've worked with over the years. 00:06:59.592 --> 00:07:08.300 It seems like they give me designs all the time that are low contrast. It's the gray on gray, as I like to joke. 00:07:08.300 --> 00:07:13.543 Then *link visibility and target size* is the other one. This is all up front. 00:07:13.543 --> 00:07:18.257 So, before you even get to thinking about accessibility, you should be thinking about that. 00:07:18.257 --> 00:07:23.309 And then *labeling or label proximity* – so how close the label is 00:07:23.309 --> 00:07:28.389 to the element that you're trying to get the call to action on. 00:07:28.401 --> 00:07:34.440 Once you have those basics, then you can add *predictability and consistent navigation*; 00:07:34.440 --> 00:07:43.434 things like the focus, focusability, and then the blocks of content being separated and distinct from each other.