1
00:00:09,087 --> 00:00:12,420
Hi, and welcome back as we go back and
we talk about designing for

2
00:00:12,420 --> 00:00:14,810
accessibility once again.

3
00:00:14,810 --> 00:00:17,700
So, as I've been telling you more and
more kind of cool,

4
00:00:17,700 --> 00:00:21,250
neat things, I sometimes feel
the need to rein you back in and

5
00:00:21,250 --> 00:00:24,330
remind you of the basics of when
you're designing your page.

6
00:00:24,330 --> 00:00:28,079
And part of that basics is that I want
to remind you that the content of your

7
00:00:28,079 --> 00:00:29,560
page should be in your HTML.

8
00:00:30,580 --> 00:00:35,460
What I mean by that is that it can be
really tempting to add content via colors,

9
00:00:35,460 --> 00:00:39,495
images, etc., things that people
may not be able to perceive, but

10
00:00:39,495 --> 00:00:41,820
you're not necessarily
thinking about it when,

11
00:00:41,820 --> 00:00:45,270
as a visual user,
you're kind of bringing it in.

12
00:00:45,270 --> 00:00:49,000
So what I want you to do as you're
designing your pages and testing and

13
00:00:49,000 --> 00:00:53,580
redesigning and testing and redesigning is
remember what we call the POUR guidelines.

14
00:00:53,580 --> 00:00:59,860
We want your pages to be perceivable,
operable, understandable, and robust.

15
00:00:59,860 --> 00:01:00,810
And the perceivable and

16
00:01:00,810 --> 00:01:04,890
understandable really kind of match up
with what you're doing with your CSS.

17
00:01:06,350 --> 00:01:06,940
So in order for

18
00:01:06,940 --> 00:01:10,470
things to be perceivable, I just want
you to remember a couple of things.

19
00:01:10,470 --> 00:01:15,160
First, always remember to provide
text alternatives for your images.

20
00:01:15,160 --> 00:01:18,540
Your images should not convey
the information completely on their own.

21
00:01:19,710 --> 00:01:24,190
Make sure that you're providing captions
and transcripts for video and audio.

22
00:01:24,190 --> 00:01:27,830
Now, not everyone has access to
tools to provide this for you for

23
00:01:27,830 --> 00:01:32,220
free, but where you work or where you go
to school may be able to help you out.

24
00:01:33,540 --> 00:01:36,620
Make sure you're using that
correct semantic markup so

25
00:01:36,620 --> 00:01:39,580
that content can be
presented in different ways.

26
00:01:39,580 --> 00:01:41,280
I want you using that nav tag.

27
00:01:41,280 --> 00:01:45,210
I want you using the figure
tag instead of the image tag.

28
00:01:45,210 --> 00:01:48,570
What tends to happen is that people
have code they've already written and

29
00:01:48,570 --> 00:01:52,580
they want to be a little bit lazy and
not have to change their HTML,

30
00:01:52,580 --> 00:01:55,940
because when they do,
they have to change their CSS.

31
00:01:55,940 --> 00:01:57,430
Go ahead and make that change.

32
00:01:57,430 --> 00:01:58,770
It's really going to be worth it.

33
00:01:59,770 --> 00:02:01,010
Make it easy for

34
00:02:01,010 --> 00:02:06,320
users to connect, to see their content,
by using really good color contrast.

35
00:02:06,320 --> 00:02:09,750
You'd be very suprised to realize
how many people are unable to access

36
00:02:09,750 --> 00:02:13,560
information on the web because they really
can't see what you've put up there.

37
00:02:14,870 --> 00:02:18,870
Next, let's talk about what it means for
your page to be operable.

38
00:02:18,870 --> 00:02:23,140
What I mean by that is that all the
functionality that's going into your page

39
00:02:23,140 --> 00:02:25,570
should be available from the keyboard.

