STOP if you have not taken Basic Web Editing yet. The training below is intended to follow the intro class. You can register for this class and take it online, too.

Creating Accessible Web Content training video

Finished with the video?

Take the Quiz!

Download resources

Full video transcript with timecode for Creating Accessible Web Content training video

Introduction

Hello there, and welcome to the Introduction to Universal Design and Web Accessibility Training Module. My name is Justin and I'm going to take you through this training today. Let's get started. Well here we have your potential visitor to your website, and they've approached your website and it's not accessible. It's been made inaccessible in some way, and they can't get to it. So let's pretend this is your visitor here, and let's say you website is up these stairs to the left, right? We're using this stair metaphor. So what you've just done is you've excluded this person from seeing your website. They can't get to your website, they can't get the content, they're not going to get it. It's our moral imperative to make sure that everyone at this land grant university has access to everything on the website. What if this person needs something on that website to save their life, a life or death reason? That would be a bad deal, right? That would be a bad issue. Maybe they can't complete their required homework without that website. Maybe that's required and they can't get there and so they're not going to get there, not going to complete the homework. Or if you're a lab, if you're a research organization, what if that's that big donor that you needed to save your lab and they can't get to your website, they can't see the content, they can't get to the thing they need, and so they're not going to be that big donor to save your lab. So there are other implications for us as the content creators as well, but we want to stay focused on those people and making sure that these websites can be available to everyone. So we're going to talk a little bit about what web accessibility is and the similarities it has with universal design. We're going to talk about the best practices you can use every day. And we have a little cheat sheet for you in a little bit. And then we're going to show you how to use our new Accessibility Scanner to fix those errors. Web accessibility is the inclusive practice of removing barriers that prevent interaction with or access to websites by people with disabilities. This is Wikipedia. If we looked at our agreement we have with the OCR, we're talking about making sure that everyone has access to all web content, regardless of disability.

00:02:20 - Disability Categories

What categories of disabilities do you know? You have a hint. There are four main categories. And I'll show you them if you don't know. They are

  • visual,
  • hearing,
  • motor and
  • cognitive.

And if we're talking about all those four folks, those four groups, we're looking at about 20% of people who have a disability and who may struggle with web content.

00:02:48 - Assistive Technology

Assistive technology are the things that people use to access that. If they're visually impaired, they might use a screen reader. We'll talk about that in a minute. The Wikipedia definition is, "assistive technology promotes greater independence by enabling people to perform tasks they were formerly unable to accomplish or had great difficulty accomplishing."

00:03:11

Assistive technologies used on the web
Disability
Assistive Technologies
Blindness
  • Screen readers
  • Refreshable Braille devices
Low Vision
  • Screen enlargers
  • Screen readers
Color Blindness
  • Color enhancement overlays or glasses
Deafness
  • Captions
  • Transcripts
Motor/Mobility Disabilities
  • Alternative keyboards/input devices
  • Eye gaze tracking
  • Voice Activation
Cognitive Disabilities
  • Screen readers
  • Screen overlays
  • Augmentative communication aids

A couple of things that people would use on the web, and you can look over this if you want to pause. Lots of screen readers are involved, right? So that's one of the main things that we focus on when we're talking about web content. You can also see -- we'll talk a little bit later about transcripts, needing transcripts for any audio or video at least. You can think about people who might not be using a keyboard or a mouse or cannot. They might just be tabbing through your site, and so making sure that screen order is correct. Making sure you're using headings, all those sorts of things. So these are the reasons why we're going to be going over a lot of these other -- the techniques you're going to use to make sure your stuff is accessible. These are the reasons why. Make sure that other folks who might not be able to see and use their motor skills and hear and may have cognitive issues, that they can access your content just like everyone else.

00:04:09 - Universal Design versus Accessibility

