 one Mississippi, two Mississippi, three Mississippi, four Mississippi, five Mississippi. If you would please close your eyes. What was the color of the fish that's on my hat? How about the accent color of my shoelaces? What's up on the screen? Now if you open your eyes I'm in a different place. Now imagine someone coming to your website, whether you're a developer, a designer, a writer, and things move around. You know we tend to hide menus, have things push around on sliders, but for someone that can't see or has a disability, do we really care? Here's some statistics and we always hear one in five Americans has a disability, 43 million total, one in 18, 315 million, 4.3 percent of the nation's population, the world's population has a disability. Today we're going to talk about accessibility from a designer standpoint. Why do we neglect 20% of our audience? Do you think our clients want one fifth less money? Is it our egos? We're all experts after all. If you look around there's been some incredibly talented people speaking today. So we're paid to know the answers. But why do we neglect a certain audience? At the beginning of this presentation I've seen statistics that in the first 30 seconds that someone's on your website they make a decision whether they're going to leave or click through. So imagine how uncomfortable you felt when I asked you to close your eyes and describe things that I gave you five seconds to see. Imagine someone that can't see permanently or doesn't have the use of their limbs. We have to consider those people. So today in the next 50 minutes that we have together I'm going to try to change your mindset a little bit. I'm going to have you, by the end of this session I want you to be an advocate. I want you to be that person in the room that fights for accessibility. I'm a statistic after all. About a year ago I had two blocked arteries. I had a heart event. When I willed out of the hospital in a wheelchair and I went home the first three days I was bedridden. After they opened my arteries it was like I was dragged down the street by a herd of elephants. I had no energy. I bled easily. I bruised easily. And if I got up too fast I would pass out. So the first few days when I was in bed I said hmm let me do an experiment. I said I picked up my laptop. I said let me order groceries. I went oh by the way my slides are going to be here. You can find me anywhere. Joe Simpson Jr. Gmail or Facebook etc etc. I'm going to make the slide deck available afterwards as well. So I decided to order groceries. After all they all say we can deliver it to your home. I pulled up the website. I hit the tab key. Nothing happened. That's one quick thing that you can always do to immediately find out if a site is addressing accessibility issues. Each website you're supposed to be able to access it with a keyboard. So they immediately failed. I love it. I said hey let me try to order some food from my favorite Vietnamese restaurant. A couple of years earlier I tore the ligaments in my wrist and by the way I'm not always this sick. I tore the ligaments in my wrist and I couldn't use my hand. That restaurant only had PDF menus so if I needed to pinch and zoom I couldn't. That was inaccessible. I was also driving around this time. Eventually I got back into the flow of things. I took a brief leap of absence but during that time when I was off I kept doing these little experiments. How many of us use Google Maps or in car play or something like that to get around? We use a combination of our senses to do a lot of what we achieve. When we're driving around with Google Maps we listen to some of the calls but we also look at the map because detours come up. You can't really do it without looking at it so I will cover it up and see. The point is we use a combination of our senses to access our websites. I always like to use quotes in my my presentations. This quote really stands out because it should apply to all of us. Oh it shouldn't apply to all of us but we often do this. There are no constraints on the human mind. No walls around the human spirit. No barriers to our progress except those that we ourselves erect. A lot of times we're our worst enemy. I ride a Metrolink train in every day about 50 minutes in from Santa Carita and there's a woman that I sit with each day and she boastfully told me this. She said I always use the carpool lane as a single driver. I figure the ticket that I'm going to get I'm going to pay for it in the time saved blowing through traffic. So we as designers why would we design inaccessible websites and put ourselves and our clients at risk for legal action. In 2017 you may have read that Winn Dixie a large chain was sued and they lost a court case based on the Americans with Disability Act. So you might say hey my clients aren't as big as Winn Dixie why do I need to pay attention to that. Here are some lawsuits that are either currently going on or been settled regarding accessibility and their companies. Every type of business Netflix, Hulu, Nike, Target, Dominoes, B of A, US Department of Education. If you think it can't touch you it may and this is sort of my scared straight section of the presentation. This may not even work but just think if large companies are being sued for their accessibility couldn't it touch you. To give you a little background on the rules and guidelines I'm just going to give you a brief history. The WCAG 2.1 which you may know about these guidelines specify how you can make your content accessible especially for people with disabilities but also using all user agents. It's not limited to devices every type of device including mobile phones. The history of the guidelines it was first created in 1999 updated in 2008 and as recently as last summer it was updated to 2.1. For me I worked for a government agency and if you receive federal funds for your company you have to also make sure that your site complies with section 508. In January of this year they updated their rules to be more in line with WCAG 2.1 so both of them are similarly as difficult, well I shouldn't say as difficult, they're astringent in terms of standards that you need to meet to make sure that your site is accessible. I also have what I call unquotes in this presentation. These are actual things that people said to me during a project that I was working on with. I was working with a designer. I originally took it usually when I start on a project I take a look at their comps, their color color studies and I immediately go check them to make sure that the color contrast is good. When I said hey your colors don't really work in terms of accessibility we're a government agency yada yada yada. She said we really like our brand colors that we use. They're much more lively than the darker ones that you suggest. We're gonna talk a little bit about color. You may not be football fans but a couple of years ago in 2015 this happened. Can anyone sort of imagine where I'm gonna go with this? I can imagine the marketing office in New York for an NFL office. There was a young person, I shouldn't say young person, I'm gonna say a goober that said hey I have a great idea. Why don't we make the NFL teams uniforms all one solid color? Very vivid, very lively, hasn't been done before. We'll sell a million jerseys and they went around the room and each person was like yes let's do it tomorrow and this happened. What I'm gonna do now I'm gonna pull up a simulator that simulates color blindness to show you what someone with color blindness may have seen that night and just imagine this is a still image. What they saw on Thursday night football were tiny images running across the screen. Okay and this is a simulator. So all the colors look very similar. This turned into a viral firestorm for the NFL. They got a lot of criticism and I think last week they announced that they were gonna end color rush uniforms. Why would someone make the decision like that? One in 12 men are colorblind, I think one in 200 women are. So they immediately excluded those people with the hopes of selling uniforms. Here are some rules when you when you're thinking about color and again this presentation is really more content focused. A lot of us in addition to building websites we produce a lot of content that goes up or we have people that do that for us and again by adding this to your toolkit you can add value to what you offer your customers which your customers can then turn around and sell to their potential buyers. Color shouldn't be the only way that you use to convey information on your website. It's important that your foreground and background color combinations provide sufficient color contrast and that's probably the biggest thing that you can fix and control and impact accessibility. Here's our first example and during this session I'm gonna put a few things up and I'd like for you to give me your input on it. Looking at this screen and and well I was doing the research for this presentation I said hey let's look up live lively color websites. There was actually inspiration a web design inspiration site called all wards and I started flicking through the pages and I saw this and I guess the team at that website decided this website was awesome. So when you look at this in terms of colors how many people just to show a hands think that this is accessible this color combination. All right we're gonna jump out and take a look and during the course of the presentation I'm also gonna share some tools with you that you can quickly find. I went through and popped in this is contrast ratio.com. You can put in the foreground and background colors and it tells you if it meets the ratio needed. So as you can see it's warm which means it's close but it fails and you can also switch colors. So this is a great way I would say use this bookmark and you can quickly check the color palettes of your customer. So obviously although it was a winner it was a loser. Right here again are some color color contrast testing tools. There's also a color color contrast analyzer for Google Chrome. That one's a little bugger. I tested this very page with that tool and it and it passed. So anyway be a little cautious using that one but the top two are great for that. Here's another comment or unquote. We have a very limited audience in mind for this website and our design container caters to that specific group. They said that when I said hey you know you really should design for mobile backwards. They wanted to only design a desktop website. Now we're gonna talk a little bit about content. That image by the way I'll just jump back relates to structure and patterns. When you're working to make your site accessible you're creating patterns that a screen reader or a user of a screen reader gets familiar with as they work through your website. We're going to focus on headings, tables, things of that nature in this demo here. Symatic HTML is the structure of your web pages and creating it in a way that a screen reader can easily access and work its way through. This is the WordPress.org site and as you can see we have a menu, buttons, headings. Here you work your way down and now let's just take a look at a sample of what the screen reader might see. So you're a person that can't see. It's going to go through your page a good site. When you hit the tab it allows you to skip the menu because again a menu if you have a really like some menus are very complicated and can you imagine a screen reader having to go through a menu on every single page it gets to? Another rule that you should always incorporate is making sure you have a skip navigation part of portion in your code. It's going to look at it for h1s. You should only have one h1 per page and then it'll work through the h2s on the page. What this does is mimic what we as folks with multiple senses we tend to we get an article in our email for example. So we recommended it to us. We'll briefly look at the the subject line. We'll say hey we'll pull it up if that if the subject interests us we'll pull it up we'll give it a quick scan. We'll say hey maybe that image looks good all that headline looks good and then we decide whether we're going to go forward or not. Someone with disabilities does basically the same thing. The screen reader allows them to pull out the main headings take a quick look and decide whether you're going to go forward with it or not. These are some tags that are important in terms of semantic HTML. Certain tags provide descriptions and definitions. Header, nav, main, aside and footer talks about the pages structure. Tags like h1 down through h6 they provide additional meaning or they also provide a level of importance or priority for the person that's taking a look at that. Then there's also tags that cause interaction. I've also seen coders that drop a lot of spans in or a lot of divs. A lot of page builders drop millions of divs into your HTML. That's not really a good practice because the screen reader doesn't really provide any information. In terms of your content I would say make sure that you write succinctly. Earlier in the day a gentleman talked about using Grammarly. Grammarly is great. Also use Yoast. Someone talked about that earlier in the 39 things that you should do with your WordPress site. Those things teach you to write a compliance slug. All these things also help your page rank better. Why wouldn't you do that? We all want our pages to rank higher in SEO and also by doing that we make it more accessible. I mentioned a couple seconds ago one h1 per page. Also I've seen in the past for example we had a CSS person that designed two tags that were basically the same. The only thing that was different was the line spacing below it or the paragraph spacing below. A lot of people on our team used an h3 instead of the h2. You don't want to go out of order really when you're structuring your content. Just work through and be consistent with what you do. Here's a screenshot of the Yoast plugin. The great thing about it, it creates an SEO friendly title. It also goes through and either it gives you red, yellow or green based on how close to making your site really SEO friendly. It also talks about readability. If you write to a perfect audience you would again improve your page rank. A lot of folks tend to write on and on and on. We're all great writers. We want people to know how creative we are but we need to write more succinctly for people that want to skim and scan your content. Here's an example of good SEO page titles. Again you want to go from specific to general. Most themes that meet the accessibility guidelines audit put the specific information on the left and your website name on the right. Make sure you look for that. In this case the page title is Bass Fishing Secrets and the website title is Castec Tech and Tackle. Again you work in the same manner for all your pages and again this helps you rank better because that's the first thing that your screen reader sees. In terms of your hyperlinks this is a thing that drives me wild because this is a constant fight at our job. Our marketing folks they go out and write things or for example in the WordPress environment if you're using a blog and you have an excerpt you get to read more. You need to avoid that. You need to avoid click here, download, continue reading. These things are absolutely meaningless for a screen reader user. You need to use meaningful link text and a little later on in this presentation I'm going to show you a plugin that will go in it will grab your page title and substitute it for the read more because you want your hyperlinks to have meaning. So someone with a screen reader will understand what they're going to get when they click on that link. What do you see when you see this page and again because it's on screen you might not get everything but there's a couple of phrases abstract impressionism and blindspotting that are in a cool cool gray a 666. Those are links so someone with the screen reader will see an entire page of black text and have no idea where the links are. What's the simple solution for that? Exactly. For some reason that's a stake in a vampire's heart for a designer to underline text. Please that's so simple. Just do it. You can also make the links bold for even more of an impact. So again when someone can't see color and they look at the page they'll see a difference between the abstract impressionist and text and the rest of the text. Can you also add a description tag? You can. I mean that's overkill but you can do that. That's what I had to do. I did an idiot site and we had to put in every link Yeah and what you can do also that I'm going to have a couple of testing tools you can run a test. I mean sometimes it's over and we're going to have another exercise in a second that's going to put you to the test or something like that because sometimes you don't want to overkill because again put yourself in their situation. How often do you want to read all that extra stuff when you're looking for something specific? You're on to the next website. Now we're going to talk a little bit about media. Here's our next example. One of my favorite authors. Imagine the first paragraph underneath the photo and then we're going to take a look. It's a multiple choice quiz. Which of the following four would be the proper alt tag for that image? This image is not a link. It's just a basic photo. Would it be A? Image of Zornio Hirsten, B? Zornio Hirsten was reintroduced by Alex Walker. An empty alt tag image will suffice or just an A. Someone said A. Tell me why. Did anyone say B? Why B? Anyone said C? And D. If you selected D, you're correct. For A, too much information. Someone with the screen reader already knows by the tag that an image is there. With each image you want to decide whether the image is functional or just decorative. And that will sort of dictate what you put in there. But again, just by reading the text, you have no idea. There's no connection between the two. You want the context of what the caption is in relation to the photo. And with C, we're going to get to that in a minute. D is the correct answer because it's just a photo of her. Yes? It depends on what the caption is. And for each image and the context of the image, the context of the text around it, excuse me. No, you don't want to repeat alt tags. Yeah, you want to be specific. All right. Here's the second one. This is the bonus question. This time, the image is a link and also beneath her name is a link. So with those two factors in mind, which one is the appropriate answer? Would it be A, an empty alt tag attribute? We'll suffice. B, Wikipedia entry for Zora Neuer-Hurston. C, read more. That's not the answer. Or D, Zora Neuer-Hurston. It's a tongue twister. B, A. Who said that? Why do you feel that way, Joe? Not necessarily. In this case, it's an empty because this, the photo is a link and it has a function. The text below has a link and it tells you what the link is. So you don't, yes. And it tells you who it is. And it also, it tells you what the function of the link is. So again, you don't want to give them too much. And again, this is very basic. These are all on, I think, the web aim page. They have a whole bunch of these tests for you to go through. And I would recommend if you, when you grab the slide deck, just go in and do some of those tests and you'll be amazed. It'll help you write your captions for your photos. Because again, I was in the same mindset. I need to be as thorough as possible. Again, no one knows what they're going to get on the other end. But again, you're telling them what the function of the link is in relation to the photo. And then again, we just talked about this. What's the purpose of the visual? Is there a better way to convey the purpose? Which parts of the visual are decorative, informational or functional? Now we're going to look at another type of content. A complex image or infographic. All right. What's the problem with this? A colorblind person would see this. So it's all the same shape, all the same color. This, you're jumping ahead, but that's perfect. You're going to get a hat. I don't know if you saw my Twitter feed. You're going to get a hat. All right. So to solve this problem, simply change the shapes for each line. You can also go the extra mile. Again, in our office, we deal with a lot of maps, with a lot of complex information. The shapes will work, but what will be even better? You can add description, a legend. What do each of those points mean with a company in text? All right. Now we're going to sort of move our way towards WordPress. As you can see, themes are sort of our clothes for our websites. They present what we want to present to our customers and our clients. I'm not sure if you know WordPress offers accessible ready themes. These can be the basis of what you build. And it's an optional stage. When you submit a theme for review with WordPress.org, they'll also do this optional series of testing to see if it's accessible. If it is, you'll get the accessible ready tag. This is what they look for, and this is what's required. At the top of the presentation, I mentioned that I went to the grocery store site and hit the tab and nothing happened. Your site has to be accessible for a keyboard user. It has to have the skip link. I'm not going to go into each of these things, but we've talked about a few of these things already in terms of color contrast. A lot of these things have to be built in in order for it to pass. Now how do you find those? On.com, if you click on the feature, search by feature, it'll pop down a box that says the very first item is accessible ready. Now the thing that's bad, and what I'm standing here before you today to ask, I think there's over 6,000 themes in the repository. There's only 34 accessible ready on.com. But again, these are starting points that you can build your content with or your projects with on.org. I did the same thing. If you click on the filter box in the center column, there's an accessible ready checkbox, and it'll bring back the 123 themes on.org that are accessible ready. Here in terms of plugins, if you need help with that. Again, the great thing is that there are a whole bunch of tools out there that you can use to quickly go and do some basic testing to give yourself a bit of peace of mind in relation to accessibility. Probably the most popular is WP Accessibility by Joseph Dolson. He also made Contact Form 7 plugin. It's a riff on the actual Contact Form plugin where it's an accessible form. Here's some of the features that you'll find very beneficial. And this is just a few of the many. It puts in, it requires that you add an Alt-Tag to your images. How many of us just hit the upload button and drop it in and keep on rolling? This plugin will force you to use an Alt-Tag. It'll also, and I mentioned earlier, it'll grab the title of your page, your post title, and drop it in the Read More area to solve that problem. It also adds standard form fields where they're missing. It also provides an outline for the focus state. And I didn't really talk about that, and I don't know if I have an example, but if you're hitting the tab, someone with a disability, it highlights there's an active state around the buttons. And that's built into the accessibility-ready themes as well. You want to show color contrast between, it can also test for that inside of the plugin. So again, I would say if you're not using this, you might want to give it a try. Also, a leader in the WordPress space in terms of accessibility is Rachel Cherry. She has a plugin also. It's Wally, and she also puts on WP Campus. And she also has a page of accessibility resources. And it's a quick click-through to get a lot of resources to help you make your site successful. If you want to give back, and the reason I'm standing before you today is I got a second chance at life, and I said, hey, I'm going to go out and do the things I wanted to do. I want to do the things that I love. And so I'm standing for you today because I feel passionate about accessibility. But if you want to go that next step and give back, you can always volunteer to help make WordPress successful. This is a URL. You have a Slack channel. They're always working on things to make the core better. And during the Gutenberg presentation, he mentioned that they also have an accessibility team that's contributing there. So it's a place that needs help. Imagine as we transition to Gutenberg, how many themes are going to be updated to be accessible? It's a great opportunity to jump in and help. And again, they have a blog. They give you updates on what's going on. And again, they have a Slack channel. It also has an accessibility handbook. It goes through a lot of the stuff that I talked about today in more detail. But again, if you make small changes, you can make drastic improvements on your website. So today, as I finish, here's some takeaways. You can add value to the services that you provide. And I think in the price value presentation today, how he showed basic up to premium, you're adding to the values that you can provide your customers. Hey, I'm going to make sure that your site performs better on accessibility. When it's semantic, it'll load faster. You can say, hey, we're going to make your website load faster. These are things that you can add to your toolkit to raise your value as well. Again, writes succinctly and makes sure it's SEO friendly. Your pages will rank higher. Design a user experience where the color isn't an issue. Again, a lot of times it's a tussle with designer. It's an ego battle. I'm not there to fight you because you know what you're talking about. There's a law. Let's comply with that. It's sort of like the foundation of your house. Everyone needs a foundation. But what you put on top of that can be very different. The foundation of a good website, in my opinion, is good accessibility. And what I really want to happen today, I want you to be that person in the room. Not unlike the person that was at the NFL offices who didn't speak up about color contrast issues and came out with the color rest uniform. With this bit of knowledge that I share with you today, advocate for accessibility when you're in a meeting with your client. If you hear something that's going to happen on your project that's not accessible, speak up. And I'll leave you with this. Don't expect to see change if you don't make one. I'm Joe Simpson. You can find our meetup at any of these also. We're just north of the city. These are my slides. Thank you. All right. Oh, sorry. I'll also tweet it out and it'll also be on the work. Yes, question. The question was, there's markup that is hidden by CSS. Is that poor markup? No. Are they ARIA labels? Or I mean, I think labels in a form is always good. Yes, that's fine. Because the screen reader is reading the code. It's not looking at your page or the person can't see your page. They're reading through the tags and making their way through your form. So when they get to that first form field and it says name, that's good. When it jumps to the next one address. So I think you're good. Yes. Yes. At the top of the slide deck, accessibility works down through all the devices. So if your site is responsive and it works, I mean, if it passes the test, I think there's also some mobility guidelines that are probably on the website. I think there's like 66 checkpoints. I would just confirm there, but your site needs to be accessible from a mobile standpoint too. So for example, if someone has a disability and there comes to your website on a phone and it doesn't work, you're still going to get it. So it needs to be accessible on a mobile device. Yes. I had a number of clients right now that are being threatened with lawsuits for not being ADA compliant. And what's the measurement? I know that there's a particular tool I use to run through there and it got a 85% complaint. What is the standardized industry standard tool to make it legally compliant? Well, I don't think there's a tool that's a standard. There's a number of different ways for you to validate it. Well, look at the guidelines. You can be double A or triple A. Triple A is a lot tougher. That means you meet all 66 standards that are set forth. And it breaks it down in the code. I can't show it to you, but it's one of the links in the slide. Like at the end, I have a few slide links as well. So make sure you download it. But if you go through each of the checkpoints, you do your testing. It should work. Also, at our agency, since we're a government agency, we have an accessibility committee. That's a great place to grab people to do user testing. Testing is always important. Using the tool is always important. And you could work through things to get your site accessible. You have to go through the guidelines. You have to meet the guidelines. And it's a number of different tests. Well, like I said, there's a tool that'll test. It'll give you feedback. It'll say, hey, your images are fine. Your links are fine. But you need to correct your form. Like, for instance, uncertain things. Yes. Yeah, and with the agency I worked for, we're a government agency. We were deemed for accessibility. And they said, hey, we want to make sure your writing information is semantic and your PDFs are compliant. And they gave us a certain amount of time to do it. And so we made sure we went out, brought in an agency to help make our HTML compliant. And we had a series of things that we also got from our consultant to make sure that we went through these steps every time we did updates on our PDF. So you'll get specifics on what you need to do. But again, like the gentleman said, there's various things that you have to do to meet it. Any other? Hey, Alex. Thank you. OK. How can we gain empathy for our accessible, our disabled users using websites? Again, it's about testing. Again, like when I was off and I had to, and I did those trials myself, just think when you leave here today, then very next site you pull up on your laptop, hit the tab key. You become more aware just by doing that. The next time you're designing something and you receive a color ballot, go over to the color contrast analyzer and check it. That's the only way we can gain empathy. Because eventually as we get older, like for me, I was temporarily disabled and that was a term by the state of California. I was unable to do my job for a certain amount of time. A lot of times we don't do things until we become that person. So I'm just saying, I hope after hearing this, and there's a few small things that you can do to tweak your process, please do. Yes. Oh, sure. And there's a screen reader built into your Apple. I don't know. Yep. And you can enable that and then it will. I don't think so. I don't think so. Okay. I don't know how we're doing on time, but Lara, did you have a... I'm sorry, repeat. There was too much noise at the door. I think for ARIA, I mean, again, you need to be succinct in what you're describing. I think we've seen some examples earlier where we tend to want to over-explain something. I think just try to be as brief and succinct as possible in what you're using in your tags, because that's what's going to be read back. I would say user testing is probably the best way to figure out whether your ARIA tags are succinct enough or not. I'm not sure if this helps, but... Oh, nice. All right, thank you. So, inclusive components and... Accessibility compliance cards. Yes, nutrition cards. All right. In the back, I think what you're describing was the web maybe 10 years ago. A while back, we would have a text-only version of our site and a regular version, but now with responsive websites, I mean, you can build a website that does everything you need. So why would you... That's sort of separating... Oops. That's sort of marginalizing a different audience when you don't really have to... You have the tools to create something. I'm not sure if that sort of addresses it, but... Well, again, I think that's not a good practice. I mean, I think... I'll give you this example. Imagine my wife works at the school with disabled kids. She works with the special needs kids. Imagine taking your kid to school on the first day of school, and she's not allowed to attend class. They want her to go to a different school. Our education system's about including kids with special needs and the normal flow of education, because it's more beneficial. To me, it seems like more effort to make a second... You sort of giving them something else that's not the same experience. In the Winn-Dixie example that I stated earlier, someone that was disabled couldn't do what someone that was cited could do on the same website, and there was no other way for them to do it. I think you're getting into tricky waters when you're separating and doing two different things for different audiences. Okay, any other questions? All right. Well, thanks for coming. Enjoy the rest of the week. Make sure you come tomorrow. Both days, hashtag.