Accessibility Policy
All Columbia websites must meet WCAG 2.0 AA accessibility requirements. Read the University Accessibility Policy.
What Is Digital Accessibility?
Digital accessibility refers to creating digital products so that all individuals with disabilities can use them and experience the content on these products. People use various assistive technologies—screen readers, screen magnifiers, and keyboards controls—to access site content. Others may need to read video captions or transcripts to access video content.
What Do You Need to Do for Your Website?
Existing Websites
You must test your website to see if it complies with WCAG 2.0 AA requirements. The easiest way to do this install the WAVE Evaluation Tool into your Chrome browser.
At a minimum, you need to test all key pages on your site for compliance. Preferably, you should test every page on your site.
Read the Web Accessibility FAQs if you have questions.
Using the WAVE Evaluation Tool
What to Do with the Results
You must contact the website team responsible for building your site with a list of the issues found by the WAVE remediation tool:
- If your website was built by CUIT, submit an email to [email protected]
- If your website was built by CUIMC, submit a support request
- If your website was built by a third party vendor, contact them for remediation
Building New Websites
Columbia Sites is a free website building solution for the university community. Columbia Sites is built on Drupal 8 and attention is constantly spent to build in accessibility compliance; content creators need only focus on creating and maintaining accessible content. Columbia Sites is the easiest and least expensive way to create accessible websites. There are paid packages as well if you would like their team to build the site for you.
If third-party vendors are used for creating websites, the vendor must thoroughly be vetted to make sure they are creating an accessible site. This is the website owner's responsibility.
Read the Web Accessibility FAQs if you have questions.
Creating Accessible Content
Building an accessible website only takes you halfway to compliance. To meet the standard, all of your website content must also be accessible. The instructions below offer guidance in creating content that will meet the standard and be useful to the broadest range of site visitors.
The Basics of Creating Accessible Content
Transcript
00:00:00,000 --> 00:00:03,300
Thank you for coming and listening to this presentation
00:00:03,300 --> 00:00:05,970
about how to create accessible websites
00:00:05,970 --> 00:00:08,730
and how to maintain their accessibility.
00:00:08,730 --> 00:00:11,610
We're going to be going through what is accessibility,
00:00:11,610 --> 00:00:15,690
why it's important, the various WCAG guidelines,
00:00:15,690 --> 00:00:18,990
how to create easy-to-understand content,
00:00:18,990 --> 00:00:22,720
how to create meaningful alternative text for images,
00:00:22,720 --> 00:00:26,250
how to create accessible content and creating accessible
00:00:26,250 --> 00:00:28,840
documents for your website.
00:00:28,840 --> 00:00:31,320
So the first thing is, what is accessibility
00:00:31,320 --> 00:00:33,360
and why is it important?
00:00:33,360 --> 00:00:37,770
What accessibility means is basically just removing
00:00:37,770 --> 00:00:41,880
all barriers that prevent people from understanding
00:00:41,880 --> 00:00:44,500
and interacting with your website.
00:00:44,500 --> 00:00:46,650
So making your website accessible
00:00:46,650 --> 00:00:49,500
means that people with various impairments,
00:00:49,500 --> 00:00:53,160
whether it be visual, cognitive, motor,
00:00:53,160 --> 00:00:58,260
are all still able to access every part of your website.
00:00:58,260 --> 00:01:02,250
And to do this, there are various guidelines put out
00:01:02,250 --> 00:01:05,310
by Web Content Accessibility Guidelines
00:01:05,310 --> 00:01:10,890
that go into what exactly you need to do in order to maintain
00:01:10,890 --> 00:01:13,170
an accessible website.
00:01:13,170 --> 00:01:17,700
What Columbia University is requiring of all websites
00:01:17,700 --> 00:01:22,480
is that they meet Level AA, and there
00:01:22,480 --> 00:01:26,530
are three different levels for the WCAG guidelines.
00:01:26,530 --> 00:01:30,460
There's Level A, which is a minimum, Level AA, which
00:01:30,460 --> 00:01:34,630
is the standard which gets to the most amount of people,
00:01:34,630 --> 00:01:37,420
and the strictest level, AAA.
00:01:37,420 --> 00:01:41,440
So again, we are requiring that you stick to Level AA,
00:01:41,440 --> 00:01:44,890
and that is what this presentation is geared to.
00:01:44,890 --> 00:01:47,140
In the world of accessibility, you
00:01:47,140 --> 00:01:51,610
may have heard Section 508 being mentioned.
00:01:51,610 --> 00:01:55,930
508 are standards that the United States has put out
00:01:55,930 --> 00:01:58,810
for our government for accessibility.
00:01:58,810 --> 00:02:02,530
And I will not speak exactly to 508 today
00:02:02,530 --> 00:02:07,570
because the WCAG guidelines include all of 508,
00:02:07,570 --> 00:02:10,729
so there's no reason to speak directly to this.
00:02:10,729 --> 00:02:14,530
WCAG is more inclusive and has more guidelines
00:02:14,530 --> 00:02:18,320
than Section 508.
00:02:18,320 --> 00:02:23,910
So WCAG guidelines are broken into four different categories.
00:02:23,910 --> 00:02:26,960
The first one is perceivable.
00:02:26,960 --> 00:02:29,150
And what this means is that people
00:02:29,150 --> 00:02:32,580
can understand everything on your website,
00:02:32,580 --> 00:02:36,510
even if they're not able to see what's on the website.
00:02:36,510 --> 00:02:38,300
So this starts getting into why you
00:02:38,300 --> 00:02:41,430
need alternative text for your images,
00:02:41,430 --> 00:02:47,310
how to provide transcripts for video, and such like that.
00:02:47,310 --> 00:02:51,000
The next category within WCAG is called operable.
00:02:51,000 --> 00:02:54,660
And this makes sure that all of your functionality
00:02:54,660 --> 00:02:59,250
on the website is able to get to with a keyboard.
00:02:59,250 --> 00:03:02,190
So people do not need to always use a mouse
00:03:02,190 --> 00:03:04,470
to get to any type of content.
00:03:04,470 --> 00:03:08,340
They're able to tab through everything using a keyboard.
00:03:08,340 --> 00:03:12,420
The third category is understandable.
00:03:12,420 --> 00:03:15,840
This means that everything on your website
00:03:15,840 --> 00:03:17,790
is able to be understood.
00:03:17,790 --> 00:03:19,860
Your text is written in a way that
00:03:19,860 --> 00:03:23,190
is not so complicated for users to understand
00:03:23,190 --> 00:03:25,540
what you're talking about.
00:03:25,540 --> 00:03:27,600
And the last one is robust.
00:03:27,600 --> 00:03:30,000
And this makes sure that your website
00:03:30,000 --> 00:03:34,920
is able to work with various assistive technologies,
00:03:34,920 --> 00:03:38,200
like screen readers.
00:03:38,200 --> 00:03:41,790
So some of these will fall directly
00:03:41,790 --> 00:03:45,450
into development guidelines.
00:03:45,450 --> 00:03:47,320
For instance, robust.
00:03:47,320 --> 00:03:52,350
So if a client is using, for instance, Columbia sites,
00:03:52,350 --> 00:03:55,770
we have made sure that everything works
00:03:55,770 --> 00:03:57,390
with assistive technologies.
00:03:57,390 --> 00:04:00,360
There is nothing that the client needs to do.
00:04:00,360 --> 00:04:03,900
If you're working with a website that is not put out
00:04:03,900 --> 00:04:07,710
by Columbia sites or that's put out by a third party vendor,
00:04:07,710 --> 00:04:09,660
this is something that you would want
00:04:09,660 --> 00:04:12,240
to make sure that they built your site so
00:04:12,240 --> 00:04:17,680
that it can work with all assistive technologies.
00:04:17,680 --> 00:04:20,130
So what we're going to go through today
00:04:20,130 --> 00:04:23,860
is what you are responsible for.
00:04:23,860 --> 00:04:27,880
And this means the content guidelines, alternative text
00:04:27,880 --> 00:04:32,080
for images, how to create tables on your website
00:04:32,080 --> 00:04:35,590
that are accessible, and multimedia and document
00:04:35,590 --> 00:04:36,880
guidelines.
00:04:36,880 --> 00:04:40,630
If, again, you are using anything
00:04:40,630 --> 00:04:43,930
that is built by a third party, you
00:04:43,930 --> 00:04:48,970
must make sure that these options have been worked out
00:04:48,970 --> 00:04:51,970
on by your third party, meaning that there needs
00:04:51,970 --> 00:04:55,870
to be enough design contrast between colors, the text
00:04:55,870 --> 00:05:00,310
size and the fonts need to be large enough, that the colors
00:05:00,310 --> 00:05:04,620
are, again, able to be understood
00:05:04,620 --> 00:05:08,570
if they're using tables, and that text is not
00:05:08,570 --> 00:05:10,650
done as images.
00:05:10,650 --> 00:05:14,150
And again, you need to make sure that these are also--
00:05:14,150 --> 00:05:18,420
all of these are taken into account by your third party.
00:05:18,420 --> 00:05:22,080
For Columbia sites, these are all
00:05:22,080 --> 00:05:26,010
you need to worry about as a client.
00:05:26,010 --> 00:05:28,790
So the very first thing, creating
00:05:28,790 --> 00:05:31,430
easy-to-understand content.
00:05:31,430 --> 00:05:33,860
So the guidelines here is basically
00:05:33,860 --> 00:05:36,710
you want to keep your text as short and as simple
00:05:36,710 --> 00:05:38,100
as possible.
00:05:38,100 --> 00:05:41,150
And what you're trying to do--
00:05:41,150 --> 00:05:46,280
there's a tool here that is a readability checker.
00:05:46,280 --> 00:05:48,530
And what you're able to do is to paste
00:05:48,530 --> 00:05:53,330
content from your website
or any document into this
00:05:53,330 --> 00:05:56,060
and it will spit out a grade level
00:05:56,060 --> 00:05:57,920
that people need to have in order
00:05:57,920 --> 00:06:00,150
to understand your content.
00:06:00,150 --> 00:06:05,210
So what you're shooting for is a grade level 10 by this tool.
00:06:05,210 --> 00:06:07,610
If you come up with a grade level 11,
00:06:07,610 --> 00:06:09,050
that's generally fine.
00:06:09,050 --> 00:06:11,490
A grade 12 also is generally fine.
00:06:11,490 --> 00:06:13,310
But if you come up with something that's
00:06:13,310 --> 00:06:17,390
like a grade 20 or something like that, near that,
00:06:17,390 --> 00:06:20,780
you really should go back, revise your content,
00:06:20,780 --> 00:06:24,650
and make it as easy to understand as possible.
00:06:24,650 --> 00:06:27,740
You want to avoid acronyms and always
00:06:27,740 --> 00:06:31,490
spell them out on a first reference on every page.
00:06:31,490 --> 00:06:34,400
Use capitalization sparingly, meaning
00:06:34,400 --> 00:06:37,790
no sentences fully capitalized.
00:06:37,790 --> 00:06:41,390
Do not underline text that's not a link because people
00:06:41,390 --> 00:06:46,190
understand that underlined text usually means a link.
00:06:46,190 --> 00:06:50,630
And always use built-in bullets and numbered lists.
00:06:50,630 --> 00:06:54,800
We'll get to this again later on, meaning that you never
00:06:54,800 --> 00:06:59,960
want to use your own makeshift ideas for formatting content,
00:06:59,960 --> 00:07:05,180
like dashes or your own one, two, three.
00:07:05,180 --> 00:07:08,480
You want to use the built-in formatting built
00:07:08,480 --> 00:07:11,660
for numbered lists.
00:07:11,660 --> 00:07:17,080
So now, to understand what alternative text for images is,
00:07:17,080 --> 00:07:20,710
what alternative text for images means is that somebody who is
00:07:20,710 --> 00:07:24,700
using a screen reader who cannot see the image,
00:07:24,700 --> 00:07:30,280
the screen reader will read the alternative text for the user.
00:07:30,280 --> 00:07:33,700
And you want your alternative text
00:07:33,700 --> 00:07:38,850
to be about 150 characters.
00:07:38,850 --> 00:07:41,260
So in Columbia Sites, for instance,
00:07:41,260 --> 00:07:42,960
this would be the field that you would
00:07:42,960 --> 00:07:47,240
be entering in alternative text for an image.
00:07:47,240 --> 00:07:49,940
If you are using a website that does not
00:07:49,940 --> 00:07:52,760
allow you to enter in alternative text,
00:07:52,760 --> 00:07:55,130
you must get in touch with the developer
00:07:55,130 --> 00:07:58,910
to have them insert this for you.
00:07:58,910 --> 00:08:02,780
You must have alternative text for images.
00:08:02,780 --> 00:08:09,040
So for instance, if this is a picture on your website
00:08:09,040 --> 00:08:11,980
and you want to write alternative text
00:08:11,980 --> 00:08:16,270
for this picture, the very first thing to try to understand
00:08:16,270 --> 00:08:20,740
is why was this picture chosen and to choose alternative text
00:08:20,740 --> 00:08:21,550
based on this.
00:08:21,550 --> 00:08:25,370
And I'll show you what this means in a few examples.
00:08:25,370 --> 00:08:29,650
So imagine that this picture is used in a Big Ten college
00:08:29,650 --> 00:08:33,520
website and it's on a
prospective student page.
00:08:33,520 --> 00:08:37,150
And what you're trying to get
your students to understand
00:08:37,150 --> 00:08:41,950
or your users to the website
is that your university
00:08:41,950 --> 00:08:46,810
is a diverse student body, a
youthful energy, big spirit,
00:08:46,810 --> 00:08:49,120
and a big campus feel.
00:08:49,120 --> 00:08:53,980
So if these are the messages
that you're trying to convey,
00:08:53,980 --> 00:08:59,110
then alternative text for this
image would be something like,
00:08:59,110 --> 00:09:06,910
watch the diverse student body
cheer on the Lions basketball
00:09:06,910 --> 00:09:15,130
team as they score their
first basket in the game.
00:09:15,130 --> 00:09:19,030
Something like that,
where you're really trying
00:09:19,030 --> 00:09:23,700
to get across these ideas.
00:09:23,700 --> 00:09:30,570
In another example, if this was the image used on a soccer team
00:09:30,570 --> 00:09:34,110
website, on their team's website,
00:09:34,110 --> 00:09:36,960
alternative text for this then would be something
00:09:36,960 --> 00:09:41,670
like, Isco is hugging another teammate as they just
00:09:41,670 --> 00:09:44,990
scored a goal.
00:09:44,990 --> 00:09:48,950
If, however, this exact same image
00:09:48,950 --> 00:09:54,050
is used in a website that's for their uniforms, that's
00:09:54,050 --> 00:09:59,430
being sold their uniforms, then alternative text for this
00:09:59,430 --> 00:10:03,950
might be, players comfortably hugging each other
00:10:03,950 --> 00:10:08,750
on the field in their poly cotton white uniforms
00:10:08,750 --> 00:10:10,890
on the field.
00:10:10,890 --> 00:10:15,990
So depending on what type of website and why you've used
00:10:15,990 --> 00:10:19,080
this image will change the alternative text
00:10:19,080 --> 00:10:22,340
that you decide to use.
00:10:22,340 --> 00:10:29,620
In another example, if you have
these two images on the website
00:10:29,620 --> 00:10:32,550
and if all you're trying to do on a page
00:10:32,550 --> 00:10:35,370
is just to use them as a logo, that's
00:10:35,370 --> 00:10:37,410
the only purpose to having it, then
00:10:37,410 --> 00:10:40,980
they would both just say on the alternative text, logo.
00:10:40,980 --> 00:10:43,660
There's no reason to have anything different.
00:10:43,660 --> 00:10:46,620
However, if on a page of the website what you're
00:10:46,620 --> 00:10:51,510
trying to do is show the logos through time, for instance,
00:10:51,510 --> 00:10:54,690
then the alternative text for these would differ.
00:10:54,690 --> 00:10:58,620
The alternative text would be for this one, white mermaid
00:10:58,620 --> 00:11:01,410
enclosed in green circle.
00:11:01,410 --> 00:11:06,360
In this one, it would say, white mermaid enclosed
00:11:06,360 --> 00:11:10,770
in a black circle with a larger green circle outside saying
00:11:10,770 --> 00:11:11,760
Starbucks Coffee.
00:11:11,760 --> 00:11:15,900
00:11:15,900 --> 00:11:17,640
The next thing I wanted to talk about
00:11:17,640 --> 00:11:21,610
was creating accessible content.
00:11:21,610 --> 00:11:24,070
And what this starts getting to is
00:11:24,070 --> 00:11:29,290
that you want your link text to be descriptive of what
00:11:29,290 --> 00:11:32,410
the link is and not simply making
00:11:32,410 --> 00:11:38,840
links that say Click Here, Read More, About, and so on.
00:11:38,840 --> 00:11:41,530
And the reason that you can understand
00:11:41,530 --> 00:11:44,350
why you want to do this is that if you have a screen--
00:11:44,350 --> 00:11:46,810
reader people using screen readers--
00:11:46,810 --> 00:11:52,270
they're able to bring up all the links on the page
00:11:52,270 --> 00:11:55,600
into just the machine that will just
00:11:55,600 --> 00:11:58,990
read them what each link is.
00:11:58,990 --> 00:12:02,830
And if all these links say Click Here, Click Here, Click Here,
00:12:02,830 --> 00:12:05,950
it would make absolutely no sense for them
00:12:05,950 --> 00:12:08,450
to know where they wanted to go.
00:12:08,450 --> 00:12:13,630
So if the links are descriptive and predictive for where
00:12:13,630 --> 00:12:18,020
it is going to go, then this starts to make sense
00:12:18,020 --> 00:12:20,710
and users can easily understand where they're going
00:12:20,710 --> 00:12:24,260
to go when they click the link.
00:12:24,260 --> 00:12:26,540
The other thing that you want to make sure
00:12:26,540 --> 00:12:28,910
when you're entering your content
00:12:28,910 --> 00:12:34,430
is that you use the headings, the built-in headings, when
00:12:34,430 --> 00:12:37,760
you are creating sections on a page
00:12:37,760 --> 00:12:40,650
and that you don't skip any levels.
00:12:40,650 --> 00:12:43,490
So what I mean by this is that if you
00:12:43,490 --> 00:12:48,560
are using Columbia sites, for instance, the page title,
00:12:48,560 --> 00:12:53,090
we automatically assign a Heading 1.
00:12:53,090 --> 00:12:56,540
The next heading on the page for a section,
00:12:56,540 --> 00:13:00,260
you must assign it as a Heading 2.
00:13:00,260 --> 00:13:04,760
And then from there, it follows outlining rules,
00:13:04,760 --> 00:13:08,540
meaning that a sub of Heading 2 would be a Heading 3.
00:13:08,540 --> 00:13:11,480
You don't want to skip a level from Heading 2 straight
00:13:11,480 --> 00:13:12,920
to Heading 4.
00:13:12,920 --> 00:13:17,430
And you always want to start with a Heading 2.
00:13:17,430 --> 00:13:23,520
So even if you like graphically the way it renders if you use
00:13:23,520 --> 00:13:27,630
straight a Heading 3 or embed these differently--
00:13:27,630 --> 00:13:30,780
let's say go to Heading 2 straight to Heading 4--
00:13:30,780 --> 00:13:33,180
you are not allowed to do that.
00:13:33,180 --> 00:13:36,930
You must start with Heading 2 and use these just
00:13:36,930 --> 00:13:41,310
like outlining rules, and your next sub must be a Heading 3.
00:13:41,310 --> 00:13:47,560
Your next sub of that must be a Heading 4, and so on.
00:13:47,560 --> 00:13:50,900
So I'll help you understand why this is important.
00:13:50,900 --> 00:13:54,640
So first off, if you don't use headings at all
00:13:54,640 --> 00:14:00,610
and only use your makeshift way of formatting headings--
00:14:00,610 --> 00:14:05,410
so what a sighted user sees is that this is the title.
00:14:05,410 --> 00:14:10,690
They understand that this is a Heading 2, this is a Heading 3,
00:14:10,690 --> 00:14:12,490
and this is a Heading 4.
00:14:12,490 --> 00:14:15,290
That makes sense for sighted users,
00:14:15,290 --> 00:14:17,650
but what a screen reader will read
00:14:17,650 --> 00:14:23,650
is just a whole mash-up of the entire page altogether
00:14:23,650 --> 00:14:26,980
and this will make no sense to the person using a screen
00:14:26,980 --> 00:14:28,970
reader.
00:14:28,970 --> 00:14:32,630
In this example, using the
built-in headings where this is
00:14:32,630 --> 00:14:33,240
set--
00:14:33,240 --> 00:14:37,040
again, this is a Heading 1 that we've set it at
00:14:37,040 --> 00:14:39,380
and this is a Heading 2.
00:14:39,380 --> 00:14:42,620
Again, a Heading 2 and a Heading 3.
00:14:42,620 --> 00:14:48,800
Now screen readers are able to aggregate all of those
00:14:48,800 --> 00:14:52,340
into one listing again, where the user can
00:14:52,340 --> 00:14:55,880
understand the outline of the page
00:14:55,880 --> 00:14:58,055
and decide what section to go to.
00:14:58,055 --> 00:15:01,130
00:15:01,130 --> 00:15:04,640
So now, creating accessible documents.
00:15:04,640 --> 00:15:09,770
This is very important if you want to post any Microsoft Word
00:15:09,770 --> 00:15:14,170
documents or PDFs to your site.
00:15:14,170 --> 00:15:16,480
And what you're going to want to do
00:15:16,480 --> 00:15:21,190
is you're going to want to keep all of the document text
00:15:21,190 --> 00:15:23,680
to at least 12 points.
00:15:23,680 --> 00:15:27,130
You're going to want to set the language to whatever language
00:15:27,130 --> 00:15:29,050
it is set to.
00:15:29,050 --> 00:15:31,150
You're going to want to make sure
00:15:31,150 --> 00:15:34,420
that you don't have some information conveyed
00:15:34,420 --> 00:15:36,340
by color alone.
00:15:36,340 --> 00:15:40,210
So here, for instance, there's a green X, a red X,
00:15:40,210 --> 00:15:43,150
and a red X. This is not OK.
00:15:43,150 --> 00:15:47,770
Somebody who cannot understand or see the colors cannot
00:15:47,770 --> 00:15:48,970
differentiate.
00:15:48,970 --> 00:15:55,320
Whereas in this example, we're using both color and shape
00:15:55,320 --> 00:16:00,530
to differentiate the content and that is OK.
00:16:00,530 --> 00:16:05,420
You want to make sure that your images are set to wrap
00:16:05,420 --> 00:16:11,130
text in line with the text.
00:16:11,130 --> 00:16:13,500
You want to make sure that your rows, if you
00:16:13,500 --> 00:16:15,840
use tables in your documents, are
00:16:15,840 --> 00:16:18,966
set to repeat as a header row.
00:16:18,966 --> 00:16:24,000
And you want to again use the built-in styles and number
00:16:24,000 --> 00:16:26,235
bulleted lists in a document.
00:16:26,235 --> 00:16:29,200
00:16:29,200 --> 00:16:32,200
Again, if you're using any images in your documents,
00:16:32,200 --> 00:16:37,420
you want to make sure that you are designating
00:16:37,420 --> 00:16:40,510
the alternative text for the picture,
00:16:40,510 --> 00:16:43,750
and it follows exactly the same concepts
00:16:43,750 --> 00:16:47,200
that we discussed before for adding an alternative text
00:16:47,200 --> 00:16:50,200
in a website.
00:16:50,200 --> 00:16:53,575
If you happen to use columns on the document,
00:16:53,575 --> 00:16:55,450
you want to make sure that they're officially
00:16:55,450 --> 00:16:58,435
set as columns and that you're not simply doing tabs.
00:16:58,435 --> 00:17:02,090
00:17:02,090 --> 00:17:06,184
And then you want to add a table of contents to your document.
00:17:06,184 --> 00:17:08,900
00:17:08,900 --> 00:17:11,089
Then the last step, once you do all of this,
00:17:11,089 --> 00:17:14,319
there is an Accessibility Checker
00:17:14,319 --> 00:17:18,790
that is part of Microsoft Word that you can run and fix
00:17:18,790 --> 00:17:22,599
whatever it finds for you before you save it.
00:17:22,599 --> 00:17:25,420
Then the last step is that if you
00:17:25,420 --> 00:17:28,540
wanted to create a PDF ultimately,
00:17:28,540 --> 00:17:32,680
you need to export it officially as a PDF.
00:17:32,680 --> 00:17:36,850
Sometimes people will say Print Document and then from there
00:17:36,850 --> 00:17:39,700
Save as PDF, and if you have done
00:17:39,700 --> 00:17:43,210
that, it will erase all of the steps
00:17:43,210 --> 00:17:47,390
you just took in creating the accessible document.
00:17:47,390 --> 00:17:50,530
So you want to make sure that you officially set it at export
00:17:50,530 --> 00:17:54,130
and you have the selection set for distribution
00:17:54,130 --> 00:17:57,040
and accessibility.
00:17:57,040 --> 00:18:00,130
OK, so now, we're going to run an exercise where
00:18:00,130 --> 00:18:01,960
I'm going to walk you through all of this
00:18:01,960 --> 00:18:06,020
so that you can see this in action.
00:18:06,020 --> 00:18:09,310
So I have a document here that--
00:18:09,310 --> 00:18:13,540
imagine my boss or somebody gives this to you
00:18:13,540 --> 00:18:17,240
and they say, please post this to the website.
00:18:17,240 --> 00:18:21,850
So again, the very first
thing that you have to do here
00:18:21,850 --> 00:18:25,870
is to make sure—the step-by-step is to make sure
00:18:25,870 --> 00:18:28,900
that the language is set to English
00:18:28,900 --> 00:18:32,950
and to see, if you have other languages in this document,
00:18:32,950 --> 00:18:35,770
that you need to also set the language.
00:18:35,770 --> 00:18:38,980
So over here, we have a section that's
00:18:38,980 --> 00:18:44,590
in French, and so you must set both of these
00:18:44,590 --> 00:18:46,450
to the various languages.
00:18:46,450 --> 00:18:51,290
So I'm going to highlight the English first,
00:18:51,290 --> 00:18:59,410
then I'm going to go to Tools and Language
00:18:59,410 --> 00:19:03,250
and make sure it's set to English.
00:19:03,250 --> 00:19:07,150
And then I'm going to do the same exact thing for here
00:19:07,150 --> 00:19:09,160
for the French.
00:19:09,160 --> 00:19:14,155
Tools and Language and make sure that it's set to French.
00:19:14,155 --> 00:19:18,320
00:19:18,320 --> 00:19:21,260
The next thing that you're going to need to do
00:19:21,260 --> 00:19:26,870
is make sure that the image up top
00:19:26,870 --> 00:19:30,500
is set to wrap in line with the text.
00:19:30,500 --> 00:19:34,390
You're going to click on it, right-click,
00:19:34,390 --> 00:19:39,540
and then you're going from here, you're going to say Wrap Text
00:19:39,540 --> 00:19:44,860
and you want to make sure it says In Line with Text.
00:19:44,860 --> 00:19:47,500
The next thing that you want to make sure
00:19:47,500 --> 00:19:50,620
is that visually, it looks like styles
00:19:50,620 --> 00:19:52,300
have been set for these sections,
00:19:52,300 --> 00:19:54,250
and you want to verify.
00:19:54,250 --> 00:20:00,490
So if you click on this, you see that over here, it's
00:20:00,490 --> 00:20:01,720
not using styles.
00:20:01,720 --> 00:20:04,210
It's set to Normal.
00:20:04,210 --> 00:20:06,180
So the very first thing that you want to do,
00:20:06,180 --> 00:20:07,950
the first header needs to be a Heading 1,
00:20:07,950 --> 00:20:11,790
so you want to set that officially to Heading 1.
00:20:11,790 --> 00:20:13,740
You want to go through all of these.
00:20:13,740 --> 00:20:15,930
This is also set to Normal, so you
00:20:15,930 --> 00:20:19,260
want to make sure that that's a Heading 2.
00:20:19,260 --> 00:20:21,840
And then you just use your editorial sense
00:20:21,840 --> 00:20:24,270
how you decide which headings these are.
00:20:24,270 --> 00:20:27,600
And so you just go through and create the headings.
00:20:27,600 --> 00:20:33,600
00:20:33,600 --> 00:20:36,120
Fun with French, I'll set as a Heading 2.
00:20:36,120 --> 00:20:40,230
00:20:40,230 --> 00:20:41,160
Let's see this is--
00:20:41,160 --> 00:20:45,150
00:20:45,150 --> 00:20:47,310
yeah, OK.
00:20:47,310 --> 00:20:49,390
So now we did the headings.
00:20:49,390 --> 00:20:52,440
Now we're looking at this and we want
00:20:52,440 --> 00:20:56,520
to make sure that these are using built-in bulleted numbers
00:20:56,520 --> 00:20:57,240
and lists.
00:20:57,240 --> 00:20:58,320
And it's not.
00:20:58,320 --> 00:21:01,200
You can see that none of these are highlighted.
00:21:01,200 --> 00:21:06,660
So you want to get rid of the makeshift dashes,
00:21:06,660 --> 00:21:09,210
highlight it, and then use the built-in.
00:21:09,210 --> 00:21:12,220
00:21:12,220 --> 00:21:14,860
OK, now going down this page, we want
00:21:14,860 --> 00:21:19,120
to make sure that the table over here
00:21:19,120 --> 00:21:23,050
is repeating the rows up on top.
00:21:23,050 --> 00:21:29,250
So we're going to right-click on it, go to Table Properties.
00:21:29,250 --> 00:21:30,615
We want to click on Row.
00:21:30,615 --> 00:21:34,170
00:21:34,170 --> 00:21:41,300
And we see over here that it is selected and that's OK.
00:21:41,300 --> 00:21:44,290
That's great.
00:21:44,290 --> 00:21:48,300
Now we want to also
write alternative text
00:21:48,300 --> 00:21:49,360
for this image.
00:21:49,360 --> 00:21:51,910
So we're going to
right-click on it,
00:21:51,910 --> 00:21:56,430
then we're going to say Format Picture.
00:21:56,430 --> 00:22:00,280
And here, we're going to
enter in the alternative text.
00:22:00,280 --> 00:22:04,650
And so for this example, I would say something like,
00:22:04,650 --> 00:22:19,290
cartoon characters in a lineup holding lorem ipsum signs.
00:22:19,290 --> 00:22:23,815
OK, that's done.
00:22:23,815 --> 00:22:27,020
00:22:27,020 --> 00:22:31,430
And now, the last thing that we want
00:22:31,430 --> 00:22:33,290
to do when we think that we're done
00:22:33,290 --> 00:22:36,080
is we want to run the Accessibility Checker
00:22:36,080 --> 00:22:40,760
and see if everything is accounted for.
00:22:40,760 --> 00:22:46,960
So we're going to go to Tools, Check Accessibility, and see
00:22:46,960 --> 00:22:48,280
what it comes up with.
00:22:48,280 --> 00:22:51,790
And it has now said that all issues are OK
00:22:51,790 --> 00:22:53,920
and that we're good to go.
00:22:53,920 --> 00:22:57,310
And the one last thing that we're
00:22:57,310 --> 00:23:01,600
going to do before we actually save this is we're
00:23:01,600 --> 00:23:05,870
going to add in a table of contents.
00:23:05,870 --> 00:23:09,370
And to do that, we're going to go to References.
00:23:09,370 --> 00:23:12,220
We're going to say Table of Contents
00:23:12,220 --> 00:23:16,250
then we're going to add in a table of contents.
00:23:16,250 --> 00:23:18,980
And over here, for whatever reason,
00:23:18,980 --> 00:23:24,830
if this happens to you where it puts the image in,
00:23:24,830 --> 00:23:28,050
copy the image, erase it.
00:23:28,050 --> 00:23:29,400
Let's do this again.
00:23:29,400 --> 00:23:31,140
For some reason, this seems to be
00:23:31,140 --> 00:23:38,970
a bit of a bug with Microsoft Word, so let's do that again.
00:23:38,970 --> 00:23:41,760
So Table of Contents there and now
00:23:41,760 --> 00:23:44,220
we're going to paste the image back in.
00:23:44,220 --> 00:23:44,940
OK.
00:23:44,940 --> 00:23:48,750
So now we're ready-- if what we need to do on the website
00:23:48,750 --> 00:23:52,590
is simply put a Microsoft document on the website,
00:23:52,590 --> 00:23:56,790
all we need to do is save this and then put it on the website.
00:23:56,790 --> 00:23:59,040
But if what we need to ultimately do
00:23:59,040 --> 00:24:02,550
is put a PDF of this on the website, what
00:24:02,550 --> 00:24:07,990
you're going to want to do is save this as a PDF.
00:24:07,990 --> 00:24:12,670
And remember, you want to save it officially
00:24:12,670 --> 00:24:14,260
as a PDF over here.
00:24:14,260 --> 00:24:18,550
You want to make sure that the selection is
00:24:18,550 --> 00:24:21,010
set for accessibility.
00:24:21,010 --> 00:24:23,350
And we'll name it Exercise Remediation.
00:24:23,350 --> 00:24:31,550
00:24:31,550 --> 00:24:34,800
And we'll export that.
00:24:34,800 --> 00:24:39,270
OK, so now, let's hop back into the presentation
00:24:39,270 --> 00:24:41,100
and we'll discuss next steps.
00:24:41,100 --> 00:24:45,060
OK, so what's going to happen is that now imagine
00:24:45,060 --> 00:24:47,490
you've been given a PDF from somebody and they say,
00:24:47,490 --> 00:24:50,380
post this to the website.
00:24:50,380 --> 00:24:55,990
So what you need to do when you open up your--
00:24:55,990 --> 00:24:59,050
you need Adobe Acrobat for this, by the way.
00:24:59,050 --> 00:25:00,900
If you do not have Adobe Acrobat,
00:25:00,900 --> 00:25:03,610
you need to request a copy of it.
00:25:03,610 --> 00:25:05,160
So the very first thing you're going
00:25:05,160 --> 00:25:08,520
to do when you get a PDF from somebody to post,
00:25:08,520 --> 00:25:10,080
if you haven't created it yourself,
00:25:10,080 --> 00:25:14,100
to know that it's been created thus far accessibly,
00:25:14,100 --> 00:25:17,440
is that you want to see if it has a tag root structure.
00:25:17,440 --> 00:25:21,000
And again, we'll go through all of this with this means.
00:25:21,000 --> 00:25:23,670
If it doesn't have a tag root structure,
00:25:23,670 --> 00:25:27,420
you want to export it out and start again in Microsoft Word.
00:25:27,420 --> 00:25:30,790
And we'll go through, again, all of this.
00:25:30,790 --> 00:25:34,480
So the steps to making it accessible within Microsoft
00:25:34,480 --> 00:25:38,200
Word is that you want to set the title of the document.
00:25:38,200 --> 00:25:43,450
The title of the document does not mean the document name.
00:25:43,450 --> 00:25:47,900
It's a title that you want to make sense for the user.
00:25:47,900 --> 00:25:50,630
You want to, again, you need to declare the language.
00:25:50,630 --> 00:25:52,730
Unfortunately, declaring the language
00:25:52,730 --> 00:25:56,390
doesn't survive the export from Microsoft Word,
00:25:56,390 --> 00:25:59,610
so you need to do that again.
00:25:59,610 --> 00:26:05,960
You want to set the tabbing order for users to tab through.
00:26:05,960 --> 00:26:10,700
You want to make sure that the headers have been set correctly
00:26:10,700 --> 00:26:12,560
and get rid of the excess noise.
00:26:12,560 --> 00:26:15,970
00:26:15,970 --> 00:26:18,460
And you want to make sure that the bookmarks have
00:26:18,460 --> 00:26:22,630
been added into the PDF.
00:26:22,630 --> 00:26:25,600
Then you want to make sure that the document is tagged
00:26:25,600 --> 00:26:29,890
as accessible so that screen readers realize,
00:26:29,890 --> 00:26:31,810
and then the last step again, similarly,
00:26:31,810 --> 00:26:34,090
is running an Accessibility Checker
00:26:34,090 --> 00:26:36,560
to see if you got everything.
00:26:36,560 --> 00:26:42,160
So let's open up our document within Adobe Acrobat
00:26:42,160 --> 00:26:48,370
that we just created within Microsoft Office.
00:26:48,370 --> 00:26:52,860
So here is the document.
00:26:52,860 --> 00:26:57,970
If I click on, over here, the Tag pane,
00:26:57,970 --> 00:27:01,030
this is called my root structure.
00:27:01,030 --> 00:27:05,380
And over here, I have a lot of things that you're seeing,
00:27:05,380 --> 00:27:10,600
and this means that I have successfully created a PDF
00:27:10,600 --> 00:27:13,870
and that I can begin to remediate it further
00:27:13,870 --> 00:27:16,840
within Adobe Acrobat.
00:27:16,840 --> 00:27:21,460
If you remember over here, I told you never to print
00:27:21,460 --> 00:27:25,015
and just say Print PDF, and I'll show you what happens.
00:27:25,015 --> 00:27:35,650
00:27:35,650 --> 00:27:42,970
So over here, if I were to open up this document,
00:27:42,970 --> 00:27:49,060
and now if I say, show me the Tag pane
00:27:49,060 --> 00:27:51,160
to see if it has tags--
00:27:51,160 --> 00:27:55,980
Navigation Panes and here, Tags, you'll
00:27:55,980 --> 00:27:59,380
see that it says that there are no tags available.
00:27:59,380 --> 00:28:02,460
This means that I have a bad PDF.
00:28:02,460 --> 00:28:04,380
And to be honest, it is very hard
00:28:04,380 --> 00:28:07,980
to remediate within Adobe Acrobat.
00:28:07,980 --> 00:28:10,740
And if this is the case, what you want to do
00:28:10,740 --> 00:28:15,750
is go and export it back out into Microsoft Word.
00:28:15,750 --> 00:28:22,290
So here, you would go back to export to Microsoft Word
00:28:22,290 --> 00:28:26,753
and select which one and then start the steps again.
00:28:26,753 --> 00:28:28,170
So that's what's going to happen--
00:28:28,170 --> 00:28:31,050
what you're going to see if you don't have a good PDF.
00:28:31,050 --> 00:28:33,900
But over here, we know we had a good PDF,
00:28:33,900 --> 00:28:38,460
so using the steps that I said, we'll just go through again one
00:28:38,460 --> 00:28:42,480
by one to make sure that we get this accessible within Adobe
00:28:42,480 --> 00:28:43,890
Acrobat.
00:28:43,890 --> 00:28:45,810
So we need to set the title.
00:28:45,810 --> 00:28:51,870
So you're going to go to File, Properties,
00:28:51,870 --> 00:28:54,090
and over here, add a title.
00:28:54,090 --> 00:28:56,010
Again, it's not the file name.
00:28:56,010 --> 00:28:57,240
It's a title of the document.
00:28:57,240 --> 00:29:00,330
00:29:00,330 --> 00:29:02,855
So here I'm just going to say Lorem Ipsum Usage.
00:29:02,855 --> 00:29:05,910
00:29:05,910 --> 00:29:07,470
Great.
00:29:07,470 --> 00:29:11,190
Then the next thing I want to do is set the language,
00:29:11,190 --> 00:29:13,590
declare the language.
00:29:13,590 --> 00:29:20,100
So again, I'm going to highlight the text
00:29:20,100 --> 00:29:21,660
that this is relevant for because I
00:29:21,660 --> 00:29:29,330
have two different texts here, two different languages.
00:29:29,330 --> 00:29:35,800
00:29:35,800 --> 00:29:36,880
Great.
00:29:36,880 --> 00:29:39,280
And here, I'm going to set the language
00:29:39,280 --> 00:29:41,950
by saying File and Properties--
00:29:41,950 --> 00:29:45,960
File, Properties.
00:29:45,960 --> 00:29:50,663
And here, then, I'm going to say from here Advanced
00:29:50,663 --> 00:29:52,080
and I'm going to set the language.
00:29:52,080 --> 00:29:56,850
So it's set by default to English, which is great,
00:29:56,850 --> 00:30:00,880
but now I have to do that for this section.
00:30:00,880 --> 00:30:09,080
So I'm going to say File, Properties, Advanced,
00:30:09,080 --> 00:30:10,040
and set this to French.
00:30:10,040 --> 00:30:14,500
00:30:14,500 --> 00:30:15,970
Great.
00:30:15,970 --> 00:30:18,700
Now the next step that I have to do
00:30:18,700 --> 00:30:23,460
is make sure that the tabbing order is done.
00:30:23,460 --> 00:30:28,830
So to do this, I'm going to go to the Thumbnail tab, which
00:30:28,830 --> 00:30:30,060
is this.
00:30:30,060 --> 00:30:33,000
I'm going to right-click on the first thumbnail
00:30:33,000 --> 00:30:34,920
and choose Page Properties.
00:30:34,920 --> 00:30:41,300
00:30:41,300 --> 00:30:44,450
And I'm going to say use the document structure because I
00:30:44,450 --> 00:30:48,230
already know that this is a correct document-- this
00:30:48,230 --> 00:30:50,220
is a formatted document.
00:30:50,220 --> 00:30:54,370
So I'm going to say great, OK, keep that.
00:30:54,370 --> 00:30:58,120
Then the next thing I need to do is make sure
00:30:58,120 --> 00:31:02,140
that my headings are done correctly.
00:31:02,140 --> 00:31:11,100
And so I'm going to go into the tag structure over here
00:31:11,100 --> 00:31:14,970
and start clicking on these tags.
00:31:14,970 --> 00:31:16,620
And make sure that they look correct.
00:31:16,620 --> 00:31:19,620
That it's highlighting what I expect it to highlight.
00:31:19,620 --> 00:31:24,930
So Table of Contents, Heading 1, Heading 2.
00:31:24,930 --> 00:31:26,260
This is wrong.
00:31:26,260 --> 00:31:28,600
A Heading 2 is not this image.
00:31:28,600 --> 00:31:31,180
So I need to delete that.
00:31:31,180 --> 00:31:35,040
Now figure is correctly highlighting.
00:31:35,040 --> 00:31:39,420
Heading 3, paragraph, Heading 2.
00:31:39,420 --> 00:31:40,830
This is wrong.
00:31:40,830 --> 00:31:42,180
This is junk.
00:31:42,180 --> 00:31:44,880
When you export from Microsoft Word,
00:31:44,880 --> 00:31:48,000
it really exports a bunch of noise,
00:31:48,000 --> 00:31:51,600
so you need to delete the headings in this tag
00:31:51,600 --> 00:31:54,090
root that don't make sense.
00:31:54,090 --> 00:31:57,000
P for paragraph, that makes sense.
00:31:57,000 --> 00:31:57,885
List items.
00:31:57,885 --> 00:32:04,690
00:32:04,690 --> 00:32:05,650
That's right.
00:32:05,650 --> 00:32:07,720
This is again an errant tag.
00:32:07,720 --> 00:32:08,710
I'll delete that.
00:32:08,710 --> 00:32:13,690
Heading 2, paragraph, paragraph, Heading 2,
00:32:13,690 --> 00:32:16,450
paragraph, table, paragraph.
00:32:16,450 --> 00:32:18,880
That's not right, it's highlighting some noise.
00:32:18,880 --> 00:32:20,660
I'll delete that.
00:32:20,660 --> 00:32:22,790
That's highlighting some noise also.
00:32:22,790 --> 00:32:24,470
Heading 2, that's right.
00:32:24,470 --> 00:32:29,120
Heading 3, paragraph, paragraph, paragraph, paragraph,
00:32:29,120 --> 00:32:30,140
and that is wrong.
00:32:30,140 --> 00:32:31,490
That's some noise.
00:32:31,490 --> 00:32:34,910
If for some reason you see that you did the heading structure
00:32:34,910 --> 00:32:38,240
incorrectly, you can always just change
00:32:38,240 --> 00:32:40,100
by double-clicking what heading you
00:32:40,100 --> 00:32:43,290
think that should really be.
00:32:43,290 --> 00:32:44,490
OK.
00:32:44,490 --> 00:32:49,410
So now, the last thing that we have to do
00:32:49,410 --> 00:32:52,380
is mark this document as tagged.
00:32:52,380 --> 00:32:56,360
So we're going to go to the Tag pane,
00:32:56,360 --> 00:33:00,830
click over here, and make sure that this is selected.
00:33:00,830 --> 00:33:03,630
And if this is selected, that's good to go.
00:33:03,630 --> 00:33:09,430
And now we can run our accessibility check.
00:33:09,430 --> 00:33:11,710
And to run the accessibility check,
00:33:11,710 --> 00:33:15,220
we're going to go to Tools, Accessibility.
00:33:15,220 --> 00:33:17,005
We're going to say Accessibility Check.
00:33:17,005 --> 00:33:19,630
00:33:19,630 --> 00:33:23,840
And then from here, say Start Checking
00:33:23,840 --> 00:33:26,330
and see what it comes up with.
00:33:26,330 --> 00:33:31,090
So it found an issue over here that it's
00:33:31,090 --> 00:33:34,940
saying that I did something with the nesting that's not correct.
00:33:34,940 --> 00:33:39,170
So let's see what it's saying.
00:33:39,170 --> 00:33:41,890
So it's saying that this tag over here
00:33:41,890 --> 00:33:44,880
has not been done correctly.
00:33:44,880 --> 00:33:48,010
So let's see what we have this tag set as.
00:33:48,010 --> 00:33:51,100
So over here, if you see that what's going on
00:33:51,100 --> 00:33:53,560
is that I have a Heading 1 here and then
00:33:53,560 --> 00:33:56,590
I moved it straight to a Heading 3.
00:33:56,590 --> 00:34:00,460
So we need that to be fixed, because again,
00:34:00,460 --> 00:34:02,950
you cannot skip levels.
00:34:02,950 --> 00:34:07,250
So this really should be a Heading 2.
00:34:07,250 --> 00:34:11,420
And now let's check accessibility again
00:34:11,420 --> 00:34:15,110
and see if that cleared it up.
00:34:15,110 --> 00:34:17,710
Excellent, that's done.
00:34:17,710 --> 00:34:20,679
So over here, if you see, there are two issues
00:34:20,679 --> 00:34:22,570
that it asked me just to verify, and that
00:34:22,570 --> 00:34:25,510
means that I have logical reading order, which
00:34:25,510 --> 00:34:29,050
I do because I checked my headings so I know that I have
00:34:29,050 --> 00:34:30,760
a logical reading order.
00:34:30,760 --> 00:34:35,750
And that the color contrast has been selected properly.
00:34:35,750 --> 00:34:38,290
And that's getting at how I chose
00:34:38,290 --> 00:34:40,870
these colors within Microsoft Word
00:34:40,870 --> 00:34:43,210
to be within enough contrast.
00:34:43,210 --> 00:34:45,850
And there will be instructions that
00:34:45,850 --> 00:34:49,659
are written up that you can link to from this video
00:34:49,659 --> 00:34:52,840
to figure out how to set that within Microsoft Word
00:34:52,840 --> 00:34:55,370
to make sure that that's done properly.
00:34:55,370 --> 00:34:57,370
So over here is just saying, just make sure.
00:34:57,370 --> 00:34:58,910
It's just a reminder.
00:34:58,910 --> 00:35:02,140
And assuming that that's OK, this document
00:35:02,140 --> 00:35:04,270
is now accessible.
00:35:04,270 --> 00:35:07,240
So all I need to do now is save it.
00:35:07,240 --> 00:35:09,520
Just regular Save.
00:35:09,520 --> 00:35:13,690
And now, this document is ready to be posted on your website.
00:35:13,690 --> 00:35:15,890
This is accessible.
00:35:15,890 --> 00:35:24,830
The last thing to know is that when you are uploading videos
00:35:24,830 --> 00:35:30,420
onto your website, you want to hopefully put a transcript.
00:35:30,420 --> 00:35:32,550
This is not mandatory.
00:35:32,550 --> 00:35:37,670
It's not Level AA, it's Level AAA, which is stricter
00:35:37,670 --> 00:35:41,570
than we're requiring you to, but if you're able,
00:35:41,570 --> 00:35:44,810
it's very good to put in a transcript.
00:35:44,810 --> 00:35:47,300
You also need to have captioning.
00:35:47,300 --> 00:35:50,370
This is Level AA to have captioning.
00:35:50,370 --> 00:35:53,810
And if you upload to YouTube, for instance,
00:35:53,810 --> 00:35:56,960
they will auto-caption this for you, which
00:35:56,960 --> 00:36:00,410
you should take advantage of.
00:36:00,410 --> 00:36:04,360
And so what you have to remember to do with creating accessible
00:36:04,360 --> 00:36:08,050
websites is making your content easy to understand,
00:36:08,050 --> 00:36:12,460
creating descriptive alternative text for your images,
00:36:12,460 --> 00:36:15,680
making your documents accessible,
00:36:15,680 --> 00:36:19,700
and creating captions and transcripts for your video.
00:36:19,700 --> 00:36:21,010
Thank you very much.
00:36:21,010 --> 00:36:24,410
This presentation will be posted as well
00:36:24,410 --> 00:36:27,250
and you can read the appendix if you'd like to.
00:36:27,250 --> 00:36:29,790
Thank you. Bye.
Thank you for coming and listening to this presentation
00:00:03,300 --> 00:00:05,970
about how to create accessible websites
00:00:05,970 --> 00:00:08,730
and how to maintain their accessibility.
00:00:08,730 --> 00:00:11,610
We're going to be going through what is accessibility,
00:00:11,610 --> 00:00:15,690
why it's important, the various WCAG guidelines,
00:00:15,690 --> 00:00:18,990
how to create easy-to-understand content,
00:00:18,990 --> 00:00:22,720
how to create meaningful alternative text for images,
00:00:22,720 --> 00:00:26,250
how to create accessible content and creating accessible
00:00:26,250 --> 00:00:28,840
documents for your website.
00:00:28,840 --> 00:00:31,320
So the first thing is, what is accessibility
00:00:31,320 --> 00:00:33,360
and why is it important?
00:00:33,360 --> 00:00:37,770
What accessibility means is basically just removing
00:00:37,770 --> 00:00:41,880
all barriers that prevent people from understanding
00:00:41,880 --> 00:00:44,500
and interacting with your website.
00:00:44,500 --> 00:00:46,650
So making your website accessible
00:00:46,650 --> 00:00:49,500
means that people with various impairments,
00:00:49,500 --> 00:00:53,160
whether it be visual, cognitive, motor,
00:00:53,160 --> 00:00:58,260
are all still able to access every part of your website.
00:00:58,260 --> 00:01:02,250
And to do this, there are various guidelines put out
00:01:02,250 --> 00:01:05,310
by Web Content Accessibility Guidelines
00:01:05,310 --> 00:01:10,890
that go into what exactly you need to do in order to maintain
00:01:10,890 --> 00:01:13,170
an accessible website.
00:01:13,170 --> 00:01:17,700
What Columbia University is requiring of all websites
00:01:17,700 --> 00:01:22,480
is that they meet Level AA, and there
00:01:22,480 --> 00:01:26,530
are three different levels for the WCAG guidelines.
00:01:26,530 --> 00:01:30,460
There's Level A, which is a minimum, Level AA, which
00:01:30,460 --> 00:01:34,630
is the standard which gets to the most amount of people,
00:01:34,630 --> 00:01:37,420
and the strictest level, AAA.
00:01:37,420 --> 00:01:41,440
So again, we are requiring that you stick to Level AA,
00:01:41,440 --> 00:01:44,890
and that is what this presentation is geared to.
00:01:44,890 --> 00:01:47,140
In the world of accessibility, you
00:01:47,140 --> 00:01:51,610
may have heard Section 508 being mentioned.
00:01:51,610 --> 00:01:55,930
508 are standards that the United States has put out
00:01:55,930 --> 00:01:58,810
for our government for accessibility.
00:01:58,810 --> 00:02:02,530
And I will not speak exactly to 508 today
00:02:02,530 --> 00:02:07,570
because the WCAG guidelines include all of 508,
00:02:07,570 --> 00:02:10,729
so there's no reason to speak directly to this.
00:02:10,729 --> 00:02:14,530
WCAG is more inclusive and has more guidelines
00:02:14,530 --> 00:02:18,320
than Section 508.
00:02:18,320 --> 00:02:23,910
So WCAG guidelines are broken into four different categories.
00:02:23,910 --> 00:02:26,960
The first one is perceivable.
00:02:26,960 --> 00:02:29,150
And what this means is that people
00:02:29,150 --> 00:02:32,580
can understand everything on your website,
00:02:32,580 --> 00:02:36,510
even if they're not able to see what's on the website.
00:02:36,510 --> 00:02:38,300
So this starts getting into why you
00:02:38,300 --> 00:02:41,430
need alternative text for your images,
00:02:41,430 --> 00:02:47,310
how to provide transcripts for video, and such like that.
00:02:47,310 --> 00:02:51,000
The next category within WCAG is called operable.
00:02:51,000 --> 00:02:54,660
And this makes sure that all of your functionality
00:02:54,660 --> 00:02:59,250
on the website is able to get to with a keyboard.
00:02:59,250 --> 00:03:02,190
So people do not need to always use a mouse
00:03:02,190 --> 00:03:04,470
to get to any type of content.
00:03:04,470 --> 00:03:08,340
They're able to tab through everything using a keyboard.
00:03:08,340 --> 00:03:12,420
The third category is understandable.
00:03:12,420 --> 00:03:15,840
This means that everything on your website
00:03:15,840 --> 00:03:17,790
is able to be understood.
00:03:17,790 --> 00:03:19,860
Your text is written in a way that
00:03:19,860 --> 00:03:23,190
is not so complicated for users to understand
00:03:23,190 --> 00:03:25,540
what you're talking about.
00:03:25,540 --> 00:03:27,600
And the last one is robust.
00:03:27,600 --> 00:03:30,000
And this makes sure that your website
00:03:30,000 --> 00:03:34,920
is able to work with various assistive technologies,
00:03:34,920 --> 00:03:38,200
like screen readers.
00:03:38,200 --> 00:03:41,790
So some of these will fall directly
00:03:41,790 --> 00:03:45,450
into development guidelines.
00:03:45,450 --> 00:03:47,320
For instance, robust.
00:03:47,320 --> 00:03:52,350
So if a client is using, for instance, Columbia sites,
00:03:52,350 --> 00:03:55,770
we have made sure that everything works
00:03:55,770 --> 00:03:57,390
with assistive technologies.
00:03:57,390 --> 00:04:00,360
There is nothing that the client needs to do.
00:04:00,360 --> 00:04:03,900
If you're working with a website that is not put out
00:04:03,900 --> 00:04:07,710
by Columbia sites or that's put out by a third party vendor,
00:04:07,710 --> 00:04:09,660
this is something that you would want
00:04:09,660 --> 00:04:12,240
to make sure that they built your site so
00:04:12,240 --> 00:04:17,680
that it can work with all assistive technologies.
00:04:17,680 --> 00:04:20,130
So what we're going to go through today
00:04:20,130 --> 00:04:23,860
is what you are responsible for.
00:04:23,860 --> 00:04:27,880
And this means the content guidelines, alternative text
00:04:27,880 --> 00:04:32,080
for images, how to create tables on your website
00:04:32,080 --> 00:04:35,590
that are accessible, and multimedia and document
00:04:35,590 --> 00:04:36,880
guidelines.
00:04:36,880 --> 00:04:40,630
If, again, you are using anything
00:04:40,630 --> 00:04:43,930
that is built by a third party, you
00:04:43,930 --> 00:04:48,970
must make sure that these options have been worked out
00:04:48,970 --> 00:04:51,970
on by your third party, meaning that there needs
00:04:51,970 --> 00:04:55,870
to be enough design contrast between colors, the text
00:04:55,870 --> 00:05:00,310
size and the fonts need to be large enough, that the colors
00:05:00,310 --> 00:05:04,620
are, again, able to be understood
00:05:04,620 --> 00:05:08,570
if they're using tables, and that text is not
00:05:08,570 --> 00:05:10,650
done as images.
00:05:10,650 --> 00:05:14,150
And again, you need to make sure that these are also--
00:05:14,150 --> 00:05:18,420
all of these are taken into account by your third party.
00:05:18,420 --> 00:05:22,080
For Columbia sites, these are all
00:05:22,080 --> 00:05:26,010
you need to worry about as a client.
00:05:26,010 --> 00:05:28,790
So the very first thing, creating
00:05:28,790 --> 00:05:31,430
easy-to-understand content.
00:05:31,430 --> 00:05:33,860
So the guidelines here is basically
00:05:33,860 --> 00:05:36,710
you want to keep your text as short and as simple
00:05:36,710 --> 00:05:38,100
as possible.
00:05:38,100 --> 00:05:41,150
And what you're trying to do--
00:05:41,150 --> 00:05:46,280
there's a tool here that is a readability checker.
00:05:46,280 --> 00:05:48,530
And what you're able to do is to paste
00:05:48,530 --> 00:05:53,330
content from your website
or any document into this
00:05:53,330 --> 00:05:56,060
and it will spit out a grade level
00:05:56,060 --> 00:05:57,920
that people need to have in order
00:05:57,920 --> 00:06:00,150
to understand your content.
00:06:00,150 --> 00:06:05,210
So what you're shooting for is a grade level 10 by this tool.
00:06:05,210 --> 00:06:07,610
If you come up with a grade level 11,
00:06:07,610 --> 00:06:09,050
that's generally fine.
00:06:09,050 --> 00:06:11,490
A grade 12 also is generally fine.
00:06:11,490 --> 00:06:13,310
But if you come up with something that's
00:06:13,310 --> 00:06:17,390
like a grade 20 or something like that, near that,
00:06:17,390 --> 00:06:20,780
you really should go back, revise your content,
00:06:20,780 --> 00:06:24,650
and make it as easy to understand as possible.
00:06:24,650 --> 00:06:27,740
You want to avoid acronyms and always
00:06:27,740 --> 00:06:31,490
spell them out on a first reference on every page.
00:06:31,490 --> 00:06:34,400
Use capitalization sparingly, meaning
00:06:34,400 --> 00:06:37,790
no sentences fully capitalized.
00:06:37,790 --> 00:06:41,390
Do not underline text that's not a link because people
00:06:41,390 --> 00:06:46,190
understand that underlined text usually means a link.
00:06:46,190 --> 00:06:50,630
And always use built-in bullets and numbered lists.
00:06:50,630 --> 00:06:54,800
We'll get to this again later on, meaning that you never
00:06:54,800 --> 00:06:59,960
want to use your own makeshift ideas for formatting content,
00:06:59,960 --> 00:07:05,180
like dashes or your own one, two, three.
00:07:05,180 --> 00:07:08,480
You want to use the built-in formatting built
00:07:08,480 --> 00:07:11,660
for numbered lists.
00:07:11,660 --> 00:07:17,080
So now, to understand what alternative text for images is,
00:07:17,080 --> 00:07:20,710
what alternative text for images means is that somebody who is
00:07:20,710 --> 00:07:24,700
using a screen reader who cannot see the image,
00:07:24,700 --> 00:07:30,280
the screen reader will read the alternative text for the user.
00:07:30,280 --> 00:07:33,700
And you want your alternative text
00:07:33,700 --> 00:07:38,850
to be about 150 characters.
00:07:38,850 --> 00:07:41,260
So in Columbia Sites, for instance,
00:07:41,260 --> 00:07:42,960
this would be the field that you would
00:07:42,960 --> 00:07:47,240
be entering in alternative text for an image.
00:07:47,240 --> 00:07:49,940
If you are using a website that does not
00:07:49,940 --> 00:07:52,760
allow you to enter in alternative text,
00:07:52,760 --> 00:07:55,130
you must get in touch with the developer
00:07:55,130 --> 00:07:58,910
to have them insert this for you.
00:07:58,910 --> 00:08:02,780
You must have alternative text for images.
00:08:02,780 --> 00:08:09,040
So for instance, if this is a picture on your website
00:08:09,040 --> 00:08:11,980
and you want to write alternative text
00:08:11,980 --> 00:08:16,270
for this picture, the very first thing to try to understand
00:08:16,270 --> 00:08:20,740
is why was this picture chosen and to choose alternative text
00:08:20,740 --> 00:08:21,550
based on this.
00:08:21,550 --> 00:08:25,370
And I'll show you what this means in a few examples.
00:08:25,370 --> 00:08:29,650
So imagine that this picture is used in a Big Ten college
00:08:29,650 --> 00:08:33,520
website and it's on a
prospective student page.
00:08:33,520 --> 00:08:37,150
And what you're trying to get
your students to understand
00:08:37,150 --> 00:08:41,950
or your users to the website
is that your university
00:08:41,950 --> 00:08:46,810
is a diverse student body, a
youthful energy, big spirit,
00:08:46,810 --> 00:08:49,120
and a big campus feel.
00:08:49,120 --> 00:08:53,980
So if these are the messages
that you're trying to convey,
00:08:53,980 --> 00:08:59,110
then alternative text for this
image would be something like,
00:08:59,110 --> 00:09:06,910
watch the diverse student body
cheer on the Lions basketball
00:09:06,910 --> 00:09:15,130
team as they score their
first basket in the game.
00:09:15,130 --> 00:09:19,030
Something like that,
where you're really trying
00:09:19,030 --> 00:09:23,700
to get across these ideas.
00:09:23,700 --> 00:09:30,570
In another example, if this was the image used on a soccer team
00:09:30,570 --> 00:09:34,110
website, on their team's website,
00:09:34,110 --> 00:09:36,960
alternative text for this then would be something
00:09:36,960 --> 00:09:41,670
like, Isco is hugging another teammate as they just
00:09:41,670 --> 00:09:44,990
scored a goal.
00:09:44,990 --> 00:09:48,950
If, however, this exact same image
00:09:48,950 --> 00:09:54,050
is used in a website that's for their uniforms, that's
00:09:54,050 --> 00:09:59,430
being sold their uniforms, then alternative text for this
00:09:59,430 --> 00:10:03,950
might be, players comfortably hugging each other
00:10:03,950 --> 00:10:08,750
on the field in their poly cotton white uniforms
00:10:08,750 --> 00:10:10,890
on the field.
00:10:10,890 --> 00:10:15,990
So depending on what type of website and why you've used
00:10:15,990 --> 00:10:19,080
this image will change the alternative text
00:10:19,080 --> 00:10:22,340
that you decide to use.
00:10:22,340 --> 00:10:29,620
In another example, if you have
these two images on the website
00:10:29,620 --> 00:10:32,550
and if all you're trying to do on a page
00:10:32,550 --> 00:10:35,370
is just to use them as a logo, that's
00:10:35,370 --> 00:10:37,410
the only purpose to having it, then
00:10:37,410 --> 00:10:40,980
they would both just say on the alternative text, logo.
00:10:40,980 --> 00:10:43,660
There's no reason to have anything different.
00:10:43,660 --> 00:10:46,620
However, if on a page of the website what you're
00:10:46,620 --> 00:10:51,510
trying to do is show the logos through time, for instance,
00:10:51,510 --> 00:10:54,690
then the alternative text for these would differ.
00:10:54,690 --> 00:10:58,620
The alternative text would be for this one, white mermaid
00:10:58,620 --> 00:11:01,410
enclosed in green circle.
00:11:01,410 --> 00:11:06,360
In this one, it would say, white mermaid enclosed
00:11:06,360 --> 00:11:10,770
in a black circle with a larger green circle outside saying
00:11:10,770 --> 00:11:11,760
Starbucks Coffee.
00:11:11,760 --> 00:11:15,900
00:11:15,900 --> 00:11:17,640
The next thing I wanted to talk about
00:11:17,640 --> 00:11:21,610
was creating accessible content.
00:11:21,610 --> 00:11:24,070
And what this starts getting to is
00:11:24,070 --> 00:11:29,290
that you want your link text to be descriptive of what
00:11:29,290 --> 00:11:32,410
the link is and not simply making
00:11:32,410 --> 00:11:38,840
links that say Click Here, Read More, About, and so on.
00:11:38,840 --> 00:11:41,530
And the reason that you can understand
00:11:41,530 --> 00:11:44,350
why you want to do this is that if you have a screen--
00:11:44,350 --> 00:11:46,810
reader people using screen readers--
00:11:46,810 --> 00:11:52,270
they're able to bring up all the links on the page
00:11:52,270 --> 00:11:55,600
into just the machine that will just
00:11:55,600 --> 00:11:58,990
read them what each link is.
00:11:58,990 --> 00:12:02,830
And if all these links say Click Here, Click Here, Click Here,
00:12:02,830 --> 00:12:05,950
it would make absolutely no sense for them
00:12:05,950 --> 00:12:08,450
to know where they wanted to go.
00:12:08,450 --> 00:12:13,630
So if the links are descriptive and predictive for where
00:12:13,630 --> 00:12:18,020
it is going to go, then this starts to make sense
00:12:18,020 --> 00:12:20,710
and users can easily understand where they're going
00:12:20,710 --> 00:12:24,260
to go when they click the link.
00:12:24,260 --> 00:12:26,540
The other thing that you want to make sure
00:12:26,540 --> 00:12:28,910
when you're entering your content
00:12:28,910 --> 00:12:34,430
is that you use the headings, the built-in headings, when
00:12:34,430 --> 00:12:37,760
you are creating sections on a page
00:12:37,760 --> 00:12:40,650
and that you don't skip any levels.
00:12:40,650 --> 00:12:43,490
So what I mean by this is that if you
00:12:43,490 --> 00:12:48,560
are using Columbia sites, for instance, the page title,
00:12:48,560 --> 00:12:53,090
we automatically assign a Heading 1.
00:12:53,090 --> 00:12:56,540
The next heading on the page for a section,
00:12:56,540 --> 00:13:00,260
you must assign it as a Heading 2.
00:13:00,260 --> 00:13:04,760
And then from there, it follows outlining rules,
00:13:04,760 --> 00:13:08,540
meaning that a sub of Heading 2 would be a Heading 3.
00:13:08,540 --> 00:13:11,480
You don't want to skip a level from Heading 2 straight
00:13:11,480 --> 00:13:12,920
to Heading 4.
00:13:12,920 --> 00:13:17,430
And you always want to start with a Heading 2.
00:13:17,430 --> 00:13:23,520
So even if you like graphically the way it renders if you use
00:13:23,520 --> 00:13:27,630
straight a Heading 3 or embed these differently--
00:13:27,630 --> 00:13:30,780
let's say go to Heading 2 straight to Heading 4--
00:13:30,780 --> 00:13:33,180
you are not allowed to do that.
00:13:33,180 --> 00:13:36,930
You must start with Heading 2 and use these just
00:13:36,930 --> 00:13:41,310
like outlining rules, and your next sub must be a Heading 3.
00:13:41,310 --> 00:13:47,560
Your next sub of that must be a Heading 4, and so on.
00:13:47,560 --> 00:13:50,900
So I'll help you understand why this is important.
00:13:50,900 --> 00:13:54,640
So first off, if you don't use headings at all
00:13:54,640 --> 00:14:00,610
and only use your makeshift way of formatting headings--
00:14:00,610 --> 00:14:05,410
so what a sighted user sees is that this is the title.
00:14:05,410 --> 00:14:10,690
They understand that this is a Heading 2, this is a Heading 3,
00:14:10,690 --> 00:14:12,490
and this is a Heading 4.
00:14:12,490 --> 00:14:15,290
That makes sense for sighted users,
00:14:15,290 --> 00:14:17,650
but what a screen reader will read
00:14:17,650 --> 00:14:23,650
is just a whole mash-up of the entire page altogether
00:14:23,650 --> 00:14:26,980
and this will make no sense to the person using a screen
00:14:26,980 --> 00:14:28,970
reader.
00:14:28,970 --> 00:14:32,630
In this example, using the
built-in headings where this is
00:14:32,630 --> 00:14:33,240
set--
00:14:33,240 --> 00:14:37,040
again, this is a Heading 1 that we've set it at
00:14:37,040 --> 00:14:39,380
and this is a Heading 2.
00:14:39,380 --> 00:14:42,620
Again, a Heading 2 and a Heading 3.
00:14:42,620 --> 00:14:48,800
Now screen readers are able to aggregate all of those
00:14:48,800 --> 00:14:52,340
into one listing again, where the user can
00:14:52,340 --> 00:14:55,880
understand the outline of the page
00:14:55,880 --> 00:14:58,055
and decide what section to go to.
00:14:58,055 --> 00:15:01,130
00:15:01,130 --> 00:15:04,640
So now, creating accessible documents.
00:15:04,640 --> 00:15:09,770
This is very important if you want to post any Microsoft Word
00:15:09,770 --> 00:15:14,170
documents or PDFs to your site.
00:15:14,170 --> 00:15:16,480
And what you're going to want to do
00:15:16,480 --> 00:15:21,190
is you're going to want to keep all of the document text
00:15:21,190 --> 00:15:23,680
to at least 12 points.
00:15:23,680 --> 00:15:27,130
You're going to want to set the language to whatever language
00:15:27,130 --> 00:15:29,050
it is set to.
00:15:29,050 --> 00:15:31,150
You're going to want to make sure
00:15:31,150 --> 00:15:34,420
that you don't have some information conveyed
00:15:34,420 --> 00:15:36,340
by color alone.
00:15:36,340 --> 00:15:40,210
So here, for instance, there's a green X, a red X,
00:15:40,210 --> 00:15:43,150
and a red X. This is not OK.
00:15:43,150 --> 00:15:47,770
Somebody who cannot understand or see the colors cannot
00:15:47,770 --> 00:15:48,970
differentiate.
00:15:48,970 --> 00:15:55,320
Whereas in this example, we're using both color and shape
00:15:55,320 --> 00:16:00,530
to differentiate the content and that is OK.
00:16:00,530 --> 00:16:05,420
You want to make sure that your images are set to wrap
00:16:05,420 --> 00:16:11,130
text in line with the text.
00:16:11,130 --> 00:16:13,500
You want to make sure that your rows, if you
00:16:13,500 --> 00:16:15,840
use tables in your documents, are
00:16:15,840 --> 00:16:18,966
set to repeat as a header row.
00:16:18,966 --> 00:16:24,000
And you want to again use the built-in styles and number
00:16:24,000 --> 00:16:26,235
bulleted lists in a document.
00:16:26,235 --> 00:16:29,200
00:16:29,200 --> 00:16:32,200
Again, if you're using any images in your documents,
00:16:32,200 --> 00:16:37,420
you want to make sure that you are designating
00:16:37,420 --> 00:16:40,510
the alternative text for the picture,
00:16:40,510 --> 00:16:43,750
and it follows exactly the same concepts
00:16:43,750 --> 00:16:47,200
that we discussed before for adding an alternative text
00:16:47,200 --> 00:16:50,200
in a website.
00:16:50,200 --> 00:16:53,575
If you happen to use columns on the document,
00:16:53,575 --> 00:16:55,450
you want to make sure that they're officially
00:16:55,450 --> 00:16:58,435
set as columns and that you're not simply doing tabs.
00:16:58,435 --> 00:17:02,090
00:17:02,090 --> 00:17:06,184
And then you want to add a table of contents to your document.
00:17:06,184 --> 00:17:08,900
00:17:08,900 --> 00:17:11,089
Then the last step, once you do all of this,
00:17:11,089 --> 00:17:14,319
there is an Accessibility Checker
00:17:14,319 --> 00:17:18,790
that is part of Microsoft Word that you can run and fix
00:17:18,790 --> 00:17:22,599
whatever it finds for you before you save it.
00:17:22,599 --> 00:17:25,420
Then the last step is that if you
00:17:25,420 --> 00:17:28,540
wanted to create a PDF ultimately,
00:17:28,540 --> 00:17:32,680
you need to export it officially as a PDF.
00:17:32,680 --> 00:17:36,850
Sometimes people will say Print Document and then from there
00:17:36,850 --> 00:17:39,700
Save as PDF, and if you have done
00:17:39,700 --> 00:17:43,210
that, it will erase all of the steps
00:17:43,210 --> 00:17:47,390
you just took in creating the accessible document.
00:17:47,390 --> 00:17:50,530
So you want to make sure that you officially set it at export
00:17:50,530 --> 00:17:54,130
and you have the selection set for distribution
00:17:54,130 --> 00:17:57,040
and accessibility.
00:17:57,040 --> 00:18:00,130
OK, so now, we're going to run an exercise where
00:18:00,130 --> 00:18:01,960
I'm going to walk you through all of this
00:18:01,960 --> 00:18:06,020
so that you can see this in action.
00:18:06,020 --> 00:18:09,310
So I have a document here that--
00:18:09,310 --> 00:18:13,540
imagine my boss or somebody gives this to you
00:18:13,540 --> 00:18:17,240
and they say, please post this to the website.
00:18:17,240 --> 00:18:21,850
So again, the very first
thing that you have to do here
00:18:21,850 --> 00:18:25,870
is to make sure—the step-by-step is to make sure
00:18:25,870 --> 00:18:28,900
that the language is set to English
00:18:28,900 --> 00:18:32,950
and to see, if you have other languages in this document,
00:18:32,950 --> 00:18:35,770
that you need to also set the language.
00:18:35,770 --> 00:18:38,980
So over here, we have a section that's
00:18:38,980 --> 00:18:44,590
in French, and so you must set both of these
00:18:44,590 --> 00:18:46,450
to the various languages.
00:18:46,450 --> 00:18:51,290
So I'm going to highlight the English first,
00:18:51,290 --> 00:18:59,410
then I'm going to go to Tools and Language
00:18:59,410 --> 00:19:03,250
and make sure it's set to English.
00:19:03,250 --> 00:19:07,150
And then I'm going to do the same exact thing for here
00:19:07,150 --> 00:19:09,160
for the French.
00:19:09,160 --> 00:19:14,155
Tools and Language and make sure that it's set to French.
00:19:14,155 --> 00:19:18,320
00:19:18,320 --> 00:19:21,260
The next thing that you're going to need to do
00:19:21,260 --> 00:19:26,870
is make sure that the image up top
00:19:26,870 --> 00:19:30,500
is set to wrap in line with the text.
00:19:30,500 --> 00:19:34,390
You're going to click on it, right-click,
00:19:34,390 --> 00:19:39,540
and then you're going from here, you're going to say Wrap Text
00:19:39,540 --> 00:19:44,860
and you want to make sure it says In Line with Text.
00:19:44,860 --> 00:19:47,500
The next thing that you want to make sure
00:19:47,500 --> 00:19:50,620
is that visually, it looks like styles
00:19:50,620 --> 00:19:52,300
have been set for these sections,
00:19:52,300 --> 00:19:54,250
and you want to verify.
00:19:54,250 --> 00:20:00,490
So if you click on this, you see that over here, it's
00:20:00,490 --> 00:20:01,720
not using styles.
00:20:01,720 --> 00:20:04,210
It's set to Normal.
00:20:04,210 --> 00:20:06,180
So the very first thing that you want to do,
00:20:06,180 --> 00:20:07,950
the first header needs to be a Heading 1,
00:20:07,950 --> 00:20:11,790
so you want to set that officially to Heading 1.
00:20:11,790 --> 00:20:13,740
You want to go through all of these.
00:20:13,740 --> 00:20:15,930
This is also set to Normal, so you
00:20:15,930 --> 00:20:19,260
want to make sure that that's a Heading 2.
00:20:19,260 --> 00:20:21,840
And then you just use your editorial sense
00:20:21,840 --> 00:20:24,270
how you decide which headings these are.
00:20:24,270 --> 00:20:27,600
And so you just go through and create the headings.
00:20:27,600 --> 00:20:33,600
00:20:33,600 --> 00:20:36,120
Fun with French, I'll set as a Heading 2.
00:20:36,120 --> 00:20:40,230
00:20:40,230 --> 00:20:41,160
Let's see this is--
00:20:41,160 --> 00:20:45,150
00:20:45,150 --> 00:20:47,310
yeah, OK.
00:20:47,310 --> 00:20:49,390
So now we did the headings.
00:20:49,390 --> 00:20:52,440
Now we're looking at this and we want
00:20:52,440 --> 00:20:56,520
to make sure that these are using built-in bulleted numbers
00:20:56,520 --> 00:20:57,240
and lists.
00:20:57,240 --> 00:20:58,320
And it's not.
00:20:58,320 --> 00:21:01,200
You can see that none of these are highlighted.
00:21:01,200 --> 00:21:06,660
So you want to get rid of the makeshift dashes,
00:21:06,660 --> 00:21:09,210
highlight it, and then use the built-in.
00:21:09,210 --> 00:21:12,220
00:21:12,220 --> 00:21:14,860
OK, now going down this page, we want
00:21:14,860 --> 00:21:19,120
to make sure that the table over here
00:21:19,120 --> 00:21:23,050
is repeating the rows up on top.
00:21:23,050 --> 00:21:29,250
So we're going to right-click on it, go to Table Properties.
00:21:29,250 --> 00:21:30,615
We want to click on Row.
00:21:30,615 --> 00:21:34,170
00:21:34,170 --> 00:21:41,300
And we see over here that it is selected and that's OK.
00:21:41,300 --> 00:21:44,290
That's great.
00:21:44,290 --> 00:21:48,300
Now we want to also
write alternative text
00:21:48,300 --> 00:21:49,360
for this image.
00:21:49,360 --> 00:21:51,910
So we're going to
right-click on it,
00:21:51,910 --> 00:21:56,430
then we're going to say Format Picture.
00:21:56,430 --> 00:22:00,280
And here, we're going to
enter in the alternative text.
00:22:00,280 --> 00:22:04,650
And so for this example, I would say something like,
00:22:04,650 --> 00:22:19,290
cartoon characters in a lineup holding lorem ipsum signs.
00:22:19,290 --> 00:22:23,815
OK, that's done.
00:22:23,815 --> 00:22:27,020
00:22:27,020 --> 00:22:31,430
And now, the last thing that we want
00:22:31,430 --> 00:22:33,290
to do when we think that we're done
00:22:33,290 --> 00:22:36,080
is we want to run the Accessibility Checker
00:22:36,080 --> 00:22:40,760
and see if everything is accounted for.
00:22:40,760 --> 00:22:46,960
So we're going to go to Tools, Check Accessibility, and see
00:22:46,960 --> 00:22:48,280
what it comes up with.
00:22:48,280 --> 00:22:51,790
And it has now said that all issues are OK
00:22:51,790 --> 00:22:53,920
and that we're good to go.
00:22:53,920 --> 00:22:57,310
And the one last thing that we're
00:22:57,310 --> 00:23:01,600
going to do before we actually save this is we're
00:23:01,600 --> 00:23:05,870
going to add in a table of contents.
00:23:05,870 --> 00:23:09,370
And to do that, we're going to go to References.
00:23:09,370 --> 00:23:12,220
We're going to say Table of Contents
00:23:12,220 --> 00:23:16,250
then we're going to add in a table of contents.
00:23:16,250 --> 00:23:18,980
And over here, for whatever reason,
00:23:18,980 --> 00:23:24,830
if this happens to you where it puts the image in,
00:23:24,830 --> 00:23:28,050
copy the image, erase it.
00:23:28,050 --> 00:23:29,400
Let's do this again.
00:23:29,400 --> 00:23:31,140
For some reason, this seems to be
00:23:31,140 --> 00:23:38,970
a bit of a bug with Microsoft Word, so let's do that again.
00:23:38,970 --> 00:23:41,760
So Table of Contents there and now
00:23:41,760 --> 00:23:44,220
we're going to paste the image back in.
00:23:44,220 --> 00:23:44,940
OK.
00:23:44,940 --> 00:23:48,750
So now we're ready-- if what we need to do on the website
00:23:48,750 --> 00:23:52,590
is simply put a Microsoft document on the website,
00:23:52,590 --> 00:23:56,790
all we need to do is save this and then put it on the website.
00:23:56,790 --> 00:23:59,040
But if what we need to ultimately do
00:23:59,040 --> 00:24:02,550
is put a PDF of this on the website, what
00:24:02,550 --> 00:24:07,990
you're going to want to do is save this as a PDF.
00:24:07,990 --> 00:24:12,670
And remember, you want to save it officially
00:24:12,670 --> 00:24:14,260
as a PDF over here.
00:24:14,260 --> 00:24:18,550
You want to make sure that the selection is
00:24:18,550 --> 00:24:21,010
set for accessibility.
00:24:21,010 --> 00:24:23,350
And we'll name it Exercise Remediation.
00:24:23,350 --> 00:24:31,550
00:24:31,550 --> 00:24:34,800
And we'll export that.
00:24:34,800 --> 00:24:39,270
OK, so now, let's hop back into the presentation
00:24:39,270 --> 00:24:41,100
and we'll discuss next steps.
00:24:41,100 --> 00:24:45,060
OK, so what's going to happen is that now imagine
00:24:45,060 --> 00:24:47,490
you've been given a PDF from somebody and they say,
00:24:47,490 --> 00:24:50,380
post this to the website.
00:24:50,380 --> 00:24:55,990
So what you need to do when you open up your--
00:24:55,990 --> 00:24:59,050
you need Adobe Acrobat for this, by the way.
00:24:59,050 --> 00:25:00,900
If you do not have Adobe Acrobat,
00:25:00,900 --> 00:25:03,610
you need to request a copy of it.
00:25:03,610 --> 00:25:05,160
So the very first thing you're going
00:25:05,160 --> 00:25:08,520
to do when you get a PDF from somebody to post,
00:25:08,520 --> 00:25:10,080
if you haven't created it yourself,
00:25:10,080 --> 00:25:14,100
to know that it's been created thus far accessibly,
00:25:14,100 --> 00:25:17,440
is that you want to see if it has a tag root structure.
00:25:17,440 --> 00:25:21,000
And again, we'll go through all of this with this means.
00:25:21,000 --> 00:25:23,670
If it doesn't have a tag root structure,
00:25:23,670 --> 00:25:27,420
you want to export it out and start again in Microsoft Word.
00:25:27,420 --> 00:25:30,790
And we'll go through, again, all of this.
00:25:30,790 --> 00:25:34,480
So the steps to making it accessible within Microsoft
00:25:34,480 --> 00:25:38,200
Word is that you want to set the title of the document.
00:25:38,200 --> 00:25:43,450
The title of the document does not mean the document name.
00:25:43,450 --> 00:25:47,900
It's a title that you want to make sense for the user.
00:25:47,900 --> 00:25:50,630
You want to, again, you need to declare the language.
00:25:50,630 --> 00:25:52,730
Unfortunately, declaring the language
00:25:52,730 --> 00:25:56,390
doesn't survive the export from Microsoft Word,
00:25:56,390 --> 00:25:59,610
so you need to do that again.
00:25:59,610 --> 00:26:05,960
You want to set the tabbing order for users to tab through.
00:26:05,960 --> 00:26:10,700
You want to make sure that the headers have been set correctly
00:26:10,700 --> 00:26:12,560
and get rid of the excess noise.
00:26:12,560 --> 00:26:15,970
00:26:15,970 --> 00:26:18,460
And you want to make sure that the bookmarks have
00:26:18,460 --> 00:26:22,630
been added into the PDF.
00:26:22,630 --> 00:26:25,600
Then you want to make sure that the document is tagged
00:26:25,600 --> 00:26:29,890
as accessible so that screen readers realize,
00:26:29,890 --> 00:26:31,810
and then the last step again, similarly,
00:26:31,810 --> 00:26:34,090
is running an Accessibility Checker
00:26:34,090 --> 00:26:36,560
to see if you got everything.
00:26:36,560 --> 00:26:42,160
So let's open up our document within Adobe Acrobat
00:26:42,160 --> 00:26:48,370
that we just created within Microsoft Office.
00:26:48,370 --> 00:26:52,860
So here is the document.
00:26:52,860 --> 00:26:57,970
If I click on, over here, the Tag pane,
00:26:57,970 --> 00:27:01,030
this is called my root structure.
00:27:01,030 --> 00:27:05,380
And over here, I have a lot of things that you're seeing,
00:27:05,380 --> 00:27:10,600
and this means that I have successfully created a PDF
00:27:10,600 --> 00:27:13,870
and that I can begin to remediate it further
00:27:13,870 --> 00:27:16,840
within Adobe Acrobat.
00:27:16,840 --> 00:27:21,460
If you remember over here, I told you never to print
00:27:21,460 --> 00:27:25,015
and just say Print PDF, and I'll show you what happens.
00:27:25,015 --> 00:27:35,650
00:27:35,650 --> 00:27:42,970
So over here, if I were to open up this document,
00:27:42,970 --> 00:27:49,060
and now if I say, show me the Tag pane
00:27:49,060 --> 00:27:51,160
to see if it has tags--
00:27:51,160 --> 00:27:55,980
Navigation Panes and here, Tags, you'll
00:27:55,980 --> 00:27:59,380
see that it says that there are no tags available.
00:27:59,380 --> 00:28:02,460
This means that I have a bad PDF.
00:28:02,460 --> 00:28:04,380
And to be honest, it is very hard
00:28:04,380 --> 00:28:07,980
to remediate within Adobe Acrobat.
00:28:07,980 --> 00:28:10,740
And if this is the case, what you want to do
00:28:10,740 --> 00:28:15,750
is go and export it back out into Microsoft Word.
00:28:15,750 --> 00:28:22,290
So here, you would go back to export to Microsoft Word
00:28:22,290 --> 00:28:26,753
and select which one and then start the steps again.
00:28:26,753 --> 00:28:28,170
So that's what's going to happen--
00:28:28,170 --> 00:28:31,050
what you're going to see if you don't have a good PDF.
00:28:31,050 --> 00:28:33,900
But over here, we know we had a good PDF,
00:28:33,900 --> 00:28:38,460
so using the steps that I said, we'll just go through again one
00:28:38,460 --> 00:28:42,480
by one to make sure that we get this accessible within Adobe
00:28:42,480 --> 00:28:43,890
Acrobat.
00:28:43,890 --> 00:28:45,810
So we need to set the title.
00:28:45,810 --> 00:28:51,870
So you're going to go to File, Properties,
00:28:51,870 --> 00:28:54,090
and over here, add a title.
00:28:54,090 --> 00:28:56,010
Again, it's not the file name.
00:28:56,010 --> 00:28:57,240
It's a title of the document.
00:28:57,240 --> 00:29:00,330
00:29:00,330 --> 00:29:02,855
So here I'm just going to say Lorem Ipsum Usage.
00:29:02,855 --> 00:29:05,910
00:29:05,910 --> 00:29:07,470
Great.
00:29:07,470 --> 00:29:11,190
Then the next thing I want to do is set the language,
00:29:11,190 --> 00:29:13,590
declare the language.
00:29:13,590 --> 00:29:20,100
So again, I'm going to highlight the text
00:29:20,100 --> 00:29:21,660
that this is relevant for because I
00:29:21,660 --> 00:29:29,330
have two different texts here, two different languages.
00:29:29,330 --> 00:29:35,800
00:29:35,800 --> 00:29:36,880
Great.
00:29:36,880 --> 00:29:39,280
And here, I'm going to set the language
00:29:39,280 --> 00:29:41,950
by saying File and Properties--
00:29:41,950 --> 00:29:45,960
File, Properties.
00:29:45,960 --> 00:29:50,663
And here, then, I'm going to say from here Advanced
00:29:50,663 --> 00:29:52,080
and I'm going to set the language.
00:29:52,080 --> 00:29:56,850
So it's set by default to English, which is great,
00:29:56,850 --> 00:30:00,880
but now I have to do that for this section.
00:30:00,880 --> 00:30:09,080
So I'm going to say File, Properties, Advanced,
00:30:09,080 --> 00:30:10,040
and set this to French.
00:30:10,040 --> 00:30:14,500
00:30:14,500 --> 00:30:15,970
Great.
00:30:15,970 --> 00:30:18,700
Now the next step that I have to do
00:30:18,700 --> 00:30:23,460
is make sure that the tabbing order is done.
00:30:23,460 --> 00:30:28,830
So to do this, I'm going to go to the Thumbnail tab, which
00:30:28,830 --> 00:30:30,060
is this.
00:30:30,060 --> 00:30:33,000
I'm going to right-click on the first thumbnail
00:30:33,000 --> 00:30:34,920
and choose Page Properties.
00:30:34,920 --> 00:30:41,300
00:30:41,300 --> 00:30:44,450
And I'm going to say use the document structure because I
00:30:44,450 --> 00:30:48,230
already know that this is a correct document-- this
00:30:48,230 --> 00:30:50,220
is a formatted document.
00:30:50,220 --> 00:30:54,370
So I'm going to say great, OK, keep that.
00:30:54,370 --> 00:30:58,120
Then the next thing I need to do is make sure
00:30:58,120 --> 00:31:02,140
that my headings are done correctly.
00:31:02,140 --> 00:31:11,100
And so I'm going to go into the tag structure over here
00:31:11,100 --> 00:31:14,970
and start clicking on these tags.
00:31:14,970 --> 00:31:16,620
And make sure that they look correct.
00:31:16,620 --> 00:31:19,620
That it's highlighting what I expect it to highlight.
00:31:19,620 --> 00:31:24,930
So Table of Contents, Heading 1, Heading 2.
00:31:24,930 --> 00:31:26,260
This is wrong.
00:31:26,260 --> 00:31:28,600
A Heading 2 is not this image.
00:31:28,600 --> 00:31:31,180
So I need to delete that.
00:31:31,180 --> 00:31:35,040
Now figure is correctly highlighting.
00:31:35,040 --> 00:31:39,420
Heading 3, paragraph, Heading 2.
00:31:39,420 --> 00:31:40,830
This is wrong.
00:31:40,830 --> 00:31:42,180
This is junk.
00:31:42,180 --> 00:31:44,880
When you export from Microsoft Word,
00:31:44,880 --> 00:31:48,000
it really exports a bunch of noise,
00:31:48,000 --> 00:31:51,600
so you need to delete the headings in this tag
00:31:51,600 --> 00:31:54,090
root that don't make sense.
00:31:54,090 --> 00:31:57,000
P for paragraph, that makes sense.
00:31:57,000 --> 00:31:57,885
List items.
00:31:57,885 --> 00:32:04,690
00:32:04,690 --> 00:32:05,650
That's right.
00:32:05,650 --> 00:32:07,720
This is again an errant tag.
00:32:07,720 --> 00:32:08,710
I'll delete that.
00:32:08,710 --> 00:32:13,690
Heading 2, paragraph, paragraph, Heading 2,
00:32:13,690 --> 00:32:16,450
paragraph, table, paragraph.
00:32:16,450 --> 00:32:18,880
That's not right, it's highlighting some noise.
00:32:18,880 --> 00:32:20,660
I'll delete that.
00:32:20,660 --> 00:32:22,790
That's highlighting some noise also.
00:32:22,790 --> 00:32:24,470
Heading 2, that's right.
00:32:24,470 --> 00:32:29,120
Heading 3, paragraph, paragraph, paragraph, paragraph,
00:32:29,120 --> 00:32:30,140
and that is wrong.
00:32:30,140 --> 00:32:31,490
That's some noise.
00:32:31,490 --> 00:32:34,910
If for some reason you see that you did the heading structure
00:32:34,910 --> 00:32:38,240
incorrectly, you can always just change
00:32:38,240 --> 00:32:40,100
by double-clicking what heading you
00:32:40,100 --> 00:32:43,290
think that should really be.
00:32:43,290 --> 00:32:44,490
OK.
00:32:44,490 --> 00:32:49,410
So now, the last thing that we have to do
00:32:49,410 --> 00:32:52,380
is mark this document as tagged.
00:32:52,380 --> 00:32:56,360
So we're going to go to the Tag pane,
00:32:56,360 --> 00:33:00,830
click over here, and make sure that this is selected.
00:33:00,830 --> 00:33:03,630
And if this is selected, that's good to go.
00:33:03,630 --> 00:33:09,430
And now we can run our accessibility check.
00:33:09,430 --> 00:33:11,710
And to run the accessibility check,
00:33:11,710 --> 00:33:15,220
we're going to go to Tools, Accessibility.
00:33:15,220 --> 00:33:17,005
We're going to say Accessibility Check.
00:33:17,005 --> 00:33:19,630
00:33:19,630 --> 00:33:23,840
And then from here, say Start Checking
00:33:23,840 --> 00:33:26,330
and see what it comes up with.
00:33:26,330 --> 00:33:31,090
So it found an issue over here that it's
00:33:31,090 --> 00:33:34,940
saying that I did something with the nesting that's not correct.
00:33:34,940 --> 00:33:39,170
So let's see what it's saying.
00:33:39,170 --> 00:33:41,890
So it's saying that this tag over here
00:33:41,890 --> 00:33:44,880
has not been done correctly.
00:33:44,880 --> 00:33:48,010
So let's see what we have this tag set as.
00:33:48,010 --> 00:33:51,100
So over here, if you see that what's going on
00:33:51,100 --> 00:33:53,560
is that I have a Heading 1 here and then
00:33:53,560 --> 00:33:56,590
I moved it straight to a Heading 3.
00:33:56,590 --> 00:34:00,460
So we need that to be fixed, because again,
00:34:00,460 --> 00:34:02,950
you cannot skip levels.
00:34:02,950 --> 00:34:07,250
So this really should be a Heading 2.
00:34:07,250 --> 00:34:11,420
And now let's check accessibility again
00:34:11,420 --> 00:34:15,110
and see if that cleared it up.
00:34:15,110 --> 00:34:17,710
Excellent, that's done.
00:34:17,710 --> 00:34:20,679
So over here, if you see, there are two issues
00:34:20,679 --> 00:34:22,570
that it asked me just to verify, and that
00:34:22,570 --> 00:34:25,510
means that I have logical reading order, which
00:34:25,510 --> 00:34:29,050
I do because I checked my headings so I know that I have
00:34:29,050 --> 00:34:30,760
a logical reading order.
00:34:30,760 --> 00:34:35,750
And that the color contrast has been selected properly.
00:34:35,750 --> 00:34:38,290
And that's getting at how I chose
00:34:38,290 --> 00:34:40,870
these colors within Microsoft Word
00:34:40,870 --> 00:34:43,210
to be within enough contrast.
00:34:43,210 --> 00:34:45,850
And there will be instructions that
00:34:45,850 --> 00:34:49,659
are written up that you can link to from this video
00:34:49,659 --> 00:34:52,840
to figure out how to set that within Microsoft Word
00:34:52,840 --> 00:34:55,370
to make sure that that's done properly.
00:34:55,370 --> 00:34:57,370
So over here is just saying, just make sure.
00:34:57,370 --> 00:34:58,910
It's just a reminder.
00:34:58,910 --> 00:35:02,140
And assuming that that's OK, this document
00:35:02,140 --> 00:35:04,270
is now accessible.
00:35:04,270 --> 00:35:07,240
So all I need to do now is save it.
00:35:07,240 --> 00:35:09,520
Just regular Save.
00:35:09,520 --> 00:35:13,690
And now, this document is ready to be posted on your website.
00:35:13,690 --> 00:35:15,890
This is accessible.
00:35:15,890 --> 00:35:24,830
The last thing to know is that when you are uploading videos
00:35:24,830 --> 00:35:30,420
onto your website, you want to hopefully put a transcript.
00:35:30,420 --> 00:35:32,550
This is not mandatory.
00:35:32,550 --> 00:35:37,670
It's not Level AA, it's Level AAA, which is stricter
00:35:37,670 --> 00:35:41,570
than we're requiring you to, but if you're able,
00:35:41,570 --> 00:35:44,810
it's very good to put in a transcript.
00:35:44,810 --> 00:35:47,300
You also need to have captioning.
00:35:47,300 --> 00:35:50,370
This is Level AA to have captioning.
00:35:50,370 --> 00:35:53,810
And if you upload to YouTube, for instance,
00:35:53,810 --> 00:35:56,960
they will auto-caption this for you, which
00:35:56,960 --> 00:36:00,410
you should take advantage of.
00:36:00,410 --> 00:36:04,360
And so what you have to remember to do with creating accessible
00:36:04,360 --> 00:36:08,050
websites is making your content easy to understand,
00:36:08,050 --> 00:36:12,460
creating descriptive alternative text for your images,
00:36:12,460 --> 00:36:15,680
making your documents accessible,
00:36:15,680 --> 00:36:19,700
and creating captions and transcripts for your video.
00:36:19,700 --> 00:36:21,010
Thank you very much.
00:36:21,010 --> 00:36:24,410
This presentation will be posted as well
00:36:24,410 --> 00:36:27,250
and you can read the appendix if you'd like to.
00:36:27,250 --> 00:36:29,790
Thank you. Bye.