So universal design versus accessibility. We're talking about designing from the beginning which is why we're doing this training with you, so that when you're creating your content you're not necessarily making accessible content. You're implementing universal design so everyone can access it no matter what. That's what we're talking about. Sometimes we have to use a combination. We try not to. There's lots of reasons for that, and I'll show you one in just a moment. But using that universal design, the purpose of this training, make sure that you can do that from the beginning. Here's an example of accommodation, right? This bus is not going to be able to accommodate this gentleman and so he's being lifted on to the bus. Probably not a very pleasant experience for this gentleman who's being hoisted up there. If there were people on the bus they would probably be looking at him. And this might not be the greatest experience for him. And so this is something that folks with disabilities may experience and probably all have. So this is obviously not ideal. Whereas if we take a bus that's been made with universal design, it kneels, and this photo also shows a gentleman with his baby or his small child in a carrier. So this isn't even maybe a disabled person, but someone else is using this. So when we do implement universal design, when we are taking into account everyone that's going to view our websites, everyone's going to be able to use them better. So that's the overall goal.

Universal Design Cheatsheet

Download a PDF of the cheatsheet.

  1. Image description (alt text) on images = “what would you tell someone if you could not show the image?”
  2. Headings are important! Don’t fake them with bold text
  3. Link text should make sense on its own. click here = FAIL
  4. Color. Do not rely on color alone to establish meaning
  5. Convert documents to webpages. Use HTML pages, not PDFs, DOCX, PPT…
  6. Transcripts must be used on videos and audio
  7. Color contrast greater than 4.5 to 1. Contrast FAIL.

00:05:48

But how do we do this, right? How can we design from the beginning and not accommodating as an afterthought? We have a little cheat sheet for you. So these are the seven things that we're going to go over, the seven things we're going to show you how to do so that you can make your stuff accessible to all.

The first one is image descriptions, or alternative text. And the CMS that shows it most of the time is image descriptions. That's the phrase that we'll use today. If you're coding stuff yourself, alt text or alternative text is something you may have seen before as well. The rule here, the golden rule is what would you tell someone if you could not show them the image? So this is very contextual and we'll go into a little more depth on that in just a bit.

Headings, headings are very important. Screen readers use headings. People who are tabbing through your site may tab through your site using headings. Don't make them with bold text. Bold text is not read any differently in a screen reader than any other text around it. So don't just use bold text. Make sure you're using headings as well.

Link text should make sense on its own. It should be able to live by itself and make sense. If someone is using a screen reader, they may be scanning your site just by the links. They may have read the page already and may be going back to find the link they wanted. They may miss it completely if it's just something like Click Here. Right? That doesn't work.

00:07:24

Do not rely on color alone to establish meaning. I myself have issues with color. I'm partially colorblind. I see color, but if you see 128 -- if the crayon box that you have to see is 128 colors, I have about 24. So lots less than you. So if you're coloring something red, I'm not going to probably be able to tell that you did. So using something else to establish meaning, some other text, something around it, not just color.

00:07:59

We want you to start converting documents to web pages, especially web content. Web content should be a web page and not a PDF, a doc, a PowerPoint presentation, anything like that. If you're going into Word to create something to put on the web, instead what we'd like you to do is go into the CMS and create that as a webpage instead. In fact, it'll probably save you time. You won't have to turn it into a PDF. You won't have to upload it to the CMS, and you won't have to link to it. It'll already be there.

Transcripts. Video and audio must at least have a transcript. You may have seen closed captions on videos. You may have heard of audio description for people who don't see for very visual video stuff. Those things can be used as well, and if you want to make your stuff accessible, that's definitely something to think about. But at the very least, make sure if you're uploading video and putting video onto a page or putting audio onto a webpage like a podcast, make sure that that has a transcript alongside of it or nearby.

And color contrast. I don't know about your screen, if you can see that contrast fail after the sentence here. But color contrast generally should be about 4.5 to 1. We'll show you a little tool you can use if you're curious. If you're creating images and putting text on images and putting them onto the web, definitely look at the color contrast and make sure that you're at least 4.5 to 1, or you will not be meeting the standard that we need to meet.

00:09:43 - Image descriptions

