 Well hello and welcome to the accessible experience and I hope by the end of this you'll have a better understanding of how to In your design process to sort of maximize the number of people they get to enjoy your design So most of the accessibility talks and presentation that I've seen or read Usually deal with the the coding aspect of it or maybe some of the legal ramifications and have you know Following some of the guidelines on this one is primarily geared towards designers and how to design a rich Experience to maximize the number of people that will enjoy it So my name is Dan Moyard. I'm the lead front-end developer at form one And I've been working with Drupal for about six years I've been doing web development and accessibility for over ten years That's my email address D Moyard at form one comm if you need to ask me any questions I'm also you can also find me at DC Moyard pretty much anywhere on the internet. That's my Twitter handle. That's my github username. That's my jupy.org username as well So feel free to ping me if you have any questions I would do a lot of I've been involved a little bit on some of the jupy core The accessibility stuff and some of the mobile and HTML5 stuff so I have a lot of experience talking about you know Accessibility as it relates to Drupal, but this particular talk isn't necessarily about Drupal It's just about accessibility in design in general So to get started I'm going to talk about three main things today The first is I'm going to talk about the importance of accessibility You know what we do has an impact on a lot of people because of the community and how the web works You know people get connected and accessibility is a big part of that I'm also going to talk about the four main types of disabilities that we Know we have to deal with whenever we're designing and building for the web And I'm going to give you some hands-on experience of how they experience stuff When you're all I'm also going to have a couple volunteers come up to get ready Just want to try some of this stuff for yourself as well And then finally I'm going to talk about some of the specific design considerations That you really need to keep in mind during the design process to really make sure you know the Design is accessible and really stands out So first first we talk about why is accessibility so important? Well, there are three three main reasons that I like to think of and the first one Has to do with the the moral reason it's a good reason So this is a picture of my son DJ. He's 10 years old. I have three. He's the oldest and he was in fifth grade And about a month ago. He had a class project And so that the teacher you know had emailed all of this the students in the entire fifth grade thing Hey, if you're interested, you know, we would like some of the kids to interview you about your job Just want to talk about it and stuff I threw my hat in the ring and a couple of the kids ended up interviewing me about my job I There was a lot of really interesting questions, you know about like you know, what kind of education do you need to have what? You know what the starting salary One of the interesting one was Would you explain your job to me so that I can describe it to another fifth grader? Yeah, I have a hard time going to cocktail parties and explaining what a front-end developer does So But the question that really stuck out at me is one that I had never really thought about that they asked and it was this How did your job contribute to making the world better? And that really struck a cord in me because usually it's not one of something. I really necessarily think about You know Usually you get a job because you need money, you know, you need to pay the bills You need to get a have a place to stay and food and my life philosophy has always been sort of You know find something that you really enjoy doing that you can get paid at And I never really thought about you know, how what you do in your job. Can you make the world better? And although I've never really like Had thought about this question before they ask it I must have known some cautiously because right away two answers really popped up The first one is I'm really lucky to work for a company like form one Where a lot of our clients are like government organizations or nonprofits, you know And they're really trying to make a difference in the world. They're really trying to solve some of society's biggest problems You know, so for example going up, you know, I was always into Hiking and camping and paddling and you know, my mom worked for the Department of Environmental Protection And so I was always really interested in you know conservation and stuff And it was a big deal for me when I got to work on EPA gov You know to sort of help them, you know, get that message across, you know, try to You know extend their influence to what they're doing and I felt really good about that The other thing that question really popped up is Accessibility, you know, I've done a lot of accessibility to try to make things Easier for people who might have challenges to be able to interact, you know and be involved in the web and so There's a great quote by Judith Hyman at the U.S. Department of Education She said for people without disabilities technology makes things convenient For people with disabilities it makes things possible You know, I'm you know, I'm legally blind and I also have hearing impaired So I have tunnel vision so like I can look at what I'm looking at but everything else is kind of hard But I'm also night blind. So whenever the light get low It's really hard and also, you know, whenever there's really bright light I can't really see that well, you know, you know, I was thinking about, you know, a hundred years ago There's no way I could really be contributing to society like I do today You know to be able to work and sort of, you know, expand the horizon of how people interact and connect on the web with technology You know, I might have been able to You know, I probably would have been a piano player because there were a lot of blind piano players back in the day I could have done that I mean so So this is just sort of like the moral reason of why accessibility is so important, but there are others One of them is of course the legal reason, you know, it You know, in most cases, it's the law, you know, you can get sued, you know, sort of like If the carrot doesn't work, you need the big stick, you know, it's not my favorite reason But you know, it does this because you need to sometimes affect people's bottom line before they pay attention You know, so in 2006 target was sued Because you know people with screen readers couldn't, you know, use their online store at all And target ended up having to pay ten million dollars You know, and in 2010 Disney was sued because their site was inaccessible 2011 Netflix was sued And actually the cool thing about that suit is that the result was in 2014 this year is all of their content has to have closed captioning Which really helps me a lot And then the final reason I like to talk about and this is probably going to surprise quite a few of you and that is everyone is disabled So there's extremely appointment. Let me say it again. Everyone is disabled Yeah, I see some of you shaking your head. Let me explain. So first of all, normally when you think of accessibility The first thing that you talked about when you talk about what accessibility You know, the people that are completely blind, they can't see and so they use screen readers And so that's usually the first thing you have. Oh, yeah, that and that's what accessibility is But that's not it that the whole range of Sort of challenges people face. So it's not just people who are completely blind It's not the people who have low vision, you know, they may have a thing where they can kind of see but not You know, no A big challenge is this one is for those people who are sort of afflicted with that the most horrible of conditions, right? getting old Did you know when you're 40 years old? Only half of the light gets through your eye to the cornea as it did for 20 years old and For people who are 60 only 20% of the light gets through You know, and I posted a joke about maybe a year ago on Twitter how saying, you know, if I were in the future We're gonna have all of these You know, anthropologists, you know looking back and they get there What's they're gonna do is they can look at these old web design and they're gonna be able to calculate How old a web designer is by seeing how large their font is You know, but again It's not everybody. Now people slow vision. It's about I think it's about 9% of the population in America But again, that's not everybody. I know some of you still thinking I'll come on Dan. That's not everybody How many of you have Reggie and if you have a smartphone or a tablet? Yeah, pretty much everybody. This is a tech conference If you ever gone outside on a nice sunny day like here in Austin, you know You're trying to check your contact and you sometimes have a little trouble right because of the screen glare This is what we call a situational disability, you know Where something in your environment really hinders what you can do, you know Or something in like the the tools or the devices that you interact with that sort of limits what you can do I mean this had the a wide range of effect of how You know the stuff you can build to help people who are completely blind or have have people who have might vision problem Also helps you if you're outside and you can't see your screen You know, so all of these different things that you can do making things accessible They end up helping everybody it makes things a lot easier to deal with This isn't a new concept. This is actually something from It's been a while sort of like engineering design and architecture design something called universal design Here's a good quote about you that sort of explained universal design The design of products in an environment to be usable by all people to the greatest extent possible Without the need for adaptation or specialized design And the key part in there is the to greatest extent possible because it really is impossible to create A website or application that is completely a hundred percent accessible There are so many different challenges people have to get there's such a wide spectrum You know, but you want to gear towards as many as possible, you know and creating such a way that if they do have problems You know, it's coded in such a way that they can get around them rather easily So let me talk now about the the main disability type that we deal with on the web And those are vision hearing mobility and People with cognitive problem And I'll talk about them in this order for four for two reasons the first reason is I think it's usually how The order usually think of it, you know, and what this is usually the first thing you think of it people with vision problem, you know, and then Now you read the second five ways like oh, yeah, we need closed captioning for people that can't hear, you know And then maybe if you get into a little more like oh, yeah people who you know might need to use a joystick or something to People's mobility problems, you know, then finally the last sort of group you only think of are those people who have mental challenges to understanding the content The other reason I'm doing this order is because it's actually The order in which for the number of people that it affects Now it's really hard to sort of like get concrete data and statistics and accessibility But the general rule of thumb is There are more people who have low vision problems than there are people who are blind and There are more people who have hearing problems than there are people who have vision problems and There are more people who have, you know limited mobility than have hearing problems and There are more people who have cognitive issues than all of the others combined So let's take a deep dive first into vision. So these are some of the Just a few of like the vision impairments that you deal with You know, as I said before it's a wide spectrum. It's not just people who are completely blind It's low vision maybe different, you know, they might have something that affects their range of vision, you know, or, you know They have trouble seeing color, you know, or that, you know, they have light sensitivity You know, it's also for people who, you know, are situational like the screen that I mentioned before You know, or, you know, a couple years ago, I was working with a designer, you know And she'd put a whole lot of effort into sort of like getting the color perfect because the client was really picky You know, when the client calls in during the meeting, she's, you know, she's I'm really disappointed. Like I wanted the blue background. I don't want this purple You know, and we're all scratching our heads purple And it turns out, you know, the client had an uncalibrated monitor You know, something, instead of, you know, as a designer, you usually have all the latest and greatest And so you need to sort of think about all these, you know, situations people might be in Okay, now for some of the examples. So here's a screen reader example So first of all, the four main screen readers that I like to sort of talk about The easiest one, if you have a Mac, it's voiced over it. It's already built in And it's really easy to get it up and start it and running Another easy one is Chromebox. So this is an extension for the Chrome browser So it works in, you know, Windows, Linux, and Mac And they have a really excellent tutorial Follow the link on the slide It really goes through, you know, how to navigate, and it does do a really good job The one thing to keep in mind for Chromebox, though, is although it's very easy It does work differently than all the other screen readers So you're going to get slightly different on how other screen readers act But it's a really good job to sort of quickly see what some of the problem areas might be The next one is NVDA. This is actually an open source one. It's completely free They've really been doing a lot of good work, especially recently They've been really ramping up and really pushing the envelope of what screen readers can do And finally it's JAWS Which I like to think of as sort of like the Microsoft of screen readers, you know, they're kind of old, they're expensive And there's a You know, but unfortunately there are a lot of people who still have to use it Especially if they're on like old Windows machines So let's do a demo So for a demo voiceover and we're gonna take a look at this site I mean if you want to you can you know, if you're on the laptop or your phone, go to this site You can see it. And so this is Mary-Jan Voice over on Chrome March and foods ramen noodles vertical line mark an instant lunch vertical line run recipes Japanese ramen noodles vertical line mark in yakisoba window March and foods ramen noodles vertical line mark in instant lunch vertical line run recipes Japanese ramen noodles vertical line mark in yakisoba HTML content has keyboard focus And that was just a title Lang image mark and ramen noodles ramen recipes. Japanese ramen noodles length slash What's that about internal length slash? I wonder what that's about Lang image mark and ramen noodles ramen recipes Japanese ramen noodles I guess every link is about these ramen noodles length image mark and ramen noodles ramen recipes Japanese ramen noodles I think they might have hired like an SEO expert that just kind of like vomited on a page, don't you think? So, it's always good to test your site in a screen reader, just sort of like you can easily get some of these issues. Okay, so next, I'm sure a lot of you have smart phones, get them out, I'm going to give you two minutes, try to follow these steps and just try to see if you can get something like the, you know, like if you have enjoyed the talk back or the voiceover on your smart phone and just, you know, at some time just go to like a site you've worked on, you know, or other sites and just sort of browse around with these different settings and just you'll get an entirely new perspective, you know, on how you have to deal with. And not only will it help you understand, you know, having to deal with these issues on websites, lots of it comes in really handy when you're outside and it's really sunny and you can't see anything, just turn this on and it'll sort of like read back you, you know, like whatever the Google map direction might happen to be. Oh, and a word of warning, I get this talk one time and somebody came up to me after the talk and he's like, you got to help me. I don't know how to get out of this, so if you're wondering that problem, come see me afterwards and I'll try to get it sorted out for you. I guess some of you are stuck already. Okay, you got about 20 seconds. You know, please feel free, you know, after the conference or later, you know, just sort of go ahead and, you know, play around with this. Okay, so next, what I want to talk about is sort of like some of the color contrasts, especially people who have photophobia. So, photophobia is not, you know, being deathly afraid of light. It's actually people who are very sensitive to light and people who have low vision problems tend to have photophobia more often in the average population. And this is a great sort of quote that I read, you know, probably, I don't know, maybe six or seven years ago on the web of describing how it is for some of the photophobia to read. And he said, black text on white, like looking at ants on a light bulb. You know, so there had been a lot of research, you know, to say, you know, usually when you think of, you know, like the color contrast, the text and the background, people usually fall into two categories. Either they prefer the dark text of a light background or they prefer the light text over a dark background. You know, and there's plenty more people prefer the dark text of a light background. And there's been some studies, there were some older studies that said, you know, it's better to have the dark text over the light background. But more recent studies have actually shown that it's not really, doesn't really make a difference, you know, whether it's dark on white or white on dark. You know, the key thing is the luminance, the contrast. It's not necessarily what those colors are. You know, but do keep in mind, if you are designing something with like a white background, try to reduce the contrast a bit, you know, so it's not completely white. It's maybe a little bit of an off-white. So that really cuts down on the glare of people with photophobia. Okay, here I come to the magic of this session. So this is our, you know, the dripper.org homepage. And I'm going to give you these images that I've created that sort of reproduced what people with different vision problems, how they would see it. So this is how it would look out of the box. You know, people with normal vision, this is what it looks like. This is what the same website would look like for somebody who has photophobia. Do you notice any real difference? Let me switch back real quick. So you can see that the really bright areas sort of bleed into the other stuff. You know, this is one of the reasons why, you know, having really thin fonts can sometimes be problematic. So this is for someone who has judoanopia. So for colorblind, they're basically, they follow the three categories, you know, so in your eyes you can sort of, you know, you can understand like the red lights, the green lights and the blue light. And so the colorblind, you know, it happens whenever one of those three, you know, or any combination of them, you sort of lose the ability to sort of distinguish. So judoanopia is like for people who have or can't see anything about the green color spectrum. This is the most popular one and it affects men a lot more than women. So this is the same thing with protanopia. This is for people who have trouble seeing red. And you'll see that they're actually very similar. That's why, you know, you normally think of, you know, red, green, colorblind. Because these two things look very similar. The one big difference between these two is that people who can't really see red, the protanopia, is that the red becomes almost dark and black. So you have to be really careful when you combine, you know, red and black. So here's somebody with macular degeneration. Now, so in your eyes, you have the cones and the rods. They're two different vision mechanisms. You know, one focuses on what you can see, the visual acuity. And the other is responsible for the peripheral vision. And so, you know, the wet and dry macular degeneration has, you know, different stages. And so keep in mind, you know, that you want to make sure that text is big enough and stuff and understandable so that if they can't see exactly what they're looking, they can still might get a hint to what they're seeing from their peripheral vision. And one versus is what someone with television, how they would see the site. You know, what they're looking at looks really good, but the stuff on the outside, you know, they can't really see. So if you have a lot of stuff going on your page, it might be hard for them to sort of, you know, go through the site with, you know, it's like binoculars, trying to find that specific, you know, trying to find out their location. Okay, so next, let's go to sort of the hearing impairment. You know, again, as I said before, it's the whole spectrum. It's not just people who are completely deaf. It's also people who might, you know, have some hearing loss, you know, whether it's permanent, whether it's temporary, you know, you had a really loud concert the other night and the next day you still have a little ringing. And it's also the situation with disabilities, you know, so you might have, you know, a computer, you know, and the speakers are broken, you know, you're out and you don't have headphones and the volume doesn't work. Okay, so here is a great video. So I'm from the DC area. I'm in Maryland just outside and this is a video from Guy Depp University. This is a university for people who have hard of hearing. Anybody having trouble with what they're saying? Understanding? I think it's a really great video because they really highlight the importance of closed captioning. You know, they sort of like flip the switch on you. You know, so, hey, you know, we always have trouble. We can't hear it. We need closed captioning. So how about we just sign everything and it will give them a taste of the medicine? See, let me watch it a little bit more. This time I'll turn captioning on. Sure. Isn't that cool? Our closed captioning can really make a difference and help you understand the content. Okay, so next let me talk a little bit about the mobility impairments. So this is basically people who have trouble sort of moving and be able to control the device that they're currently on. In a lot of cases they have an actual physical problem controlling like the mouse or the keyboard or they need a joystick. It's also for people who might have, you know, you have a mouse and it's broken and it only kind of works, you know, or you have a track pad and your kids build ice cream on it and it doesn't always work. These are some of the wide range of mobility impairments. You know, this also includes, you know, the mobile devices and touch devices, you know. Like when they first came out, like I had a really hard time like going to sites and sort of clicking links because they were so small, you know, that they were built for the desktop experience. You know, we have the small mouse, you know, and we got fat fingers, you know, compared to the desktop mice. So here's another great video. This one is from a guy that just describes how he's using a jowl. It's sort of like a mouth joystick. Hi, my name is Mark. This is how I use my jowls, too. I'm paralyzed from the shoulders down as a result of a spinal cord injury and I use my jowls all the time. Many days, many hours, and I'll show you how I use it. Here is Facebook. I go on Facebook now that I'm not addicted to what I use in that movie. Here's a post from my mom. She says, hey, honey, give me a call. And I said, mom, come on, you're just here for six weeks, we don't have anything left to talk about. Another thing I do, I like to plan vacations. Here's looking up some hotels on Expedia and hopefully planning a vacation. Another thing I like to do is watch movies. Here's a movie, this is a movie about, it's an IMAX movie. It's about oil fires that were in Kuwait after the rocket-baited Kuwait in 1990. It's a pretty interesting movie. Another thing I do, here is Yelp. So you can read reviews at restaurants. Here's where we're gonna go to dinner tonight in Los Angeles, outside of LA. Another thing I do is Skype. Here's Skype. I like to use my webcam that's on top of the monitor. Talk to my grandparents. They are pretty savvy with Skype considering they are 88 years old. Works pretty well. Another thing I do is email. Use Outlook tonight to check email and all that. Try to stay in contact with friends. Another thing I use is voice recognition software. Dragon Dictate, or Dragon Ashes Speaking. I mean, I use this in combination with a job. So I'll show you how it works. Waco. Tonight we are going to eat at Froggy's Fish Market, period. Period. Go to sleep. Now you can see it's spelled Froggy's wrong. It has Fridays instead of Froggy's. So what I do, if it doesn't know a word, I use this little on-screen keyboard out here, and I'll click using my jouse, and I will spell out Froggy's. That's what is great about the jouse. Other on-screen keyboards are not near as accurate as that. You wouldn't be able to hit buttons like this. You wouldn't be able to hover over the key on the keyboard. So then I'll type in my email. That's another useful thing about that on-screen keyboard. You can program macros, so just hit one button. Types in your whole email address. Pretty awesome. Another thing I do is use Google Earth. Who didn't know what technology you can do these days? Sort of help people with these sort of limitations. Okay, now for some audience participation. I have a prize. So I need somebody to volunteer. Anybody? Interesting. Okay, come on up, come on up. Now come over here. Yeah, over here. So, actually, can you? Wait, no, no, you can do it. There we go. That'll work, that'll work. You can do it right here. You can look at my screen. So, you can follow along. For those of you who are at Craigslist. And so, I'm gonna give you a minute. Okay. And I want you to find something cool to buy in Austin. I think you can do that using just it. Oh, this, by the way, is like a big track ball. My kids love it. It's all people who have trouble using a regular mouse. Just a big track ball with two big buttons. So, go. Okay. How do I scroll? Two fingers? There's a scroll on the right. Oh, I don't want to use that. I forgot that existed. Alphabetizing is hard. 10 seconds. Ha ha ha. Good job. Thank you. There. Yeah, Miss Slinky. You're right, man. Oh yeah. Oh yes, that's perfect for my kid. Yeah. You know, so you can see when you have, you're just limited by your device. You know, that is another situational disability. You know, it's very hard to sort of move stuff around. So, keep that in mind when you're building these sort of complex websites and web apps, they make it easy for people to sort of navigate. You know, again, this isn't, you know, another one of those sites on mobile device that can be really hard, because the links are very small. You know, and again, with the fat fingers, it's sort of hard to always pick exactly what you want. So, we got it. Time for another one. So, I think it was a couple weeks ago this came out where there was a new website for the Virgin Atlantic. And this is the, you can follow along at beta.virginatlantic.com. And it's a really nice design. It got a lot of praise because it's sort of forward thinking. It's sort of like a mobile first, very clean, very intuitive, you know, but they kind of miss something with accessibility. So, I need another volunteer. Anybody, raise your hand. I can only see a little bit, so you might have to, so I can see anybody. I'll do it. Okay, so can you go to that desk right there? There's a keyboard. Hopefully this still works. Can you go to the side? Okay, so what I want you to do is, where are you from? Austin. Well, so I want you to find a trip from Austin to anywhere you might want to visit. Using just the keyboard. Does anybody know where she might be on the page? 10 seconds left. Okay, well, thank you for participating. You can have your prize. So, the big problem with this site is usually when you tab around, you know, you want to give feedback of exactly where you are. You know, this is the focus. You know, and what they've done is, you know, some of the stuff, you know, if you highlight over at the hover, you know, there's a slight, you know, underline of stuff, but if you were to tab through it, you have no clue where you are. You know, so always keep that in mind, like when you're designing, like, these interactions. It's not just hover, you know, and click and stuff, it's also focus. And then the final type of disability I want to talk about is, and again, Ram, this is the College of Independence. So people who have these outnumber all of the others combined. You know, and this is a wide range of, it's way too many like a possibility list. This is for people with sort of like, sort of, you know, brain trauma, injuries, you know, it could even be, you know, it's like, you know, attention deficit disorder or dyslexia, you know, where you have trouble reading certain words, you know. I think it's like 10% of the people from the US have dyslexia. This is also people with memory problems, that you get older, that's why it's always good to build sort of form, you know, like you have like a multi-step form that kind of saves the stuff they've already entered and put it in. You know, but it also has stuff with sort of situational disabilities. You know, for example, maybe, you know, have you ever seen like a foreign website when you got there accidentally? And if it's a good website, you still kind of know what's going on. So this is the, the first one is, so first let me talk about that one. So again, this is the really distracting site. Let me get it loaded up. You're gonna love this, you're gonna love this. So you wanna be able to sort of focus on the content, right? You go to a website, you wanna know what you have to do. So how fast do you think you can lease a car on that site? Especially if you were distracted, you know, you're at the, I don't know, maybe you're at the grocery store and your kids are pulling on your arm trying to get you to grab cereal or candy and you're looking at the website because you need to lease a car right away because the one in the parking lot just blew up. You know, there's a lot of distraction. You can't really understand what's going on. You know, and as I mentioned before about the foreign, oh, that's completely sorry. So like what you really wanna do as far as sort of the attention stuff is you wanna sort of like, so for medium, if you're not aware of sort of like a new, sort of a blogging platform. And once I've really done it, they put a lot of effort into like having a narrow focus, making it very easy to do whatever your focus is at that moment, you know. So if you're focused to read a website, an article, you can very easily read it. There's no sort of extraneous distractions. You know, and the authoring experience is very similar. It's just a very simple tech field to sort of, you know, add the update to content. And they've even took a step further like whenever you want to search for something, you know, just sort of get rid of all the other distractions that might be there. So just focus on the search. You know, then again, if you don't know the language, you know, that's another sort of cognitive barrier for you to sort of what's going on. And this is a good example of a site in Japanese where even though I can't read Japanese or understand it, I can still get a good idea of what's going on. Because they have, you know, they have pictures that explain, they have icons with words, you know, all the buttons and stuff. You know, there's all these, you know, what they call visual affordances, you know, like little contextual clues that give you a hint about what something is and how it functions. Okay, so for the final part of the talk, I'm gonna talk about sort of the specific design considerations. And the fourth thing I'm gonna talk about are animation, typography, color, and then sort of how to have a visual, effective communication. So the first I'm gonna talk about, because this gives the first thing, probably one of the few things that the designer, you need to really be aware of, because this can actually have physical medical ramifications on people. So in 1997, in Japan, there was an episode of Pokemon. And for about 30 seconds in this short scene, the background flashed completely red and blue for just 30 seconds. And because of that 30 seconds, thousands of people ended up having to go to the hospital in Japan. You know, some had full on epithecisors, others had like really like migraine headaches and, you know, upset stomach nausea, you know, bad enough that they had to go to the hospital. You know, imagine all the people that had these symptoms, but they weren't quite bad enough that they wanted to go to the hospital. So the general rule of thumb is you really want to avoid any sort of flashing. You can have a little bit, the basic rule of thumb is you don't want to have anything flash. I think it's more than three times in one second. You know, but really sort of eliminate if you can. And some of the spec can go in some detail, so like some of the really slow or faster, you might be able to get away with, but in general, just avoid it. And if it's a really legitimate requirement in the design, really do your homework to figure out exactly what those are. So this is something that came up a couple of months ago. I'm sort of like the front end circle, the design circle, CSS shake. And so this is using sort of the new CSS3 sort of transitions and stuff that you can sort of do stuff. So here's an example. You know, you go on something and it shakes. And it was just kind of a cool novelty effect, but it can be dangerous. You know, like the Ling's cars, it can be really, you know, this, so some of these, oh, there we go. Like some of these examples, it's like constantly shaking. I passed it, didn't I? Yeah, I can't even read that page. Right in the other, yeah, but some of these, like so for some of these, like it just shakes the entire time. You know, and you really want to limit to just like very small interaction, like just when they're interested in that particular part of the page. Okay, so next is typography. So typography I think is sort of like, like what, 90% of web design? You know, unless you have like a really video heavy site, well that's your main content, you know, but even YouTube, you know, they put, you know, effort and consideration into the typography. Cause it's all about text and word that you need to read. And this is a great quote from Immobudo. He was sort of like big in the Swiss design school. He said, a printed work which cannot be read because of product without purpose. You know, so I highly encourage, if you aren't already, to really read up on typography. Learn about what makes things readable, what makes things legible. You really want to have, you know, large enough font sizes so that people can actually see. You really want to pay attention to how you sort of emphasize text, you know, like with italics and bold, and you have to be really careful at some of the smaller font sizes. You really want to pay attention to line length, you know, the measure, as well as the line height, you know, the letting between stuff and spaces between paragraphs, and having stuff left the line to make it easier to skim. You know, so I, you know, admit the big deal typography-wise for people who have trouble reading. You know, whether through cognitive issues, like the sexier or vision problems. You know, really makes them, they can actually see it. And not only that, it really polishes the designs. Even if you don't have, you know, some sort of physical limitation of reading it, it makes the experience so much nicer. Another thing I want to talk about for typography is the color contrast. This is one of the sort that can really get people. I mean, so you really want to be, have enough contrast between the text and the background. You can get away with having sort of like these slight color variations for like the background. Well, for some of the non-essential stuff, you know, for the text that the people are reading, the information they really need, you know, you want to make it obvious that they can actually read it and understand it. And this is the great site, contrasttrubebellion.com. Could you check it out? Is that the really great job of arguing the point that you can have an excellent design with high contrast. You know, it's not just a really ugly black and white site. You know, you can do a lot of things with color that still have enough contrast and make it readable. You know, there's a lot of, like for example, for me, for example, so like I have really hard time reading dark text on white. Then a really cool thing that I can do on max is I can just hit, can you control option shift eight and just invert it. So it makes it very easy for me to read it. So that's another thing to keep in mind is when you're designing color contrast, is that if you invert it, make sure that it still looks good. You know, it's not a high priority, but you know, make sure at least it's still legible. Here's some really cool sort of the color tool so that I think it can really help them. Just recently, I think it was gonna ask you to Photoshop, actually put it in, so you can actually sort of proof what you're designing Photoshop looks like. And you can do it for, I think, for like red color blindness and green color blindness. And then my favorite cool is the color oracle. And this is sort of like a standalone program application. It works on Windows, Linux, and Mac. And it allows you to very quickly see what something looks like with due to an apia, well put an apia, the red color blindness and green color blindness. So for example, this is what these slides look like. If you can't really see green that well, but if you can't see red all that well, makes it really easy. I really love that tool. There's also the color filter at workline.org. This is one where you can sort of type in an address of any site and you can get a preview of what it looks like with all these various sort of color blindness issues. And then finally, my favorite sort of like tool for seeing exactly how much contrast there is. You know, does that meet the WCAG guidelines? It's the one done by Leveru. She's a wonderful developer on the CSS working group. Madskills and CSS and JavaScript stuff. So I love that tool. And on that one, you know, it does a really good job of sort of, you know, you put into number, you know, color values, CSS color values, and it'll give you exactly how much color contrast there is. You know, and it also tells you whether it meets, you know, the single A, double A, or triple A. And my rule of thumb is you really want to aim for triple A. And I'd like to aim for right where it hits the triple A, but not more than that, because again, too much contrast can sometimes hurt people who are dyslexic. And then finally, the segue into my last one is you want to use more than color to convey meaning. So can I have everybody, can you raise both your hands? Raise your hands, come on. All right, because you need to pay attention. No more laptop smartphones for the next second. Because what I'm gonna do is I'm gonna show the next slide really quick. Like as fast as I can, show it and come back. And you need to pay attention, because this is difficult. You gotta pay attention. And you need you to tell me what you think it is. So what was that? Stop sign. What? You got it? It was less than a second. Stop sign. It is a stop sign. So why do you think, and this should really boggle your mind, that that quickly you were able to guess. Because this is a really, this is a terrible picture, isn't it? You can't see the entire sign, it's kind of blurry. So why do you think you could understand what it was so quickly? No? I'm sorry? The color, right, the red. Yeah, you can use color as a design tool. It is very powerful to convey information. But again, if you can't see it, you know, it gets really dark. Sort of the other clues to tell you. The shape, that's right. What else? I'm sorry? The text, right, it actually says stop. You ever been to them in the foreign countries that have stop signs? You still know they're a stop sign. You just don't say stop. It's like Alto or, you know, you go to Turkey. You know that something's pretty different, but you still know it's a stop sign. What else? I'm sorry? The white outline? Yes, the line. That's also another one. It's also the brightness. So even though you can't really see the color, like if it's black or white, you can't see red, there's enough of a luminance variation between the red and the white that stands out. It's not just the color here. Yeah, exactly, absolutely. And so, there's two more clues that this is a stop sign. And it's probably gonna be very hard for you to guess what these are unless you happen to be following along on the slide. I posted on, these slides are on GitHub. So this whole presentation is done using HTML and CSS and JavaScript. It's something called impress.js. And if you happen to be following along and you look in the, let me just show you, you take a look at this. The URL says stop sign. You know, so again, you need to think about the URL as another thing to design, to make it very easy for people to know where they are on the website. And then there's one final one that you're probably not gonna know, notice, unless you happen to be seeing, looking at these slides with a screen reader. Because for each of these slides, you know, I'm using the HTML5 article tags and stuff, and they all have headings. And for the ones that have pictures, I've hidden the headings with CSS in such a way that you can't visually see them, but with a screen reader, you can still hear them. And so it would say stop sign. And so it's very important to sort of use as many different design techniques to get your point across. You know, like whatever thing you're designing, use as many different elements as possible to say, Zachy, hey, this is a button. You should be thinking this, this goes to the shopping cart. You know, hey, this is a link. It takes you to the FAQ, if you wanna have questions. And all these design elements, design the call to actions and the sidebar and the login box is designing with all of these different tools to make it obvious what they are. You know, not only does it help people who might not be able to see color and they have other clues to tell them what they are, but just for general people that have no problem, you know, it adds that polish and makes it much easier to understand, you know, what you're trying to communicate. You know, the really good analogy I like to use for this is, you know, sort of like the teaching methodology. You know, like, you know, they say, you know, like people sort of have different ways that they learn. Like some people are visual learners, you know, if they see something, you know, they can understand it. You know, others were like, they need to read something, you know, before they really understand it. And other people are like, well, they need something hands-on. You know, if you give them an activity and they actually work on it, it really helps it go. You know, when the best teachers try to use as many of these different techniques as possible, sort of convey the information, make it obvious, and make the information stick in. So that's the end of this talk. Thank you very much. And please, I encourage you to go to the website for the session and rate it. They give the feedback back to the speakers, so we get a better understanding of, you know, what we can do better, you know, what we'd like for you to keep doing. It's also very helpful for the DrupalCon Association, sort of figure out what speakers they want and what topic they find that they should continue in the future. So now we have time. Let's see it. We've got about eight minutes or so for questions. And again, you can get these slides at GitHub at the top. You can also ping me on Twitter if you have any questions. And also there is going to be, this afternoon at 3.45, there's gonna be a bot on the accessibility in Drupal 8. So, any questions? Yeah, what's the most effective way? I'm sorry, can you speak up? The mic's not working too well. What's the most effective way to convince a client they need to change their design for accessibility reasons? Like I said, the question is, how do you convince clients accessibility in the design is important? So usually what happens far too often is in the design process, you don't really think about accessibility. You know, it's like accessibility, yeah, it's important, but we can do it at the end. Tag it on at the end, that can be part of QA or something. Or that's something that customers have to deal with. Designers don't need to. But it is very important to have it throughout the process, making accessibility a key part of your metric. So like I form on, we use the agile process. And in every single story we have, we have stories for design and story for building, we make it being accessible, whatever you're working on as one of the acceptance criteria. So to convince your clients who might not be willing to do that, you say, hey, it's not just, you're limiting your customer base. People don't really realize just how many people have these problems. And again, it's not just people who are completely blind or have low vision, it's all people who have situational disabilities. So it affects a lot more people than clients might realize. And paying attention to accessibility makes the design better. Any other questions? Hello. We moved over here. Okay. What in the example, the medium example, it had like text over images. Obviously that's a huge trend right now. What do you think about that? Because it's hard to really judge the contrast through a tool like you showed in GitHub. Yeah, can be kind of different if you have text with image background. You really need to pay attention. It can't just be sort of a, one size fits all, you can put in any image. Because the colors in the image make a big difference as far as the background color. So you can either have like, if you have like a background image or like a banner on a page and you have the text at the bottom and you're gonna have like different images either rotating or maybe there's a different image on different sections of the site is maybe put like a little gradient behind it. So no matter what, even if there's something white that gradient gives it enough contrast you can still read the text. Okay. Second question I had. Do you have resources for like, we're considering like fonts that we want to use. Do you have resources which recommend certain fonts which are good for accessibility or readability? Well, there are, there is I know a font specifically designed for the sexic users. I think that's pretty much of an edge case though but in general for like choosing font it's usually the ones that are more legible. Usually designers don't pick the bad fonts as long as you can read it. If you try to get fancy, you'll want to get the message across and like sometimes you can get away it's like on a poster, sometimes a big posters day and they have like these weird fonts you can barely read but it's part of like that artistic experience trying to figure out what it says. You really don't want to do that on a web. And so as far as like choosing serif or sans serif fonts, as long as like with the modern devices you don't need to worry so much about avoiding serif fonts, you know, unless you might want to avoid it though unlike some of the really small font sizes. So like on the teasers or the body lines that have small tech, you might want to try sans serif rather than serif. Okay, great, thanks. Sure. I have a question. Sure, go ahead. You've made a reference to A, AA and AAA. Okay. Can you give me more information on that? Sure, yeah, so the WCC who does the standards for HTML, CSS and a whole bunch of other stuff, they have something called WAI which is the Web Accessibility Initiative. And one of the things they've come out with is the WCAG which is the Web Content Accessibility Guidelines. And they're the 2.0 version and this is sort of like the guiding principle internationally right now as far as how to make things accessible. And there's a lot of stuff on how to make text readable, how to make links and buttons work. And one of them is color contrast. And so there's sort of a specific formula to determine sort of like the luminine color contrast between two specific colors. You know, when there's actual formula that said, you know, if it's so much of a color contrast ratio, you know, it's a double A. So you can kind of see it but some people might have problems. And then the triple A will go even further where it's a lot more of a contrast and so more people will be able to understand it. Any other questions? Okay.