WEBVTT

00:00:00.000 --> 00:00:32.944
For you, one of your biggest biases and issues as a designer
if you're a visual designer or if you're working on a website or app that – you know –
you're a stakeholder on the team,
it's going to be the fact that you can actually  see what's on a screen,
assuming that you're not blind, that you're actually reviewing visual designs.

00:00:32.944 --> 00:01:01.276
And the things that I found that are the biggest challenges for visual design are the *semantics*.
So, words make sense when you look at them or descriptions are aided with a visual cue;
you know – confirmation messages visually colored or it flashes up and there's something that gives you
a visual cue there, error messages the same thing. So, these kind of semantics of – you know –

00:01:01.276 --> 00:01:35.132
that you understood an error message or you understood something are one of the things we just get used to.
And then we forget what it might be like if you don't have the visual crutch.
So, this example here is a quiz, and this is where we saw this,
when we were optimizing this quiz, that  when we were looking at the accessibility of it,
the problem with it – so we went through and we made it accessible, so you could

00:01:35.132 --> 00:02:03.017
keyboard and tab through the the different choices – and then we tested it with a user.
And we were like, oh – we totally didn't realize this. What was happening is that the correct answer was appearing
to the left of the answer choice. And the problem was that
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:35.251
So, say Choice B was circled and then the correct answer was displayed over there,
but it just didn't have this semantic of saying, "The correct answer is Choice B (blah blah blah blah blah)."
So, very simple, but a good reminder of like, oh yeah – you know – reinforcing
the fact that your visual bias adds context;
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:03:06.000
The second bucket for visual bias is the interaction; it's the little animations or little micro-interactions
that are occurring on a screen are another source of  – you know – it's like, "Well, I saw that,
but a screen reader didn't." You know.
So, being aware of that, as well as the third one, which is *place*.
So, like the location on a screen or movement that occurs – some meaning from a state change.

00:03:06.000 --> 00:03:34.696
Like a hover is a classic one – you hover on and off and it kind of tells you that it's a clickable element
or it tells you that nothing's happening. Sometimes you click on stuff, play buttons or
you click on elements on a screen that are loading like a button or something like that – nothing happens.
And then you can kind of tell nothing's happening because if you have a little technical proficiency as a user,
you can look down and see if the page is loading on your browser in the lower-left corner

00:03:34.696 --> 00:04:03.058
or you can see that nothing happened – you push the button and nothing happens.
Well, if you don't have that visual cue or if something is placed in an area of a screen
that you have to kind of navigate back up to the top if you're using assistive technology,
that's going to be a blocker. Right? So,
visual bias I think is our worst enemy because  we're so familiar with it, we're so used to it  
that we've forgotten that we are, so we have that crutch.

00:04:03.058 --> 00:04:30.955
There's more than one bias, though. There's *mouse-heavy bias*.
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.
So, it took me a while to realize how important this was.
Many years ago when I was doing lots of usability – you know – kind of user studies and going out and
talking to users, then when you're doing B2B studies (business-to-business studies), you usually run across

00:04:30.955 --> 00:05:03.018
that one user who is the keyboard user,  and it's like "I don't use the mouse."
Like, this woman is using this very important software for the company and sometimes she's the only user.
And she's going through and just because of the speed that she needs to input, it's keyboard-driven.
Now, we found this with many types of applications like that, so designing for keyboard accessibility
for the heavy input user is just something  that you end up supporting.

00:05:03.018 --> 00:05:33.858
It's one of these universal type of design approaches.
And so, with accessibility, we're blocking users if we make things
too mouse-dominant because then they're not able to use the keyboard.
And without the keyboard, there's  usually not a focus state related to that.
So, we'll talk more about focus states just like we've been talking about since they're so important.  
Now, the other bias is the *color bias* – so we've talked about color blindness.

00:05:33.858 --> 00:06:02.384
And for example, putting error messages only in red text.
And if you recall the guideline there is to add a supporting element like another visual element
to reinforce the color. Don't just use color alone basically.
So, watch out for those three biases:  *visual bias, color bias and mouse bias*  
because as a sighted designer or business person  or developer you're probably

00:06:02.384 --> 00:06:35.024
going to be biased by those things.
Now, in the design phase, some of the very basic accessibility things you should be nipping in the bud,
in other words, stopping them before the train goes down the track
are things like *typography*, so the size of your font;
designing and defining that up front or making sure that that's documented in a style guide is really important.
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:07:08.300
at their stage of coding or a front-end web developer who's putting together
a style sheet that will call those styles.
So, *color contrast* is the other big classic, and I think if there's one skill that any good designer
– and I'm talking visual designer – needs to learn, it's *high contrast* because that seems
to be the big one from the dozens of designers that I've worked with over the years.
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:34.440
Then *link visibility and target size* is the other one. This is all up front.
So, before you even get to thinking about accessibility, you should be thinking about that.
And then *labeling or label proximity* – so how close the label is
to the element that you're trying to get the call to action on.
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.