And our first item is image descriptions or alternative text. You've probably seen these before. You can see our example there below. Images not appearing will produce some sort of text that is put on by the user. So when you're uploading your images, you need to make sure that you're putting alternative text in there, in that image description field. This is what a screen reader also reads when the image is selected. And it also displays, as you can see here, if the image doesn't load. So one of those pieces of universal design making it better for everybody is a good thing to remember. So that is something that needs to be done. Our general rule here is what you would tell someone if you could not show them the image or the show and tell rule. So as you can imagine, an image is contextual. The same image on different pages may mean different things. One of the examples that I like to use is a koala. If it's on a, you know, cute animals page, you might talk about how cute the koala is or about the look. But if that same picture of a koala is on a scientific paper, that may have a very different -- maybe have a certain genus, it may be from a certain family, maybe from a certain location. So those types of things are always contextual. So think about what you would tell someone if you couldn't show them that image. That's a good rule to follow. Here's an example of an image. If we were going to decide what the image description would be here, we might think about repeating the text that is in the image. So sous-chef Sean Sherman to visit MSU April 10-11. That may be part of our image description. Now what we do not need to do is repeat something if it's already in actual text somewhere else. And as you can see here, that same text is in the caption below. So you might instead in the image description just very briefly describe the picture. It might be Sean holding one of his -- or if you know, especially if you are familiar with this photo you would know exactly what is on that little platter that he's holding. That might be good as well to include.

00:12:07

How about this image? So of course contextually speaking where this image would go would very much change what you would put as the alternative text. Maybe very short aerial view of Montana State University with the bridges in the background. Or depending on the context of the image, maybe something completely different. So definitely contextual. That same what would you tell someone if you could not show them the image. Here's another great example. So figures like this are definitely not accessible to someone viewing this with a screen reader, right? They're not going to be able to see the pie chart. So this data should exist somewhere else in the webpage. It should be explained somewhere else on that page as well to make sure that you are addressing all users that are going to be trying to consume this data. This particular image may just be showing that it's split between Chrome and Firefox. You know, a third of users use Chrome, a third use Firefox and some use others. So that could be your image description. Just the meaning of the image as long as that text and the rest of the information that this image is displaying is in that webpage somewhere else.

00:13:32 - Headings

Let's move on to headings. So headings are very important. People will use -- screen readers can use headings to quickly scan through or help a user scan through your page. They also create a natural nesting of content, as you can imagine. Sort of like a bulleted list. So that's sort of how we're viewing this. Heading number one, please don't use that in the content of your page. Heading one is used by the title of your page. So your content title, that is the heading one. And generally all pages only should have one heading. One. It can confuse lots of different things including search engine optimization, so another part of universal design there. But one heading, one per page, not more than one. Heading two is the one -- so the chapters that are within your page, those are the main headings, the main beginnings of each of those things within your page. So heading two is the sort of top level. And then you can nest heading three, four and five within each other. You can always pop back out to heading two. As you go down through heading two, three and four, if you are continuing to nest things, you need to nest them in order. You don't want to jump from heading two to heading four or five. You need to go two, three, four. You can jump up, that's totally fine, back to heading two if it's sort of a new chapter in that page. If you get any lower than heading four, this might be something that requires more than one webpage. So that's another thing to think about when you're organizing your content. But use headings -- some people will use bold text and that's not good. Over 65% of those using those assistive technologies that we discussed, they use the headings to get through your website. We use them too, right? All users scan a page by using those headings. And so do not use headings as a style thing, right? You don't want to put a bunch of heading ones because it's a little bit bigger than a heading two. That's a bad idea. Just use the heading two's as those beginnings of your chapter on your page. We've spent a lot of time in web and digital communications styling all this stuff, making sure it looks good, it looks good together, the spacing is right. Those are not decisions that you need to make anymore. You just use the headings that you need to to make sure that everyone can consume that content. So here's an example of that bolded text. The bolded text is not read any differently in a screen reader than regular text. Headings are differentiated, they are listed as well. So that person can navigate by headings just themselves, figure out what parts of that page you want to read, or they want to read. Especially if they've already read your page once with your screen reader and they're going back through it again, they're trying to find the specific spot, headings are super useful for that.

