[music playing]

Speaker: OTAN, Outreach and Technical Assistance Network.

Dana Thompson: So today we're talking about accessibility in Canvas, which is super important because we want to make sure that we are providing content to everybody regardless of how they are accessing it. And when we think about accessibility in Canvas, when I ask, a lot people say like, oh, yeah, no.

My-- people can read my content or people can access my content. But there are some things that we need to make sure that we keep in mind for those who are accessing content through assistive devices, things like screen readers, voice-to-text or text-to-voice, those kinds of things.

And not just for our students who might have a disability. But there are a lot of times where students will be using those kinds of like extensions where they can have the content read to them because they might be an auditory learner, even though they aren't-- don't have a visibility disability, they still use those devices. So we want to make sure that we are providing access to that regardless. So I'm going to actually show this video, not the whole thing. But it's really interesting. So I'm going to go ahead and press Play.

[video playback]

[end playback]

So I'm going to go ahead and stop this here. That was a lot if you think about it. Now, this video is several years old so I know it's changed since then. It has to. But if you can imagine, I showed this video once prior-- in a prior training.

And, immediately, people started putting in the chat, sounds not working. I can't hear it. And as you all figured out, that was by design. So it's frustrating, right, when you see something that you should be getting information from and you can't access it for whatever reason. So-- and that happens all the time.

So even-- and all the videos on YouTube, we might think, oh, well, there's that automatic translation-- or that automatic captioning that you can turn on in YouTube. But it doesn't mean necessarily that our students who are using those assistive devices because of a disability have access to that kind of content. So we want to be intentional in our design.

So this is a really great video. But why does it matter? So the core-- and this is actually from ChatGPT. I asked ChatGPT to explain why accessibility matters. The core idea behind accessibility is to create online content that's universally usable, encompassing a broad spectrum of abilities and circumstances. It's about ensuring that digital spaces offer equal access and opportunity to everyone, regardless of their unique abilities.

And that, I thought, was a great little quote, really explains accessibility well. And what does this include? So this includes screen reader software. So people with visual disabilities can use the-- can hear the content, promoting independence and timely access.

But when we're designing our content, we need to be aware of that because there are certain ways that you can design your content that will actually make a screen reader more confusing. Assistive devices, that helps those with motor disabilities. Maybe they're using a mouth wand instead of a mouse or they have sophisticated eye-tracking software. And with the AI now, this is going to become even more.

Captions and transcripts, not just for our deaf community but also for our students who might be living in a multi-family home and there's a lot of people in the home at the same time. And in order to get the content from the videos that they're watching, they can't hear it because of everything else that's going on. And so they need those captions to be able to interact with that content. And then it's structured and flexible web content.

Basically, Canvas is a website and you are all web designers. So we want to make sure that we're structuring it so that it's easy to follow even for our learners who might not have cognitive disabilities. But when you think about how you look at online newsletters or information online, there's ways that we interact with that content that's different than if you were reading a book.

So there are basically four categories that we need to be deliberate in designing our content. WebAIM is a great source, resource that-- if you just Google WebAIM, it will take you right to their website. But they have a lot of information, web accessibility in mind, about how you can design accessible websites, which, like I said, Canvas is. And so we're going to-- I'm going to talk about this website a lot.

So we're talking about visual, so blindness, low vision, color contrast. My husband is colorblind. And so there are some websites that he cannot get information from because of the design and colors. They're too similar and so he can't decipher them. Auditory, so there's the deafness and hard-of-hearing.

The inability to use a mouse or a slow response time, so they have limited fine motor control. And so they are using assistive devices to assist with that. And then we have our learning disabilities, distractibility, inability to remember or focus large amounts of information, especially if it's not structured logically. So those are the four categories that we need to be deliberate in designing our content in Canvas.

So there's-- on the WebAIM site, there is this acronym, POUR, that you can really kind of keep in mind. It needs to be perceivable so all learners can see and hear the information no matter how they're accessing it. Operable, all learners can navigate the information independently.

