1
00:00:01,000 --> 00:00:06,280
So let's talk about focus states focus is one of the most important features that enables users to use

2
00:00:06,280 --> 00:00:12,370
a computer with just a keyboard, most stylesheets will have this one piece of code that will cause

3
00:00:12,370 --> 00:00:13,980
major accessability failure.

4
00:00:14,350 --> 00:00:19,120
And this is it yet removing the outline.

5
00:00:19,150 --> 00:00:21,130
So let's go back just a bit.

6
00:00:21,400 --> 00:00:24,810
That would remove this outline, which is horrible.

7
00:00:24,970 --> 00:00:26,010
Do I ever do this ever?

8
00:00:26,020 --> 00:00:28,150
You should avoid doing this like the plague.

9
00:00:28,450 --> 00:00:33,730
Keyboard users will know what element they're interacting with because of the help of focus styles.

10
00:00:34,060 --> 00:00:39,130
So Focus highlighting is only used for interactive UI elements like form elements and buttons.

11
00:00:39,340 --> 00:00:41,650
So we need to make sure that we keep that in there.

12
00:00:44,040 --> 00:00:51,060
Another thing we should always be thinking about is focus, contrast, it's a guideline to have the

13
00:00:51,060 --> 00:00:54,420
color of your outline adhere to contract standards as well.

14
00:00:55,020 --> 00:01:00,670
So if you look over here, we have an orange outline and that is definitely going to be accessible.

15
00:01:00,810 --> 00:01:03,150
There is enough contrast with that white background.

16
00:01:03,270 --> 00:01:08,510
But if you were to have a very, very light gray, that's just not going to work.

17
00:01:11,000 --> 00:01:14,810
Next is to think about off screen content in relation to focus.

18
00:01:15,320 --> 00:01:20,090
Keep in mind that sometimes we design content that is hidden off a screen, kind of like this menu over

19
00:01:20,090 --> 00:01:21,050
here in this example.

20
00:01:21,860 --> 00:01:28,220
Some of this content could be like hamburger menus, models, etc. Sometimes when a user is tabbing

21
00:01:28,220 --> 00:01:32,450
through focus points, they can lose track because it could be highlighting something off screen.

22
00:01:32,480 --> 00:01:35,510
Could you imagine how confusing that could be for a user?

23
00:01:35,840 --> 00:01:41,810
If I was tabbing through something like this and I was picking up navigation items, super confusing.

24
00:01:42,530 --> 00:01:47,840
This would cause so much confusion and the user could lose track of what they're doing on screen.

25
00:01:48,410 --> 00:01:51,340
Speak with a developer about solutions around this.

26
00:01:51,950 --> 00:01:57,200
But if you're feeling comfortable enough, you know you can do this easily with access or JavaScript.

27
00:01:58,450 --> 00:02:03,110
Next is morals, morals can be an accessability disaster.

28
00:02:03,130 --> 00:02:09,550
We're not done properly when users tab through a model like this, they should be confined to just the

29
00:02:09,550 --> 00:02:14,240
model they should never be focusing on content behind.

30
00:02:14,440 --> 00:02:17,350
So could you imagine if I was tabbing through moral title?

31
00:02:18,680 --> 00:02:25,340
The exit button, whatever contents within these buttons, and then all of a sudden I tap through launch

32
00:02:25,340 --> 00:02:29,330
demo model, I would be pretty confused and lost.

33
00:02:30,250 --> 00:02:33,610
So make sure you have that conversation as well with developers.

34
00:02:36,720 --> 00:02:42,150
Now, however, states also apply to focus, and however states should be made accessible, users should

35
00:02:42,150 --> 00:02:48,570
be able to tap through hover areas, as they do with focus space areas, because sometimes we actually

36
00:02:48,720 --> 00:02:51,370
hide certain interactions under a hover state.

37
00:02:51,630 --> 00:02:58,860
Think about Facebook and the reactions you need to hover over that like button before you can see all

38
00:02:58,860 --> 00:03:04,380
the other reactions that Facebook does a great job with making it successful.

39
00:03:04,380 --> 00:03:08,760
You can actually tap through this as a focus state, which is amazing.

40
00:03:11,010 --> 00:03:12,870
Let's talk about kallick targets.

41
00:03:14,180 --> 00:03:19,670
Now, big thing is cards, cards are used a bunch and products these days, and it's important to create