00:16:42 - Links

Links. Let's move on to links. Write good links. These links are links that you should never, ever write. Never, ever use content with these types of links.

The reason for this is that people will use your links to navigate through a page, especially again if they've read your content once on their screen reader and they're going back to try and figure out what to click on. Or just a regular sighted reader, maybe they're not quite sure where that link will go if it's not specifically said within the link itself. So click here, follow this link, go here, read more, right? For a long time, and perhaps even still now, there are things that web and digital producers read more as a thing. That's going to go away. We're phasing that out. Read more, lots of read more links do not make any sense to a screen reader when someone is going through and just looking at the links. All they hear is, "Read more, read more, read more," and they don't know what they're going to read at all. So do not use -- if you have these on your webpages, make sure that you go and change them. We've just talked about this, the screen readers will scan by links only and that will happen. And all users will think about it before they follow a link if they're not clear where that destination is. So if you really want someone to click on something, make sure they know exactly where they're going to go. Here's an example.

00:18:13

This is probably a bad example. So for a sighted person, if we're looking at this, we can see and read. We know what's going on with these links. Even that here at the bottom, we can get an idea because we can read within the context around that link where that might go. However, if we're just going to look at this as we're navigating just by those links, Bozeman second-graders are here, all the information that we would get -- and would we click on that? Maybe, or maybe not.

00:18:46

So let's try some alternative content in the link text. So if we rewrite this a little bit. So you've noticed that those links have changed, the text has changed a little so we're rewriting the content a little bit to fit these. But if I remove the text, now we still know where these links go. We know that we're going to see the logo that the Boseman second-graders have designed. And that second link, we're going to read more about Lameris and the ISS tests.

00:19:20 - Color

Color. We're going to move on to color now. Do not rely on color alone to convey meaning. And this is meaningful for myself. There are completely colorblind -- well, first of all, completely blind people can't see any color. They don't see color at all. So if they're reading by a screen reader, there's red text, they're not going to know it's red. The screen reader's not going to tell them that it's red. So that information is going to be lost on that person. People with low vision may not be able to see some colors, may not be able to differentiate different colors or the color contrast. So that's an issue. And people like myself who have colorblindness may be able to see some colors okay, but there are lots of colors, myself included cannot see the difference between -- I have a lot of brown in my life. So if there's red and green, if you have a red and green button and it was a life or death situation for me, push the green button, I would be in trouble for sure.

00:20:24

Here's a sample colorblindness test. You may be able to see all the numbers. I can sort of see the 16 in the upper left and the bottom is a 12. No idea at all what is in the upper right and the bottom left. So just an example for you, if you can't see all four numbers as well, you may be colorblind too.

00:20:46

So here is an example of a webpage that is normal. Normal colors. If you look at like -- if you were me, you'll see that some of these colors end up being a little bit more muted. It's hard if we flip back and forth. It's hard to tell the difference now between the colors of that connect icon and that apply icon down below. And if we go further along into the blue and yellow, colorblindness, the tritanopia, it's very hard to see. There's lots of gray here and brown and green, greenish maybe. So here's an example of red text. Midterms are due on my desk by 5:00 PM Thursday. The good example includes another word that brings a little bit of that importance, right? The context in text itself. Important, midterms are due on my desk by 5:00 PM Thursday. So sure, we do have that red box around it, and there's a little bit of bolding happening too. But either way, if a screen reader goes through that, that screen reader is still going to read that important. So that extra bit of importance is going to be placed upon that text.

00:22:06 - Documents on the web

