 Hi, I'm Nancy. We're going to be talking about demystifying accessible websites and looking at pretty pictures along the way. So a little bit about me. I live in Atlanta right now, and I have a dog. She's awesome. She's in the bottom right corner and the love of my life. And I went to Atlanta because I was going to Georgia Tech, and I've ended up sticking around for the past few years. Currently, I am a happiness engineer for automatic, and I work with Jetpack and self-hosted things. And I also do film and photography with a small production company called Misfit Ideas. Now, the first thing I want to start off with is a few examples. So Apple.com is a fairly well-known website. It's visited by a lot of different people, and it's also generally hailed as a good design for a website design. It's also generally hailed as a fairly good accessible site, and there's a blue border. OK. And it's just, there it is. So basically, I wanted to show there's a, the first thing is that if you guys use Chrome, there's an extension called Spectrum. It shows you what colorblindness, different types of colorblindness are, and how people would see them if they have a particular form of colorblindness. And that's generally one of the first things people think about when they're thinking about web accessibility is how does your website look. So for example, there's a, the most common is called Deuteronopeia. I'm hoping I'm saying that correctly. And it basically merges all of the reds, the yellows, and yellow greens into this murky, gold, brown color, and all the blues and purples and red blues into this bluish, middle, brown color. In the case of Apple.com, it actually is OK. Everything is still completely legible, and you can still say, OK, I can read what's on the screen, right? Another example is that web accessibility is a fairly important thing, especially for government websites. So one of the most famous government websites is the White House. And so for their site, you can see that there's a lot of different things going on. There's a menu, there's videos, there's images, and there's a lot of text that's fairly important. In the case of Deuteronopeia, you can still actually see it. And in this case, red is fairly used, because red, white, and blue. And so you can see that even though the red goes away and the flag sort of fades into the background, you can still use the site. Looking at WordPress sites, though, I wanted to just see that WordPress sites are generally pretty accessible for WordCamps, at least. And for this WordCamp Barcelona, the thing about the site that was interesting was that they have red and they have gray and black. And you'd think that maybe, oh, OK, well, with color blindness, that might make it a little difficult to see. In this case, it actually works out, all right? Because there's contrast between the two colors. You can say that, well, yeah, sure, the red and the brightness goes away, but you can still read what's going on. That's one thing that I really want to emphasize when you guys are making sites, is that when you're using colors, make sure that that's not the only thing that you're using to emphasize something. For example, if you have a sale on your site, then make sure that you're not just saying sale and red letters, and that's it. You're saying, have exclamation points or some arrows or something to point to the information, so that way you're able to distinguish it without just using color. Now, this one I thought was interesting because, oh, crap, it's all red. Now, this is going to be totally terrible to see, and oh no, oh my gosh, and it's not. Which brings back to the idea of contrast is that, sure, it's red, and it's blueish, blackish, and darker colors, and the reason that it works is that it's just one color. It's not distracting. There's not a plaid background with red type. You can actually still read what's going on. Same actually goes for this website. You guys are probably a little familiar with this one at this point. But for WordCamp US, sure, it's in Philadelphia, and red, white, and blue is a pretty common theme, but it's still legible. In this case, it works because the image is faded in the background. If it hadn't been faded, it would be a lot more difficult to read all the different things going on, otherwise it would be pretty busy to see. So, all right, so web accessibility. Tim Berners-Lee is a fairly important guy. He created the WorldWed Web, and so he says that the power of the web is in its universality. Access by everyone regardless of disability is an essential aspect. Even the UN agrees with him, the UN says that web accessibility is a basic human right. At this point, with so many people using the web, using whether it's on a mobile phone or on a desktop, a lot of people need the internet to get access to information. So, why should we care? What you guys need to think about is the fact that there's, in web accessibility, there's potential clients and worldwide users. Potential clients being it could be a government site or it could be a company that's actually becoming more aware of the fact that they need to have accessible websites. Then there's also worldwide users because it's not just the person in your hometown, it could be someone in India that's deciding to go crawl your news magazine site. And taking web accessibility into account means that you're gonna have, you're gonna provide the access to this information and you're gonna provide it equally because it's not just you and I that's viewing this thing on the web and reading this particular awesome article. We, there's a lot of people that care about the things that you're talking about and they don't necessarily have access in the same way that you do. So, a few facts. Currently, approximately 20 million adults in the United States are blind. 10% of them use screen readers when they're accessing the internet. And about 8% of men are colorblind and a half a percent of women. What's also interesting is that because government websites are requiring accessible standards for their site building, they're also requiring other companies are also starting to jump on that particular bandwagon, which is a really good thing. So, this is what I was explaining when I was saying that explaining the particular form of colorblindness due to an apia. On the left, that's what you would see if you had a normal eyesight that doesn't have any sort of colorblindness. And on the right, that's what the colors essentially look like. Not exactly, but you guys can get a bit of a feel of what's going on. So, there's a lot of different types of disabilities, though. It's not just colorblindness, it's not just screen readers. There's different neurological effects. There's stress injuries. There's temporary disabilities and permanent ones. And there's also ADHD, dyslexia. Different levels on the spectrum of blindness. You can be just hard of hearing or different levels of deafness. You can be hard of hearing or you can be completely deaf. So, there's different things that you can keep in mind. For example, auditory is a pretty big thing because a lot of people have videos on their websites. The thing about videos is they're great. They're awesome marketing tools. They get a lot of information across in not just textual form. But the thing is, is that not everyone can see, can hear videos properly. So, if you do have a video, try and think about captioning. Google and YouTube, they have different technologies that are trying to read what your video is saying, but that's not always correct, if you guys have noticed. And so, just thinking about that when you're putting up anything that involves audio, making sure that there's also a different way to access that information if somebody can't hear it. For cognitive, there's things like clearly structuring your content because if you have a site but you aren't easily able to navigate it, that makes things difficult. Not just for it makes it hard to read, but it also makes it hard to navigate in terms of figuring out where you are on the site if you're using something that is not just your normal trackpad or mouse or keyboard. If you're using a screen reader, making sure that it's all structured correctly. For physical things, there's a lot of different physical disabilities and people aren't just using a keyboard or a trackpad. They're using ergonomic keyboards or they're using a pointer or an on-screen keyboard or voice recognition, all these different things. So keeping all of that in mind when you're structuring your content. And finally, visual. Making sure that when you post the text on your site that it's legible, even though it looks fantastic but you can't actually read what's going on, that kind of hampers people's ability to access your content. And so, assistive technologies. So there's a lot of different things that people use to access your site. Screen readers, obviously the most common, or most commonly talked about, but there's other things like Braille displays, text-to-speech, voice browsers, voice recognition, keyboard navigation. It might sound like there's so many things that I have to take account for, but it's actually not that hard to keep these things in mind. So please don't feel overwhelmed or anything by, oh my God, so many things. So screen readers, for example, again, they're more commonly talked about but these are four examples that you guys can use and look at if you want to feel what it feels like to use this kind of technology. So when you are creating a site, you can say, all right, well, does it actually make sense when other people are accessing the site? Even though it makes sense to you, just make sure that it makes sense to other people. One thing to keep in mind though, the NVDA reader for Microsoft doesn't currently work all that well with Microsoft 10 yet. They are in the process of updating it and making sure that it works, but if you are using Microsoft or Windows 10, keep that in mind. So what actually makes a website accessible and how do you know if yours is accessible? I've talked about all the different types of disabilities but now how to actually implement that. So the thing about a website accessibility is that it's not just for thinking, oh, okay, it's just for disabled people. It's you're taking into account so many different things. So you're creating an intuitive navigation. You're creating properly labeled links and images and user-friendly design. All of these things mean that users are gonna spend more time on your site. They're gonna spend more time consuming your content, more time engaging with your brand. These are most likely things that you want people to be doing when they're visiting your site. So there's a lot of different things that you can do to keep all of the previously said information in mind when creating sites. Keeping in mind the content formats, like I had mentioned, if you're using videos, try to use captioning or if you're using text, try to make sure that there's another way to like it's easily readable if someone is using a screen reader. For a presentation, one of the most common things is if you're thinking about colorblindness, for example, making sure that there is a contrast between your foreground and your background because hopefully the things in your foreground are pretty important and if those aren't legible in black and white, for example, then that's bad. And then other things, user interaction, how are people engaging with their site if it's not just a keyboard or a mouse? And design solutions, just making sure that it's really nice having a beautiful site. That's a pretty big goal for most people. But making sure that that beautiful site is actually getting the point across of what you're doing. If you have a portfolio site, then of course it makes sense that you're gonna be showing off your photographs or your videos or whatever your portfolio consists of. But you're also making sure that other people can still know what's going on. So these are some fairly commonly used evaluation tools. I have the slides up online. So all of these are links to their respective websites if you are interested in learning more about these different tools. Chrome Spectrum was the one that I had mentioned earlier about colorblindness and yeah, you guys can read what's on the screen. So implementation. There's a awesome or not awesome depending on how you look at it, cycle of how web accessibility standards become more well used. So there's content. If you have the authoring tools to provide better content and better usability to the visitors for your site, then you're going to use those tools specifically to provide that content. Once people start using those tools, then developers gonna say, okay, well I need to make these tools better and more common and easier to use. So then they make tools better, which means that people will use the tools. See where I'm going with this? Yes, nodding of head, thumbs up, nothing. Okay. So these are just things to keep in mind that even when starting out, it is a lot of stuff that you're thrown, but it isn't too complicated. The thing about content is that there's two different sides to things. So for the developers, they're thinking about the evaluation tools and the authoring tools. How do you actually make the content be accessible? And then how do you evaluate that the content that you have currently is accessible? But for the user side, how are they actually accessing this content? Are they using just a normal internet browser on their desktop? Or are they using a tiny little mobile phone screen? All of these things come into play. So why should we care about web accessibility? There's so many benefits for others and it's not, like I had said before, it's not just about people with disabilities, but there's so many people that access the web on mobile phones now. There's digital divide issues, older users that may not necessarily access the web in the same way that a 20 year old would. Or even, I have cousins that are 12 and they can do more internet things than I can at this point. And also just keeping in mind that it's not just people that have a really fast internet connection, it's also people that are in other countries that don't have the same access to the internet speeds that we have. So when you are making these sites, if you have a lot of JavaScript going on, that make sure that it's not just killing your site speed because you have all these different cool, snazzy things that are great, except for, you know, they're sometimes not. So what's in it for me? Now I've talked about all the other people. Now you're building a site and why should you care? So it doesn't matter if your site is accessible and beautiful and wonderful if no one can find it, right? So we're going back to the slide from earlier. It's not just about web accessibility standards, but it also helps people find your site. So we're going to go a little technical, but have you guys heard of alt tags? Yeah, okay, not going too deep, but for example, so say you have this picture of the sky holding a bundle of grapes, you can say, you know, image source, img underscore three, four, five, seven, nine, right? And that tells the web absolutely nothing about what's on your screen. And that also tells if somebody's using a screen reader, for example, that doesn't tell them anything about what's actually on the screen. But if you use an actual image source and an actual alt tag that does describe what's on the screen, that's a pretty big thing because search engines see what's on your screen. The other thing while keeping that in mind is that if you are using alt tags and you are using these image source names, to make sure that you are actually describing what is on the screen. So if you're a law firm, don't say, you know, ACME agency for, I don't know, for copyright prevention, for a guy holding a bundle of grapes because that's not true. Please don't do that. I have, I've had clients that have done that. That's crazy. So please don't do that. Make sure that you're actually using the alt tags to describe what's on the screen. If you happen to be ACME agency for wineries, it's a little gray area. But unless you are specifically representing, you know, grape, the grape industry, please don't just say, oh, my business, that's so awesome and amazing, has everything to do with a guy holding a bundle of grapes. All right, so this is a fairly long list. It's more for the sake of if people are interested in digging deeper into what I'm talking about. You can look at the slides and say, okay, there's a bunch of words on this particular slide. So going, trying to go quickly. Content is number one, like no matter what you're doing, in terms of SEO especially, is that if you are, if you're writing relevant content, that's gonna be very important to what you're doing. But there are other things that you can do to help both the accessibility side and the SEO side. So things like providing clear and proper heading structure, avoiding empty headings, providing descriptive links, and all of those sorts of things. And there's a lot of things on here, but I just, again, wanted you guys to know that there are lots of different things to do, and it's not necessarily that you have to suddenly implement 17 different things and go home or go to your hotel room and say, ah, I gotta do this to my site. But even doing a couple of these things does help. So here are some resources to consider. These are a lot of great organizations and websites that have put together different toolkits and some long, some short, just introducing you to web accessibility and to all the different standards because there are a lot of technical things. But also just introducing all of the different, what's going on, what can you do, how can I help? It's not just about if you're building a site, but maybe you're wanting to get into theme development. These can help with that as well. So I wanna leave you guys with a final thought is that you're all building these beautiful, amazing sites that you want people to see, hopefully. But the thing about web accessibility is that if you build this amazing site, but people can't actually see it or access it in the way that you mean, then it's like that beautiful picture that suddenly becomes this, you know, it's not so beautiful anymore and it's not accessible. So thinking about that, because you're not the only one that, you know, I don't think will gush about your dog or talk about crocheting or, you know, whatever it is that you're interested in, you're not the only one. So if you wanna share your views or your content with the world, try to make sure that other people can also access it. And that's it. Thank you guys. If you have any questions, feel free to ask or grab me afterwards too. Yeah, that's my website. Okay, and that's where the slides are on the website and they're also on Twitter. So if you just do twitter.com forward slash Nancy Thonkey, they're also there. They're the latest tweet in my timeline. Yeah, there's a post. I posted it on my website and I also tweeted about it. It should have gone live about five minutes before the talk started, so I'm hoping everything went well. Oh, good, awesome. Thank you guys. So yeah.