1
00:00:08,796 --> 00:00:10,150
Hi welcome back.

2
00:00:10,150 --> 00:00:13,420
In this lecture we're gonna be
talking about accessible navigation.

3
00:00:13,420 --> 00:00:17,263
I know that this course is mostly about
CSS, but I always like to pop in and

4
00:00:17,263 --> 00:00:19,973
remind you of the different
things you need to think

5
00:00:19,973 --> 00:00:22,006
about as you're styling your pages.

6
00:00:22,006 --> 00:00:25,960
Navigation is really the most
critical aspect of accessibility.

7
00:00:25,960 --> 00:00:30,198
If people can't navigate through your page
and get to the content they really need to

8
00:00:30,198 --> 00:00:33,736
get to, then you've really just
wasted their time and some of yours.

9
00:00:33,736 --> 00:00:37,519
So, cited users have these kind of tried
and true things that they look for

10
00:00:37,519 --> 00:00:38,220
on a page.

11
00:00:38,220 --> 00:00:39,360
They know what a search box is.

12
00:00:39,360 --> 00:00:41,790
They know where the banner usually goes.

13
00:00:41,790 --> 00:00:43,673
Where the main navigation is.

14
00:00:43,673 --> 00:00:46,525
And its not surprising to them
that often the main content,

15
00:00:46,525 --> 00:00:49,617
in what we call the content well,
is hidden down lower in a page.

16
00:00:49,617 --> 00:00:53,730
And we know this because we can see it
just as soon as we open up the browser.

17
00:00:53,730 --> 00:00:56,940
But for blind or low vision-users,
they really need to rely

18
00:00:56,940 --> 00:01:00,720
on proper coding of the page in order
to get to what they want to get to.

19
00:01:00,720 --> 00:01:03,440
And not just the proper coding, but there

20
00:01:03,440 --> 00:01:07,970
are a lot of stylistic issues you need
to think about when you're doing this.

21
00:01:07,970 --> 00:01:10,220
So, what if you can't see?

22
00:01:10,220 --> 00:01:13,790
The first place that you get information
is from the title of the page.

23
00:01:13,790 --> 00:01:16,280
You wanna make sure that
your title is short but

24
00:01:16,280 --> 00:01:21,580
also lets the user know how this page is
different from other pages at your site.

25
00:01:21,580 --> 00:01:24,820
Next, the proper heading placement,
and kind of this hierarchy,

26
00:01:24,820 --> 00:01:28,040
allows screen users to skip
the different navigational links and

27
00:01:28,040 --> 00:01:30,120
get directly to what they're looking for.

28
00:01:30,120 --> 00:01:33,772
I think you've all been to sites where it
feels like you need to go to one place and

29
00:01:33,772 --> 00:01:36,022
then you follow another and
you follow another.

30
00:01:36,022 --> 00:01:38,880
And this can be really annoying and
irritating.

31
00:01:38,880 --> 00:01:42,518
Especially so if it's really important
that your mouse is on just the right spot.

32
00:01:42,518 --> 00:01:44,680
So we wanna make sure that
we let screen readers and

33
00:01:44,680 --> 00:01:46,480
other users skip right to
where they want to go.

34
00:01:47,560 --> 00:01:49,430
We also want to think about your links.

35
00:01:49,430 --> 00:01:52,390
Because when you have the links to
the different sites in your page,

36
00:01:52,390 --> 00:01:55,680
those descriptions are all that
people have going for them.

37
00:01:55,680 --> 00:01:58,740
So you don't wanna use Click Me,
Follow Me Here.

38
00:01:58,740 --> 00:02:01,699
You want to give good information
in those link descriptions.

39
00:02:02,870 --> 00:02:06,710
Next, we need to talk about
proper heading hierarchy, okay?

40
00:02:06,710 --> 00:02:10,950
Headings need to be nested in order
to really provide structure, so

41
00:02:10,950 --> 00:02:14,810
you shouldn't have h3 headings
before you have h2 headings.

42
00:02:14,810 --> 00:02:16,890
You should only have one h1 heading.

43
00:02:16,890 --> 00:02:18,370
You shouldn't jump from h2 to h4.

44
00:02:19,760 --> 00:02:22,690
Instead, you really wanna follow
a certain kind of order so

45
00:02:22,690 --> 00:02:25,670
that people can realize that there
is meaning behind your page.