Documents on the web. So uploading a document onto the web, you have to make sure that the document itself is either 100% WCAG 2.0 AA accessible, or convert it to a webpage. Generally speaking as well, if your content that is in the PDF or the document that you're uploading, if that is mainly to be served and used by people on the web, that should be a webpage anyway. Web pages are accessible, as we're learning now. When you create this stuff the right way in the CMS, they're accessible. Most documents that are uploaded are not natively accessible. You do have to go through and do many of the things that we're talking about in Adobe Acrobat if you were going to do that, and make sure that that is completely WCAG 2.0 AA accessible. So we recommend turning it into a webpage. You can have that document PDF if it's a really nice, pretty thing that you've made or had made or paid someone to make. That can still be a downloadable, printable version of that page, but that content is also available on the web. That also makes it responsive, which means it can be viewed on mobile devices. PDF's are not mobile accessible, neither are DOC files. Sometimes people can't view that document at all on their phone or Excel or PowerPoint even. I mean, I know that you know, some of the operating systems do have DOC, Excel and PowerPoint viewers or editors. But generally speaking, not accessible. So if that content is meant to be a webpage or meant to be viewed on the web, it should be a webpage. If you have a printable version, you should still definitely include it as a download, but do not just stick a document onto the web and have it as a download, especially if you haven't gone through and checked for accessibility, because it will not be accessible. And you could be held accountable for any issues that occur.

00:24:09 - Video and audio need at least transcripts.

Video and audio need transcripts on our public web. This is the only way to make that content accessible to someone who is either or both deaf and blind. It's readable by a screen reader and it's also visible to someone who is deaf and they can read what's going on in your video. If you already have captions, you can use that to start building your transcript. We also have some transcription services if you need some recommendations. We can help out with that. Of course if you're deaf you wouldn't be able to hear what's going on in that video, wouldn't be able to hear what's being said, and that's what closed captioning and transcripts are great for. If you have to choose between captions or transcripts, do the transcripts. They can be read by a screen reader, converted into braille and translated into other languages, which is also super important.

00:25:10 - Color contrast

Color contrast. It's very hard for some people to view the text content if the color and brightness of the text are too similar to the background behind the text. I don't know if you can read all of that. Here, I'll fix it for you here. This is important, right? This is one of the reasons we love black text on a white background. It's super easy to read. This is also something to consider, the difference between small text and large text, the difference -- the requirement is different to things above 20 pixels large. So you don't have to write that down. We do all of that formatting for you. This is only really necessary for you if you're putting text into images. This is something for you to consider. Or if you're trying to modify our template for some reason, this is something as well that you would need to think about.

00:26:10

4.5 to 1. So 4.5 to 1 is a good benchmark for high-contrast designs. Large text again is only 3 to 1. And there's a great color contrast checker that WebAim.org has. We use it quite a bit. Our Accessibility Scanner will also do some of that work for you. It will check those things. We'll talk a little bit about our accessibility scanner shortly, but that concludes our seven items on our cheat sheet. You can always go back to this. There's a printable version of this cheat sheet on this webpage, so you can download that, print it out if you want and post it next to your desk. So as you're going through content, you can make sure that you're doing these things. And our scanner is going to help you make sure that you're staying compliant and help you with anything as you are creating your content. Let's take a look.

00:27:00 - The accessibility scanner in the CMS

Well here we are, the accessibility scanner across the top here, and of course through the page. As you can see it turned on highlighting some of the accessibility areas that we have within this page. I'll just quickly show you the different parts of the scanner, how they work, and then I'll show you how to remediate a couple of these errors. So across the top here, this scanner just sort of tells you what's going on across the top. This will not show up if you have a page with no errors. So if you don't see it, then you already have the accessibility tool activated on your account, don't have to worry about that page. That page is free of errors. So this is only going to turn up when you have to fix some things to make your page more accessible. So this tells us we've got four accessibility tasks to fix. This one here tells us what the current task is being viewed. And then if I want to check out the rest of my four tasks that I have, I can jump to those and then view, and it'll pop up down there in the page for us. You can see it gives us just a quick summary of what's going on, what may fix it right away. So this will remind you if you already know what's going on and how to fix it, what you can do. There will also be a help center article linked with each of these. So if you're not sure what to do, if you've forgotten, if it's been a while, you can use that help center article to help you remediate this thing. And then of course as you can see here, I can go through and move through the different tasks down here in the document as well as up in the top. I can just go through and check these and view. So I can just check and see what's going on. So let's fix one of these things. This error here, increasing the color contrast. So as we talked about before, right, blue on blue, probably a bad choice. So let's begin editing. And so all that begin editing button is going to do is open the editor for you. And so what I might do here is highlight this and in this case maybe I'll just clear formatting. That'll remove that foreground and background. I've still got a link on here but I've removed the formatting with that clear formatting button. And now if I save this page, you can see now I'm down from four tasks to three. And that error is gone. So this is the kind of workflow you want to get into when you're remediating a page. Let's take a look at this next error. It looks like we're faking a header. You can sort of see in my text here if you want to read into it a little bit further, what's going on. Someone somehow has added a bit of custom code and faked this heading. So let's fix it.