40
00:02:25,570 --> 00:02:29,120
Don't expect that everyone's going
to use a mouse to go over your page.

41
00:02:29,120 --> 00:02:31,270
Don't expect that some things,
it's okay for

42
00:02:31,270 --> 00:02:34,060
some things to only be accessible
if you hover over them.

43
00:02:35,240 --> 00:02:38,920
Users should have the control over
all the timing and the limits.

44
00:02:38,920 --> 00:02:43,060
So if you have those videos in media, make
sure you're putting it in that there's

45
00:02:43,060 --> 00:02:47,590
a control panel for them to turn things
off, turn them down, rewind, etc.

46
00:02:49,130 --> 00:02:50,840
This is something that's
actually important to me,

47
00:02:50,840 --> 00:02:54,115
because I have family members who deal
with this, is that you want to make sure

48
00:02:54,115 --> 00:02:57,280
that you don't have some sort of
content that flashes all the time.

49
00:02:57,280 --> 00:02:59,900
I'm not talking about Flash the software.

50
00:02:59,900 --> 00:03:02,410
I'm talking about things that
are going to blink on the screen and

51
00:03:02,410 --> 00:03:04,940
the user doesn't have
the control to turn it off.

52
00:03:04,940 --> 00:03:06,420
This can actually cause seizures.

53
00:03:07,460 --> 00:03:11,030
You want to provide ways to help
users navigate through your page.

54
00:03:11,030 --> 00:03:14,068
Don't make it a puzzle where they have to
kind of figure out how to get where they

55
00:03:14,068 --> 00:03:14,980
want to go.

56
00:03:14,980 --> 00:03:19,100
It's your job to make it as easy as
possible for them to find content and

57
00:03:19,100 --> 00:03:21,060
figure out where they are on your page.

58
00:03:22,610 --> 00:03:25,080
Here's just a few quick
examples of different ways

59
00:03:25,080 --> 00:03:29,410
that people sometimes access the web,
whether it's with a penstick,

60
00:03:29,410 --> 00:03:33,380
a keyboard, a remote,
a kind of accessible keyboard, or

61
00:03:33,380 --> 00:03:38,620
even some sort of puff devices that they
can use to navigate through the web.

62
00:03:38,620 --> 00:03:42,270
Next, let's talk about what I mean
when a page is understandable.

63
00:03:42,270 --> 00:03:46,280
Typically, you want to keep your
language short and sweet on your page.

64
00:03:46,280 --> 00:03:48,770
Unless you're an author and
you're showing off your works,

65
00:03:48,770 --> 00:03:51,690
people are only going to spend
a few seconds on your page.

66
00:03:51,690 --> 00:03:55,540
Make it easy for them to understand
what you're trying to say.

67
00:03:55,540 --> 00:03:58,620
When you have text supplemented
with illustrations, videos,

68
00:03:58,620 --> 00:04:02,670
and other formats where appropriate,
you want to make sure that you're using

69
00:04:02,670 --> 00:04:05,650
good universal design,
that people are able to access it.

70
00:04:06,700 --> 00:04:11,305
Navigation, information structure,
those should be really separate and

71
00:04:11,305 --> 00:04:13,490
discernable from your content.

72
00:04:13,490 --> 00:04:17,950
Make people, make it easier for people to
get away, get back to certain pages, etc.

73
00:04:17,950 --> 00:04:21,976
And finally, make your pages
operate in predictable ways.

74
00:04:21,976 --> 00:04:24,330
This can be kind of a confusing
thing to just talk about, but

75
00:04:24,330 --> 00:04:27,520
if you've ever been to a website where you
just can't quite figure out how to get

76
00:04:27,520 --> 00:04:32,490
back to the page you were three pages ago,
make it easy for people to get that.

77
00:04:33,580 --> 00:04:36,980
Finally, help users avoid and
correct mistakes.

78
00:04:36,980 --> 00:04:40,679
It's up to you, not them, to figure
out how to access the information.

