Videos

[Edlio Webinar] Website Accessibility

Added May 26, 2021 •

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

Check out this short webinar where we highlight best practices for making your website as accessible as possible. We take a look at Edlio's built-in tools that you can use to manage your site's content accessibility. Our Edlio expert covers: - Accessible website designs with color contrast and link styling - Alt text settings and other SEO tools - Site navigation for all users - And so much more!

Show Transcript

All right so let's get started here, we have a lot to get to today; so today we are talking accessibility and how Edlio's built-in tools ensure that your website can be as accessible as possible. Now, ADA title 3 requires that "places of public accommodation be accessible to people with disabilities." Now the law was written well before most of our day-to-day lives were moved over to the web, so while that language doesn't specifically state that, there are efforts to ensure that that language is updated also. We all need to ensure that our school websites are as accessible as possible so everyone has the chance to learn about what's happening in your school community. The first thing I want to go over is how Edlio sets you from the start for accessibility. We'll get you set up for success from the start, I should say, with accessibility. A big part of that is due to the code that we use; we're always keeping that in mind when designing and coding your site which is a big part of why our home pages are so heavily hard-coded, and we ensure that we're using the latest coding standards for accessibility and feature a number of tools to ensure that you're keeping everything up to code. So we also review the page structure in your links to make sure that they're screen reader friendly, so we are joining the Edlio family, you know, building out that new site with us it's a very exciting feeling. We're taking all of that into consideration up front. So we're happy to build this ADA friendly site for you but we're handing the keys over to you, you know, at that point it's just as important for you as web admins, teachers and purveyors of the content of your site to make sure your content is ADA friendly. So the first thing I really want to go over here is your site navigation and y'all should have some sort of site navigation, it might look like this you know it might have some images, you might have the mega menus, but for the most part all of this here is going to be accessible by keyboard which is is big for ADA compliance. Now, as we come through here, we scroll through we see that there is some color contrast here, we have the brown against the wall there. Now, let's get into contrast here. Now, depending on what your school colors are, one of the first things we implore clients to consider is color contrast. Now, look at Rilo High School here, we had a little minty green up here right against this brown background; and we always want to ensure that there is enough contrast to be seen by someone who might be visually impaired. This doesn't just apply to individuals with color blindness or could also mean they might have some form of color blindness; so think, you know, red green color blindness is the most common. So definitely try to avoid green on red, red on green if possible. Think especially about avoiding, you know if we're using good or bad indicators, sometimes we'll have green for good, red for bad, try to avoid using that as well because for some people they might not be able to see those colors there or that the difference between the two. But no mater what, when initially building out your site with us, your project manager will ensure that your site meets those color contrast guidelines. Now, how can we check to see if our color contrast is okay, if it meets those requirements? We here like to use a service called WebAIM, great great tool here, and it's an amazing amazing tool for checking things like this. So down here in our contrast checker we can put the foreground color and the background color here; and so we're gonna use, put the text color here, background color here, and then once we put it all through, it'll give us a contrast ratio. Now we want to make sure that contrast radio is minimum 4.52 to 1 - minimum 4.51. We'll come down here in with our normal text and our large text here; now we'll see you here, this WCAG, that stands for web content accessibility guidelines. Definitely recommend looking it up but as long as you're hitting those double-A standards there, you are good. Triple-A is even better but we definitely recommend trying to at least hit those double-A standards. Edlio sites are coded with the Double-A standards here. So how do we check to see you know what what colors we're using on our site here; you can actually get an add-on tool for, I'm using Chrome here - Chrome, Firefox, and whatever you think, there should be some sort of plugin, add-on that you can get here. I'm using Color Zilla. So I'm going to come over here real quick, I'm going to click this, that's ColorZilla, it gives you the option to pick a color from the page here. So I wanna do that so if you see the little toolbar up here, it kind of lets you know what color you're hovering over right now, so I'm going to hover over this minty green. I select that, and I copied it to the clipboard so I want to come back over here to WebAIM, and since that is the text color, that's the foreground color, I'm going to paste that there. So let's see what we got here with the white background. It's a fail; we see down here with his minty green color, white background; but let me play with this slider bar here, it's darkening, the background there, see that? As we're coming along here we can see this contrast ratio here going up, and remember want to hit that 4.5 minimum. So right now with what we have right here, this is a pass for the most part, but I'm going to come in here I want to get that triple-A, if I can. There we go - with this background color, foreground color, we are able to pass on all fronts there. Definitely recommend using Web AIM here, if you wanted to make sure your color contrast is all up to date. Now I want to build out a page with you here so we can kind of see some ADA friendly ways that we can build out content for our school website. Going to hop over here to the Rilo High School admin site. Let's see, we'll go to our pages, so we're going to be building out this page together. I go to miscellaneous, my welcome section, and welcome page. Okay, now I've already pre-built this page out, I'm going to go ahead and go to public view here so we kind of get to look here. All right now, first things first, the hero image there. Just right off the bat looking at this, I want to throw this out to you all, the audience here, can anyone here in the audience just throw it in the chat: tell me immediately what is wrong with this here? We already went over this. Anybody in the chat tell me what is wrong with this image and why it would not be ADA friendly? No takers just yet, oh wait, there we go, thank you, yeah, Amy, yes not enough contrast. These are correct. Yeah, specifically not enough contrast here. Yeah we got that pink on pink here, it's not good, a couple people coming here looking at this, this is not going to pass that color contrasts test that we were just talking about. So actually, I'll come back over to the site here, there's actually a couple more problems with this, so I'm going to click here. So first things first, alt text. Now if you have your accessibility settings turned on which I'll show you how to do in a little bit here, your alt text, you should need to require, you should need alt text for every single image that you add to your site. Now alt text tells screen readers, "hey this is what that image is." As a screen reader is going through and reading your site, when it comes to an image it's not going to automatically be able to detect what the image is, so you need to put the text there just to tell the screenreader, "hey this is what that image is." So in this case the person just put "hero image," which is not, that's not good enough. Now in this case we'd want to have to "welcome," "welcome to Rilo HS," or something, something like that there. on the other thing I don't like that kind of point out here is that we have this text in this image - we recommend really not putting text in an image. A screen reader, again, or equivalent device can't really read it. If you're going to use text, just put it in a content box. If it's just text we always recommend doing that if possible. We recognize it's not always going to be possible but any little bit helps. So I'm going to go in here I'm going to delete this hero image cuz it is garbage and we're gonna add different hero image there. We already have one set up, our welcome banner here hope you got a second to upload. All right, want to add some alt text. Rilo High School, actually let's "Welcome Banner." We have our alt text there; going to go and publish that. Refresh that and look at that, awesome. Cool we have our images there, so we're going to use that as our hero image, still it's a nice flashy way to intro us to the site there, without the text there; we don't have two of the same color contrast images, color contrast issues. So let's come on down here, we're gonna to come to our content box down here. So there's a couple things wrong with this one as well and tell me what they think is wrong with this here, with this text in this content box right here? Yes, low contrast, that contrast is not good and yet too small and that contrast is bad. We do not want that, we want to go ahead and do a couple things with this here. Here we go, so first thing. We want to increase that contract, so I'm going to go ahead and make that black there. All right and then next thing it really is a font size, font size - let's just talk about font in general I guess, we'll talk about font and font size here. So in general sans-serif fonts display better on computers, mobile devices, but above all we want to avoid like, decorative or overly stylized fonts, which are, can be difficult for screen readers to use or, people with visual impairments, reading disabilities - it can make things more difficult .Your fonts are predetermined with us here, so you can always change your font, you reach out to us and let us know "hey, we want to update our font;" so we can do that, but please keep in mind accessibility when choosing a new font. Remember, sans-serif fonts are generally the way to go out. When adding written content, we also want to make sure that we're using an appropriate font size. We recommend going size 16 or 18 if possible. I wouldn't go lower than 12 ever but in this case I want to bump this up here to 18, actually we'll go 14, okay, alright. So we'll publish that, we'll come in here Something more appropriate size there, can even go bigger with that. All right, but next up down here, we have a PDF and are there a couple issues here with this. Now with PDFs, whenever possible we recommended creating pages on your website for content; it's always better to create a new page for the PDF content rather than linking to a PDF. Edlio pages have that built-in code to make that content accessible. So placing your content directly on your web web page has multiple advantages. So first, it makes the text searchable so people can find your information easier which is good for search engines that can read the text, which helps with your SEO (your search engine optimization). That content can be translated and plus, it's easier for you to update any time right within the Edlio CMS there instead of having to go in to whatever PDF editor you're using, you edit it and then re-upload it; you're better off just adding as a content box. There are a couple more things that I want to go over here. I'll come back over here; so first off, naming conventions. In this case a lot of times when you download a PDF it's going to give you a bunch of random letters, numbers, this and that - don't do that; you can rename it pretty easily right here. So let's say it's the welcome To Rilo High School Guide. A couple things here: we want to be descriptive, let people know what it is. If we're going to be spelling something out like this, you're better off instead of using spaces, using underscores there to help us. You know what to read and what not. Don't leave all the text together, use those underscores there if you're going to be including spaces there. Another thing, in this case, so down here this is a scan from a book which can be hard for screen readers to actually read, so you want to make sure your PDF isn't a scan of or from an image or something from a book or from an image of something like that because odds are, a screen reader will not be able to read the contents. In some cases if you're scanning directly from a book and you're using Adobe to scan it, it can often pick up the text and convert it properly. Some of the newer tools, apps on your phone, sometimes if you scan it, it will be able to convert the text; but just, always double-check it, make sure that it is actually converting that, because in a case like this, if not, it's just the image is, a screen reader is not going to be able to go through and read this text here. So I'm going to go ahead here and delete that and I'm going to upload another PDF file so we see what it looks like when it's properly displayed. Ok, we'll come in here and we'll change what that name that we had there before, and we'll publish. Actually I'm going to come back up here, I'm going to bump this up to 18. All right, let's go ahead and publish this. We'll come over here, all right. So this is going to be a lot easier, a lot more accessible than that page we were looking at before. That thing was a nightmare before, so this should be a lot easier to go ahead and check out. So yes, hyphens or underscores, you can use both, so either one works - hyphens, underscores you are good to go there. Alright so let's go ahead and next, I want to go over and take a look at videos. Here. Alright, so a lot of your homepages either have a homepage shuffle or in this case, a lot of times they'll have videos. So if you're thinking about adding a video here. It's a great look for a site but whether on your homepage or on an inside page we want to ensure against these are accessible. This particular video does not have any sound, if you noticed here but there is a play and pause bar built into all of your videos so if you're ever considering like a redesign, just make sure there's nothing covering this bar because we need this for accessibility, for people who use keyboard accessible means of getting around the site; or they use voice activated controls. I want to be able to pause this video and especially in the case it's playing sound or something like that, so that way they're able to continue to navigate further down the page. So one of the other things with videos here that we're able to do, so I'll hop over here over here to our help center; now if you come over here and help, if you ever want to come back and check out any of our past ones definitely recommend doing that. I'm going to hop into this one real quick, just click play, so you can see what I'm talking about. So we can see here that we have our closed captioning built into this video here. I want to show you how we can go ahead and update that and different ways that we can go ahead and edit those. So let's see, if I'm in the Edlio Help Center here, and it's just like your CMS here. So I'm actually going to go right into that video that we were just in, so down here. We also have alt text for our videos just like our images we come down here; this is where we can edit our captions. Now we recommend coming in here and playing around with this, editing for corrections because remember these are all generated, these are all generated automatically. So, when you come in here you upload a video and there's a lot of dialogue, lot of talking, there's bound to be some you know some errors here and there. The computer is the one kind of going through, listening to this language and trying to differentiate what you're saying there, so there might be some issues when a generating these. So please edit these appropriately to make sure that anyone you know who isn't able to actually listen to their video, is able to read it and go through; you can go through, play the video, listen in and try to make any corrections here as you're going through. It's pretty easy to do when you can save that, and I'm going to come back over here. Now as you're going through and editing these captions, make sure you check off this because with every video there's also a transcript. Someone's not able to actually watch the video listen to it but they always have the ability to go through and read the entire, what's in the video through your closed captions. Make sure you select override transcript every time captions change; that way when you're making those edits in the closed captions they're also reflected here in the transcript for anybody who wants to read what's happening in this video. So while we're over here I'm going to hop over here to our settings, to accessibility, okay? So if you have this selected here it does a few things - I'm sure a lot of you probably do you already have this selected - once you select that automatically it's going to take any of your images and videos that are missing alt text (remember when I showed you haw to do that before?) it'll display a warning in the Edlio admin site, letting me know, "hey there is no alt text here, you got to add this now." All images and videos without all text including photos, your homepage shuffle will be hidden from the public website. So this includes media that you might have saved like Pages, posts, news, so you want to go through and make sure that you have all these updated. From this point further, once you have that selected, it'll prevent any Pages, posts, news, anything like that from saving until all your images and videos have alt text. So you know, let's say that you've been with us for a while, you have a lot of content on your site. and this hasn't been selected yet, you might want to let your staff know, "hey we need to go in and update all this," because it's actually utilizing teacher pages. That's a lot of content that might not have this alt text on it. We actually have a little template here that you can send out to your staff, letting them know "hey everybody, we really want to make sure we get all up-to-date with ADA compliance, so please go back and start adding alt text to all your images, anything, so when I enable this setting, we will be good to go there." So if it is something that you want to do, you can send that out to your school staff. We recommend giving them at least a couple weeks notice before enabling those settings to make sure everything is up to date. Okay, one other thing I wanted to go over here. So we also have a partnership with AudioEye, so it's an add-on product, so please reach out to your Client Success Specialist if this is something that you're interested in. Also AudioEye's partnership with us allows us to add this nifty little toolbar down here to any school website, the accessibility toolbar. So it allows users to access your school site using screen readers -the visual toolkit's very cool - but select that here so in this case right now I'm using the emphasize button, and you can kind of see, it's emphasizing these things here. I can use the Highlight button here. So it'll highlight different links throughout the site, it's very very cool, very powerful, tool; again, this is an add-on feature so please reach out to us if it's something you're interested in and getting it implemented for your school site. So if you're not sure how ADA friendly your site is or whether it's time for a redesign to ensure you have the most up-to-date and accessible code, please reach out to our tech support team or your Client Success Specialist. We can let you know where you stand and whether or not it might be time for we consider a redesign with us. You can also use some pretty cool Chrome plugins - Site Improve, Wave evaluation tool - that can help take a look at your site and make sure everything is looking good. Another thing, one of the highlights before we wrap up here. In our help center, we actually have a pretty cool section here all about accessibility and how to best implement it for your sites. We have tons and tons of great articles and info. A lot of stuff I wasn't even able to get to today, so please hop in there, take a look around, make sure you know you're checking all these boxes here and make sure we get to everything in here cuz there's a lot of great information here. Definitely recommend using that as a resource. All right, everybody I think that'll just about wraps things up for today.

Also listed in Webinars

Videos

[Edlio Webinar] Website Accessibility

More videos in My Edlio Webinars