Videos

Edlio Study Hall - Accessibility & Your School Website

Added May 27, 2025 •

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

In this session, you’ll learn essential accessibility tips and tricks, including: - Accessible Website Designs: Implement color contrast principles, link styling, and design elements that cater to all users. - Alt Text Settings and SEO Tools: Create descriptive alt text for images to ensure visually impaired users can access your content. - Inclusive Site Navigation: Build an intuitive navigation system that accommodates all users, regardless of their abilities. - Accessibility Beyond the Basics: Explore additional strategies for creating a truly inclusive online experience for your community. - Get a sneak preview of our automated Edlio Accessibility add-on feature! Let our CMS do the work for you!

Show Transcript

hello and welcome to the edlio study hall on accessibility and your school website my name is Taylor I'm a trainer here at edlio and I'll be leading you through today's recorded session now if you would like more assistance be this session you can always reach out via the intercom widget in the bottom right of your dashboard or um by emailing full suite at edlio.com specifically if you want more information on the edlio accessibility tool that I'm going to demo for you today that's going to make making you sure your website is 88 compliant a breeze what we're going to go over today first is why accessibility is important then I'm going to share some accessibility best practices for you to have in mind as a web admin and to know what accessibility features come with your at Leo CMS we're going to mainly focus on um media and ALT text as well as checking the accessibility of all of your pages that's because your homepage is designed with accessibility in mind so what we really need to make sure is that all the media that you upload and any extra pages that you create are accessible I'm going to show you how you can use the free wave tool to um understand your pages for web accessibility and how you can automate all of those accessibility checks um and fixes with edlio AI so first why is accessibility important what are we talking about when we're talking about folks who are accessing our sites with a screen reader well almost a third of adults have some form of diagnosed disability with 1 out of 18 us Americans having a vision disability so when we're talking about not just being compliant when it comes to Ada the Americans with Disabilities Act but as well as reaching our entire School Community which is um our mission here edlio it is important to make sure that our website is accessible for everyone joining now a quick note on that at the bottom of the page you see that schools should have a written policy on website accessibility posted somewhere on the site where it can be easily located your footer links is often a great place to make sure that you have a policy posted so now is a great time to go ahead and do a quick check and audit that you have that accessibility um post somewhere accessible on your site so folks that have a vision disability or sometimes for cognitive or physical disabilities will engage with your site with a screen reader a screen reader is going to go ahead and read all of the textual content on your page for that user of your website um and we'll go over when we get to our demo page of specifically how screen readers work but when we're thinking big picture we want to make sure that there is parity on our website between what is shared visually and what is shared in um written information whether that is words displayed on our screen or words that we um go ahead head and add for example as alt text to our media we want to of course to make sure that we are connecting with our entire School Community regardless of their accessibility needs but we also want to help you avoid an 88 audit because they can be a big deal they can be a long process um if your website is um brought up to the office of civil rights or to several state agencies um folks anywhere in the country can report your school's website for accessibility concerns and if it is audited it is um quite a lot of Labor and time to go ahead and make sure you're higher site is accessible so we want to go ahead and help you um hedge off that possibility by when you're creating content already reducing all accessibility errors so that you know that your site is accessible your meeting those Federal requirements for accessibility and that you're reaching everyone in your school Community regardless of how they are joining your site so let's go ahead and jump into our dashboard so we can discuss accessibility a little bit further um so um when we jump into our homepage um and we think about how screen readers work screen readers are going to jump from link to link and heading to heading so on our homepage here it's going to take folks through all the links on our homepage this is why we want to make sure uh when we're editing our site navigation menu that we keep um uh clear simple um names for all of the links on our um navigation menu to describe the function where each of these links take folks and it's again going to jump to um all of these links and so on and so forth down the page it will jump from header to header so folks can scan your page similar to in a similar experience to how I'm scanning the page right now to decide what um they want to engage with now of course as I've been scanning we skipped over all of our visual content because until we add all text the screen reader is not going to be able to tell folks what is going on in this media so that's the first thing that we want to focus on is um making sure that we are clear on what all text is now a setting that comes included with your CMS membership is turning on your alt text settings you're going to come to your hamburger menu down to site management and up to settings and you'll come down here to accessibility and we see the accessibility report this um is included uh for folks that have our accessibility tool that we're going to go ahead and um demo today um for all same as accounts you can turn on your alt text requirement this is going to enforce alt text for all users to add for any image and videos that you post um so it's not going to let you post those images or videos until you add an ALT text description that's going to be really helpful to lessen your mental load a web admin so you can go ahead and refresh your content on your pages on your homepage let's say refresh your homepage with some new um Shuffle pictures right at the top of your homepage a really easy way to breathe some new life into your homepage and you don't have to remember oh gosh did I add alt text because the CMS is always going to ask you let's go ahead and do an audit of um our media we're going to look at our homepage Shuffle first by coming to the hamburger menu media and Shuffles now here you're going to go ahead and explore which suples are active on your homepage um in my case I just have 1 Shuffle that is on my current design these are from um my old site before I had a redesign you might have multiple shuffles um some uh uh photos lower down on your homepage or behind your quick links you're going to want to get familiar with the shuffle categories that are live on your site open those up and come over to alt text and make sure you have sufficient alt text what is sufficient alt text well at a high level when we're thinking about what to write we want to ask ourselves why is this image being used and what message does it convey now if you have the accessibility tool turned on you're going to be able um to not if you don't have to think about what that all text is you can easily Jenner that alt text um and see what edlio AI uh says and then make small tweaks um based on you know your context and what you know about the photo if you don't have edlio ai or you want to create your own alt text description the best practice is to give a 2 to 8 words or about um a 100 characters is uh excuse me 200 characters is necessary now 100 characters is a golden rule by some standards but often it's very hard to get uh description of what's happening in this image under 100 characters and sometimes it may be easy especially if that image is decorative or has a simple image but if we are um let's say um hyperlinking our image we can see behind here and I'll show you when our edlio AI is done how we can hyperlink our image if our image has a link we need our our alt text to describe the function of the link if our image has burnt in text so if our photo here um says uh welcome to edlio college prep we would need that text as a part of our alt text because again we need to make that text that's a part of the image accessible to folks on a screen reader so here is our alt text uh written by edlio AI we're between that um that threshold under 10 words so we can go ahead and save what I would do especially if this is the first time in your dashboard or um if you noticed when you went to your accessibility settings that your alt text requirement wasn't turned on he went ahead and turned that on made sure it's saved now you're going to see if any image doesn't have alt text how would I know that it doesn't have alt text well let's go ahead and just remove alt text for a moment it's going to give me an orange alert that I am missing alt text I'm going to see it here and I'm going to it in my shovels home and I know I have to come in here and work on that alt text um so that is how alt text for images Works let's go ahead and make this image accessible once more now what about alt text for videos well if you have a featured video on your homepage or if you are using your video gallery um somewhere else on your site pulling videos onto your news um your videos uh need to also be accessible so we're going to come to our hamburger menu down to media and up to videos now your edlio video feature that comes with your CMS um has a lot of really awesome built-in accessibility features if you upload the video directly to edlio so let's say I want to upload a new video I'm going to be able to upload any of these file types up to 2 gigabytes per video and a limited amount of videos so there's a lot of capacity here I need to do is give a title to that video and then all optional description to display um below that video and then I need to give an ALT text what's an ALT text for a video versus a photo well for a video it can just be a very brief um you know about 1 sentence overview of the video content now that's all I need to do because the rest of the accessibility features are included in my annual CMS subscription all I need to do is confirm the video's original language and it's going to go ahead and generate closed captions and transcripts for me closed captions are captions that visually display the spoken words in the video at the same time they are said and these are a key component of accessible videos so so this automatic closed caption generation that's provided by edlio for every video um again simply a part of your subscription once you upload your video and save you need to allow about an hour for the captions to appear it reminds to write down here and then you can go ahead and review those and make sure that they are um up to par it's also going to automatically trans uh generate a transcript transcripts allow people to read a text version of the content without playing the audio or video um they're very important for folks using refreshable Braille devices uh to be able to deliver that video content and additionally if you're looking for a way to increase your SEO of your website transcripts give computers and engines a way to search the content of the media so it makes us immediate easier to find so a nice kind of Fringe benefit there once you save your video and you waited that our for um the the closed captions to be generated um and the transcript to pull thereby then we're going to go ahead um and come and make sure that our our um closed captions are correct um if we have um anything missing from our closed captions from our alt text it's going to go ahead and give us a warning here and we can always go into 3 dots and edit the video edit our description our title our alt text and importantly review our captions so you're going to want to go ahead and take a moment just to make sure the captions um went ahead and uh pulled correctly so I can go ahead and review we're so excited to partner with so I can go ahead and make sure that all of these um uh captions were generated correctly like if they're not I can go ahead and um make edits maybe I want to make small syntax edits because I can have that reflected on the transcripts I can even have the captions be regener ated if there was some major problems if you have a bilingual video again the ability to come in here and make line level edits is really going to help you you're going to want to save all your changes when you're done and you just need to to edit your those captions because you can come down and click this button and now every time I make changes to my closed captions they're going to reflect in my transcript um so both are edited I can go ahead and save and now my videos are accessible and ready to be public now a quick note you can also embed videos from the web here now you would just grab that video from YouTube from Vimeo Etc um grab that embed code paste it here but you'll notice there is not any um all text or closed captions you are relying in this case on the accessibility of that video from where you've pulled it so if you're pulling a video from YouTube make sure it's got sufficient closed captions before you bring it over to your website um so that's a little bit about all text with media now um a just a quick note there's no need in alt text to say something like photo of image of video of as the screen reader is are going to read that to the user so let's go ahead and move over to Pages as again this is another major area that you're going to want to make sure um is accessible um as this is the main area that you are creating as a web admin again your homepage is designed with accessibility in mind but there's so much content created um for every page that you create that we want to make sure they're accessible and as we're going to see after I share some best practice says the accessibility tool makes that really easy to scan all of the accessibility errors for example insufficient alt text um some of the other items I'm going to point out and fix with edlio AI just as we did with um our alt text in our media so we'll go ahead and check out um this process as we build a page so we're going to come in and open 1 of our categories and start to build a page let's say we want to build a page in our Administration section if there are any existing pages with accessibility issues I'm going to see those marked here and I'm even going to be able to review my accessibility report so I can see all pages and um whether that's a sitewide page a teacher page or a news item across my site that has access ability issues I'm going to show you that report before we end today let's go ahead and just create a new page in our Administration section here and I want to go ahead and start adding content to my page um now the first thing that I want to know is we want to give our page a clear page title that describes the function of the page um so something that describes the topic for purpose clear that's going to read to the screen reader to note to let folks know why they would come to that page that's also going to help folks using translation services on your website um the clearer can make our language the easier we allow something like Google Translate to uh translate correctly for us now we're going to go ahead and add a Content page block and start to talk about some best practices when adding content I'm going to go ahead and drop my text here you'll notice that I cannot change the font your font is automatically Sans serif by default that is just a guardrail um created for you because Sans serif is a great font for accessibility so that you can't choose a font that is going to have some accessibility issues we want to make sure all our text is at least 14.5 um and we also want to make sure that our we're using headers to give structure to our text box so we can see here um that we have this uh text got pulled in as a header 3 and this text got pulled in as header 2 and then we've got some regular um regular text here so what does that mean remember the screen readers are reading from link to link and header to header so they're going to read header 1 header 2 header 3 and then the text body in fact it's going to jump from header to header and then further go through these sections but just to give you kind of an idea of how confusing our content is going to be read to someone using a screen reader without resolving the uh correct use of headers to give structure to a text box so we can go ahead and um uh manually change these headers to go ahead um and um better suit our needs here change this to regular text or we can simply let the edlio I do that for us um but I wanted to give you the logic of um the reason the rationale behind the changes that both wave and the accessibility tool are going to ask of you the other thing we can often do in our text box is ADD Piper links now you can add buttons as hyperlinks these are great ways to add um hyperlinks that really draw folks attention um you can add the uh function here of the link where the it says at label or I can add a hyperlink here in my content box let's say we want folks to sign up for a campus tour um we want to avoid hyperlinks that are ambiguous so we wouldn't want to just say something like sign up here um because we don't know what we're clicking what we're going to uh sign up for their it's it's not descriptive enough of a hyperlink the other no-go is when we um go ahead and hyperlink that we don't want to hyperlink the entire sentence um similarly we don't want to overuse underlines as underlines look like long links in fact on pages you don't even have the opportunity to underline because again that is kind of a guardrail built into Pages for you we're going to launch to go ahead and try to have a clear um you know at least ambiguous um text as possible here and then go ahead um and hyperlink a um small area of our link and again with both wave and our edlio AI they're going to go ahead and let us know if that is sufficient and with edlio AI they're going to make the changes for us so it really takes so much off of our plate as web admin so I can go ahead and let's say drop the form I made to sign up here voila and I can do the same thing in my button now um those are the items that I wanted to bring up in our text box what about um um some other items uh lastly in our text box um we can talk about um font color so we have a white background when it um we're on our pages so it makes color contrasts pretty easy but it's something we still want to keep aware of um we want to make sure that the background and the foreground are contrasted enough that folks who are color blind are going to be able to access all the content on our page color blindness is more more common than 1 might think 1 in 12 men approximately um in the world experienced some form of color blindness so we just want to thank high level what do your website look like if we took a black and white photo of it right the best way to convey information clearly in the situation is to make sure our text always stands around against uh the background which in our case of course is white now for your convenience all of the colors that are automatically included in our um um um color choices here meet the wcag 2 color guidelines uh wcag double a color guidelines for color contrast on a white background so if I choose any of these colors I can rest assured that that's going to meet my um color uh background uh minimums now I can also alternatively come to the palette here and pull my school's colors drop my hex code um explore some other colors and that's how I got these um 2 leiter colors down here these have gone ahead and added 4 example because if we uh go ahead and choose these colors or find our own color let's say I want to um my hyperlink to stand out and I go ahead and I choose a color um and I go ahead and I'm just playing around and I want to choose a really light purple and I go ahead and save that now I can see that color um uh starts to populate here after the last color that needs that wcag double a guideline um but as we can already see that is really hard to see around the background even for those of us who don't experience color blindness you can kind of get the idea there now let's look at some of our other page blocks we can add photos um when we add photos we are going to be able to have a Photoshop or little mini photo gallery we will always need to add that alt text and we've turned our alt text requirement on so we don't have to worry about forgetting because it's not going to let us publish unless we do that we can also add file page blocks when we add file page blacks file names should be well-defined um so I can upload any file type from my computer or cloud service and when I upload a file again I want to make sure that that file name is clear and well-defined because is going to pull the file name as it saved on my computer or in my cloud service um and I want to make sure that the function of this uh file is clear for folks why would I click on this to open this file if I need to rename this file make it um more well-defined I'm going to click 3 dots 3 dots always lets me edit and I can rename that file now any file type is accepted um but when we upload a PDF specifically we are going to have these options to add a small medium or large preview of the PDF directly in the page now this is a feature that a lot of people really like because you know as schools were often creating a lot of Flyers um and beautifully informative PDFs that we're sharing in the building sending home in posting uh um sending home in folders um sending in emails however when it comes to our website we need to make sure to file PDF to follow PDF excuse me best practices that means that um our our files must uh follow the same logic as our um our content box we must have headers to those files so on and so forth um there are some uh resources in The Help Center I'm going to make sure that they are included in the deck for you all to be able to review your PDFs for issues if you are worried about your PDF accessibility the best practice is to simply not use a PDF and to go ahead and add that content directly to your page in a Content Block in a photo block so on and so forth but if you want to add PDFs again this is a great option and you'll just want to make sure that before you add it to your edlio website you vetted it for um accessibility remember this is also going to be um a question of accessibility for any of your multilingual School community members so as much as we add native to our website that means content that we add directly to the website we can make sure that we're reaching our entire School Community regardless of their accessibility um needs again whether that be um Ada screen reader accessibility linguistic accessibility so on and so forth now um that is some of the stuff that we can add to our page let's go ahead and just for fun add a photo here um so we can go ahead and see if we meet our alt text requirements now again if I kept adding multiple photos here it's going to make a nice little Photoshop or stacked photo gallery for time I'll skip over that um but you can always come to our intro to Pages study hall to learn more about the best practices and tips for all of our different types of page block so this is an example of an image that has burn in text chalkboard that says teacher Spotlight so again I need the um alt text to include that burnt in text and let's go ahead and see if this is sufficient we're going to go ahead and save our draft which is going to generate an accessibility report if we don't have our accessibility tool we can rely on the free wave tool as soon as we've saved a draft we can come up to actions and preview draft and this is going to show us what this draft where it looks like across devices so I can make sure is it accessible to folks on mobile do I need to collapse any boxes um I can always collapse my PDF box so it's um you know not too difficult to scroll on mobile so on and so forth and what I really want to show you is our wave accessibility tool so this is a free accessibility evaluation tool we're going to go ahead and click wave it's going to bring us over to the page on wave.webaim.org if you get a 404 message you might need to publish your page um in order for that wave feature to work um that's not always the case just seems to be the case in this moment um but let's pretend that when we preview the draft the wave tool has pulled my correct page it's going to go ahead and give me all of the errors on this page now how can I read wave because this is really what I want to show you today the summary is going to show you a summary of all issues errors alerts found on your page when we go over to details we are going to see um a detailed explanation of each issue and when I go to that issue and I click reference it takes me over to reference to explain to me what the is why it matters and how I fix it so the wave tool is really um great for autodidacts that want to be experts and website accessibility to learn and fix all accessibility issues um on your own this is a great Di why tool to explain to you um for example uh how does the screen reader going to read this page are my headers in good order order is it going to show you exactly that how your screen readers will navigate your page if it navigates to logically and structure is going to show you um that your page is structured with headings navigations um how is it jumping from what header to what header from what linked to what link now contrast is going to give you a color contrast tool um to ensure color contrast for improved readability so you're going to see if your colors pass um you can go ahead and test your colors to see what the limits of um lightness and darkness to at least meet that minimum of WC Agra pass so that's a little bit about the wave tool but with our accessibility um tool using edlio AI we don't even have to spend time um ating ourselves on every single issue and more labor intensive fixing all of those issues across our Pages especially if we have a lot of pages or an older site um that Pages have been created over semesters and years I can simply come to you my accessibility report I'm going to see all of the issues that need to be fixed for my page to be accessible and I'm going to also see some notices you'll notice that at this time edlio AI um can't read the PDF accessibility so that's why I stress that you make sure um that you go ahead and review that on your own before adding it to your website or simply transferring the content over um to your website directly not as a PDF it's also going to always remind you to keep your content between a 6 to 9th grade reading level again when we're thinking about accessibility we want to make sure that all our information is accessible to everyone regardless of ability literacy language so maybe we want to go ahead um and lower our reading grade level a little bit maybe I want to pull this text into something like a gemini or chat dtp and ask it to lower the reading level again to a 6 or ninth grade reading level is what we are looking for what Leah is going to do is automatically fix the issues the notices are something for you as a web admin to keep in mind and fix if you can um but the issues are really what we are focused on for um a base level of 88 at compliance we're going to go ahead and fix automatically with edlio AI it's going to look at all the issues that it's found and go ahead and take a moment to automatically fix all of those so it's Jenner rating um our alt text it's fixing my header issues so on and so forth and now it's fixed my issues it gives me a summary of those fixes so I can understand for my understanding and um continuous Improvement as a admin uh how to create pages with less fixes but again no matter how many issues I had at Leo AI is going to fix them all I can always rerun accessibility report just to be sure and I'm ready I can go ahead and publish my page now if you want to see all your pages with potential issues you're going to come to your accessibility um item in your hamburger menu again this is if you have your accessibility tool um added to to your CMS package you're going to be able to see reports for all news pedigree pages and personal Pages AKA teacher pages allowing you to see all of the um pages and news that have ISS you'll be able to go ahead and click on that page and automatically review the report and resolve those issues with edlio AI how does edlio AI work in news works exactly the same let's go ahead and view it real quick we're going to go to news and alerts I'm going to create a new news and I'm going to go ahead um and create a news article really quick let's give it a headline um in order to create this new story quickly I've just created it with some code just so that we can see again that report let's go ahead and review our accessibility report it asks us to save our news as unpublished so it's not going to publish it until we have reviewed and fixed any accessibility issues and I can go ahead and see that report see that again these common perpetrators of um missing or insufficient alt text and my headers out of order that take a lot of time for me to go ahead and um fix and review uh manually it scans and automatically fixes for me and then I can go ahead and publish my story so that takes me back my uh site management setting on accessibility if you have your accessibility tool turned on and you want all issues to be resolved before publishing news or Pages clicking this on and clicking save is going to all standard users um so folks making teacher pages folks who have you have assigned um the ability uh to help you with some discrete Pages um across your website you can see how to do that in our intro to user management study hall um all of those folks are going to have to resolve those issues before they're able to publish you saw um that we can dismiss an issue if it's something that's not relevant for example an ALT text that is decorative generally can be left empty however we can't leave alt text empty because our alt text requirement is turned on so we could put in something like decorative or we could put in um quotation marks to show that it's decorative um and if the system um uh does not uh in uh acknowledge that as sufficient only you as a web admin can dismiss a standard user can't dismiss bypassing the accessibility issues they're going to have to resolve it or come to you so this is going to be really helpful to ensure that that accessibility tool is used properly by all users of your website I want to go ahead and encourage you to review the deck that companies this recording you can review the FAQ accessibility here um you'll also find a um link to go ahead and see those PDF issues um you can also and that is uh right here um so you can see that link in our help center I also encourage you to come to any upcoming study hall sessions so that you can ask any questions live practice get demos we have study sessions um on all of our study hall sessions so that you have those chances to ask questions there 1 hour interactive sessions um and we'd love to see you there always remember there's additional training resources in our help center help edlio.com where you can uh reach our help center by access ing the intercom tool in the bottom right corner of your dashboard right here that allows you to search the help center send a message so on and so forth if you have any questions please reach out to client success at edlio.com and if you're interested in the accessibility tool send us an email at full suite at edlio.com and we'd love to give you more information thanks so much for watching today's study hall

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
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
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
27:42 New Web Admin? Start Here! [Edlio Webinar] Featured
Just took over the role of Web Admin and not sure where to start with your Edlio site? Check out this pre-recorded webinar where we’ll cover everything you need to know to get acclimated in your new role.
Uploaded Jul 14, 2022

Videos

Edlio Study Hall - Accessibility & Your School Website

More videos in My Edlio Webinars