79
00:04:41,950 --> 00:04:45,130
Finally, the R, the robust in the POUR.

80
00:04:45,130 --> 00:04:48,620
Is your site functional across
various technologies, a smart phone,

81
00:04:48,620 --> 00:04:51,280
screen reader, laptop, pensticks?

82
00:04:51,280 --> 00:04:52,280
As you work with me and

83
00:04:52,280 --> 00:04:56,900
we go further on, we'll talk about
responsive design in some later classes.

84
00:04:56,900 --> 00:05:00,180
And that's making sure that your
page looks the best it can look

85
00:05:00,180 --> 00:05:01,700
on different screen sizes.

86
00:05:01,700 --> 00:05:05,220
But it's more than screen sizes, you also
need to think about things like we said,

87
00:05:05,220 --> 00:05:06,860
the pensticks and the screen readers.

88
00:05:08,100 --> 00:05:11,420
So there's going to be syntax errors
that you might have in your code

89
00:05:11,420 --> 00:05:14,070
that don't affect what
the page looks like to you.

90
00:05:14,070 --> 00:05:16,870
You've gone in, it looks great,
you're like, I'm golden.

91
00:05:16,870 --> 00:05:21,890
You have to remember that those syntax
errors can mess up other technology.

92
00:05:21,890 --> 00:05:24,430
So make sure that you're
adhering to standards and

93
00:05:24,430 --> 00:05:27,170
to ensure future compatibility
with new browsers.

94
00:05:27,170 --> 00:05:32,429
And the easiest way to do that is
to go onto validator.w3c.org and

95
00:05:32,429 --> 00:05:36,410
the wave.webaim.org to validate your code.

96
00:05:36,410 --> 00:05:40,150
It's simple, it's fast, and it's really
going to give you a much better page.

97
00:05:40,150 --> 00:05:43,690
So just to review,
I'm not asking you to make great strides.

98
00:05:43,690 --> 00:05:45,630
I just want you to do little things right.

99
00:05:45,630 --> 00:05:49,520
And that really starts
with the proper HTML tags.

100
00:05:49,520 --> 00:05:53,820
Styling can actually make it harder for
some people to access the information, so

101
00:05:53,820 --> 00:05:55,700
test, test, test.

102
00:05:55,700 --> 00:05:57,320
Have people look at your page.

103
00:05:57,320 --> 00:05:58,230
Have them give you feedback.

104
00:05:58,230 --> 00:05:59,660
Don't take it personally.

105
00:05:59,660 --> 00:06:01,270
It's not about your coding.

106
00:06:01,270 --> 00:06:03,870
It's about really making a great product.

107
00:06:03,870 --> 00:06:06,360
Finally, get into the early habit

108
00:06:06,360 --> 00:06:09,180
of utilizing these different
accessibility tools.

109
00:06:09,180 --> 00:06:12,280
They’re there for
you to make your life easier, not harder.

110
00:06:13,370 --> 00:06:16,220
Finally, the one thing I really
struggle with, with students,

111
00:06:16,220 --> 00:06:18,400
is we all want to do the cool new things.

112
00:06:18,400 --> 00:06:21,100
But cool new styles and
cool new technologies

113
00:06:21,100 --> 00:06:25,140
should not be at the cost of accessibility
and people viewing your page.

114
00:06:25,140 --> 00:06:28,300
So really I'm hoping that as
you're learning this code and

115
00:06:28,300 --> 00:06:32,110
you're getting a little bit stressed out
about utilizing all these cool things

116
00:06:32,110 --> 00:06:35,900
you're learning, that you're remembering
it's not about having the coolest webpage.

117
00:06:35,900 --> 00:06:40,010
It's about having a clean page that
really portrays the information

118
00:06:40,010 --> 00:06:41,760
you want to get out on the web.

119
00:06:41,760 --> 00:06:42,260
Good luck.