 Good afternoon everybody. Hi. Are you all awake from your wonderful lunch yet? Yes. Excellent. Really quick as we probably have a few more people coming in because I think all the lunch, the post lunch sessions probably started late. As you can see here I've got my Twitter handle up here. I've got some hashtags that you can use if you're not familiar with the A11Y. That is the 11 there. There's 11 letters in accessibility between the A and the Y. So they've shortened it to A11Y for the accessibility hashtag and abbreviation. And then at the bottom there those are where you can find copies of my slides and more resources. Some time in the last year I started learning a lot more about accessibility. I went to a few word camp talks, got really excited about it. Started learning a lot more than just, you know, headers and alt text like my description said. And I wanted to share with you all those things that I've learned in ways that you can go and start making websites that are more accessible immediately. It worked. My name is Stephanie. I'm from the Jacksonville, Florida area. I moved there from Indiana about four years ago. My husband Jonathan and I, we started our own company about eight years ago doing web design and development. I also have two children. I have a daughter who is four. She'll be five soon. My son is seven and a half and he's really excited because word camp Jacksonville in April gets to be his very first word camp ever. It's the best thing. So it's exciting to be raising up the next generation so they can take over my job eventually. So the first thing about accessibility is what is accessibility. It says it right in the name. Access. Isn't that fantastic? But that still really doesn't tell us much. So there's this definition here from CNIB, which is the Canadian, what's this stand for? Canadian National Institute for the Blind. I'm going to read it out loud so you can both learn audibly and visually. Founded on the principles of universal design, the goal of accessibility is to create an inclusive society for people with physical, mobility, visual, auditory, or cognitive disabilities. This means everyone has equal access to perceive, understand, engage, navigate, and interact with all elements of the physical and digital world. So with accessibility, we want to make everything work for everybody. But today we're not here to talk about accessibility for brick and mortar stores. We're not here to talk about the accessibility of government documents, nor are we here to talk about the accessibility of hoverboards. We are here to talk about accessibility for the Internet. And you might ask, well, why should I care about accessibility? What does it matter? I've got some reasons for you. The reason number one is because we care. It might sound kind of sappy, but it's true. Most of you, I'm sure, would be appalled if you saw the situation where this awesome new pizza joint opened up and somebody in a wheelchair couldn't go because it was at the top of these really big steps. They have no elevator, they have no wheelchair ramp. So why is it that we're not necessarily appalled when we have this situation where they go to the website of the awesome new pizza place and they can't read the menu because the menu is a picture? Accessibility, do it for the love of mankind. Or you could do it because of government regulation. Right now, so there's the ADA that makes me feel old now when I look at that date. It's been around for a while. I'm sure everybody's familiar with it. Right now, the ADA is what covers accessibility and websites, but whether it really covers it or not depends on who you talk to. It might cover all websites, it might just cover some websites we don't really know, but if you get in front of a judge, they can still find you for not complying. And you might think, well, you know, me or my clients were just these little tiny guys in the corner, nobody's really going to notice us. We're not like Target or Netflix or H&R Block. But if they get sued, they have the money to take care of it. If you get sued, you're going to be squashed. And if those reasons still aren't compelling enough, think of the money. There are 48.5 million Americans that have some sort of disability. That's one in five people in the US. And those people have $175 billion to spend annually. So think about the kind of money that you could add to your business or to your client's businesses just by making your websites accessible. And now we're going to specifically talk about how disabilities affect the way that people use the internet. So the first one is visual disability. There's 8.1 million people in the US that are visually disabled. 100,000 of those people are blind. Most of the rest of those people have some sort of low vision. These are the most common ones, blurry vision, clouded vision, tunnel vision, central field vision loss. And then there's also color blindness, about 8 to 10% of all men are colorblind. Although surprising because of the way the genetics work, only about 0.5% of women are actually colorblind. These are the three main types of colorblindness, deuteranopia, protanopia and tritanopia. And then ways that we can assess people with visual disabilities, audio screen readers, braille screen readers, color contrast, white space. Then hearing disability. 7.6 million people in the US have a hearing disability. They can be helped with things like closed captioning, transcripts on both audio and video, as well as augmenting or replacing audio conversations with video conversations. So with Skype you can actually do things like sign language, which is really great. Also motor disabilities, 19.9 million people in the US have motor disabilities. A few of the causes of motor disabilities are arthritis, fibromyalgia, rheumatism, muscular dystrophy, amputation and deformity, tremors and spasms, paralysis, spinal cord injury, repetitive stress injury. And a lot of these people that have some sort of physical disability use alternative inputs. And so here's some examples of the types of alternative inputs they might use. They may have a head mounted stylus, or if they are fancy like Stephen Hawkins, they can have the little sensor that goes on their glasses that can sense their eye movement and move the cursor. There's larger simplified keyboards for people that have just mobility with their hands. There's also styluses that can be used with the mouth and of course there's several others as well. Cognitive disabilities. 9.4 million people in the US have cognitive disabilities. Some of the causes of cognitive disability is learning disabilities like dyslexia, autism, ADHD, acquired brain injuries, neurodegenerative diseases, and age related dementia. And with these cognitive abilities, these people will have trouble focusing on the content and the website and have trouble understanding it. Ways that those individuals can be assisted. Things like having clear navigation, making sure the functionality of the site is obvious, content and layout, closed captioning and transcripts, those people actually a lot of times they can learn better if they can both listen to the video and read it as well. But accessibility isn't just for those that are currently disabled. Anybody can become disabled at any time, either for the short term or the long term. Whether it happens to be a car accident or maybe eye or a double ear infection, age, stroke, sports related injuries. And then also even those without disabilities have situational challenges. With situational challenges such as like a broken mouse or using mobile devices, having your website accessible actually will make it easier for these people to use the internet as well. Things like a noisy environment, they might not be able to hear the video or quiet environment, they might not want to play the video. And so having the transcripts available is helpful for that. The next question then is how do we improve accessibility? The first thing to keep in mind is accessibility does not equal usability. It doesn't matter how accessible your website is if it's not usable. It's like the proverbial pig with lipstick. The other thing is to know best practices. The web content accessibility guidelines, WCAG version 2.0. This is from the web accessibility initiative or WAI from W3C, the worldwide web consortium. And this guideline is actually really, really big so you're not necessarily going to be able to memorize all of it. But being familiar with what's in there is going to be very helpful. As you can see there, as I have listed here, there's four principles listed in WCAG. There's 12 guidelines and 61 success criteria. And then the success criteria is divided into what's known as A, AA and AAA. And those that are labeled as AAA are considered the most accessible ways to do things. But most of the time the idea is to try to get to AA or better. So then the four principles of accessibility. Perceivable, operable, understandable and robust. Also known as poor. And it was pointed out to me that it's also a really bad joke. You can say, I'm building a poor website. And that means it's perfectly accessible. So the WCAG actually has written out what fits under all these principles of accessibility. And unlike a lot of these documents, I think it's actually very well worded. So I'm going to go through these real quick. Underperceivable, provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. Provide alternatives for time based media. Create content that can be presented in different ways, for example, simpler layout without losing information or structure. And I didn't read that one. Make it easier for users to see and hear content, including separating foreground from background. For operable, make all functionality available from a keyboard. Provide users enough time to read and use content. It wasn't very operable on that last slide. Do not design content in a way that is known to cause seizures, which means the really fast flashing, which fortunately we don't see many websites like that anymore, but the old Angel Fire sites where everything was going do-do-do-do-do-do-do. Yeah, not so good. Also provide ways to help users navigate, find content and determine where they are. Understandable, make text content readable and understandable. Make web pages appear and operate in predictable ways. And help users avoid and correct mistakes. And finally, robust, maximize compatibility with current and future user agents, including assistive technologies. Again, the principles of accessibility, perceivable, operable, understandable and robust, also known as poor. So you need to make sure when you're doing accessibility that you have a plan. Because if you don't have a plan and you wait till the end, you can end up with some very ill-conceived solutions. These are examples of wheelchair ramps and other parts of the world. My son looked at that one on the bottom right and he said, mommy, that looks really scary. You can see this one in the middle here. It runs right up into the wall. So if you just have a cane, you're probably fine. But if you have a wheelchair, you can't actually get onto the ramp. Now, on the other hand, if you actually plan for accessibility from the beginning, it can be more than just functional. You can create something that's incorporated into the design and actually can become a thing of beauty. And you should go, this is just one of the pictures from Robson Square. You should go look that up and look at a bunch of the pictures. It's just really awesome how they incorporated it and included so much beauty just with the accessibility there. So again, have a plan. The content creator should write accessibility. The designer should design accessibility. The developer should code accessibility. And the QA person, which I know all of you here are doing quality assurance testing, should include accessibility testing. And now, I'm guessing that a lot of you here probably have at least two of these hats that you're wearing during any given project, which means you can focus on more than one way to make their website accessible. So first, let's talk about accessibility as a content creator. You can write at a seventh to eighth grade level. That's considered the best age level to write at to make it understandable for individuals without feeling like it's been dumbed down or anything like that. Make sure you caption videos as well as provide transcripts for audio and video and then organization of content. So just think about the way that the content is organized when it comes to things like headers and paragraphs and whether something should be a list in a list form or written out in a long form way. Couple tools to help with content. Creation, amara.org, that's used for closed captioning. A WordPress TV actually uses that for all of their closed captioning on their website. And then readabilityscore.com so you can check the readability level of your content. As designers, you can do things like organization of content again. This is usually going to be more the visual structure. So if you're doing wire framings and mockups, making sure that all the content is where people are going to expect it to be. Color choices. Alternative text for images. Make keyboard focus visible. Large target areas and affordances. So first off, color choices. Contrast ratio. Contrast ratio is the difference between the foreground and the background and how much difference there is between the two. So you can see on the left here. Look at the screen. Now squint and look at the screen and see if you can still easily read that button. It's probably going to be hard to see, whereas the one on the right has good contrast ratio. So it's much easier to see. And then color blindness. People that have color blindness, red, green is the most common. They can't tell the difference between red and green. So having buttons where the actions are only described by the color is not very helpful. So you need to make sure that you're lab- that you use labels as well and not just rely on color. Some color tools. Colorsafe.co. That actually helps you put together color contrast ratio accessible. My brain is going crazy now. OK. So it lets you choose the colors for your website. It'll put a bunch of colors together and say, hey, these go together and they're also accessible. And then webaim.org, their contrast checker. You can take colors that you already have and put them into the system as foreground and background and see if they're accessible. And then colororacle.org. It's actually a program that you can download to your computer. It works for all of them where you can actually look at your computer simulated with color blindness. So you can see if everything works for that. Alternative text. So all of your images should have the alternative text attribute. But if it's a decoration, so if it's a border and it doesn't really add to your content, you want to make sure that has alt equals and then the quotation marks with nothing in the middle. And that just lets the screener just go right over it since it doesn't actually affect your content. Also, you should make your alternative text descriptive. It's much more helpful to say young girl looking wistfully at bunch of grapes in her hand than just having the description wistful. Keyboard focus. This is for when somebody is using their keyboard to tab across the screen to go through all of the links without keyboard focus. They don't know what link they're going to be selecting. So when you turn on keyboard focus, you can use this pseudo element here, the colon focus, and you put decoration on it. And so then as they're tabbing through, you won't normally see them unless you actually click with your mouse. But if they're using tab on the keyboard, then it'll put decoration on each link as they go through in each action that they can do. And also target areas. Target areas are the clickable areas of something. I'm sure most of you have tried to access an old website on your phone and the links are itty-bitty. And even though you don't think your hands are very big, you have to keep clicking like four times to get the right link. That's because that target area is very small. So when you use larger text, have more padding around it, then it makes it much easier for people to actually click on that. And then affordance. Affordance gives visual guidance on how you actually interact with the website. Couple examples of affordance. The first one is hidden affordance. And this is when it's not obvious how you're supposed to take action. So make payments. You're supposed to click that area there in order to find the make payment area. But it's not really, it doesn't look like a button or a link or anything. So it's not real obvious. You're going to be kind of jumping around trying to figure out what to do. False affordance and when something looks like it's supposed to do something and it doesn't do anything. This is actually an app that I had downloaded onto my phone. Sign up with email or sign up with Facebook. I wanted to sign up with email. I clicked the arrow button. Nothing happened. I clicked the arrow button again. Nothing happened. It wasn't a link. You're supposed to click on that gray text that says sign up with email and then all of a sudden the cursor appears and you put your email address in. That's false affordance. And then things that developers can do. Developers can consider the structure of their code. Write clean code. Utilize semantic HTML. And then make sure that you understand how to use ARIA. With semantic HTML, you're taking the meaning of that HTML element and using it in the way that it was intended to be used. So if you're going somewhere, it should be a link. If it's doing something, it should be a button. Make sure that your links are A tags and your buttons are using either button or input. That's just one example of making sure you use your HTML semantically. So what is ARIA? ARIA is also from that group I was telling you about. The Web Accessibility Initiative. It stands for Accessible Rich Internet Applications. And what it does is it makes the web easier to use when you need to do things that aren't inherent in HTML for screen readers and things like that. So you're adding extra content to your code to make it easier to use. So the first thing to do is actually ask yourself, should I use ARIA? I made this nice little flow chart for you. Does HTML already do this? If HTML already does it, you shouldn't be using ARIA. Just use HTML. If it doesn't do it, that's when you can think about whether ARIA is going to be a good solution for it. So this is a bad use of ARIA. We have a list here, but it's not using the list elements from HTML. It's got a div with ARIA role equals list and then it has paragraphs, which means you're also going to have to do a heck of a lot more formatting for your visual viewers as well because you've just got paragraphs here, whereas if you would have used an ordered list or an unordered list with list items, it would have done some of the inherent list settings that you get in HTML with the default stylings, as well as it already tells the screen readers that it's a list. On the other hand, this is a much better use of ARIA. Right here, this is actually some code I had to figure out how to do the other day. I have some links that are icons and for sighted readers, they don't really need both the little house that means home as well as the word that says home, but for the icon, the screen readers either are just going to get nothing or some gobbledygook. So we add the ARIA label home and then as the screen readers going through it, it actually tells it this is a link to home. Then finally for QA testers, for QA testers they can do things like test with screen readers, detach the mouse and trackpad so you can see if your site is actually accessible with just the keyboard. You can also set it to high contrast mode. There's different ways of your computer and your browsers. There's a link in the resource page on how to set your computer to high contrast mode and when you set it to high contrast mode if you don't have good the contrast ratio, certain elements will just completely disappear from your site. And then also turn off the images because once you do that, you can see if you actually have all of the necessary content on the site as text and not images. Like going back originally to that one slide where the menu was a picture, if you had gone through the website turn off pictures just to see if it was accessible it would say view our menu and then nothing. You go oh maybe we should actually have some content here for those people. And then testing tools for those people doing testing, totally that's I think it's a tool on the web. I have it installed as a little bookmarklet on my Chrome browser and it can go and it'll show you different errors and how big errors, small errors. Tenon.io you put in the URL and it gives you a nice little report of not just which parts aren't accessible, which areas you could focus on first. So it'll say hey these are really important things and then here's some things that aren't really accessible but they're not quite as big of a deal. So you can go through the list from top to bottom and you work your way through from least accessible to slightly more accessible so you can have some hierarchy and then wave from web aim as well. That's also an accessibility tool. So one last time the URL that I've been giving you that has more resources, lots of links. And I just want to tell everybody go forth and accessibilitize. Questions. Are you on the accessibility I am not on the accessibility team because sadly I don't have time for something like that right now because my kids are this big. I will talk to you about accessibility team for WordPress. Anybody else have questions? Yes, the slides are actually on that URL right now too. And yes, and a tweet is scheduled to go out in a few minutes with a link as well. Something else I learned when you export Google Slides as a PDF it is not an accessible PDF. So I had to go and create a text document and then I had to go find how to make a text document accessible as well. So that was fun.