00:30:02

Header, heading, actually. Let's fix that as well. So let's fix this heading. What I might do is start with again -- we'll start with that clear formatting link and then in this particular case I'm going to go in and as we've already learned a couple of times probably now, let's select heading two and make that a heading. So now if I save this again, save this back out, it should save and now my error is gone. So two errors done so far. I've got two left. The next one might be a little bit more challenging. It looks like here we have a missing image description. So as we've learned, right, if that screen reader's going to come across this image, it's not going to be able to -- it's going to think that image doesn't exist and is invisible. So let's fix that. If we're going to edit that thing, that's in an asset. We'd have to go into that asset to fix that. And let's do that, actually. Here we are in our assets page and we'll just look up that asset here. What was it called? If we go back into main content, no image description tester. I'm going to put that into my -- there it is. No image description tester. And we'll check that out, just like we would to edit this asset, click that edit button. And there it is. Of course our title and description are blank. So I happen to know that this picture is specifically showing our open support sessions. So I'm going to say open support session in our office.

00:31:43

That's going to be my image description for here. I'm going to put that both in the title and the description. There's a couple of places where the CMS will use one or the other for your image description text or your alternative text. So you can just put the same text on both of those and then push save. And we're going to publish that. So if I publish this, add in alternative text.

00:32:09

And then I'm going to hit publish. And kabam, that asset and the subscribing page which is that page that I've got it on to be published successfully. So now if I go back to this page and do a refresh, I'm going to see that that now is not -- it has no error. So I've got three of my four errors taken care of so far. And of course the last one perhaps the most -- anyway, we'll show you how to do this one as well. So we have a PDF that is not accessible that's linked to by this document. So let's just take a look at that PDF. If you click on it, it will try and open in its best. Aha, so we have our universal design cheat sheet here. This is a PDF. It's a PDF of course of a PowerPoint slide, but still it's a PDF and so we want to get this text and get it into a webpage. And so I'm going to download this and download that to my desktop here so I can take off that. So I'm going to open it over here on this other screen here that you won't be able to see, but that's okay. I'm going to grab that text here in a moment and put it onto a webpage. So let's go back. Let's refresh this page again just so I can see what's going on on the actual page. That PDF is still linked to there. And in this case what we'll probably do instead of just this PDF -- the information that's included, right? If we were looking at that PDF, it's got our seven bulleted points or our seven items in our cheat sheet. We're going to put those into this webpage here and then use this link as a printable version of that content. So the content is here in the webpage and viewable and accessible as a webpage, as web content, but also we can keep that PDF because it would sure be nice for you to be able to download that and to be able to print it off if you want in that nice printable format that we created in PowerPoint. So let's do that. So first, let's go back to our main content edit region and let's -- I'm going to copy that information from the PDF. In this particular case, I've got the universal design cheat sheet, the heading. There's our heading there. Sometimes this may not come across. You may need to either clear formatting or you may need to paste this text up here. So maybe I'll do that just to give you an idea of how that works. So I'm going to turn on, paste this text. It's just going to remind me that I'm now in plain text mode which is great. And so I'm just going to grab all the content from that PDF and chunk, stick it in there as you can see. It's taken off some of the formatting there. And so we'll have to just kind of do a little bit of work and add that back in. I'll just do this real quick for you here.