Understandable, there's a consistent and predictable design, think of an outline. And robust, it maximizes the compatibility with current and future tools. And, like I said, there's going to be a lot of assistive tools coming out with AI just taking everything by storm.

So let's talk about building content in Canvas. So when we're talking about making it structured, it's-- we're talking about chunking the information. We're going to do that by using headings. You already do it logically when you write in paragraph form. But we want to make sure that we're using headings to really chunk it. So if you think about how you look at a website if you're on the computer or a mobile device, studies have shown-- there have been some studies that have done eye-tracking.

Most people will start at the top left, they'll scan over to the top right, and then they do a zigzag down to the bottom-- let me see, yeah, down to the bottom left, and then finish out. So they're doing-- it's called Z reading. And what that does is it gives them the summary at the top. And then they scan to see if there's anything important on the page that they need to stop and pay more attention to. And so if you just have a bunch of information and it's not structured visually, you've lost a lot of your learners.

So we're going to not only have it visually-- structured in the content with paragraphs and thinking, like I said, about the outline format, but also visually so that our visual learners can chunk it and pick out information that they need to learn about. So using heading, using lists, using color. But, like I said, if they have a visual impairment, those colors, we want to make sure that it doesn't impede. So we need to use the right color.

And on the WebAIM website, there is a place where you can go and look at-- and I don't know exactly where it is so I'm going to search for color contrast. So when we're looking at using color in our websites, this is going to tell us whether-- if there's a good enough contrast ratio. So when you have normal text versus large text versus graphical objects, we can really check to make sure that we have appropriate colors.

So, for example, if I use red and orange, which you should never use together but we're just going to see, and so that's-- this is my background color. Oh, it didn't pick it. Let's try that again. All right, so there's our background color and here's our foreground color. This is really hard to read, right? And it's telling me here that it failed.

So I can go up and change my colors and make sure that I'm using colors that people can see. This failed in all aspects. So a really good rule of thumb is dark color in the background, bright color in the foreground, and vice versa. So trying to stay away, if you guys know about the color wheel, trying to stay away from those colors that are together.

Yes, thank you, Karen. Yeah, and it's just webaim.org and then you can search for color-- even if I just search for color, I'm sure it will come up with the color contrast, yeah, contrast checker. So this is a great website to just verify that you're doing everything that you should be doing.

Then we're talking about images and media. So whether it's a video that you are linking from YouTube into Canvas, or it's a video that you've recorded and you're uploading into Canvas, or you're using images, there are some things that I'm going to show you that you need to make sure that you do so that if somebody who is using a screen reader and can't hear the video, they have access to those captions.

Or they are using a screen reader and so they don't see the images but they know what the image is about. So doing those kinds of things. Then we're going to talk a lot about links and then also tables. So this is kind of our focus for today and how we can, just by these four items, really make our pages much more accessible to students regardless of how they're accessing the content.

So we're going to start out with structure. So, like I said, chunking information for ease of readability. So if I-- let me see if I can do this. Nope, that's not it. If I log into-- or if I show you this here, even without being able to see it because it's a screenshot that's not very big, you can see that it's chunked. I have a header followed by some paragraph. And then I-- you can see Notifications, Announcements, Inbox.

And so if you think about how most people when they are reading online content they start up here in the top left, read across, and then zigzag down, and then read at the bottom. And so this is pretty easy to see where I might need to stop and pay more attention. This one is also chunked and-- but it's a little bit less color, so not only using the chunking but using color.

And also, bullets and numbering, that is huge when you're doing online content because it keeps it concise. People aren't going to have to try and read a paragraph to get the information because, typically, they are just skimming. So we're going to do this in an example that I'm going to show you so that you can really focus on using these heading styles rather than just changing text to make it big and bold.

Because that, visually, will look good. But when you're using a screen reader, it doesn't look at the visual part of the webpage. It looks at the HTML. And so we can use a heading to tell the screen reader that this is a title or this is a heading and then what's following it is the information. And it conveys that to the user who's using that device more effectively and in the way that we want it to be structured.

So alternative text. So, again, this is with structure. So when we're talking about image options, when we put an image in, we're going to add some alt text. Because if images-- maybe it's somebody who is at a location where there's really bad internet service and so pictures aren't loading.

