Videos

Accessibility + Your Edlio Site [Edlio Webinar]

Added Jan 26, 2024 •

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

Check out this informative webinar where we delve into the best practices for enhancing the accessibility of your Edlio site. We'll explore Edlio's built-in tools that empower you to manage your site's content accessibility with ease. Our expert guide will cover: - Accessible website designs: Implement color contrast principles, link styling techniques, and other design elements in Pages that cater to all users. - Alt text settings and SEO tools: Craft descriptive alt text for images, ensuring that visually impaired users can access your site's content effectively. - Inclusive site navigation: Design an intuitive and user-friendly navigation system that accommodates all users, regardless of their abilities. - Accessibility beyond the basics: Discover additional strategies and tools for creating a truly inclusive online experience for your entire community. Together, we can make your Edlio site a welcoming and accessible space for everyone.

Show Transcript

all right folks I think we are ready to get started. Thank you so much for joining us today or this my edlio webinar my name is Danny I am a member of the client success team hear a deadly oh I just a quick housekeeping before we get started if you do have any questions throughout the course of today's webinar please feel free to throw them in the Q and A future I will do our best to get those answers for you when we may not be able to get them answered movie through the content today will always have time at the end here and then you know if you are able to get nothing directly answer for you today and always have your client success specialist follow up with you for any reason you cannot stay for the entire duration of today's webinar at the worries it will be added to our help center by Friday of this week's next two days it will be added to our help center so you can go back and review anything that we covered there in I hope Center of show you where that is towards the end of the webinar will jump into our help center together I know folks today we are talkin accessibility and how Ed Leo's build in tools ensure that your website can be as excess as possible Ada title 3 requirements at places of Public public accommodation be accessible to people with disabilities the internet is absolutely a place of public accommodation well before most of our day-to-day lives were moved over to the web so while the language doesn't specifically state that any of their our efforts to ensure that language is updated we all need to ensure that our school websites are as accessible as possible for everyone so everyone has a chance to learn about what's happening in our school community yes honey we are starting yes we are starting out at yes we are starting sorry. I can come in there in the Q&A portion their folks let's get started here now what are we going to be doing today now how does edlio your site stay ada-compliant will be looking at the different ways we help you ensure your site is ADA Compliant and from the way your site is designed to the building tools to help you get you where you need to be to reach your accessibility goes right through me looking at your home pages and specifically how your home pages are designed with accessibility in mind will look at our pages to land the built-in tools within page and help you keep your site accessible look up really quickly at our accessibility settings and why it's important we have that turned on and lastly will look at within our media features here we'll look at videos and the built-in tools we have there to help you keep your sight success I'm going to exit out of the slides here all right I will come over here to the admin site here right now today is webinar is gear Courts website administrators all right so when you login to your edlio admin site you should be something you should be seeing something pretty similar to what I have here as far as the features that we have here comes a hamburger drop-down menu everything that we have here you should be seeing all of this in order to really follow along with today just want to throw that out there ahead of time but over here this is just a demo site that we have all right so I mean I know you're safe look exactly like this so you might see some similar features things like that this is just a standard demo sign on the 1st and I want to go over is how edlio set you up for accessibility success from the get-go and Abby part of that is the code that we use all right we're always keeping that in mind when it designing and coding your site which really is a big part of why our home pages are so heavily hard-coded all right we ensure that using the latest coding standards for accessibility and feature a number of tools to ensure that you're keeping everything up to Snuff all right so we also review the page structure in your link to make sure that they are screen reader friendly when you're enjoying the Elio family and building a new site with us all of that is taken care of for a for you up front we love building Ada friendly site but we are handing the keys over to you so it's just as important for you is webadmin teachers purveyors of the content on your site to make sure that you're content stays a t a friendly letter using any sort of sites getting to like wave and you receiving errors are reach out your client success specialist your CS I remember every single site comes with one I'll show you how you can get in contact with your client success specialist if you're not sure who they are at the end of the webinar here to reject your client success Specialist or opening tech support case in your admin site I'll with screenshots of are right the more information the better then we'll kind of go through how we can open those cases later in the webinar I but in general what you need to do is we we are building out your home pages right we are always keeping accessibility at top of mine and that is why a lot of your heart out your your psych your is  the right you think you know not to name any you know competitors out there a Squarespace a which they don't specialize in K through 12 website they just specialize in you know making you do good looking sites at the school to have the Year of the Dragon drop features there but if you rent any of those sites through a accessibility on reader I would wager a bet that you'd get a good amount of I accept all the errors in just my opinion but that is why we like to hard-code our sights here just to ensure that they are staying as accessible as possible especially when we are done with the kitchen table space it is important to make sure that these sites are extremely accessible to all who use them now the first thing I want to come over here after their homepage year are with on our honor homepage is our site navigation all right don't no matter what your set aside navigation looks we ensure that it is accessible by keyboard so no matter what kind of accessible keyboard a visitor to your site is utilizing they will be able to navigate your site with just that tool all right so if you're on your homepage right now do me a favor go on your homepage you just start no don't click on don't move your mouse cuz they're heading that Tab Key you see right through that we're moving along through the site here and I'm going to click shift tab Gotta Move backwards right look timeshift have we can work through our entire home Patriots going to keep working our way down do you see here look that we're going to wait down for boom boom right that is just one more way that you're is accessible now I'm going to go back to our site navigation here could you want to look at pages I write the majority of your content is going to live and be built out in Pages that's why I want to spend the majority of our time for this webinar today in this case right so I can still use my keyboard specific page on a look at here under academics someone to press the arrow down button actually bring up all of the site nap items in this academic sitemap container what's the and of these Pacific Peter went to look at a narrowing down to World languages I'm pressing the enter or return button that is bringing us here to this page welcome to World languages but this is not the page that I want to look at look at this French page right here okay now I'm sure as you can all see right now you know there are already a few things here that I think you know we all going to be need to be updated coming from accessibility standpoint right and I'll show you the actual tools that we can look at here actually noticed these errors highlight these errors and in the corrective actions we can take to update this all right tell me to come back over to rcms year editing this page and highlighting some of those errors again how we can update those all right so we go to our Pages feature right so right here I'm going to go over here and click on it also get there from the hamburger drop-down menu I going to page Management in the same place all right now it's one thing to us if you're not sure where you know you're on a page and look at your I'm not sure where the you can always use the search Pages feature right here in this case when I know where the speed is called friends are World languages section in our academic departments category here is as French going to click on that all right very cool now we have a number of tools built directly into the ugliest EMS that will help ensuring your site is accessible as possible and the first one is our wave scanner tool at this will help you scan Lee page that you have in your page management for any accessibility errors we work with wave a great great organization to utilize this to a witch can identify many accessibility and web accessibility guidelines you might see that pop-up wcag that stands for web content accessibility accessibility conversation and is essentially just a guideline of the things that need to be on your sights in order for them to be accessible right now and again by utilizing this tools allows us to go ahead and get him the keys over to you to evaluate this content and updated as need be so let's go look at how we can use it are we can find it all right so we're on this page here now the first thing I want to note is for this page we need this what we just visited this page as it so the paint is already published right down here we need to save it as a draft all right so we could save draft we come up here under actions 3D draft all right now are up top here right when you be able to preview this draft what it smells like on a desktop on a tablet and what it will look like on a phone but specifically I want to use this tool right here way that we highlight that you see right there skin your page with a free web accessibility evaluation tools all right you see this here I know this might be overwhelming right we scroll down this page. different colors buttons things you know that they're higher than here I can be overwhelming focus our attention over here to the left or sitting here these errors contrast errors and alert these are the three things we really were pay attention to over here on details and this is going to kind of give us what we really need to be working on on RCN again under errors contrast errors and alerts those kind of working from the top. of the specific page here alright a couple things now this one right here linked image missing alternative text I thought I see this icon right here I clicked on it so I could see it right here this image right top our header image is missing alternative a text alright I'ma click that I'll see an image without alternative text result in an empty linked good so with any that you have here you click on this reference button I love this and you go over here weed breaks it down for you right why is this why is this an issue why it matters what you need to do about it it breaks that even in layman terms or layman's terms over here at the algorithm English I love this tool asking for anything that you know if you're scanning a page you know you want to go through and just click on each of these little buttons here I'll give you that reference fun and see them when do I need to update this table so with this one right here we need to add alternative text to that's all right when I got back over to our admin site so this is the header image that does not have an alternative text all text Barry very important at the at the any image to your site and if you if you have your accessibility settings turned on which I'll show you where those are in a little bit you're going to have to add alt text to an image you cannot add an image to your site without adding text to it I'll text is a short to scrimmage of what the description of what this image is all right for anybody utilizing a screen reader right it's going to scan the page it's going to come to the image we want that all text Eric the person you do if they are visually impaired they're not able to see what's on the screen that using a screen reader that screen reader will tell them hate this is an image of whatever you put the old tax there so I can click on this Image Hair click on Alt that's where we can add that old text I want to take it a step further though folks okay coming back here right here this and it's not going to pop up here on this is just a general best practice time I'm telling to you we have this text within it welcome to the French Department which is nice that's nice to have a nice walk a message there it's best not to have it within the image though you know we just want to have the picture stand alone as it is a we don't really want any informative text on there I got actually make use of the page titled I can use that welcome the French Department I can make use of that here on the page title so I can have another version of this the French flag here without that text there I'm going to delete this one in upload a new photo I'll text that new photo I'm going to add somebody delete this one in and upload spinner all right we want to give text here now we can all text needs to be a description of what the image is we wanted to be a descriptive not over long all right on this case we literally just put French but we'll keep it real simple are there going to be a full sentence just enough to let you know that if you don't know what to say is over here we have different options of click on this card but in here this is words for adding a hero image to the on your page lets you go either full with their constrain the song more personal preference not really to do with accessibility guidelines I likes this strange look here so I'm going to go ahead and save that so then save our draft on that you told will do here folks as well go through are we still have this wave report up from before but is not going to have the updated changes yet we'll go in a note all the changes it's suggested we make here and we'll go back and fix those and then we'll have our new finished more possible page here by the end Sean a great question does this have to be active 2 preview draft we have had our site redesign and are getting ready to Launch as long as you have that that page ready to go there you should be able to go in and utilize this all right so I can you just want to select the page can be published you just you want to go ahead and also select save draft there to be able to then go in and ask using this wave tool okay alright I'm so immature and we do, two ways we can kind of just follow along here on this case that note is broken already just words are splitter what's going to keep going down here working our way through this I still get to hear H1 French that's fine no errors there we come down here 103 3 right here we have an error right here I can see it over see right here look like on that a heading level has been skipped what does that mean folks all right now headings are super important and special utilizing them in the correct way is super important to write we can see right this H1 or is heroin or hear the Texas bigger here than this H3 but come back over to our admin site right here is where we had this was at a header three when you utilizing headers right now headers I'll show you here after text you know I just I like this text will come up here I'm headed towards our immense be utilized in a way where you're going in sequential so you don't want to skip from head H1 which is the title here so the title of the paper here actually will update that to welcome to French Club that's going to be H1 that's Heather one we could right here that's H1 you don't want to skip the header three right against somebody utilizing a screen reader if it jumps from H1 the title to H3 here they might throw things out of whack you want to go in sequential order so if you want to let people I hate this is the next heading then that's cool but you want to make it harder to not header 3 and something to play with text sized never ever do that always if you want if you just want to play with texize not makes me a header just go in highlighted you can go in and play with the text size right here easy enough but yeah we got that a H2 are there so now it's three hours now that is 8 are coming back over here keeps going our way down here sure we can kind of see hear what the issue would be with these will click on this button again we see the air here is very low contrast folks all right a very low contrast between text and the background colors all right eye that is why whenever you open Vortex energy I had text so it's always going to be black text on white background you got the best contrast there for any reading your text that's why it's always going to default to that all right to come back over here what's the odds of some people like to utilize different colors to really highlight are going to accentuate something you it's fine that's fine with you if you're going to do that you got to make sure it's a meeting contrast guidelines alright a couple different ways to check that before we kind of get in that I just want to go in here and I think the person who made this was trying to make it like The Fray spider with the red and the blue here but I'm still going to go over here will make this black all right so there we go looks good we have the correct contrast there are books if you want to check to make sure if you can do you you want to add you know different colors of the text here you want to make sure you lysing at the best contrast there and a great tool to check that I'm going to come over and over here is a stool by web aim web accessibility in mind all right the great organization I know this amazing contrast Checker that you can use to see what your what you need to get a passing grade right now so if you're you want to be like me not black on white right you want to let you know take whatever color it is that you want to change it to you or come over here but if you're under four grand color and it will tell you whether or not it passes the test that here we just kind of show you right now that has this is blue on white here I'm going to play with this and I'm going to make it a lot lighter a lot lighter YouTuber already failing right down here fail fail fail at the later I make it the more were failing all right so I guarantee if I put the colors that I just had here unless it would fail instantly I'm so you always want to check to make sure that you're utilizing the correct contrast now I I get if you want to utilize this tool we have that you are all right if your fortune am I able to add it through the chat feature here but if you just search web am write a web aim contrast Checker it's going to be the very first school results when you Google it recommended lies in this if you ever you're not sure about that my favorite building out any sort of you know Graphics or anything in canva always check in here it's the house with your contrast again come back over here. This is a wider conversation about how colors are used on your site again if you make any graphics weiner sure that we're thinking of individuals with color blindness right on red and green color blindness is the most common so we don't avoid red and green vice-versa things like that and in that thing then I would really avoid using red and green as a good and bad indicators on your site you know I got Ashley when she pop up from time to time if we can avoid doing that I think it's for the best again that red green color blindness is the most common out there or here I do want to talk about what you see right here we have a link all right now same here we've already up to the contrast cuz I was a believe it a light gray before but this link was copied over from another page which is why that coloring was off that rubber when copying and pasting content over from another page you always want to clear formatting right so you're copying and pasting something you always hit the shift command V or shift control be to make sure you're clearing the formatting for your page you can also come up here r2r text editor you always clear formatting up here as well but with this link here I do want to talk about this real quick links in general best practices for web accessibility architect you also have accessibility locations of A good rule of thumb to follow as that all links should still make sense if a text proceeding it is taken away about hyperlinks in this rate we see here learn more about French Club here here is what hyperlinked all right now again that's a good rule of thumb is we want to make sure it would still make sense if we took all the texts proceeding to link a way in this case we would just have the word hear the person will not know what the clicking I would make any sense I so we want to update this phrasing here all right Hassan this case right we wanted to click on this link to learn more about French Club so I'm going to come back here I'm a text via pre-read and I am pressing shift to mandate to make sure that formatting is cleared on my end here but read the following article to learn more about French Club all right so I'm going to go ahead and hyperlink learn more about French Club all right that way even if we took out again to text proceeding to read the following article to write learn more about friends come with a hyperlink that it still give you context for what it is that were actually leaking out to all right so we'll go up here Aladdin are hyperlink is adding in demo text. when we add a hyperlink it's automatically going to add this blue here right that is automatically been checked to make sure that the contrast level is appropriate there another reason why it's important to clear formatting would bring something over to make sure if we hyperlink something that it'll automatically show up with that blue once we at the hyperlink okay sweetie updated these let's keep working away it down a couple more things to look at here as we updated these the contrast errors give another header are right cuz we went h-12 H3 of this and we also make sure we technically could still make the H3 here but let's just go in and update this to H2 again we want to make sure or Saints punt to order I am down here right you see this are right here will click on that text is very small and I think it's looking at a we kind of that is way too small get me click on this and I love this referencing tells you why it's so important to have a text that an appropriate sized here so we'll come back over the simple you just highlighted where to go here you could come and go different a few different ways with this I really think it's very important to I was a minimum 12 ideally let's go you know go 16:18 if possible big right but again anybody utilizing a screen reader I am going to repeat that very thankful that wherever you was at work might be hard of hearing it would be very beneficial to them General best practices tips tricks for font and font sizes now when you create your every other site do you have this this van to use right we don't have a fond option up here in the text editor okay if you don't like the font currently on your inside Pages reach out your client success Specialist or open a tech support case let it let them know which font you want to use I'm your anything on your Google fonts anything for you there I was able to be used if you don't like what you currently have you can reach out and we can update that for you in General on San serif fonts display a better on computers and mobile devices write someone a sans-serif font there any sort of like decorative like overly stylized with or without reading disabilities sometimes did they do Lecrae on sites your friends again they are predetermined so again reach out to the CSS or Tech Support to get that updated for you we really want to make sure we're going like as big as possible. we don't make it look cartoonish I think a size like 14 14 16 18 will be perfectly fine here all right now let's see come back over to our wave report lasting where to look at here right down here e d f error that we're getting rice we can order details right here is that PDF are I will click on this link to a PDF is present we have that reference compels why why it's not great to have a PDF all right I'm in this kind of more Falls in line with a best practice a big conversation around PDFs and accessibility best practice but whatever possible we recommend creating pages are haunted boxes on your website for Content instead of adding a PDF write a bill Pages we have that built-in code to make the content accessible which PDF aren't always accessible place in your contest directly onto your page has multiple advantages the right now I can click on this and will open in a new tab and we'll have a nice kitty after we hear what you do for most people that that's good but it's against an accessible to everybody if I come back over to admin site one click here all right we want to place this content directly on the page so I'm going to publish this right now click down here when I click on the stock right so this is what it is it's a list of classroom expectations it's a simple text Doc right just look at it this way easily be added to the page here all right so I'm going to I'm going to go ahead copy all of this content here come back over to our admin site will go here we're adding new content box all right I should commend be there we go all right boom by to go through all this but we'll go in and publish this down as is Yan if you were actually going to make him work that's what we want to go in and add is in between all of paragraphs here but simple text like that can easily be added to a Content box now he has to do that instead of having a PDF right it makes that text searchable so if we just had this PDF I test will be as easily searchable so people can find information listed there right it makes search engines able to read the text which helps with your SEO your search engine optimization which is very helpful I need the content to be translated it's easier for you to update anytime in Fright there in your adley ocms and you can do it just it's it's a lot easier for people to find their if you absolutely need to include a PDF just a couple of notes we click on this dock year this is I think I want to go over the naming convention first off exactly what the file is right no Nick crazy number and letter combinations of applications does Doc bunch of random letters and where is here let's go in will look on these three dots we can rename it songs Christmas in French expectation again folks this is just if you absolutely need to have a PDF ideally it's good to have the content box there but that's not going to work for every situation if you need to have a PDF I want to make sure we have an accessible name there another helpful thing to would be here for click on these that's actually have the file to PDF a displayed on the page and click on these. Your rights right now we have it selected under file name all the way to the right we can actually see what does PDF looks like on the page okay I understand if we have a big block of text here it might not look right right we were going to keep scrolling we can always make this collapsible that's what cement plant expectations I wish that we can come back over here folks we will refresh this page that we update it's weird you know added this PDF so that I can be viewed on the page but if we don't want that we can also just have it in a Content box here we made a collapsible doesn't take up as much space I filled one wants to leave now we can see what it looks like just having the PDF there. it on your semi delete it but you just need to see how much cleaner at looks right there across from expectations Cordon Bleu by me open right there folks just looks lockley add more accessible to everybody utilizing your site all right now. Couple more things I realize what kind of going over on time here so just a couple more things I want to look at your ability settings I I mention earlier when talking about Pacs Thrift this image here we come over here to the admin site with a site management and settings I think you're under a accessibility all right I want to make sure this is checked off and nabal Ada settings right it's going to make sure a couple things happened specifically that any picture at at your site has text all right what important things know if this is not currently checked off what it will do is it'll hide any photo that currently doesn't have all texts are the attitude you want to go through your site and make sure you're adding all text to everything that might need it before you that off but you do want to check off that we moving forward anybody who has a photo will need to add all text to it I will go and save that hooks all right and then one last thing I want to look at here is in media media videos and audio are baked in so what's that you want to upload a new video you do that over here by select a new video audio follow the prompts once you do we have a number of tools here built in that can help make this video more accessible first thing here are we still down is our closed caption and we auto-generate closed captions for all of our videos is great but you know AI isn't perfect I'm so there's going to be some errors when you go through if you can go through an edit the captions here so this case I know the first thing. videos Hello my fellow Central Texas Ed Lee in Italy is really isn't a word so it gave me this weird and I don't know what to say in there I'll go ahead and give the punctuation things like that might need to be updated so that is one very cool that you could do to make your content more accessible there so just save that another cool thing to is it was the editing of the captions here we also create a transcript of higher video when we upload these so everything said in the video is also added to this transcript so we can do is check off this box right here override transcript everytime captions change when you go in and edit those caption any edits you make to the captain's is automatically going to be updated down here into the transcript so get anybody visually impaired who isn't able to watch the video you'll be able to at the very least read the screaming are you read the transcript right here in so if you do that saved you some time to get the caption and override that transcript from editing your captions there okay all right last but not least folks this one or two it was really meant for beginners all right some of the help you know make you crawl if you want to run right we want to go from crawling to running I'm going to go here to our help center help help center we have a whole learning path set up to learn more about accessibility in your side so we going to help articles all right we scroll down scroll down scroll down to learning paths we have a whole accessibility section here look at all these articles folks look over here on the right hand side just go through you know scan all this I'll help you make sure your site is totally up to date as accessible as possible specific guides for teachers in building out teacher pages or web adamant when going through your entire site things that you want to look at things that we weren't able to cover today in this webinar so please take a look at this folks you know we had our accessibility work on this awesome really really really great content here so I definitely recommend getting there again how particles scroll down to learning path and see accessibility right there on the hook I know we have gone a little bit overripe preciate you all staying with me here I do want to thank you all so much for attending get if you want to go more in-depth on accessibility on your site reach out to your client success specialist remember every edlio site has its own client The Specialist or css you might hear us a CSS whenever we say that were referring to your client success specialist they're there to help you succeed in accomplishing your school communication goals with your website so if you're not sure your client success specialist is reach out to client success at Ed leo.com and we will introduce you to your amazing CSS they'll be happy to hop on a one-on-one on one Zoom with you took over your site and answer any questions you I have to go through the questions that way I see her in the queue in a feature here in just a second but for folks we're not able to stay for that I do want to thank you all for joining us for today's webinar and I hope to see you at

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

Accessibility + Your Edlio Site [Edlio Webinar]

More videos in My Edlio Webinars