Videos

[Edlio Webinar] Accessibility and School Websites: Tips from Jared Smith at WebAIM

Added Apr 14, 2020 •

Copy this URL:
Embed code:	<iframe class="edlio-embed-player" type="text/html" width="640" height="360" src="//help.edlio.com/apps/embed/?v=253567" frameborder="0" allowfullscreen></iframe> Change dimensions

Accessible websites are an important part of your communication plan. With many districts and schools making the transition to distance learning, reaching communities online has become even more essential. Jared Smith, Associate Director of WebAIM, shares quick ways you can make your website accessible to all. Whether you’re a teacher or a webmaster, you’ll get tips you can use immediately for creating more accessible content. ABOUT JARED Jared Smith is the Associate Director of WebAIM. He is a highly demanded presenter and trainer and has provided web accessibility training to tens of thousands of professionals throughout the world. With over 20 years of experience working in the web design, development, and accessibility field, he brings a wealth of knowledge and experience that is used to help others create and maintain highly accessible web content.

Show Transcript

My name is Sara and I work in the Client Success Department here at Edlio and I am going to be facilitating the introduction today for our webinar on Accessibility in School Websites. This webinar is going to be hosted-- in just a moment I'm going to hand it over to Jared Smith, the Associate Director at WebAIM, an accessibility tool for websites. I just wanted to go ahead and make a few notes here and then we can go ahead and get started. We are going to have the Q&A panel open in Zoom. We'll be collecting questions throughout the the webinar and we'll answer as many as we can either during the webinar or at the end of the webinar. If we don't get to your question, I'll follow up by email and we'll also be recording this so if anyone needs to step away, we will be having a recording of it posted shortly. That is the main point that I wanted to make. Again, the Q&A feature is going to be the best way to get your questions answered and we will answer as many as we can but I'm going to go ahead and hand it over to Jared. Okay! Thank you and I appreciate the introduction and the opportunity and invitation to present today on accessibility for school websites. So again, I'm Jared Smith from WebAIM. WebAIM stands for Web Accessibility in Mind. We are a non-profit web accessibility consultancy based at the Center for Persons with Disabilities at Utah State University and we do web accessibility. We've been doing this work for 20 years and have worked with entities all over the world in helping them make their web content and digital resources more accessible to people with disabilities. I appreciate all of you being here today and especially at this very interesting time. I think it's so important, as digital... well, as resources have moved online to to digital environments that our students with disabilities are not left behind. Especially in situations where many of the traditional in-school supports for those students are no longer available. I think the the web really provides a unique platform for those students to be included but only when it is used correctly. So that's what I'm going to talk about-- some ideas, tips, tricks, things to consider for web accessibility. We know that eight and a half percent of the population has a disability that can impact their computer use. Over 20% of the population report some disability. 1 in 5-- over a billion people on the planet. In many ways it's one of the largest groups of disadvantaged people and interestingly it's a group that any of us can enter at any moment in time-- any of us could develop a disability at any time. Statistically, most of us will at some point in our lives particularly with aging processes, most of us will experience a disability. That's one thing that motivates me in the work that I do every day by making web more accessible to people with disabilities today, I'm making it more accessible to my future self. So, we can look at the 8.5% and consider what that means-- what the impact is. I think it's easy to just think about numbers and percents and guidelines laws and requirements. What I want to mostly stress is that we're talking about people-- talking about students, we're talking about individuals that are impacted significantly for good or for bad based on our decisions when it comes to web accessibility. Of note, that eight and a half percent does not include some types of disabilities. It does not include those with color blindness, it does not include those with cognitive and learning disabilities, which is arguably larger than 8 and a half percent all by itself. As we implement accessiblity, there a lot of additional benefits that come from accessibility. It encourages good design and development practices, good accesibility support search engine optimizaton or maybe search engine friendliness by making our content readable by technologies that people with disabilities use we also make it more readable and supported by search engines. It supports internationalisation and translation and customization of our content. It also supports more mobile-friendly content, which again in our in our current environment has also become a more acute point is a lot of these students and their families are now suddenly accessing digital content only on mobile devices. When we talk about accessibility, I think it's useful and powerful to view accessibility as a continuum, as a process, as something that can always be improved upon. That I think is empowering. It allows us to focus on accessibility as a human experience as opposed to simply a target that we reach and then somehow we're done and because accessibility is about that human experience and because humans are so dynamic and varied, especially those with disabilities. We can't really view accessibility as this toggle- if we do enough, suddenyl we reach this threshold and we're done. Even though engineers think that way and lawyers certainly want to want to have a sense that you have done enough. I don't know. We just need to think about and focus on the human experience and that accessibility is something that we can always be improving on. In some ways if your goal is perfect total absolute accessibility, in some ways you fell before you have even begun. We need to view accessibility as something much more dynamic than that and it does introduce some interesting complexity in questions however. With that said, we do have guidelines along that continuum of accessibility that provide measures of where we are at and these can be very very helpful. The primary guidelines that we use and that we would recommend are the web content accessibility guidelines. These are a set of guidelines that are formulated by the World Wide Web Consortium-- the W3C, the International Standards Body for the web. They have created HTML and CSS and these other technologies that we use to build things on the web. They have a set of guidelines for accessibility. These have been around for 20 years. They've been continually refined over the years and the current version is 2.1. They're working on a version 2.2 and a 3.0 so these have been adapted to reflect more up-to-date technologies. These guidelines are very principles-based and somewhat technology agnostic. That's been very powerful. It's allowed these guidelines to hold up over time and have a long shelf life and apply even as technology on the web has changed the downside of being very principles based and technology agnostic is that the guidelines can be kind of ethereal and difficult to understand, especially if you read them they're very academic and in some ways they they need to be that way. We have created a checklist on the WebAIM site for the Web Content Accessibility Guidelines or I may say WCAG-- for W-C-A-G, WCAG-- I may say that for the Web Content Accessibility Guidelines. We devised this checklist that takes hundreds and hundreds of pages from the W3C website and devolved it down to just a few pages of a fairly understandable checklist that you can use not only for implementing accessibility on a website but also evaluating the accessibility of a website to these guidelines. So hopefully that can be a helpful resource for you. It's on the WebAIM.org website. I would just note here again if there are questions or comments along the way please just post those into the Q&A section. I'll leave some time here at the end to get to those. The four foundational principles of the guidelines are Perceivable, Operable, Understandable, and Robust. These are really good principles to think about the user experience. Can they perceive content and get it to their senses in a way that's useful? Once they can do that can they operate and use and navigate that content? Is it understandable and made sense to them? and is a robust does it actually work in the technologies that the end user is using? So these are our POUR principles, our P-O-U-R  principles. We're going to build POUR websites-- if that helps you remember those principles. Now there's much more to the guidelines than simply these principles but these provide a very solid foundation for us to think about, as we're considering accessibility for different end users. I like however to sometimes to take a step back before we even think about accessibility in these principles I think it's sometimes useful to think about usability first. I have a phrase that I used some web accessibility lipstick on a usability pig. Sometimes we will have clients that will come to us and you have this fancy wiz-bang interface and say, "you know, I need to make this accessible" and we'll look at it it's not even usable it's really confusing and difficult to use and frustrating and no amount of web accessibility you lipstick is going to make that usability pig anything other than a pig. Sometimes it's a really good idea just step back and think about friendliness and usability first and once we do that the accessibility becomes much much easier. Now when we talk about guidelines and laws, I don't have time to talk about the legal requirements except to say that we have discrimination laws. There are legal requirements for web content almost all of those reference the web content accessibility guidelines. With that said, your sights or web content could be compliant. It could meet the accessibility guidelines for some legal requirement yet still be inaccessible to some user. That brings up an interesting question. Could that still be considered discriminatory? Also your side can be technically accessible yet functionally inaccessible. Consider a very complex website and the user that cannot use a mouse or touchpad. Very often that user would navigate pages using the keyboard. You can hit the tab key on your keyboard to navigate through the interactive elements on a web page. We have seen pages that have hundreds of navigation items-- like a complex drop down or fly out menu. Hundreds of items that the user must manually navigate one at a time from the top of the page through the main through to where the main content begins. The Accessibility Guidelines require that content be accessible to keyboard users. Would that be accessible to them? Technically yes they can navigate through all of those items. It would be compliant with guidelines but functionally that would be a very unfriendly experience for them. Would that user actually stick around to navigate hundred through hundreds of items on every single page on the site? Probably not so we want to focus on accessibility over compliance- the user experience restrict technical accessibility and those principles that I talked about help guide true accessibility. Now that's not to say that compliance is is different from accessibility. They're not opposites here but we want to think beyond the accessibility guidelines to true accessibility. So how do we do that? I'm going to go through a few different types or categories of disabilities and some of the considerations for them. For those with auditory disabilities, that are deaf or hard-of-hearing, you would provide captions for video and for live audio. Captions are the text that appear on-screen roughly synchronized with the spoken word. So if somebody can't hear the audio of that multimedia they can see the text on screen. You would also provide text transcripts for all audio content so the text transcript is the text version of the spoken information, as well as any other audio information like explosion or laughter or background music if that's important for them to know, as well as any other visual-only information, maybe something that appears on screen that is not described via audio. If someone were reading the transcript, especially somebody that could not see the visual content in that video reading the transcript would allow them to get all the information of that multimedia without having to engage with the media itself. So that's really it-- two bullet points for this category. Easy for me to say-- not so easy to do but there are some wonderful resources out there to help support transcription and captioning of multimedia. For users with visual disabilities this would include those with blindness, low vision, and color deficiency or color blindness, there are a few considerations here. One is to ensure there is sufficient contrast between the text and the background of that text. The web content accessibility guidelines have measures for this. They have tests with a certain foreground color, a certain background color, it will define a contrast ratio and then thresholds for sufficient contrast. We have a tool on the WebAIM site-- our contrast checker that allows you to do this testing quite easily and put in a foreground and background color it will tell you how those color combinations align with the Web Content Accessibility Guidelines and there are other tools that can be helpful with this. The general principle is important. Especially for users with the low vision but sufficient contrast is important for everyone-- not just those with visual disabilities. We all struggle to read text that has insufficient contrast We want to ensure the meaning is not conveyed with color alone if someone can't differentiate between certain colors if they can't see color at all or can't see period or maybe someone with low vision may override page colors so they view the content online in a color combination that works best for their visual disability-- that color information is lost from a page. Now this doesn't mean you can't use color-- sure, use color and color is great for accessibility and usability. Just make sure you're not using colors the only way to indicate important content within the page. You'd want to provide alternative text for non text elements-- alt text is very often what this is called. So when a blind user encounters an image on a page using their screen reader-- technology that reads the content of the page to them audibly-- it can't analyze an image and determine what the content of that image is automatically so as an author we would need to provide alternative text for that image, which is then read by that screen reader technology in place of that image as an alternative to the image-- alternative text. We want to provide meaningful link text-- avoid things like click here or read more. There's overhead to those-- visually when we see those we have to stand the context of those ambiguous lengths for somebody that can't visually scan the contents of a page there's additional overhead to that. We want to focus on structure and semantics, particularly for users that are blind using screen reading technology There's a bunch here and there's some code on the page-- HTML code-- if you're not familiar with HTML don't don't worry about the code stuff just focus on the principle of what I'm describing. You can define logical heading structure so an H1 for your a first-level or primary heading, secondary headings below those, third level headings below those to define a structure for your document and essentially the headings function is a table of contents for the content. Visually when I come to a big web page, I scroll real fast and I look for big bold text and if those big bold texts are defined as headings in the code of the page in the structure or semantics of the page then that same functionality of quickly exploring that page or document can also be done by someone using a screenreader that can't visually scan that page. We can define regions or areas within a web page-- header for the stuff at the top, nav for navigation areas, main for the main content, aside for sidebar, footer in our code for the footer stuff in the bottom of the web page. Similarly visually I can scan a page and determine that context this markup code under the hood of our page allows the same functionality for screen reader users. We can associate labels to form inputs. We can associate cells within the data table to the row or column headers. We can define a page title that's read by a screen reader when they come to the page-- that's the text in the tab at the top of our browser window. We can identify the document language so that it's read appropriately by the screen reader. These are all things that happen under the hood of the page that we can that we can build in most of its transparent to the visual experience but very important for accessibility. For users with motor disabilities and there are many different types of motor disabilities-- just a few of the things to consider ensuring-- keyboard accessibility so you can navigate through that page, not turning off not disabling or removing keyboard focus indicator so as your navigating with the tab key you should be able to see where you're at within that page. Making sure that as someone is reading through the page or navigating with keyboard or reading with a screen reader, that things are presented in a logical order. I use this photo as an example sometimes. These are two photos of entrances on the left is a wheelchair ramp and on the right is this ground-level revolving door and or both of these provide accessibility into buildings. The revolving door on the right actually has a little button that the user can push and in this case the door has stopped and it's folded open so if you were in a wheelchair you could actually go directly into that to that building using this main entrance, this main revolving-door. Everybody would access the building the same way. This entrance has just been designed to be adaptable to the end-user's needs. Now the wheelchair ramp also provides accessibility but it kind of has a suggestion of a different experience and if you have a disability this is your way into the building. I'm just suggesting the building things universally or building our web content to be adaptable as opposed to providing a separate version or separate content to those with disabilities is a much better approach. Imagine you know going to a restaurant as a wheelchair user and being forced to use a wheelchair ramp in the back and go through the kitchen to eat. Now you can just say well this person was able to eat able, to get into the restaurant but is that a very equitable or friendly experience? Probably not. As opposed to making that main entrance itself directly accessible and we can do that. We can make our learning experiences directly accessible without a need to provide alternative or screen reader only or text only versions. That should not be our approach to accessibility. For users with cognitive and learning disabilities, there's a lot here. These are just a few considerations. One is being careful with movement or other distractors sometimes very common in education Y'know that little animation or carousel on a homepage or video that automatically plays can be really distracting for some users. You want to simplify and be consistent in our content-- avoiding small text that can be really difficult for some users, chunking and simplifying our content to make it easier to consume. That's a very quick treatment of this really important topic. I use the phrase sometimes that accessibility paves the cow path but I grew up on a farm in Idaho. I learned that cows take the path of least resistance from point A to point B. The same can be said of students. This is a photo I took by our campus, our building here at Utah State University and you see where the students would cut that to corner and instead of trying to stop that behavior they put down these little paving stones to better support that natural user desire or experience. Some time after I took this photo I noticed they actually took out the the stepping stones and put in concrete to support that behavior. This is a little different photo that I took on our University campus and there's a path that cuts across this corner and the students would take that path across the grass leaving this kind of dirt trail to save a few seconds getting to class. Shortly after I took that photo I noticed this construction going on at this location and they were digging. I wasn't quite sure if they were what they were doing. This is the reverse shot there's this does dirt path that goes right into the construction area and when they were done this is what they had built. They tore out grass and trees and put in this little concrete wall and why? Why did they do this? It's an interesting question-- y'know "get off my lawn kids!" That's kind of the only thing I can think of. This is intended to inhibit that natural behavior as opposed to supporting it. Sometimes we view accessibility as a constraint and honestly in many ways it is but so is everything else that we do online. We're always dealing with contstraints that should be painfully apparent from the last couple months of the constraints that we've had to work under to get learning online and accessibility also has and introduces its constraints but it also supports innovation and supports a positive end user-experience. They're going to make everything better for all of your users as opposed to viewing accessibility only as this barrier because then, nobody wins. Interestingly I still see students jump over this concrete wall and walk across the grass because that's the natural behavior and we want to support that with accessibility. One quick resource I want to talk to about is WAVE. WAVE is a web accessibility evaluation tool that we have built at WebAIM. It's a freely available tool you can type in a website address hit a button it will provide feedback about accessibility. We also have Chrome and Firefox extensions available. Now, keep in mind automated tools are limited in what they can and mostly cannot do. They can only maybe tell you 25-35% of overall issues or compliance failures on a web page but they can very often identify very apparent issues and sometimes the most impactful issues for those with disabilities. So if you want to use WAVE, I'd encourage it. We've tried to make it friendly to use and anybody can do some basic web accessibility testing using WAVE. I want to end with this quote and then I'll take some questions and that is, "For people without disabilities, technology makes things convenient, whereas for people with disabilities it makes things possible." I love this. Y'know, in many ways the web is the great equalizer for people with disabilities. It allows them to engage in education in the places that they need to, using the technologies that they need, taking the amount of time that they need to fully get and understand the content. It's just amazing, the power the web has and it's interesting. I think the current situation we're in that's forcing mainstream education online, the pain points that we're feeling in moving to an online environment are the things that are felt everyday by individuals with disabilities because the web is their reality. It's the way in which they can engage in these things. So it's kind of interesting that we are suddenly feeling all of this pain around moving online and that's what people with disabiities have been talking about for a long time and we're suddenly put into that environment just a little bit. The web brings great possibility for those with disabilities and so I hope we view and understand the power that the web can have and we go out and build really cool accessible stuff. So with that, I will stop and see if there are any questions. Okay so I see Sandy has a question-- "Best style and size of font to use on a website?" There certainly isn't one answer to that question. There's no optimal font face or size. Interestingly, the Web Content Accessibility Guidelines have no text sizing requirements. Like, one pixel, teeny teeny tiny text is compliant with the guidelines. I don't know why they're not all encompassing. So I think some common sense is useful there. I can talk for a whole hour or two just on font faces and accessibility and typography and line spacing and line length and turning and that's a passion of mine but I think just some common sense and certainly the standard fonts that we have access to on our computer systems are there because they're pretty accessible they're pretty usable. We're generally quite comfortable with those so not deviating significantly from those is is a pretty good idea. You know the idea that Sans Serif fonts with the hooks and flags should only be used for print-- oh no, Serif for print and Sans Serif without hooks and flags. Things like Arial and Helvetica only online. There's not a lot to that. Just use good font sizes. Elizabeth has a good question. "Why did I not use color on my presentation?" There were a few colors in there. I think a lot of it was for optimal contrast and visibility. Very often we'll do this in this type of presentation in person and sometimes let's say see a projection screen-- I think it's just for optimal usability. There's nothing against color. I could have and maybe should have used color. Nothing wrong with that as long as there's sufficient contrast and color wasn't used as the only way to indicate certain content or meaning in the slides. Veronica has a question, "You mention not using 'Click Here', what are some alterative options or suggestions?" Okay good question Click here almost always has some surrounding context that explains it. Right? To register for this webinar click here and or click here to register for this webinar so usually there's text content before or after that and sometimes it's before, sometimes it's after that and highlights some of the difficulties that we're very often not consistent. Visually we can scan before or after pretty quickly but for someone using say a screen reader, it's pretty difficult to visually scan. So they don't know which direction to go-- forward or backward-- and it's a little hard to navigate through text in those ways. So that's part of the issue there. The primary suggestion is taking the the function or subject of that sentence and making that link so instead of "Click here to register for this webinar." Just make "Register for this Webinar" the link. Get rid of click here, it's almost always extraneous and usually can just be moved to the function of that or perhaps "Click Here to Register for this Webinar" all as one link that way the descriptive or differentiated stuff is within the link text itself. There are a few different options there. Okay can you show how to use the evaluation tool and what everything means? Okay I will try Let me share my screen again. This is going to be a very very quick demo. I will give it a try here so this is WAVE. It's available at WAVE.WEBAIM.ORG I can type in a website address. I'm going to I think it's edlio.com. I'm afraid I'm going to pick on somebody here but we're going to try it. This is a live demo and we'll see how this shows. So I typed in the website address, hit the button, what WAVE does is it goes out and gets the webpage, it shows you the web page and then injects icons and indicators into to that web page to give feedback about accessibility. On the side is this panel and will give feedback about accessibility. So WAVE in this case has detected 0 errors! Yay! That's really good. We know that most pages have many errors. In fact on average the average home page has 60 detectable errors or barriers for the end user and there's one contrast error, so one instance of text that our tool has identified by their text that does not meet the sufficient contrast requirements to find in WCAG. This is actually really positive. There are also other things that indicate alerts. Those are things that as a human you would need to look at to determine potential accessibility issues, there's features which are probably good for accessibility but still need some human assessment. There are structural elements those are the things I talk about like headings and regions and tables, lists, things like that and then there's Arya which is new code that's supportive of accessibility for screen reader users if used correctly. So then within the page there are the icons you can click on any of the icons to get to get more information, so this is indicating it's a blue icon so it's a structural element and it's a header. So this is that header element and this is indicating the top portion of the page, there are lists there are images. I'm trying to find some others. Here's a Heading level one. These purple icons are Aria. You can go through and see different information about accessibility. We have some  panels that give additional information like the structure of the page, there's contrast pulls there's documentation in here that gives details about what all of these icons mean. That's a real quick overview of what WAVE does then we also have the Chrome and Firefox extensions so you can do this testing directly within the Chrome or Firefox browser that can be helpful for testing like internet pages, password protected pages things in your learning management system you can test using the extensions. Okay! Those are very good questions! Thank you again for having me. Hopefully this was helpful. I do encourage you to check out the WebAIM site, we have just loads of articles, tutorials, resources out there that hopefully will be helpful to you. Thank you again for having me.