That image alt text will give them an idea of what that picture is there for, why did you include it, which means we also need to be very careful about not just including pictures to include pictures. They need to tell the story of the content. And if it doesn't, if it is just a decorative, we want to make sure that we check this decorative box because then the screen reader will skip over that HTML and not read it to the user. So we're going to talk about that.

We're going to talk about captions. And all videos should have closed caption text. When you look at YouTube, again, it might have a transcript but it might not actually have closed captions. So if that's the case, then you want to make sure that you take that transcript and make it accessible. I've done it many times where I loved the YouTube video. There was no transcript.

And so I actually used Google Docs to listen to the video and record the transcript while I made adjustments to make sure it was correct. And then I linked to that transcript for people who needed that because captions weren't available. Because on YouTube, if it's somebody else's video, you can't add captions to it.

Now, if you create your own video in Canvas, you can attach captions to that. And I'm going to show you how to do that. So we want to make sure that we provide, if it's a visual element, we want to provide a way to access text to explain that visual element and vice versa.

And then hyperlinks. So when you're looking at this example, this one is good because it's contextual. So this is the OTAN webpage on accessibility. We, as visual learners, can see that that is a hyperlink. And so we can click on it and it's going to take us to the OTAN webpage on accessibility. What we want to stay away from is the Click here.

Because with screen readers, it will actually create a table of contents of every link on the page that the user can then access later. And if all of your links say Click here, because only the Click here will show up in that list because the content is not-- the context is not highlighted, then they're just going to get a bunch of lists-- or, a bunch of links that say Click here and have no idea where they go to. So we want to make sure that there's context.

And this one down at the bottom is not correct because if you think about how screen readers work, it's going to read every word on the page. And because this one is not a contextual link, up here it'll say, this is the link, OTAN webpage on accessibility. This one will say, link, Click here for the OTAN webpage on accessibility, which works right in line but not if it's indexed later.

This one, the screen reader will say, visit the OTAN webpage on accessibility at https://otan.us/Resources/Home/Accessibility/Resources. It's just-- and by the time you listen to that, you're done, right? So we really, really want to make sure that we create hyperlinks that are contextual.

And then tables. I'm going to play this one real quick and then we're going to get in and play.

[video playback]

- Heading level one examples of. Heading level one examples of good and bad table layout for screen readers. Heading level two bad. Table 1, non-uniform table. Week, Assignment, Due Date. One, reading chapters 1-3, Jan 20. Post introductions to discussion list.

Two, read chapter 4-6. Feb 1, 3, read chapter 7. Feb 8, paper due. Feb 9, heading level two good. Week, Assignment, Due Date. Week 1, reading chapters 1 to 3. January 20, week 1, post introductions to discussion list. January 20, week 2, read chapters 4 to 6. February 1, week 3, read--

[end playback]

Dana Thompson: So even as you're listening to the screen reader, and this was a real screen reader reading a table, again, it's reading the HTML. It was very confusing that first table because there was not a logical structure to it. It's still hard, in my mind, because I am not an auditory learner. I'm a very visual learner.

So hearing the good example, I was able to internalize it better, right? So we want to make sure that we're providing our table data appropriately. We want to make sure that we're giving captions so that it know-- the screen reader will actually say what the table is about.

And if you use a table for visual layout because you want to make sure that this link is here and this picture is here and you're using it for layout, which is not best practice, but if you do, you need to keep it simple to maybe two columns or-- and also know that it's not responsive.

So if they're on a little device and it's a big table, they're having to scroll sideways, which is not intuitive. So tables should really be used for data, not for visual layout. But we're going to get in and see how to create tables that are accessible.

And Canvas has a bunch of accessibility features, which we're going to go over. My favorite is the Accessibility Checker. So I'm going to show you that and the Start Link Validation to make sure that all your links in your course work. And we're going to look at the Immersive Reader, which is a Microsoft tool built into Canvas Pages and Canvas Assignments, and then some of these other ones as well.