00:35:31

So there you can see I've done a little bit of formatting there, and within the CMS using the WYSIWYG here, using the content editor and I've got that pretty much what was in that PDF on the webpage. So let's rename this link and maybe we'll move it down below our content here, just so that it follows along. And so actually what I'm going to do here first is grab the -- do the insert edit link. So I just right-clicked which you can't see, and then I'm going to do the insert edit link here. I can also go up and use this up here as well when I have the cursor in there. Just to grab, I'm going to grab the dependency tag which is going to be the link for this. I'm going to copy that. I'm going to do a control C there, just so that I've got it. And then I'm just going to remove this for now. I'm going to put it in the bottom below our content here, and we're going to use one of our new things which is the accessible document classes. So now I've got the stuff that's in my PDF is right here already, so this is all the information that's there. So in this case we're going to be adding our PDF as an alternative download, which is what a lot of you will be doing. So you'll have a PDF. You'll copy and paste the PDF information into the webpage like we've done here and then you'll add the PDF as an alternative download if someone maybe wants to print it off or something like that. So here we go. So I'm going to add my link first. I suppose I need to have text first, don't I? That would be good. So let's do that. So I've got printable version of universal design cheat sheet.

00:37:28

And I'm going to put in parentheses PDF so that when someone clicks on this, they know what sort of document is going to be shown to them. It can be a little jarring sometimes if someone clicks a link and they go to a PDF directly or their browser opens a PDF if they don't know already that's going to happen. That's something you can add. And then we're going to insert edit our link. And I'm going to use the browse tool -- I'm going to go to my documents folder which is where I've put this document. And there it is. There's our PDF. So the classes are here, but I'm going to show you what happens when you don't add the class, which you've already seen. But just to show you this one more time, so now I've got my link but it is inaccessible. It's going to tell us we need to fix our own certified PDF document. So let's go back into the main content region and we're going to edit this link. You could put your cursor in here somewhere. You can highlight the whole thing, whatever you want to do. And then we're going to use that which is now gray, because there is a link one it. So we're going to insert edit the link. I think you could also right-click on here and insert edit link. That would also work. It takes you to the same place. So we can see our dependency tag and our URL where our document is. And now we're going to add one of our four classes. So you can see here, you can see some of your old friends from making some styles of these classes. But we've used this also now to be able to mark your document as accessible in one of four different ways. We have the first way is that your document already meets WCAG 2.0 with no errors. So a lot of you have been remediating your PDF's like that which is great. That works. And when you've done that, you can just add that class and you're all set to go. We're going to use the second one here which is document included as an alternative download. We already have the information in the webpage. We're just adding this as an alternative download. That means that PDF itself that we're going to add doesn't necessarily have to be accessible itself because we have the information equitably nearby. The two others, document is legacy, if it's updated before the universal 2014, it doesn't need to be remediated yet, unless someone requests it. If someone does request it to your office, you will need to remediate that for them. And then we have documents owned by non-MSU entities. So that would be if you're linking to something for instance, linking to a W2 form as HR might do, that is certainly a place to use that. We have explanations of how and when to use all four of these on our website in our help center which is Montana.edu/web. Click on Help Center and you can search for accessible document classes.

00:40:23

So in this case, as I mentioned, we're going to include that. We're going to use this as an alternative download. We're going to add that class there, click OK, and now as you'll see from before, that warning goes away and we have our PDF marked as accessible. Now we're all set. So that's it. That's the end of our accessibility training module. Thanks very much for listening. My name is Justin. I work in web and digital communications. You can get in touch with us there eat Montana.edu/web. Through the help center you can file a support request with us and we can help you with any of these accessibility issues you might have. You're about to take the quiz, so good luck. And let us know if you need any help on that. And thank you very much, because you having taken this class now will be making our website accessible to everyone, which is excellent and definitely part of our mission here at Montana State University.