(SPEECH)
[MUSIC PLAYING]

(DESCRIPTION)
Logo, OTAN. -- A white figure reaches up and out of a blue circle.

(SPEECH)
SPEAKER: OTAN, Outreach and Technical Assistance Network.

(DESCRIPTION)
Text, To lead California adult education in the integration of technology into the educational process, ultimately empowering learners to meet their academic, employment, and civic goals. Face-to-Face and Online Training. Teaching with Technology. Teachers' and Administrators' Digests. News Articles. Annual Technology and Distance Learning Symposium. Online Resources for Adult Education. Website, O.T.A.N. dot U.S. - Phone number, 916-228-2580.

Slide, OTAN Online. Text, Canvas Accessibility. Presenter: Dana Thompson, OTAN Subject Matter Expert. Email: d thompson at S.C.O.E. dot net. Social media handle: at techie thompson. Techie is spelled with an I E.

(SPEECH)
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

(DESCRIPTION)
Slide, Video Example. Text, Hashtag Caption This. A video player opens in the slide.

(SPEECH)
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]

(DESCRIPTION)
A man in a red shirt sits at a table and uses a laptop. A video plays on the laptop of a man in a suit giving a speech.

The video flashes to black with illegible text on it, then returns.

The man watching the video signs. Subtitles, Seriously? Are you kidding me? No captions? Sigh.

He faces us and shakes his head, then signs to us. Subtitles, This shows lack of accessibility. I'm genuinely concerned, as Internet is growing at a rapid pace, and the Deaf community is lagging even further back, because we're lacking access to information.

He puts his hands on his hips and shakes his head again, then signs. Subtitles, CNN is an excellent source for global news, however they do not caption their videos at all. Greater Los Angeles Agency on Deafness (GLAD) is currently in a lawsuit with them. There's another example, with Netflix, as they now use streaming to view videos online and many of them are not captioned. National Association of the Deaf (NAD) filed a lawsuit against Netflix for this. It's not just the two. There are many more examples, including sports. Would you like to see more examples? There you go!

He leans back and spreads out his hands. The video fills with dozens of logos of TV networks, streaming services, and news agencies. He swipes them aside and signs. Subtitles, See that? There is that many!