42
00:03:19,730 --> 00:03:27,080
accessibility friendly cards since they can get so complex with multiple states based on the type of

43
00:03:27,080 --> 00:03:28,790
interaction being performed.

44
00:03:29,190 --> 00:03:34,040
A really good example of how cards can be made accessible is through Google Inbox.

45
00:03:35,690 --> 00:03:37,580
Now, if you take a look at.

46
00:03:39,030 --> 00:03:45,420
Over here, this is Google inbox, and this interaction is really great, so they assign specific focus

47
00:03:45,420 --> 00:03:46,950
stakes to that.

48
00:03:48,660 --> 00:03:53,490
So they assign specific focus states for the cards that the user has navigated to.

49
00:03:53,520 --> 00:03:58,530
So you'll notice that the person here is navigating to all these different cards.

50
00:03:59,400 --> 00:04:02,550
And then you can see that this is the card that they're currently on.

51
00:04:03,330 --> 00:04:05,610
The hover action is completed on focus.

52
00:04:05,610 --> 00:04:11,970
So the hover action over here for all the different actions you can take on an individual inbox item

53
00:04:12,150 --> 00:04:15,780
will be highlighted while you tab through, which is also great.

54
00:04:16,890 --> 00:04:23,850
Now, another thing that people fail to realize is you don't necessarily need to make every single UI

55
00:04:23,850 --> 00:04:26,240
element on the screen towable.

56
00:04:27,470 --> 00:04:28,580
Or forecastle.

57
00:04:30,000 --> 00:04:37,080
What Google Inbox does really well in this specific interaction is that only the actionable items are

58
00:04:37,080 --> 00:04:39,510
focused and not every other element in the card.

59
00:04:39,540 --> 00:04:45,420
So over here, you'll notice that only these primary actions are actually.

60
00:04:46,670 --> 00:04:49,910
In focus in comparison to like all these other elements.

61
00:04:52,710 --> 00:05:00,570
Next is target areas, we need to make sure that target areas are large enough for users to select on

62
00:05:00,570 --> 00:05:02,400
a page, so.

63
00:05:04,420 --> 00:05:08,950
Some users have motor impairments and it find it hard to select smaller items.

64
00:05:13,020 --> 00:05:19,920
If we take a look over here, we'll notice that the mailbox has a larger topical area, same with what

65
00:05:19,920 --> 00:05:20,940
the edit button would be.

66
00:05:21,150 --> 00:05:27,840
And this is what I was talking about in the beginning around like different that accessibility is greater

67
00:05:27,840 --> 00:05:28,280
for all.

68
00:05:28,290 --> 00:05:35,040
I mean, when you're on mobile, you want a larger topical area and not even if you have a motor impairment.

69
00:05:35,070 --> 00:05:39,630
This just makes my life easier is just going through my mailbox.

70
00:05:39,990 --> 00:05:41,280
So keep this in mind.

71
00:05:41,280 --> 00:05:42,810
Just when you're designing in general.

72
00:05:45,170 --> 00:05:50,510
Now, I just want to say that many of these solutions aren't very style specific, but they do all still

73
00:05:50,510 --> 00:05:53,390
affect us in some way, especially as designers.

74
00:05:53,960 --> 00:05:57,380
We always set out to build products that everyone can enjoy and use easily.

75
00:05:57,950 --> 00:06:03,230
Accessibility should be a part of the design process earlier, and every UI element and every design

76
00:06:03,230 --> 00:06:05,150
pattern should be made accessible.

77
00:06:07,230 --> 00:06:13,140
And most importantly, you should always collaborate with your development team, accessibility is something

78
00:06:13,140 --> 00:06:18,240
that all of us can work towards and do, and it certainly starts with design in terms of style, like

79
00:06:18,240 --> 00:06:21,320
contrast and labels and forms and all that kind of stuff.

80
00:06:21,660 --> 00:06:27,230
But a lot of what happens in terms of specifications will happen on the on the development side.

81
00:06:27,600 --> 00:06:31,770
So it's always important to talk to developers because they're going to have a much deeper understanding

82
00:06:31,770 --> 00:06:33,320
of what's really necessary.

83
00:06:35,010 --> 00:06:38,870
And they can really inform you and help you along the way.

84
00:06:39,790 --> 00:06:41,080
So that's accessability.