So going back, I'm going to come over to my Canvas page. And here's a page that is just content. And when you look at it, it is a lot of content, right? And it is kind of chunked but it's not easy to see that it's chunked. And so we're going to take this page and make it so that it is more accessible not only visually but to our screen readers and to our people, our students who are using those assistive devices.

And if you want to do this with me, I'm going to go ahead and I'm going to take all of this and copy it. And I think if-- well, that might not be-- I'm going to try pasting this in the-- nope, too long, OK. So I'm going to-- so I copied it. And now I'm going to come over here and create a Google Doc and share that Google Doc with you so that you can copy the same text.

And this is going to be our demo content. And I will share this so that everyone with the link can view it. And then I'm going to copy that link and put that in the chat. So go ahead and grab that link. That should take you to this page. And just select everything that's on this page and paste it into a new Canvas page.

And that way, you can do these formatting tricks with me so that you can see what I'm talking about and ask any questions. So I'll give you a minute to do that. So, again, the link is in the chat. Just come in here and do either Control-A to select all or you can come up here to Edit and select all. And then you're going to copy.

And once you've copied that, come over to Canvas and open up a brand new page and go into the Edit view. And you'll just come up here to the Rich Content Editor and paste. So I'll give you a minute to do that. Mine's already pasted in here. Ready?

So the first thing that we're going to do is we're going to give this more structure not only in our HTML but also in our visual. And I'm just going to show you something real quick. I'm going to come down here and switch over to the HTML. Now, if you don't know HTML, that's OK. What you need to know is this p stands for paragraph.

So anytime the browser sees that p tag, it's going to create a new paragraph. And so everything in here is just one big paragraph, right? But, really, it's not. What we want this-- I call them carets down here, the greater than, less than sign down at the bottom right of your Rich Content Editor. You can also come over to View and go to the HTML Editor. But I was just showing you that. We don't have to work in HTML to do this.

So this is what I see a lot of people doing. OK, so this is the title of this page. And so don't do this. But what I see happening is a lot of people will come in and say, OK, that's a title. I'm going to make it 18 points. I'm going to make it bold. And I'm going to change the font. So because we're talking about the climate, we're going to turn it to green. And there you go. It's visual. However, when I come into the HTML, it's still just a p.

The screen reader has no idea that that's the title, right? So I'm going to come back to my visual. And I'm going to select all of this and get rid of all that text-- or, all of that formatting that I just did because it didn't do any good for the screen reader. And I'm going to do that by clicking on this Clear Formatting icon. So now it's back to-- I could have just taken everything off but that was faster.

So instead of doing it manually, the first thing we're going to do is come up here and select this line. And we're going to tell it that instead of a paragraph, it's going to be a Heading 2. So when you look at your headings, think of this as like an outline. This is going to be your main heading. And then this would be a subheading. And this would be a sub-subheading. And then we have our paragraph. And so we're going to tell the assistive devices that this is a Heading 2.

And automatically it makes it big. So I didn't have to come in and mess with the font size. It put it to a bigger size automatically. And the key is, I'm going to show you in the HTML, it now has tagged that as a Heading 2, meaning the biggest heading. That's our main title. So the screen reader can say to the user, this is the main title, Understanding the Global Impact of Warming Climates, OK?

So-- and I did not do any visual formatting yet. But now for my visual learners, if I want to make this green, I can now select that heading and come up to my font color and choose green. Now, I'm going to do something real quick. I'm going to select that and I'm going to make it a lighter color, like this red, right? And it's-- I can see it. But look what happened down here.

My little Accessibility Checker now has a notification on it. And that's telling me that there's something wrong. It's not accessible to everybody. And when I click on this Accessibility Checker, it's going to tell me that text larger than 18 points should display a minimum contrast ratio of 3 to 1. Right now, this is not 3 to 1. Because if I were to take this color and put it in that color contraster from WebAIM, it would tell me that it's not 3 to 1.

So my foreground color-- my background is white so I'm going to leave that there. But I'm going to come here and see what this pink is. So it's, yeah, it's going to ask for the RGBA. So let's figure that out a different way. I don't know it. Here, I think I can do it here. Yes, so let's say that this is the pink we're using.

