 Hi there, friends. As I said, you've stumbled into a NetSquared Tech for Good Meetup. So I'm Eli. I'm the NetSquared Global Community Manager, which means I get to be the champion and cheerleader for people like Janna, who are leading these communities. These NetSquared Meetups are all a program of TechSoup, which will tell you a little bit more about in a moment. But the shorthand version of it is a nonprofit like yourself that helps other nonprofits get, implement, and use technology. And when I said there was a global network of these TechSoup Good Meetups, it's true. Here's a map, which is a little bit stale, but, you know, we actually have about 100 plus chapters across 41 countries. Each meeting on a monthly-ish kind of schedule, the not all as hardcore, of course, as the North Texas Group, coming together to host events for people in the nonprofit to help them build their technology skills, which means let us know in the chat where you're coming from, because, you know, maybe you're in Atlanta, maybe you're in London, England. There are groups all over there, and we'd love to connect you to your closest user group. Like every community, we've got some rules. Number one, we welcome everyone. Number two, we put community first because we're here to support each other. Number three, we are here to build stronger nonprofits, so the technology is sort of the lens we use as we build these events. But ultimately, we're not a tech meetup, we're much more about a nonprofit meetup looking into how tech can support your mission. Number four, we invite your participation. We think that everyone has something to learn and contribute, and we would love to put you to work. I'll tell you a bit more about that in a moment. And finally, we treat each other with kindness and respect. So the chat window is open today. Love for you to throw your contributions in there. But before you get typing, just take a moment and say, am I bringing my kindest and most empathetic self to this interaction? The answer is yes, type away. So we totally need your help. This group is run by a team of volunteers and coming up with an event idea every month is hard. Maybe you can want to get involved. Maybe you've got a fabulous event idea or presenter or case study you want to bring to the group. Reach out in the chat and we'll follow up. Or maybe you want to take notes so we can share some of what we've learned from these events after the fact. Or maybe you are a wizard at marketing events, in which case, let's get more people in the room. We'd love your support on that. So here's a quick summary of TechSoup. There's software, there's hardware, there's services all focused around making sure that you succeed with technology as a nonprofit. And what TechSoup has done is partner with about 120 of the largest technology companies. We're talking the DocuSigns, the Googles, the Zooms, the Microsofts of the world. And so what happens is you create your free TechSoup account, and we use that to verify that you're a nonprofit. Think of it as writing a very short grant application. But of course, once you've written that one application, you can actually use that exact same verification for any of these technology partners. So think of it as the dream of writing the one grant application and actually does work for every foundation. It's just that's the idea of TechSoup to really expedite your access to these discounted and donated products. And this is what it can look like practically. So say you're a nonprofit with 10 staffers. This is the kind of savings that could happen, looking at this regular kind of bundle and as you can see, it's kind of ridiculous. It's definitely worth your time. There are many events being plotted and schemed. Right now the next one is planned for March 31st around email marketing best practices. But there's going to be a lot more coming soon. So stay tuned. And with that, I'm going to get out of the way and pass you over to your host Jenna. Thank you so much. And we are very glad to have Brian, who is on the square team as well present today's session. And so Brian going to pass it over to you to talk about accessibility. Alright, turn the screen share on here. Alright, everyone see my slide deck. Okay, well today we're going to talk about accessibility. And what that exactly means why it's important. And what are some, what are some things I can do to make myself compliant. And how do I even know if I'm compliant already. But before we get into that. Let me tell you a little bit about myself. My name is Brian Daniels. I'm a project manager here at Square. I've been a web space since I don't know 2007 2008. So I've mostly played project manager but we focus on open source technology. And I've been taking over some accessibility UI UX analytics and stuff like that. So what is an accessible website. So accessibility basically means that your website is accessible by anyone with a disability. So in many cases, I think that comes down to the visually impaired and the hearing impaired. So I like to think about my audience and ask myself a few questions when I'm putting content together or even just looking at a web page, things like, can the person viewing this use a mouse. Maybe they can't see. Maybe they have some disabilities related to their lens or something like that. Can they use a keyboard. Some people only use mice. Can they watch any videos. Again, maybe they're have a vision impairment. And they can't even see these videos or they have a hearing impairment and they can see them, but they can't hear anything that they're saying. And do they have any control over the media by that I mean, you know, can they pause things can they minimize things you want to avoid things like sound automatically popping up when you've gone. You'll see a lot of these sites that have a little video pop up in the corner, which could disorient someone that, you know, has a vision disorder maybe they can't even see a video pop up and they're like, where is all this noise coming from how do I make it stop. And then screen readers this is a big one so a lot of blind people use a screen reader, which basically is a tool that can go down your web page and read the content. But one of the things to keep in mind there is is the screen reader going to read the content like I expect them to read it. And so, what I mean by that is very often some tags or some other information will be left out of your HTML and the screen reader may get confused like, is this a link. I don't know the tags are marked up correctly is this an image of a person. I don't know. So, keep that in mind. And then, along the same lines does your web page rely too much on color or imagery. So here's an example of that. You know, one vision impairment is color blindness. And there's all sorts of different kind of color blindness. I'll send you all a link. So you can see them all but there's way more than I originally thought. And so you don't want to rely on color such as, you know, click the green button to continue, or have your page full of images with text on them. And screen readers can't read text on images unless you have the right tags on them. So ADA compliance is the American Disability Act. And it's important to say that it affects anyone in the US. Sorry, I don't know about Toronto. But nobody is exempt from being ADA compliant. It doesn't matter how many employees you have how many people visit your website or where your target audience is. If you are based in the US, you have the potential to have a lawsuit filed against you. So ADA, yes, maybe, but you should be aware that something could happen. As a matter of fact, I've heard recently that there's been a little bit of a boom and what they call website chasing what you're not trying to scare you or anything. But there's actually people that go out there and search for issues like accessibility, GDPR, and then file lawsuits to get some extra money in their pockets. So anyone that has an e-commerce website, a financial website, government website, healthcare, we need to be particularly concerned about ADA compliance. WCAG guidelines are technical guidelines that can help you fall in line with ADA compliance. So I want to be clear. There is a separation there. So just because you're meeting these WCAG guidelines does not mean that you're meeting the law of ADA. These guidelines kind of help you get there. But it's a good understanding of what the ADA compliance is and which one of these guidelines you need to conform to. There's different levels of conformance. So for example, they have, they rate them like a level A, level AA, level AA. So there's different types of levels that you can meet based on whatever criteria you're trying to meet. And for ADA, the target right now is AA conformance. And we'll take a look at that a little bit more. So again, legally, you are supposed to be compliant. And the only way that somebody would probably find out is if you get reported. So level A is very basic. So I like to say it focuses on navigation and readability. So just to give you some examples, navigation. People use keyboards, they use the tab to get from links to links on a webpage. Are those tabs going in order of the webpage? There's some content that appears on every page, right, like our main menu or navigation. If you're using a screen reader or something like that, do we want them to read the navigation every page that they come to? No, probably not. So they need the ability to skip the navigation if they choose to. And readability gets into font sizes. And like we touched on earlier, are there alternative text for images? Are there captions for videos? Things like that. When you get down to the level AA, it extends to color and text. And the primary things are related to contrast. And I'll show you all some tools there. So this is basically text and background colors laying on top of each other. They need to have enough contrast so somebody with a form of color blindness can actually see the content. And then level AA, honestly, very few people meet this requirement. And it is very hard if not almost impossible to make your entire website level AA compliant. So basically, businesses will focus on a page to make it that compliant. And these are going to be more public institutions, like we touched on healthcare, financial services, government service, they may be required to have an extra level of conformance. So I'll show you some tools that will help you basically scan your web page and figure out what are the issues that I have already. So we're going to take a look at a couple of these. Okay, I've just got a random website pulled up here. One that I know is not that great just for demo purposes. This is a Chrome extension called acts. And I'm sorry, let me clarify, I'm using the Chrome extension there actually are extensions available for Firefox and edge, and we'll give you those links in our follow up here. So acts works with the developer tools. So in Chrome, I'm going to just inspect to open up my developer tools. And then I've got a delay from zoom. Okay. So once you have your developer tools open and the extensions installed there's this new tab here acts dev tools. So we'll click on that. And then here you get a couple of options like do I just want to click on a little block to see if, if it's compliant or do you want to scan the whole page. Here, of course, depending on the length of the page, the type of content. It could take a while. Take this long I think the network song down. Murphy's law. So, oh shoot. So here we have a little breakdown of the number of issues. And over here on the right we can actually see what some of these specific issues are as it relates to this page. So you also have a little toolbar over here on the left. So there's a little breakdown of the requirements that you need to meet. So let's just take a look at images must have alternate text. So here we see that there is an image here served up by Amazon that does not have any alternative text. So I'm not sure which image this is let's say it's the, the lady that was on top of the mountain yoga pose. Well screen readers not going to know what that picture is right so it's best to have some alternative text that describes the image so you may want to say woman on mountain doing yoga or that just so people that are visually impaired know what the images are. And you can just keep going down the list, finding specific issues now this tool only works on a page by page basis. So it does not scan your entire website. You would have to go page by page. So without being said, I would say focus on your most visited pages first, you know your homepage, obviously, and then if any of you have gotten into Google analytics after my last presentation, then you can view the most visited pages there and start working down the list. Okay, the next tool I want to show you is called wave, w a v e. And I'll give you links to these as well. But they have a browser extensions that you can install. And it's very similar to the ax one and subject gives you different information here. So when we use wave, we get the toolbar that pops up. And then you also see all these little icons over here on the right. So these can give you a visual visual indication of the areas that you need to fix. So if you were to click on one of these. Okay, the issue is very low contrast I get that we have a light gray on a white background. So maybe we want to address that. There's something here on these social icons. Okay, so an empty link, an empty link is kind of similar to an image alt text. So in your, your code where you create the link, you have the option to put a description about what the link is. And to be compliant, you should have a little bit of a description for every link that you have so that way when a screen reader comes to it. They know there is a link, and have some indication about what they're going to see when they click on it. So great example here would be, you know, visit the blah blah blah Facebook page. You also see that they're color coded. So these are related to the details over here on the left, and say, focusing on errors should be the number one, the number one item to look at. But if you want to get down to, let's say like this triple a compliance, you want to look at each one of these things. So it's just the summary, they have a details version here. There's a little overwhelming. But if we were to click on any of these it'll actually scroll to the area that it's referencing. And then it groups them together by the types of issues that it funds, and then structure so again back to screen readers, they expect. to have a hierarchy of information. So, at a rudimentary level, this is related to headings. So making sure that your heading tags are in order you want to have your h1 at the top because that's the most important thing on the page. So h2 is next you know that's, that's like the need of the section that you're reading or whatever. And then, you know, go on down the line, just so the h1 h2 h3s have some sort of hierarchy or meaning to them, rather than I just use this one because I like the font size. Along with that. Let me try to find an example here. Along with that goes with other elements. So, for example, bullet pointless. If you were to just write out some bullets maybe you type them out with a little asterisk instead of actually using a real bullet where a screen reader is going to read all that is like one sentence with an asterisk in it. So make sure that you're using the proper HTML markup for these cases. So when a screen reader gets to a bullet point with it knows it's a bullet point list, and can kind of, you know, pause and leave a little bit of separation as it's reading it so the user doesn't get disoriented. Okay. One of the other tools is called spectrum. This is another browser extension. I'm going to turn that on here and this one is specific to color blindness. So here we have a drop down that popped up all these different times of types of color blindness. And this, this is the link that I'm going to send you that describes each one of these if you're, if you're curious. So when you turn one of these on it's going to actually show you the colors that this person is going to see that has this color. So if any of you can tell it got a little bit lighter. As I click through these, the colors are changing slightly. So some people can see, you know, green tones better than red tones and vice versa. So you can get a sense maybe just run your page through this and make sure that you don't have, you know, like a completely black image or completely white image that has no details. So if you're unsure what colors to pick to have the right amount of contrast. There's another website that gives you a tool to pick some colors and then tell you how compliant it is. And this will be in our follow up as well this link here. I'm going to tell you one second. Okay, well, I will have to follow up with the link to that. I'm sorry about that. Essentially what this tool allows you to do is pick two colors, let's say you pick a black background color that's blue, and then you have some text that's maybe a light blue or green. No, this isn't contrast enough it does not meet any of the requirements. And then let's say that you pick a black background and white text, then it will pop up and say, Okay, this one is level a compliance this is level a compliance. And then you can keep playing with those colors until you get to the right level of contrast to meet your requirements. All right, let's jump back over to our slide here. So where do we go from here first off, talk to your developers. They may already know that you have some of these things in place, or they may not even know that they're required to do this at all. So, share the list of requirements with them, ask them if we're doing any of things, you know, talk to them how can we implement these things. You know, have a candid conversation with them. Use the tools that I have just shown you. So if you're unsure about a page or maybe it's a highly traffic page or one that's really important to your business or organization, use the tools to make sure it's compliant. There are very, there are a lot of audit services out there that says that they'll scan your site and find any accessibility issues. Now, be aware of that because a lot of times they just run some sort of software or tool across the website and it doesn't always catch everything. A good audit service is usually done manually. So if you decide to look for one of those, ask them about how they conduct the audits, and what type of information they're looking for. And a good auditor, one that's, you know, is thorough, does some of these things manually, it's going to be up into the four figures. So just be prepared for that. There's also a bunch of modules and plugins that are available for open source like Drupal and WordPress. And a lot of these give us some great tools out of the box. You know, for example, adding these extra tags and stuff like that to links or images can get you there faster with some modules but just don't rely on them for everything. They give you the framework to do some of these things, but don't just install it and think that you're compliant. Okay, you should still run your page through the tools, make sure that those modules are doing what you expect them to do. So if you need help, you can always reach out to us, we're going to have this meetup posted in our blog section and we're going to put all the links in here that we've talked about the links to our tools. And then if you have any further questions you can fill out our contact form or reach out to us on social media. So without further ado, do we have any questions? Looking over here at the chat if you have one you can just pop it into the chat here. I would be curious to know for folks that are attending what review or questions you've had it with your own websites for the different organizations you're with. Okay, in the process of this topic. I see this topic Brian is something with all those resources and everybody sites being different. Those that's kind of the, the take home exercise of the amount that you cover, but how it's so different depending on the site that you're looking at and also kind of the support that exists how much can you control yourself, the technical skill level. One of those sets of, it depends, it depends as being the answer. Yeah, and, you know, it was difficult to touch on everything there are a lot of a lot of items to conform to, I would say to meet the double a level of conformance there's about 35 to 40 items that you have to another reason why don't don't just rely on a tool or a service. Make sure you're meeting all of them. So I just noticed in the chat that Pete commented that he's been on talks like this before and the problem is it's massively overwhelming. And if you could just say what are like two or three first steps, because it is massively overwhelming and it actually surprises me that there's actually solutions for any kind of disability, which is awesome. I, you know, many people probably would not just think that oh yeah there might be people that are blind that need to look at my website there's solutions for that people that are deaf that can't see videos their solutions for that. So, while it's overwhelming it's also very gratifying to know that there are tools. But back to the overwhelming side, what would you say is the maybe top two things people can do. Yeah, so some of these things you could consider, you know, set it and forget it. So, for example, on the color contrast, you're not going to have to do that all the time you just make sure that your theme already supports those things. Adding like alt text to images alternative text to images. There are services like I think Adobe has one that will automatically generate that text for you, it is a paid service but essentially it scans your image and knows this girl is on a mountain doing some weird standing I don't know if they'll know it's a yoga pose or not, but it'll automatically put that in there so if you have multiple content contributors you don't have to worry about them typing something meaningful. Same thing with the heading hierarchy. You know, visually you want to make sure that there's some differences between the different heading styles, and then, you know, after that framework setup it is going to rely on your content editors to make sure that they're using those things in order. So alternative text big one, setting up your, your HTML to have hierarchy is another good one. And then I'd say contrast is probably the second one, you know, look for really glaring issues like gray on white, you know, stuff like that is a no no. So and then clicking through your page with a keyboard is nice but again if you have the correct hierarchy in place, then that's probably going to naturally fall into place. That's a good question. And I do want to throw out there that couple things first off there will be some themes for these open source CMSs that say they're, you know, 100% compliant. So like a WordPress theme or a Drupal theme. That is all not always the case as well they may be compliant in some areas but not in all areas for you to meet ADA or whatever your, your local regulations are. So other services like like a software service that say a Wix page or a square space page. A lot of that stuff is already going to be there for you. So they keep all that in mind as you're creating the content if any of you have ever used either one of those tools, creating the contents fairly easy, and the system just takes care of telling you image text is required, having the right hierarchy and stuff like that. Look there's no additional questions unless there's other things you want to show can either there's other resources you want to get into greater depths, or you can just send the links as a follow up since a lot of these can be evaluated against everybody's individual websites that they have. So what do you think, Brian. Yeah, and we didn't get deep into this but I do have some modules for Drupal and a couple WordPress plugins that can help you as well identify and then give you some tools to have this stuff kind of happen automatically like the image all text. What platforms are focused on website wise. You can put it in chat or just take yourself off mute. It sounds like those modules could be you could just link to those in the follow up resources. Yeah, depending on the sites people are on. I was going to say we have a very shy group today. Yeah. Oh, here we go. We have a word press response. Yeah, do you want to cover any other WordPress ones. Then we'll link to them in the follow up. So I do not have the names of them right now, but there is a really good one that Pete I guess this kind of answers your question. There is a plugin that will scan your pages and say these are the items that you need to pay attention to. So some of these plugins will kind of have for lack of better words built in scanners. They have that for WordPress and I know they have one similar for Drupal. So we'll put those things in the follow up. Does anybody not have an open source website. Like, not Drupal not WordPress. Something completely custom or Wix. I have a Squarespace website for my consulting firm. You should run it through one of those tools. Definitely run it through one of those tools. Yeah. Good. It sounds like we got a lot of open source people here. Another question. I say we give folks some time back and we'll have a bunch of resources to follow up in the recording of this training. The next training that we have is on nonprofit email marketing, which is happening on March 31. Another Wednesday. So last day of the month. I have a reminder about that to get folks registered and working on finalizing the training schedule for this next quarter. So the next next three months. April, May and June. Yeah, Pete, that's that's a great idea. For those of you that maybe are paying attention to the chat on Pete's Pete basically said that somebody should have a base theme or module. Maybe we should have some of the best alternatives developers, at least a partially accessible accessible website out of the box. Now, with that being said, we may have to have different versions for different countries or something like that. But I think that's a great idea would be a game changer. If you'll do that one. Maybe we need to find a client that works in a disability space to help them write that grant. Okay. Well, thank you everyone who joined us today for the training will hopefully have you on the 31st as well. And in the meantime, we'll send a follow up by the end of this week with a link to the slides, the recording of this and the additional references that Brian referenced throughout. So thanks everyone. Enjoy the rest of your week. Thanks. Thanks guys on a couple weeks. Bye.