Thank you for joining this website hosted by TechSoup presented by Cat Network. Today, our topic is, I'm going to say this real slow, inclusivity essentials, creating accessible websites for nonprofits. I'm going to show you how you can engage. Somebody has already turned on the closed caption, but if you need the closed caption, go ahead and type on that CC button at the bottom of your screen. You will get the email with the video replay and the slides by tomorrow and this is being recorded. So as I said, you're going to get the video replay. If you have a question, please type your questions in the Q&A. Feel free to type them in the chat. There's an awesome team here and they're very quick at grabbing those questions and seeing those questions. So as you're coming in, a lot of people were putting in where they're from and do they feel like their website is successful. I'm going to tell you about one new feature we have here at TechSoup, and that it's Quad. I'll be dropping a link about Quad here in just a moment. Basically, it's a community that you can have peer-to-peer interaction with, and so much more. Again, I'm going to drop the link, and when you get this slide, you'll be able to click on all these hyperlinks and be able to go to it directly. So I'm going to turn this over to Kyle. Kyle, thank you so much for your patience and have a great webinar. Great. Thanks, Aretha. Welcome everybody. Just a quick agenda. What we're going to cover today, we're going to go through just a quick background on who we are here at TapNetwork. What is web accessibility? What does this mean? Why it matters? We're going to share some common tools, a couple of solutions, and then we're going to hold some time at the end for Q&A. So as we know, we're going to have a lot of questions that come out of this. One thing we just want to make sure that we're clear on, the information we're presenting today is certainly not legal advice, but there will be probably some questions and things that come out of this about the legality of this, what might be required for you all as an organization or from a web standpoint. Just a quick background on your two hosts today, myself and joined by John Hill. My background is more in the marketing application development space. We started this company TapNetwork in 2012. We're a mission-driven marketing and technology agency serving primarily nonprofit and government organizations. Hyper-aware and hyper-focused on accessibility for those organizations and the constituents as well. As I said, I'm joined by John today. John runs all of our web projects here at TapNetwork. So he's got his hands on or in any project that comes across our plate. So also very burst and focused on the accessibility for ourselves and for our clients. Our organization works with, our company works with organizations of all different sizes. You see everything from small organizations to big green energy, clean energy organizations all the way up to companies like Denso, CSD and non-stop health. And we also work locally in the community here with a very community focused and mission-driven focus with organizations like May that we see calling in today on this call. Again, anything from local foundations to boys and girls clubs and kind of everything in between. How we can help? We'll go through this a couple of times today and you probably been on webinars with us before you've seen this. But if you go through TechSoup's website and you see the website services, the development, the marketing services, that's actually us. We're the company behind the scenes that they're delivering those services. And I hope their quality services on behalf of TechSoup. And what that means is we can do everything kind of from strategy, creative branding to custom application development, paid media, e-commerce, and really anything in between. So if you think marketing, you think technology, that's really right in our wheelhouse. And I'll turn it over to John to kick the bulk of the presentation off. All right. Thanks, Kyle. So we're going to start with the poll question. So in the chat, you guys can answer A, B, C, or D. The question is, how important do you think website accessibility is for your nonprofit organizations? A, very important. B, important. C, somewhat important. Or D, not important. All right. I see it firing off already. A, A, A. C, I see a C. Some A's, some B's. A lot of A's. I like it. All right. So it looks like we're kind of in the A, B, and C sort of area. Perfect. Hopefully by the end of this we'll get you all to an A. So we're going to start with the introduction to website accessibility. So let's get started with kind of the big question, why doesn't matter? The A number one thing is everyone, regardless of ability, deserves equal access to information and services provided by nonprofits. I think we can all agree to that. So as you can see on the slide, according to the CDC, one in four Americans has some sort of disability. And that's a huge portion of the population that we have to consider when designing a website. So think of it this way. By making your website accessible, you can reach a much wider audience. So ignoring accessibility can lead to exclusions and missed opportunities to connect with those who need the support the most. Ultimately, prioritizing accessibility is essential for nonprofits to fulfill their missions and make meaningful impacts. So as we move forward today, just keep that in mind, how can we be doing more to reach more people and make it easier for them to learn? So now let's move on to where this all comes from, understanding accessibility guidelines. Now that we understand why it matters, let's kind of delve into understanding the guidelines. So at the forefront, these guidelines are the Web Content Accessibility Guidelines, or WCAG, which were developed by the World Wide Web Consortium, known as W3C. It's a bit of a tongue twister. And these guidelines serve as the most widely accepted standards for web accessibility. They kind of give us a framework for creating inclusive experiences that cater to all users, regardless of their abilities. And it's not just about meeting legal requirements. It's about ensuring that your websites are accessible for everyone. And we'll let you guys explore the finer details at your own pace. They're both linked here in the slides that will be available to you guys afterwards. But overall, these guidelines outline best practices for addressing various accessibility challenges. And I know I keep saying that accessibility makes it better for users with disabilities. But in truth, following these guidelines makes it a better user experience for everyone overall. It only enhances your website and makes finding and navigating your website easier. So on the next slide, we're going to jump into the four principles. So let's break down these four principles. They are the four core principles represented by the acronym POR. We've got perceivable, operable, understandable, and robust. Some of these might be confusing right now, but by the end of it, it'll kind of all start to make sense. So just stick with me. First, we've got perceivable. So this is the emphasis that information and user interface components must be presentable to users in a way that they can perceive. So that's ensuring that content is accessible through various senses like site and hearing, operable. Here we have focus on making sure that user interface components and navigation are usable, understandable. So users should be able to comprehend the content and functionality of a website without confusion, and then robust. Lastly, this principle is about making sure that digital content can adapt and remain accessible across different platforms and devices. So now that we've kind of gone over what accessibility is and why it's important, the principles, let's kind of dive into some of the more common challenges you might see on your website. And I'm not going to go over all of these in detail, but first we've got lack of alt text. Images with alternative text can make it really hard for people who rely on screen readers to access content and know exactly what they're looking at on a page. So providing descriptive alt text ensures that users can understand the purpose and context of images, and we'll be going into this more later. Another one, which I think somebody had brought up in the chat, was color contrast. So inadequate color contrast or color contrast can make it difficult for people to see or read elements, especially people with visual impairments, unclear navigation, complex or confusing navigation structures can hinder users from finding that information easily. Non-responsive designs, another big one. If your website's not optimized for different screen sizes or devices, it could be challenging for individuals and defined stuff. Yes, these slides will be sent out afterwards. Other things include inaccessible forms, not having those labeled properly, multimedia accessibility videos without caption or audio, typography, small text, makes it difficult to read, inaccessible documents like PDFs, if somebody's using a screen reader and the documents aren't properly labeled, they don't understand what that is. So these are a lot of things that, if your site wasn't originally built with accessibility in mind, will take some time to fix. So now that we know what some of the common accessibility struggles are, we're going to dive deeper into some of the tools and tips for making this better. I'll hand that up to Kyle. Yeah, awesome. Thanks, John. So John said some practical accessibility tips and tools, some things that you guys can start doing today or make sure you're on the lookout for, as you're building or updating your existing or upcoming website. I will start here with another poll question. So which accessibility feature do you find most challenging to implement on your website? Is it A, which would be alt text or text alternatives for images? B, which would be keyboard accessibility, so the ability for people to navigate through with the keyboard. C, color contrast. And we already know that some of you have already said that. We're seeing that start to pop up in the chat. Or D, heading structure. So organizing content with, they're right, H1, H2, and so on tags. We're kind of usually, oh yeah, ease all of everything, which I see a few of you. So what we see is the most challenging is often either color contrast or keyboard accessibility, because it's probably not as readily thought of. So keyboard accessibility is the ability to navigate a website just with the keyboard so without the use of a mouse or other input tool. And that would be insuring that as you're navigating the website, if you use a tab key or use the arrow, you're able to get to the next section in a logical format or logical order. So you go from the top to the bottom and you navigate through reform and things of that nature. A lot of times when websites are built, they're not built with that in mind, specifically with that mind. Same thing with color contrast. A lot of times the branding and style of an organization don't aren't measured through the color contrast. So it's hard to, it's kind of hard to go back and fix that after it. So like if your colors are, they don't meet that minimum criteria, and that's on your website now, that's used throughout your marketing materials. And then you realize, oh wow, this doesn't meet the minimum criteria of like four and a half to one or whatever the contrast ratio needs to be. It might be hard to update or to fix that. So just some background on when you're thinking about how to fix these websites or how to fix your website or how to build your website. We like to think of this from the format that like accessibility should not be a feature of your website. So it shouldn't be, hey, the keyboard navigation is a feature of our website. Your website should be built so that it is accessible and accessibility is kind of by default, right? So you often hear that like, accessibility is not a feature, right? So it's not something that we, it's not like we have to add this on afterwards. It's, it should be designed in the beginning. So we like to design with empathy in mind so you don't have to go back and redesign or re-architect that. The future, when you're building this, you know, when you build a, you know, using the right alt text, when you build it with the right hierarchy of headings and things of that nature, you won't have to go back and fix it or plug the holes. It's also nice because it has SEO, performance, and user experience impacts as well. So these aren't just, we'll keep saying this, I'll keep saying the word accessibility probably too many times today, but you'll hear me say, when you talk about accessibility, it's not just to meet those, those like the users with that, you know, maybe a visual impairment or a screen reader or something of that nature. It's designed to be accessible, as John said, for everyone. And search engines, things like Google and Bing, they know that they can tell like when your website's coded correctly, they also give preference to the websites that are more accessible because they know that they are not only a good source of information, but they're also, they want to be a good source of information and a good resource for anyone regardless of, you know, disability. Same thing for the user experience, this is for optimizing user experience. Sure, if you follow all of the, you know, the requirements of accessibility, kind of to a T, you could make a site that's so very accessible and it's not visually appealing. It's not something someone wants to navigate. So it's important to sort of, to really blend those two, but, you know, with that kind of underpinning. And then also thinking beyond the website. So if you think about accessibility, if we just stick to the color example, you know, if you have like a dark color over a slightly darker color, which has, you know, not the right contrast ratio on your website, you probably have that in other places as well. It might exist in emails that you sent out. It might exist in print material. And if it's hard to, it's hard for someone to see that on a website, if that contrast is, it doesn't work with someone who has color blindness or someone who has a visual impairment on the web, it's probably the same way offline. So we also want to make sure that, you know, with your brand, with your organization as a whole, you're thinking about accessibility sort of across the board. So some tips for creating those accessible websites. The first is, this is probably all foreign, but using semantic HTML elements to create a clear and structured layout. So that's when someone's coding up the website, or if you're using a page builder, oftentimes they'll kind of have this built in, like Wix or Squarespace would typically have the right HTML structure. But if you are doing this, you know, on your own or doing this from scratch, just making sure that you're using the right structure to provide that right layout. And that's things like having headers, the right sections, and then the footers, like the main body section of the footers, and then any kind of combination of that as you're going. Using the color contrast to make sure text and images are easy to read. So with those people with impairments, so that the text stands out from the pages it should, so that the image stands out as well, as we talked about using keyboard accessibility, so that anything that's supposed to be a navigational element or a menu can be navigated through with the keyboard, with the arrow keys, the tab keys. We like to regularly review and update that, your website, so that it keeps that accessibility. So these standards change over time, technologies change over time, features change over time, and the content and things like that on your website will also often change as well. So making sure when you're adding new blog pages, or adding new pages, or things like that, that you're keeping accessibility in mind as you go. And then lastly is educating and training your team. So if there's other people that you're bringing in, if you've got interns, if you've got someone else internally that's updating your website, if you bring on new developers or a new outsourced resource or something like that, make sure that they understand the best practices in general, but also the ones that you commit to and follow as part of your organization. Some additional considerations on this. We mentioned this earlier, but you can see from CDC's map or CDC's data collection that they say that one in four adults in the U.S. has some type of disability. So if you just think about the people you could be excluding by not focusing on accessibility, you could see how you're alienating a good chunk, you could often alienate a good chunk of your audience. And oftentimes, nonprofits specifically are working with people with some type of disability or that might be in a different underserved community or something like that, which might not, accessibility is not just about what I keep saying, abilities or disability or something like that. It's not just about people that have a disability, it's also accessibility for people on slow internet connections, on different devices, on things of that nature. So some other things to keep in mind. So being sure that all of your links and all of your form inputs have descriptive text on them. So when someone's filling out a form, you want them to know what they're supposed to put in that field how you want them to format what they put in that field and whether or not that field is required. That's probably kind of common sense if you're just, if you can visibly, visually see that on a page where it just says required, but you'd be surprised at how often forms are built in a way that when someone's visiting it from a, from a, maybe a mobile device or from a screen reader or with a screen reader that it doesn't, it's not readily apparent that that field is an email field that might just be tagged as like input one. So you don't know what that might be or it might say, it might not tell if it's required. Probably something you may have heard or may not be familiar with but not opening links in new windows. A lot of times you'll see people, they want to keep you on their website. So when they, when you click on a link it takes you out to another page. That's not the best practice especially for accessibility. It can certainly be confusing when someone's like, why did I click a link? And on the screen or on the screen reader, I'm still on the same page, nothing else has changed because in that, from that experience, it's, it's that you would need to navigate outside of the application or in or outside of the tab or something like that. And there's ways around, you know, kind of doing the best practices for this. Having a skip to content link is also nice to have. So this is again goes usually with screen readers but this just gives the ability for like all that fluff that's at the top of the page that's more just abstract oftentimes giving people who are visiting that site from a screen reader or from a accessible device the ability to just go to the content that's important to them so that they don't have to read through all the navigation and things like that. Really important. So this is, this is not just from web accessibility. This is for how you structure your content in general making sure when you're doing that that you are using the right heading bags, the right bull, like bolting words that are important italicizing words that you want to put emphasis on and making sure that there's a, you know, the right structure there. So like when you think about that that would be like the H1 tag is first like the main heading below that would be H2, H3 and so on. You don't want to skip around from like H1 to H6 or something.  So using things like Grammarly or just basic spell check being sure that your audience who especially is just reading this content is, you know, the grammar is correct, the spelling is correct. Using descriptive links. So sites, buttons, things like that. They're just like, click here, learn more. Like that's great from like a visual standpoint to draw your eye to that, but you want to make sure that you're providing context around that link or you're giving it some like code behind the scenes to tell them the screen reader what to expect there. So a good link would be like, you know, at this URL or, you know, click this to take you to where we were trying to go to not just click here. And you also want to, also want to avoid directional language. So on pages, on a website, it might, you know, on a website on the desktop, it might say, see below. And that's what you're telling someone who's, you know, visiting that site from desktop to see below. But then once they, on their screen reader below might not be below. I might be somewhere else. Same thing like on the left of this page, on a mobile device left and right might become top and bottom. So be careful when you're using that actual language in a page. As well. On the topic of mobile accessibility. So on the mobile device specifically, be sure that your website is accessible on those smaller screens. That's things like making sure that when a screen resizes, it's responsive. Make sure the text resizes accordingly to the screen. Things like images would want, you want to resize as well. So optimizing your website and for like mobile accessibility is really going to help even further for accessibility as a whole. Think about how touch gestures and interactions for people who, like how you're requiring touch gestures from people on mobile device, how that affects people who might not have the ability to touch the screen or who might not be navigating in that format. And then a good practice is just to test your website on a bunch of different mobile devices and screens to make sure it works for all users or for the common user as well. And I'm just going to keep going here. I feel like I'm getting a lot out there. I do see some questions start to flow in. So please feel free to add it to the chat as they do come up. We talked a little bit about adding text alternatives to pictures, but there's text alternatives not just specific to a photo, anything with an image, an icon, videos, buttons, anything that would convey meaning or would be interactive should have some text alternative. So if it's going to be functional on your website, if it's going to be something that someone would be interacting with or someone with no accessibility concerns would be expected to see or use, it should have a text alternative behind it too. And that text should describe the image for like a screen reader or if it's a slow connection or a poor connection, it would also help describe that image over that connection. So sometimes I'm sure you've all been to a website and the picture won't lose, but the content will and it'll say like image1.jpg. So you have no idea what's supposed to be there, but if it has the best, the right practice is to describe what's in that image. So if it says a man playing with a, kicking a ball with a boy on the field or something like that, if that should add context to the rest of the page, if it's about something like that, like getting out there into nature or spending time with your kids outside or things like that, then you would have that image and then it would describe what that is and if it doesn't load, you would know it's supposed to be there. It should contain just enough information so it describes the image without it being too lengthy. So you would write the whole story about the guy kicking the ball with his kid outside or just tell you who's in there. It should be between a couple words, a few words and a short sentence or two, but not much longer than that, but it should be descriptive. It shouldn't just be like guy, ball, kid, field. When there's images or used as a link to another page, you also want to describe where that image link is going to take them. So like if it's a button for a button, for example, you'd say, you know, button to take you to tapnetwork.com, for example. The image alt text for images like charts, graphs, things like that should have a link to a text-only description of that image and it should have a description of what's in there as well. But if it's very complex, you should also offer an alternative to that. So if it's like during the comparison of a number of people kicking balls with their kids year over year and they have it from 2000 until now and all the data points on there, if it's just a graph and you don't have all that, you're not going to be able to shove all that in the alt text. So you're going to want to give them a link to the underlying data so they could read what that would be. And then if the image alt text is blank, then the image gets skipped over by screen readers. So these are like, if you are intentionally doing that, those are what things like decorative images, like background images, icon graphics, like little things, like little I for information or a lot of times like the Facebook logo or Twitter logo, I think the little logos, those can be decorative images but just have that in mind that that's the process that's going to happen. So if a screen reader reads a page and there's no alt text for that image, if that image is supposed to be part of that page or in context on that page, nothing's there and you're going to lose the context, you're going to lose that reader. So just some examples. So again, everybody will get these slides afterwards. So you can see the correct versus incorrect thing. So the top example shows alt text of people working and collaborating at computers on desks in our downtown Houston open floor plan office. It's very descriptive of what it is, probably for like a company or an agency or something like that to show who they are, who might be there. On the right, you see someone who just wrote people working. It could be anywhere, it could be any type of people working in any type of environment, so it's not descriptive enough. And then we gave examples here of like alt text on icons where you would just leave those things blank where it's like financial aid scholarships. Alt text on those things wouldn't exist because we do have text below them that describes it. So it's really just like the con. And I won't read each one of these things to you. The other one that we want to, we keep in mind was, and you all said you were having some challenges with, would be color contrast. So this is really important. We already talked about like the reasons why, but like poor color contrast makes it hard for people to read with people with low vision or color blindness. The goal is, like the standard really should be 4.5 to 1 is that contrast ratio. And you can see some examples of low contrast, high contrast, what works, what doesn't work. Some things might be like, wow, this looks like I could really easily read that. Like the lighter red with the white over it might be very easy to read for most of us versus the yellow and white. It's obviously harder to read for most people as well. But once it comes to that minimum ratio, it actually is hard or impossible to read that 3.9 to 1, especially with a larger text or with a smaller text. All right. There are standards that say like 3 to 1 for large text. So if it's those different sizes, then it's okay. That usually would be like for header images and things like or header text or larger title text. But we just like to follow the practice of 4.5 to 1 for everything. That way we know there's no kind of question about it. If people resize their screen, they're not going to, it's not going to break outside of that either. And we just recommend you check that contrast for text and interactive elements, like buttons, links, things like that as well. So even though it might not be text, it might be like a button or an icon or something like that over top of a color. We want to keep that same contrast ratio difference. This is where it gets really, really nerdy and confusing if you don't know what some of this stuff is. Another way to overcome a lot of this is using what's called ARIA. ARIA is accessible, rich internet or application markup. So it's information for people with screen readers and other accessible devices to better understand these elements on a page. So we've just given some examples. There's a ton you can do here, a link in here that shows you all these different ARIA states. But as we talked about before, when there's a link in this example, we say click here. So the screen reader would say, you would just see four more information about us, click here. But it doesn't really tell the screen reader what clicking here is going to get them. If you use the ARIA label, it says for more information about us, it's going to tell you to click here. And it's basically telling them that's going to take you to the ARIA labels about us. That means that the screen reader knows that that's going to take them to the about us page. The caveat to this is if you can use a native HTML elements or something like a label or you're just text, you would use that with the semantics and the behavior that are already required or built in. Use that instead of an ARIA tag, but ARIA tag is useful when you can't use that. So in my example earlier, if it said click, if the whole link was click here to go to our about us page, that would be sufficient because it explains where the person's going, the person that's clicked it, but the screen reader is going to know they're going there. But if you don't use all that in the link, then you can use the ARIA tags to overcome that. And I could take a break now and hand it back to John. All right. Thanks, Scott. Yeah. So we've got another poll question coming in. What motivates you the most to prioritize website accessibility in your nonprofit organization? A, social responsibility. B, legal compliance. C, user experience. D, impact and reach. E, all of the above. Being a lot of all of the above. That makes sense. I was seeing a lot of C's and A's, but mostly seeing a lot of all of the above, which I'd agree. All right. So now let's talk about getting your website accessible and maintaining that. So maybe as you've picked up by now, creating accessible websites is not just like a one-time task, but rather an ongoing commitment. As you add or change content on your site, you need to keep accessibility in mind and make changes with it. So things like monitoring and evaluating regularly, conducting regular audits to help identify areas of improvement, staying updated, keeping up to date with the latest accessibility standards and guidelines. As Kyle said earlier, technology and standards evolve, so do the rules, collecting user feedback, commitment to continuous improvement. Accessibility is an ongoing process that does require continuous learning and improvement. So embracing a culture of that is super important. And with that said, providing training and development, so offering opportunities for professional development in accessibility for your team is also really crucial. And a great way to take all this is to commit to accessibility improvements in an accessibility statement. So now that we've covered the strategies for improving accessibility, let's talk about the importance of an accessibility statement on your site. An accessibility statement serves as a declaration for your organization's commitment to accessibility. It demonstrates to your users that you prioritize inclusivity. An accessibility statement provides transparency about the current level of accessibility on your website. It informs users about the accessibility features available and any areas that may still need improvement. In addition to all the above, an accessibility statement can also ensure legal compliance and even potentially provide protection against litigation. It shows that your organization takes accessibility requirements seriously. It also is just a valuable resource for users, especially those with disabilities. It provides guidance on how users can navigate and interact with your website's accessibility features. Additionally, it's just good for SEO. More unique content is always good for SEO. And as we wrap up this portion of the talk, we just wanted to leave you with a list of some links that talk more about accessibility and some tools. I saw some people in the chat already request some of these things. So right here is a great resource for you guys in terms of different websites that you guys can look at for color contrast, checkers, web aim is a great resource for a lot of tutorials and stuff. The Ally project and web accessibility tutorials, again, step-by-step tutorials. And the accessibility statement generator, which then you can use on your website. Also, I'm actually going to go back one slide here. As John mentioned, so these links will be provided. These are just some examples of links that are available, tools that are available for you all after this. But there's a number of other ones out there that kind of meet these same criteria.  So these are just some tools or some tips that we would provide. And then once you've done that, I just want to give the opportunity for how we can help tap. So what do we do here? We've developed a ton of websites. We build with accessibility in mind. We can certainly, if you guys run one of those reports, we can help you kind of navigate through that. We're also launching an accessibility product or a few products and offerings through TechSoup that are not available in the catalog yet. So we've got a few things we're putting out there right now. Quick, easy way to get in touch with us. As I mentioned earlier, if you just go to TechSoup's homepage or any page on their site, go to services. Either the website services or the digital marketing drop down basically takes you to almost the same place with a form where you can reach out to us for a consultation. We do have a product in the catalog right now that's called a website wellness consultation. We're honoring that as our website accessibility consultation when you go and check out with that. Just make sure you mention to us that you actually want the accessibility consultation, not the website wellness. We'll kind of combine it all into one, but that way we make sure we focus our conversation and our feedback to you. So you'll have a link to this in the document to get that consult. From there, we also do full custom website development. So strategy, content and design, make sure the site structure is right. We make the right recommendations. Well, you can build that custom website for you. We'll do the development. So the best practices, following best practices, build on WordPress developed so it is accessible, user friendly, easy for you all to update on your own if we were to go away. Then we'll QA, test it and launch it and can be, can stay supportive of you on an ongoing basis. And with that, I just wanted to open this up. I know we've got a little bit of time left, so I saw a bunch of questions rolling in. So I'm going to open this up for questions now. As we mentioned originally, you can either, you can put that in the chat. So everyone can see it. I see a few here in the Q&A. Why not be able to be seen by everyone, but I'll start to address their results. So I'll read this out and either I'll answer them or I can move to John if it makes sense too. So someone asked what to use instead of C below, just not using directional text, just removing the directional text across the board is the best practice. So you would just lead right into it. So you could admit it altogether or you could put on this page, something like that. You just don't want to say below, above, to left, to right, something like that because you never know where it's going to appear either in line or in context when someone has a screen reader. A couple of people asked about the tool to find the color contrast ratio. I can share this. I'll share this in the, in the chat, but it's also in this document as well. Once we share it with you all. And again, there's a number that are out there. If you go to like W3.org or WCAG, they have one. I know accessible web has one. Accessibleweb.com has one. And then you can, you could put in your colors. You can put in like any, you know, combination that you're planning to do it, just to see where it is. And it's kind of cool, at least with accessible webs, you can move the little color slider around and it'll update in real time. So you can see if it's, you've met that, that contrast ratio or not. Linda's asked, we have an existing website that has been tweaked for accessibility over the last 10 years. They have a long way to go to check all the pages. They've had several pages, links, etc. Is it best to start over instead of retrofitting? I would probably say yes, but also it's sometimes it's six or one half dozen. The other, it really depends how the site's built. So, you know, if the site has a common header, common footer and a lot of the same templates, sometimes you can make a few updates or a number of updates, but it gets you there. But if the design is a little dated, if the contrast ratios are out, if there's different, if every page is built differently, it's probably going to be just as big of a lift to start over from scratch as it would, not scratch, but start over as it would be to go through, find all the issues, and then update those issues. If you run a report, for example, or you have a report run and it's, if it's manually done to review all of your, to review your site for accessibility, we typically would tell it would say, we'd estimate about an hour per task, so per remediation issue. That doesn't mean like an hour per image that needs to be updated or alt text or something like that, but it's like, you know, if the header needs to be updated or if the footer needs to be updated or this button or this overlay or whatever, we probably estimate about an hour per remediation item. And I think he, especially if it's kind of been pieced together over the years, you'd be surprised how quickly that number of hours adds up on top of the time to manually review that and go through it versus starting with a solid foundation from something that you know will be accessible from day one that's going to have all of this in mind. It's built with this in mind. I think you might end up with a better product, but I'm not, that's not to say that you couldn't kind of go back and retrofit it. When it comes to alt text for event flyers, how much detail should we include? This is often the challenge, especially on social media. Yeah, that's a great question. So the real right answer is to follow that same sort of format that we talked about with the graphs. So where you would have a text-only copy version of that that would outline everything that's in there, that wouldn't necessarily be in the alt text. You would provide that as part of the alt text or a link to the content only. So that that could be viewed by anyone with a screen reader or something like that. And that's also just a good best practice. Besides that, in that example, it's a good best practice to not put text on top of images when that image needs to be functional. So a lot of times people, you'll see with a header image that has the text that's supposed to be in the header right on top of that part of the image instead of putting the text over top of it so it can be read. That is where that starts to break down over time. How to determine what the color contrast ratio that we are using is. So you just use that color contrast checker. It would be the right way and just pick the colors from your page, your current page. Our website uses an overlay to help with accessibility. It does provide accessibility statement. What I'm wondering is, will this meet criteria for accessibility? Oftentimes what that will do, it doesn't really necessarily meet the criteria for your website being accessible. It just makes your website accessible. So probably confusing, but that means that your website is not passing accessibility. The way it's built now, they would still need to use that tool, that access to that overlay. So usually it has one of these, accessibility has one of these. They're great tools. They're a great way to make your website accessible. It does not. So there's a requirement for especially, usually government organizations, a lot of times membership organization, product organization, e-commerce, things like that. Did you have to make your website accessible? And the reason behind that is like, if you don't, so let's say, you provide membership for $100 to people. If it's not accessible for someone that doesn't have, Kent is using a screen reader or something like that, to buy the same thing that John, who might not need to use a screen reader to buy, you're discriminating against it, right? Same thing with government standpoint. If you're providing government assistance, government resources, things like that, as part of the government, or as part of a government organization, with your site not being accessible without the use of another tool, like an accessibility overlay or something like that, you are now technically discriminating against that other audience. So you're not providing that resource. So if that's the case, then I would recommend making sure that your site, I'd certainly recommend making sure that your site's accessible without the use of that overlay. But the use of the overlay will make your site be accessible if that's not one of the requirements of your organization. It's also not to say that these laws are changing. Again, this is not legal advice. These laws are changing all the time. From 2016 until now, we've seen it being as drastically to become more and more required. So it's not a stretch to think that at some point, any publicly available site on the internet would be required to be accessible, just like a lot of public spaces are also required to be accessible. Our staff loves to make content that contains text and Canvas. Put on our website is an image. Is there a way to improve the accessibility of these images with Canvas or ARIA label? I've been recreating with the individual assets for the time consuming. It would be with the alt text and then and or with the ARIA label. I think it's just putting that standard best practice in place so that they are following these guidelines and they are making sure that there's a text version of that. So that you don't have to go back and recreate it on your own, like if they could provide that to you when they turn it over to you, we put up on the site. Do you have accessibility development on Squarespace, limited to WordPress? No, we can assist with at least direction on pretty much any platform. It's just the level of work that we can actually do. So depending on how it's built on Squarespace or how it's built on these other platforms, we may or may not be able to actually implement the fixes, but that doesn't mean we couldn't recreate it. So maybe we won't be able to fix what's there now, but if we redevelop that page or whatever it is, there's certainly a way we could get you to a level of accessibility. And this is my favorite. In general, how much does it cost to create a new accessible website? That one is certainly, if I had the answer to this, I would be a billionaire. It's, it really depends on the amount of content, the level of design, how much we would have to do as we, as you'd seen like our custom on the slides. Usually our custom websites start at about $15,000 and that's regardless if you have the content or not already, if it's an existing organization or all one. And that's really, I think you'll find, if you look around, that's a very competitive rate for building a custom design that does take, that is accessible, that kind of checks all these boxes and has a bunch of these built on WordPress follows best practices and has like the features and functionality you would need. So like having resources, having a contact form, tying into like a CRM database, being mobile responsive. But we built sites that are, you know, we built sites for $5,000, we built sites for half a million dollars. Like they, it really runs the gamut. So it kind of depends, you know, what you need, typical brochure style site, you could probably get in for maybe even under $10,000 if it's just, you know, much less than it's just a few pages. And oftentimes like back to the earlier question, like should we fix or redo? It's the same answer there. Like if you have a three or four page website, it's probably pretty easy to fix it. You might not want to spend the time or money redoing it. If you have a 200 page website, it's probably going to take you a lot of time to go through all 200 pages. It's probably, it might be better for you to start over and decide like, do I need all 200 of these pages? Is this, you know, meeting our goals or are we doing what we need to do? And then let's redesign this so that we have a solid foundation and add pages back as we need to. Is there something free that reviews your website and gives you an accessibility score and or what you should change in the old days or something called Bobby? Yep, there's a number of these. We actually, I think there's actually one or two of these linked in this document. Accessibi.com or accessibleweb.com both have something like this, an automated score. I was, there's absolutely nothing wrong with going down that path with a great start. I will tell you that is an automated score. So like it just, if you pass all the automated score and that's great, it does not necessarily mean that it is 100% accessible because it, you know, you would, you do need someone to, you know, use a screen reader or use like assistive technology to really see if your website is accessible. There's also many times some false positives in some of those things where I'll tell you that this doesn't pass, this doesn't pass. Usually it's a doesn't pass thing, which isn't, isn't actually, you know, part of the page or functional part of the page. If we're creating a website, what platform is easy as best to use to create an accessible website like Wix, Squarespace, et cetera. It depends on the depth, like the depth of the website, you know, and the functionality you need. We certainly like, we stick pretty much almost primarily to WordPress because we have a lot of flexibility in making accessible. There are millions and millions of WordPress themes out there that are certainly not accessible. There are plenty that are though. We would use a page builder called Elementor which gives you a lot of flexibility in adding area labels and area labeled by and tags and things like that and also are built out of the box with accessibility in mind so it makes it better for you to, easier for you to set those things up and set those, you know, alt text and parameters like that. Still going through these. So I'm just stealing your thunder here, John. Sorry. What other kinds of accessibility issues should be considered in addition to visibility concerns? I mean, I wouldn't say it's all about, it's not just visibility. It's input divided by input as well. So like, you know, if you think of someone who doesn't have full use of, you know, both of their hands or something like that, accessibility is also would be based on like bandwidth or connections or connectivity is a huge element of accessibility. So especially in underserved communities where they might not have access to high speed internet. Thinking about, that's why, that's why things like alt text and context to the context and content are so important to engage with that. There's also, you know, there's certainly be the flip side of that. So if you require like here, like audiology or something like that on your website, make sure there's a text component to that. So if they are, have a hearing impairment, they're able to read what's supposed to be there. So things like closed captioning, that sort of stuff like that comes into play. Let me pick a few more here. Our website uses, yes, I'm seeing some of the people that do book any of these, so thank you for putting them in the Q&A. Someone asked, can you provide an example of the text over image to demonstrate which is more accessible? I think we could, we will add one to this slide or something like that to show that, but let me see if I have more in here. Probably don't, but an example, I mean, this is actually not a bad example. It's a text over an image. So this text over this image would meet that same criteria of one and a half to one. So really dark over really light, right? So there's a stark contrast between the two, but also thinking about like when you're putting that text over an image. So things like there's automated readers aren't always going to catch this. If you have a text that like might be like they're dark to light, but the sorry, if you have an image that might go dark to light, so maybe one side's got like the sunshine on it or something like that. You're going to want to make sure that the text goes like the dark, right? The opposite so that it over that background, it's going to fit, it's going to still keep that same kind of contrast ratio. Do you recommend using video description for videos? We do, but we recommend and it's an accessibility requirement to enable closed captioning, to have closed captioning available for videos or songs as well. So anything back to that example of audiology, so making sure that you enable that. There's any number of tools that can also do that for you. It doesn't mean you need to spend the time to sit there and type out every word that's in the video. You can run it through something like auto.ai or a number of other AI tools that will create transcripts for you of those videos, but it's important to have those available. Do you find the color contrast checker features in programs like Adobe to be accurate or actually used? We certainly use those when we design stuff like Figma, we certainly look at the contrast between foreground and background, but we also, you also want to look at that stuff from a brand level. So let's say that we have a brand package, you'll have the different colors that are available when to use them, when not to use them. So it's sort of a best practice to follow. Is there a site you can check sites in Chrome so far, etc. with responsive sizes? Browser stack is one way to do that. It's not going to be automated for you, but it gives you the opportunity. There's like browser plugins that you can use, also browser plugins you can use that we'll check them for you. See these website, these recommendations for website care, we're producing emails from mass audiences. Yes, as we said, like, you know, we do want to think beyond the website. So even in PowerPoint presentations, anywhere where you're going to have, you know, where someone could be engaging with it from an assistive technology device, it's important to think about accessibility, especially if you're like distributing, distributing these through a website. So if you are, somebody asked about a flyer earlier, so if you're distributing that flyer, you know, making sure it's built in a way, like a PDF in a way that isn't just flat image, so that they can actually pull, they can actually read the text that's in that image, if they have like assistive technology or emails, the same thing, like not embedding text or image in an email when you don't have to, and if you do, it should certainly have the alt text included with it. So we, I think, elaborate on that question. So closed caption does not have anything with video description, see closed caption for hearing impaired and video description for blind. Yeah, exactly. So I would stick with those, except the requirement is the closed captioning and then the description of what's in the video, just like it would be what's in the alt text, like what's expected in the video is important, but it's the audio to text that's the requirement. The sites check colorblindness, they do not check colorblindness because there's different, there's, I forget the number, there's some crazy number of different types of colorblindness, but it does check with, it does check where there's contrast ratios, which are like, I would say, are supported, support a lot of those different levels of colorblindness. Someone asked, there's a few more that pop up here, how do you find the best accessible WordPress themes? I'm not, I don't have, we don't typically use themes, we develop these, we develop our own in-house, so we develop our own designs in-house and then put them on WordPress, but I know Google, I think sites like Theme Chorus would have, or an Elementor would have, some of those themes that are built with accessibility at the forefront, and then someone asked, what is an accessibility overlay? That would be something like userway or accessibility, which would just, usually it's just like a, there will typically be an icon on the page, like a floating icon at some point on the page that has the accessibility icon when you click on that, it'll pull up ways to make the site more accessibility, so it'll do things like to convert all the text to black and white, or to read the rights, meet the right contrast ratio, it will resize, copy for you, it will reduce, remove all images, it'll remove like filler stuff, and you can set a lot of these things on the back end of that as well. There's usually free versions and paid versions of those, so the paid versions obviously do a little bit more than the free ones do. I really appreciate all the questions, there's some great questions that came through today. As Aretha said in the beginning of the call, you will all be receiving this deck, which will have these links in it, but if you have questions in the meantime, we kind of showed you there's a, you can get ahold of us just going through TextTube site, just grabbing that dropdown and reaching out, we'd be happy to help. Thank you all so much. Awesome, thanks everyone.