(SPEECH)
[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.

(DESCRIPTION)
She returns to a still shot in the video with the logos.

(SPEECH)
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

(DESCRIPTION)
Slide, Why Does Accessibility Matter? A quote from ChatGPT, 1.28.24.

(SPEECH)
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.

(DESCRIPTION)
Slide, Web Accessibility. Text, Web Accessibility Includes: Screen reader software, enables blind individuals to hear online content, promoting independence and timely access. Assistive devices, help those with motor disabilities navigate digital content, ranging from simple mouth wands to sophisticated eye-tracking software. Captions and transcripts, are essential for deaf or hearing-impaired users to access multimedia content. Structured and flexible web content, greatly assists individuals with cognitive disabilities.

(SPEECH)
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.

(DESCRIPTION)
Slide, Disability Categories. Text, Each category requires deliberate strategy in content design. (WebAIM). Four icons of an eye crossed out, an ear crossed out, a hand, and a brain. Text, Visual. Blindness, low vision, color-blindness. Auditory. Deafness and hard-of-hearing. Motor. Inability to use a mouse, slow response time, limited fine motor control. Cognitive. Learning disabilities, distractibility, inability to remember or focus on large amounts of information.

(SPEECH)
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

(DESCRIPTION)
She opens Google in a browser and types WebAIM in the search bar. The first link that comes up is for WebAIM: Web Accessibility in Mind. She clicks on the link and the site opens. It has a menu at the top, a search bar and two buttons on the left, and below, links with descriptions to various pages and a menu on the right.

(SPEECH)
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.

(DESCRIPTION)
She returns to the Disability Categories slide.

(SPEECH)
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.

(DESCRIPTION)
Slide, Web Content Accessibility Guidelines (W.C.A.G.) 2.1 and 2.2. Text, POUR. Perceivable, Operable, Understandable, Robust.

(SPEECH)
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.

(DESCRIPTION)
Slide, Building Content in Canvas. Text, Strategies for building accessible content in Canvas. Structure. Chunking information, using headings, using lists, using color. Images and Media. Alt text, captions, providing equivalents to content. Links. Contextual links instead of actual links. Tables. How tables work with assistive technology. Data versus layout.

(SPEECH)
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

(DESCRIPTION)
She switches to the WebAIM website.

(SPEECH)
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.

(DESCRIPTION)
She types into the search bar on the upper left. Results appear below. She selects the first result, Contrast Checker. A page loads with color sliders for foreground and background color and contrast ratings.

(SPEECH)
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.

(DESCRIPTION)
She returns to the slide.

(SPEECH)
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.

(DESCRIPTION)
Slide, Structure. Text, How does structure play a role in accessibility? On the right are two screenshots of pages with bold, larger font headers, short paragraphs, and bullet lists. The bottom screenshot includes some blue font.

(SPEECH)
So we're going to start out with structure. So, like I said, chunking information for ease of readability. So

(DESCRIPTION)
She rapidly moves forward through slides, then comes back.

(SPEECH)
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.

(DESCRIPTION)
Text, Ensure content follows a linear logical layout. Proper use of bullets and numbering. Using color effectively. Compliment information with images and video. Slide, Images and Media. Text, How does structure play a role in accessibility? Alternative text provides a description of an image in the context of a specific document. The same image on two different pages may have very different alt text, depending on why the image is provided. Captions: All videos should have closed captioned text in the video itself or have an attached transcript for learners to review. Important: It is important to be aware of when content is being provided in only one medium. On the right, a drop down Insert menu has an arrow pointing right to an Image Options pop-up to embed an image. The top field is alt text.

(SPEECH)
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.

(DESCRIPTION)
Slide, Links. Text, Proper hyperlinks are important! Most screen readers read the full U.R.L. aloud so create the links with descriptive text instead. Text should provide an indication of where the link goes. Beware of using "Click here" or "Link" - these are not descriptive and are redundant when read by screen readers. Imagine five links on a page, all called "Click here." Tip: Simplify your course navigation bar so students don't see so much "noise." On the right is the text, This is the OTAN webpage on accessibility. The phrase, OTAN webpage on accessibility, is blue and underlined. A red x is beside the text, Click here for the OTAN webpage on accessibility. The phrase, Click here, is blue and underlined. A red x is beside the text, Visit the OTAN webpage on accessibility at https colon slash slash O.T.A.N. dot U.S. slash Resources slash home slash accessibility Resources. The link text is blue and underlined.

(SPEECH)
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.

(DESCRIPTION)
Slide, Tables. Text, Tables in Canvas. Screen readers read tables from left-to-right, and then top-to-bottom. Generally, tables should be reserved for tabular data, and not layout. Captions are important because they insure that a label for what the table contains will always be associated with the table. If you do use a table for visual layout: Keep it simple: two or three columns, max. Don't include headers: headers should be used for labeling similar data. In the top right of the slide is a video player.

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

[VIDEO PLAYBACK]

(DESCRIPTION)
She plays the video. It displays a page with two tables on it, each with three columns and several rows.

(SPEECH)
- 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.

(DESCRIPTION)
Slide, Just a few of the accessibility features in Canvas: Skip link. Course nickname and color. R.C.E. and SpeedGrader keyboard shortcuts. Equation Editor. Accessibility Checker. Quiz timer on slash off. High Contrast U.I. -- On the right area screenshots and buttons that read, Start Link Validation. Immersive Reader. Use High-contrast U.I.,

(SPEECH)
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.

(DESCRIPTION)
She opens her Canvas course page in the browser. It has a menu on the top and on the left. On the right, there is a large title, then the rest of the text, with a few blue links. She scrolls down the un-chunked content.

(SPEECH)
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.

(DESCRIPTION)
She clicks Edit in the top right and copies the text in the editor.

(SPEECH)
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.

(DESCRIPTION)
She opens Google in the web browser, selects Google Docs, and opens a new file. She pastes in the website data and types demo content in the file name field at the top left.

(SPEECH)
And this is going to be our demo content. And I will share this so that everyone with the link can view it.

(DESCRIPTION)
She clicks Share in the top right and selects Anyone with this link.

(SPEECH)
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.

(DESCRIPTION)
In Canvas, she demonstrates clicking Edit in the top right and then selects the text box in the middle, the content editor, that she originally copied from.

(SPEECH)
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,

(DESCRIPTION)
She clicks an icon on the bottom right of the content editor, which has a slash in between a less than and greater than symbol. The text in the content editor becomes marked up with HTML tags.

(SPEECH)
if you don't know HTML, that's OK. What you

(DESCRIPTION)
She highlights a less than, p, greater than tag in the top left.

(SPEECH)
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

(DESCRIPTION)
She clicks the carats icon and switches back to text. Then she clicks View on the menu above the content editor and mouses over the HTML editor.

(SPEECH)
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,

(DESCRIPTION)
She highlights the top line, Understanding the Global Impact of Warming Climates, increases the font size, makes it bold, and makes it green, using the buttons above the content editor.

(SPEECH)
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,

(DESCRIPTION)
She switches to the HTML editor and highlights the same section, with only a p tag.

(SPEECH)
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

(DESCRIPTION)
She highlights the title and clicks an icon in the middle above the content editor that looks like an eraser and a slanted capital letter T. The text returns to normal.

(SPEECH)
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.

(DESCRIPTION)
She highlights the title again, then clicks the dropdown in the tools above, to the right of the font size, which currently displays Paragraph.

(SPEECH)
And we're going to tell it that instead of a paragraph, it's going to be a Heading 2.

(DESCRIPTION)
She selects Heading 2 from the drop down. She indicates the Heading 3, 4, etc. below Heading 2. They get smaller.

(SPEECH)
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.

(DESCRIPTION)
She switches to HTML editor, and the p tag is replaced by an h2 tag.

(SPEECH)
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.

(DESCRIPTION)
She does so in the content editor.

(SPEECH)
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?

(DESCRIPTION)
She changes the heading to pale pink.

(SPEECH)
And it's-- I can see it. But look what happened down here.

(DESCRIPTION)
She indicates an icon at the bottom right of the content editor, with a person inside a circle. It has a superscript number 1 above it.

(SPEECH)
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

(DESCRIPTION)
She clicks the icon and a pane slides in from the left titled, Accessibility Checker. It lists the Issue and has a color picker with the text, Change font color.

(SPEECH)
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

(DESCRIPTION)
She copies the color and goes to WebAIM's Contrast Checker on the browser.

(SPEECH)
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.

(DESCRIPTION)
The color picker displays R.G.B.A. , and four numbers.

(SPEECH)
I don't know it. Here, I think I can do it here.

(DESCRIPTION)
She returns to the content editor and clicks the font color icon, then clicks the paint palette at the bottom right. Another color picker opens with fields for R, G, B, and hexadecimal. She chooses a light pink and copies the hexadecimal.

(SPEECH)
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.

(DESCRIPTION)
The three tests on the WebAIM all display Fail.

(SPEECH)
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?

(DESCRIPTION)
Back in Canvas, she chooses a dark red on the Accessibility Checker panel color picker, then clicks the blue Apply button underneath it on the right. Balloons appear in the Accessibility Checker.

(SPEECH)
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.

(DESCRIPTION)
She changes the header to dark green and then indicates the next line, Objectives.

(SPEECH)
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

(DESCRIPTION)
She highlights Objectives and uses the dropdown above to choose Heading 3. She clicks bold.

(SPEECH)
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.

(DESCRIPTION)
She indicates the paragraphs below Objectives and scrolls down.

(SPEECH)
So I'm just going to come through here and I'm scanning. Here's my conclusion.

(DESCRIPTION)
Near the bottom is the line, Conclusion.

(SPEECH)
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

(DESCRIPTION)
She highlights Conclusion and uses the dropdown to choose Heading 3. Below the conclusion paragraph is the line, Next Steps, which she also makes Heading 3.

(SPEECH)
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.

(DESCRIPTION)
She clicks the blue Save button in the bottom right and a blank page appears.

(SPEECH)
Already-- hello?

(DESCRIPTION)
She refreshes and the newly chunked page appears.

(SPEECH)
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.

(DESCRIPTION)
She returns to the Google Doc on the web browser.

(SPEECH)
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.

(DESCRIPTION)
She searches Google for 2 minute timer but misses the R in timer.

(SPEECH)
But I want my Google timer. So we're going to put an r on the end of that. Here's my Google timer.

(DESCRIPTION)
She adds the R and searches again. A timer set into the search results appears, set to 2 minutes, and begins to count down. She enlarges it to full screen, then back to the browser.

(SPEECH)
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.

(DESCRIPTION)
She goes to the Google doc and scrolls through it.

(SPEECH)
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?

(DESCRIPTION)
She chooses the outline format from the menu bar in the Google Docs editor. An indented capital A appears at the top of her document.

(SPEECH)
So maybe this is my title. And

(DESCRIPTION)
She copies the title to A and enters. On the next line, a capital B appears. She indents it and it becomes a lowercase a. She copies Objectives to that. She enters and types Conclusions after the lowercase b, then enters and types Next Steps after the lowercase c.

(SPEECH)
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.

(DESCRIPTION)
She returns to Canvas, to the loaded page chunked so far. She highlights the title of the page, Climate Change Demo.

(SPEECH)
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

(DESCRIPTION)
She clicks edit. In the content editor, she indicates the Header 2 line.

(SPEECH)
would be your B, and

(DESCRIPTION)
Header 3 line.

(SPEECH)
then we have our information in here that might be C. And then

(DESCRIPTION)
The content.

(SPEECH)
this would be Roman numeral I. And then the conclusion would go back to B. So we're creating our outline. But

(DESCRIPTION)
She switches to the HTML editor and scrolls down, highlighting the header tags.

(SPEECH)
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.

(DESCRIPTION)
She returns to the content editor and highlights lines below Objectives.

(SPEECH)
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

(DESCRIPTION)
She types a 1 and a 2 in front of the lines. A number 1 appears on the Accessibility Checker icon at the bottom.

(SPEECH)
a look at my little Accessibility Checker. It's now telling me that I have an issue. So

(DESCRIPTION)
She clicks the icon and the panel slides in.

(SPEECH)
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.

(DESCRIPTION)
She switches to the HTML editor. The lines with 1 and 2 are within a p tag.

(SPEECH)
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

(DESCRIPTION)
She returns to the content editor, deletes the 1 and 2, and highlights both lines.

(SPEECH)
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

(DESCRIPTION)
She clicks the more icon above the top right of the content editor, and the second row of icons appears. She chooses the dropdown arrow on the second icon, which displays list types.

(SPEECH)
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,

(DESCRIPTION)
She chooses the bulleted list and both objectives are indented, with only one bullet on the top line.

(SPEECH)
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

(DESCRIPTION)
She does so, then switches to the HTML editor. The lines are now marked with a U.L. tag, and each item is marked with an L.I. tag.

(SPEECH)
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.

(DESCRIPTION)
She returns to the content editor and scrolls down.

(SPEECH)
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.

(DESCRIPTION)
Under Next Steps, she highlights the three lines and chooses the numbered list icon from above the content editor. They indent with number 1 on the first line and she adds 2 and 3.

(SPEECH)
And, again, I just have to hit Enter for those to automatically come up.

(DESCRIPTION)
She highlights and deletes line 2, and line 3 moves up and changes to 2.

(SPEECH)
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

(DESCRIPTION)
She clicks the blue Save button on the bottom right and the newly chunked and listed page loads.

(SPEECH)
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

(DESCRIPTION)
She clicks Edit on the top right and scrolls through the content paragraphs in the content editor.

(SPEECH)
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.

(DESCRIPTION)
She clicks before the word Temperature at the beginning of the second paragraph after the Objectives list, then scrolls down to just before Conclusion and shift clicks to highlight all the paragraphs in between.

(SPEECH)
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,

(DESCRIPTION)
There is only one row of icons above the content editor. Instead of clicking the more icon on the right, she clicks Format on the top tab menu and scans the dropdown.

(SPEECH)
Font Sizes, Fonts, Insert. Where's my lists? Tools-- am I just not seeing it?

(DESCRIPTION)
She rapidly mouses over each tab and scans their dropdown menus.

(SPEECH)
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.

(DESCRIPTION)
She expands the icon menu to two rows and chooses a list type. The highlighted paragraphs indent with a capital letter before each one. She clicks the Save button and loads the updated page.

(SPEECH)
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

(DESCRIPTION)
She goes back to the content editor and selects the list of paragraphs.

(SPEECH)
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

(DESCRIPTION)
She does so, and the letters vanish. The paragraphs un-indent.

(SPEECH)
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

(DESCRIPTION)
She highlights the intro phrase in the top two paragraphs and bolds them.

(SPEECH)
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

(DESCRIPTION)
She indicates the top heading and the objectives for heading 2 and 3, then scrolls down.

(SPEECH)
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.

(DESCRIPTION)
She moves the content of the paragraph after the bolded phrase, Temperature Rise, down a line, then highlights the bolded phrase and uses the dropdown menu next to font size to assign it heading 4.

(SPEECH)
And so I can go through and do that.

(DESCRIPTION)
She moves through the document, shifting the paragraphs down and assigning heading 4 to their beginning phrases. Instead of highlighting the whole phrase, she clicks the cursor in the phrase and selects heading 4, and it still works.

(SPEECH)
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.

(DESCRIPTION)
She places the cursor in a paragraph and makes the whole thing header 4, then undoes it.

(SPEECH)
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.

(DESCRIPTION)
She finishes the final paragraph in the content section. The cursor is placed in the line in between the paragraph and the leading phrase and the whole paragraph becomes heading 4. The Accessibility Checker icon puts up a superscript 1, which she clicks on to open the panel.

(SPEECH)
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.

(DESCRIPTION)
She clicks the blue Save button at the bottom right and loads the newly further chunked page. She scrolls through it, then mouses over the first two of the paragraphs, which have headers she bolded earlier.

(SPEECH)
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

(DESCRIPTION)
She clicks Edit in the top right to return to the content editor.

(SPEECH)
when I come in here to Edit, I've made Objectives bold, right? So

(DESCRIPTION)
She switches to the HTML editor. The Objectives line has both an h3 and a strong tag.

(SPEECH)
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

(DESCRIPTION)
She scrolls down to the content paragraphs.

(SPEECH)
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

(DESCRIPTION)
She returns to the content editor and bolds the words environment and human in the second objective line.

(SPEECH)
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.

(DESCRIPTION)
She indicates the first paragraph under the objectives, Temperature Rise. She clicks the right three-dot icon to open the second row of icons above the content editor.

(SPEECH)
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.

(DESCRIPTION)
She highlights the first paragraph, then clears the highlight and clicks in the paragraph.

(SPEECH)
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

(DESCRIPTION)
She selects the third icon on the second row, increase indent, and the paragraph moves right.

(SPEECH)
I'm going to increase the indent just a little bit. And,

(DESCRIPTION)
She switches to the HTML editor. The paragraph's p tag now has a style added of padding-left, 40 pixels.

(SPEECH)
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.

(DESCRIPTION)
She formats all the content paragraphs the same.

(SPEECH)
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.

(DESCRIPTION)
She saves and loads the newly chunked, indented page, and scrolls down and up.

(SPEECH)
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.

(DESCRIPTION)
She clicks Edit and returns to the content editor. She indicates the paragraph under the two objectives, above the Temperature Rise section. It has a blue, underlined link in it.

(SPEECH)
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.

(DESCRIPTION)
She highlights the website, right clicks, and clicks copy on the menu that pops up.

(SPEECH)
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

(DESCRIPTION)
The link disappears.

(SPEECH)
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

(DESCRIPTION)
She highlights the phrase, United Nations dedicated page, then selects an icon in the middle above the content editor, with a chain link on it. An Insert Link window pops up with the highlighted text in the Text field, and a blank Link field. She pastes the copied link into the Link field. She clicks Done and, in the content editor, the United Nations phrase is now a blue, underlined link.

(SPEECH)
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.

(DESCRIPTION)
She scrolls to the bottom.

(SPEECH)
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.

(DESCRIPTION)
She saves and loads the page, then scrolls down.

(SPEECH)
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.

(DESCRIPTION)
She clicks the link and the web page, United Nations, Climate Action, What is Climate Change? page opens in a browser. She highlights the title, What is Climate Change? and returns to Canvas. She clicks edit and rewrites the link sentence.

(SPEECH)
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.

(DESCRIPTION)
She copies the URL from the browser and pastes it into the link pop-up in the Canvas content editor.

(SPEECH)
You could do it either way.

(DESCRIPTION)
She clicks done. The Accessibility Checker icon displays a superscript 1. She clicks on it to open the panel.

(SPEECH)
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.

(DESCRIPTION)
She edits the sentence so that the link phrase is, United Nations What is Climate Change, saves, and loads the page.

(SPEECH)
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.

(DESCRIPTION)
She clicks edit and opens the content editor. She scrolls down.

(SPEECH)
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.

(DESCRIPTION)
She clicks on Next Steps and changes it to heading 4 and then clicks on Conclusion and attempts to set it as a heading 2. The Accessibility Checker gets a superscript 1 and she opens the panel.

(SPEECH)
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.

(DESCRIPTION)
She returns Conclusion and Next Steps to heading 3 and saves to load the page.

(SPEECH)
OK, so with very little-- just going in and putting in our correct headings, paragraphs, whatever, it's already much easier to view.

I'm going to come over here to my next page.

(DESCRIPTION)
She clicks Next at the bottom of the page. The next page that opens is titled, Climate Change Demo: Structure. It is a wall of text with no structure, simply broken into lines and paragraphs, all the same font and indentation. There is a bar graph in the middle, a picture, and a video player.

(SPEECH)
So, again, we did the structure. If you think back of to what we were doing. But in this one, I've put in some images, right, and some media. So my structure is not there. But I do want to talk about media.

(DESCRIPTION)
She clicks on Edit and scrolls to the bar graph in the content editor. She clicks on it, and it outlines in blue.

(SPEECH)
So this is an image.

You can-- when I click on it, you can see it's an image. When you put in your images, something like this is very helpful in content because it's showing the temperature rise. And so I'm going to come back to my other one. And we're going to put in these images in the right place.

So

(DESCRIPTION)
She returns to her chunked page and clicks Edit. In the content editor, she scrolls to the Temperature Rise paragraph. She presses enter at the bottom to go to a new line and clicks the beginning of the line.

(SPEECH)
on my Temperature Rise, I'm going to include an image here that's going to help convey the information. So I'm going to put my cursor where I want it to be and then click on my image. And I can either upload an image or I can find an image that's already in the course. Since it's on that other page, I know this image is already in my course. So I'm going to go there.

(DESCRIPTION)
She clicks the image icon on the top right of the content editor, beside the link icon. She chooses Course Images from the dropdown. An Add panel opens on the right. She selects the bar graph, the second of the image choices in the panel.

(SPEECH)
And this is the image that I want.

(DESCRIPTION)
The graph loads in the content editor and the Accessibility Tracker gets superscript 1. She clicks it to open the panel. It holds the image's name in a field.

(SPEECH)
So notice that automatically my Accessibility Checker tells me that there's something wrong. And that's because when I put this image in, I haven't told the screen reader what the image is about. So if I were to leave it like this with just its name, so that's the name of the image. That's how it was saved. When I come in here, the screen reader is going to read it down here.

(DESCRIPTION)
She goes to the HTML editor and scrolls to find the image. It is marked with an image, I.M.G., tag, which includes I.D. source, S.R.C., and alt values.

(SPEECH)
Here is the information for the image. So IMG for image, gives it an ID. The SRC is the location. And the alt, this is what the screen reader sees to read to the person who is using the assistive devices. So it's going to say, an image titled-- and then read this. This tells

(DESCRIPTION)
Text, global underscore gis underscore 2021 underscore chart dot png.

(SPEECH)
them nothing, right?

So we want to tell the screen reader what to say when it comes up to the code in-- for this image. So when I click on the image itself, I can come up here to Image Options.

(DESCRIPTION)
She returns to the content editor, clicks the image, then clicks an Image Options button that appears over it. A panel opens on the right. It has a field for alt text at the top.

(SPEECH)
And this is where I'm going to put in the alt text. And so, again, think of a tweet. We don't want it to be too long, so under 120 characters. If it's over that, then what you want to do is consider putting that information right underneath the image.

So if it were to be 120 characters or less, this is going to be the 221 ties 200, 2018-- 2021 ties 2018 for the sixth warmest year on record. And then I'm going to put, actually at the beginning, a visual graph that shows 2021 ties 2018 for the sixth warmest year on record, OK?

So that's going to be under the 120 character limit. If I wanted to put more information because this is pretty important-- let me click on Done. And my little warning goes away. But

(DESCRIPTION)
She types the alt text information, clicks the blue Done button in the bottom right of the panel, and the panels slides away. The Accessibility Checker superscript vanishes.

(SPEECH)
if I wanted to put more in there, I would click after the image and hit Enter and then maybe format it so it's italic. And then I would put the information that I wanted.

(DESCRIPTION)
In the content editor, she clicks below the graph in a new line, clicks the Italic icon above the content editor, then types.

(SPEECH)
So this graph shows the information on how the year 2021 tied 2018 for the sixth warmest year on record. The global temp-- or, whatever. So it's more than 120. So I'm going to put the information, kind of set it apart, so that it is clear that it's describing the image because the screen reader will pick that up as well.

But

(DESCRIPTION)
She switches to the HTML editor. The alt text in the I.M.G. tag now matches what she typed in the Accessibility Checker panel.

(SPEECH)
what the screen reader now is going to pick up for this image is it's going to come to this coding right here and instead of saying, image, and then read the image name, which made no sense, it's going to read this, visual graph that shows 21-- 2021 ties 2018 for sixth warmest year on record.

Much more context for the person who's using a screen reader to access this. Because it cannot read, even though there's a title in the image, the screen reader can't read that because it's a picture. So we want to make sure that we provide that information in either the alt tag or in something underneath the picture itself.

(DESCRIPTION)
She scrolls down to the Human Health Risks paragraph and clicks in a line below it. She clicks Insert, Image, Upload Image and a file manager opens.

(SPEECH)
So if I scroll down here to the other one, I think it was Melting Ice-- no, Human Risks, I have an infographic that I've already uploaded. But let me see if I can do this. Because when you upload an image-- so this is an image that's on my computer. Let's see if I can find it. I did it yesterday so it should be here, maybe not. Maybe I did it on a different computer. Anyways, we're just going to say this is it.

(DESCRIPTION)
She inserts a random image from her file manager. It opens in an Upload Image window with an alt text box below.

(SPEECH)
It might-- it's not, but we're just going to say it is. So here's the image. And then you can put the alt text here before you even upload it. And the nice thing about doing that, I believe that if you use that image in multiple places, the alt text will go with it, whereas if you just upload it without putting this information in there, you have to put the alt text in every time you put the image in, or indicate that it's decorative.

Now, when would you use a decorative? You would use a decorative if you were uploading, say, icons.

(DESCRIPTION)
She closes out the window and returns to the content editor, then goes to Insert, Image, Upload Image again to open her file manager.

(SPEECH)
So if I came out-- I think I have some icons. I don't. I got a new computer and so my icons are not there. So say, yeah, so no icons.

But if you wanted an icon, icons are nice because every time you see a camera, that means you're going to watch a video. Every time you see a globe, that means you're going to look at something on the internet. It helps convey. But sometimes you just want to mark decorative so that the screen reader skips over that image. It's like it's not even there.

(DESCRIPTION)
She clicks the Decorative Image check box in the Upload Image window. She closes the window and returns to the content editor.

(SPEECH)
So knowing that it's in the course already, I'm going to go to course images and find that infographic. Here it is, Extreme Weather Change.

(DESCRIPTION)
She clicks the images icon above the content editor and chooses the Course Images, then selects the first image, an infographic.

(SPEECH)
So, again, my Accessibility Checker has told me that this is-- there's something wrong. So when I click on it, it's saying, the alt text is the name of a picture.

So

(DESCRIPTION)
She types in the alt text.

(SPEECH)
I can now change this to say, Infographic on how climate change impacts health and then click on Apply. So where do you get those icons? So you can make them.

(DESCRIPTION)
She opens Google Drive in her web browser. In the drive menu, she chooses More, then mouses over Google Drawings.

(SPEECH)
If I were to come into my Google Drive and this is-- I love doing this. If I come into my Google Drive and I want to create a new icon, I'm going to create a Google Drawing. You can do it as a Google Slides as well if you're more familiar with Google Slides.

(DESCRIPTION)
She clicks Google Slides on the menu and a new slide presentation opens. She clicks the Layout tab on the icon menu above and chooses the Blank option.

(SPEECH)
Just don't do it with a Doc because Google Docs don't allow you to put things in specific places. So I'm going to make it so there's no layout. And I'm also going to change it under Page setup so that instead of a screen, I want it to be an icon, which is usually about 1 inch by 1 inch.

(DESCRIPTION)
She clicks File in the tab menu, then Page Setup, and sets the size.

(SPEECH)
And it looks really big because it is fit. But if I go to 100%, that's how big it is.

(DESCRIPTION)
She clicks 100% on the display icon and the slide becomes a small square in the middle of the background.

(SPEECH)
And so now I'm going to make it a little bit bigger so that I can see it. I can put in here, say I want to insert an image of a globe icon.

(DESCRIPTION)
She clicks on the Image icon and chooses Search the net. She types globe icon in the search bar and chooses the second option that pops up. It fills the small slide.

(SPEECH)
I can insert that in my document-- or, in my Google Slide.

And then what I'm going to do-- this is a whole other webinar, by the way. I'm going to down that-- download that as a picture, so either a JPEG or a PNG, either one.

(DESCRIPTION)
She clicks File, Download and chooses the JPEG option. She returns to Canvas and scrolls to the top of the content editor.

(SPEECH)
And then I can come back to my Canvas page and say I want to put that, understanding the global impact, I want that icon to be up here at the top.

Now I can insert that image and pull it up from my computer.

(DESCRIPTION)
She clicks the cursor at the top of the page and clicks the image icon. She chooses to upload from her computer and picks the globe JPEG from her file manager. She clicks the decorative check box and clicks the blue Submit button on the bottom right. The globe appears in the content editor.

(SPEECH)
Here's the globe. And I'm going to make this so that it's decorative so it's not going to have an alt tag. Because it really-- it's just decorative. It doesn't pertain to the content at all. And so now-- and I can even make it smaller. Now I have a little icon there.

(DESCRIPTION)
She clicks on the globe, then drags the corner in to shrink its size.

(SPEECH)
Well, if you shrink it-- so think of this if it's 1 by 1, just for number sake. I don't know exactly. It's going to be, say, 100 pixels, right, or the size is going to be like 1 kilobyte. But if you do it the size of a slide, which is like 1,600 by 1,600, it's a larger file size. And so it's going to take longer to load for our students who have slow bandwidth. So, yes, I could put this in as a really large picture and then resize it by hand.

But if I don't need it to be that big, I'm going to make it small so that it's not-- doesn't take so long to load. Yeah, good question. It still was a little bit too big for me so-- but you can-- resizing it a little bit is no big deal. You can never make a picture bigger once you've put it on a webpage. You can always make it smaller. Making it bigger just makes it blurry.

(DESCRIPTION)
She clicks Insert in the tab menu above the content editor, then chooses Icon Maker Icons from the drop down.

(SPEECH)
The other way you can add icons is to insert, and this is fairly new, an icon maker. And you can create one right here in Canvas.

(DESCRIPTION)
A Create Icon panel slides in on the right.

(SPEECH)
And it will be the right size. No, because Google Docs, you can't resize like that. It's much easier to do it with either Slides or Drawing.

And when you're creating things in Google Doc, it's a Word document so there's no way to just easily put things where you want them.

(DESCRIPTION)
In the Name field in the panel, she types link. She clicks the Description checkbox, then opens the Icon Shape dropdown.

(SPEECH)
But this Create Icon is really neat. I can put on here link or something. And then if I don't want it to ever have alt text. And then here's where you can say, oh, it's going to be a triangle.

I

(DESCRIPTION)
She clicks the Icon Size dropdown, then the color picker, then the Outline Size dropdown.

(SPEECH)
want it to be small. The icon color, we're going to make it green. The outline size, you can make it have an outline and then put in the text. And

(DESCRIPTION)
She types in the Text field, then clicks the Text Positions dropdown.

(SPEECH)
so this is going to be Contact Us or something like that. So if you have-- and then where you want the text. So maybe I want the text to be on the bottom third.

(DESCRIPTION)
She clicks Cancel and closes the panel.

(SPEECH)
So it's a little restrictive but you can do some pretty easy icons in there. It's like making a button but right inside Canvas. I'm a little pickier so I tend to make mine elsewhere and upload. But that's an easy way to do it as well. But, again, because it's an icon, it doesn't have any context to the content necessarily. Mark it as decorative. So that is decorative.

Now I'm going to show you another trick. And this is where if I wanted maybe my How Climate Change to be on the left and my text to be next to it on the right, a lot of people will put in a table and do that. But we want to avoid using tables for layout. And so what I can do is I can click on the image so that it is selected and say I want my image over here on the right.

I'm

(DESCRIPTION)
She shrinks the image size to roughly half the width of the content editor. Then, she clicks the three dots icon above the content editor to open the second row of icons and clicks the far left icon.

(SPEECH)
going to come over here to my alignment. And when the image is actually selected, I can align the image to the right. And it puts the text automatically wrapping it to the left. And

(DESCRIPTION)
She chooses Right Align. The image moves to the right of the content editor and the text fills in on the left.

(SPEECH)
so then I don't have to use a table. So, yes, and because the image is big, it wrapped too. But that-- you decide whether it's OK or not. And that way, you avoided using a table.

And if I wanted it not to wrap, I would just click on that again and click on left alignment again to unwrap it. Now it's on the right. There we go. I had to do it twice. So it's either, if you think about Word, it's either inline or it's wrapped. So the image is on the right and the text is on the left or vice versa. But it allows you to avoid using tables for that kind of visual layout.

(DESCRIPTION)
She undoes the right alignment, then clicks Save and loads the new page with the bar graph and infographic in among the chunked text.

(SPEECH)
OK, now I'm going to cancel-- actually I'm going to save this because this is our-- the one that we did all the formatting on. And when I'm looking at it, notice that the image is there and this image is over here. And so visually, it's not impacting me at all. But the screen reader is reading those alt text. So that's real important for images.

Let's take a look at this video here.

(DESCRIPTION)
She Clicks Next to go to the second page and scrolls down to the embedded video.

(SPEECH)
So we want to put in media, Yes, that's a great question. You

(DESCRIPTION)
She returns to the previous page and clicks Edit, then clicks on the globe icon in the content editor and indicates the link icon above.

(SPEECH)
can do an icon, or an image, or whatever. Basically what you're going to do is click the icon itself and then have it either link out somewhere or have it link to somewhere else in the course.

So instead of highlighting text like we did here and making it a link, you're actually selecting the image so it has the, I call them, handlebars around it and then choosing it to link somewhere. And then it becomes a button. So the difference between an icon and a button is that a button is a clickable icon. Yes. Excellent, OK.

(DESCRIPTION)
She returns to the page with the embedded video and clicks Edit. She scrolls down to the embedded video in the content editor. She clicks the Watch on YouTube at the bottom left of the video.

(SPEECH)
So this is-- I'm coming into the next page. And I'm going to come in here to edit. So this is an image-- I mean, a movie out on YouTube, right? So I'm going to click on Watch on YouTube because a couple of things you have to keep in mind. When you're looking at a media on YouTube and you have the CC, the closed caption here, notice that it says it's unavailable, right?

(DESCRIPTION)
The video opens in a web browser on YouTube. She mouses over the CC in the bottom right, which is grayed out. Pop-up text reads, Subtitles slash closed captions unavailable.

(SPEECH)
So if it's unavailable, that means it's not accessible to our viewers who are hearing impaired. So what you need to do is come down here and in some of these, when you click on this gray area, there is a transcript down here. But this

(DESCRIPTION)
She expands the gray video information area below the video. She scrolls through it.

(SPEECH)
one doesn't seem to even have that, right? And so if it did have a transcript, you could click on the transcript button and it would show up over here.

(DESCRIPTION)
She indicates the top right beside the video.

(SPEECH)
But this looks like it doesn't even have that.

So one of the tricks I've learned is that I will have-- and let me see if I can resize my window so that this will make sense. So I'm going to come back over here and I'm going to create a new Google Doc.

(DESCRIPTION)
She goes to Google Drive in a different browser and creates a new Google Doc from the menu.

(SPEECH)
And I'm going to have both of these open.

(DESCRIPTION)
She makes each browser half width and puts them side by side. She scans through the dropdown menus in the tab menu at the top.

(SPEECH)
And I'm going to use Google's tool.

And now I have to find it, Voice typing, OK? So I believe that's under Edit. So if I come here to-- nope, it is under all these three-- under one of these menus. But you're going to find the voice typing, which is Control-Shift-S.

(DESCRIPTION)
In the dropdown menu under the ellipse icon, she chooses Voice Typing. A microphone icon appears in the document.

(SPEECH)
And I'm going to click it and play the video.

[VIDEO PLAYBACK]

(DESCRIPTION)
She clicks the icon. It turns orange. She then plays the video in the other browser window. On the Google Docs window, a pop-up reads, docs dot google dot com wants to Use your microphone. She clicks, Allow this time. Text appears in the Google Doc following the speaker in the video. It is slow and inaccurate. She stops the playback and voice writing.

(SPEECH)
- Mentioned artificial intelligence. And the result is tools to make crops better able to adapt to and potentially mitigate the climate emergency. My next guest is the founder and--

[END PLAYBACK]

DANA THOMPSON: So some reason why it's not-- but this is one way where you can capture without having to transcribe it yourself. There are other tools out there. And my point being-- let's see if we can try this again.

[VIDEO PLAYBACK]

(DESCRIPTION)
The microphone picks up her speech and text, See if we can try this again, appears in the Google Doc. She plays the video again. The Voice Writing does not pick it up.

(SPEECH)
- Executive Director of Triple Helix. It's a nonprofit building awareness of the role--

[END PLAYBACK]

DANA THOMPSON: Yeah, so that, for whatever reason, it's because I'm trying to do this in-- on the fly. But somehow grab the content if it's not provided to you. So let me come in here and search for pandas from National Geographic.

(DESCRIPTION)
On the YouTube search bar, she searches for pandas from National Geographic. Several result videos come up. She expands the YouTube window and plays one of the videos.

(SPEECH)
Here we go. And I'm going to make this bigger so we can see it. So when you're looking at videos--

[VIDEO PLAYBACK]

- If there's one animal that--

[END PLAYBACK]

DANA THOMPSON: And this one does have closed captions, right? So I can turn that on or off. So then you don't have to worry about it because it's already accessible. But if it doesn't have closed captions, and I clicked on this gray area, see, this one does have a transcript, whereas the other one didn't. I can

(DESCRIPTION)
She indicates the CC button on the lower right of the video, which is not grayed out. Then she clicks on the gray area below the video and expands the video information. Below Key Moments, the next item is Transcript, with a blue link that reads, Show transcript.

(SPEECH)
click on Show transcript and here's my transcript over here.

So

(DESCRIPTION)
The transcript with time stamps appears on the top right next to the video. She copies the transcript and pastes it into the Google Doc.

(SPEECH)
what I can do is come in here and select all of this and copy it. And then I can come over to my Google Doc and I can paste it so that I now have-- and you can take the-- if you don't want the timestamps in there, sometimes the timestamps get in the way, so you can toggle those timestamps off and then copy and paste.

But then

(DESCRIPTION)
She returns to the YouTube browser and clicks, Toggle Timestamps, on the top right of the transcript. The timestamps disappear.

(SPEECH)
what I would do is I would save this and either save it as a Google Doc and then link to it or actually make a Canvas page. And under

(DESCRIPTION)
She returns to Canvas and puts the cursor in a new line under the embedded video in the content editor.

(SPEECH)
here, I would put, say this is my panda video, I would say, View the transcript for this video.

And then

(DESCRIPTION)
She types and then highlights the line. She clicks the link icon above the content editor.

(SPEECH)
I would highlight that and I would link it to wherever, whether it's I have it as a Google Doc so it's an external link or I made a Canvas page and so it's a course link. But that way, it's accessible. It's not a video you created so you can't upload captions to it. But you can link to a transcript, whether it's on YouTube or you create it yourself.

Now, if I were to come in here and I were to use the Canvas tool to record, I can either upload one that I've created on like Screencastify or I can record myself.

(DESCRIPTION)
She clicks a video icon on the top right of the content editor. From the dropdown, she chooses Upload slash Record Video. An Upload Media window opens with a Record tab open. A blue button at the bottom reads, Start Recording. Above it, a horizontal volume bar turns blue with the intensity of her speech.

(SPEECH)
And I can-- let me see.

I can Start Recording even though it would turn my webcam on but it's being used by Zoom so it can't or turn my mic on. And then I can record.

(DESCRIPTION)
She clicks the Start Recording button and a countdown in the window counts down from 3. The blue button at the bottom changes to Finish.

(SPEECH)
And here's where I would record my video. This is how you're going to insert icons. This is how you're going to change the buttons and how you link them out. And then Finish.

Notice

(DESCRIPTION)
She clicks Finish. At the bottom, the horizontal bar gains a play button on the left and displays the length of the recording. Below is a file name field, then a gray Start Over button and a green Save Media button below. She clicks Save Media and the video embeds in the content editor.

(SPEECH)
here I can save my media. And it puts it right here on my Canvas page. And then when I go into Settings, there is a way to upload your-- and now I have to remember how to do-- oh, Video Options. So I'm going to come in here to Video Options. Again, I

(DESCRIPTION)
She selects the embedded video and clicks Video Options at the top. A panel opens on the right. She types in the Title field.

(SPEECH)
want to give it an alt tag. So these are my instructions for including captions on a video.

And then I can come over here to Closed Captions/Subtitles and I can choose the language. And then

(DESCRIPTION)
She chooses English from the dropdown under Closed Captions slash Subtitles, then indicates a gray Choose caption file below.

(SPEECH)
if you've created a caption file, you can then upload that file here. And there are tools out there that will create that file for you.

(DESCRIPTION)
She closes the Video Options panel.

(SPEECH)
And even better than this are, in Studio, which I believe not everybody has Studio. It's an extra subscription.

But Studio, you can actually have Studio generate captions for videos that you've uploaded or recorded directly in Studio. It will not do it for YouTube videos, unfortunately. But it

(DESCRIPTION)
She mouses over the Studio icon near the bottom of the left menu of her Canvas screen.

(SPEECH)
will create those captions for you if you record in Studio rather than using the screen recorder here. But all that to say, even if it's not a video you created, you need to make it accessible by including that transcript however you can.

(DESCRIPTION)
The Accessibility Checker icon has a superscript 3. She clicks on it and the panel opens. She fixes the errors in the panel. She types two alt texts for the graph and infographic, then formats the Next Steps list correctly.

(SPEECH)
And notice I have three screen-- three Accessibility Checkers. So, again, I would need to change my alt tag. So this is a chart displaying the warmest year on record. And then I can hit Apply. This one is an infographic showing how global warming impacts health. And-- everyone in-- OK, good. Then I will show that.

List should be formatted as list. So this one was manual. So I'm going to format that as a list and click on Apply. And it looks like I'm going to have to fix it. But that's OK. It made it so that I saw that it's a list. And so i can come in here and I can erase all that formatting and then do it myself. There we go. So that Accessibility Checker is your best friend.

Studio-- so let's save this. I'm going to come over here to Studio.

(DESCRIPTION)
She saves the file in Canvas, then clicks the Studio icon. It opens to My Library, which lists thumbnails of her videos.

(SPEECH)
And you can see I have a ton of videos up here already. So I've done some things with Foster Youth and Special Pops. Here's some videos on how to use our SIS system, how to use Frontline. So what I'm going to do is we're going to come into one that I've created. Let's try this FLEX one.

(DESCRIPTION)
She clicks a video on the right titled FLEX. It opens a folder with three videos inside.

(SPEECH)
So this was a video that I recorded. If you go through OTAN, then you have Studio for some. But you can see that here's one where I recorded a reflection. Here's one where I recorded how to work through an assignment. But I'm going to come into this video and come over here to captions.

(DESCRIPTION)
She clicks the first of the three videos. It loads. Below, she clicks the Captions tab on the menu, the fourth tab.

(SPEECH)
And you can see that it doesn't look like-- it's still loading. But their captions aren't here yet. So what I can do is add New Caption.

(DESCRIPTION)
She clicks a button on the right with a blue plus sign and the text, New Caption.

(SPEECH)
And I can either upload captions or I can create captions. And if I click on Create Captions and choose my language, which is brilliant because you can even choose different language-- no, you can't because it's listening to you. So why am I not seeing English?

(DESCRIPTION)
She clicks Create Captions and a Language pop-up appears. She scrolls through the dropdown.

(SPEECH)
It was taking a long time. We're going to cancel that and try it again. Oh, because English is here, which is-- doesn't make sense why it's not--

(DESCRIPTION)
She attempts the Create Captions again, then closes it. She notices that there is already an English captions link on the left and clicks it. Captions with time stamps open on the left side of the video.

(SPEECH)
there we go. So I had already entered captions. That's why it wasn't letting me do it again. But, basically, what happened is is I created captions.

And as the video was playing, it listened and provided captions. And I can stop it and edit here. So instead of during this mission, it should be during this session, right? So

(DESCRIPTION)
She clicks on one caption. An Edit caption field appears on the bottom right. She edits the mistaken caption.

(SPEECH)
it's listening. It's using AI to listen. And then I'm just going to follow along and then stop and fix it when I need to.

And so that's a really great way to generate captions with Studio. But, again, it has to be a video that you've either uploaded or that you've recorded in Studio. It can't be a video that you've brought in through YouTube connections. But you are able to create those captions right there inside Studio.

I want to make sure I have covered everything. So let's come back here.

(DESCRIPTION)
She returns to the slide presentation. Slide, Tables. Text, Tables in Canvas. Screen readers read tables from left-to-right, and then top-to-bottom. Generally, tables should be reserved for tabular data, and not layout. Captions are important because they insure that a label for what the table contains will always be associated with the table. If you do use a table for visual layout, Keep it simple. two or three columns, max. Don't include headers. Headers should be used for labeling similar data. On the top right is an embedded video with a table.

(SPEECH)
Tables, let's take a look at tables real quick.

(DESCRIPTION)
She returns to Canvas.

(SPEECH)
So let me get back to my course.

And we're going to come in here and create-- let me come into Modules because I think I already created a page, yes.

(DESCRIPTION)
She clicks Modules from the left menu, then scrolls down and selects, Climate Change Demo Color Contrast. The page opens with yellow, pink, red, black, and green color font on a white background.

(SPEECH)
Oh, this is a good example of color contrast. So we talked about color contrast a little bit. But some people, especially high schoolers, they love to put in all kinds of color. I always say stick to two, maybe three colors. But don't make everything colored because, honestly, again, colorblind or visual impairment, this is not accessible.

(DESCRIPTION)
She clicks Edit and clicks the Accessibility Checker icon, which opens to the color picker.

(SPEECH)
And when I come in to look at my screen, my Accessibility Checker, it's telling me that I have some color issues. So, again, I can use the Accessibility Checker to change it so that there's more contrast. Or I can just make it so that it's all black text on white background and only change the color to pull things out to-- so that they are easily found.

(DESCRIPTION)
She closes the panel. In the content editor, she highlights all the colored text and chooses black from the font color icon above the editor. She scrolls down to the embedded video and clicks a few blank lines below it.

(SPEECH)
So that's that color.

But say I wanted to come down here and put some things into a table. So when I insert a table, again, if you're going to use it for layout, two, maybe three columns. And don't put more than like one row.

So

(DESCRIPTION)
She clicks the table icon above the content editor and inserts a table with three columns and one row. She clicks in the first cell.

(SPEECH)
say I wanted to take this video and put it in this first column, notice that-- oh, that was weird.

(DESCRIPTION)
She drags the video to the cell and it fills with the transcript and the panda video. It expands the content editor screen and she scrolls through blank space.

(SPEECH)
Notice that it shrinks, it makes it so that-- I'm going to cancel this because I don't know what happened. It makes it so that it skews everything.

So

(DESCRIPTION)
She clicks the gray Cancel button on the bottom right and the changes are not saved. She opens the Editor again.

(SPEECH)
that's another reason why we want to avoid tables because it doesn't-- it's not what we call responsive, where if you're on an iPad or a mobile phone where everything can like just fall underneath each other so that there's only scrolling up and down. When you use a table, it forces people to scroll right and left, which is really hard to do on a phone. So when we're using tables, we want to make sure that it's mostly for data.

So

(DESCRIPTION)
She inserts a three column, two row table below the embedded video. She scrolls up and mouses over the bar graph.

(SPEECH)
if I wanted to take this data here and put it into a table, that's appropriate. But to try and put it so that this picture is here and this picture is here, that's not appropriate because then it's not accessible. The other thing with tables is, looking at our Accessibility Checker, your tables need to have a caption.

And

(DESCRIPTION)
She clicks the Accessibility Checker, skips through the color pickers, and comes to the item 6 of 7, an Add a caption field for the table. She clicks in Set table header dropdown.

(SPEECH)
so for this one, I might put climate change temperatures, right? So it explains what is going to be found in this table. And then you also want to tell it is it so that there are headers along the top and the content is underneath it or are the headers along the side and the contents next to it. So you have to think about how your data is laid out.

So let's just say that that top row is my header row.

(DESCRIPTION)
She clicks cell one and types Date, Low Temp in cell two, and High Temp in cell three.

(SPEECH)
And so then when I'm looking at the table, if I put in here this is going to be the date, notice it's bold and it's in the center. This is going to be the low temp and this is going to be the high temp.

(DESCRIPTION)
She types in cell one in the second row and it is not formatted.

(SPEECH)
Now, when I come down to the next line, you can see that it's not bold and in the center so that's just my data.

So my header is here. It formatted it visually but it's also told it in the coding for the screen readers. And

(DESCRIPTION)
She types temperatures into the columns and hits enter to add another row, which she fills in.

(SPEECH)
say my low temp was 42 and, in December, my high temp was 68. And if I hit and I do December of 2019, my low temp was at 43 and my high temp was at 65. So this is a very appropriate use of data and how you can use it. But stay away from formatting.

And I'm going to-- hopefully I put it in this slide deck.

(DESCRIPTION)
She returns to the presentation slides. She indicates the embedded video on the Tables slide.

(SPEECH)
We already listened to that. But we're going to come over here to Web and we're going to search for tables because this is going to show you a really great-- creating accessible tables.

(DESCRIPTION)
She opens WebAIM in the browser and searches for tables. From the results, she clicks on the second link, Creating Accessible Tables - Layout Tables. A page with table information and examples opens and she scrolls through it to a table with cells that have a picture of a toilet and text around it. She scrolls further down to the same information broken into table cells.

(SPEECH)
I think it's on here.

So this-- if we did this in a table and we wanted it to look like this so that we would read it, basement toilets must flush up, right? That makes sense to use visually. But this is how a screen reader is going to read it, basements, blank, blank, up, toilets, and then whatever the alt tag is there, flush, blank, blank, must, blank blank.

Makes no sense because, visually, we wanted it to do that. But, information wise, it just read it across and it didn't make any sense whatsoever. So that's why you want to stick away-- or, stay away from tables as a layout format thing.

(DESCRIPTION)
She returns to the slide presentation and returns to the Accessibility Features in Canvas slide. She opens Canvas and clicks on Modules.

(SPEECH)
And then let's look at the Immersive Reader because this is amazing. Let me come back to Modules. And we're going to go into-- and I know we're coming up on 125 so this is a perfect way to finish this out Notice--

(DESCRIPTION)
She scrolls down and clicks on Climate Change Demo. The page opens and she clicks Immersive Reader on the top right.

(SPEECH)
KARIN DE VARENNES: I love Immersive Reader.

DANA THOMPSON: Immersive Reader's amazing. And it used to only be on Pages. Now it's on Pages and Assignments. And it's coming to Discussions and Quizzes. But, basically, if-- students have access to this too. So if I come into the Immersive Reader, whether I'm a teacher or a student, it strips out all the noise and it gives me just access to the content.

(DESCRIPTION)
The page re-loads in Immersive Reader. All the font is black. It is large and very spaced out. She scrolls through it. She clicks on the first icon in the upper right. She adjusts the font settings in the panel that opens.

(SPEECH)
And I have the ability to come up here and change my text size. Maybe I need it bigger because I've got a visual impairment.

I can increase spacing or turn that off and it decreases the spacing. I can change the font. So maybe it's something that I can see better, whether it's Sitka or Comic Sans, which I hate. So I'm going to go back to Calibri. Maybe-- we know that our students love things in dark mode. This is much easier on many eyes, having white text on a black background. But maybe they like it with green, or with yellow, or with white.

And this only impacts the person who's looking at it through the Immersive Reader at that time. It's not changing the way anybody else sees it. So they can be in class looking at the content through Immersive Reader and getting that content better. You can Show Source Formatting or turn that off. So that makes it so if I made it bold, it's going to show it bold. But maybe I don't want that. Maybe that's getting in the way.

(DESCRIPTION)
She clicks the second icon to open a new panel. It has a Parts of Speech list with different colors for different parts of speech and an on and off toggle for each. As she clicks it, the parts of speech in the text change color.

(SPEECH)
The other thing is I can come over here to grammar options. And so for those of you who teach maybe our second-language learners-- let me make this smaller so that you can see it. I can come in here to the Immersive Reader and turn on all the nouns in purple and all my verbs in red. Now, color contrasting, this is probably not very accessible.

But they have the ability, individually, to come in here and change the color that it's showing that parts of speech at. So they can make it in colors that they can see. But it helps them learn the nouns, verbs, adjectives, adverbs. And then you can also show the label. So you'll see here that it says whether it's an adjective or a noun. So it helps them learn that language. So that's under the Parts of Speech on this magic wand

And

(DESCRIPTION)
She clicks the third icon to open a new panel with Use Focus, Picture Dictionary, and Translate sections. She focuses on one line and clicks play. The screen grays out except for the selected line. As it plays, it has only one line at a time in the non-grayed-out section.

(SPEECH)
then there's reading preferences. So you can do it so it's a line focus so that when it reads to them by clicking the Play button--

[VIDEO PLAYBACK]

- Climate change demo, understanding the global impact of warming climates. Objectives-- to explore the various effects of global warming on our planet, to understand the implications of these changes for both the environment--

[END PLAYBACK]

DANA THOMPSON: So you can see that it helps them track so that they can see it. They can make it so that it's multiple lines or the whole page-- or, most of the page. They can even come in here and change the language. So, again, for our second-language learners, maybe they're going to come in here and have it-- and notice, in Spanish, it has even the different dialects. But by word or by document. And so it translates it for them.

[VIDEO PLAYBACK]

(DESCRIPTION)
She chooses a Spanish dialect from the dropdown. The text auto-translates and she clicks play.

(SPEECH)
- [SPEAKING SPANISH]

[END PLAYBACK]

DANA THOMPSON: And so they can come in and not only get the content in English but also hear it in their native language so that they can get it better. And then there's also a picture dictionary, which this one, there's not very many pictures. But it really-- Immersive Reader is amazing to help our students access the content in a way that is good for them.

And it's individualized. So just because I'm looking at it in Spanish with my parts of speech turned on, the person sitting next to me can be in a totally different language or not have it turned on at all and they're just looking at it in the regular layout. So that Immersive Reader is an amazing tool, again, on any page or assignment for our teachers and students.

(DESCRIPTION)
She returns to the slide presentation.

(SPEECH)
And I think that's about it. The keyboard shortcuts, that you're going to see when you are working in the Rich Content Editor.

(DESCRIPTION)
She returns to Canvas in the content editor. She scans through the dropdown menus in the tab menu above the editor.

(SPEECH)
So you have the ability-- and I never use it so I have to remember where it is. But you can turn on-- and there are quick keys too.

You can turn on the, and I don't know it off the top of my head, but turn on those quick keys. Oh, here it is down here by the Accessibility Checker. So

(DESCRIPTION)
She clicks an icon to the left of the Accessibility Checker at the bottom right of the content editor. It has a keyboard on it. A Keyboard Shortcuts window pops up with a list of shortcut keys and what they do.

(SPEECH)
you-- if you are like me and you like to do quick keys, these are the shortcuts that you can use in the Rich Content Editor. And students can too when they're submitting assignments using the Rich Content Editor.

(DESCRIPTION)
She returns to the slide presentation. Slide, Evaluations. Text, Please submit your evaluations. H.T.T.P.S. colon slash slash evaluation dot O.T.A.N. dot U.S. -- On the right is a QR code.

(SPEECH)
And I think, that's a lot, but that's most of it. And it really is-- you're welcome. And let me grab those slides so you have access to them. Oh, what did I just do? Did I make you guys go away?

(DESCRIPTION)
She exits out of full-screen mode into Google Slides.

(SPEECH)
Here is the share link. Let me make sure that they are accessible.

(DESCRIPTION)
She clicks Share in the top right.

(SPEECH)
And I'll put those in the chat bot so you have access to those slides so that you can go back and take a look at the different things that we talked about and the videos and that kind of thing.

It doesn't seem to stick when you get out of the document and return, correct. Each Rich Content Editor, you will need to reset that up again, yeah. I don't know if there's a way to make that consistent. Once you've set it, it stays. But, yeah.

So let me come down here to the evaluation. So if you-- oops, if you'd like to fill out that evaluation, that helps us when we're creating these webinars. And that's it. That's what I got. So thank you very much. I know that was a lot.

(DESCRIPTION)
Slide, OTAN Online. Text, Canvas Accessibility. Presenter: Dana Thompson, OTAN Subject Matter Expert. January 30, 2024.

Slide. Logo, OTAN, Outreach and Technical Assistance Network. Text, Face-to-Face and Online Training. New Articles. Teaching with Technology. Teachers' and Administrators' Digests. Annual Technology and Distance Learning Symposium. Online Resources for Adult Education. O.T.A.N. dot U.S. - Phone, 916-228-2580. Subscribe, YouTube: slash O.T.A.N. Serves Adults Education. Like Us, Facebook: slash O.T.A.N. Serves Adult Education. Follow Us, Twitter: slash O.T.A.N.