Also listed in My Edlio Webinars

19:29 The Beginner's Guide to Building Pages [Edlio Webinar] Featured
Are you new to Edlio? Or do you want to learn how to improve your skills building Pages? This webinar is for you! In this beginner-friendly session, you'll learn how to:

- Create and update Pages
- Share content effectively
- Organize your Page Management based on your needs

We'll also cover best practices for building Pages that are both informative and engaging.
Uploaded Jun 02, 2023. Also listed in My Edlio Webinars
29:54 [Edlio Webinar] Create a Distance Learning Hub With Edlio Featured
With most schools and districts operating with distance learning procedures in place, it can be tough to figure out how to transition your school or district to an online learning environment.

In this webinar, we cover how an Edlio Website makes it easy to:

- Update your news section with information about distance learning requirements, and post news to multiple social media platforms

- Post unlimited videos with automatic closed captioning

- Create Teacher pages, where each teacher can have a centralized hub to post their messages to parents and students, as well as videos, files, images, etc.
- Add homework assignments and other news to your school’s Class pages, with two-way Google Classroom integration included
- Share automatic daily updates with parents through Edlio’s subscription feature
- Celebrate your graduating class’ accomplishment with pop-up homepage alerts, social media posts, and more
Uploaded May 12, 2020. Also listed in My Edlio Webinars
30:37 [Edlio Webinar] ADA-Compliant Websites for NYC Schools
This webinar focuses on Edlio's built-in accessibility tools and provides useful ADA compliance information for all schools and districts.
Uploaded Apr 17, 2020. Also listed in My Edlio Webinars
34:13 [Edlio Webinar] Live Discussion: How Dawson ISD Responded to the COVID-19 Crisis Featured
Struggling to transition to distance learning? View this webinar to hear from Cameron Shaw, Technology Director, Webmaster, and Social Media Manager of the Dawson Independent School District of Dawson, TX. Together with his team, Dawson ISD has transformed its website to be a hub for community response. Hear how he and his team:

Trained teachers to use the website.
Distributed iPads and set up hotspots for students who don’t have internet access at home.
Coordinated free meal distribution to families.

ABOUT CAMERON
Cameron Shaw is the Technology Director, Webmaster, and Social Media Manager of the Dawson Independent School District of Dawson, TX. He’s a lifelong resident of Dawson, Texas and attended Dawson ISD Pre-K through 12th Grade. He’s also proud to be a Bulldog and to be part of the educational team that helps the students of Dawson ISD receive the same outstanding education he did.

ABOUT EDLIO
Edlio provides K–12 educators easy, effective technology to connect their communities. Edlio Websites make managing a beautiful online presence easy. Edlio Pay collects and manages online payments with robust financial reporting. And Edlio Engage simplifies true family engagement with two-way interaction between school and home.
Uploaded Apr 10, 2020. Also listed in My Edlio Webinars

Videos

[Edlio Webinar] Accessibility and School Websites: Tips from Jared Smith at WebAIM

More videos in