 Okay, perfect. Well, then let's begin. So as Joe mentioned, my name is Michaela Blackham, and I'm the accessibility and QA specialist at Atten Design Group. We have a lot to go over today, and I definitely want to leave time for your questions and examples. So I won't be doing my normal intro, but I want you all to know that I have about 10 years of experience as a flash touch screen developer, yes, I said flash, a web designer and a full stack developer, and I've had a very close and personal reason reasons for my passion on both physical and ADA compliance. I'm appreciative of Atten for letting me kind of run with this position and strengthen our accessibility knowledge team-wide, as well as fulfill a partnership with a blind institute of technology. So you're coming to the right person about ADA compliance today. Today, we won't be going to the intro about accessibility, but rather just have a focus on accessible content for your website. So let's talk about making your content accessible. Many people think that this is all up to the developer, and yes, developers, designers, architects, and so on, all have a major role in creating accessible websites, but a majority of the errors I tend to see on sites are actually related to the content. Your content is one of the most important aspects of the site that need to be accessible because, well, people are coming here for your content. So we need to make sure this is available and easy to read for those who may rely on assistive technology to navigate, who are blind or visually impaired, maybe color blind, or suffer from cognitive issues, mobility issues, or auditory impairments. So let's take a look at the six important areas to focus on when creating accessible content. We want to make sure that we're creating accessible visuals, and that includes images, maybe logos, complex images like graphs and charts and videos. We want to know when to use a table and how to make them accessible if we are using a table. We want to make sure that we're producing scannable content throughout the entire site. We always want to use semantic markup when creating content. We never want to override the site CSS, and we'll go into detail about that. And finally, we'll go over some ways to check your work. So let's dive right in and let's talk about creating accessible visuals. Now visuals could end up being, like I said, maybe they're images or logos in your content. It could be a focus on some complex images like infographics, charts, or maps, or even just embedding some videos. So let's talk about images. We want to make sure that we are including accurate alternative text. Alternative text provides text alternative for non-text content such as images on websites and apps. It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities. It is displayed in the place of an image in browsers if the image file just didn't load or when the user has chosen not to view images. It also provides semantic meaning and description to images which can be read by search engines or be used later to determine the content of the image from the page context alone. But as you can see here, I emphasize accurate alternative text. And that's because just because you have alternative text doesn't mean that it's actually conveying any kind of content. So if it isn't accurate, it actually isn't accessible. We also want to make sure that we're including descriptions with your images, which I highly recommend. Not only does this emphasize any point you have on the page or the reason to have an image, but it really just gives a lot more context to what's going on with your content. And just a reminder that if you are including a description for your image, then the alternative text in the description should not say the same thing. We don't want any repetition between a screen reader to hear the alternative text and then a description. This is the same thing. It's a little annoying for them. So we want to make sure that we're taking advantage of the description to really talk about what's going on in the image. So I want to just dive in a little bit more on how to make accurate alternative text. Alternative text should convey information that is equivalent to the meaning or purpose of the image within the context of the page. That's a very important piece there. It could be within the context of the page. One image could have various different forms of alternative text, depending on the reason for it being used. We also want to make sure it's distinct. So 10 or so words are less. I mean, if you do 11 or 12 words, it's not the end of the world. Just try to keep it under 10 if possible. We want to avoid words like image of or graphic of and things like that, because the screen reader announces that this is an image and this is the alternative text. So you don't have to include any of this extra verbiage going on. And we need to make sure it's never the same as the file name. They should not have a .jpeg or .png in the title. This isn't helpful at all because, again, it's not conveying the purpose of the image within the context of the page. Now, alternative text is not an SEO keyword fill. So do not just put a bunch of words in there that's going to help with SEO, because, honestly, nowadays with Lighthouse kind of weighing in your accessibility scores, they will take that to note and they won't actually put you higher on the SEO scale. By having accurate alternative text will actually help you in the long run. In any images that are just a text as image, that's going to be your alternative text. It's very simple because at that point, I'm not sure why we're having text as an image. It should probably be text on the page. So we just want to make sure that we're getting that same information across. And this is one that might seem weird, but I've seen it a lot, especially in social media posts, is to just don't use emojis in alternative text. Some of these are read really wild to a screen reader, so we want to make sure that they're pretty accurate. And all social media actually have options to include alternative text. I'm not going to dive into that portion of that too much today because I've done a past webinar on that, which we'll include in the resources. But just so you know, alternative text is just as important there as well. So let's take a look at an example. We have a great picture from our Atten Summit this past year. This is the Atten team during a presentation from the Blind Institute of Technology. Let's try and give this picture some alternative text. Do you mind filling up a poll here so we can see which one might be the best option? Do you think it's going to be a group of people listening to a presentation? Will the alternative text be BIT founder giving a presentation to Atten Design Group, man standing in front of people in the office during a presentation, or Mike S. BIT founder presenting to Atten staff? I'll give you a couple of moments to kind of figure out what you think would be the alternative text based on this image. Aha, I see someone in the chat getting sneaky over there. So technically, these are all correct because as someone mentioned in the chat it depends on the context of how it's being used in the page. So basically the alternative text just depends on why this image is on the page. What is the reason for it being there? Is it decorative? Does it serve a purpose? What is it emphasizing? For our case, this is being used to talk about the partnership with Atten and BIT and listening to Mike speak internally at Atten. So the alternative text we use in this case was, not sure why that's something moving. There we go. I'll let the screen reader do the talking on this one. Mike S. BIT founder presenting to Atten staff image. Mike S. BIT founder, you are currently on an image. So as you can see, we were able to have the screen reader actually announce what it was and we went with the Mike S. BIT founder presenting to Atten staff because we were trying to emphasize the aspect of Mike S being the person we were really talking about in this article and what he's doing to help with the partnership and everything that's going on. And remember that we want to include a more descriptive version of the image and we want to make that encouraged because you feel the alternative text may not convey the image's content. This is great for visual users but also to enhance the context of the image for those screen reader users. So here we can say that we were presenting to the Atten team but we went into a little bit more detail about diversity and inclusion during a team building exercise so that way we can give a little bit more context. And let's look at another one. What about images with text? We kind of briefly talked about this. If we're looking at this image what do we need for alternative text? We'll give you another moment to kind of choose what you think is the best option. Any good answers? It looks like most of you guys got this right so the answer is actually Drupal 9. That's exactly what this image is saying. So that's all we need to end up putting for the alternative text. I know the rest of it is kind of a pretty picture and this and that but really the only instance that we need to worry about is that this is Drupal 9. So what about working with logos? What would the alternative text for this one look like? I promise this is the last one you have to pay attention to. Would it be Atten, Atten Design Group, Atten Design Group logo or Atten logo? This is good. Everyone has different answers here and technically that's because these are all correct. I prefer exactly what it's for. So Atten Design Group, that's what this logo is. So Atten Design Group but none of these would actually be bad to encounter and absolutely give enough content of the image for what we're looking at. Just remember that sometimes images with text should just be text on the image. So let's scoot on to the next one. So let's talk about this one, complex images like infographics, maps and charts. We talk about this a lot and this is kind of a little more difficult to work with. So let's take a look. When we think of complex, we think of more than 10 words. We're not gonna be able to be very succinct when we're talking about alternative text for these images. So when we're talking about alternative text we should describe the point of the complex image. What is the reason for it being there in the first place? That way we can kind of give exactly what we're looking for. If you can't do that within 10 words or less you can honestly just point to a description. You can say that the chart is being described in the description below or in the caption or within the context of the page. So you can kind of get to go without direction there. And another thing is that obviously we can't do everything in 10 words. So we want to include descriptions for every complex image. If you have a chart or map for any kind of infographic definitely include some kind of a description. Or in that description maybe just say that you're pointing to the complex image when it's being described in the text of the page as mentioned before. So let's take a look at a map example. So right here we have obviously a map. We have add design group highlighted. We can see some of the other things going on but looking at this it looks like we're looking at add design group in downtown Denver. So in order to talk about the all texts of this I would probably say Denver area map with add design group highlighted. And then maybe after that there's a link that says directions to add design group placed after the image. And if we want to highlight the importance of the page and then include more information after. Or even we can include map described in description below. That way we know that there's more information in the fig caption that will be described there. So let's take a look at this graph. We have this pie graph of pets, all my favorite animals, dogs, cats, birds, rabbits, hamsters. So if you have any thoughts on what the alternative text should be with this just feel free to put something in the chat real quick. Otherwise I will definitely just tell you what I think is gonna happen. I'll give you two seconds. If no one's quick enough then I'll start jumping in. So we can see here that this is a graph of people's pets and it looks like most people have dogs 40%. So maybe a good example of alternative text for the actual graph could be pie chart showing a majority of people have dogs for pets. However, maybe the context of the image is to show that rabbits are making a comeback as a pet. Then your alternative text would be something like pie chart showing rabbits and birds are growing in popularity or something of that sort. So obviously whatever you're trying to convey with this graph or this chart is what you wanna put as your alternative text. And then obviously if it's still not enough if you wanna get into more detail you can absolutely include a description that goes in after so people can get more of that breakdown. So now that we talked about complex images let's talk a little bit about videos. There's a lot I could say about videos whether it's blinking and flashing or responsive or autoplay or anything of that sort. But a lot of that isn't relevant to content editors. So I think from a content editor perspective we wanna make sure that we are captioning our videos or at least sending them in the direction for what's going on there. YouTube and Vimeo have automated captions which aren't horrible but they aren't great. This is a great way to start out but it's always recommended to get these cleaned up. For instance, I'm using auto captions right now which is doing a pretty decent job considering this is a live presentation but I can guarantee there have been some moments where you may have giggled because it might be a little off or anything but it may be funny sometimes but to a user relying on these they wanna make sure that these are accurate and clean. We also wanna make sure that there are downloadable transcripts if necessary. These are super helpful where they're time stamped and it tells you exactly what's happening. It's great for students in higher education who may wanna go in and be able to highlight exactly what they need and kind of have that reference for what's going on. And then in some instances we may need audio description for blind users. These are not always necessary because it depends on the video. However, something like a recorded science experiment will need audio descriptions that are announcing exactly what's happening in the video so the user can understand that, oh, the volcano is erupting when you're putting these two elements together. And adding a text description is similar to how you would add image descriptions and they're always helpful not only for a screen reader user or someone who may be hearing impaired but just for an everyday user to understand the reason or purpose for showing the video on the page. So next, let's talk about tables. This is always a fun one. A table allows you to quickly and easily look up values that indicates some kind of connection between different data types. So if we're going in here we wanna make sure that tables are only being used for tabular data only. I see it all the time but do not use this for structure. And I know you're probably thinking like, oh, it's 2021, we're not using tables as structure. And you would be kind of silly to actually think that because I see a lot of people that put it in there and they're like, oh, let me get rid of these outlines because I like the structure of this key value pair instead when maybe a data list makes more sense for that and become a little bit easier to navigate that way. Just remember to just don't over complicate tables. Tables are not the enemy. We wanna use them when it's appropriate. However, if you find that your table is getting fairly complicated with like spans and you're doing these row spans and call spans and this and that, I'd recommend just have a developer implement these correctly with the appropriate accessible labels. And on your end we wanna make sure we're creating tables with table headers. And I'm not saying visual table headers. I wanna show you exactly how to create a table header, the TH that would be going on there or even for a table row as well. They can be in either section. We wanna include descriptions for the tables as well so that people can get an overview of exactly what it is. If the screen reader user really doesn't wanna go through the table and try to figure out how that works they can at least get a gist of what they're seeing with the description. And just remember that there is no great way to display tables on mobile devices. There's different directions. We all kind of go in different ways depending on what the content actually is. Maybe a scroll is better. Maybe we do it in one column and things of that sort. However, there is no great way. So we only wanna use tables when it's necessary. So let's look at a table here. So these are actually two of the same tables. However, one is written with actual table headers and one is just visually showing a table header. So we wanna make sure that we're actually doing this correctly. So I'll show you how to do this within Drupal. So if we're in the CK editor and we're adding a table to the page you can see I am in the WYSIWYG where you have the options for a bold or maybe list and we have the table option. So we're gonna click on the table and from there it actually brings up different properties. So this is where we can create the amount of rows or columns make it a certain height but there is a section for headers. You can see it's automatically at default none but if you were to click on that you can end up doing a first row which is the normal one that you would see like the one we just saw that has the table headers for each column or even the first column if you want it to be for each row is a different section that you really need to pay attention to or even both. And this is super important to implement so that a screen reader user can navigate the table correctly. They'll be able to do column one, table header, apples and go in and like actually read the cells if they're meant to be read. So now we talked about tables we wanna make sure we're producing scannable content. This way we can get users to get the content that they're looking for right away. So let's look at how we can do this. First we wanna focus on creating descriptive headings and labels, headings that describe the topic or purpose ensure that labels or headings are meaningful when read out of context. For example, when jumping from heading to heading within a page, people can easily get to the content they want without any issues. They know exactly what they're looking for. This also helps break up the content a little bit more and then it becomes slightly more manageable chunks to read so that they can easily scan the page. So let's take a look at this example. So here we have some basic content on the page and you'd have to kind of dive in if you're just really trying to figure out what you're looking for. You don't really know, you're looking for some kind of partnership that was mentioned. By putting in the correct descriptive headings we can see do you need to find an apartment? Yes, I do. Okay, so now we wanna learn about the app. Oh, here's the partnership I was talking about. That's what we were looking for. Now we can easily get that information rather than wasting some time or getting confused looking for everything. Another important piece here is we wanna make sure that we are not writing in all caps. Not only is this difficult for anyone to read for more than like maybe a couple words at a time like I've seen some paragraphs that are written in all texts which at that point I'm a little confused and kind of get lost but not only that but screen readers announce these letter by letter. So for instance, this heading that we're looking at is actually D-O-N apostrophe T-W-R-I-T-E, et cetera, et cetera. If you really want these to look like all caps just talk to your developer and they'll make sure that they implement some kind of CSS style within the WYSIWYG that they'll be able to make it look that way and not actually read that way. Another important one is we wanna make sure we're avoiding underlines. I see this used a lot for emphasis but really an underline is the universal sign for links. If you're seeing something underline you're automatically assuming that you can click on it. So instead we wanna be using bold or italics for emphasis instead. I like to use this example here. So we're looking at some content on a page and you can see react and hide charts is underlined. And from there I would automatically assume that that's a link. But really if we go to this next one we just had color use for the links instead. So Drupal 8 or health system data center and things of that sort. But if you're color blind you may not actually catch that color difference there. So you're still gonna go to the react and hide charts as the link. So ideally we wanna stay away from the underlines and just reserve that underline and color change for links only. Now that we've been talking about links let's make sure we're making them descriptive. We wanna avoid vague links like learn more or click here or read more or anything of that sort. And just remember that multiple links that actually say the same thing on one page is also considered vague. A good example that I see all the time is maybe a list of events and it will have the heading and then all of a sudden a join event and then another heading and join the event. And at that point there's 10 join the events on the page. So you don't actually know what you're joining for unless you look around for context on the page. And this is all important because screen reader users can actually navigate by all the different elements. So if they're navigating by links alone they're not gonna know what event they're joining. Now that link is still very descriptive and if it's by itself and there's no other on the page it can still be descriptive so it's fine but once there's multiple of them that's where the issue comes in. You also wanna notify the user that a link isn't external and I'll show you a couple of ways to do that. We also wanna notify the user that a link is a PDF or any kind of alternative format that's not HTML. We need to make sure that logos and links or logos and images are also linked as well. So that would include correct alternative text or even just text that goes along with the image that would be linked as well. So for example, we don't wanna have to learn about the history of HTML click here. What we wanna do is just have history of HTML as the link that way it's descriptive. We know exactly where we're going at that point and for a screen reader user jumping around by links they can easily know that, okay history of HTML I know exactly what we're going to learn when I click on this link. And so let's have an example here where we have a download annual report. You would assume download means a PDF of some sort but you really don't know because it's gonna open at a new window or you're actually downloading what's going on. So what you wanna do is you need to include PDF in the actual link text itself. And we usually do it with the parentheses here or if we're using the image for it, the icon, the PDF icon will include the alternative text for that within the link so that it's still being read correctly as PDF. This would go for an XML document or even a Google sheet if you're linking to a different form like I said, that's not HTML, it should be in the link. And that's great for any user. I don't wanna automatically download something if I didn't know I was gonna download a PDF or screen reader users have a very difficult time interacting with PDF. So you wanna just warn the user that they might need some help to actually explore that content. And when we're thinking about external links we see this icon a lot and that's really helpful but as you can see here this is an example of visually it still is helpful but for screen reader user it may not be that helpful because you can see the external link isn't a part of the link, it texts itself. So we wanna make sure it's included. If you don't have the ability to add that icon you can also just include external link within the text as well so that people can get that information. I didn't wanna show a great example of what we could do instead of using all of those learn more or somewhat descriptive links. So here's the Nike website and you can see we have shop, shop, shop. Shop alone would probably be fairly descriptive if it's only on one page. However, we don't know what we're shopping for cause we have new basics for school uniforms, new backpacks and more new must have kicks. So all they really had to do was just make that heading that they have there the link itself where it could say new basics for school uniform is the link or even shop new basics for school uniforms shop new must have kicks and so on. It's something that we're seeing a lot more of getting rid of those learn more links and just having those headings be the links itself. And just remember when creating content I know we just wanna keep it kind like everything clear and concise. I know sometimes we wanna include everything and go a little overboard but clear and concise and keeping it simple is just always the way to go. And along with producing scannable content come semantic markup. These two go hand in hand when creating semantic scannable content not only does this make it scannable for you who may be a visual user but we also need to be making it scannable for those who require screen readers or other assistive technology to navigate the site. And I know you're probably thinking like semantic markup but I'm not a developer. I know very little HTML. How can I actually do this? But when I'm talking about semantic markup today I'm actually referring to WYSIWYG semantics. For instance, if you're using HTML list or if you're talking about a list it needs to be an HTML list. If you're saying a list of events a lot of times those aren't actually in lists they're in separate divs. When you're saying list of events or a list of news those should be in lists. You wanna make sure using block quotes for all quotes because it should give the option for a citation. So screen reader user can navigate that correctly. Again, we wanna use a table for all tabular data. We never wanna bold paragraphs to make them look like headings. And we wanna make sure we're following the correct heading structure. So let's dive in and see kind of what's going on there. So as I mentioned before screen readers have the ability to navigate by elements on the page. And that's more than just links. We're going with semantic markup because we wanna jump from link to link from heading one to then a heading two then a heading three because of three comes after two because that's just how it is. And numbers and that's also how it is in headings. It's helping to navigate everything that's going on and separate it up into correct content. So another piece is like maybe you have a bunch of list items that they wanna go through and kind of gives the context that they're actually looking for. So here's an example of the WYSIWYG. So let's take a look and here's all you have to do in order to make your list. You probably use that one a lot. So I don't have to go into too much detail but if you're making a list make sure you're using those items to actually create that list. Same with a block quote. That's all you have to do is make sure you're highlighting that content and make sure you're attaching it to the block quote. We already talked about a table so that's good. And then here's one of the bigger items is the heading styles. So I see it all the time where people want to just use a heading three instead of a heading two because it's smaller and it looks better but heading levels are not meant to be the visual aspect. They are meant for structure only. If you're looking for heading threes on the page because you're already in the section of a heading two that you're like this is the section I wanna be in now I wanna dive in even further. We need to make sure the screen reader user is able to do that. So I actually like to create my content within Google Sheets or Google Docs here because it's actually great because if you have the outline open this is how a screen reader will navigate. You can see here heading two is kind of a sub piece of heading one heading three is a sub piece of heading two it's following that correct order that you're expecting. What becomes an issue is when you start throwing things off. So we wanted that heading four to actually be our heading two because we like the visual aspect of it and we kind of were playing around with the design but at that point you're heading two is now a heading four and you're not kind of following the direction you're looking for and now it's really confusing you can't jump to the title that you're looking for. And then we never wanna bold paragraphs like I mentioned because you can see on the left hand side you can't even jump around to those pieces. So if you can't do that in the outline you're not gonna be able to do that with a screen reader as well. Next we wanna make sure we're not overwriting the sites CSS and I just want you to remember that just because you can just because you know a little bit of CSS doesn't mean you should be doing it. If you're overriding the styles just on one page then you're probably trying to do this in other areas of your site. So wouldn't it just be easier if this was a style option in your WYSIWYG? And while you shouldn't be overriding them for a few different reasons but mostly don't make the designers and the developers mad for design probably already completed an accessibility review for all the styles. And by changing some of those styles on your end this could break design patterns and consistency or even possible branding. And then for developers, developers create patterns that work for all screens and all layouts. The biggest thing is maybe you're adding an important tag to something because you wanna override it and messing with these patterns and rules can override any important elements especially responsive ones. And being responsive is one of the first rules for being accessible. So you may be thinking like what if the H2 I need to use is just too big and I don't wanna use this so I wanna use an H3 or an H4? Well, contact your designer or developer to add another option into your styles. Or what if I want to emphasize a new section and create this new style so there's like background color and this and that contact your designer and developer to add another option into your styles. Or basically insert any excuse you may have here because I'm just gonna tell you to contact your designer or your developer to add another option into your styles. And finally, the last piece of the puzzle is we need to make sure we're checking our work. So designers have to check their work with various plugins and like Figma or Sketch and then developers need to check it using automated tools and manual testing and content editors have the same thing you should be checking your work. One way to do this is to leverage Drupal modules and plugins if you're using Drupal. There are two modules in particular I would absolutely recommend including on your site. Both have discussions of being added in Drupal 9 core in future updates but for now these are both available and can be added pretty easily with little setup on your site. First is the CK Editor Accessibility Checker. I did include a link for more information here and I believe we will be adding that in the chat so you can get some information regarding that. And this is also great because you can see here it's a Drupal project but you can see it also goes straight to a CKEditor.com and that's because it can be used anywhere the CKEditor is being used. So this is WordPress or any other CMS that might be using CKEditor at that time. What it does is it adds a button to your WYSIWYG so that it will automatically check everything similar to how a spell check might work. And it is actually very accurate it's pulling in the latest WCAG standard so that you know that it's going to be updated and move along pretty well. So let's take a look at this in action real quick. So here's an example of the CKEditor Accessibility Checker. You can see here we just have some normal content on the page. We have a table, some headings, some links, some lists and images. So what we're going to do is we're first going to take this little button on the page here we're going to click that. And then from there it actually goes through and gives us all the answers that we may need. So you can see here we have one of seven errors it gives us what the issue is how to resolve it and like actually being able to resolve it here. You can ignore or you can actually fix it. You can then go through and kind of click these arrows to kind of see what's going on here whether it's a warning what the suggestion is or maybe you go through here and it tells you you have to actually use a list and so on. So you can keep going through until you resolve all the issues and then that way you can publish without any worries. And like I said, I like this one because it is very accurate. However, the downfall is that it's behind a button so not everyone's actually going to click that. So another good option is actually adding editorially. I'm probably not even saying that correctly. I honestly don't know how to say it without kind of like second guessing myself every time but that's how I'm going to say it. It is a Drupal only project. So unfortunately it seems like if you have WordPress or something of that sort it may not be super helpful but it is nice because it automatically checks your content and it does more than just that one section of text there. It will get at various aspects on your site whether it's a heading or maybe it's just like a plain text area that then gets put in a different way and then that way developers may have to check it and fix it on that point. The only downfall that I'm finding is that it's not quite as accurate as the accessibility checker that we just showed you. It seems to be a little more customizable so that you can get into the JavaScript or whatever's making those rules and kind of update what you think might be best. It does have a great baseline though. So I definitely recommend using it. So let's take a look at this in action. Now let's take a look at editorially in real life here. So you can see here we're using Ames Community College there so bravefully let us take a look at it as we've been using this on their site. So you can see here if we look quickly you can see we're getting some highlights here. Little question mark there, question mark. Ooh, we got a red outline and little notification there. And as you can see in this bottom right hand corner we have this little thing that you can turn on and off. So this is actually the editorially. So I haven't even saved this. This is in preview mode. So you can see we still have back to content editing. So we're kind of looking at this before we even publish and you have to go through this step before it actually publishes. So what you can do is you can end up showing the tag. So you can see kind of like where we're out of the page and see we went from a one to a four to a three to a two. It kind of gives you that great idea that you can skip to some other content there. So let's get rid of that. Then you can see we can get some more information on what we're using this for, kind of skip to each one and minimize what we're working with. But let's see how this is working. So you can see I'm hovering over what's going on here and it's taught me that my heading jumped from a level one to a four. So really this should probably be a heading level two because this is probably a heading number one. If we scroll down here, we can see another one and possible heading because that seems to be just a paragraph that's folded. This is another one. I mean, this is the same content from before. So you should be able to see that this is the list item of what's going on and oh man, that should actually be a real list and not just look like one. Then we can see that there's an issue within the table header as well. So you can kind of see that this is nice check before you even publish and that's why it's nice because it's not really hidden behind any kind of button, it's done right away. And like I mentioned, they're both great options to work with. This one's nice because you don't have to worry about clicking on a button. And yes, the other one only works with like body texts and so on and so on. But if your developers are creating the site that you need and have it all set up in the templates, you should only have to worry about checking your body texts in general. So I think having even a combination of the two of these, you should be able to get every little bit of information you may need in order to create accessible content. So I definitely just recommend asking your developers to include either of these modules on your site and should set you up for success. But let's say you don't have Drupal or maybe you don't have the ability to add those plugins. There are plenty of tools out there for automated testing. I like to focus on the free ones, especially for those who may be new to accessibility because we want to make sure that you're getting the access that you need. So I always recommend wave.webame.org. And this is a great one because again, it's free. It's extremely accurate and well-respected. It's been around for quite some time and it seems pretty like laid back and very easy to work with and it may not be the most modern looking thing but it's extremely accurate and easy to use. And a lot of the content is done in a way that's human readable and not necessarily some of the criteria which can kind of get a little wonky there. The only issue with these automated tools is that you need to ignore other errors or warnings outside of the content alone. So if there's other things going on in your site you may get a little distracted by those but I think it is still a good thing to use if that's something you're looking for. So here's an example. We're just on the Apple website. You can see all it does is you would run it, you put it in either in the webpage or you can have an extension on your Chrome and I think Firefox has it as well. And it gives you a list of all the errors, your contrast errors, some alerts that you could take a look for and you can look at structure and even change contrast from there. And it gives you the ability to jump and look directly into the code itself or maybe you're just gonna have, click on something on the left and it will highlight on the right where it is or you wanna highlight, click on the right and then it will give you more information regarding that. So it is an easy one to use and I recommend anyone can actually use that very easily. The other option is Google Lighthouse. And again, I recommend this one because it's free. If you're using Chrome, you have the ability to use it. It's already there. And one thing that we're seeing more and more is that they're weighing these scores that you get on your site in Google searches. So if you're having 100% on your accessibility, then you're good to go. And it also does things regarding like performance and SEO and things of that sort as well. So it is pretty helpful. And again, you need to ignore the errors or warnings outside of the content unfortunately. I do think Wave is a little more accurate but Google Lighthouse is available and everyone should be able to take advantage of it. So you can see here again, we're on the Apple website and I ran the Lighthouse, which you might be able to see, it might be a little small, so I do apologize. But you can see it's highlighted in the top of the bar there next to components and security. And you can see we have an 89% for accessibility score. It goes into what exactly is an issue. You can find what's relevant to you and expand that to get more information. You can also see that automated testing is not everything. We need to obviously always manually check things as well even alternative text needs to be manually checked to make sure it's accurate. And then you'll see pass audits and not applicable but it is pretty helpful. And again, everyone has access to it so you can definitely use it. And obviously we wanna review content on desktop, tablet and mobile devices. This is especially important with layout builder and layout paragraphs. Now that you have full control over your content and your layouts, you wanna check that your layout is properly working on all screens. You're creating content on your desktop for desktop but many people will be looking at this from their phone. Review this on your desktop, then tablet and mobile. And you don't have to be on actual devices just making your browser smaller and bigger and kind of moving with that flow can be enough to exactly see like how this is moving, how that content works and what it looks like on various screens. And this is important for three main reasons because you need to make sure that your site is responsive. As I mentioned before, if your site is not responsive then it does not pass WCAG guidelines. Make sure everything looks as it should and doesn't look broken. So there's no like text going off the screen you're not doing any horizontal scrolling or anything like that. Your content should still flow in logical order because we go left to right, up and down. So we need to make sure that's happening on desktop. We need to make sure it also makes sense on mobile. When things start to stack, does it actually make sense? We following a logical order, do we now have like four images and then all the text for those images is below it and there's no way to associate it with it. So you just have to make sure that everything is kind of going in the order that you're expecting. And finally, just the last thing you really need to test is just zoom in on your website to 200% and make sure everything still works. The only time I really see issues with this regarding content is maybe a long link that's on the page because it's not a descriptive link and it's just the URL posted. That's gonna cause some issues because there's no natural breaking point. So by doing the 200% zoom, you'll find if there are some headings that might be too long or anything of that sort that needs to be fixed. And overall, just remember that with great power comes great responsibility. This is something that's always been super relevant but it definitely emphasized more with all the amazing work with layout builder and layout paragraphs. This is great for giving content editors true control over the content which you didn't really have before. So have fun with your layouts and your content but make sure to keep things clear and concise. Keep it easily readable. Follow great content editor rules and don't forget to check your work. And if you follow all of these, you should be creating accessible content in no time. So don't forget, this is being recorded and will be available on YouTube. And if you ever need it as a reference, it will be there for you and we'll post the slides later on for you as well. And just remember if you have any questions that we didn't get to today even after this question session or would like any follow-ups or even more customized trainings for your team, please feel free to reach out to work at atton.io for anything you may need.