 the beginning. Hi, I'm Nancy. This talk is going to be about web accessibility. Why you should care even if you don't necessarily care about web accessibility. So, all right. So this is me. Just a really quick slide info about me. I live here in Atlanta. I actually live just like a mile and a half away from here. And I have two dogs. I really like photography and videography. That's what I'm really into. I have a production company called misfit ideas. That's the logo. So I have to show it off. And I'm also starting on Monday morning with automatic, which is the builder of WordPress.com. Super excited and kind of terrified. But we'll see how it goes. And I'm going to be working with Jetpack. So if you guys have Jetpack questions starting Monday, totally feel free to say hi. Until then, don't know. All right. So the power of the web in its universality, accessed by everyone regardless of disability is an essential aspect. So Tim Berners-Lee is the guy that created the world wide web. He's a little important. And he talks about accessibility even when he's talking about the world wide web in general, right? So the reason that accessibility can be and is important. Intuitive navigation. That's something that everyone should be striving for for their websites, right? If someone comes to your site, they should be able to figure out fairly easily how to get around your site. If they can't figure that out, they're not going to stay for very long. The next part. Poorly labeled links and images. If you're just using, for example, a lot of people use click here as their link. While it's great to point out that yes, one should click here to access the link, it's a lot better if you guys use the link language. Like if you're going to link to a picture of a dog, say click on or here's this amazing picture of my dog, right? Does that make sense? And then the final thing is user friendly design aesthetics. Make sure that it's usable. That it's not just so much JavaScript everywhere that people are like, oh my God, what do I click on first? Where do I go? And if you just follow these really basic guidelines, then people are going to be more willing to actually interact with your content. Stay on your site. Go on your site. Give you higher click rates, you know? This is all good things. So in terms of accessibility, there's 20 million blind adults in the U.S., right? That's a fairly large number. 10% of them use screen readers. Screen readers are, depending on the type of technology you're using, even Microsoft and Firefox and Mozilla, Chrome also provide different screen readers. So when you're on a site and if you are hard of seeing, they can read the site out to you. The reason that all of the other things that I mentioned before are important is if it's all gobbly gook everywhere, the screen reader is just going to read what it sees, right? So if you have just a bunch of images everywhere and there isn't any sort of rhyme to your reason, it's just going to read it, and people are going to be very confused by what is going on in the site. So, yeah. All right. So why care about web accessibility in the first place? 20 million is still out of a 300 million person population. 20 million isn't that large of a number. But actually, government contracts, governments that are looking to build sites, they're becoming a lot more aware about user accessibility and are wanting their sites that are built for them to conform to these standards. Also, a lot more companies are becoming aware that user accessibility is actually kind of important. Even if it's not for screen readers, it's for just making your site more pleasing to access, right? You guys are all giving me blank stares, so I'm a little terrified that I'm not making sense. Good? Good so far? Okay. All right. So what makes a website accessible and how can you know if yours is accessible? There's a couple of different things that you guys should be aware of. Types of content, size and complexity of your site, development tools and the environment that your site is being built. So these are the main types of disabilities that are generally considered the main types of disabilities. Auditory, cognitive, physical and visual. So there's the really common ones like color blindness. Color blindness is, a lot of people don't think about it very much, but it's actually really prevalent. People like, even if it's, so this goes into color theory, but having colors that are too close in terms, in just, if you're looking at like black and white, right? Like if you print out something and it was in color, but now you're looking at it in black and white and sometimes everything sort of just merges together because the colors are too similar, too close to one another, that's something to keep in mind. Because if you have, if you're using red, for example, to say look at this awesome sale that I'm having on my site and you have it in red, if you're not using anything else to notify the user or the viewer that there is something that you should be paying attention to if they're colorblind, red is a very common form of color blindness, especially for men. So if they don't see it and any other shape other than, oh, it's red font, they're not going to notice that, oh, this is important, I should pay attention to it. Does that make sense? Yeah? Okay. And then obviously with other, all the others auditory hearing, if you have videos using transcripts, providing the transcript for all the, all the different auditory stuff that you're using. For physical, I mean that's not really necessarily something that you would have control over, but making sure that something isn't just dependent on your mouse, right? Like if you're, if you move your mouse somewhere, then that's the only way that they can interact with the site, that component of the site. And then visual colorblindness is the most common, but just screen readers keeping in mind that these are different things that people are using. Alright, so these are the different types of most common assistive technologies that people use when they are disabled in any way. Braille display, screen readers, text-to-speech, voice browsers, voice recognition and keyboard navigation. These are just, I'm just throwing them out there so you guys know that these are at least some examples of what people are using and just to be mindful of that. Alright, so screen readers, those are pretty common. These are the most common ones that I've come across. There's obviously lots more. Oh, and by the way I will be putting up the slideshow on slideshare.net, so if you guys don't want to be taking notes frantically, you don't have to. So yeah, so these are just a few. Just check them out whenever you have like a minute. You don't need to like know everything about them, but just sort of understand how they're using the technology that they have to provide web access to people. And these are different ways that people with disabilities are interacting with websites. So with content formats, presentation, user interaction, design solutions, so like I'd mentioned, especially for videos, videos are becoming more and more important on the web. People are using a lot more video and a lot more images just in general rather than just using text. So whenever you're using an image, use alt tags. People always know about alt tags. Yes, it's annoying to do, but it's surprisingly important because, well, you'll see in a second, but alt tags, just remember. And then transcripts for videos and just making sure that the content is easy to see. Regardless of what it is, don't use really busy backgrounds. Make sure that everything is actually accessible and legible. Legible is the most important whenever anyone's visiting your site. And that's just good design that doesn't even have to come into web accessibility territory. Just good design is making sure that it's legible and people are not going to be frustrated when they come to visit your site. All right. So how do you know that your site is actually accessible? Like, all right, I've listened to you talk about all these thousand different things that I now have to go do. So how do I make sure that I'm actually doing them? These are a few tools. When the slide goes up, these are all linked to their respective websites for their tools. But these are different ways that you can at least quantitatively measure your site and see where it is. Please be in mind, that's why there's all these asterisks, that nothing will take take the place of common sense. So like red and green or, you know, like color and like very, very basic things. It won't make take the place of common sense. All right. So when you do this, why would you do it? And when you do it, what happens? So this is kind of, I mean, at the cycle when different website companies, builders provide tools that allow for accessibility, developers are going to use those tools because they're now available. When developers start using those tools, people start realizing, oh, wait, these are tools that I can use and start using them. And then they also now demand that their developers use the tools, right, provide them, build them into your website, which makes sure that all the websites provide, or website builders provide the tools in the first place, right? And a nice little cycle that goes on domino effect style. And this is a little bit more complicated version of the cycle. Just basically what I just said, but it also includes all the different types of technologies and how exactly the user to developer to website builder is all connected. Yes, maybe. And please feel free to ask any questions if I'm going through something too quickly, or you just don't get something. All right. So again, these are the benefits for other people, right? Like, all right, I have to build a site and I really don't, I just want people to come to my site. Why should I care about all this other stuff? So digital divide issues. The level of access for the internet across the world, while it is preferable that everyone has equal access, the level of internet access even to different people is not the same, right? If you go to India, you're not going to have the same great access to the internet everywhere as you would in Atlanta, Georgia. So making sure that your site isn't so content heavy, or so it's not requiring so much access to the internet that without it, you can't use your site, right? So mobile access is a similar thing for right now, it's about 55% of the world accesses websites through their mobile devices, their phones or tablets. So if you don't keep in mind that that is a very valid form of contact to people, and just saying, Oh, well, I'm just gonna, we're just gonna look at it on my computer. And that's gonna be great because my site's beautiful on the computer. But if you have a bunch of hover effects, that's not going to translate to, to mobile stuff, right? Because you can't really hover with your finger, at least not yet. Things like that. Older users needs old people like of all generations are using the web. So keeping in mind that making something really complicated and fancy and schmancy, right, really snazzy and cool. If it's too complicated for different different levels of users to use, then they're not going to use it. They're just going to completely blow it off and leave your site. Low literacy fluency, similar idea. Just, I mean, unless you're a PhD student writing about your your thesis, that that requires a very high level of vocabulary, right? But if you're not, if you're just doing a portfolio site, you don't need to make it that complicated. Low bandwidth connections, older technology goes back to the digital divide, right? So if you have lower bandwidth, if you have not that new of a computer that can handle all these really awesome new graphics, new infrequent users, if again, I'm just kind of beating a dead horse at this point. But if it's complicated, people aren't people are much more likely to leave it than to learn it. So what's in it for me? I'm doing all this stuff. So it's a it's a social issue. So the more actively you participate in society, the more likely you have, you know, you're going to participate in the society because you have access, right? Without that access, you're going to be you're not going to, you're not going to go to that site because you can't access it, you can't, you don't know how to use it, right? So if you're not, if you're not taking advantage of all the different types of populations to come to your site, you're, you're missing out. I mean, that's kind of a pretty big thing. If it's a portfolio site, and you're just using it to apply to colleges, then yeah, you're building it for a specific audience. But if you're trying to do something that is widespread, you want all these different types of people to access it, then you have to provide something that they can access. Makes sound so far? Yeah, okay. All right. So you've done all this stuff, web accessibility, it's awesome, it's set, you've made it amazingly accessible. So why does it matter if no one can see your site in the first place, right? So this is the big reveal. We're, you remember the first slide, right, about intuitive navigation, all these different things coming together. They mean they make sure that people will actually be in, in tune and engage with their site. So the great thing about web accessibility is that it's completely tied to SEO, which means if you use good web accessibility standards, the chances that your site is going to have much better SEO and be ranked much higher, your chances are like way higher, which is great. So even if you don't really care about web accessibility, you can still care about whether where your site ranking is, right? So if nothing else, if you don't care about anything else, you can at least care about where your site is on Google. So all tags, I'd mentioned them earlier. What we see is this great, awesome picture of grapes, right? A screen reader sees that code. So if you're just using grapes.jpg, that's fine, that's at least people know what grapes are. A lot of people will use like IMG underscore 65798. That's a great name for every, for only you, right? For no one else. So that's one thing that I really highly recommend. Alt tags, it sucks to put them in. I'm a photographer. I have a thousand pictures on my site. It sucks to put them in. But it's so, so important. Even if it's not for screen readers, it's just important for how websites are indexed by Google. If Google knows that you're putting relevant content on your site, if you're talking about grapes and you have an image of grapes, then Google will know, oh, okay, this person is doing like a really good job. They're providing all this great content. Obviously, grapes is a very minor example, but same idea. So ultimately for SEO, one thing to just, I killed the mic. I'm sorry. My bad. Sorry, guys. I think maybe, maybe we'll see. All right. Sorry about that. Labs and I, we're not friends. All right. So as I was saying, in terms of SEO, the number one, number one, number one, number one, so number one thing is content. It doesn't matter how well you have, how good your alt tags are, if your content isn't good. If you're not putting in relevant content, it doesn't matter how good your transcripts on your videos are, your alt tags, the fact that you did really good color balancing. None of that matters before content. But once you have your content, here is a really long list of stuff that you can do. I won't go through all of it because I don't want your eyes to glaze over, but if you guys want to review it, once the slides, the slideshow is put up, I highly recommend going through it. Most of it is common sense, but for example, I mentioned the click here link thing, avoiding mouse-dependent interaction. Several of these things I've mentioned throughout the talk, but just as a heads up, these are things that would, that are a, good for web accessibility, which is, I think is very important, but b, even if you don't care, it's really good for your SEO. Yeah? Okay. All right. So that's, and this is the, wow, you can't see that. Okay. I will fix the link issue, but allegedly, there are links right there. These are some really great resources that I, if I gave, like, even a course, a semester long course on web accessibility, we still probably wouldn't be able to get through everything. These are some really great resources that talk about it. They have blog articles. They have just bullet list of, these are things that you should do, think about and enable, hopefully. So, yeah, they exist. They'll be on the slideshow. Don't worry about writing that down or really even bothering to take a picture, because that's just bad. But that's basically it. I kind of wanted this to be more of a discussion rather than just me talking at you guys. So, if you guys have questions, if you guys want to talk, if other people know something that I don't know, because I don't know everything, if anyone wants to just be like, you're wrong about this thing, then please tell me, because I want to know, because I don't know everything. So, yeah. So, he had asked about PDFs and opening them in new tabs. Do you mean, like, just putting a link to a PDF? That's, that's not a bad thing. I honestly don't remember to be perfectly honest on that one. So, in the case of, like, screen readers, especially, it's better to have it not open into a new window for accessibility reasons. In the case of click-through rates, a lot of people use, that's kind of where the different flies, right? Yeah, for bounce rates, because you are opening in the same tab and then they'll go away. That's a, that kind of comes into, like, a best, like, your judgment kind of question, because you kind of have to ultimately decide which one's more important at that point. You can use a link that says, you know, this is a PDF, here's a PDF about blah, a subject. So, you are at least telling them that they're going to this new thing. But at the same time, I personally use PDFs that open in new tabs, because of bounce rates, and also just to make it a bit clearer, because a lot, that's generally just best practice. But that's me. If other people recommend otherwise, please say out, shout out, and say it. But yeah. Yeah. So, are you recommending that to make a site accessible, and don't use red, and don't pay to click here, are you saying that do this on your main site, and don't have any link to a more accessible version of, say, a certain page? I mean, what are you advocating for, to put the accessibility things in mainstream? What are putting them off onto the side, so that people can actually access things, and both audiences can have a nice website, one that they can access, and one that they can actually interact with, if they are interacting with people. Because, I mean, obviously, there can be audiences for many sites that are remixed. So, what's your advocate? So, what's your stance? Do you think that putting it off on the side, take care for a reader-friendly page, is discrimination, or what do you think? I'm not even going into discrimination territory. If you look at web standards, just the W3 standards, they say that internet access and accessibility is, should be for everyone. The UN also came out, I believe it was last year, it might have been two years ago. They said that internet access for everyone is a basic human right. So, in the sense of like, if you're creating a site, I would highly recommend that you implement the accessibility standards. But, I wouldn't... Sure, so, I would not recommend having two different sites. So, a lot of them, if you read through them, are actually not any sort of invasive steps. I would highly recommend that if you are going to implement these steps, to implement them for your whole site, because it doesn't make sense that somebody can go to one page and can access the site and it's great and awesome and then the rest of the site they can't see or hear or interact with. Sure, so you don't have to do, I mean, you don't have to do any of it or even like, you can do half of it, say, right, or even one or two of them. I'm not advocating, you know, go home and change your entire site because it's not accessible, but I'm more saying, hey, keep these things in mind because you can, you can always improve your site. You can always improve the content, the way it's viewed, and just even ranking on your website for Google. You've had your hand up. So the question is, is WordPress doing these changes automatically, making sure that your site is going to look right, whether it's in Mozilla or in Opera or Chrome or anything like that, right? Yeah. So it depends. It depends on your, so WordPress.org theme builders, they, it's a free-for-all, so they're able to build their site however they want to build it. The good theme developers make sure that their site looks the same across all the different browsers and the ones that don't, don't. It, it, it, it again depends, it depends on the theme builder because every, there's not, there's not a set standard that says that you have to include XYZ pieces of information when you are selling your theme, right, saying that this is a WordPress.org enabled theme. So some of them will say, yeah, this is, this is completely compliant with all the different browsers and you don't have to worry. Some people won't. So it doesn't say. To check. It doesn't say it's friendly. You need to check it. Yeah. I, I would recommend that, yeah. It, again, it depends on the, on the different theme developers. There's some really great theme developers that have stores and they, they've kind of been in it for a while so they understand and know what to be on the lookout for. And other theme developers that are just selling one or two themes on like theme boards and they may not know that even, to know that that's an important thing to be on the lookout for. There's a couple of different ways that you can check. I'm blanking on the name of the company. Of course I would write this moment. There's a, there's different, yeah, there's different, there's different websites that allow you to check. Let me see this, this site on Mozilla and Opera and Chrome and Firefox. Yeah, browser stacks a great one. That's the one that I was trying to think of. Thank you. We've, we've used that multiple times. I used to build websites for people so I used to do this but I haven't, I don't anymore. But yeah browser stack is a great one. They, they also provide ways to, for you to just look at how your, your site looks on mobile or on a phone versus a tablet versus anything. So you can see, oh okay well this looks great on my computer screen but doesn't work so hot on my phone. Things like that. Yeah, sure. Yeah, okay so the question was about JavaScript and accessibility. So in the sense of, of JavaScript it provides all these different extra things that you can do, right? JavaScript's great. I'm, I am in no way bashing on JavaScript. But because it's extra stuff that you might not necessarily need like for example, you can put in a Pinterest widget, right? With JavaScript putting in whatever your, whatever your widget you want it to look like. While it's great that now you have a Pinterest widget it's not necessarily easy to showcase that for, for screen readers or for phones that don't necessarily don't have JavaScript enabled. It's not to say that you should just avoid JavaScript entirely it's just to use it cautiously. Does that make sense? So like if, for Pinterest it makes sense to use it because it's a widget and most people are gonna interact with your Pinterest widget if that's what your, your site's about. But putting in all those really cool awesome motion graphic effects on your site because they look cool. I guess that's the main thing. Don't just put something in just because it looks cool. Make sure that it has a use for it because that's the biggest way to make that site not as easily accessible just in the sense of just navigatable. Does that help? If somebody's using a screen reader or something like that I mean it doesn't, it doesn't necessarily follow that they're also not using JavaScript, right? No, it just, it just makes it hard like in, in a screen reader all it'll say is that there's there's JavaScript here and it's something about Pinterest, right? So it doesn't actually like read out what's in that widget or if it's a motion graphic it'll just be this graphic happened but it doesn't actually it'll say that in the screen reader because it'll go, it basically what it reads out to you is if you look at your page source except for all of that code it won't read all of the code it'll at least take out all the h1s and stuff but it, for JavaScript it'll, it'll just read what the JavaScript is because it doesn't actually say anything it's just code that runs yeah. You, you've had your hand up, yeah? Okay, someone just showed me Sensei S-E-N-S-E-I Okay. And, or you need to speak about that in relationship to WordPress? I have not ever used it. Have I used Sensei? I don't know. Wait, you're poor. Sensei, anyone have you Sensei? It's a plug-in? It's a, it's a themes plug-in for courses. Uh, not a poor? I'll tell you about it after. Okay, I will. Yeah. Can you give me some idea of what, I don't know, the avoiding mouse and the interaction? The biggest one is hover effects. So a lot of themes have some really great hover effects that if you hover over it it'll showcase another bit of information. Right? Like a, like a photo or something. If you hover over it'll say oh this person's hometown and they're Twitter and they're whatever. Things like that. Those are the most common at least. Forms and drop-downs? Yeah, do you work with them? No, so the forms and so drop-downs depending on the way that they're shown it kind of goes into that. So for example there's a lot of themes that are built that on the, on the computer they'll just be drop-downs but on your phone they'll show up as everything. Like you'll show, you'll show the entire thing or at least they'll expand if nothing else. In terms of hoverable for your computer you can't really avoid that. That's kind of best practice or common practice but that's also something that's built into the screen reader that with the menu you can read more in you can go into the child, child links. So the screen reader will read it? It'll, it'll just read it because I give up on this laugh, Mike. I'm sorry, guys. I don't even know what I'm doing but I will, I'll just stop moving. In terms of the, the screen reader when it reads the menu it'll read the whole menu it won't just read what's shown. So. I know you have to set those up so that those visual in here can, okay, what's the best way to go about that set up in a particular way or is a word doc okay? Or is a word doc also an open door for viruses? So the question was about document, documents on your site. I would highly recommend PDFs over word docs always, partially just for layout. What you see on your screen when you're looking at your word document is not necessarily what everyone sees when they look at that same word document on their screens. So just for layout sakes, if nothing else I would recommend PDFs but that's a different, it's a different, different story, sorry. So if you're going to do the official, I mean I know there's a whole way of talking about what I have to say not through anything important so that your screen reader can read the PDFs instead of you setting it up. So if you, if you're wanting to make it really simple what you can do is just make sure that everything is just one after the other rather than having two columns and like there's a little bit that's like in this one right hand widget sidebar area but then the rest is kind of like this and while it's a lot prettier to look at in terms of reading because what a screen reader does is just goes down the page unless you specify like in the code that okay this is part one this is part two this is part three otherwise it'll just go part one, part two, part three like it'll just go straight down the page. Yeah. Oh yeah. Well yeah. I mean but basically if we were to go maybe just to the first one they would have instructions look how to do that. They do yeah. So the first one the web aim has a lot of different they have blog posts that talk about different areas of accessibility they also provide different instructions how to's I believe they also have an online course I don't know if it costs anything but I believe they have one as well even just checking out W3 guidelines they're boring to read they're like it's very legalese type writing but it at least it states everything it spells everything out says this is this is what accessibility is this is how you can access it and gain it and do it on your site but yeah again I'll fix the link sorry about that guys Ability different from mobile versus web How is web accessibility? Just from the kind of what you were talking about like when you use a phone scenario it is still the same type of screen reader that's reading things So there's different there's different types of screen readers there's physical screen readers that you can use and then there's also just software screen readers like the one they're like like the ones that you use for chrome and for firebox and everything in terms of for your phone there's I had a friend in high school that was hard of seeing she was I believe she's legally blind but she could still kind of see stuff and she used different she used this device that like could read the computer out to her and you could read this was before smartphones were a really big thing could read whatever digital device out to her so I believe that a lot of people do use that in terms of phones and if you're hard of seeing and you are using screen readers it's not really more people are likely to use like a phablet or a tablet and at that point rather than deal with two different devices or at least that's been my experience when I've I've worked with it but in terms of like just web accessibility on your phone that's generally more it's not really reliant on screen readers because it's just such a small screen that people aren't likely to use it and it's not really to be perfectly honest it's not really like a market for that but does anyone else have any questions we're basically almost done but we still have maybe like five or ten minutes this one the complete list of web accessibility like I just want that is that a website for that uh there and there yeah if I can read it I would yes I will I I will just put that down sorry guys okay I will let me just do this and I can read out the site for you if you want www.w3.org forward slash wai forward slash er forward slash tools forward slash complete it's a w a here we are dot org sorry wai forward slash er it's a w3.org all right now it's white thank you guys for coming I will post them as soon as I have internet I will also tweet them out so if you I'll tweet the link out and so if you just follow or just look out for Nancy Thonkey I'll hashtag it WCATL sorry about the sound my bad