Video Gallery

Accessibility + Your Edlio Site [Edlio Webinar]

Go to Video Gallery Added Jan 24, 2023 •

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

Go HD

It's 2023. Website Accessibility should be a top priority for ALL schools. Check out this webinar where we highlight some best practices for ensuring your Edlio site is as accessible as possible. We look at Edlio's built-in tools that you can use to manage your site's content accessibility. Just some of the highlights 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

already everybody thank you so much for joining us for today's my edley a webinar my name is Danny I'm a member of the client success team here at and Leo now just some quick housekeeping before we get started if you have any questions out the course of the webinar today please feel free to go ahead and throw them in our queue in a feature and we will get those answered for you and if for any reason you can't stay for the entire duration of the webinar are no worries it will be posted to the edlio help weather in the coming days that today we are talkin about accessibility and how ugly it was built in tools and sure that your website can be as accessible as possible the Ada title 3 requirements that play is a public accommodation be accessible to people with disabilities this well before most of our day-to-day lives were moved over to the web I'm thinking a while that language doesn't specifically state that there are efforts to ensure that that which is being updated we all need to ensure that our school websites are as accessible as possible though everyone has the chance to learn about what's happening in your school Community all right so I'm going to hop over here to r a do college prep a home pager now here we go this is lbo College Prep School homepage all right I want to go over to set you up after accessibility success from the get-go and a big part of that is from the code that we used were always keeping that in mind when designing your site and coding your site was the big part of why our home pages are so heavily hard-coded we ensure that we're using. latest coding standards for accessibility and feature a number of tools and sure that you're keeping everything up to Snuff I thought we also review the page structure in your links to make sure that they are screen reader friendly so when you're joining the edlio family and building a new site with us or going through a redesign with us all of that is taken care of up front wheel of building Ada Ada friendly site but we are handing the keys over to you so it's just as important as a as important for you as web admins are a teacher's orders purveyors of this content on your site to make sure that this content is Ada friendly any sort of skinny tools like wave you any receiving errors please reach out to your CSS or open a tech support case with screenshots of that are remember I'm here the more information the better all right now one of the first things I wanted to cover here is First Sight navigation right now you know no matter what you're saying navigation looks like we want to ensure that is accessible by seizing accessible by keyboard and all edlio site navigation is accessible by keyboard right so no matter what kind of accessible keyboard a visitor is utilizing they will be able to navigate your site with just a tool using the tab keys right now I'm using the Tab Key here to go through deciding to have containers up top and it's going through here actually this page right here the lbo Gazette is working to be looking at today cuz I want to go ahead and press enter on that and it's just like I use the the left click on the mouse to go ahead and click that by pressing enter ISO tabbing through your site navigation just one-way your site is I-80 a friendly and accessible by really want to focus on right now at Paige's right cuz that is where the magic free of your content is going to be to live in your pee belt built out here in pages so let's take a look at a Pages here and what we can do to improve it alright so actually so we have this page sure I want to go down here to are welcome new writers all right now I just kind of scroll through here B of a header image I do have a few things here that probably needs some fixing here if you know but I will go ahead here and we'll fix these items together and we'll see how we can look at ways that we can go ahead and check our Pages for this content that might not be accessible which in this case we have plenty of Errors I to correct here to make sure this page is accessible I'm going to have a happy over here to edlio college prep all right now I'm sorry from here we want to get to our pages so I want to go down here to Paige's you don't forget that Megan's a hamburger drop-down menu page Management in Pages they're all right now this is the page we want to go find an edit welcome to the writer so I'm going to search right here all right click on that okay great smell again just looking at this page you know just from the top here I can see we've a few different items we need to update I can see here you know this car that were using doesn't look so great I hear this is a link on his contract here also not looking so great down here this PDF. Not very accessible and we'll get into all of that here in a second I want to come back over here at the admin site one of the little-known schools that we have here for making your your pages as accessible as possible is within our preview of the future here under action so I just save this draft when do the actions review draft why so when I click into that we have this wave button right here right now with this toy you can scan your page and it gives you essentially a web accessibility score based on your page and it kind of goes through and show you all the different areas that need to be updated on the click that it's loading now I know just like I said we have a few different options here we want to focus on these really up to these errors and contrast errors hear alerts also should be taken care of as well but any of the content we're looking at down here as we really want to focus on right now now on this one right here this is the main we see right here at the  this error and we see right here when I click that that is because we are missing alternative text on this image alright so you want to make sure you have all texts for any images that you're adding to your site now we're going to look at it and just a little bit here but we actually have a tool within our settings that essentially you turn it on and ensures that every single time and images added to your site that all text has to be added if that all text is not added the image won't. on your page that you need to add it so if you have multiple people you know, managing your site it's a you no matter what you should have that turned on but it it's a good way to remind people like hey this isn't going to be added unless you add the salt I'll show you where we can turn that on just here in a second I will kind of work our way down here all right. I see here is one of our alerts right here right now we skipped heading level all right now on headers are very very important you want to make sure you are going in order right so at any time you named your page that is automatically formatted as heroin right that's what you want to start off with and then I sent you want to go in Cascade motorized do you want to go to the next time you're being another header you want to make that head or two and then below that if you're going you know another subject of that had her 3 or he just another week or two as well but you don't want to skip from 1 to 3 that is not good over here we have this this is that contrasts are I was telling you about right there is a little contrast between text and background colors is like green is just now can I cut it all right down here saying for this now I know this here was copied over from another page so if you are just running at the content yourself and the link you know you I don't think may know yourself it's going to automatically give you a dark blue Fair that'll go ahead and that'll be very visible a plenty of contrast there we're copying over like this and you might get this bread here like this it's not going to look good I so I'll go also go over how we can clear the formatting when tasting over content from one page to another and how much of that can help with a errors like this make sure you avoid them are you coming down here IR text is very small something you want to avoid as well we kind of get in specifics of that here in a second and same thing we have that contrast issue as well and down here we have this with a link to a PDF document will get into why that is not good as well here as what kind of crap needs to gather ice let's get back over the admin side and correct these errors together to make sure that we have you know a page that is accessible to everyone okay the first off we have this header image up top and I remember the issue with this was it did not have all text all right I'll text is a short description of what the image is here at so we want to be descriptive all right so when they go ahead here I clicked I just clicked on that image one click assault button right here all right now I must go ahead here and how can we want to be a descriptive header image for at Leo College Prep is that all right now I'm another thing we want to note here alright so with this page so we had this image of Hubbard has an image that we added separately okay one thing I do want to know is if possible don't put text into an image all right you just want your images to have to be any of these pictures are busy here that's as our logo on a screen reader or equivalent of ice can't read it if you're putting text on an image rights have been used text I just use a Content box are ugly we're going to see down here again don't put text in Skype we realize it's not always going to be possible for any little bit helps so if you can't avoid it please don't try please don't put any text in an image like that cuz your screen readers will not be able to use that making it a lot less accessible and I'm going to hop down here at the actual body of the page or the next big are fears that contrasts are that we had right so I mean this just won't cut it so we're going to default I mean you know a black-on-white is the way to go with that again you are plenty of contrast they're going to go ahead here switch this over to black alright space we have that ready to go now to start working our way bottom here out that's all yes so this is another issue that we had here right was that this welcome right was skipping the other heading level right so we want to go a here and update that all right so get up here this text editor box up here see right here we have had her three we want that to be header to all right they're going to come down here also getting that is a link alright I guess this is pasted over from another page so this formatting it when it was pasted over the formatting wasn't cleared all right so it kept this morning with this gray link here again not enough contrast do in a situation like this where your paste and content over you always want to clear the 4matic that you're just copying and pasting or you're going to control or come and see and then we come over the text box you can command or ctrl-v to paste but if you want to clear that formatting you want to come and you want to hit command shift V or control shift fee or do you just go to paste it over regularly and come up here click this little box right here soon clear formatting want to hit that look at that automate it's that blue right there which were all used to again plenty of contrast are so we want to make sure we're doing that I was going to go ahead here and publish as we're going along now I'm coming down here as well now we had that a small text down here just a couple of things to note about that with font font size is a kind of want to go over in general San serif fonts display better on computers and mobile devices all right so I'll probably want to avoid like overly decorative fans are really stylized funds which are often difficult to read a even reason for that visual impairments or reading disabilities to your fonts are predetermined here you're so we're building at your site while we go ahead we are. all those fonts for you so we're not going to go in right here and change he's so if you think you need to update your phone for your pages like this reach out to your client success Specialist or tech support we can do that for you. We really want to go San serif font possible to the Justice play better on computer devices mobile devices things like that and getting back to this size here we want to make sure that we're using an appropriate funds so I really I realistically we want to go out at 16 or 18 point if possible 12 is usually the default and it's okay you can go at 12 if it's perfectly fine I would never ever ever go below 12 if possible or 112 here but I can ideally if we can go find me 1418 it's for the better it's for the better the bigger the better alright so I will publish this all right so we're already kind of looking better right here now next up down here PDF odds a few notes about PDFs as well now as we have a few different ways we can go ahead and display this alright so right now and I clicked these three dots right now we're just playing the finals with a link to the PDF all right that's kind of the way and we can do at this thing right now all right if we want we have these click on these images here and it gives us a preview of that PDF doc right on the page I'm going to publish us there so we can see what it looks like on the public View I so we have that now running before it was just this link here and that would open up into another page to release right now we have this about ready to go right here displayed on this page all right but I'm coming back over here to the admin site I just looking for a few more notes that whenever possible we actually recommended creating pages on your website for Content instead of adding a PDF here if possible cuz if possible is always better to create a new page or add a new content box for contact especially in this case this is just a list of rules here text it can be very easily copied and pasted over into a Content box so I'm placing your content directly onto a web page has multiple advantages makes that text searchable so people can find your information easier search engines can read that text so that will help your SEO your search engine optimization in the content of your can be true play that that is key right we want to make sure this discontent is translatable for people come on your page no matter what language they read a right we want that to be translatable and it's a lot easier to do that when it is at added as content instead of directly a PDF here again it is it's a lot easier for you to update we're here right so if we if you need to replace this PDF you're kind of going to run a program updating it downloading adding here again if you just have that car set in a Content box here you're just coming right this page clicking into this content box let's just say you know like this and you're updating it here if you need to write where if you had a PDF like this it's just going to make it a little more difficult for you to update and again it's more difficult for screen leaders things like that to go and see what's on there so if you absolutely need to include a PDF I'm just a couple of notes first off naming convention the right we should tell screeners exactly what this bile is I know crazy numbers and letters combo like we see right here so we want to go ahead and rename this so we have a better idea of what this is turn this case let's play this is so this is a page for our school newspaper staff expectations somebody go ahead and name that that ice cream truck coming through they would know at least the name of this this document is newspaper staff expectations instead of in a random letters and numbers things like that at the high school level but please don't include PDF scans of books because most screenwriters cannot read those guys I was just literally where it's a scan of a book so up the book was opened it was put on like a Xerox or you just going to go ahead and just scan it and you know a duster into a PDF that's the kind of worst PDF essentially a picture of text right and it's going to be very hard for screenwriters to read that I'm so we really recommend not doing that if at all possible all right so we made these updates based on our way report here so we are good to go I know actually what I want to show you knows I kind of discussed earlier was the accessibility feature in your settings RX remember up here I went over before if you have that turned off you can add images to your site without all texts as much as you want I which is not good we want to add that all tax all right so I want to do here is go to the hamburger drop down menu go to site management settings accessibility and this is where we want to go ahead and enable Ada settings you kind of go into I hear what is included with that about the at the all text speech there is really the most important part of it right we really want to make sure that all taxes on every image that we are using all right so when I go ahead and save that now it is important to know if this was turned off if you didn't have this turned on and you turn it on now any image that you had uploaded to your site that did not have all text it's not going to it's not going to display you going to have to go back in and add all text to each image all right they're going to turn it on I would reckon if you have that turned off I would recommend going through your site and adding alt text for any image that might not have it and then turning it on here all right go ahead and Save that are again that is in your settings go to settings and accessibility that is where you can turn that on the next up I want to cover a videos and how edlio makes it easy to ensure those are as accessible as possible for me to go up here to the hamburger drop-down menu media videos and audio all right so you need to go ahead and upload a video you can do that right here under new video or audio ones that is uploaded I'm going to go in here and see what it looks like I know a few different things that was way more title we have our description right but now I'm coming down here is where we kind of get into what makes these more accessible and how we can make them more accessible the first off captions every video Once upload the ugliest EMS captions are going to be auto-generated for that video which is really cool the thing is you want to go in and edit those check those this again or this is just a 10-day I do it's not happy perfect right so you you need to go in here at 8 captions I just got to go through it's pretty easy to navigate as gives you kind of go through watch a video together and just kind of make sure all of the captions look okay and then just make adjustments as needed it's pretty easy to just right here you know understand edit accordingly Harvey Harvey need to depending on what needed are but again these are created through a I so it's knocking Perfect all time so we definitely recommend getting in there and a checking all of this to make sure it is all up to Snuff or I'm going to say that I want to kind of focused here with our videos is down here transcription so in addition to the captions Auto generated we have a transcription that is also auto-generated I recommend checking this box off here it is not usually Auto selected so I do recommend checking that off override transcript every time cash exchange rights as you're going through the video here in editing these captions anytime you make a change here it is also going to make a change to the transcription here of everything that is said in the video okay to definitely recommend doing that for all of your videos if possible all right now I'm next up I do want to cover here at a partnership we actually have a with another over here this a real life and Leo client where she going to look at here is Medford Township Public School and this partnership I was talking about this is with audio I it is an add-on products to please reach out to your client success specialist if this is something you're in accident I'm so only wise partnership with us allows us to add this little toolbar right down here bottom right-hand corner accessibility toolbar at to any website allows users to access your school site using screen readers and a visual tool it's really cool and I definitely recommend utilizing it if you can so we come through here just a few of the features here right so we have this curse our button here so that you have a bigger cursor color shift here again depending on color blindness things like that increase contrast if needed as you increase text size it's really really cool beats again it makes your website a whole lot more accessible reach out to your client success specialist for more information on audio and how we can get it installed on your site alright great now the last thing I want to cover your head and hop over to our help center all right now here if you come up here to help articles I'm sorry the way to get there a help. Epoch.com is how you get to our help center inhale particles are went to scroll all the way down here you are learning pass all right we have a ton of great information pretty much any article you can think of anything related to your earliest that we have here with these MoneyPass are really great on cuz it kind of focus in on specific areas that you might need to learn about specifically out with his great one about accessibility and we come down here we have tons of great articles on access specifically for teachers as they're building out teachers other teacher pages for web admin you know just kind of talked about today we go a little more in-depth. I recommend definitely coming through here table that has a pool table is that is something really ought to consider two other people don't realize that's how people might not be accessible this gives you a a great a great a great source of information here to go through and make you or out tables as accessible as possible for screen readers to our help center definitely recommend checking this out and you using it as a resource as you get your website to the most accessible place it can be all right and I think that is going to wrap things up for today if you're not sure how Ada from your site is or if not sure whether it's time for a complete redesign to ensure you have the most up-to-date and accessible code reach out to your CSS your client success Specialist or our tech support teens and they can let you know where you stand and whether or not you should is there a redesign with us you can also always I'm you know you some of those plug-in tools some of them today and prove our waived are some really great ones I that kind of scan to your site definitely recommend doing that if possible but reach out to your client success specialist and they can go over website accessibility with you and where your current site stand and I'll get if you have any questions really reach out your client success specialist they are there to help every school has a personalized a client success specialist one specifically for your school that your go-to person for any questions about your site on if you're not sure who your client success specialist is reach out to client success at Ed leo.com and we will be happy to point you in the right direction on again I want to thank you all so much for joining us today for this webinar will be hanging around here for a couple of minutes if you have any questions at all yeah we will be happy to answer those for you I live in the chat feature or I can go ahead and demo something here for you as well on our admin site but again I want to thank you all so much again for joining us and we hope to see you at the next one all right take

Listed in My Edlio Webinars

Video Gallery

Accessibility + Your Edlio Site [Edlio Webinar]

Popular Videos