MONICA OLSSON: Good afternoon, everybody. And thank you for being here today. My name is Monica Olsson, and I have the pleasure of introducing myself and our training this afternoon. So you are here to spend the next few hours with us learning about accessible design core concepts 101. We will first begin with an overall presentation of the core designs where we name them, explain them. Then later on towards the end of the presentation, you will have the opportunity to select a breakout session, which should be the same breakout session that you selected when you registered for this event. And that's going to be an opportunity for you to have hands-on practice with your session moderator. After those breakout sessions have concluded, we will come back together and the main room for some final comments. So here we go. Let's get started. So before I continue to introduce myself and let our lovely co-presenters introduce themselves, there are some housekeeping items or good to know things that I'd like to get out of the way first. So the first thing is if you would like to have access to our PowerPoint slide deck presentation on your own computer to follow along, Suzanne is putting a link to that in the chat right now. And she can continue to put those links in the chat at various times during our presentation in case people lose them or need them again, feel free to ask for that in the chat. Suzanne is also going to put a link to our Google Doc, which has all of our presentation materials prepared for you today. So you'll have access to everything via that link as well. The other things that I'd like you to know are we do have professional transcription provided today. If you would like to follow along with live captioning, you need to select the CC button at the bottom of your Zoom screen. For some people, you might not see the CC button right away. You may have to select the three dot ellipses that'll give you more options, and from those list of options, you would select Show Transcript. And then you should see the live captioning begin on your screen. Feel free to toggle that on and off as you need. We are spending just about four hours-- or excuse me, three hours together today, which can be a long time. So we do have two breaks scheduled. The first break will be after Shaun's demo and the second break will be right before we move into our breakout sessions. And with that, I will continue on to the next slide. So this slide is titled who are we? So, again, my name is Monica Olsson. I use she/her pronouns. I am relatively new to the state board. My title is policy associate for IT accessibility. I've been here just about seven months now. Originally, I planned to have that be all I share with you, but I decided I wanted to share a little bit more about myself with you today. I have about 10 plus years experience in the accessibility and disability accommodation space and higher education. And I am someone with multiple disabilities myself, including a disability called cerebral palsy or CP that I was born with. So in my everyday life, I can only-- use only one hand to operate a computer, which means I use assistive technology, which is one of the reasons why this topic, these topics and accessibility is really important to me and why I'm here today. So with that, I'll turn it over to our co-presenters to introduce themselves. SUSANNE WEATHERLY: Hello, everybody. I am Susanne Weatherly, she/her pronouns from Everett Community College. I am the current Interim Director for the Center for Disability Services here. I have only been in my role coming up on three years. And I will admit, when I first started I knew some about accessibility, but I got to learn pretty quick about all this other stuff. And then I started giving presentations on it. So I was very excited when Monica asked me to partner in providing this information to you all today, and I appreciate that you are all even here. Thank you very much. ALISSA SELLS: Hi, I am Alissa Sells, and I'm a program administrator in the Student Success Center at SBCTC so I work with Monica. I've worked at SBCTC for I think seven or eight years now. And I try to model practices for creating accessible content daily and everything I do so really taking it to heart. [CAT SNEEZING] I'm sorry, that's my cat sneezing. And sorry, oh my goodness sakes. She's sitting on my desk sneezing. And extensibility and creating accessible content is really important to me. I used to be an instructional designer-- an interior designer now, I'm an instructional designer. And as we're going to learn in just a little bit universal design comes out of architectural roots. So it was already a concept I was practicing. I was just practicing it with furniture and walls rather than with words and colors on a page. So thanks. SHAUN HEGNEY: Hello, everyone. I'm Shaun Hegney. I'm he/his pronouns. I have been my current role as a program specialist with Spokane Falls Community College disability access service. I used our own name, I apologize, we just changed names for going on 5 and 1/2 years. I have a lot of personal experience with disability and technology. I have a visual-- pretty severe visual impairment. I have no vision in my left eye and I have 2,200 close up my right eye 2,400 away. And I also struggle with depression and anxiety. So like others have said this is very personal to me. Accessibility is built into my work for me to have access, as well as my students, our faculty, our coworkers. My area is definitely heavily focused on assistive technology and accessibility. I'll be the one doing a demo for you today of a screen reader. So if you have any questions, please let me know at that time. Thank you MONICA OLSSON: Thanks, Shaun. SHAUN HEGNEY: Of course. MONICA OLSSON: So moving on to the next slide titled, What Will We Talk About? And before I let you know what we're going to talk about, I want to just thank everyone again for being here today. No matter where you are on your accessibility journey, we really hope that you find this information useful and that you have some fun with us along the way. Some of you may have already attended accessible design sessions before. You might already be implementing these practices into your daily work and you're here for a refresher or review. Some of you, this might be brand new information and that's OK. Wherever you are in your journey, we're happy to have you here today. And if you have questions during the presentation, because we have a lot of content to get through before we go into our breakout sessions, I encourage you to take note of your questions or concerns and bring those to your breakout session and be prepared to ask those to your moderator. If you need technical assistance something is not working for you in the moment, please put requests for help in the chat and one of the presenters today will do our best to help resolve that for you, OK? So here are the things that we're going to talk about today. First, we're going to explore why accessibility matters, and also what we mean by accessibility? And actually give you a workable definition. Then we're going to talk about federal law and state policy and what those requirements around accessibility are and how they apply to our work. We're also going to introduce you to the concept of universal design and universal design for learning, as well as a brief introduction to an overview of Assistive Technology, or AT for short. Shaun, who are really lucky to have here today will give you a live demonstration of what it's like to use a screen reader. So you will be able to experience that a little bit along with him. Then we're going to introduce and explain our core concept. So these are core accessible design concepts that we are going to introduce, define and explain to you today. Then during your selected breakout session, you're going to have the opportunity to practice implementing those core concept designs with your moderator in your session. OK, before I move on, is there anything in the chat that I need to be aware of? Great. Okey-dokey. Why accessibility matters? Susanne, I believe this is your slide. SUSANNE WEATHERLY: Yup. Yeah, so when we think about why it matters, right? And as Monica mentioned, we can all be at different places in our own understanding and application of these concepts. And when we did an initiative here at Everett Community College on this what we used as a framework for it was something called ADKAR, and that's a change management framework from Prosci. So ADKAR is A-D-K-A-R, it's the acronym, right? But it stands for awareness, desire, knowledge, ability, and reinforcement. So as you think about your own experience, you can maybe try to match that up with, do you already have that awareness and desire, but you maybe need that knowledge and ability to do the work? Do you have all of that information and you really just need the reinforcement to continue to come back to this and, again, refresh your memory on these things? Because it is a change. It is a change in how we operate. And so keeping that in mind that people are different places, the goal of the information today is to try to meet everybody at whatever place they might be at. So number one, accessibility creates equity for the people who are interacting with the content that we make. And so accessibility is really important because as we all know, social justice and equity is a very important part of the work we're doing right now. And we would never want to create something and put it out there to our community that creates a barrier to access for them. That feeling of belongingness is very important and we don't want people to feel like they are not being considered when we create content and put it out. When we do create something that might create a barrier, that barrier isn't an equity. It makes that person who might use assistive technology or have some other kind of disability can't access that information feel again like they're not as important, but it definitely provides that inequitable experience, and we know that we don't want to do that, right? And then third, not that we want this to be the reason we do this work, right? But that there are legal requirements. There are federal laws and there are state laws that require us to be making sure our content is accessible before we put it out there. MONICA OLSSON: Thank you, Susanne. I'm going to move on to the next slide now. What does accessible mean? Well, we're in luck. OCR, which also stands for the Office of Civil Rights has given us a very useful definition of what accessibility means. And this definition shows up when OCR is called in to perform investigations of possible disability discrimination. And so this definition is referenced when they're doing their work to help determine if discrimination did occur or not. And then how to resolve the issue between the individual with a disability and the institution or group that they're concerned with. So accessible means that individuals with disabilities are able to independently acquire the same information, engage in the same interactions, and enjoy the same services within the same time frame as individuals without disabilities, with substantial equivalent ease of use. And this is actually a direct quote from a resolution agreement with the University of Montana back in 2014. So when we think about this, if someone with a disability doesn't receive an accessible textbook for their classroom until six weeks into the quarter, they're not receiving that material within the same time frame as their peers or with substantially equivalent ease of use. One note from my co-presenters, I am having some issues with my screens today and I am not able to access my speaker notes that are open on another screen. So if you all need to jump in and help me out, please do. But I can't fix whatever problem I'm having. So with that, I'm going to move on to the next slide. Legal landscape, Susanne. SUSANNE WEATHERLY: So federal laws, we don't want to be breaking those federal laws. That's a really good reason and that awareness piece that we should have. Hopefully, we have the desire peace more that we're creating accessible content for others, but the awareness is that we have legal reasons, federal laws like the Americans with Disabilities Act and then section 504 that govern what we have to be doing. And so people or students with disabilities cannot be denied services or program access due to their disability. And like Monica said, that timeliness of it can be very important to make sure that students have the equal opportunity to be successful with their classes. And they're entitled to use appropriate accommodations students with disabilities or even persons with disabilities within our institutions employees. As well. SHAUN HEGNEY: Let me jump in real quick just [INAUDIBLE]. SUSANNE WEATHERLY: Yeah. SHAUN HEGNEY: So I want to make something clear that people understand access is not the same as success. You have the right access. Everyone has the right to fail or pass on their own merit and interact in the same way that anyone else would. So keep that in mind, we're not saying you have to make someone succeeds, but you have to give them access. They have to have the equivalent-- have to be an equivalent equal experience to anyone else on your campus, institution, or on your website. Thank you. SUSANNE WEATHERLY: Great point. Yeah. Yeah, and so that person with a disability should have access to that material of the same quality and within the same time frame as people without disabilities. And students with disabilities should be able to access course material as easily as any other student. Their peer students that are able to access that content who might not have a disability. MONICA OLSSON: Thank you. Moving on to the next slide, legal landscape continued. So in addition to the federal laws that Susanne and Shaun just help introduce to you. Washington state has its own accessibility policy called Policy 188, which if you access our presentation materials, you can actually click on this direct link and go read and learn more about Policy 188 and how it applies to your own agency or institution. So a brief overview of what policy 188 is and what it's requiring is that all state agencies, which includes the state board and our colleges must meet minimum IT technical accessibility standards. And what those standards are is we refer to something called WCAG 2.1 AA standards. WCAG stands for Web Content Accessibility Guidelines. And if you're not in the web design world or computer science or have a computer science background, reading those standards might sound a little bit technical. But these standards provide us a testable and a measurable explanations of how things need to be designed on the web if it's going to be web content for it to be accessible and usable for people with disabilities who use assistive technology. And we're going to give more examples of assistive technology here in a minute. Policy 188 also states that when state agencies are working to procure or implement different administrative technologies or communication technologies that these services also need to meet accessibility standards. So that asks us to think about what we're buying for our students and our employees and our faculty to use. This also applies to things like college websites, learning management tools. So Canvas, for example, is our systems learning management tool. Student information systems, training materials if you're creating a training video or other sort of learning experience, online quiz, those things need to be designed as accessibly as possible to meet these standards for people to be able to access them and use them with assistive technologies. Move on to the next slide. SUSANNE WEATHERLY: In the chat, Thomas, asks does ctcLink meet the WCAG standards? MONICA OLSSON: Thomas, thank you for that wonderful question. And I'm going to defer on entering into a conversation around ctcLink accessibility right now, and I'm happy to have more conversation around ctcLink accessibility offline. I will say that every month, the state board hosts a ctcLink accessibility open forum. I believe it's the second Tuesday of each month from 11:00 to 12:00. That information is publicly available on the state board website. That's an opportunity for myself and other state board employees and the colleges to get together. And we talk about the status of ctcLink accessibility known issues or tickets that have been documented and where we are in the process of resolving those internally or in collaboration with the vendor. So I think if you would like to learn more about ctcLink accessibility, I would encourage anyone to go and get information about the open forum and attend those conversations. OK, I'm going to continue on. So this next slide is titled Universal Design or Access For All. And it kind of goes back to a comment that Alissa was sharing in her introduction around her work with interior design and universal design getting beginnings in architecture. So the idea of UD, or Universal Design, is really the concept of creating physical structures or experiences and services that are designed to serve and be used by the most amount of people possible without the need for specialized retroactive modification or accommodation. So an example a kind of a real world physical example is the curb cut. Traditionally, when we think about the curb cut, you might think that it was designed or is the most useful for someone who maybe uses a wheelchair to navigate their world or some other assistive device or walking aid. In reality, curb cuts help almost anyone who is out navigating their world. They might help a parent who's using a stroller pushing their child in a stroller. They're going to help bicyclists safely cross the street. So the curb cut effect, so to speak, is also another way of thinking about this idea of universal design and how can we design things from the beginning to serve the most amount of people regardless of disability status without having to retroactively modify the experience or the physical structure. Moving on to the next slide. UDL. SUSANNE WEATHERLY: So universal design for learning creates learning environments in the virtual and face-to-face classroom that can be used to the greatest extent possible by anyone, regardless of their condition, without the need for additional modification or accommodations. I know, for instance, here at our college, there are times where an instructor may go through a course and end up remediating it to the point where students who have requested accommodations in the past may not need those accommodations in that class anymore because it has been created in such an accessible manner for them. There are still situations though where accommodations may be necessary, but that's that goal of universal design for learning. And as we talked about as well that feeling of belongingness that students have when they are in a class that they feel has been designed for them and for their access needs. They have that sense of belonging and inclusion. And that's our goal is making sure that all of our students feel included. And so, for example, when your Word documents or other materials are designed and created with that accessibility component in mind taking advantage of these core concepts that we're going to talk about later today. Then those students don't have to ask their disability service office or their instructor for alternative formats or versions of those materials. And that's really the goal that we have here, right? One piece that we don't really get much time to talk about today, but I just want to mention is PDFs. So PDFs can always be a tough thing, right, where we create content and then a lot of times we want to turn it into a PDF so somebody can't change what that content is. Well, there are ways to create content in Microsoft Word, for example, and then export that to create a PDF that is accessible because we've done the accessibility work within Microsoft Word already. But a lot of times what ends up happening is instructors, for instance, might scan a document and then put that out there. They've scanned a document created a PDF of it, but they've never taken it through the process for optical character recognition, which is going to talk a little bit more about later to where it's real text. It just becomes an image, but it's a blank image. And so if we're sharing out those PDFs to others, they may not have access to the content that's on it. So we don't have time to really talk about PDFs too much today because it is a whole topic of its own. But it's just something to keep in mind as you're creating content, and when it comes to making sure that we're not creating barriers for others. MONICA OLSSON: Thanks, Susanne. Before I move on to the next slide, I did want to add one more comment in response to Thomas's question regarding ctcLink. I do want everyone to know that there are dedicated folks in the state board IT division who are working really closely with our vendor to help document and remediate any accessibility issues that are made known to us. And that there's also a process for people for college employees to submit tickets if they do encounter an accessibility barrier or hear of an accessibility barrier that their student might be experiencing. So I just wanted to emphasize that we have people who are working really hard on this regularly. And those wonderful people do attend the open forums every month as well. OK, thanks for that. Yes. SUSANNE WEATHERLY: There's a couple of things in chat. Laura asked, will there be a PDF session offered in the future? MONICA OLSSON: Thank you for that suggestion, it's something that we'll definitely look into. SUSANNE WEATHERLY: And then Krista asked, can you please share the contact information for the CTC access coordinators for us to contact? I did put in the chat earlier the link to SBCT's ctcLink accessibility website where with the information for those meetings and whatnot. But Monica, I'll let you answer the other piece of that. MONICA OLSSON: OK. I actually don't know if I understand the question. Or what contact information is being asked. So I'll unmute myself just for speed. So ctcLink is getting launched at RTC if we have accessibility concerns, is there a person that we can talk with at state board that can guide us? So Susanne, If you put the link to the ctcLink accessibility page on the state board, I believe there's contact information there as well as a online submission form where you can actually write in your questions or issues or topics. And I can work on sending a follow up email out to registered participants with additional information about how to maybe contact your own school, ctcLink project manager first, and how else to communicate with the state board. Does that help answer your question, Krista? STUDENT: Thank you so much. MONICA OLSSON: Sure. And then for the purposes of today, we are not focusing on ctcLink accessibility. So if you have additional ctcLink accessibility questions, that makes sense and I definitely welcome hearing those questions another time. But I think I'll go ahead and ask that we table ctcLink now moving forward so that we can stay focused on our core concepts today. But happy to continue the conversation later. OK, so this slide is titled UDL three core principles. So there are three core principles of universal design for learning that were developed by a nonprofit that goes by the name of CAST, C-A-S-T. And these three core principles are number one, providing multiple means of engagement. So when you are providing different ways for a participant learner, student, or colleague to engage in your content and information, you're going to increase that participant and learners motivation and help them see the relevancy of what they're learning and how to apply it back to their life or what they're focused on. Number two, multiple means of representation. So this refers to content delivery. So instead of it only relying on let's say reading assigned reading materials, you might allow your learners or your participants to read an article and watch a video or listen to a podcast. And so they can kind of pick and choose or engage with all of those content delivery options. The third is multiple means of action or expression. So this gets to assessment where you're kind of getting-- your understanding or getting feedback of how people are learning your material. So this is giving more than one way for your participant or learner to show you what they know. So if you're an instruction, for example, that might be giving a few different options for an assignment type that a student can choose what they want to do to submit to you. And then we can continue different examples along the way. OK, so I've moved on to the next slide titled, What is Assistive Technology or AT? So AT is hardware or software both low tech and high tech that helps people with disabilities complete a task. So for example, if someone is blind or low vision or has other reasons why they might use a screen reader, a screen reader is a form of assistive technology. I won't speak too much on screen readers because Shaun is going to give-- define that for us here in a minute and give us a demo. Some people might use voice command or voice control to operate their computers. So for example, if you're someone that has limited upper body mobility, perhaps you can't use your hands to operate the keyboard or the mouse, you might use something called Dragon speak naturally, which allows you to voice command basically what you want to do on your computer so you can use it to offer your emails and your papers. But you actually can also voice command different selections on your screen. So if you're filling out an online form, for example, you can use Dragon to select the field you want to input your information to and select the submission button without having to use your hands. Some people cannot use screen readers or voice control, so they might use a mouthstick. And actually, the picture I've chosen to share with you today on the screen is a picture of an individual who is using a mouthstick to operate their iPad. So that's another form of AT for computer navigation. People might use adaptive keyboards and computer mice. And then some less techie options just to kind of get you thinking about what AT can look like in other areas of our world in our life is if one can't use-- this applies to me. I struggle to use both hands to open a can using a traditional can opener because you kind of have to hold it with one hand and crank it with the other and that's pretty difficult for me. So by using an electric one touch can opener, that's a piece of real life-- low tech real life AT that I've selected to make that experience more accessible to me in the kitchen. If you're someone who has low vision and you're on your way to cut up some veggies or fruit, there are low vision cutting boards. So basically what that is a cutting board with a white surface and a black surface. So you can choose which background you want to give yourself a higher contrast of the background of the board with the color of the food. So those are some lower tech examples. SUSANNE WEATHERLY: You want to take a moment before we move on to Shaun just to update from the chat. Earlier Mary mentioned, I would encourage everyone to attend the open forums about the accessibility of ctcLink and I included a new link in the chat that is specific to those monthly meetings as well. There's also a couple of comments. When uploading a document, should we first make it accessible in Word and then export into a PDF? Asking because many documents on our website are PDFs, right? As well as I'm specifically in need of creating PDFs from word documents that must be accessible. Can you recommend a link to help with that? A lot and then again the word to PDF accessibility is also a need for me. Also emails to campus is another reason I'm attending today. So a lot of these concepts are going to be able to discuss with these core concepts that we're going to be going over. But there are links at the end of the presentation that will point you to the SBCTC's accessibility library that has more information, especially about PDFs. But the design concepts that we talk about especially forward as you do that and you create that accessible starting point within Word document and then export that to PDF. That accessibility of the document is going to be much better. MONICA OLSSON: Thanks, Sussane, I appreciate you moderating the chat. And like Sussane said at the end, we're going to share a lot more resources with you. And, in fact, there's an entire 101 module dedicated specifically to PDF accessibility available through the accessibility micro courses and Alissa might be able to even try a little bit more about that at the end as well. So now Shaun, are you ready for your screen reader demo? SHAUN HEGNEY: Yeah, I just want to kind of preface going back to our last slide. I also want to share the fact that AT is not alien or far off or weird, much like Monica mentioned, a one-hand can opener. Everyone in their pocket who has the biggest, most expansive AT tool we've ever made, which is a cell phone, smartphone. Especially if you have an Apple phone, you can do so many things. You can copy an OCR printed word, you can magnify, you can read aloud, you can connect to certain type of hearing aids. So AT is all around us, it's just how you use it. And any kind of accommodation or adjustment in technology or low or high tech can be seen as something like that. But to move back on topic, I'm going to be showing you a demo of a screen reader in a second. But first I want to kind of explain what that is and give a couple of examples. And then we'll go into an actual demo of the screen reader for you. I just kind of want you to in the back of your head just think about what this sounds like. And notice the patterns that it takes to get through a document because it's not the same as being a sighted user would read something quickly and be done with it. So a screen reader is a piece of software that reads text, navigates elements, one other relevant information to a student-- or to a person who has low vision or blind. So these are ways to explain is imagine your monitor is off, you now have to navigate without your monitor. That's how someone with low vision operates. So heavy use of keyboard shortcuts and key commands. As you'll see here in a second, you're going to get a lot of audio feedback. For example, on my setup, I have echo keys. So you'll say something like NVDA plus whatever key I'm touching. You can change the verbosity. So a very skilled user may have little speech output because they're so comfortable with their environment that they don't need a lot of help, but someone like me who is more visual learner, more visual user. I use more speech because it helps me kind of keep track what I'm doing. So again, it's designed to allow independent navigation. The goal is for anyone who needs it can say, I can get on to a website, maybe I can order tickets from somewhere. I can go on Amazon. I can check my bank statements. I can write a resume. The idea is giving independence back to the user of the technology. Screen readers aren't just on desktop. As I was going to mention, Google, iOS or Apple and iOS both have screen readers built in. Chromebooks also have a Chrome screen reader built in. So it's not just a desktop or Windows PC. So there's two big differences, first party versus third. So the first party is like I said, Apple screen reader, Google screen reader, Windows Narrator versus something like I'm going to show you today, which is NVDA, which is Non-Visual Desktop Access, which is a free Windows-only screen reader. Or another equally almost more popular screen reader is JAWS, so that's Job Access With Speech. That is a paid third-party software. So that means that you're kind of at the mercy of the vendor to make sure it's updated. And in our setting, the school setting, usually the institution would usually buy a long-term license and then have to get support that way. I think I'm ready to-- MONICA OLSSON: Shaun, I-- oh, sorry. SHAUN HEGNEY: No, go ahead. MONICA OLSSON: I didn't mean to interrupt you. This is Monica. Would you like me to stop screen sharing now so you can take over? SHAUN HEGNEY: That's great. MONICA OLSSON: OK, great. Let me do that. I got to move my captions out of the way. OK, I believe I've stopped screen sharing, so you should have full control over a screen sharing for us now. SHAUN HEGNEY: Let's see. OK. MONICA OLSSON: This is Monica again. [INAUDIBLE]. [MUSIC PLAYING] NVDA: NVDA Launcher. SHAUN HEGNEY: Sorry, Monica, go ahead. MONICA OLSSON: I was just going to say a few things as you were getting ready and just a reminder that there's very different-- There's a lot of different settings that users of screen readers can choose for themselves. And so one thing that Shaun mentioned is that you're going to hear perhaps a higher level of feedback than maybe a different user might use. So in addition to hearing what the screen reader is reading on the screen with the document he'll have open. But as Shaun's using his keyboard commands, you're going to hear a little bit of that feedback as well. So if you go, hmm, I did not understand what that word was or I did not-- I don't think that word is on the screen. It might be because of the feedback that the user has chosen for their screen reader experience. SHAUN HEGNEY: Just keep in mind a screen reader is also going to give you things like navigational element like arrow up or down focus box, text box, click OK, stuff like things you wouldn't even consider reading out loud. Because the person is disabled or visually impaired, they need those audio cues to navigate the operating system. So if anybody wants-- if any cohost wants to jump in just let me know I can stop talking, just jump in as needed. One thing I was going to explain to is NVDA is a great option because two reasons. It's free-- actually, a couple of reasons. It's free. It is somewhat-- it's a little more basic and its ability to read so it won't kind of-- it didn't have as many magic tricks to kind of get around inaccessible stuff. And as you can see here, I'm using it in basically like a non-admin rights mode. So you can actually install this on your work computer without needing admin rights or without messing with any configs. It will just run as long as your NVDA launcher is open and you can quit and it'll go away. NVDA: [INAUDIBLE] continue. Welcome to NVDA dialog. Welcome [INAUDIBLE] most welcome [INAUDIBLE] SHAUN HEGNEY: So now we're going to navigate to an accessible Word document that you will see later, Monica, graciously provided for me. So I just want you to kind of listen to what-- I'm going to walk you through it to the end. But I was you to just listen to what it sounds like it and feels like to go through a document this way, which is how you would normally read it. NVDA: [INAUDIBLE] SHAUN HEGNEY: As you can see, I'm getting a lot of feedback. It's trying to tell me where I'm at in the screen. I do have a couple features on that are not as common. I have basically read under what's my-- under my mouse cursor or screen cursor because, again, I'm more visual person so it helps me-- actually make sense of what it's saying. NVDA: [INAUDIBLE] accessible Word templates for NVDA plus down arrow profit page one instructions. First, download this document word file onto your computer and open the file using the Microsoft Word application. Let me share my screen with you. Beginner's guide-- SHAUN HEGNEY: So if you can notice right away, the SBCTC logo is not announced, it's just an image. There's also no headings. So we can't-- I can't only tell where-- say your eyes were closed. You couldn't tell which heading is more important. It could be all the same size. The text is relatively easy to navigate through. I'll just show you what a user might experience just navigating. NVDA: NVDA plus down arrow, down arrow, down arrow. We attend all kinds of online meetings, down arrow, people. This is a wonderful experience connecting with down arrow, down arrow. SHAUN HEGNEY: So you can use tab, but the problem with this NVDA is tab uses it to navigated around the navigational element, not the content page. And obviously, if I was using more key commands, I could speed this up. But I knew you were just going to take longer to read the more experienced user. But I want to-- also, again, I'll have you look at this images coming up and listen to what they say-- listen to what happened when I move past them. NVDA: NVDA, plus down arrow, down arrow, down arrow, down arrow, graphic. SHAUN HEGNEY: So we have no description of what this even is. This is a lot of content we're missing. NVDA: Do you or-- [INAUDIBLE] inaccessible word template. SHAUN HEGNEY: So just another point, obviously, this is visually hard to see but also it's hard to read because it's not in a clear list or identifying set of bullet points. NVDA: NVDA plus control plus down arrow. Right eleven. Do explain aloud content that is presented in visual form such as graphs, tables, and pictures. NVDA plus down arrow, graphic, page, break, page two, things to consider when-- Five people-- SHAUN HEGNEY: So it also kind of struggles to know which way to go. It can do it pretty well without page headings, but it still confuses it sometimes. NVDA: The thing-- to do-- reform or SHAUN HEGNEY: I also want to show you real quick the importance of accessible links. Because you can see these links and you wouldn't read these aloud. You'd just go, "OK. I'll go there." But for say, your coworker or your student is blind, this is what they would have to do to get to these links. NVDA: NVDA plus control plus down arrow. Right six. NVDA plus down arrow. Page three. For more information, start webinar training by spelling out control plus up arrow for NVDA. Start webinar. NVDA plus control plus down arrow. NVDA plus down arrow. Run accessibility check on down arrow. For more information. Down arrow. Start webinar training by spelling error TGPi. Control plus down arrow. Out of links. Start Google. Link https slash slash support dot Google dot com slash dot slash-- SHAUN HEGNEY: So as you see, basically, that's nothing. That's gibberish to anyone. So now we're going to switch to the accessible document. Do you have any questions before I move on? AUDIENCE: I notice that you've got it set on a voice with an English accent. SHAUN HEGNEY: Right. AUDIENCE: Do you have choices and why did you choose that accent? SHAUN HEGNEY: I chose this accent because it's the default NVDA voice and I hate it. A lot of the voices, I can-- if we have time at the end, I'll show JAWS as well. The standard voices are pretty bad but they kind of get people used to them. That's why I wanted to share it because it's an inconvenient barrier to any user who's maybe not used to that kind of synthesized voice. You can certainly change it, but a lot of times, people train on the pre-installed voice because it's everywhere. So, yeah. You can change it. It's just this is the standard, what you would get out of the box. SUSANNE WEATHERLY: Sean, from the chat, we do have-- Christie asked how long does it take to convert it? Mentioned that we're going to be practicing during breakouts, but. SHAUN HEGNEY: Right. You're getting practice during breakouts. Like Monica already mentioned Word and Suzanne has as well. Word is pretty reasonable once you get your headings in, once you get your top format in. I would say if you're writing a standard document, it probably doesn't take you more-- like once you get used to doing it, I would say 15 minutes to a half an hour. And that's a big document. For a technology certificate, I've done a hundred page document in under an hour. Following the steps-- my biggest concern for anyone out there is do as many steps as you can, every little bit helps. Especially when you're converting PDFs, make sure they're text searchable. That alone will put you ahead of the stack. But as you can see, I can still kind of get through it. It's just more work. That's what I was trying to explain or demonstrate that it's a barrier, but it's also more time for someone like your typical blind student to get through this content. MONICA OLSSON: Thanks, Sean. In the interest of time, I'm going to suggest that we hold off on taking questions for a little while. SHAUN HEGNEY: Sure, sorry. MONICA OLSSON: No, that's fine. So if participants have additional questions, please take note of your questions and feel free to ask those in your breakout session. I want to make sure that we are able to get through all of our core concepts before we go to the breakout session. And if you don't know what we mean by headings, and we've mentioned those a couple of times now, we are going to explain that very soon. But essentially when Sean-- and go ahead Sean and get ready with the accessible document. When he was navigating that first document-- SHAUN HEGNEY: Go ahead. MONICA OLSSON: If you're a sighted person, you can visually detect what might look like sections or headings on the page, because the text is larger and bolded. But if it hasn't been formatted or coded properly, then someone like Sean, who is using a screen reader, it can't detect it in the same way and can't navigate the document in the same way. So again, we'll talk about that more in a minute. I just wanted to kind of re-explain this concept that came up in Sean's demo. Sean, I'm going to hand it back over to you now for the accessible doc demo and then we're going to go ahead and have our break. SHAUN HEGNEY: Sure. And I just want to welcome everyone. At the end of the meeting, I will share my email. I am more than happy to answer any questions you might have or do one on ones with you to help you out. This is a really complex topic. So please feel free reach out at the end. But as Monica mentioned, you can see that this looks like this first-- how to make a document accessible. That looks like a header because it is, but you want to avoid using bold and italics on their own because they're not headers. I'll demonstrate that now. So we're going to try to read through again. Just one sec. NVDA: How to make accessible Word doc-- NVDA control. Control, control plus [INAUDIBLE] NVDA, NVDA plus control plus up arrow, right eleven. SHAUN HEGNEY: So you can also see, if you're not super experienced, I'm basically changing the speed by accident. That's a good example of if you're a new user, you might do that by accident and you have to take some time to get back to where you were. But I'll try reading it again. NVDA: Down arrow. Text is the most often used format for presenting slash sharing information. Luckily, it's-- NVDA plus down arrow-- is the most often used format for presenting slash sharing information. Luckily, it's also the most accessible format. If formatted correctly, you will use this document to practice the steps involved in making Word documents accessible. Heading, level two. Topic. SHAUN HEGNEY: So you can see it said that now, it's heading level two. That means if you're writing an outline, that's like your secondary main topic. But that gives me a point of understanding that, OK, this is an important topic now. I'm going to pay attention. And as you can see, we also have a bulleted list here that is correctly formatted and let's see how that reads. NVDA: NVDA plus down arrow. Heading level two. Topics. Apply headings to a document. Add alt text to an image. Use tables appropriately and formal them correctly. Use appropriate font, font size, and color to improve readability. SHAUN HEGNEY: OK. So what it's doing is it will read correctly through that list and it'll follow correctly. I also wanted to-- I also wanted to show-- OK, so we have an image here, pointing out how to successfully enter alt text. I want to just let you hear what that sounds like coming from text to an image that's correct. NVDA: Final tip. To re-install, the checker will not-- be careful. SHAUN HEGNEY: So it's being kind of finicky. I'll come back to that later. But you can see the hyperlinks here. We have an actual correctly formatted hyperlink that is descriptive. I'll let you listen to that. NVDA: NVDA plus down arrow. Page four. Section two. Short audio of link. You're reading a hyperlink out of link, not [INAUDIBLE]. SHAUN HEGNEY: So you can see it will try to go in and out of the link and when you have a really long string like that, it will just get confused and confuse the user. And as you can see, the whole structure sounds much better. It logically follows. NVDA: Color, color. The final tip. NVDA plus control plus down arrow. Right six. NVDA plus down arrow. Heading level two. Installing Vision Australia's document accessibility toolbar, DAT out of link. SHAUN HEGNEY: Well, that's a long link, it actually makes sense. I mean, granted, it will say-- It takes a little while to get through it, but it makes sense. So was there any other questions before we move on? Or, Monica, you wanted to jump in? Sorry. MONICA OLSSON: Sorry, I think the time has passed. I was going to suggest that you put your speech viewer on. Because one of participants was having a hard time hearing her screen reader and I thought speech viewer might help. But that's OK. So instead I'll just explain. So the speech viewer is another setting option that actually a user could select when they're using their screen reader. So the speech viewer would actually show visually on the screen what it's reading as it's reading. So that may have been a better choice for us, for those of you who maybe needed visual input to follow along. So that's something we'll keep in mind as we create further trainings. I think we have maybe time for just like maybe one or two questions for Sean around his screen reader demo and then we do need to take a five minute break. AUDIENCE: I have a quick question, if that's OK, Sean. It was difficult for me to follow what was going on and my ears aren't really trained to understand your reader. So can you tell me what it does say when it's formatted correctly? What it would tell you when you see an image? SHAUN HEGNEY: OK. So an image would say-- uncorrect would just say image, and it would skip it. Image that was correct, it would describe the image. So that's why alt text is so important because it will describe your alt text and then move on. So it might say arrow pointing at an option bar to change font. Whatever you put in the alt text, it will read out. Because it's not actually reading-- it's not actually deciphering the image, it's deciphering what your alt text is listed as. AUDIENCE: So it's describing the text that's related to the image. It doesn't actually-- SHAUN HEGNEY: Yeah. It can't actually-- AUDIENCE: --pick up the image. SHAUN HEGNEY: Yeah. It can't comprehend the image. AUDIENCE: Thank you. That's very helpful. I appreciate that. SHAUN HEGNEY: Yes, of course. MONICA OLSSON: Thanks, Veronica, for your question. This is Monica. I see some similar questions in the chat so this is great feedback for us. I'm thinking maybe in the future we'll put the screen reader demo after we go through the core concepts. But in our next section, after our break, we're actually going to explain and define what is alt text and what does it do for someone using assistive technology. So, Sean, definitely beginning to introduce that to us now in his demo, but some of the questions that are coming up for participants right now, I believe we will address in the next section of our presentation. So thank you for bringing those considerations to our attention. Now I'm going to move us into our five minute break. So everyone please come back at 2:02 or 2:03 and then we'll continue on for our next section. Thank you. All right. This is Monica speaking. Welcome back, everyone. Hopefully you were able to get a drink of water, stretch your legs a little bit. We are now entering the second portion of our presentation. I'm going to hand the presentation over to Suzanne right now who's going to continue to take you through examples of an inaccessible experience. And then we're actually going to go through our core designs with you. And Suzanne, do you have screen control? Yes, you do. I think you're on mute. SUSANNE WEATHERLY: Yeah, sorry. I wasn't able to unmute myself when I had the remote control, so I apologize. I will request that again. And we will go back. There we go. MONICA OLSSON: OK. You should have it now. I stopped sharing and approved your control request. SUSANNE WEATHERLY: Oh, OK. So you want me to screen share from my side then? Or can you screen share? MONICA OLSSON: I think that's going to be better. Can you screen share from your side? SUSANNE WEATHERLY: OK, sure. All right. MONICA OLSSON: This is Monica again. Oh, you've got it, Suzanne, never mind. SUSANNE WEATHERLY: So, I think as we all just experienced, right, listening to Sean try to go through that document, it's inaccessible. It's inaccessible for all of us and it's very difficult to understand. I have used NVDA to check documents and it is just that frustrating. Even for people who have some experience using a screen reader to try to go through documents that are inaccessible. What we wanted to do, though, is try to demonstrate a little bit of what that's like, to engage with inaccessible materials. So you can get a little of the experience of why it's so important to make sure that we're creating accessible content that is equitable access for all. And what we have is an image of what's been labeled as the wheelchair accessible restroom somewhere but there are two small stairs to get into it. And maybe for some, that's not that big of a barrier, but for somebody in a wheelchair, that restroom is no longer accessible to them. And so we want to make sure that we're not creating inaccessible experiences for others. But to give you all a little bit of experience with that-- you kind of just had some. We're going to go ahead and watch a video. If you'll all get ready and take some notes, this is a video that doesn't have sound. It's just visual information being provided in sign language. And if you are ASL impaired, it may be a little frustrating to try to get this information. So as you're taking a look at the information that's a video on the screen in ASL, try to take some notes about how to fill out a form for requesting an ASL interpreter on our campus. So as I mentioned, if you're ASL impaired, this might be very frustrating because you don't know exactly what's being said and what the information is that you need to be following. Luckily, I can turn on closed captions and now, I have access to the information that's being shared so if you are ASL impaired, you can still get the information in written form of what's being shown in the video. Now this video doesn't have audio descriptions on it, which is a whole other conversation, but just that little bit of frustration, right? So individuals who depend on captions, if they're interacting with a video that does not have it, it can be quite frustrating to try to get information from that because it's completely inaccessible to them. Sorry. There's a couple other demonstrations here. We don't really have time to do them today. I want us to have a little bit more time later to really go through those core concepts and then do the practice stuff at the end. But these presentation materials are all in that folder, including this slide deck. Feel free to come in here and click on that. What the next inaccessible document is basically a screen reader doing what Sean just did live for us, but just kind of juxtaposing an inaccessible document with an accessible document and what that experience is like. And then the last two are very cute. Frozen two trailer. One without audio descriptions and what I would typically do is show you that and have no screen and you're just listening to the sounds and it sounds so fun, but you can't really hear what's going on. You don't understand it. There's no visual information to go with it versus a video that has audio descriptions, where the visual information is being presented in a verbal format to make sure that anybody who is interacting with that is actually able to enjoy it. Monica, do we have a few minutes where I could play that one with audio descriptions, do you think? MONICA OLSSON: Unfortunately, I don't think so Suzanne. We've got just about 50 minutes to get through the rest of our content, so let's move on. SUSANNE WEATHERLY: What I will say as Monica is pulling up her screen to share again, is that as we're creating this video today, what we are attempting to do is make sure that it is accessible as we create it. So as we're creating these videos and recording them, we are verbally saying visual information that might be on the screen. So that way anybody who might be interacting with this presentation in the future for whatever reason can't see that information, they still have access to that same content in an accessible form because all of the visual information is being described verbally as well. MONICA OLSSON: Thank you, Suzanne. And we encourage everyone to go in and access these documents later on and click the links and explore yourself. Can everyone give me a thumbs up or a nod or some sort of visual indicator you can see my screen again? Great. Thank you. OK, so now we're actually going to talk about core accessible design principles. And I'm going to kick us off. I want to describe an image that I chose to share on this slide titled Creating Accessible Content. It is a circle with four different graphics inside of it and this image is representing diversity and accessibility in my mind, so it relates to accessible design and universal design. There's an image of an eye, a hand, a brain, and an ear. So it sort of metaphorically kind of getting out to all the different ways people might perceive and take in information. OK. This next slide is titled Core Concept Number One Meaningful Heading Structure. So heading structure is something that you can apply and use in a document like Microsoft Word, in a Canvas page, in a Google Doc. It's also something that you can use when designing web pages. When you use heading structure, you are providing logical organization to the document or the web page, which allows everyone, but especially people who rely on assistive technology to navigate their screen, more ability to navigate the document in a logical way in front of them. For example, and I think this is something that Sean started to get to at in his demonstration, there are various different commands and keys that assistive technology users can use to navigate a web page or document. For example, screen readers can use the H key to bring up onto their screen a list of all of the headings that's on that web page or document and then they can navigate by heading level and select which heading they actually want to zero in on or zoom in on and read. But if we haven't designed the sections of our document or the sections of our web page using semantic heading structure or using the formatting option in whatever platform we're in, that is essentially taken away from screen readers. So as sighted people, we might be able to discern when something is a heading or a main section in a document or a web page because it's big and bold or underlined or something. But again, if the back end design has not been associated with a heading level, that experience is lost for people who are using assistive technology to navigate. So some key pieces around heading structure that I want to share with you right now, and then we'll actually get into practicing it later, is for the purpose of this training, we suggest that the title of your document or page is heading level one. And then the next main sections you would begin to use would be heading level two. That's your main section after the title of the document or the page. And the image I have on the screen includes orange arrows that are pointing towards and describing different heading levels. If you need to create a subsection under a main heading, then, for example, you can use heading level 3 and that's a subsection under heading level two. Once you're done with that subsection, if you need to go back and write another main section for your page or document, you would then go back and use heading level two. My recommendations around heading structure is to not get overly complicated. As much as possible, stick to three or four heading levels and don't go beyond that. It can get pretty difficult for assistive technology users to navigate a page or document that has got many, many levels of headings on it. So simple structure is best, three to four levels. And you want to use your heading levels in chronological order. So you're not going to skip from heading level one to heading level three because you like the way heading level three looks on your page, for example. You need to use heading level first and then apply heading level 3 as a subsection, for example. OK. I know there's probably some questions about meaningful heading structure and how to actually do that in a document. We're going to practice soon, so hang on. Hang tight. We're going to move on to the next concept. And who has alt text? SUSANNE WEATHERLY: Yeah. That is me, hi. So and we talked a little bit about this and Sean kind of showed that, right, but an important piece of making accessible content is making sure that our images have alternative text, alt text. So writing meaningful alternative text descriptions for images and pictures. There are definitely times when we're going to use images that might just be decorative and that's OK, but we want to still mark them as such so that way a screen reader would know to skip those things that might just be decorative instead of getting to something, reading image, and then a screen reader user doesn't know if that image is just decorative or if there might be content in there that they're not able to access. On the next slide, we're going to go into a little bit more depth about that. Basically, what we want to avoid is just putting images or diagrams into a document or any content that we're creating without doing any kind of description. We don't want to just ignore something that is decorative without trying to mark it as such. And when it comes to-- There's an image on the screen that's titled Color Blind Problems and it's a pie chart with three different sized sections that are all the same color. It's all in gray scale and the color labels are people asking me what color this is, color based games, and traffic lights. So this is just a fun little diagram, but one thing that also might just be a pro tip for those of you that want to go into a lot more depth about making accessible images, is that, you can also then use patterns to go along with those different sections of a chart to be able to then identify the sections and how they might meet up with a different label that's somewhere else. So we do want to make sure that we're doing alternative text descriptions on images and then if there is something decorative, we want to mark it as such. Or if we need to, we can add a null alt text which then would tell a screen reader to be able to skip that. We're going to get to practice that in the breakouts later. MONICA OLSSON: Thank you Suzanne. And Suzanne actually provided you an auditory alt description when she described that image on the screen and then on the right hand of the screen, you can actually see that description written out. That's a great example of what good alt text for an image is. OK. Next. Thank you, got it. SUSANNE WEATHERLY: This one's me. This is Alyssa and I'm going to talk about core concept three, which is descriptive hyperlinks. And what that means is embedding URLs or links into text that clearly describes the link destination in a meaningful or contextualized way. And I know some of this stuff might not make a lot of sense right now because we're not showing you how to do that. We're just covering those core concepts. But I promise that we'll get to the demo of how to do these. And the reason why you would want to use a descriptive hyperlink link is because full length URLs are extremely difficult to read. They're usually really long and they rarely contain any useful information. So you just want to be sure to embed your links into descriptive text that tells the reader, and by reader, I mean anyone someone using assistive technology, someone who's sighted, who's going to tell the reader where they're going to be taken if they click on that link. And I'm going to explain this further on the next slide if you could advance for me, Monica. All right. So I want to share some tips for using descriptive hyperlinks. I think the best way to do it is to give you an example. So let's say that we want to direct readers to a specific online resources. And in this example, I'll use our Library of Accessibility Resources. There are a few things that we would want to avoid doing if we were going to share a URL with someone. So the first thing to avoid would to be pasting in a full length URL that is just the plain text of the URL. It's not hyperlinked. So what that means is if you click on it, it doesn't take you anywhere because it's not linked to anything. But the other reason why we wouldn't want to just paste in a plain text URL is because a screen reader is going to read that out in full text and read the full URL letter by letter. So it's actually going to read you something like H, T, T, P, S, colon, slash, slash, S, B, T, C, and so on, until it reads all of the text and that's not actually very helpful. It's not formatted as a URL or a true hyperlink. It doesn't go anywhere. It prevents the screen reader software from being able to navigate or skip through the content by URL because it doesn't identify it as a URL. And I don't know, Monica or maybe Sean, do you know the key that a screen reader uses for navigating by URL? You mentioned the H key was navigating with headings. Do the key for-- I'm just curious for my own learning. MONICA OLSSON: Yeah, this is Monica. I mean, obviously, I'll defer to Sean who's a native user, but I believe that you can use the L key to bring up a list of links on your website page or your document so that a screen reader user can actually search by all the links in that document. Is that correct, Sean? SHAUN HEGNEY: So you asked a question about links, right? SUSANNE WEATHERLY: Yeah. Is it the L key that you use to navigate with links through a page? SHAUN HEGNEY: Let's see. I think it might be L. That's the thing. It's hard. Every screen reader is different. You have to look at the actual manual but yes, it's a common feature of screen reader is to navigate by links, headings, paragraphs, content anchors, so pictures or other bullet points. Yeah, it's not that hard to do. It would just be-- Usually, any screen reader would use a command key plus a modifier key to do that, so. SUSANNE WEATHERLY: Awesome, thank you. I was hoping it was L for link, so that it would be easy to remember. Because it was H for headings, so. [LAUGHS] Thanks. So, in addition to it not being a true hyperlink and not being able to skim through a page to look for URLs, it also prevents everyone who's using your content from clicking on the link. So that's why it's super important to make sure that your hyperlinks are formatted. But then when we're formatting them, we also want to make sure that they're embedded in contextualized, meaningful information. So the second thing that we want to avoid is using that same hyperlink in its full length form and then you know how you click the space key or click a return after a hyperlink and it automatically formats it as a link? Well, that's awesome that's it's actually linked somewhere, that's great. But it still doesn't tell our readers very much information. So why would we not want to do it this way? Well, it's because it's cumbersome for our readers and again, the screen reading software will read out the entire link letter by letter after it's identified as a link. So the change in the way the screen reader would read it now is that it's going to say link to tell the person that they're going to have a link read to them, but then it's going to read out that same information that I read earlier. H, T, T, P, S, colon, backslash, backslash. And I mean, if you're just going through your document trying to find a single link, that would be really hard if you had to listen to that every single time you came to one of those. And then also for sighted readers, lengthy URLs create visual clutter on your page and they're just really not very nice to look at. Right about now, you might be asking me when might you include a hyperlinked URL in its full text. We don't do that very often. In my opinion, the most important-- or most appropriate use for a full URL would be in a hard copy handout where someone might need to be able to retype the actual URL in order to access that resource. And if that was the case, the best practice there would be to use a URL shortening tool like bit.ly. And you can make URLs shorter. And you can also customize part of it and make it a lot easier to read and remember. OK. So we're going to avoid plain text URLs. We're going to avoid linked URLs that don't have meaningful text. And then the last thing that we're going to avoid when we're working with hyperlinks is to avoid hyperlinking generic phrases like click here, click here, click here. That just lacks any context or meaning. So screen reading software is going to say "link." That's what will be read-- "link." It's identifying it's going to read you a URL and then it's going to read you, "click here." But it gives absolutely no other information about where that URL goes. So when you're skimming through content and you repeatedly just hear "link, click here. Link, click here. Link, click here." That just isn't really very helpful. A really great way to check and see if your hyperlinks are descriptive enough is to read through them to ensure that they make sense and provide sufficient detail when you read them out of context. So when you read them out of context you should have your URL embedded into a phrase or a sentence that is meaningful. And then that's going to bring us to what we do want to do when we're working with descriptive URLs. So what is the most helpful way to direct readers to a specific online source using a link? Well, the answer to that is that hyperlinks that are embedded directly into meaningful and contextualized text describing where the link takes you will provide non-sighted and sighted readers with the most information. So in this example that I've been using, a good way to direct readers to the SBCTC Library of Accessibility Resources would be to hyperlink that text within the sentence. So doing it this way tells your readers exactly what the resource is, where the link will go, and also makes it much easier to find as you're skimming through the page. So the example sentence would be Visit SBCTC's Library of Accessibility Resources to learn more about descriptive hyperlinks and I would put the hyperlinked text as SBCTC's Library of Accessibility Resources because that tells the reader what the resource is and where they're going to go if they click on that link. And then the last tip that I want to share with you about descriptive hyperlinks is that many programs will automatically-- they just kind of like auto format your links for you in another color, which is awesome, but often that color can be a little bit light and they are a little hard to see sometimes. And personally, I always go back in and bold all of my hyperlinks because they're a lot easier to read that way. And again, we can answer-- if you have questions about hyperlinks, go ahead and put them in the chat for me and I'll answer those as we're moving on in the content and we'll show you how to create a descriptive hyperlink when we get to our breakout sessions. MONICA OLSSON: Thanks Alyssa. SUSANNE WEATHERLY: Yeah. MONICA OLSSON: OK. Next core concept. Concept number four, accessible lists. I believe this is me. So sometimes when you are creating content, either in a document or a web page you want to list out instructions for example. Well, if you are manually listing one, two, three, four, or you're manually inserting a period, and then a period, and then a period, you're not actually formatting that information truly as a list. So when a screen reader or another piece of assistive technology lands on that list, or something that looks like a list to a sighted user, the screen reader won't acknowledge and announce it as a list. However, when you use the formatting tool in your chosen platform, whether it is Word, Canvas, et cetera, or you use the correct semantic HTML when designing a web page and you actually are applying it as a true list, than the screen reader will be able to announce that person has entered a list. And if it's a numbered list, a screen reader will often announce how many items are in that list and which number of item you're at. So it might say list of five items, item number one. Item number two. And so on and so forth. So the two main tips we have for you is to use numeric or bulleted lists but to style them as actual lists in your styling pane of your chosen platform. And don't manually type out numbers, dashes, or other symbols to visually give the appearance of a list. SUSANNE WEATHERLY: OK. Back to me for readability of text. We're going to talk about font size, font style, font color, and then we're also going to talk about real text. So the tips here are to use a simple Sans Serif font in a 12 point or larger font size. You also want to check and make sure that your background color and your text color have a contrast ratio of 4.5:1 or higher. You also want to make sure that you are not using color alone to indicate meaning. And then you also want to use real text rather than scanned images of text and I'll talk a little bit more about these. One thing to note here is that your font size, the style, and the color-- when you're choosing those, that's a really important decision to make. A lot of us choose visually frequently on what looks best to that-- what looks best to us or colors that we like, but a good rule of thumb to remember is when you're choosing these things is that, generally speaking, the smaller the text size, the more complex the text style, and the lower the contrast ratio the text has against the color of the background, the more difficult your content is going to be for readers to read. And then on real text you want to remember that all text contained in your content should be real, readable text, meaning that it's not, again, scanned images of text. And I'm going to give a little bit more information about these, so Monica, could you go to the next slide for me, please? All right. So when we're selecting font size, style, and color, a font size refers to how large the characters display on a screen or printed page and it's usually measured in points. So I'm sure you're all example with 12 point, 14 point, 16 point. Again, 12 point's a great starting font size, but 14 point is even better. When we're talking about font style, that refers to the design of the font and that's usually referred to by the font name. Examples of that might be Arial or Calibri or Helvetica. There really is no agreed upon single best font for every situation, but typically using a simple Sans Serif style font is a good choice. And I like to think of Sans Serif as meaning without feet so that the letters don't have those extra little lines and decorations coming off of them. It makes them a lot easier to read. So the first bullet on the slide shows you what 10 point font looks like in contrast to a larger font size that's a lot easier to read. So you could do a whole page in 10 point font but should you? No, because it's difficult to read. The second bullet point shows you that a fancy styled font with a lot of decoration, it might be really pretty, but should you use it? No, because that's going to be difficult to read. And then, the last bullet on the slide is talking about color and color refers to the hue or the lightness and the saturation of the text and it's typically represented by a color name or a hex code or you might also see it expressed as an RGB number. And an example of a color name would be black. A hex code, they are a series of numbers and letters usually. The one for black is 000000 and if you were expressing black in RGB format, it would be R0B0G0. So some different ways that color is expressed. And when you're choosing a font color, something to consider is that contrast ratio again between the font color and the background of the page or the screen. To pass a contrast check, color combinations should have that ratio of 4.5 or higher and it's good to avoid color combinations that have extremely low contrast ratios like the yellow on white that you see in the third bullet point here or excessively high contrast combinations. High-high color contrast can cause like a haloing effect and that can also make your readers' eyes really tired. It makes your eyes just get fatigued faster. So I'm curious. Would anyone like to take a guess at what the contrast ratio is for the yellow text on the white background? If you have a guess, put it into the chat for me. Remember we're looking for 4.5 to 1 or higher as the threshold and that meets the WCAG standard that Monica was talking about earlier. So we have some guesses. Thomas says 2 to 1. Suki says 1.5 to 1. I think we'll give Suki the prize. Suki's the closest. The ratio here is 1.17 to one. So you can see that that's pretty low. Also the other thing that you want to remember about color is not to use color alone to indicate meaning. For example, let's say you decide to use a green font for all of your vocabulary words and then you ask students to go in and explore all of the definitions of the words that are in green throughout the course. Well, the usefulness of that green text is going to be lost for a student using assistive technology because assistive technologies do not, that I know of, navigate by color. So they're not going to be able to skim through the page content using assistive technology to identify or review those words. And the meaning of that green text would also be lost for a student who might have a red green color deficiency. This color deficiency, or color blindness, the red green is the most common type and students who have a red green color blindness would not be able also to identify words in green. So you would want to use another way. you could still use green, but you could put them off in a separate section that maybe was labeled as words to review so that it could be easily found using navigation through a heading structure. You should also avoid using a rainbow of colors and a rainbow of text and highlighting in your content as this can also be distracting and cause visual confusion and it also does not give any information to the person who might be trying to navigate your content using a screen reader. So all of these things, the style, the size, the color, they all impact one another, so you can't just decide one. You really need to consider all three before you make your final selection. As an example, sometimes you can compensate for a lower contrast between colors by increasing the font size, but then if you've also chosen a really complex styled font, adjusting the size or color might not be enough to ensure that it's easily readable by your audience. Next slide. OK. This next slide I'm not going to go through and read all of these, but this graphic on the left side of this table shows you four different color combinations that do not pass a contrast check and on the right side shows you four color combinations that do. So I'll just read one as an example, so the top one from each of the columns. The poor contrast, the dark red on black does not pass and it's under that 4.5 to 1 threshold. It comes in at 3.56 to one. And then on the other side of the graphic, the top one is yellow on black which passes at 17.93 to one. So you can see that one has a lot higher contrast. So that's just an example page so you can kind of get an idea of what different colors look like on different backgrounds. And you might recognize the white on green combo. We have a lot of traffic signs that are white on green and that's because they're easy to read. All right. Next slide. OK. This slide is just to show you the WebAIM contrast checker. I really like this tool. It's a great way to ensure that your text and page color combinations are going to be easy to read and you can just enter a hex code for any text color or background color combination and you click a button and it will let if it passes that 4.5 to 1 contrast threshold. So after the presentation, go in here, click the WebAIM contrast checker link, and play around with that, because it's actually a lot of fun. All right. The last slide in this section-- if you'll go to the next one, please? Thank you-- is about real text. So what is real text? What on Earth do we mean by that? Real text consists of the true text characters that are on a page. These characters can be recognized or read by assistive technologies which makes them adaptable, makes them customizable, and also makes them searchable. And so I know that's kind of confusing because it doesn't really tell you a lot. So I actually think the best way to understand what real text is to understand what it is not. So real text is not text that's embedded in images or graphics or screenshots or scanned documents. That kind of text is just an image of text. So I'll go back to the example that Suzanne used earlier of that scanned PDF. If you scan a copy of an article for students to read, that resulting file is only an image of those words rather than the real text and because it's an image, and Sean mentioned this earlier, that screen readers do not go in and actually see the image. They just read what's in the alternative text. So the screen reader user is not going to get any information. They're not going to be able to read that article. It's going to be completely inaccessible. And besides not being able to access it with assistive technology, a lot of times scanned images of text, they also can't be resized and keep adequate resolution to be read. So if you needed to use a screen magnifier to make it bigger to be able to see it, you might lose the resolution and it might be all fuzzy and really hard to read. Also, you can't keyword search with text that's in images because your computer just recognizes it just as an image, so this creates a readability and usability issue for a lot of students. And the loss of this adaptability means that it's not accessible for your students, and as Suzanne also mentioned earlier, scanned documents can be run through an OCR process. And that process will take that scanned image, and it will convert it to real text. But you do have to have Adobe Pro to be able to do that. And if you do need to include text that is in like an image or a graphic or maybe like it's the page banner for your course or something, you would want to be sure to mark that with appropriate alternative text or some sort of description that will describe what that is or why it's included. And then if it's just something that's decorative, many programs also have the option to just mark an image as decorative and in that case, the assistive technology will just skip the image. Last tip to share here is that a-- MONICA OLSSON: [INAUDIBLE] ALISSA SELLS: No, that's OK-- is that the quickest way to determine if text is real or if it is an image is to try selecting it with your cursor. So if you can't highlight it or select it or use control F to search it, it's not going to be real text. And if you go back into the slides later, on this particular slide what I've done on the left hand side of the slide is actual real text and the right side as you can read it says this is not real text. It is an image of text. You cannot select it, search it, or adapt it. So if you go into the slides later and click on that, you'll see that it's actually an image and not real text. So that's an easy way to know if the texture dealing with is real text or not. All right. I think that's it for this section. MONICA OLSSON: Thanks Alyssa. ALISSA SELLS: Yeah. MONICA OLSSON: OK. This is Monica speaking and I'm going to talk about core concept number six, which is table structure and layout. So at this point in your career you've probably designed a table of some sort or another when creating content, either for a web page or a document. And there's a few accessibility guidelines that we'd like you to keep in mind when you are choosing to use a table or not and then how you actually structure or design your tables when you use them. The golden rule is please don't use table purely for aesthetic layout. Tables are designed to display data that is relational to itself. Tables are not meant to organize information in different spots of the page because that's how you want it to look. So you need to be using tables for data and not layout. The other golden rule is that when you do create a table, you need to apply either a header row and/or header column. I have a picture in the next slide that's going to actually show you the anatomy of an accessible table, so it'll actually show you what I mean by header row or header column. The reason why applying header row or header column in your table is important is it associates the data appropriately. So if you are relying on assistive technology and you're navigating a table, you're going to navigate left to right, top to bottom. If there's no header row, your screen reader is just going to read the individual cells as it moves along. But if there's a header row or a header column applied, the screen reader will actually tell you how that information is associated within the table. So let me move on to the next slide to give you a better visual of what I mean. One way to check if your table has logical reading flow is to use your Tab key on your computer and make sure that as you're moving through your table it's going left to right, top to bottom. OK. So this image is something I created to help explain the anatomy of an accessible table. There's one piece that we didn't get into totally just yet but to make an accessible table, you want to always include a table caption. You also want to go in and apply alternative text to describe what the table is actually displaying to the reader. And then these blue arrows that are pointing toward the table are identifying what I mean by header row or header column. So this right here is called a header row. That's the top row and the scope would be for the column. I'm regretting that I didn't actually just write a table with some useful information in it, but let's say I wanted to display my favorite colors or something like that. If this cell that I'm pointing towards right now in the header row said color, then it would be associated with the actual data in the column following it. This is called a header column here on the left and the scope for the column would be the rows across from that column. Again, I'm going to go into more detail in our breakout session if you've chosen Word with Monica so we can talk a little bit more about tables, header row, and scope. All right. Concept seven. SUSANNE WEATHERLY: So we have lots of online videos and meetings that we're doing now, right? It has been a couple of years. So this core concept is talking about making sure that those are accessible as well. So what we want to keep in mind is that as we record videos that we're making them accessible by verbally describing any of that visual information on the screen. Two, that we're accurately captioning the videos afterwards using whatever platform you might be most prone to using, Panopto or YouTube. There is, through the state board, our colleges have access to 3Play, where videos can be sent to that company who will then provide accurate captions that can then be embedded into your videos as well. You would probably want to check in with your e-learning department at your individual college to find out how you can utilize the 3Play services for having captioning done. And then lastly, when we're in a Zoom meeting that we might be hosting, the host of that meeting can always enable Zoom captions. The next slide is going to talk a little bit more about those pieces as well. Advance. Monica, if you put us to the next slide, please. Oh. May have lost her for a second. ALISSA SELLS: Do you have control of Monica's screen, by chance? SUSANNE WEATHERLY: I do not. ALISSA SELLS: OK. There's a note that she said she was stepping away for just a second. SUSANNE WEATHERLY: Oh, OK. OK, well, I'll just kind of keep going and describing the information. SHAUN HEGNEY: Do you want me to screen share instead? To get you to your slide? SUSANNE WEATHERLY: Yeah, sure. SHAUN HEGNEY: Let's see if I can take over from her. Let's give this a try. Let's see. OK, so this should be the slide that you want, right? And let me just put you in presentation view. SUSANNE WEATHERLY: Awesome. Thank you. Oh that's-- ALISSA SELLS: Yeah. You got it? SUSANNE WEATHERLY: Yep, thank you. ALISSA SELLS: OK. SUSANNE WEATHERLY: So what we want to do is we're creating these accessible videos and captions. We want to make sure that we're referencing items on that screen, or even if we're in a classroom giving a presentation, that we're explaining what we're trying to show. So for example, we wouldn't want to just say, "Here you can see this graph shows where plant life grows." That's not an accessible way to provide information to somebody who might be in the audience who's not able to visually see that information. Instead, we might want to say something like "The pie graph shows that 85% of plant life is found in the ocean and 15% is found on land." There's one example. What we want to avoid is creating or selecting or posting videos that have no captions at all. Now what we know is that a lot of programs have automated speech recognition captions so there's some automated captions that might show up, which is great. We definitely want to always have at least the automated captions there for some access. But what we don't want to always try to do is just depend on those, so when possible, we definitely want to go back into those caption files that might be automatically have been created to make adjustments to them and update them so that they are accurate so that users who depend on those captions for access are able to read full sentences with punctuation and follow the information and know that it's correct. So there's definitely some links in here that might be helpful about creating accessible videos and making your presentations accessible by verbally explaining that visual information, using clear and concise language, and then lastly, correcting those automated caption files whenever possible to make sure that they are, hopefully, 99% accurate by adding punctuation or correcting any errors that might show up. And what I was about to say with Zoom specifically, because I know we all are hosting Zoom meetings of our own, so any host of a Zoom meeting can turn on the automated captions. So when you start a Zoom meeting of your own, you can go down to the live transcript button or it's called closed caption and then you can enable the live transcript, which is the automated speech recognition captions. Again, giving some access to people, which is better than nothing. If there's ever a need for specific accommodations for a person with a disability, for instance they need accurate live captions or they need accurate post-production captioning, that's where you may end up having a disability service office get involved in doing some remediation to make sure that those captions are accurate when there's an accommodation need. But some captions are still better than nothing. But as we know the automated captions are not perfect and there are definitely going to be errors in that so trying to make sure we correct those before putting videos out to others is always that preference for having accessible videos and captions. ALISSA SELLS: All right. Let me just make sure that we can all see core concept eight on the screen now? Perfect, thank you. So this is going to be the wrap up of the core concepts and then I think we're going to take a break right after this. So let me just talk about this real quick. Core concept eight is about using the accessibility checker and whatever content authoring platform that you're in. Some, not all, but most content editing applications have some form of a built in accessibility checker. An accessibility checker is a tool that can help you find and fix many accessibility issues in your content, but they're not infallible. They're not perfect. They don't identify everything. Let me give you a quick example of that. So an accessibility checker can't determine if the alt text that you wrote is appropriate for the image that you're describing. It will just simply tell you whether or not that alt text exists. So you may have gone in and added alt text, but the checker is not going to help you determine if that description that you've put in there is contextualized enough to give the viewer or reader enough information for that image to be helpful. So that's just one example of a way that an accessibility checker may not be the 100% solution to creating accessible content. In my opinion, the very best way to create accessible content is to integrate these eight core concepts into just your everyday workflow, just all of the concepts that we've talked about today. And then go back when you're done and use the accessibility checker to help you find places where you may have forgotten to do something or you might need to make a correction. I think the most important thing here to remember is that manual checking is still required. You still need to have an understanding of heading structure. Another example would be that checkers will sometimes tell you if you're headings are out of order, but they won't tell you that you're not using headings. So if you go in and you create a whole document but you don't use any headings and then you run the checker, the checker is probably not going to be much help to tell you that you're heading structure's missing. All right. So which programs have accessibility checkers? Well not every program does. The three that we're going to talk about today-- Well, let me backtrack. I'll say two we're going to talk about today have built in checkers. Microsoft Word has a built in checker and Canvas also has a built in checker and we'll explore both of those in the breakout sections. And then Google Docs doesn't have a built-in checker but there is a really super easy-to-install app called Grackle Docs that's for Google Docs. And Suzanne, are you going to actually show that in yours? OK, so Suzanne's going to cover that in the Google breakout. So you'll get more information about these but what's important to remember here is that they exist. They can be helpful but you still need to have the understanding of the core concepts and manually check your content. All right. I think that wraps us up on this and it's time for a 5 minute break. And when we come back, we are going to go to breakout rooms by topic. So we'll have one for Google, one for Microsoft Word, and one for Canvas. I'll be doing the Canvas breakout, Monica's doing Word, and Suzanne will be doing Google. And I'm going to hand it over to Monica right now just to see if there's anything else you want to tell us before we go to break.