Videos

[Edlio Webinar] Accessibility - Best Practices from a Project Manager

Added Nov 10, 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=299887" frameborder="0" allowfullscreen></iframe> Change dimensions

Enjoy this webinar where we talk with one of Edlio's amazing Project Managers to go over best practices for making your website as accessible as possible. We look at Edlio's built-in tools that you can use to manage your site's content accessibility. Topics discussed include: - 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

Hello everyone, good morning or good afternoon, my name is Sara and I'm with the Client Success team here at Edlio; just wanted to introduce myself and kick off our webinar today. Just a few quick notes I will be monitoring chat feature during this, we also should have a representative from our tech support team monitoring the chat feature so if you'd like to ask a question during the webinar go ahead and pop it into the chat or the Q&A feature and someone will get to your question. The webinar is going to be led today by one of our project managers, Alissa, and she will be going through some tips and tricks for accessibility and this webinar will be recorded and put up on our help center after the session is complete, so if you have to come out or if you have to, if you arrive late and you miss the first portion don't worry about that, we will be recording this and putting it up on our help center, so just keep an eye out for that. And if you do put a feature, a question in our chat feature that we're not able to get to, always feel free to reach out to the tech support team or give us a phone call, we will try to follow up with you after if we don't get to your question. But without further ado I will go ahead and hand it over to Alissa so she can start talking about some tricks and tips for accessibility. Hi my name is Alissa, I am a project manager and I have been for quite a while so I have seen a number of things as far as accessibility goes. Now I'm going to start sharing my screen on one of our demo sites. You can see here this is Rilo High School; the very cute dog is of our co-worker's dogs in the office so that's who is on this website here. So one of the first things that I want to go over is fonts. So, if you are an admin or teacher or somebody who's updating the site you might be adding text to the site. whether that is in your news, your calendar, a teacher page, even your drop-down - you'll notice that most of the fonts have a standard size and the reason for that is because we want to be large enough so that it is viewable to most people. The font size that we like to recommend is 16 point, 18 point; those are all both really good sizes for fonts. So if you find yourself adding a text to a page and it looks really wordy, you might want to drop the font size down, just consider making sure that it is above 16 point font. Now, if you are thinking about rebranding your site, you might be thinking about different colors or maybe even a redesign of what might go on to your site, so if you notice here we've got this really light, kind of mint color on this brown background. So you always want to make sure that there is enough contrast to be seen by somebody who might be visually impaired, and that doesn't have to mean that they wear really thick glasses, it could also mean that they have some form of color blindness. So one way that we like to check this - and you are also able to do that - is to use a tool like this. It's called WebAIM, so you'll notice here that we've got normal text and large text, and it even goes into what sizes those are and you'll notice that there's a little green box around it if the contrast is good. Now if I lighten this spot right up here, you'll notice that the green box disappears and it says that it fails the contrast test. So this is another really great tool for checking that, if you do not know what the color code of your site is, a really great way to find that out is by using a Color Picker. I am on Chrome and I use Colorzilla to color pick. There are some others for Firefox or Safari or Internet Explorer so whatever browser you're on, there is some type of tool to be able to do this. I am on Chrome using Colorzilla, and so basically I'm running my mouse over the colors that I want to check, so say for instance, I want this mint color I'm going to go ahead and click it, and it's copied that color to my... And when I've pasted it here, you can see that it fails on a white background but if I want it to be on a dark background you can see that it passes at this dark gray color. So this is the very minimum that I would suggest for, so you've got two standards here: we have double A and we have triple A; most by industry standards everybody goes by double A, so you don't have to worry about this one right here; of course if you pass AAA that is super great, but you can just go by double A. So long as it passes for normal text and large text that is really great, you can tell generally a rule of thumb for large texts are titles and normal text would be things like your navigation or your summary text or on your pages. You go here, this would be your normal text here in these areas. And this would be your title text, so that's if you are curious about your font being just on the edge, I mean, your colors being just on the edge of that accessibility checker. So I know that you are able to add fonts and colors to your inside pages so if you are thinking about changing the colors just be mindful that the color is accessible to your viewers. Now I wanted to go over some other items as well aside from branding, and one of those is if you are considering to add a video to your homepage whether that is a redesign or if it is a video on some inner pages - this particular video does not have any sound you can notice here, they have it turned off. But, there is a play and pause bar and this is built into all of our videos so if you are ever considering a redesign just make sure that there's nothing covering this bar, because we need this for accessibility for people who use keyboard accessible ways, so or they use voice activated controls, they want to be able to pause this video and especially in the case of it playing sounds or something like that, so that way they're able to continue to navigate further down the page. Now of course we do recommend using closed captioning which you are able to do with our video tool. I will show you a video here that we have uploaded. Now of course, you don't have to use closed captioning on videos without any sound, but if it does have sound - you can see here that we've added the closed captioning right here and I also really recommend is reviewing the closed caption after it's been added to the video to make sure there are no typos, and that it is in a readable pace that you like. So that's for videos and for the other side of media you have pictures. Also I highly recommend adding alt text, so you can add alt text to videos. So for here, you can see here at that video that I was just showing you, we have closed captioning here, which you can edit second-by-second but also adding alt text to the video is good, so Site Map > Video, so anyone who is using keyboard navigation, when it reads them what the video is before they click on it, they know exactly what they're looking at, just like somebody who has perfect vision. Now, if I am going to any kind of photo on the page, we want to make sure that there is alt text, so again for the keyboard users, if it's reading out loud to them what the photo is, I would change this and I would say that this is Rilo wearing a garland. So they know what this picture is. And you can add alt text to any image on the website, whether that is in your news or in your inside pages. This particularly happens to be on the photo shuffle. And if you'd like I can go over how to add alt text to those other images. It's pretty much the same, so if I go to pages and say for instance I want to add an image to the principal's message. Let's add one right here. You can click the little alt text right here, and you can put in some text right there. And you'd hit save. Now, for other pieces of content, when you are typing things in, a screen reader can read this pretty easily; however, you also might be attaching files to your pages and those might be PDFs or Word documents, but I want to go over how the naming convention might be. So whenever you're uploading a file you always want to make sure that it is representative of what the file actually is. So for instance, these board agendas are labeled with the dates of what is inside so instead of having a file, something like this, where it kind of looks like gibberish - you have no idea what this file is, and neither would the screen reader when it's going through it and reading it out to whoever looking at the website. You always want to make sure the files got some type of really representative name of the file itself. Now, I always recommend that if you are saving a a PDF file, to make sure that it wasn't an image when you first converted it to a PDF. Because that obviously is not actually text, so if you're going to be creating a PDF, use Adobe, Acrobat, or even a Word document or something like that to then convert it to a PDF, because then that's text that the screen reader is able to go through. Here's another example of really well named files, so that way you're able to know exactly what they are. And it's really easy to rename files if I was to go to that particular file that we were just looking at on Rilo High School... the way that I would rename it is just by clicking on it and picking a new name. So let's say it's the Edlio Policy. I also want to recommend not to use spaces but to use underscores or dashes or something like that. And so now, if I go back to the page you can see here that it says Edlio Policy instead of that gibberish. So it's really easy to rename files, and I highly recommend going through your site and auditing those. Now of course, it is a little bit difficult to go through every single page on your website at once, so anytime that you're updating a page, just do a little scan of it to make sure that pictures have alt text, that your files are named properly so that way you can do it in incremental little bites rather than all at once. Those are probably my biggest tips for accessibility especially when you are an administrator of a site or uploading content or anything like that.

