 Welcome to the first session of War Camp Raleigh and welcome to the best session of War Camp Raleigh. Now he's just overselling it. Can't handle that. He's in a room down the hall. I'm Ray Mitchell, but you're not here to see me. You're actually here to see Crystal Tenon and Brian DeConnick. They've got this great presentation, again, hard sell, raising expectations. They hear it's great, they know it's great. It's very important. Talking about civilian websites, a lot of legislation is focused on making websites as accessible as possible for all users. And with an organization as big as NC State, there are a lot of users and a lot of content generators. Like five or six. Just five or six. A thousand. So getting everybody on the same page around how they should work with the sites is important. And these guys will talk about their experience. Welcome. Alright, so I guess that's us. Yeah, so I'm Brian. That's Crystal. I'm Crystal. We work for NC State's Office of Information Technology. If you're not used to a big college campus, we're the central IT group that sometimes pretends to have power over what everybody else does. Sometimes they all just do their own thing. So I am a web developer. I do WordPress stuff. I build stuff for NC State. And I'm the IT Accessibility Coordinator here on campus. And so I hope people make things accessible. And then the bigger part of my job is I try and encourage them and get them excited to make things accessible. So I guess we can go ahead and get started. You want to stand up? Yeah. They're taller than Alex sitting. Alright. How about it? Okay. So a quick refresher on your accessibility fundamentals. So we'll go over just a few basics on that. Can you get me to the next slide? Yes. Sorry. So Brian added this slide. He's like, I think we need to just go over what accessibility is. So this definition is just my definition that I use when I talk to people. So in its simplest form, visual accessibility means that individuals with disabilities can access, use, and interact with websites, web applications, and digital documents. Many times, but not always, with the assistance of assistive technology, like a screen reader, switch, or dictation software. So basically, individuals with disabilities can use your stuff. And so sometimes they will not need assistive technology to do that. You know, maybe it's just keyboard access. Maybe it's a cognitive disability. And so you're looking at your readability level. You're looking at your structure, your organization, but that they can still have the same interaction and experience as everyone else. So I try and add that in there about different types of disabilities because we often think about just blind users or deaf users, so like captions or screen readers. But really, most individuals with disabilities are going to have a learning disability or ADHD, or at least here on our college campus they are. And then also with our individuals that are typically aging, they're going to have some sort of low vision. So we'll move on from that. I hope we got a good understanding from there. So the legal landscape, and this is what I was alluding to earlier. So there's been a tidal wave of digital accessibility complaints lately. There's been one lady who's put in, gracious, I think she was bragging on her blog last time. It was like over 2,000 web accessibility complaints. And so she's a self-proclaimed advocate, and so she does drive-by accessibility complaints. So what she does is she utilizes the Wave accessibility tool by WebAIM. Have you all heard of this? I'll write the web address for it up on the board. It's free. Anyone can use it. And so what she does is she usually goes on like 10 pages of your site and she'll run them through Wave and then put the errors in. So this is really interesting because automated checkers are great, and we're going to talk about some benefits of the axe one, but they're not perfect and they're not going to catch everything. And sometimes things can be accessible, but still not functionally accessible. So that's an important distinction to think about. She has a Facebook wall of shame. I think Brian's already shared these slides out. Yeah, there's a link on the title slide and a link at the end that we'll share again. So if you want to check out our Facebook wall of shame and she writes all the places that she's sued right now, and there's a total of 805 accessibility cases that are open for the Department of Education. So that impacts us since we're in higher ed. So it's not a fun journey to dance with the Office of Civil Rights or the Department of Justice. It utilizes a lot of resources, a lot of time. And sometimes how that works is you actually end up spending more of your time and resources on things that are not necessarily making your stuff more accessible. You're working on documentation, you're paying an auditor. You're trying to fight the bad publicity that is now out there for your organization. So we really want to not get into all of that. Preemptive rather than... Yes, yes. We want to be proactive instead of reactive. Okay, so for us, we have Section 508. So if you're a federal entity or the same rules apply to us since we are a state university, and it really applies to most people, but Section 508 is the standard. It was refreshed last January. And so when it did, it incorporated the WCAG 2.0 AA standards, which have been kind of the norm for a while. And so WCAG stands for the Web Content Accessibility Guidelines. And so that's where you look and you see the different guidelines about, hey, things need to have visual focus, or hey, if you have an image and you need to have alt text, or you can't have videos that you can't stop on your page, or things like that. And so they have the success criteria and the conformance requirements. And so those apply to websites and non-electronic documents and software. And right now it's not been finalized, but there's a WCAG 2.1 that's going around. And so it's up for comment. And so it's going to address a little bit more of cognitive disabilities and mobile accessibility. I'm going to get a drink of water. Yep, you're good. Okay. So the four principles of WCAG. Perceivable, operable, understandable, and robust. So perceivable, so your information is out there in multiple ways. So you don't just have one way that you can interact with it. So typically most of us utilize a mouse or a keypad to use information. You need to be able to use it with a keyboard as well, or some people might use a switch. Any other kinds of assistive technology or dictation software. So if I'm there and I'm using driving or something, it needs to interact with that properly so I can say open Microsoft Word and it should open up. Operable, so you're able to navigate and interact with content. So you need to be able to use it. You need to be able to understand what's going on and actually get to where you're trying to get to. Which falls into the next one, which is understandable. And it's a simple, clear language. You guys are probably tired of me saying this, but I say it all the time. Usability and accessibility are best friends. It's not accessible if you can't figure out how to use it. Jonathan and I were talking earlier about the eight million different things we have on campus. That is actually burdensome on our students because that's a whole different thing that they have to learn how to navigate. And so like for us, as we have multiple e-learning platforms, that's really not fair to our students. They're here to learn about a certain subject. They're not here to keep learning how to use all these different e-learning platforms. And so when you have a website, you want to keep consistency in there. If this is where your navigation stuff is, it's always there. If you ever listen to anything by Rob Dotson, he's like a celebrity in the accessibility world. They'll usually talk about affordances. And so like a teapot, you know how to use a teapot because there's a handle and there's a spout and so there's things that are built in so that kind of tell you how to use it. You want your website to do the same thing. When you see a home button, that should not save something. It should take you home. We have these consistent ways to use things. I was reviewing a video earlier this week and they had a little button at the bottom as a video player and I was like, what does that do? And it turned the captions on. And I was like, you know we have a universal CC for that. Why is this not the CC? I had no idea. And then on the side it had an extra tab for notes. So I clicked on notes and it had a transcript. I was like, notes are not a transcript. They're not one and the same. So you want things to be intuitive and easy to understand. And they're robust. So accessible across devices and assistive technology. A lot of times this one is also referred to as quote-unquote future proof. So you have valid code. You're using the most current up-to-date practices. You know HTML5. I know you guys have seen some really old stuff in your day with the dub-dub-dub-forge stuff going away. We've never seen anybody use table layouts or clickable divs or anything like that. That never happens. I found the worst one ever. And I had to show it to my student worker. It was like a history lesson. So people used to do this. Like long ago and far away when dinosaurs roamed the earth. This was a common thing. She was really entertained by that. She's like, why? I was like, right? Sorry. I'm a little too awake this morning. So the next one. Right. So this is me. So that's accessibility big picture. Let's focus in on WordPress because we're at WordCamp. And I want you all to feel like you got something out of this. So accessibility and WordPress, out of the box, WordPress is actually pretty good. So the WordPress project has committed itself to code standards that do follow WCAG guidelines. That means that the core application itself and any of the default themes, so like 2017, 2016, 2015, are either following those guidelines or they're doing the best. And so the WordPress community is very open to making fixes if you report something, things like that. So if you're just using plain old vanilla WordPress and nothing else, you're doing pretty well. You've got a lot of good semantic code that shouldn't be any major barriers. And I will do a quick plug here. The WordPress accessibility team, which I am not a part of, but I do follow very closely what they do, they are looking for documentation volunteers. So if you are excited about this and you want to help people do better, follow that link in the slides. So things go wrong when you start using things that aren't just WordPress core. Things go wrong when you add plugins that haven't been coded using good code practices. Things go wrong when you use themes that haven't been designed with accessibility in mind so they don't have navigation menus that can be used just using a keyboard or things like that. And then things go wrong when content creators create inaccessible content. And that's what we're here to talk about today is the content, is those content creators. Because as a web developer, so this is my go-to NC State website, the Department of Baked Goods. We don't actually have a baking program at NC State yet. One of these days the website is ready to go. So this is using a theme that I built for NC State for our group and for some of our clients on campus. I like to think I had control over all of this, but when we give this to a department or somebody on campus, I really only have control over that. I have control over the basic structure of the page. I have control over the navigation menus and things like that, the color scheme, all of that. But there's this big hole in the middle right here that I can't control because that's where people put in the content. And I'm not involved in writing the content and Crystal's not involved in writing the content until we happen across a page that things have gone wrong. And we don't visit every website on campus. We don't look at every page on campus in our abundance of free time. So we have this question of how do we keep this from going wrong? And so if you leave here with nothing else, the key message that I hope Crystal agrees with because I added the slide without talking to her is that accessibility isn't just for accessibility specialists like Crystal. It's something that everybody should be engaged with as you're working on a website. So if you're a developer, you should be thinking about how you're writing your code. If you're a site administrator, you should be thinking about the themes and plugins you're adding and looking at testing them in a test website or something like that. And then if you're a content creator, which again we're going to be talking about today, you should be writing accessible content. So content, we're going to sort of approach this with these two questions. What are some of the common content issues that are created as accessibility barriers? Basically what goes wrong when content creators are creating pages and posts? And then what can we do and what are we doing at NC State to try to help our content creators, to try to nudge them in the right direction, give them good habits and give them good feedback? So this is you again. Okay, so every year WebAIM does a screen reader user survey and so individuals that are blind utilize screen readers and so it asks them, you know, what are the things that you really find problematic when you're using a website? And so the results from the one from 2017, in the fall, so they had about 1,800 responses and so the number one thing is CAPTCHAs, which that's just a personal vendetta of mine. There's really much better ways to use CAPTCHAs and most of the time I cannot get them correct and I do not have a disability that would interfere with my ability to use a CAPTCHA. Unexpected screen changes, ambiguous links or buttons, flash content, please stop all your flash content now. Lack of keyboard accessibility, complex or difficult forms and I'm going to put in there with that also bad error handling for those complex or difficult forms. You didn't tell me that this was required until you said I did things wrong and I needed to do that or you just put in asterisk and you never put that, hey, things with an asterisk are required, you just assumed that I understood that or you said things in red and maybe I'm colorblind so I don't know what's in red, so that's always fun. Missing or improper alt text, things like the name of an image is image one, two, three, four, five or there's some really bad ones. Missing or improper headings, too many links or navigation items, complex data tables, inaccessible or missing search and I'm missing skip link. Do we all understand what a skip link is? So usually if you have a robust navigation at the top you have a link before all of that so you can just skip down to the main content so if you are a screen reader user you don't have to tab through all of that, you can just skip to what you need to need to or if you're just a keyboard user and you don't want to tab through all of that. So some issues are theme plug-in coding issues like the missing skip links but it's not just on the developer. I'm getting into the next slide, aren't they? Well, so we have some examples. Oh, we have some examples. You did add stuff last night. Thank you for talking about this one. So then here's links and buttons. Okay, so Brian added this last night and it is stabbing me through the heart right now. And we actually did this on the WordPress, the emails. He forwarded them to me. He's like, look, if you want to do this, click here. Click here is like, do you want to see my heart stab? Click here, click here, click here. So click here's are awful. So one of the major ways that screen reader users are going to navigate your page is they're just going to pull up a list of links on there. And so when they see eight of them that say, click here, click here, read more, read more, download this, download this, download this, they're like, WTF, I don't know what's going on, like what I'm looking at, where I'm going, where this is going to take me, it doesn't make sense. And so there's a lot, a lot better ways to do it. You know, if you're going to a page, give it the page title's name. If you need to and need to give it more information off-site, you can, but just all the eight million click here is like, please stop and please don't send me emails with that because it hurts. This is really stabbing me right now. Whenever I see things like this, I forward them to Crystal just because I like to make her hurt. He does, he does. And I'm like, I was having such a good day. So missing or improper alt text, these are always funny. So there's different things when it comes to images. So the big thing that you want to do is you want to convey the meaning of the image. So whatever I'm getting out of that, that's what you want your alt text to be. If it's just eye candy, so maybe this is for the baked goods page and it doesn't really have anything to do and you're not showcasing how wonderful these cupcakes are, you might just want it to be empty quotes and that'll suffice because if we're just jumping over it as sighted users, you want your people using screen readers to be able to do the same and that'll just skip right over it for them. Don't waste their time. But if this is meaningful and you know it's on that page and you have a paragraph that's talking about the 8 million cupcakes that you have, you need to give this an alt text that really fits that, whatever we're seeing. And so typically alt text, you want it to be about 140 characters, think of an old school tweet. And if it's longer than that or it's more complex, you want to give it a long description. And I actually prefer long descriptions, just under the picture because if it's that complex, you're going to have more than just individuals that are blind or with low vision who are going to have a hard time figuring out what that image meant. You might have individuals with cognitive disabilities who are going to be really happy that you spelled out what is going on in that picture because they couldn't quite figure it out either. Missing and proper headings. This is fun. I actually just had this conversation with my student worker right now because she's updating a few things for me for WordPress. Of course that we have for faculty in this number. And she's like, well, I really wanted to look like this H3 title right here. And I was like, that's not the point of headings. They are giving structure. You want to start, your page title is your H1. Really don't need more than one H1 on a page. Please don't have more than one. Maybe in an iFrame, something like that. Some very little exceptions but typically just one H1 on a page because the number one way that screen reader users do navigate your website is they pull up the headings. And we are doing that. Usually you just aren't realizing it. We're looking with our eyes and seeing the organization of a page like, oh, that's what I want to get to. And so they want to be able to do that too. So you're really messing them up when you're using headings just for formatting and not for actual content structure. So you want to go in order H1 to wherever, if you're going down to an H3 and then it's going back up to that H2 level and then to your H3, you don't want to skip them. And it's OK to skip if you're going back up. But you don't go back up to H1 because that's ridiculous. Yes. So the one thing I'll say about that is if you read the HTML5 specs, there are some rules about it's OK to restart with another H1 if you're in a new section tag or things like that. And that's, I guess, semantically correct HTML, but not necessarily accessible. It's one of those cases where assistive technology hasn't caught up with the spec in HTML5. And I do want to say that is a controversial thing in the whole accessibility world. You'll have people on both sides of that argument. So I'm on the one H1 argument. And that is also because I work a lot with the National Federation for the Blind. I talk with them a lot. And so that's what I'm getting from them. And that's what I'm getting when I talk to blind users. So that's where my input comes from. Still me? Yeah, sure. It's easy for content creators to unintentionally contribute to some of the most commonly reported issues. So the ambiguous links and buttons, missing and proper alt text, missing and proper headings. And then there's often things that are added to pages or posts with popular plugins like the captions or complex difficult forms or complex data tables. Please just use tables for data. Can I have a question for that? Yeah. You mentioned caption on a couple of different slides. What other options are there that's accessible besides caption? Well, there are some captions that are better than others. And so, and then the thing, the gold standard when I talk to folks at the NFB, they're like, why don't you have a simple problem like two plus two equals? Or because then if you're blind and deaf, you can use your refreshable braille display to read that and answer it. Because then it's not relying on either of the senses. So you recommend the math test? It doesn't have to be math. ABC next letter is D, just simple things. That is their recommendation. I'm not saying that we always do that here. I don't think that we do that at all here. That is kind of the gold standard when talking with them that they always recommend. And the truth of the matter is that if you're making it more accessible, in some ways you are making it easier for a spam bot to get through. And so that's just, that's a choice you have to make, is do you want to exclude some of your users or do you want to make more work for yourself as a site administrator to clear through some of the spam? And I don't think we can tell you what the right answer or the wrong answer is, but in terms of accessibility, CAPTCHAs can be... And the ones that I see that are usually the worst are which of these eight signs or which of these eight blocks are a road sign. That's really difficult. And so if you do go with one that is, maybe it's not accessible for someone who's blind in depth, but you could do it either way, I recommend that on pretty much all of your stuff that you have some sort of caveat at the bottom or at the top, if you need this in an alternative format or you need assistance for disability-related reasons, please contact and put a phone number in an email. You've mentioned forms here. I know there's particular parameters within the coding of the forms. Will you delve into that later as far as the fields and things like that? Yeah, so we're not going to get into that in the presentation, but if you want to stop by the happiness bar after this, I'll be around and I think Crystal might be around for a few minutes. So we can talk about and go through some examples of that. Yeah, so I don't think there's an aria tag for something like that. I don't have a whole lot of experience with honey pots, but if you have some examples you want to look at at the happiness bar, we could look at that. Yeah, I'm not honey pot familiar. All right, so remember those things that we just talked about because they're going to come up in a couple of minutes, but I'm going to go on a little diversion to my favorite accessibility testing tool and hopefully yours after today, which is called Axe by a company called Deque Systems. So Crystal is an accessibility expert. I am a web developer and I am a web developer trying to learn more about accessibility, trying to do right by my users, but going on a journey of education myself. And so one of the things that's been very useful for me is this accessibility testing engine called Axe. So they call it their Axe manifesto. I love the word manifesto for this. They want their testing engine to have a zero false positive rate so that you're not just bothering people with false positives. They want it to be only giving you feedback when there's actually something wrong. They want it to be lightweight and fast so you don't have to sit there and wait for it to churn on the content. They want it to work in all modern browsers and they have a very robust testing system for their own tests, which is great. So it is a very reliable tool. And what's also great about it is it is all open source and all in JavaScript. So it's not some sort of proprietary product that they're selling. They do sell things too. Dequeues, they're in business. They're selling other products. But Axe is an open source tool that you can use for whatever you want. And the easiest way to use Axe is as a Chrome extension or a Firefox extension where using your developer tools you will get something like this. So this is a screenshot here of the kind of feedback you get from Axe. It's giving you an issue description for the issue that is detected with a nice sort of easy to understand description of what the issue is. It tells you where it is in the page both with the element selector if it's like a CSS issue or the actual code that's in the page. And then it tells you, it gives you a recommendation for how you might solve the problem. So this recommendation isn't necessarily exactly what you need to do but it should put you on the right track for what you should be doing. This is all available in the Chrome extension or in the Firefox extension but if you take Axe as a JavaScript include and build it into your project in whatever way you might do that as a developer you can use a very simple JavaScript function to run it and here I'm just logging whatever Axe gives me into the console and then I get this nice structured data and this is all the same information that's available in the browser extension just in a nice array of data that I can access using JavaScript. So a lot of people use Axe for things like build testing and things like that as they're working internally as developers and I find Axe really useful for giving myself feedback because it's telling me what the issue is in a way that I can understand it's telling me how I might fix it and it's giving me a link to documentation. So that's great. Oh, I forgot about this slide. So we have not practiced this. So Axe has 67 testing rules and counting each version they're adding more finding different ways of testing more things and then each violation, as I said it includes help and description texts so you understand what the issue is recommended fix, link to documentation and then also an impact rating of minor, moderate, serious and critical and that doesn't mean you can just ignore the moderate issues but it gives you a way of sort of triaging and prioritizing. So this is created as a developer tool and is super helpful for me as a developer but we were talking earlier about how we're trying to help our content creators make good choices and it started sort of churning in my head is there a way that I can put this useful information that I find incredibly helpful in front of their content creators? And that's where our project started the NC State Accessibility Helper because we are super, super creative with our names at NC State. So in the Accessibility Helper the goal is to take that axe data and put it into a place inside of WordPress where our users can see it our content creators can see it and put that accessibility feedback that normally they would get when Crystal runs scan of their site or in an email that's 14 pages long and says here are all of the places where you don't have alt text here are all the places you're misusing headings things like that. Instead it puts that in context with what they're doing. So that kind of feedback is super helpful for us because Crystal has more time to do the things that she wants to be doing and it's helpful for people who are creating the content because they're seeing the potential issues as they're thinking about what they're creating. And so that's really the big thing for us is trying to bring accessibility testing into the content creation process not having it be the secondary thing that somebody else is thinking about and then telling you about. So I wrote a plug-in and I'll have a link to the code in just a minute that all it does is it adds this nice little button right here run accessibility check right above the publish button or the update button. The run accessibility check button does the exact same thing that the preview button does it opens a preview but it adds in this preview it adds a couple of extra JavaScript files and a CSS file and that styles the context accessibility feedback which I'll be showing you in a moment and I do want to mention we are thinking about Gutenberg nothing about the plug-in breaks in Gutenberg except that this button doesn't show up so I'm working on that so so it's in progress but right now if you're not running Gutenberg this is going to be great this works just fine so and also come to our NC State has a couple of Gutenberg talks later today come to this too alright so this is what it looks like so this is the preview and then these are the this is the in-context feedback so I've got some color contrast issues here don't put yellow on a white background and then it sticks these highlighting boxes around the content that has the issue and then gives you these little pop-up I guess I don't know they're not really pop-ups they're just little inserts pointing to the issue information boxes yeah so the testing scope the plug-in has been designed to only test the output of the content the function the content because if there's an issue with the theme that the content creator can't fix I don't want the content creator to worry about that I want them to focus on the things that they can fix and we have other ways of talking to developers and improving themes and plugins and things like that so we're giving the content creator this kind of feedback and if they click the learn more button it opens up a modal an accessible modal all keyboard friendly that was a fun adventure learning how accessible modals work it opens up an accessible modal that gives all of this additional information the axe gives us the URL to learn more it gives us the recommended action it shows you the code all of the things that the axe browser extension gives you all in the context of something you might look at as you're creating your content it's just a couple of clicks away inside of WordPress Matt first are you thinking like short codes rendering and things like that yeah so it should if I did it right it should be running after everything has been modified so everything essentially needs to have an alt tag you said not really yes we're like drove now accessibility which is fine it shouldn't come up if you have your empty quotes as the alt tag because you're providing an alt tag so I candy empty quotes but it will come up if you don't have the alt attribute at all if it's just the image tag with no alt equals something then that's an issue but as long as you have equals something even if that something is nothing yeah so all of this information available to the content creator right here sometimes we have pages that have a lot of issues and you have this sort of cascade effect of all of those little info boxes covering each other up so to help with that we also added a button to the top the WordPress toolbar that shows up as you're looking at that preview which will give you an all in one print out an all in one read out of all of the accessibility issues that acts detected in this page um this is a nice sort of overview of everything you can print it out and slowly work through it or make your undergraduate intern work through it as the case may be she's great so so no it shows just in order of where it appears in the page but it does so each of these does have the impact with both a visual signifier of like a red dot or an orange dot and then also a label because I don't want my accessibility plugin to be inaccessible and only use color yes this is for a single page do you have an option for run through the entire site and show me all the pages that have one but in a couple of slides there's information about contributing so alright so the other thing we did here is we added so axe comes with these four impact levels of minor, moderate, serious and critical we added an info level and the purpose of the info level is axe is a great tool that avoids false positives but sometimes we want those false positives and it's not that we want those false positives to confuse the users we want our own false positives to give users good recommendations so the idea is you might run this tool on a page that is perfect in terms of accessibility but you might still get these info notifications reminding you double check your alt text make sure that your link text is clear from context if it's been flagged as maybe being suspicious things like that because accessibility I hope I'm not overstepping to say this accessibility isn't something that's done otherwise crystal would be out of a job someday accessibility is something that requires constant review and just good habit forming so these six issues that we highlighted as things that are easy for you to do wrong in the WordPress visual editor either creating your content or using plugins that are common or things like that we can't guarantee that all of these will always be caught every time but all of them are represented in some form in either our custom tests that we've added or in the axe tests in some form we're hoping to catch most things that could go wrong and that's I think we're going to say something in a moment that automated testing can't solve everything but we can at least give good feedback where we can detect things so here's what I promised Matt an opportunity to contribute so we're not we don't have this available in the wordpress.org repository because that scares me I'm not quite ready for my terrible code to be in front of that big of an audience but you guys aren't that big of an audience so now it's your opportunity to check it out it's configured if you've ever used the github updater plugin for managing updates it's configured to work with that and if you go to this URL and you don't all have to furiously write it down I'll share the link to the slides in just a moment you can see the code in github, you can download it excuse me and get updates whenever we update it using the github updater plugin and if you are so inclined contribute ideas or code or just post an issue there are a couple of outstanding issues I haven't dealt with because I've been busy with Gutenberg stuff but all sorts of different ways that you can help make this better and if you are using it on a client site or on your own website and you start to see issues I'm very interested in hearing feedback for where things don't work or things that aren't caught or things that you are getting false positives you shouldn't or things like that so a helper helps but it doesn't fix so from that the NC State Accessibility Helper is a testing tool and an educational tool so a lot of those information ones as we talked earlier automated testers won't catch everything like really it takes a human eye to do it and so the information ones are just to alert you hey this is something that a human needs to actually go through and verify so the preview should be in the beginning of a bigger conversation about accessibility so we're in the early stages of rolling this out on campus we're trying to work with some groups we have a meeting with our student affairs group to work with them and roll it out for them but it's a larger conversation because it's a lot harder and it's a lot more work on people to retroactively fix things so part of this we want to give you this tool but we also want to give you some training and some knowledge and I heard a huge sigh of relief that some of that knowledge was hey I don't have to put alt text for everything it can just be empty quotes right like sometimes it's a lot easier just knowing how to do it you're like oh that's all I have to do that's really easy so so please check out the plugin steal it make it better let me know what you did to make it better so that we can make it better because I don't actually know how to write code people have this idea that I do and I don't know where that came from so the link to the slides is here and you can check out the code in the plugin and then also I have our email addresses here if you have any questions about what we talked about today or anything like that and we'll also be at the having this bar for a little bit after this so yes I'm sure my clients and potential clients that they were required to have your site accessible if they are a government if their own business has 15 or more employees or it's you know like a chamber commerce which is sort of government correct me on those requirements what do you mean is that accurate or I need to be aware of so commercial vendors also have to have accessible sites so like Amazon was sued Target was sued they're doing great things now because of it so everyone really if you're out there to the public you still have unless it's like your own blog and you're just right in a way but I would assume everyone in here is either commercial or education or state or federal government somehow and so really most all of us have to have to meet those requirements and I guess there's also there's sort of two sides to accessibility there's the legal side of what is my legal risk and there's a risk assessment process you can go through but there's also the just the code side of how do I make my website better for everybody and at least I mean Crystal has to deal with some of the legal stuff in her position but in the office that I work in we really try to focus on like let's not worry about getting sued let's not worry about what potential legal ramifications are let's focus on just trying to build the best websites we can and part of that is accessibility and I can't give legal advice because I'm not aware and I'm not hearing that capacity but I do suggest and not legal advice but as you're going through and doing any accessibility updates that you document that and you document your efforts and that you have a roadmap to compliance and say because realm wasn't built in a day you're not going to be able to fix everything and things are always updated but having statements like hey if you need this or if you need an alternative format please contact us or if you have any difficulties that sort of stuff really does go a long way there's 88 compliances that came out in 2017 it's been a landscape for sharks and there's been a lot of companies that will offer these little checkers so to speak where they'll go in and check the stuff and then they'll sell you the report and they'll go in and they'll contact you and count it for days about coming in and fixing it. Yeah I don't answer those calls. So my question is for us developers who are not at EDU or GOV is ADA compliance a feature that we should be building is extra a lot of work. Can I ask what kind of group you're with like commercial or what do you... We actually do local businesses so we're pretty much bringing local businesses on the map locally with how I could say SEO for awareness like location awareness that's how we're doing stuff. So I would say yeah it needs to be part of your plan because that's the commercial side of things. Those businesses are really the ones who are going to have the liability there. And so if they're smart they wrote something in with their contract with you saying that you need to do this so that you're meeting all compliance requirements. So I would say yes that you should and really for the businesses side that you're risking so 20% of the population statistically has a disability. You're risking out losing some of that business and a lot of this stuff like guests are talking about individual disabilities and that's really important but a lot of the things that we do to make things accessible really benefit everyone. So they're not things that are lost on other people like it ends up being just good code and good practices so I would put forth the efforts but I would also you know I fully understand that things are not going to be perfect right away so I would document what practices you're doing and document your roadmap and saying hey here's what we're implementing now here's the trainings that we're doing and here's here's how we're trying to get there. The only thing I'd add to that is you know when you're having those client conversations no client is going to say I don't want a website that's secure no client is going to say I don't want a website that shows up in Google you know things like that accessibility is just part of all these things that make a good website and sometimes that's something a client doesn't realize and you have to have that conversation and say like you know accessibility is like security it's just a thing that we need to do that's a helpful thing sometimes to help have that conversation it's not always easy but yeah So WCAG the web content accessibility guidelines right now the standards 2.0 and it's broken down into three levels A, AA and AAA so the standard for that is you want AA so AAA is kind of like icing on the cake it's some things like that would be nice but almost some of them if you incorporated them it would almost make other things not accessible so that is not the standard right now I'm trying to think of one that's really good but very expensive one of the things for AAA is so AA is closed captions for AAA is having interpreters and picture-in-picture interpreter for a video so that's not necessarily reasonable because that's very expensive they're like 90 bucks an hour to get an interpreter then you have to get all of that in there as well so but AA is the standard that so that's what's in the section 508 standards now since they were refreshed in January I mentioned briefly about text or content that's added that would be understandable well okay so there's readability levels and there are caveats to that we're an institution of higher education so we don't always meet those readability levels because some of our content for the nature of what we're doing is just you're going to have words with more syllables you're going to have more complex sentences but there's different checkers out there for readability and you can just add them as like bookmark lists on your page and I'll tell you if it's a 12th grade reading level they say most of the US is up to an 8th grade reading level so you want the reader's digest version of stuff which really for your websites you want it as simple as possible anyway but some of that with the readability level and we're so bad at this here at NC State is acronyms you're going to spell out what the acronyms actually are so you don't just assume that people know what it means but I have the meetings I'm going to stand for OIT, ORID, OID I'm here don't know what we're talking about because it was an acronym on my calendar for a meeting and I'm like I don't know what that stands for I'm sorry I interrupted you but that's part of it so 8th grade reading level is like standard so you have some wiggle room with that look at your audience look at your content how complex does it need to be it's just like the three-click rule like how many clicks do you need do you have so much stuff that you need to take people on this long journey to get there or are you able to simply put information there that people can understand Brian is fantastic at this I could give him like two paragraphs of stuff and he's like here you go two sentences very easy for people to understand and get what you're getting out of that and then if you actually want people to read what you have on your site it's a lot better two paragraphs just speaking for myself I try not to get too hung up on what is the reading level or things like that I mean you're going to know what you've written is super verbose or hard for somebody to parse out you know it's sometimes there's not going to be a way that you can make it really simple but wherever you can try not to make your audience work try to make sure that they are able to just start from the top and read through it once and not have to go back and read through it three times to figure out what was it that you were trying to say and I feel like there might still be a little more work on top of that that you could do to improve but that's a good starting point is just making sure that it's clear and concise don't make me think huh that's a good one people don't want to think on the web just give me I just want this information that's all I want and I'm that way too so I don't think that question is on brand so in higher ed people sometimes look at an organization like NC State and they see an institution what we really are are a bunch of feuding like medieval states we we don't always talk to each other it's hard to get people on the same page and so there are there are brand guidelines for voice and tone like how direct you are and things like that we are not like a newspaper that follows like strict AP style or something like that we're not like we don't have a consistent way of shortening or writing our acronyms or things like that but a lot of the time if you look at the department of baked goods website the hypothetical department probably at least half of the stuff on that web page was written by an administrative assistant who was just told hey put this on the website real quick and they just copied and pasted an email and then moved on to their next task because we love our administrative assistants here they're very capable but we make them do so much stuff so a style guide is great we don't do that we do have brand colors yes thank you very much for making this available to us the second thing is if you're just getting into accessibility checking and like I'm being thrown into it I was informed last month that I was going to be thrown into it whether I liked it or not because this happens a lot and they're currently what they're doing is they're using something like the wave checker how would I integrate this into the process I mean somebody says okay here's a website we need to bring it up to standard where do I go from there Crystal I think that's more of a you question okay so the wave checker is good it depends how far and the leads are going to allow you and have your time the certification you can get through the trusted tester program through the federal government to test websites they're updating it right now because right now I think all their content and their testing tools are utilizing stuff from the previous 508 standard so they're trying to get that done last I heard they're trying to have that ready by the summer I don't think that they're on schedule for that but it'll tell you every single way to check a page but it'll take you half hour to an hour to check each page if you go through and check everything through like how they have it I did the old program and went on the new one so the the testing tools are good waves good, axes good we also use sort site I think it's pretty good as well and it'll give you a good place to start it'll catch a lot of the issues that people have a hard time with but at the end of the day none of these make up for a human with the knowledge of how to do it and really the gold standard and it's something that I'm trying to do a little bit more here is to actually have users with disabilities use it that is the gold standard is for them to test it out and to take feedback how do you go about doing it? we have a disability services office here and so I'm good friends with their director and their assistive technology specialist and so right now they're sending out a survey they have end of the year questions that they're sending out to their students and so I tacked in on that with questions and stuff and then my poor student worker I send her to events that they do with our flyers but I'm trying to I'm trying to bring some of them in and actually trying to hire some of them on at my previous institution one of our blind students was a student worker and so I would be like hey I just want to watch you do this I just want to see how you're doing it kind of a thing that people don't realize screen readers are very difficult to use for the most part especially JAWS which is the most commonly used one and most screen reader users are not efficient they're not great at it if you listen to the president of the national federation for the blind he'll tell you he's like I'm not great at using the screen reader so they all interact very differently with content and so which we do as users as well this group might be a little bit more advanced but think about how like a grandmother uses the internet and might be a little bit different than you and you're like hey you just needed to find that why didn't you just you know and find it and just different techniques and so it's important to see that and to get their interactions because even though some things might be accessible and like ARIA is great and it gives you a lot of cues when you step out of kind of the norms and you make it a little bit more complex you're isolating some users who are like that's something I'm not really comfortable with why can't it be why can't I interact in the same way that I've interacted with other things why is this form so different than others that I can't just do the same like I've done for others and the other recommendation I would make if you don't have an academic institution with disability services and people that you can contact if you're on Twitter on the hashtag A11Y there's a lot of there's a lot of accessibility discussion so A11Y there are 11 letters between A and Y and the word accessibility and so and so I have found that useful so a lot of the time I'm not interacting with users who have disabilities when I'm building the things that I build but I am active on Twitter and I do try to follow discussions on that hashtag or find active voices in the accessibility community that do have disabilities and oftentimes are sharing you know I found this website hard to use and here's why things like that it's not as good as actually having a user testing your product but it's feedback that you can start to think about and internalize as you think about your own products yes okay whichever one you want to go first mine's actually probably a question that's going to make a lot of people laugh but real-world situation our decision maker was colorblind they were chosen to give us our color scheme for the website okay now you're all laughing at me but I struggled with the ethics of this do I code this to the audience or for this decision maker that's the final approval sorry that's not I don't think we can give you advice on that I think that's a business decision I would the only thing that we could say really is like there are color contrast issues so to make sure that you have color contrast but just because it has sufficient contrast doesn't mean it won't look like Barf but it's on the website so I can't I don't think we can speak to that I guess the only other thing I'd say is make sure that nothing that you're doing relies solely on color text equivalent alongside that blue button or whatever I haven't used that one before honestly but all the things that you're saying when you do your testing you want to be able to zoom magnify your browser up to 200% and make sure that all your information is still there and that it's actually 200% bigger and that isn't there so if it's giving you there's lots of different tools out there and there's a lot of really good ones like I have like 20 book markets that I always have that I'm using depending on what I'm trying to do I'll use different ones so is that plugin giving the end user's do you change the contrast or so that's what I thought I've used that plugin a couple of times so I guess the only thing I'll say is it's good to give your users more tools if you want to but it's no single plugin is going to solve all of your problems and that's I guess the one thing that you want to keep in mind you're if you use a plugin like that you want to make sure that without that plugin which is running JavaScript and inserting the things that it's inserting if you have a user who has JavaScript turned off and has a disability you want to make sure that just using native browser tools like you know command plus or control plus to make the font bigger and things like that that's still working too so it really varies so it depends on your organization like as to who reported it to like for us if someone said something it could go to the department of justice or the department of civil civil rights or office of civil rights and in each area has its own office of civil rights so because we live here ours might be southern where are we the southeast sorry I moved from Maryland so ours was in Pennsylvania there and so even though there's all the office of civil rights it will kind of dictate things differently and you might get a different decision from one versus the other just depending on which of the lawyers look things over typically they'll either let you write a response the options are typically that you can write a response you can do a resolution agreement which those tend to be relatively invasive or they might say a few other things depending on which department but they'll dictate what you're allowed to do when something like that comes in you go straight to your office of general counsel and they're really going to be the ones who are going to work straight all of it and then they'll dictate to the whoever is actually doing things and that's why they're going to be asking for all that documentation hey where's your roadmap what have you done what have you been doing what are you planning on doing and depending they might give you the opportunity go ahead and fix it and say hey thanks for bringing that to our attention here's how we fixed it here's what was wrong what we did so it just depends on the situation so things have changed a little bit under the current administration the current presidency so I foresee them changing again whenever that administration changes well Brian Crystal thank you very much for a great talk thank you thanks so much so we can wait for you it's a lot of stuff on the whole board yeah I'd have been there