46
00:02:25,670 --> 00:02:27,430
So here's an example right here.

47
00:02:27,430 --> 00:02:30,660
I have my single h1 heading,
and then in this page,

48
00:02:30,660 --> 00:02:33,020
I can imagine that I have three sections.

49
00:02:33,020 --> 00:02:36,026
Each one of those sections has
an h2 heading inside of it.

50
00:02:36,026 --> 00:02:39,871
And in my first section, it might be that
I have these certain little bullet points

51
00:02:39,871 --> 00:02:43,997
or other points I'm making, where they're
important enough that I've decided hey,

52
00:02:43,997 --> 00:02:47,810
I'm gonna use h3 to signify that this is
another subsection within my section.

53
00:02:48,860 --> 00:02:53,530
Where people get in trouble and what you
see all the time, is that people decide,

54
00:02:53,530 --> 00:02:56,090
I really like the look of that h2 font.

55
00:02:56,090 --> 00:02:58,370
I like just how big the text is.

56
00:02:58,370 --> 00:03:01,630
I like how the kind of font they use,
so I'm just going to put

57
00:03:01,630 --> 00:03:06,030
as many things as I can into the h2
font cuz I like the way it looks.

58
00:03:06,030 --> 00:03:08,300
And they're not thinking
about the semantics.

59
00:03:08,300 --> 00:03:10,880
The same thing happens with the h3 font.

60
00:03:10,880 --> 00:03:14,960
You'll go to somebody's page and
find out there are no h2 fonts at all.

61
00:03:14,960 --> 00:03:18,030
Instead, it's all h3 elements, and

62
00:03:18,030 --> 00:03:22,150
they only did that because they like
the look of that particular tag.

63
00:03:22,150 --> 00:03:24,420
So now,
this is where the styling comes in,

64
00:03:24,420 --> 00:03:27,430
this is why I'm talking about
this in the styling class.

65
00:03:27,430 --> 00:03:32,870
Is that now you know that instead, if you
really like the look of that h3 heading,

66
00:03:32,870 --> 00:03:38,120
instead of using the tag, you should be
styling other tags to replicate that look.

67
00:03:38,120 --> 00:03:39,900
Find out which font family they use.

68
00:03:39,900 --> 00:03:41,540
Find out which font size.

69
00:03:41,540 --> 00:03:42,610
Just repeat it.

70
00:03:42,610 --> 00:03:45,280
Don't use tags just because
you like the way they look.

71
00:03:46,350 --> 00:03:49,270
The other thing you can think
about to help navigation,

72
00:03:49,270 --> 00:03:51,790
is this idea of off-page headings.

73
00:03:51,790 --> 00:03:54,920
It's useful to do when you want to give
the screen reader user some sort of

74
00:03:54,920 --> 00:04:00,400
navigational aid, but you don't want
to put it right in the page and

75
00:04:00,400 --> 00:04:02,890
have your sighted users also have
to deal with it all the time.

76
00:04:02,890 --> 00:04:05,390
So, let me give you
an example of this one.

77
00:04:05,390 --> 00:04:09,250
We're going to use styling sheets
to basically set something offpage,

78
00:04:09,250 --> 00:04:12,159
we've given it the name of offpage,
and we've said,

79
00:04:12,159 --> 00:04:16,419
hey, I wanna place this in a position
absolute off to the left by -1000px.

80
00:04:16,419 --> 00:04:19,060
So you'll know that that's pretty far off.

81
00:04:19,060 --> 00:04:22,620
I have here the University of
Michigan Human Resources page.

82
00:04:22,620 --> 00:04:25,480
And if you look up near the top,
there's really nothing there,

83
00:04:25,480 --> 00:04:26,870
up here in the top corner.

84
00:04:26,870 --> 00:04:29,860
But what I'm gonna do,
is I'm gonna go ahead and hit Tab.

85
00:04:29,860 --> 00:04:33,550
And, what Tab does,
is it brings the next element into focus.

86
00:04:33,550 --> 00:04:35,010
So, go ahead and Tab, there.

87
00:04:35,010 --> 00:04:36,080
And you can see,

88
00:04:36,080 --> 00:04:40,320
that now, there's this new thing
here that says Skip to main content.

89
00:04:40,320 --> 00:04:45,530
If I click on it, I go all the way down,
and I was able to