28:22 [Edlio Webinar] Teacher Pages Featured
Join Edlio for a 30-minute webinar about Teacher Pages. We cover how to create and update Pages, best practices for sharing content, and everything else you need to know to use your Pages to effectively reach parents and students.
Uploaded Mar 20, 2020
30:05 [Edlio Webinar] Teacher Pages Refresher Featured
Join Edlio to learn the ins and outs of the Edlio CMS! You'll leave with actionable steps your school or district can take today to update your website, better engage with parents, and more. Bring your questions for a Q&A session at the end!
Uploaded Jan 24, 2020
27:58 [Edlio Webinar] Teacher Pages for the New School Year Featured
In this 30-minute webinar about Teacher Pages we cover how to create Pages, best practices for sharing content, and everything else you need to know to use your Pages to communicate with parents and students for this upcoming school year, whether classes are held in-person or virtually.
Uploaded Jul 23, 2020. Also listed in Back-to-School
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
30:03 [Edlio Webinar] Overview for Administrators Featured
In this Edlio, we highlight how administrators can best use their school or district’s Edlio Website. We share website tips that are easy to implement and can have a big impact on your school or district’s communication with parents and students.
Uploaded Mar 25, 2020

Videos

[Edlio Webinar] Accessibility - Best Practices from a Project Manager

More videos in My Edlio Webinars