Welcome to Monet Cafe. I'm artist Susan Jenkins and I'm happy you're here with me today where I will share how sometimes I have disappointments and I often have to renew a pastel painting. I'm calling this painting renewal. I literally was frustrated last night. I had created a painting after watching a Karen Margulis video and her strokes are just always so perfect but I was not happy with it. I went to bed not happy. So what did I do this morning? I got me a bristle brush and I brushed it all off. So I want you to join me in this journey because I know everybody has disappointments in their artwork where I create one painting and recreate it for a renewed fresher painting I was happier with. Now I'm going to share with you the process of the first painting. I did turn on my video camera while I worked on this one last night in hopes that I would love it. And the neat thing about videotaping yourself. I highly recommend you do this. I mean not necessarily for sharing but just to go back and watch yourself paint. There's many times in my videos where I wish I had stopped sooner. It had a fresher I don't know more painterly feel before overworking it. That's one of my personal goals for 2020 is to step back more often and don't overwork and have more of a purpose. A lot of times I just paint. I love the painting process and I just get in and I start going and sometimes I need to step back and take a breath you know and hopefully not get to the point where I'm not happy with the painting. But it is nice to know the point of this video that we can a lot of times you think a pastel painting.  But there is hope. You can do the process that I'll be sharing in a minute. Like right now I liked I kind of was liking this phase where I was at and then I just over did it. Of course one thing that didn't help was I think I might have broken my foot yesterday. I'm not sure. I need an x-ray. I'm actually not sure if it's my big toe or part of my foot because it kind of goes up into my foot. Oh my goodness it's so swollen and it's really hurting. But what happened is I was running and I tripped and fell. Fortunately I did a roll so as not to harm this old lady too much. I think I'd learned that from gymnastics years ago so I just kind of went with it and rolled. But I had kicked my foot really hard on a tree trunk prior to falling. So maybe just being on my foot last night I was a little frustrated while I was painting. This is the point to where it's getting a bit too overworked and also it's starting to get too busy. Too much going on. Not a lot of rhyme or reason. And have you ever been there where you just you keep going, you keep going, you keep going. And so finally you'll see at the end of this this is the end result and it is really too contrasty and in too many places and I sort of lost color harmony with too much going on. So here's what I did this morning. I got this brush. I've done this before but this I think it's the kind of brushes you use for stenciling and they're very coarse and the bristles are really tight together. So it works great.  I mean it's just falling off. As you can see it kind of collecting on the bottom of the UART paper because this is one of those pieces that kind of had curled up a little bit. But now I sped it up there of course. But after and again try not to breathe this too much. Brush some of it. Walk away. I have a little piece of aluminum foil underneath that catches it. So you know if you do it and kind of you know just get out of the room for a little bit. People always worry about the safety of pastels. I have never had a problem but I think some people just are more allergic or more sensitive but you know that's going to be based on you. Now of course I have a great underpainting now because I just brushed it off. I mean it's kind of like an easy do-over you know. But I'm kind of doing the same thing. I've sped this up just a little bit and I just have a new pastel same kind of process as before. Alright but I'm going to share with you what I did differently. I'm just getting in my darker values with this new pastel. New pastel is spelled in you. Not any W pastel. They're harder pastels. They're good for sketching. They're good for little details. Good for grasses. To give some interest and invite the viewer into the painting. I'm just giving a little idea of a trail or a path and it gets kind of those dark roots down. That do kind of get covered up but they kind of stay there very subtly. Now I'm getting some other dark values in. I've got this big tree. The reference photo by the way is from pmp-art.com. It's a great site for copyright free photos if you don't have a lot of your own reference images. My life is so busy. I try so hard to I have a lot of my own reference images but sometimes I just need to just grab something and what I do is I get on to that site and other sites and I just take a few hours and find a whole lot that I like and save them in little files. So if I want to paint a field I just go to my field section and I start looking through them all and I've already taken the time to pick them out so I don't waste all my painting energy on looking at all these photos. Now I'm dulling out these trees in the background and decreasing the value. That one everything does need a little darkness first darker to lighter with pastels but you'll notice how I'm going to start paling out neutralizing and cooling off these trees in the distance. It's going to make them appear further away. You can see it already just did that right and then I sneak in a little bit behind some of these trees to where you kind of get the idea that there's distance beyond the trees that are the foreground trees. So enjoy this process here. I'm going to jump back in towards the end where I give some commentary on what I did differently. But right now watch the painting to one of my favorite songs in the whole world. I have to be careful by the way I have a lot of people ask about my music and give me recommendations or tell me when it was too annoying and I know sometimes some of the songs can get monotonous YouTube only allows when you have a like a professional channel like this or you have your channel monetized it's called they only allow non copy written songs on your channel and they have a little audio library that you can choose from and the songs are usually just less than three minutes and so you get if you have a long span of me playing music you get the same thing over and over and over and it starts to get on your nerves. But this is a song I pray I don't get in trouble from YouTube for it. I believe it's a does not have a copyright issue because when music is so much older you can use it like some Mozart and Bach and Beethoven and but this is a song called Adagio for Strings. It has the most beautiful emotional. Oh my goodness I just I feel at peace and sad when I listen to this song. I know that sounds kind of weird but it was the theme music played in the movie The Elephant Man. I don't know if anyone seen that from so long ago. Anthony Hopkins was in it. It was amazing. All right now here I'm not even playing the song after all. I'm showing the colors that I'm using in the Maggie Price Terry Ludwig set. I showed you those pastels to show I'm using all of those cooler greens. I love how that set has them arranged according to value and color. They have the color families and all dark to light. So I'm just using that whole strip I showed you across the cooler greens going dark to light. Now I'm just working dark to light. This is kind of a neat way to work. That's kind of why this set is again. I like it a lot because you could just use it that way. It's already there for you. You know to use that darker one and gradually work down to the lighter one. So that was the darkest green. Now I went to the next green. I'm getting some of those in the grasses and in the trees. I know that those darker greens are going to be more in the shadowy areas or where things are deeper in the grasses or in the trees that are closer to the foreground. Okay, so now I'm still using I think I'm darkening up some of the roots down kind of underneath that tree. Okay, now I will put on that beautiful song Adagio for Strings and just pay attention in this one to my strokes are more purposeful and I don't just get so crazy putting colors and values everywhere. I definitely took my time more and I actually really enjoyed this too. I was feeling good about it. So all right, enjoy this lovely song. Now towards this point, I was feeling more satisfied than I was the night before. I do feel that the second painting had a softness to it and again it felt more peaceful. I also meant to mention before that you may have noticed that if you see the reference photo in the bottom corner there that I still have the same similar values going on but I chose kind of a different color palette. I chose more cooler color palette and that once you learn value you have the artistic license to do that. All right, so it's time to sign this one before I overwork this one and I'm going to show you the comparison of both of the paintings. So here again is the first one loud and crazy. Here's the second one softer more subtle. So I was really happy with that and I shared this video right here on the Monet Cafe channel but if you'd like to become a patron of mine where you get extra content just click that little patron link at the end of this video and you can help support this channel support me as an artist and bless me. So, all right guys, happy painting.