So I'm going to-- and you don't have to do this. I'm just showing you this so that you can see how this-- so the foreground color is my text. So I'm going to put that hexadecimal color here. Start with a pound sign and hit Enter. And you can see that down here, it's telling me that it failed. So I didn't have to come here to find that out because my little Accessibility Checker told me that it was not enough contrast.

So I-- and this is where the color is right now. I can come over here and say, well, is this one going to work? And because I can apply, yes, that one has enough contrast. And so now I'm good. I don't have any issues. So keeping an eye on this little Accessibility Checker will help you because I didn't have to go to that third website in order to find a good color for that, OK? Yes.

So that's my main heading, OK? And I actually, for me, I like the green better. So I'm going to come back and choose that green. Now, this Objectives, that's going to be a subheading. So, again, instead of manually changing my size and color and all of that, I'm going to come up here to my Heading 3 and automatically it's bigger. I can bold it if I want it even more-- to stand out even more. But now here's my Heading 2, here's my Heading 3.

And then I have some content. So I'm just going to come through here and I'm scanning. Here's my conclusion. So I have to think, do I want my conclusion to be the same-- so another subheading underneath my main title? I think so because I'm going to have my main title, and then I'm going to have my Objectives, and then my content, and then my Conclusion.

So I'm going to come here and change that to Heading 3. My Next Steps is going to be another subheading, Heading 3. And already, it is more chunked than it was before. So let me save just so that you can see. Already-- hello? Refresh, here we go.

Already, it's easier on the eyes to kind of look through this. And all we did was change the main structure. So I can find my Conclusion, my Next Steps. So as I'm scanning this, I'm going to understand the global impact of warming climate. There's my Objectives. There's my Conclusion. There's my Next Steps. And now I can determine how I'm going to go back and interact with that content.

So, again, the link in the chat will take you to my Google Doc, which is here. Go ahead and select all of that, copy it, paste it into a new Canvas page. And I'm going to give you just a couple of minutes to go ahead and put in all of your headings. So Heading 2 and then Heading 3 for Objectives, Conclusion, and Next Steps.

And I'm going to do-- one of the things that I like to do is a two-minute timer. But I want my Google timer. So we're going to put an r on the end of that. Here's my Google timer. And I can even make that-- oh, that's too big, sorry. So that will help me know that I've given you enough time and so that you can put in those headings. Let me know if you need any help.

Good question. So the difference between Heading 1, 2, 3, 4, they go backwards. And if you think about an outline-- so let me come into my Google Doc. Here's my Google Doc, right? So if I were to make an outline, I'm going to come up here and we're going to do an ABC outline, right?

So maybe this is my title. And then under that, I'm going to have Objectives. And then I might have Conclusion. So think of it this way. And I know the content is not in there yet. But when you're looking at creating an outline, you have your main topics and then you have you subtopics.

And even under your subtopics, you can have sub-subtopics. So this is what we're creating in a-- as a structure in our website. So think of the Heading 2 as your main topic. And so what I did-- and, again, this is up to how you want it to be structured. Let me find that again. Right there.

This is for-- there is a Heading 1. Canvas uses that for your title. So the title of the page is Heading 1. Nothing else can be a Heading 1. But then your next main topic is going to be Heading 2. So it actually goes Heading 2 and then Heading 3 is a sub-subtopic. So if you think of this as an outline-- there's my two minutes.

If you think of this as an outline, this would be your A, this would be your B, and then we have our information in here that might be C. And then this would be Roman numeral I. And then the conclusion would go back to B. So we're creating our outline. But what's happening on the backend for our screen readers is it says, OK, this is the main topic.

This is a subtopic. And you can see that now we have a bunch of p's because this is just content. But then we have another subtopic. Yes, it is made to help with screen readers. So it's giving structure to the people who are listening. And then the people who are looking at it visually, you can see it visually.

But if we were to just change the font, and the color, and the size manually, then the screen reader would think this is all just one big paragraph or five paragraphs, no titles or anything. So Heading 2 is going to be your main topic. Heading 3 is going to be your subtopic. Heading 4 is going to be a sub-subtopic. And then your paragraph is content. I hope that helps.

