 Good morning. I guess I have to stand here. Good morning. My name is rachel carden. I'm a web developer and designer from the university of alabama. And i'm excited to be here today to talk about accessibility. It's something that i'm very passionate about and i very Much believe in and support. And so i'm excited today to kind Of talk about some tools and techniques that you can do That are really easy to implement to evaluate your Website for accessibility. So what is accessibility? Basically at the very base principle of it is just a practice Of removing barriers. And with the goal of having Accessible content for everyone no matter their Disabilities. And so anything from images to Videos to colors, there's a wide spectrum of content and Functionality on your website where you could be excluding Someone from accessing because of a certain disability or need. I love, i don't know if you watched the grammy's this week but There was a great moment with steve wonder and he was calling Out a winner for, i don't remember what, but his, the Winner was written in braille and he made this great Moment and great teaching moment in the grammy's about how We need to make every single thing accessible to every Single person and that is kind of at the heart of accessibility And what we do, trying to make all content available to Everyone on the web. And i know we've all kind of Heard the mantra that information, you know, wants to be free But i truly believe that information needs to be Accessible. If we want it to be free To everyone, then it needs to be accessible. And so there are things that we can do as web developers And designers to make sure that our information and our Information is accessible. Because data does show that one In five of your users has some kind of disability. So you could be excluding 20% of potential users, clients, Or students if you're an educator. You could be Excluding your information or your lessons or whatever, Your products or services from 20% of people. And i was having a great conversation yesterday with Someone about accessibility and i pointed out that, you know, We will fight tooth and nail to make sure our websites look Good for like old versions of internet explorer. You know, that's like 5% of your users are using crappy Old internet explorer and we go out of our way to make it Work for them. But 20% of our users have Some kind of disability and therefore we should be fighting To make our content work for them as well. There are two general accessibility standards. I am in higher education, which means i receive federal Funding. Not all higher education does, but Mine does, the public university. Which means that we are Required by law to meet section 508 standards. There are also wcad 2.0, which is the current Standards from the web content from the, sorry, from wc3. And so they are not all that different. Section 508 is kind of similar to a certain level of 2.0. 2.0 has three levels, a, a and a. Usually we try to strive for a. Triple a is really nice and we should all want to be a. But it is a little more difficult, but it's not Impossible. And so i kind of wanted to go Over a few of the very kind of broad level accessibility Things that you can do. All non-text content needs to Have some kind of text equivalent. This largely involves Images and videos. So if you are blind and you Are navigating a website and there's an image or a video, But the image does not have a text equivalent, say a caption Or an alt attribute, then that person is missing out on That content that you thought important enough to place on Your website. Especially with videos. If there is no caption, then, i'm sorry, this goes more for Deaf people, sorry. If there is no caption, then if you Made a 20-minute tutorial on how to do something, or You know, then they are missing out on that information Because they can't hear it. Here are some quick examples. Also, like, you know, infographics are real, you Know, they were really big and they still kind of are. If you are blind and you put a bunch of, you know, helpful Information in an infographic and someone who is blind may not Be able to read out that text that you placed in that Graphic. So you can provide a text Equivalent so that they can read all that information. And so a great example of this that i like to share is I'm from alabama where tornadoes are a big or deal. And this is actually a graphic that's on, like, a National weather service site for us. And it's basically, you know, how to, you know, be Safe during your tornado. But there's no text equivalent For this. This is all text in a photo. So someone who is blind will not be able to read this Information and they are missing out on, like, life-saving Information that was not accessible to them. Another big one that people don't think about a lot is Color contrast. People that are color blind Can have a lot of issues on websites. You need to make sure that you provide sufficient Contrast with your colors. And so a big example that i like to share is links. Basically, we need to make sure that color that conveys Information or direction is not color only. And so basically a lot of people will like to have links on Their site just be a color. But what if you were color Blind and maybe you don't see blue? You wouldn't see that link. It wouldn't stand out to you. And so there needs to be more than just color. There needs to be, say, an underline. There needs to be something that makes a link stand out besides Just color. And this goes to any other Information. If you have some kind of alert or Something and it's, you know, it's only notified by the Color red or something that could be missed on someone who Say can't see the color red. And so if they were color Blind, they would at least see the line. So there's something to think about as we design and stuff Like that. Pages need to have proper Heading structure like h1s, h2s, paragraphs, all that stuff. Some people actually navigate websites with basically stripped Of css. So your website needs to be Understandable and readable if someone is not have css turned On. And this also goes to things like screen readers. People that are blind depend on screen readers that Literally read websites to them. If your page does not have Proper structure, it's confusing. Also, some people can't use a Mouse and have to navigate your website with a keyboard or Another input device. And so we have to, we need to make Sure that our navigation is navi, we can navigate with a tab Button, basically. That's the big one. So just making sure, me just sitting down on your website And hitting the tab button and see if users could tab Through all the links in the menus and navigate your Site simply using the tab. But a big foundation of Accessibility is that really it's just a lot of good markup. It's just good html. It's good practice. And so it's a win-win. Your website's good. It also improves your seo when you have good markup. So a lot of accessibility is good seo. And so just kind of working on that alone can make a huge Difference. There are a lot of accessibility Stuff. And so i wanted to share these Checklists that you can use that web aim made that are really Great. And they kind of walk you through Each standard, the 508 and the wcag. And shows you, it does a really good job of showing you Each individual thing that they check for. And talk about how to fix it and stuff like that. And i'll have these slides online later if you want to Just wait. I'll tweet it out or something. So now i wanted to kind of jump into the tools. The really great thing about accessibility is it can be a Little complicated, but we have a lot of great tools that can Help us, that can help you get a large part of the way. And i will say this that even that even though we have all These tools and we have all this software and stuff that Helps, it always still needs like a human touch and it Still needs usability testing and it still needs some of this stuff. So i do not recommend solely depending on some of these tools To do everything and basically always test and experiment. If you can do any kind of actual usability testing with People helping you out with disabilities, that's always a Big, that's always very helpful. So i'd recommend that. So first is a big one. The wave tool. Web aim is a big kind of advocate for accessibility that Do a lot of cool stuff and they made this tool and it tests For section 508 and single and double a. Basically it's in browser testing which is really great Because you pull up their website and you put in your url And it shows you. There's also a chrome extension. And they have an api if you, that's pay, it's not free. It's really cheap though. It's like pennies for each test. But it will basically give you results via i think json and so Then you can do something with that. But if you don't need all That, what they provide for free is still pretty good. So i was going to pull it up and show you real quick. Not the best thing to go on the screen. Anyone have a particular website they want to test? We'll test wordpress.org. It's not that bad. They make the screen big. And so they do a good job. Sorry, they do a good job over here showing you how many errors. There's two errors. Six alerts. Stuff that needs to be looked at. They actually implement six Features and they use some aria stuff. Aria is attributes you can add to your html that kind of Help with accessibility and kind of basically it's like Labeling like this is my navigation and this is a Search field and this is a, so it kind of helps screen readers And other devices kind of understand what your html is Supposed to be doing in order to help the user interact with Your website. So then they have, they possibly Have some contrast errors and you can come down here and List them out and click on them and find them. They have an empty button. They have an empty link. I think they have some, i remember correctly they had Same structuring error issues in the sense that they have Like a, basically it'll tell you if you have an h1 and you Skip to an h4. That's a problem. Where's the h2 and the h3? It needs to go in order. So it helps you kind of point that out. It helps you point out there's no all attributes and stuff Like that and really gives a lot of information and really Helps you out so you can go in and clean it up. And so over here is the chrome. It'll say you just had your website pulled up or you had a Website pulled up. You could just go over here and Click this button and it pops up. So really easy, really quick. You don't have to put anything on your website. You just have to pull it up in a browser. It makes it really easy to jump in and see how your Website is doing. I keep pressing the play button And it doesn't want to do it. I apologize. Here we go. Next is this kind of new script Popped up. I think it was last year. It's pretty cool. It's called totally. If you are a twitter person, a11y is the kind of shortened Nickname for accessibility. It's the hashtag we use to talk About accessibility. So hashtag a11y. So that's where totally comes from. And actually there's a couple other tools that use the a11y As well. And basically it stands, There are 11 letters between a and y and that's why it's A11y. Accessibility is a long word. But totally is pretty cool. It's just a javascript file that You put on your website. And what it does is it adds a Button to the bottom left corner. So really it's more for Development environments. It's not something you really put on Your public site unless you're just wanting to have some Accountability, i guess, from your users for accessibility. But it adds a little button and then you click the button And it like a little report pops up and it tells you Talks about all attributes, color contrast, heading Structure. It makes sure that your form Labels are accessible and it basically just tells you for Using any reo landmarks. And so it's really handy. There is also, if you don't want to actually put it on your Website, i don't know why i closed it. There is actually a google extension for that as well so I can show you really quick what it is. So basically i click this button. Here is the totally pops up. I click on it. There's a couple of heading Problems on their site. It checks for color contrast And even tells you what the ratios are. Basically the ratios depend on size. So it's not just a Matter of like you may have good contrast but your font is Really small and so you need to have better contrast when It's really small and it's more flexible if your text is Really large. So i will say this, some of the Color contrast stuff that they test, it's not always 100% But there are color contrast checkers that you can Literally go in and say this is the background color and This is the foreground color and it will tell you if it's a Pass or fail. And i have a link for that At the end that you can go and so double check. Don't always depend on these contrast checkers. If there's any link text. Something else that's really Important for accessibility about links is that links need to Have clear context. So like click here is Not really bad for accessibility and i'll explain why. Imagine if you're using a screen reader, you're Going to read a website aloud to you and you come up to a Click here and you have no idea what click here does. And then you click it and then you get there and realize that's Not what you wanted. You have to go back and you have to Read the last page all over again. So click here is not Helpful and links need to have clear direction as to where You're going when you click on the link. Visit our programs page or learn more about our programs That's much more helpful for everyone. And also it will check for like blank text. I'm sorry, blank links. If you have links that repeat. So you have the same link right next to each other. A lot of us will have the logo as a link and right next to it We have a name written out and that's a link. That repetiveness can be really confusing for accessibility Because they're having to, screen readers and stuff like That are having to read that aloud back to back to Back and so you can try to keep, you know, not having those Repetitive links. Checks for all attributes and Then tells you when they're using reo landmarks. Totally it's pretty cool. Another really fun tool to use is Code snipper. It is a client side script that Checks your source code. It checks for section 508 and Checks all three levels of wk2.0. They offer a variety of tools as well that i will show you. Oh, i'm sorry. This is a popular one. A lot of developers really like this one. And it's kind of new to me. I've only recently started using it. But it's pretty cool. And then i discovered that other Tools are actually using this as their back end. And so it's clearly a lot of people really like this tool. So this is their website. And even on here, it's all their Code is on github. So you can even, like, go on here and You can pay some, just some little snippets of code. Like if you don't want to test the whole entire web page, You can go in here and just pay some code here and pick Which level you want to test against. And it will give you the results. There is also a bookmarklet, which i put up here. So you just get this bookmarklet and drag it up here. And then say, well, we're going to keep picking on wordpress. It goes as we can. Go up here and click code Snapper. And this little thing pops up and Tells you your errors, your warnings and things like that. Which is pretty cool. And you can even view the more Extensive report. So it's really great about all These tools is you don't have to necessarily putting stuff on Your site. You can just, all you need is chrome. There's also some firefox stuff. It's just a little harder. It's, they live more in chrome. But there is some firefox stuff, If that's your main browser. So this is really great. The stuff at your fingertips is really quick to check. You don't have to be putting any files and stuff like that In your site. If you are the kind of person Who wants to kind of put some stuff in your, like, I guess your development workflow and things like that. There are tools for that as well. It just kind of depends on How deep you want to go. I'm so sorry. Mirroring is confusing me. Pali is another great tool. And they, i offer a really great variety of tool sets for You to use. And they also test against All the standards. They provide a dashboard that You can, basically you can download and self host. And then it basically gives you all this great reporting information. And they even have a demo that we can, they have a demo that We can pull up. So it's all open source And it's all free. And you can sit here and try out The dashboard demo. So basically what you do is You go in and you just put in, you put in different urls That you want to check. And then it has this nice Dashboard that shows you a kind of a glimpse into your Errors and such. And so twitter is feeling rough. But you can go in here and see a more detailed report of Everything. And then you can download different Files. You can show different dates. So you can kind of see how progress you made. Which is what this is up here. So basically sometime between February 18, basically this is probably when they set this up. So it's really nice in a sense that you can see progress. Maybe i didn't, you know, my site is not completely 100% Accessible but i improved 40% of it today and tomorrow i'll Keep working. So this is a really, really nice Tool. They also have, and get back to the, They also have a web service you can set up that basically Just prints out your information as a json. API essentially that you can use. And they also have it where you Can run it in the command line. Which is, you know, for all The little command line terminal nerds in here that like to do That. And i actually have it pulled. So basically you can only see it if you're me. Here we go. You can come in here and basically You type howie and wordpress.org. And then hopefully it works because earlier it was being weird. Here we go. And it shows you all the information. And by default it checks for wk2.0 AA. But you can actually go in here and change the standard. So i think that, i think you type howie. Let me double check. The great thing is that it's all, Hold on. Standard. Here we go. I'm going to copy and paste it. So you can change the standard to say section 508. And then, you know what? I'll pull up my university's website. So now it's changed to the standard that we have to follow. And it's looking and it's looking. It's trying. We have faith in you. And there we go. So we only have two errors. So we have some work to do. 166 warnings. We have some work to do. And there you go. Good grief. It's going and going and going. I think you can even from the command line print out a csv File and do all that stuff. So pal is really cool. And what's really great is that it is open source and free. You can take advantage of it. They use HTML code sniffer. So that's a great tool that I would definitely recommend Shaking out. I also really like, I love the dashboard thing. The fact that you want to self-host that. So like, at UA we could do that. You know, we could self-host our own dashboard. And we could put all the university websites on there And have this really great overview of how accessibility Is, you know, doing on our campus. So you know what? I may actually go do that. AX is another great tool. It's kind of similar to totally That it's a javascript file. It pretty much literally is just A javascript file that you can use to print out the errors So like you can go in and be like print the errors to the Console and stuff like that. So it is neat. It's made by dq. Which is they do a lot of Accessibility work. So lots of kudos to them for Making this available. Also AX, you can use it in your Developer tools in chrome. So you can come over here and We can basically go to our console. And here is an AX. And so you can analyze this page. Thankfully palli's website has no accessibility violations. That would have been very embarrassing for palli. So that's another way that you can run some quick tests on your Site. So if we, you know, picked on word Press again, we would see a lot of the very same, you know, Very similar problems, you know, buttons. And it kind of gives you some information. If you want more info, there's a link and you can learn About the particular problem and how to fix it, which is Really nice. So if you don't quite understand why It's a problem, it will help you learn, help you figure that out. Which is really nice. Thank you, x. And so also you can, from here, you can click the right Arrow. It tells you if it's a critical Problem, if it's just kind of a warning. And you can arrow through them. And then you have to click Down here. Also you click inspect, And it will jump to the code. So it's a pretty handy tool. I use it a fair amount. I definitely recommend that one. There are also a couple word press plugins, both made by the Same person. Every accessibility tries to help You fix some common issues in your theme. And access monitor actually uses another tool called tenon. Tenon is another tool you can use. It's a commercial tool, so it's not free, but it's still Beneficial. I include a link to an article I'd recommend reading about basically kind of comparing the Free to the paid and the benefits and what you need and stuff Like that. There are very much benefits to Some of the paid services. Generally the big difference Is usually the paid services, they offer pretty extensive Reporting. So it's like the ability to say The service is going to go out and check my site and Send me an email telling me when there are problems. And so maybe you're a one-man team doing a bunch of sites. At my university, i have a portfolio of 60 websites. And so i can't sit down and manually check every single Website for accessibility issues. I would never get anything done. But we do use a service called site improve that scans our Websites. And then i get a report like Every monday that tells me when there are issues that i can go and fix them. And so tenon is like that. There are other ones. We're about to implement a service called ssb bart. And so there are a variety of tools paid and free. So it kind of depends on what you need and your resources and Stuff like that. Wanted to mention some other browser Tools. There is just one accessibility developer tools. And it basically it does put an audit in your developer area. And i think it will pull up some reports. It can be pretty helpful. If you want to go check that one out. I'd also recommend installing Some kind of screen reader. Chrome box is the common one in Chrome. But there are others. Chrome box isn't perfect. But it might be better than nothing If you don't have any other options. But it's quite, it's Really quite interesting to try and see what it's like for People that depend on screen readers to navigate your website. It's really eye opening to see. Something else that's really Helpful fyi is those skip to content type links that you Sometimes see at the top of sites. You've ever wondered what That's for. That allows people that depend on Screen readers to skip over your header and jump straight to The information. Because can you imagine every time You visit a page having to be read the header every time You visit a page on someone's website that will get a little Old after probably the second third page. And so those links are really helpful. They can save someone Tons of time. Because also imagine if you went To a page that's not what you were after. You realize you get to the page and that's not what you need. You had to listen to the entire header just to figure out That that wasn't the information that you need. So those skip to content links that you can put in your Header, those are really, really helpful. And so a few other articles that i would recommend. These talk about the different tools and kind of lay them all Out for you and the pros and cons and things like that. It mentions much more tools than even i mentioned. I only have so much time. So i would recommend checking out These articles and reading more about the different tools Available. And i'll tweet all these Slides out if you don't get a chance to write that down. I'm bam a designer. Some other resources. A color contrast checker that i mentioned earlier can be really Helpful. Because like i said the tools, They're not, it's not 100% reliable with color Contrast because sometimes you do some funky things with Design and maybe the tool can't really pick up on that What's actually behind something. And so i always recommend Double checking the color contrast. And also if you wanted To learn more about aria, i would definitely check that out. It can be very helpful as well, like i said, to kind of help Accessibility tools understand more what you are wanting to do With that section of your website. And last but not least, i want To do a pitch. I work in higher education. And i have, we have a community and a conference going for People that use wordpress in higher education or just Education in general. And we just started. And you can learn more about us at wpcampus.org. And we actually have a conference planned this summer. July 15th and 16th in Sarasota, Florida. So i'll be back to Florida in July. So all you Florida residents If you want to come up to Sarasota, it'll be a lot of fun. I have buttons. If anyone wants a button to put on their lanyard, I also have stickers. So if you want one come and find me afterwards. Accessibility, like i mentioned earlier, is very important in higher Education. Not only because we are required by law, but because You know, we want our information to be accessible to everyone. We are trying to teach and we are trying to educate and we Are trying to share what we are knowledge and all that. And we want to make sure everyone can consume it. Anyone questions? Just wpcampus. I'm a designer on twitter. Okay. Oh, the hashtag for Accessibility is a11y. I've never seen any. I've never seen any browser tools for safari. That doesn't mean they don't exist. Please prove me wrong. But i don't know of any. I'm sorry. It's gotten loud in here. I can't hear you. Thank you. Tools for analyzing an image. I don't know of any that are specific to just images. I would be surprised if they didn't exist, though. You're very true. There could be instances where contrast, Even though there's no text in an image or something, where the contrast could be. If the information in the image is color specific, you're very right.