90
00:04:45,530 --> 00:04:49,740
skip a lot of this additional information
that they didn't really need to see.

91
00:04:49,740 --> 00:04:52,476
It was more just marketing and
different things like that.

92
00:04:52,476 --> 00:04:56,856
So, these different off screen navigation
links are extremely useful to allow people

93
00:04:56,856 --> 00:04:59,810
to jump immediately to
what they want to get to.

94
00:04:59,810 --> 00:05:01,560
But, by using styling,

95
00:05:01,560 --> 00:05:04,560
we've taken it off the page that you
only use it if you really want to.

96
00:05:05,830 --> 00:05:09,613
One of the things I wanted to mention is,
if you're going to do off-page headings,

97
00:05:09,613 --> 00:05:12,970
don't use {display: none} or
{visibility: hidden}.

98
00:05:12,970 --> 00:05:16,370
These really just kind of mess with
the code and make it very hard for

99
00:05:16,370 --> 00:05:19,650
screen readers or other people looking
at your code to see what's going on.

100
00:05:20,930 --> 00:05:24,090
At the start of the lecture I
mentioned that meaningful link text is

101
00:05:24,090 --> 00:05:24,930
very important for

102
00:05:24,930 --> 00:05:29,590
accessibility because screen readers
can find and list all of the links.

103
00:05:29,590 --> 00:05:33,330
Now, what you may not realize is
the way that these links are displayed

104
00:05:33,330 --> 00:05:35,910
may not be in the way you expect.

105
00:05:35,910 --> 00:05:38,130
So, they may be out of context.

106
00:05:38,130 --> 00:05:40,680
You may only be able to
access them via tabbing or

107
00:05:40,680 --> 00:05:43,180
they may be presented in a list.

108
00:05:43,180 --> 00:05:48,530
So, you really want to avoid using things
such as click here, read this and more.

109
00:05:48,530 --> 00:05:49,370
The reason being,

110
00:05:49,370 --> 00:05:53,559
is that maybe the only context some
people get in order to go to the links.

111
00:05:55,040 --> 00:05:58,410
Also, please don't use the URL
as a link description.

112
00:05:58,410 --> 00:06:03,140
It's pretty common to go to a site and
you can see click here, and

113
00:06:03,140 --> 00:06:07,002
they have the entire URL,
www.umich.edu/etc.

114
00:06:07,002 --> 00:06:11,802
It may look very descriptive, but
if you have to listen to the description,

115
00:06:11,802 --> 00:06:13,940
it can be very confusing.

116
00:06:13,940 --> 00:06:17,960
Instead, unless you have a very short URL,
go ahead and

117
00:06:17,960 --> 00:06:19,420
use some sort of textual description.

118
00:06:20,810 --> 00:06:24,120
So, just to review, let's think
about what we've learned today.

119
00:06:24,120 --> 00:06:27,917
When you finish making your page,
it's not enough for it to look good.

120
00:06:27,917 --> 00:06:31,760
You need to think about how easy
it is to navigate your page.

121
00:06:31,760 --> 00:06:34,840
Think about what would happen
if the colors weren't there, or

122
00:06:34,840 --> 00:06:37,890
if somebody could only navigate
to your page with a mouse.

123
00:06:37,890 --> 00:06:40,480
So I wannashow you really quickly
what I'm talking about here.

124
00:06:42,590 --> 00:06:46,970
Here's an old page of mine, and, at the
bottom, I have the University of Michigan.

125
00:06:46,970 --> 00:06:49,836
I just want to show you what
happens when I take away the style.

126
00:06:52,204 --> 00:06:56,150
The page now,
you can't even see the text anymore.

127
00:06:56,150 --> 00:06:59,030
These are the kinda small things
that you would never notice

128
00:06:59,030 --> 00:07:01,610
unless you checked your page both with and
without styling.

129
00:07:03,350 --> 00:07:07,090
So, when you plan your page,
make sure you're planning for everyone.

130
00:07:07,090 --> 00:07:08,790
Make great use of headings.

131
00:07:08,790 --> 00:07:10,620
Make great use of link text.

132
00:07:10,620 --> 00:07:14,030
And make sure that you're giving people
the tools they need to navigate your page

133
00:07:14,030 --> 00:07:14,970
successfully.

134
00:07:14,970 --> 00:07:15,470
Thanks.