OK. Now, I'm looking at this and we're going to do a little bit more structure. Here are my Objectives. And I have two objectives for this class. So what I see a lot of people do is they come in here and they will manually type, OK, here's my first objective and here's my second objective, right?

Take a look at my little Accessibility Checker. It's now telling me that I have an issue. So when I click on that, it's telling me that lists should be formatted as lists. And let me show you why. So, again, you don't need to be going into the HTML. I just want you to kind of see what happens.

So here's a paragraph. And this is actually my first objective. And then here's the second objective. But my screen reader is going to read it as one paragraph because it says it's a paragraph. What we want to have happen, and so I'm going to get rid of my manual 1's and 2's, what we want to have happen is for the screen reader to know that this is a list.

So I'm actually going to select both of my objectives. And I'm going to come in here to more because it doesn't all fit on one screen. And I'm going to choose a list, either a bulleted list or a numbered list, your choice. So I'm going to choose a bulleted list. Now, it looks like it made a mistake because there's only one item. All I need to do is put my cursor at the beginning of the next item and hit Enter for that next bullet to show up.

But now when I go into my screen readers, it will see this as a list. And each one of these is a list item. And so it's going to read that to the person using the assistive device as a list rather than a paragraph. So we want to use our bullets and numbering as much as possible. So, again, I just highlighted the items, came up here and chose the bullets. And then if I needed another bullet, I just hit Enter.

So I'm going to come all the way down here to the bottom because I have the same thing down here at Next Steps. So I'm just going to select all of my three next steps. And I'm going to make this a numbered list. And, again, I just have to hit Enter for those to automatically come up. And the nice thing is if I decide, oh, I don't want this one. I'm going to get rid of it. It automatically numbers it correctly.

So go ahead and put a bulleted list for your outcomes, your Objectives, and a numbered list down at the bottom for your Next Steps. But that bulleted numbering is a great way to structure your content, both visually and on the HTML. It's a trick.

All right. I'm going to skip this for just a minute and come back. But what I'm going to do, when I look at this-- let me save it and look at it in a bigger window. Already it's going to be better because I have those lists, right? And I can see down here it's much easier to kind of skim. But I can see here that these are paragraphs. Each one has information on something specific in looking at global warming.

So now I'm going to start looking this. I could make these into more of a list. So if I clicked here right before temperature and I came and I selected everything, and this is another party trick. I'm going to put my cursor at the beginning of that line, come down here, and I'm going to hold my Shift key and click at the end. And it's going to select all-- everything that's in between so I don't have to scroll, and drag, and fight it. I could come in here and make this a bulleted list.

So, again I don't see it because it's hidden. It's in these three dots. But I can also come here to Format and-- where did it go, Font Sizes, Fonts, Insert. Where's my lists? Tools-- am I just not seeing it? Blocks, Fonts, Font Sizes, Align, Directionality. Oh, interesting.

I thought everything was hidden a menu somewhere. So I am going to have to hit those three dots. And I'm going to come over here and I'm going to use my ABC. So what that did, when I look at it, is it formatted it into lists. ABC here, OK? It's still not great. But it is a list so that the screen reader can see it as a list.

But maybe I don't want this as a list. Maybe I just want each paragraph to be its own information. So what I'm going to do is actually select all of that again, hold my Shift key, not my Caps Lock key. And I'm going to remove the list by coming to my three dots and clicking on that list again so it put it back to just a bunch of paragraphs. So I do want it as a bunch of paragraphs but I can visually set it apart a couple of ways.

First, I can come here and use this-- the bold to make that title of that little paragraph more visual, stands out more. But what I might want to do, actually, is continue with my outline. So I have a Heading 2 here and a Heading 3 here. I can come down here and put the content below the paragraph title and make that the next one in my list-- or, in my outline as a Heading 4.

And so I can go through and do that. And notice that when I'm making it a heading, even if I don't select the whole thing, it changes that whole line, which is why when you do this by mistake, you're like, oh my gosh. It did the whole paragraph. Why did it do that? Because it's called a block and so it's going to change the whole block. So, yes, that's why you need to separate the content from the title. Because if you don't, then the content becomes the block as well.

So we just want the title-- oops, to be that block. So Impact on Wildlife, I'm going to put the content underneath it and change the paragraph title so that it's a block. So if you've ever done that where you don't understand why everything looks so big, it's probably because it made the entire paragraph a heading instead of a paragraph. So that's Agriculture. And then I have Economic Consequences.

So, see, I did the paragraph. And notice here my Accessibility Checker popped up because headings should not contain more than 120 characters. And this paragraph is more than 120 characters. So I'm going to change that to a paragraph tag to make it so that it's accessible. So your Accessibility Checker is going to help you as you go so that you do it correctly without having to come back and try and figure it out. So instead of the paragraph, I made the title.

And now I'm going to come down here and hit Save. And, already, just by making these titles and headings, this is much more easy on the eyes to kind of chunk and figure out. Now, notice here, these two are bold, Temperature Rise and Melting Ice. They're Heading 4, same with Impact on Wildlife and Human Health Risks. But the others I didn't bold. So I might want to go back and bold the others too because they-- that really helps it stand out.

And the screen reader sees Understanding the Global Impact as the main title. And then we have our subheading of Objectives and then our sub-subheadings of Temperature, Melting Ice, Impact, Human. So it's reading that to the person using the device appropriately. So take a minute.

It does, Deborah, very good question. So when I come in here to Edit, I've made Objectives bold, right? So when I come in and look at the HTML, it's not only is it a Heading 3 but it's strong-- oops, which means that the screen reader is going to say that it's a subheading. And it's going to read it with emphasis with-- because it's bold.

So even down here, if I made something in the middle of a paragraph bold, it's going to change the inflection of the screen reader so that it reads it so that it sounds the way it looks. So if I made for both the environment and human society, so both of those are bold. So when the screen reader reads it, "to understand the implications these changes for both the environment and human societies," it's going to actually change its inflection. So bold and italic matter.

And here's a fun fact. Yes, we have bold, italic, and underline just like we do in Word. Should we use underline to visually pull things out? Does anybody say yes or no? No, thank you. And why not? Because when you're looking at a digital resource and you see something that's underlined, what do you want to do?

You want to click on it, right, because the underline is associated with being a link. So stay away from underlining anything because then people will try to click on it. And if it doesn't go anywhere, they're going to think your webpage is broken. So stick with bold, and italics, and color. OK, great. So hopefully you got those Heading 4's in there.

There's another thing that you can do to visually help it stay apart-- or, stand out. I'm going to just put my cursor anywhere in this paragraph. And what I can do on my three dots-- it's also emphasized. It is a-- it's EM, which actually stands for emphasize for italics. But it's just-- it reads it with a different way of emphasizing those words as they stand out. And some will actually say that it's emphasized.

So I'm going to come in here and I can either select the whole paragraph or I can just put my cursor anywhere in that paragraph because, remember, it's a block. It's going to format this for the entire block. And I'm going to come up here to my Increase Indent. And I'm going to increase the indent just a little bit. And, again, when I look at the HTML, here's my Heading 4 that's bold. Here's my paragraph. And it's giving it kind of like that indent padding.

So this is something that doesn't necessarily get read to the person with the screen reader. It's more of a visual. But it does help the visual in kind of chunking information. So I'm just going to come and increase and make my Heading 4's bold. And I did the quick keys of Control-B. But I can also come up here and click on the B.

And, again, when you're doing the indent, it does it for the entire paragraph so you don't have to select it. You can just put your cursor anywhere inside it. Oops, bold, make this indent. And without doing anything else-- nope, I don't want to change the heading. I want to increase the indent.

Without doing anything else, when I save this, visually, if you remember back to when we first opened this page, visually, it's much easier to kind of skim through this and know what's here without having to focus and really read it. So, visually, it helps. And then with the assistive devices, they're reading the HTML and it's going to convey the content in the structure that we have it.

Now we can make this even better by putting in images that are appropriate and all of that. But the one last thing I want to do-- please let me know if I'm going too fast. Remember our links. So we want this-- because right now our screen reader is going to read, for a comprehensive understanding of climate change, visit the United Nations dedicated page here, https://www.un.org/en-- and we've lost them, right?

So instead of putting the website here, I'm going to go ahead and highlight this website and I'm going to copy it. I can copy the link address or I can just copy it because it is the link address, either one. And I'm going to remove it, so I hit Delete.

And instead of saying, visit the United Nations dedicated page here, I'm going to get rid of the word here because I can select United Nations dedicated page, come up here to my hyperlink icon, and insert this external link so that it goes-- and I just pasted, so Control-paste or right click Paste, Control-V. I just pasted that long web URL so that when they come to this page, United Nations dedicated page is what's highlighted, so it's contextual.

So just by looking at it, we can see that if I clicked on the United Nations dedicated page, it's going to take me there. And my screen reader is going to read it, for a comprehensive understanding of climate change, visit the link, United Nations dedicated page. So they didn't get all of that garbledygook.

So if you wanted to put in something down here for websites, you just-- you type it in as you want them to read it. And then, say I wanted developing effective strategies to link somewhere else, I would select those words, click on the link up here, and have it link to an external link. Or maybe it's going to somewhere else in the course. But that's how you make those links accessible. So go ahead and make that change in that first paragraph if you're following along with me.

OK. Please let me know-- yeah. I do because it makes the sentence flow, right? You could also say, for a comprehensive understanding of climate change, visit the United Nations-- let's see what this says. Climate Action, "What is Climate Change?"

So I could even copy this title here, come back here and say, visit the United Nations information-- oops, oh, information on-- and then paste that-- so, what was it? "What is Climate Change?" So that was the name of the article.

And so then I would select What is Climate Change, and copy the URL, and then come back and make that link. You could do it either way. And notice that my Accessibility Checker came up here. This is great because adjacent links with the same URL should be a single link.

So either I can have the Accessibility Checker merge it so that it's just one link because, remember, the screen reader is going to read that whole thing and it's going to say, link, United Nations, blah, blah, blah, link, What is Climate Change, when, in fact, it's going to the same place.

So that-- it fixed it for me. And I might need to come in an fix my grammar. It's not going to fix my grammar for me. But it did make it so it's accessible, so much easier on the eyes.

Yes, avoid Click on or Click here. Because, again, if you have like five or six different websites that you're linking out to and you just put Click here and then listed the-- for all of them, the screen reader is going to list all of the-- sometimes it'll do like an index of all of the images-- or, all of the links on a page. And so they're just going to see a bunch of Click here and not understand which one they want to go to. So stay away from Click here or Link to because it already knows it's a link.

We know it's a link because it's blue and it's underlined. The screen reader is going to know-- or, the person listening to the screen reader, the screen reader actually says, because of the coding, link. So we don't want it to say link, Link to, right? So stay away from those kind of general terms, yeah. So that's structure. So really making an intentional decision on whether you're going to put in headings.

Here, I want to show you one thing here. So say I came down and I wanted my Conclusion instead of being a Heading 3 I want it to be a Heading 2. Let's see if it does it. I don't-- I'm trying to-- there we go. So notice that I have the Accessibility Checker. So you're heading level should not be skipped. So if you start out with 2, the next one needs to be 3. You can go back to 2 or you can go down to 4. But you can't go from 4 to 2.

So it needs to stay-- it's like skipping steps. So if you're climbing up the stairs, you're expecting people to skip steps, which-- or, coming down the stairs, they might trip, right? So think of it that way. That when you are creating your headings, they need to stay next to each other. So you can go from 2 to 3, and 3 to 4. You can also go from 3 back to 2. But don't skip them.

So it will warn you when you've skipped those levels. So we'll put this one back to 3 and this one back to 3 as well. But that's just what the Accessibility Checker will help you keep those in the right progression. OK, so with very little-- just going in and putting in our correct headings, paragraphs, whatever, it's already much easier to view.