 So hi, thank you for agreeing to come to this workshop The general concept of a workshop is that we will be doing some work. So I will Ramble on for a bit and then you will do some exercises and then I will ramble on and then you'll be thrilled to do an exercise So I stop and this will repeat until we're done. I did not schedule a break There's a lot of stuff. I want to try to cover if you need to leave Go ahead. I'm not going to have my feelings hurt if you're a group of five though You should negotiate with the group of twelve and figure out if you're going to swap around, but I really don't care that much My slides will be available later at rosel.li wcu18 That's rosel.li Wcu18 and at the end of the talk you'll see the slide again and I will tweet the URL You don't have to follow me. I'll put the hashtag on there if you follow me. You'll just block me really quickly. I Have a schedule I'm going to pretend to follow it You're already in your groups of five. This is awesome Quick introduction. This is basically my ego slide. I do Talks a bunch and I do trainings as well. I'm terrible at both and this is going to be so much fun as a result But you should know that if you're listening to me that I have some experience I'm not making this crap up and I can't make it up because other people have written it, which is brilliant I've done some books. They might be out of print. I've written for net magazine and web standards Sherpa If any of you are old enough to remember evolt.org That was my baby and one of the people who founded that I have this site does my site deserve recognition Dot org which you can go get all sorts of resources for doing speed tests and accessibility tests, etc I have a website where I write Web related things most of its accessibility, but I rant about other things That's my Twitter handle for quick blocking while we're here. I Am here because of the courtesy of this incredibly low contrast postiello group logo that I've chosen and When they see this video, they're going to be frustrated and rightly so that just just for context The postiello group does accessibility consulting audits remediation they have free tools like the color contrast analyzer and the web accessibility toolbar and and Steve Faulkner's attitude all of which helped it the standards process and They they do a great job participating in standards HTML aria WCAG, etc They were kind enough to bring me on when I left my 20-year venture because I needed health insurance because I'm from America You laugh at that it makes me uncomfortable So here's here's where we start We are going to do a group exercise right from the get-go, but this is a pretty straightforward exercise It isn't a heavy lift. I'm allotting you. Oh, I should put up the slide. It tells you what we're gonna do I'm allotting you 15 minutes What I want you to do as a group has come up with some sort of user interface component It could be a login. It could be an accordion. It could be whatever I just want you to think about what that is in your group agree what it is If you want to describe it just make a couple notes or sketch it out on paper Whatever is comfortable. It shouldn't take you the full 15 minutes. This is a bit of a buffer I built in might only take you a few minutes I'm gonna ask you after you've agreed on them what you've chosen and you're gonna hold on to that because whatever it is We're going to build on this going forward So maybe don't come up with a super super weird and complex component because I'm not telling you how to code it I'm gonna try and give you the techniques and maybe don't come up with a single form field like first name Yeah, don't do that. That's just that's just a cop out. So in your groups. You just joined we have three groups of five Which which one would oh You have two extra people okay You both of you should join a group and you're both near those two groups. So You're now part of those groups I Feel weird telling people where to go, but I'm American and that's what we do Sorry, we're in bordled in a whole border nonsense We'll fix that in post-production. So yes as groups, please come up with some ideas ping me with questions And as soon as you're done tell me and then we'll continue with the show Oh Oh For the implementation Yeah Oh Oh Oh How's everybody doing so far How how are any of the groups done with their rough idea? You think you're you're in good shape Okay How about how about you? Middle group you don't need to sketch it No, it's as much detail as you want to do because we're going to continue to sort of build through it Okay, and then I'll check with this last group to see how they are doing the group on the right You think you're in good spot to continue? Okay? No pressure. No pressure or anything Okay, the good news is you're all still working. Maybe I should leave Oh Oh No Oh Oh Oh What are you doing? Okay Everybody is finished and ever since I walk away from the table they start going again This fills me with hope But it's also the exercise where I gave you the least direction intentionally and now y'all are gonna be really upset As I start to narrow down this focus. You'll be like, oh come on We were drawing pictures and that was fun So I'm gonna go through a primer here I'm sorry if you have to keep messing with the levels. I'm just all over the map Did any of you attend Maya's workshop yesterday or not workshop her talk yesterday? Okay? So for for everybody else this might be useful if you've seen the a1 1 y before sometimes pronounced alley Sometimes pronounced ally. It's just good to know the root of it Primarily because once you see people in the industry talking about it, you won't Necessarily get why we got where we are if you've ever done any work I've done a lot of work with localization internationalization, but in the US So our words are localization internationalization and we do L10 I 18 and the general gist is you remove all the letters from the middle of the word and you replace all those letters with The count of letters that you replaced that you removed so a11 for the 11 letters and then why? In particular, this is the hashtag you'll stumble across on Twitter pound a11 y hashtag a11 y Some people also will write accessibility. They'll write some other things as well It also is used interchangeably to mean accessible Because that's easier and a lot of people can figure that out from context clues So the good thing is if if you just want to see Currently what people are chatting about on Twitter as an example hashtag a11 y and Now if you didn't already know it's a numeronym for accessibility and Yay World Health Organization has this definition of disability. I like this definition I think this definition appeals very well to people who work in software software development Disability is not just a health problem. It is a complex phenomenon reflecting the interaction between features of a person's body and features of the society in which he or she lives features as People who work with WordPress work with software Features are things that we talk about we understand this concept of features if we just think of disability as a feature mismatch I Have a feature where I have no legs but This building doesn't have a feature that makes it easy for me to get in Maybe it doesn't have a ramp. It's not specifically this building, but many other buildings I have a feature where I can only see two colors But all the signage is in red or green They don't have a feature to support my feature set They're varying success with getting people to think about it that way But the World Health Organization does a good job of trying to pull it away from being limitations of people and Recognize that is also the limitations of society's inability to recognize. Yeah, people of different needs Temporary needs Situational needs or permanent needs and I will go through some of those later on I'm going to contrast this though with what the World Health Organization's definition was in 1980 for disability in The context of health experience a disability is any restriction or lack of ability Resulting from an impairment to perform an activity in the manner or within the range considered normal for a human being So I live in this world where I work on accessibility stuff all the time and the word normal is a is a dangerous word It's not a bad word, but it's a dangerous word because as soon as you start making assumptions about what is normal You're excluding somebody This isn't just about accessibility though I assume it's normal for everybody. I work with to have 5g connection and a totally sweet phone But that's not normal in the context of a global audience. That's very much the opposite of normal I can expect less than 2g connection off of a rickety feature phone that actually might be more secure than mine So it's not about a disability It's about this concept of normal versus not normal seeing things through those different lenses and those different perspectives And that's why I'm such a fan of this redefinition about a feature mismatch between Users and the things they use. It's the real world. It's software. It's a box of cereal. It's all those things I might be the only one who struggles with the box of cereal Any questions on this bit? Okay, I Tweeted the agenda earlier today I want to manage your expectations about What we're going through today over the course of the next two and a half hours You've already done one exercise. So that's one out of the way I did the primer sort of I'm going to talk about disability types how to fix other people We're going to break into another exercise. I'll talk a little bit about user experience personas, etc another exercise Then there's a big chunk where I'll talk about technical bits which aren't really technical But sure We'll do a final exercise and we'll wrap the whole thing up and then you can all go to The venue to get drunk. I mean it you might wait a couple hours if you're smart Or not if you can get a cab Anybody else struggle getting a cab last night? Yeah, okay, but it wasn't just me. It was very very wet out I found a car service and I managed to get a handful of other people into the cab with me It worked out well But we're not here to talk about the woes of Bus route 95 and local car services. We're here to talk about this stuff. So I put together a a list of Disability types just at a high-level list General concept here is everybody is different. No two people are alike and We tend to forget that there are a lot of different things that people can do or feel or perceive than we're used to normal versus not normal So there are physical impairments some examples epilepsy mobility impairment Which could be confined to a wheelchair confined as the wrong word do not use it, but a wheelchair user Maybe find motor skills. They don't have precision hearing deaf Heart of hearing hard of hearing itself can break down in multiple ways They struggle with mid-range or high-range high-end sounds There are buildings in in America where they keep kids from hanging out after school by playing really high-pitched sounds through speakers and Only kids like 18 and younger hear it and they're like, I don't want to be here sounds stupid And then people in my age bracket can't hear it So we get to chill and skateboard outside the building You don't you don't think I can skateboard Vision color blindness low vision low vision comes in many flavors I'll touch on some of those as well. And then there's full blindness and we tend to break these apart Which I will show momentarily as well Cognitive is a lot tougher because it it manifests in so many different ways and Whether or not you like it we all have cognitive issues I Guaranteed you at the end of tonight. You will all have cognitive issues Just saying ADD attention deficit disorder attention deficit hyperactive disorder Autism which itself is a huge scale that manifests in a lot of different ways dyslexia which is struggling with reading Text can be confusing what the letters and the shapes are Dyscalculia is the numbers version of dyslexia. You struggle when you look at the numbers and then general learning and language It turns out. I don't speak Serbian I just discovered that so cocky when I flew here. I'm like this is gonna be all right And then speech and speech is becoming more and more prominent because we are moving more and more to voice interfaces I have a thing in my house that when I ask it the weather it tells me and fortunately it can understand me People who stutter people who might be nonverbal Cluttering apraxia all these are things that can limit their ability to use some of these newer interfaces The very fact of you asking me cause my brain to blank on it I'm gonna look that up during the break and get back to you when I put it in here I was like, oh everybody I didn't even make a note for myself We are going to talk about the disability types broken down this way as these six now Conveniently I asked you to break into groups of five, but some of your groups of six This might become relevant in our next exercise Blindness Low vision including color blindness separate from blindness deaf and hard of hearing speech physical Intellectual and cognitive these are the groupings that we're going to keep today and I'm going to run through Attributes of each of these a blind user cannot see the screen As simple as that if you're blind, you just can't see the screen You can't see the keyboard. You can't see the mouse your way of using a computer Navigating the world interacting with people is is dramatically different You are probably a key or a screen reader user, which means you rely on the Computer to talk to you the computer talks to you based on what the software tells it to say So whoever wrote that software hopefully did a really good job. Oh by the way they didn't They're also a keyboard only user a mouse user is not using them. I'm sorry a blind user is not using a mouse It's totally impractical now There's a little bit of an exception to the keyboard only user if you're using a mobile device or a touchscreen a Lot of blind people have keyboards I have a Bluetooth keyboard that I use with this all the time because I don't want to pull out my laptop But at the same time there's something called explore by touch or just swipe right It's not a tinder reference. I discovered that the hard way Oh good, you know what tinder is awkward But they literally tab through as if they're pressing a tab key by just over and over and over So they're not keyboard users, but their interaction might be very similar to a keyboard user As such they rely on a web page Core thing we're here talking about talking about they rely on a web page that has good headings They want that the headings on the page to make sense. It tells them where they are It gives them context for where they are in the page at any time Proper form elements native form elements ideally you can still code custom brand new form elements But you run the risk of breaking them and making them inaccessible Good old-fashioned links Links are great, especially when the link text is useful Takes people places they know what to expect and landmarks cool thing about landmarks is they come in html 5 They come for free and I'll review some of those later on in the technical section Low vision users separate from blind users Low vision users rely on different technologies than blind users for the most part. They may use a screen reader We know from some surveys Which are not the same as rigorous studies, but still very helpful We know from surveys of screen reader users that only two-thirds of them are blind That means a full third of screen reader users either have low vision or aren't blind at all I'll have any any vision issues and maybe they use it for For cognitive reasons. They might have dyslexia. So not all screen reader users are blind Windows has a high contrast mode built right into it if you're using windows high contrast mode You're probably using it with Microsoft Edge or Internet Explorer because they natively Support it and they do a lot of cool things with system colors Low vision users may not be able to differentiate colors. They might be red green color blind blue green They might be monochromatic. They might not be able to see any color Low vision users may scale fonts The base font of their system might be bigger. They may also zoom in on a page. They may use a screen magnifier Screen magnifier is kind of tricky because it only shows you part of the screen at a time. So if you are If you're if you've zoomed in this portion and something important happens down here We're not going to see it even if it only happens to the right They tend to rely on good contrast and scaling type faces These the good contrast is particularly true for pretty much everybody who has Vision issues and it's worth noting that low vision Not just colorblind, but I was going to mention a couple others There's the where the center of your field of vision is gone There's variation where the periphery of your field of vision is gone There's also cases where everything's very blurry or there are a lot of floaters in their view The point is there's no one single type of low vision One example that that I've seen used a few times is just look through a straw just experience looking through a straw and How difficult it might be to use your software another is smearing Vaseline on your screen Also from practical experience don't do that to your co-workers They frown on that Deaf and hard of hearing they will not hear audio cues If you have a web page or software that beeps or blurps or makes other weird noises to alert them of something They're not going to know So you have to bear in mind ear cons as some people call them will be useless If you have captions for your video, and they are not synchronized They may struggle to understand what's going on in the scene if somebody's if the captions are showing up a Few seconds after the person who spoke it might look like a different person is speaking Or they might not understand what else is on the screen and how it's relevant In the case of American sign language that might be their first language if they were born deaf They've never spoken English. They they might read English, but their first language is a symbolic language It's sign language And it's not just American sign language is British sign language There's Dutch sign language and on and on so you still have all the translation issues that come along with that as well They tend to rely on good captions that are clear and concise visual cues Color cues and haptic cues So if I have a phone and I'm getting email and it dings. I'm not going to hear it But I will feel it vibrate if I'm carrying it on Mac OS if I go into the accessibility settings I can enable a feature that whenever my Mac makes a sound screen flashes and when screen flashes I don't need to have heard it just a quick flash and I do what I need to do and One of the guys I work with relies on that because he often works in loud spaces And it makes it much easier for him to know that he's gotten alert because there's a quick flash Single-strobe no risk of anything bad happening there This is me checking to make sure I'm not falling behind Because if I'm behind you all getting to drinks later. That's bad news Speech somebody with a speech impairment may speak less clearly. They may also be nonverbal They might not speak at all. They might even be capable of speaking but not have the understanding of how to make words They can be stymied by voice interfaces Phone interaction may not be possible. So call our number if you have a problem with our website. Nope Those are voice menus say one to call or say zero to speak to a representative. No The worst would be somebody who's nonverbal with a rotary phone. Anybody remember rotary phones? Yeah, that'd be terrible And they may use assistive technology and they may use it in ways that you did not consider But typically they rely on other interactions a lot of visual interactions a lot of cues from color a lot Accused from visual texture. So some of that um What's the word for interfaces that look like they're based on real-world stuff, I'm sorry Skeuomorphic yes, which in retrospect, I can't expect non-English speakers to know skeuomorphic So interfaces that look like stuff you can grab or slide. I Heard that that's unsettling And I think I said haptic as well physical impairments These are interesting because they can they can vary in ways that you might not expect they can be temporary to permanent somebody can start off with a physical limitation and maybe through lack of use of the limb or lack of physical therapy they Start to lose more and more use of it and end up having a permanent physical disability slight to severe is one where not only Yes, I do mention so you can have a slight impairment You know, you might just have a funky wrist You might have been typing too much and you have Carpal tunnel and after a couple years it gets to the point. You just can't operate a keyboard So that starts off slight and then severe These things temporary to permits like to severe can change throughout the course of a day if you have tremors Your tremors might start off pretty mild in the morning But as the day progresses they get more and more severe and it becomes harder and harder to do some basic tasks Opening a jar might be easy first thing in the morning and impossible by lunch or dinner time They may use a screen reader Because it's it's just easier It's just a couple keyboard interactions in order to read an entire screen to scroll to do things like that It's just an easier interface in many cases. They may also use dictation software something like dragon dictate Which is technically not assistive technology If if you have the opportunity and I did not put any links into this Eric Wright did a demo of using dictation software to walk through Gutenberg and While it is mostly a An example of how problematic Problematic Gutenberg is for dictation software is also ignore my banana. It's also a Good example of seeing somebody use dictation software with an interface that you might already know to some extent It gives you some insight into how he uses it Somebody with a physical impairment probably relies on generous hit areas if I have limited mobility or if I have tremors Or I'm using a wand or some other thing the bigger the button the better More likely I am to hit it and simpler interactions. So dragon drops could be a real problem for those users intellectual and cognitive This is a really broad category and trying to squeeze it into one slide does a disservice Just as all the others into one slide does a disservice to them Somebody with an intellectual or cognitive challenge may use a screen reader It might be easier to have a web page spoken to you than trying to read it the typography might be terrible Your dyslexia might be kicking in and it's just impossible to understand They may also use dictation software for the same reason. It might be just difficult to form a sentence by typing it They might benefit from anything I've already covered All these things larger hit areas good captions etc. These are all things that can benefit them Depending on on their needs. They tend to rely on well-structured content Some good headings clear understanding of what the page looks like. What is they're getting themselves into? plain language and good context Am I at the form? What is this form doing? Is it structured? What am I filling out? Did I just buy something I don't want? How do I return it very simple direct questions? I do have notes here, but again none for a proxy of speed So I've talked about people who have Disabilities as we think of them Before I jump into this next section, I'd also like to point out one thing I did not dedicate a slide to is the notion that Disabilities often come in sets You don't have just one Often the thing that caused you to have that disability has other effects as well So if you're confined to a wheelchair again, don't use the word confined Try to sort of be a better example myself You might be there because you have no physical mobility and you can't speak So now you've got two impairments There are plenty of people on the web who are deafblind They can neither hear nor see but they still manage to get by if something is well-coded And if you think about the causes of some of these things you can start to see where some of that overlap might live So we're going to jump into talking about who else. I want to make sure that we're Sort of leaving the disability stereotypes and generalizations behind Did any of you go to Paris let word camp Paris last year? Did any of you see my talk last year at word camp Paris you can put your heads down for the next few minutes Some of these slides will be familiar, but not all of them This one I want to pull out immediately Because I maintain that Microsoft. This is Microsoft's art. I maintain they stole the concept from me. They will disagree But I've been talking about this concept of everybody has an impairment. Everybody's got some sort of limitation It's all about context. It's all about situational It's all about temporary Etc. And this these illustrations these animated illustrations they have On their site. I think do a good job of referencing some of the things that people might be struggling with I like the bartender who can't hear because he's got the shaker All night with the ice and the shaker So let's jump into one of the first ones getting older It is my understanding that it affects Everybody except for those who are fortunate enough to not have to get older Cuz they're dead This is a tough room As I know it carries risks and side effects it is not for the young But the concept is very simple the very fact that we're sitting here means that we are spending time aging You can blame me for that, but you started it So this is an example of two couples What what is separating these two couples besides about four feet of concrete age? Sorry Yeah, yeah pretty much there. They're probably both having the same conversation. Hey, I've never been to Serbia before Where's a good vegetarian restaurant? and Again, their objectives aren't necessarily different their interactions aren't necessarily different. The only difference is age What's separating these two besides the about a foot of metal age? Well, they're both reading Sorry Yes, so I'm gonna go with the interface I maintain that they're separated by age and she's the smarter of the two because she's using a solar powered device and The interface tells her how much more there is left to read at a glance, right as brilliant But it is heavier to carry, but it's also a weapon And if it gets cold you can burn it and it's not as dangerous to burn as this So, you know, they have that going for it, but again, they are separated just by time By age same objectives same goals. They're trying to do the same things Now forget about the whole aging part If you live long enough, you're probably going to have some sort of an accident Something's gonna happen to you Broken limbs eye injuries hearing injuries head trauma all of these apply to me I've been through all of these. I've broken multiple parts of my body and split things open and shed blood across the world Don't do that It gets expensive, but the point is we all have something happen to us Carpal tunnel affects a lot of people A broken wrist affects a lot of people I'm the guy who took a spill coming out of the the bell expo center The other day when you you were ahead of me. You didn't see it. You just heard everyone laughing at me One foot and down hard and I caught myself, but you know, there's a few minutes afterward where I'm reminded I'm getting older and my wrists don't like it when I fling myself into concrete eye surgery Having a little bit of work done poking yourself in the eye with one of the postcards I'm gonna fling at everybody later on You know, you've temporarily lost some of your vision peripheral vision and your 3d sense Which means you could be standing in the elevator tonight going Because I've done that These guys are my favorite you would not know Looking at them that they're actually all okay right now Granted they may have some cognitive decline. What they're doing is they're chasing a wheel of cheese down a hill This is a tradition in some town in England and I didn't copy those notes over What I do know is they start at the top of a hill somebody kicks a wheel of cheese down They all run after it and a half dozen ambulances wait at the bottom of the hill And they need to be there because somebody always gets injured multiple somebody So you have this very clear at the top of the picture You start off okay by the time you get to the bottom of the picture. Guess what you're disabled And it's your damn fault. You can't blame the cheese You could try it just wouldn't be effective You could think that uh like me you're invincible and allergic to nothing But there are other factors that can give you this temporary or situational impairment Multitasking lots of people like to think that they can multitask nobody can multitask all you can do is attention swap in that Is problematic for a number of reasons Work in the sunlight Not so much of an issue these last couple days But it can wash out your screen If it rains on your screen your phone thinks your every one of those raindrops is a touch the next thing, you know, you've sent an email What did I resign? Eating at your desk not having headphones handy in an open office plan workplace or a cafe Or if the content is not in your native language I tried to use uh I'm a contributor today. I tried to use Maya's laptop really quickly and it's a german layout And I got two letters in and I was like Where's the letter I didn't know what to do. I couldn't find the slash You know, you know how it's the slash So confused So this this is sort of a representation of me a lot One hand's on the mouse or one hand's on the keyboard and the other hand's holding food I maintain that everybody is a keyboard only user at lunchtime We all have experience with it. We just don't think about it Uh, these guys are awesome because They're a neither mouse nor keyboard user They're not really paying attention to the screens. They're working out in the sun. They're distracted If you send them an extremely detailed email with a set of instructions They have to follow to to not be killed by the man eating tarp They're not going to understand it because they're too distracted. So they have this temporary cognitive impairment visual impairment Motor impairment So they've they've heaped these on themselves. There's nothing wrong with this But again, it's understanding that that context in that temporary situation Working in a cafe probably doing some video editing based on the video camera. So he has to wear the earphones I'm glad he's wearing earphones because I hate that guy on the train who decides to watch that youtube video And turns it all the way up and it's like, yeah, dude. I heard that song That's cool. You got any Duran Duran so This affects a lot of people headphones can become really really important And when you don't have them is when you suddenly realize how much you want them And until then that person is essentially deaf Uh, bbc's app does this really cool thing where it recognizes when you're on a phone and it In many cases starts the captions by default because it's like you're on a phone. You're probably not sitting on your couch So we're just going to turn the captions on and maybe you won't have your volume all the way up There is um the scenario of having somebody in bed with you You know checking email at you know midnight. It's not so cool watching terrible videos playing video games not awesome I'd like to think that This bedmate is a little bit more understanding But this is a case where suddenly captions are important brightness of screen is a factor How much you move around on the bed? Can you even have a mouse on that blanket? These are all limiting factors Uh This kind of represents me on a few trips before I would get um airline apps on my phone And I was traveling internationally and I'd have to print a boarding pass meant I would have to go to some internet cafe or post office or library And mess around with the keyboard that I've never seen before and try and type words I've never seen before Um, I've been fortunate because I've always been latin characters, but then you all throw a Cyrillic text at me Where's the where's the weird circle posts? Where I don't know where that is in the keyboard. So I'm suddenly very comfortable in english and very comfortable with the keyboard I'm rendered useless in front of an international system It takes me way too long to get anything done In america we have Thanksgiving where we give thanks for um murdering millions of natives and then eating turkey in their honor, I think Um But we all get together. It's a family holiday. We all get together We have lots of food and when I go to my parents house. The first thing they do is hand me um A printer ink cartridge It's out of ink. Can you please change? printer ink And then you know run the virus updates and install other things and delete email and was that a virus and why is this popping up? This is this is We're talking a little bit about cognitive and intellectual and experience and all these other factors We have to remember that not everybody who uses the stuff we build is as skilled as we are I've been braiding software poorly for over 20 years I stopped counting when I hit 20 because it's embarrassing And what I have learned is that I've written a lot of terrible stuff even when I was trying my best And this is an ongoing thing It's ongoing. We all we all go through this. It's it's just how it is You want to have good mentors who lead you through this stuff? But eventually we're going to be In their position. We're not going to be writing software anymore. We're going to be the end user We're not going to have that kind of control So think about what you want to leave behind for future you. I don't know if anybody yeah So here's the good news. This is where we roll into a Another group exercise. This is the second group exercise. I'm a little bit ahead of schedule I'm so surprised by this So surprised by this So I'm just going to stand here for 10 minutes Of course you can you can ask questions anytime Don't ask me about something. I don't know again though. That's embarrassing Right, but then without the bar they fell into the vet anyway No, they okay And Yeah Yes, yeah, you can have these situations and That's why part of this approach is you have to look at this broader picture So if if all I do is as I look at WCAG and just try to code to WCAG I'm going to create some problems because you need to apply a little bit of smarts to it I talked about hearing impaired They tend to rely on color cues. Well, if the only thing you do is leave color cues You've excluded another audience And so I talk a little bit about that later on how to try to make sure that you're covering for more than one at a time But the general just is yeah, there is always that risk and hopefully as you approach these you can think about When I do this who am I going to leave behind? We are at five two. I did the disability types. I'm down to group exercise Which I should be starting in five minutes. This is awesome Okay, yeah, that's cool. Yeah, you can take her seat, but thank you for for attending Have somebody bring you the homework later Okay, so This is crazy. It's the same number of people in that group. So here's your next group exercise Each person in your group should pick a disability type. You're weirdly numbered groups. So this throws things off a little bit so And ryan, you're not going to be this person ryan. You might be low vision And monique you might be blindness and whatever each of you hearing hearing and speech I paired up because it's a little bit more difficult and also conceptually a little bit easier But you can split those up if you want Physical and cognitive. So each person in your group choose one of those discuss amongst yourselves draw straws fist fight I don't really care Within your group what I want you to do is discuss where each of your needs as a representative of one of these groups Overlaps with the needs of someone else based on all the information. I've just presented through these slides Be a little bit creative think about if you are one of these categories We're going to bump into somebody else barriers abilities needs weird software interfaces favorite foods Maybe not that last one And you have 15 minutes to come up with basically a list Basically 15 minutes chat about it. I'll walk around answer questions Any questions before you get started? Yeah, so that's So I'll just start checking on your own son-of-a-feet where they're going to pull the laps and challenge. There will be loads of laps. You don't need to relate to that. I had to do the interface so that I could do that on first because during this conversation I knew that you had loads of laps. So I primed you with that interface for me to come back and do the people with the back. Well, you can do that too. But you have their own... I'm sorry, you got the right one. You guys good? No questions? No, I'm just kidding. You're not doing great yet. I'm sorry. Yeah, it's clear. Clear. It's clear. It's clear. It's clear. It's clear. It's clear. It's clear. It's clear. It's clear. It's clear. It's clear. It's clear. It's like the highest mind that is now in the question. That's a diagnosis... So, this is something that goes in contrast to the other people. It goes in contrast to the other people. They hate contrast. On the other hand, blind people need contrast. No, they do not. They need contrast. So, this is something that you desire, and they are distinguished. I know I am. I know I am. I do call your books. I do call your books. When you are not like a call, you need to know. Call a flower. Are you just making some noises? Yeah. The ringer and the reach are connected, really connected, because people when they can't hear, they, but they can speak. They don't pronounce. On the other hand, when you can't, when you can't, but you can hear, it's the problem that some words, they don't understand some words. Basically, we have two issues that are connected, you know. So, I think that for the hearing, the content on the website should be more narrowed, and well, for example, if you are deaf, you can't know on the website that call to action. Thank you very much. Don't accept that as, do something for me. You very best. Sometimes. Not for operations. So, do the simple countings to and to read. But it's difficult for all sorts of people. Let's chat. It's difficult for all sorts of people to recognize in the letters. I think we can go faster through all of them. All of these things. You gave a good example for character. That's really great. For example, this scent is good. So, maybe we should emphasize that for a person to see, with a bigger contrast, to see what he needs to do. The ball is all of your hair. Below, you can stand with this. For the capture, for the validation, we say, we, um, can chat with one of the people. No, it's just quite simple. It's quite easy. Everything changes. I thought you would say anything like, yes, yes, yes, yes. So, you can do some reverse colors. Like the color of the scent, the effect of the color of the background, the reverse of the color. The scent of the color. Yes. The name of the scent was a good name of this character. A really good word. So, you can do some of the things like that in my experience. It needs to follow you everywhere. Wherever you did. So, there are lines. So, you've gone a little bit beyond the scope of the exercise, because you're talking to a lot of people who don't know what you're talking about. So, you can do some of the things that you're talking about. So, you can do some of the things that you're talking about. So, you can do some of the things with the exercise, because you're talking about your interface, which is fine, because we're going to come back to this later on, but part of the goal of this exercise is you already know about this. Now you're talking about overlapping. So, when we come back to this again, you'll already have both of those in your head. It's fine to jump ahead a little bit, but just make sure to give the least of the responsibility to your responsibility. Because after this, we're going to do some persona work. That doesn't apply here either. Okay? I'm not telling you to do anything wrong. Just stand right here. Thank you. Okay, I don't see anything, guys. Please, can you come on in? I need some... So, ready? Ready? Ready? Ready? Ready? Ready? Ready? Can you, like, separate them? It's me, too. I'll give you my... That's Alexa. That's my ability. And I need to speak in here and touch something, so that we can see what we have to say. Please, and I don't have a word about your wishes. Yeah. Thanks. I can't remember. I don't know. I'm sorry. Is this your vision? Yeah. Are you scared with your vision? Because of the glasses? Yeah. Fight them. They could have fought you for it, but they didn't want to. So, what are your wishes with the... with the... I have connected photos. I have connected photos. I have connected photos. I have connected photos. Just a couple more minutes. So, we've got it. But I just want to give you a moment. Should we start? Just a couple more minutes. Just a couple more minutes. So, we need if you need to get a contrast, if that's what you want to have. Yeah. See if that's my... that's that. What do you as a little vision type need to see? So, I need... I might need... Okay. Yeah, but you have this that if you don't use one, you can use another one. And if you're overlapping with her with a speech, they have themselves amongst the concrete that's real. That person is the most... the most... the most... the most... the most... narrative. So, if you need narrative as well as she does. Hello, hello, hello. Hello. I just called to say hello. Okay, we're going to pick it up again. I appreciate how passionate you are to want to go through this. It's also good. Thank you guys. I know you're getting into it, but here's what I'm going to do before we move into the next section is I'm going to ask somebody from each group to do something in the yellow shirt. What disability type were you championing? I'm sorry? Hearing. Okay. So, tell me, what overlaps did you have for hearing that some of the others had? You stuck on hearing? Oh, I see. You got as far as blindness. So, 15 minutes was not enough. Okay. So, then who was... you had low vision? Why don't you tell me one of the overlaps you had since that's the first one on the list? With blindness? Yep, overlaps with blindness, makes sense. Cognitive? What kind of an overlap with cognitive? Okay. You might use a screen reader, right? Okay. I'm repeating these things for the benefit of the recording as well. This will be captioned later on and then you can read me justifying why I'm talking so much. It's very weird, I know, in the future. Okay. What was your chosen disability type? Okay. I'm sorry? Tommy? Oh, the musical. Yes. No, I didn't see it. It's for hippies. So, overlaps with cognitive? What kind of overlaps? Okay. Captions? Right. So, visual feedback. You don't hear the mouse click, right? So, you need... You'd like to see instead of hear something? So, video instructions may be better than audio instructions. Oh, video instructions better than just listening to instructions? Yes. So, you can see what's going on. I'm hearing the group say structure. Is the group saying structure? You just kept coming back to structure. So, for context for the other two tables, I think they're anchored on structure because Monique made a matrix where she put check marks for each of the disability types and where there were little overlaps. That's not a criticism. Any tactic that works that helps you get to map some of that stuff is great. It doesn't mean anybody did anything wrong or right. I mean, Monique maybe did something right. Over luck with physical. You can't hear the car horn before it runs you down in the street. It does get confusing, doesn't it? Yeah. So, with a broken arm holding a heavy book if you could just have it spoken to you that would be easier. So, you might use the same technology Sony who's blind might use. We keep coming back to video instructions. I feel like you guys have been doing lots of tutorials. This is potentially compelling. I hope it's cooking related. And you looked at me first. Sorry. You got blindness? Okay. So, you need to be somewhere quite enough that it doesn't drown out the screen reader that you're listening to. Some of it just likes to realize on having it spoken instead of reading. Structure. Structure is always good. ADD. So, structure is helpful not just for screen readers but for somebody with ADD who needs to be able to just quickly jump to a section. Smaller form text like simpler instructions. Direct. So, smaller devices. Intellectual low vision overlaps. I think what the goal of the exercise is to get you thinking about for each of those disability types what are the things that you can struggle with or leverage from another disability type. And as I mentioned before disabilities come in sets. Often they're matched sets. Sometimes they don't match. So, you have to sort of prime yourself as you're building this thing into your question earlier Monique about can you build something for one and end up excluding another. Yes, you can. An exercise like this is the goal of an exercise like this is to have you thinking about more ways and if each of you champions one disability type, ideally you can point out to somebody else in your team oh hey, that's going to be a problem and then you start to have those kinds of conversations. And this can work within an organization it can work within a team it can work in chat rooms on the internet whatever works for you. Before I jump into the next section do you have any questions so far? I'm going to defer your question screen reader question for the benefit of captioning later. I'm going to defer that question until we get to the technical section because there might be some stuff in there that I explained that answers it and then you can ask me a question to really stump me when I don't answer it because that's always more hilarious. Anything else on what we've gone through so far? Okay, we're going to talk about user experience models. I want to qualify if any of you does any work with personas and user stories what you're about to see for these next few slides is not quite right I'm greatly oversimplifying an entire industry in the area of practice into a handful of slides but it's because I want to get you thinking about it a little bit more abstractly. At its simplest, at its very simplest user stories are talking about a particular user what that user wants and the value what value the user gets from that outcome and they're often written as user, I want outcome as user, I want outcome so that value in order to get value as user, I want outcome as some examples as a user on a sunlit patio I want to be able to read the content and see the controls I'm not talking about a disability I'm talking about a situational or a temporary impairment as a user in bed with a sleeping spouse I want to watch a training video in silence so that I can get caught up at work not a disability just a temporary situation in order to click links as a user with no elbow room and coach class with a tiny track pad I want to click areas to be large enough and adequately spaced if any of you flew here or worked at all on that flight maybe this is familiar to you also, you know, they leave the visor open and the sun's on half-year screen and then turbulence and somebody spills water terrible working and there's a baby shrieking they don't give you any more noodles as a user distracted by the television I want clear headings and labels so that I don't lose my place back to structure these are really, really oversimplified at that there are these really cool personas that are pre-written that you use to feed into these user stories these personas were put together by Sarah Horton from the Paciello Group and Whitney Quessenberry they did it for the book, a web for everyone the cool thing is these personas are free for you to download they're available I want to say they're at uxmag.com there's a link in the slides which you'll get later but these are pre-written personas for people with disabilities they're awesome because now you can hear about Leah and Leah lives with fatigue and pain and now you're not just as user, whatever you can say, as Leah I want to be able to shop online but it's very difficult with my wrist to be able to type in all the stuff you ask for on the shopping cart so you've identified who the person is that's where personas control that can bring the greatest value, they're a way to try to convey empathy, they're a way to put names with some of these collections of disabilities there's always a catch though in that organizations that rely on personas will often throw away the disability personas they're trying to get down to 3 personas, 5 personas somewhere in that number and when they do that they're going to take Leah they're going to take Vishnu and they're going to say now we don't need to worry about Vishnu who has low vision or Leah with fatigue and pain doesn't represent all of our users so you have to get a little bit creative I suggest that at the very least you take a look at my talk from last year Selfish Accessibility where I pitched the idea of taking some of these concepts I've talked about temporary and situational impairments and folding them into your existing user stories the trick is to think about who your stakeholders are and think about their situations if I'm a stakeholder on your product if I'm a stakeholder for your team, if I'm a person who signs off on what personas can be there or I'm C level and I rely on the software doing what I want I don't even need to see the personas but if I'm represented in some way I'm more likely to go along with it and this might be my persona if I'm that guy I work when I should be relaxing I relax when I should work I have a weird way of doing things it's very inefficient and frustrating I live between motorcycles so as a result I have the captions on my television all the time because these guys like to rev their motorcycles and show off whose muffler is worse it's a thing so I can't always hear they'll start that up in the summer evening when I'm watching something and if I don't have captions on I miss as long as it takes me to find the closed captions button I work late at night with the television on I need some white noise that means I can be easily distracted or I can work for a long period I use subtitles and Netflix I keep all of my screens as dark as possible in the case of my phone I keep my screen as dark as possible because I'm saving battery because I will just burn through battery swipe right maybe same thing with my laptop the darker I can keep the screen the more battery I'm going to save but on top of that I don't like scorching my retinas your work environment should be as bright as the surrounding environment otherwise you're causing eye fatigue turning down the brightness is a great way to help with that so this might be me as your stakeholder you might have a stakeholder on your project or a C level executive or a high level person or a client who always works on the train that person commutes every day that person sends email from the quiet car or from a random spot on the train maybe she's always coming in on first class over a border awesome, maybe account for that maybe write your persona to reference that trait that she's in a noisy car that the train's always bumping around that there's always this distraction of other people that it can get loud in there when you write those into the story when you make those part of the description of your persona this narrative section you're going to get more buy in you're going to get more stakeholders and clients who see themselves represented in the things that you're trying to solve this makes it easier to try and ensure that those personas those stories are represented because you're not representing a disability type you're representing the temporary or situational disabilities that the people who make these decisions experience all the time I lose anybody on that how many of you work with personas so how many of you are offended at my really compressed version of personas and then rejiggering them that's very nice of you to say you know there's no grade in here you just sort of hang out and do stuff what's funny is I've gone through that a little bit faster than I expected but the good news is this is where we're going to our third group exercise we're doing four group exercises this is the third one so if you're still awake this is good what I want you to do is as a group develop a persona it's a proto persona it's a virtual persona it's a crap persona it's not a professional persona but I want you to come up with somebody assign a name assign an age maybe a job come up with a quick interest or what the person is about and then just come up with a couple user stories for your persona that relates to that interface that you're putting together so if you've put together if you put together a pizza ordering screen I'm simplifying I'm forking off a little bit from e-commerce you know as as Leah who can't go to the pizza store I want to be able to get pizza without having to talk to somebody on the phone because there are always a bunch of jerks okay that is a user story so simple persona name age quick quick narrative come up with a couple user stories related to your interface you have 15 minutes to go do that and I will walk around to answer questions I thought I hit mute the way you built your persona so when you go back to low vision, which one has you go back to to links back to the so it's going to be by Anna can you put in a time so what kind of number is it it's going to be one it's going to be the it's going to be the it's going to be think there because I'm not a old I you anymore I I I might be right now or sorry The full glory of different spaces is out of this piece. So when someone likes to shop from the West, they're like, what are you doing? I'm just going to go over there now. Who lives in the outback? It doesn't have to get on the place where she's standing through. She can't see. It's fun. I think that he can't see. That doesn't make sense. She can't see. Yeah. Everybody who gets an Augusta comes to see us. Well, that's all it's possible. She can't see. That's not true. This is what's seen now. This is what's seen now. This is what's seen now. Sorry. There's a Prima-chance in the corner. You're on camera. So, if you can't see, you just can't see. You're on camera. You just can't see. The Prima-chance is outside. She's probably just standing there. She can't see. This is what's seen. This is what's seen now. She's at her place, and then she asks a question. Okay, what are your thoughts on this? For example, if you think the job you're doing for my eyes is very clear, and if this is, for example, the entire region that it's brought to, I mean, Rosa, absolutely nothing, everything's fine, really. But you can't see, whatever it is, it's all reported, so that's a good point. Just when you throw it up, it's not for me to interrupt you for a moment. Do you consider that a system check now? Right now, because... Is something easy? Yes. I mean, that happened to me when I wasn't traveling, and I'm like, so he wants to do... And I have glasses against him, and I wouldn't think that I tend to lose that. In the accessibility world, we consider eyeglasses to be assistive technology. Because it's true, it really is, but it also normalizes the system. Half of the people at this table are using assistive technology, or anything about it, because you don't necessarily think about it. So I think that's a good example. Ask me about that. It's a blank, so for all of us, it's a problem for me, so it's a little bit too busy. Well, it's good, because I didn't write anything that way. Anyway, please, I'll be working. She's assisting me. We're okay. I saw her interest. She said she's not assisting us. It's good, also. I recently watched The Handmaid's Tale. Okay, she likes when you find a smile. So that it would basically be a part of the system. That's the help, the help. Captions. Just to clarify with some... She likes to eat. How some of the interest affect her. How her vision of that is for some of us. To see if we can help her. With who she likes to eat and who she likes. Okay, at least she likes movies. She's our good person. She's our good self. Our good and our bad self. But I'm not sensitive to it. Yes. I feel that way, um, and there comes the people who love her. Some of the people who love her. Especially the folks. Versus, I'm not saying. Eight. She is outgoing, but she doesn't prefer anything. Well, I don't like you. It's my accident that doesn't have that feeling back. So we'll go and call it. I don't see a lot of people on this platform. Do you want to? Yeah, I think we're fine. He's fetching something near a few research points. So, what's in the garden? Yeah, I see a lot of it. It should be great soil. So I think that would be great for her. I think it would be great. What she does on the internet. That's one thing. But she also aims to, uh, find her. I think she's applying for, uh, a state assistance for her job. Yeah, I think our plan is to find her. Oh, yeah. She is the, uh, the one who started the job. Yeah. Yeah. Yeah. Sending to the president. Yeah. Yeah. Yeah. What are her challenges in real life? No, I don't know. When I see challenges, I don't know about captions or stuff. Her challenges in real life. For example, she doesn't have a job. So bad. So bad. Because, uh, when you have a lot of persona, you have to, uh, see what are her, or her challenges in order to, uh, take some action. And, uh, yeah. She doesn't want to buy something online. Okay. That would be a warning. Yeah. Faster. Yeah. So, uh, she's a great person. Yeah. So he takes guidance. Yeah, great. Yeah. Yeah. So she's looking for a job. She wants to move out and have big earnings. So much. I want to ask you, do you agree on that? Do you have a boyfriend? Friends? No, no, no. She's a boy. She's a boy. Nice little girl. Can I have a letter? Yeah. Can I have one? Yeah. Maybe because he's an international. I understand how you feel about that. She's a boy. Yeah. She's a boy. Yeah, I understand how you feel about that. No. Maybe because you're an international. Can I have one? Sure. Can I have one? No. Maybe because you're an international. Can I have one? Yeah. Can I have one? Yeah. Maybe because you're an international. We said that she's looking for a job, she wants to work as well, she's all by this. She wants to maybe teach psychology. Maybe get a job. She's looking for a job, she wants to work as well. Okay, I can tell how excited everybody is about their fake person. I look forward to being picked up in the Marvel Universe. So what I'm going to do is I'm going to hand a microphone to the first group. I'm going to start because you're on my left. And then you will tell me, you will read off the bits about your persona and user stories. You're looking at me, does that mean you're doing it? Because I want to get this captioned as well. Okay. Okay. Folks, party, other, hey, team on the right side. She's going to start reading off her persona. We're going to continue this exercise. So please. So I'm Hannah. I'm 26 years old. And I have low vision. Basically, I am astigmatic. So my interests are, I'm an outgoing person. I like dancing. On the other hand, I like to stay at home and watch Netflix. I am outgoing, but I don't like going to cinema. I like Netflix because they have the titles that I can see very well. On the other hand, I started psychology. I went to college. So I passed my exams and I'm now looking for a job sending CVs online and resumes. My aspirations, because I live in a mid-city, I live with my parents and I want to be more independent in the future. So I want to move out and get more incomes. And I want to teach psychology online in the future and also to be a psychological assistant in school. So that would be my aspirations for the futures. Okay, that's Hannah. Yep. Okay. I like that. Thank you. I look forward to when we integrate Hannah into the next round. Does Hannah have any videos on YouTube of dancing? I understand there's money in it. No. Okay. Who from this group is going to take the microphone and report? Don't make me drop it. Okay. So we have Matt. Matt is 72 years old. He doesn't live near shops and is not good with technology. He's also, yeah, he can afford to have a car. He likes to eat healthy and cheap food. And he's a vegetarian. He's a pensions and he likes to read. And as Matt, I want to order groceries online so that I can feed myself. Good idea. And as Matt, I want clear instructions on how to order my groceries online so that I'm able to place an order and understand. And as Matt, I want to see what I'm spending so that I can stay within budget. As Matt, I want to see personalized discounts so that I can spend my money wisely and eat diversity. And as Matt, I want to see the ingredients so that I can make sure to eat healthy. Okay. I feel like Matt should go out clubbing with Hannah. They might have a really good time. Who from this table is going to report? You're looking at your phone. You got nominated. Okay, so our persona is Andriana. She's 31 years old. She lives in Belgrade and she's not married, but she has a cat. She's dyslexic, but she didn't know growing up that she's dyslexic. So as a result, she's not that educated. She has a physical job as a cleaning lady. And she recently fell on a slippery surface at work and broke her right hand. And it's the hand that she's using. So it's what's troubling. And now she wants to sign up for an online course to educate herself more. And so she wants to take a course to expand her education so that she can get a better job in quality of life. And at the same time, she wants to apply online for public assistance until she's capable of working again. And she also has to apply online to get a certificate by a doctor. And she needs to go online and do some paperwork. We tried to relate to her. Okay, Andriana was her name? It's a lovely name. Thank you. Thank you very much. I'm pleased that nobody came up with a pirate. Because I've seen that in some of these exercises before. Pirate, Pete. He's got one leg and he's blind in one eye. Well, he wasn't blind in his eye until a bird pooped in it and he only had the hook, so, yeah. Anyway, so, so far you have come up with a rough idea of an interface element. You've talked about some of the overlapping needs and challenges for different disability types. And you've put together a persona, very lightweight persona of a user of that thing. So, all of that's in your head. And I'm sure you can guess that when we come around to the final exercise, we're going to pull that all together. But in order to pull that all together, I have to go through 60 slides in 12 minutes. I misread that. I misread that. But I have a pile of slides to go through. And this is what I generally call the technical bits. This is not going to be highly technical. There's going to be some code references in here. For those of you who have specific code questions, you want to get into the weeds on stuff, I'll answer what I can that doesn't blow up the timeline I'm trying to keep. And then for any more technical questions, which are sometimes my favorite questions, we can table those until afterward and I can chat with you now or after you've gotten me sufficiently drunk, which will be a problem because I don't drink. But you can try. I mean, it'd be hilarious. I'm going to get with enough Coca-cola as I'm a mess. So we're going to dive right into what I will call the technical bits. Right off the bat, images. If you're relying on images in your pages, you need to account for what happens when the image does not display. And that image could not display because the user can't see it, because the network is broken, because you coded it poorly, any number of factors. You need to have text alternative. Can you still make sense of the page if that image is missing? If not, you might have a bit of a problem. Is content missing? As in, did you have a piece of text that was in that image? That's also a problem. You really shouldn't be doing that. Can you still use the site if the images disappear? This isn't just inline image tags, but also CSS background images. This counts for icons, however you generate them. I'm using a broader term here. You have weird gradients that come together. You're doing like one pixel, or I'm sorry, a single div pacman, like super high detail stuff. Still, if it doesn't appear, you've got the same problem. When you do provide alternative text, is it useful? Does it make sense to the user within the context of the page, that piece of the screen, and potentially even outside of it? Do you account for CSS background images? Are you using pixel sprites? What happens when that sprite sheet doesn't load? Do you have alt text, which you can't have on CSS, or using some sort of off-screen technique? What about SVGs? How are you calling those? You're calling them via image elements, in which case it's an alt attribute. Are you calling them inline, in which case you might need title attributes and title elements, description elements, and then aria in order to all connect it? Is it just a weird inline base 64, calling it by reference, etc.? You need to consider those techniques as well. And again, CSS generated symbols or icons can be a problem when they fail to render. Did anybody see that classic Dutch style portrait of a woman that somebody made out of just CSS that was circulating on the web? It was awesome because people started to open it in old crappy browsers, and it started to look very cubist and strange. And I thought it was a great example of all these techniques that we're coming up with to visually represent stuff can render in so many different ways now, and we're not always prepared for that. This is from Buffalo Soccer Club. It's an inner city youth soccer program. I helped start back in the old days when I had my own company. It has a bunch of images on the page. We need to make sure that when the images don't load, though, it still makes sense. All the context is still there as appropriate. When the logo goes away, I at least have alt text that says Buffalo Soccer Club. So screen reader will still say it. You can still see it on the screen. When the icons on the navigation go away, there's nothing to replace them. And that's actually okay. All they are is mostly decorative. They're providing a little bit of extra context, so I don't have to worry about doing anything special. When the picture of the kid goes away, the big happy kid about to kick a ball who I think 30 seconds after I took this photo face-planted in the grass because he stepped on the ball and it was... Oh yeah, we call it soccer for some reason. Sorry. It's strictly decorative. It's just a decorative image. Its absence doesn't change the meaning of the page. And I don't want a verbose alt text that says, here's the kid who did a face-plant five seconds later. That's not useful for most readers, so we just completely exclude that. I'm just going to be flying through things here. Typography. Typography is huge. It is incredibly important. Most of the information that people are interact with online is via text. Whether they read it, whether it's spoken to them, whether they zoom in on it, whether they print it out, highlight it, select it, paste it, email it, whatever. WCAG 2.1 came out just over a week ago. WCAG 2.1 is WCAG 2.0 with some additional stuff on top of it. I'm going to spare you all the details of what that means. But they've actually codified in there some of the rules so that if a user makes these changes, your page should not fall apart. If a user chooses to change the line height to 1.5 of the font size, your page shouldn't explode. There shouldn't be scroll bars everywhere. They should not be told to install some special software and nobody should come knocking at their door. The same thing applies for after paragraphs, letter spacing, and word spacing. Independent of that stuff, good practices involve things like avoiding justified text. Don't have a block of text that goes all the way to the hard edge like newspapers do. It creates awkward gutters. Rivers of white space can be difficult to read. Avoid italics. Italics have a purpose. They should be limited to those very specific purposes for titles or limited cases of emphasis. But italics should not be your go-to style. Use larger text. My favorite approach is to never set the base font size and never set it. The only time I ever set a font size, it's usually something like 150% if I want an H2. If I want to adjust the letting, it might be 1.5. Everything works off that base font size that the user has already chosen, whether the user chose to change it or decided that the browser default was completely adequate. Use good contrast. WCAG has a bunch of rules about that. Use clear, concise writing. Plain language, simple, direct, and to the point. There are... Give me just a moment. There is a typeface designed for people who have dyslexia. You might have seen this on the level, level postcards that have best practices. I think we have some sitting in the front there. Regan is going to give out later. This might be useful for some users, and some users do note that it is useful, but you are not going to fix readability issues by choosing a dyslexia-specific typeface. Don't think that you can just give people the option to toggle and all of your problems have gone away. That is inadequate on its own. You need to follow the general good practices of typography. Question? I'm sorry? Oh, zoom. Yeah, so zoom is a little bit different because zooming... I don't qualify as a text thing, but users are going to want to zoom, to zoom in on icons, on buttons, on pieces of text. Allow it. Don't ever disable it. It is a WCAG failure to disable it, but you want to allow people to zoom to whatever text size they want. And I think WCAG 2.1 has kicked it up to... It was 200%. I think they kicked up a little bit higher now before the page breaks. Does that answer your question? Sort of? Okay. Then we may need to chat a little bit later. That's lovely of you to let me off the hook. I'm going to take a drink now. That's still water. Hyperlinks. Maya touched on a few of these. Good things. Maya touched on a lot of this stuff. Rian touched on a lot of this stuff yesterday. I'm touching on it. It's well-known stuff that's heavily documented. So you don't even need to listen to me. You could all put your heads down and declare it in app time. Hyperlinks. If you see any cases where the link text itself is click here, more, link to, download, go away, that's a problem. If you're using all caps, that's a problem. That's a problem. Emojicons? Does anybody remember emoticons? Are they still hip? No. They just became, for me they are. Yeah. Colen write parenthesis. Emoji, emoticons, those are not very useful bits of link text. Are you warning users before you open new windows? If you have target equals blank, what are you doing to tell the user? More than an icon, is it text that's available to a screen reader? Do links to downloads provide helpful info? Hey, you're about to download a 25 megabyte PDF of our menu. We only sell two kinds of hamburger, but here's a 25 megabyte PDF. Are you using pagination links? Not infinite scroll, but when you get to the bottom of the page, the next page, can I jump to page 7? If it's an alphabet, can I jump to J or do I have to keep scrolling until Insanity sets in? Are your links underlined? Like the simplest thing to do. Are your links underlined? And if they're not underlined, are they otherwise obvious? Bold alone? No. Color alone? No. Underline is the safest and simplest, and I have a whole rambling article about this as well. If you're using images as links, is there alt text on those images, and is the alt text appropriate for the link? Not just the image. The alt text for an image might be different when you use it as a link. You should always consider that kind of context. And is the link text consistent? If I have a page that's about my company, my company is Adrian Roselli LLC, whenever I'm linking to that about page, that link text should be or similar to about Adrian Roselli. About Adrian Roselli. If I ever have that guy, it's not an appropriate link for a number of reasons, but it should be consistent. I should be using the same text each time I use that URL. It breeds familiarity with your users. I want you to remember that you are not Google. Nobody in this room is Google. Okay, nobody corrected me on that, so I gambled in one. We all know Google's layout. We're all comfortable looking at the Google homepage and understanding what's a hyperlink and what isn't. Most users probably aren't visiting your site daily or your piece of content, including that thing in your software. And if they are, maybe they don't care anyway. Relying on color alone for links won't be enough. Please underline them. If you are going to use color, you need to follow contrast values that are already outlined in WCAG. The stuff's documented. This is from 2.0, which is still the same in 2.1. 2.1 goes further to point out, hey, if you're using icons and emoji and other stuff. Like this, I don't know what the hyperlink is. And when I've tested users with these pages, I found that users go to different places. Some go right to the image. Others try to get their cursor just right to click the title. Others just wing it around until it turns into a hand. Screen reader users, if they're unlucky, everything is announced as one link. And then they get very cross or worse. There are five different links. And they hear the same link with five different pieces of text. And they have to parse it every time. Are buttons okay? Buttons should only be used to affect something on the page. Ahref is how you take people to a new page. If you're submitting a form, input type submit is totally fine. But if it's a call to action and visually it looks like a button, it should still be a link. Tags. Yeah. Those are probably links. On my site, they are links because they load a brand new page with a different URL in the address bar. Well, yeah, I try to limit to only a handful of tags. But tag clouds, things like that, links. And underlying, yes. Now, I want to qualify, the underlying applies to content links. So you don't have to underline your sidebar links, your cloud, your navigation. Things that are part of the general layout you don't need to underline. It's that in content stuff that you need to make sure it stands out. In this case, I would underline the thing that I want to direct people to. If it's, but there are different approaches and I'm not telling you that any other way is wrong. I'm telling you, if I was doing this, I would probably make the image and the heading the link. It would be decorative. And this would be underlying. Yeah, it can absolutely become noisy if you have too many underlines and there's too much going on on the page. And this is part of the thing about web accessibility is it's all about context and understanding the users and what you're doing here. So I'm making this general statement, your content links need underlines. They need underlines. Now, if you have special exceptions to the layout that very strongly conveys that that's a link, okay. But still that's the kind of thing where you test it with users to be sure. Sort of related to the links thing. Hit areas. WCAG 2.1 has just introduced target size but they've introduced it at AAA which means you're probably never going to be required to honor it. I think that was a mistake but that's my opinion. That being said, we already know that some companies out there do some standards relating to this and these aren't the first. We can go back as long as graphical user interfaces have existed since Tog was writing about this for Apple in the 80s since IBM was playing around since Xerox first created mouse interfaces. Hit areas need to be large enough to hit whether you're using a fine pointer, a pen or your meat stick on a train. You need to be able to tap it and you need to leave space in between those tap areas. I'm so glad that I don't use Tinder but if it was a tap instead of a swipe, I might tap the wrong person. That would be very awkward. I'm sorry. I didn't mean you. Go away. Fitt's law is sort of relevant here because it talks about the time you spend to get to that target as a function of the size of that target. So how quickly can you use an interface that is large in area is and how much space you have between them. Apple in its guidelines says you need a 44 point minimum size. Microsoft says 48 with a 2mm spacing. Android says 48 with 8 device pixels. BBC is not a platform it makes interfaces and they have chosen 7mm inside an exclusion zone of 7mm. What's critical, what I want to point out here is we have points, pixels, device pixels, and millimeters. I can't seem to get anybody in the industry to go to ARC Minutes as an effective unit of measure because ARC Minutes are the best unit and I'll do a talk about that someday and you will all fall asleep. But until that day, just recognize that they have standards, figure out what your standard is, make sure that it makes sense and I have links to all of these so you can read more about them. Make sure that it applies. This is Apple giving a good example. Meat stick with small buttons, meat stick with bigger buttons. I have the tiny hands of an American. This is from Microsoft and they've done a good job of identifying target size and the padding before the next target so if I miss I'm not accidentally hitting the wrong thing. Android and their guidelines similar thing, they show the spacing, they show some examples and BBC showing it in the millimeters and the exclusion zones and all the spacing and all the recommendations around it. A lot of this stuff is pre-written. You don't need to invent this. You can just go steal it from somebody. I'm a big fan of stealing stuff. Color contrast. Biggest question to ask is is there enough contrast? Really important to know going into things. Can you tell what a hyperlink is in the rest of the page? That's part of the reason why underlines are so critical. Are the menus obvious? Can you see that weird hamburger icon or the kebab icon if you're using Android, the three dots? It's a kebab. It's a kebab. Otherwise it's like three poops and that's not cool. Apparently poops is a universal word. Who would have thought that? WCAG 2.0 identifies contrast 4.5 to 1 for normal size text, which is the default text in the browser. And if you're doing large text, 3 to 1. Also note that they do their sizing in points, which makes me angry. Arc Minutes, I'm telling you. I'm trying to get W3C to do it. WCAG 2.1 takes it a step further and says, by the way, your user interface components, like your buttons and your funky icons that maybe share things, etc. 3 to 1. 3 to 1 is not that hard to hit. Basically it means don't put blue on blue. It's a little bit more than that. As I mentioned, WCAG 2.1, typography, icons and glyphs, form elements, error messages, placeholders, hover focus and selected states. Placeholders, by default, the placeholder color in your browser fails the contrast check. Against a white background, you need 7.6, 7.6, 7.6, in order to meet the minimum contrast for your placeholder text. By the way, at that contrast setting, it looks like normal text. Maybe the field's been filled out, so maybe avoid placeholders. Hey, Rihanna, what's up? Firefox adds opacity to it, which makes it even trickier, so that's another thing you have to consider overwriting. Your hover focus and selected states are very important, so I can tell, hey, this is the page I'm on, versus this is the thing I'm linking to. I'd also like to note, red on black and red on white also fails the color contrast check, so you just need to work those colors a little bit more. This is the color palette from the post-yellow group. This is from our style guide, and we've identified what our core colors are. We've also identified what combinations this means if somebody is hired on our team, maybe we get a new marketing intern, and here she says, yeah, let's make these new postcards with accessibility standards. And we see this color, we'll just be able to say you didn't read the guidelines. You didn't even have to eyedrop it. All you had to do was not do that. And that's really an important thing to do if you have style guides or internal standards to document this kind of stuff. Label your fields. When you're working on a form, make sure that users, when they first come to that form, get all the instructions they need. The entire form. Tell them upfront. Also provide a programmatic indication of required fields. And that could be with a required attribute and potentially in addition to ARIA required so you can catch all the screen reader users. Provide formatting advice. Tell them, hey, month, day, month, year, century, something. Whatever it is, tell them in advance so that they're not being thrown back error messages. And a good developer is going to accept a multitude of formats anyway as long as they can be parsed. Use ARIA to associate any formatting advice. ARIA described by is a great way to connect them. Avoid placeholder text. Contrast issues. Cognitive issues is not always easy to tell when a field has been filled out. Especially if you're using it in place of a proper label. Then what was that field that just filled out? I have to delete three fields to see. Associate error messages with fields. Programmatically, but also maybe if you have a block of error messages at the top of the page first name is missing. Provide a link. If it's a long form, I might appreciate you just taking me right to the field. Especially if your error message style is terrible and I can't tell which field is broken. Think of it as a good backup. Simplest way to do this though is use a label element. Make sure the for attribute corresponds to the label to the inputs ID attribute. A label text provides a larger hit area. It's a little bit overlapped before what I said about hit areas. Label text means that I can click the word and it will put the focus in the field. I can click the word and it will toggle the checkbox of the radio button. Label text should generally appear above the left of text inputs for left to right languages. If it's a checkbox or a radio button, put it after it. Make it appear to the right. And if you have grouped fields like a group of checkboxes or a group of radio buttons or a group of address information, wrap it in a legend in field set. If you don't like the styles that they provide and you can't override them, that's okay. You can rewrite that using ARIA. There are group roles you can use just in case anybody is a little bit worried about that. This happens to be... Oh, I have audio on this one. I don't know if it's playing yet. Let's see. This is Indiegogo using NVDA. What's the field? What's the field? I don't know what the field is. Indiegogo... Oh, here's the best part. And then when I leave the field it erased it. Indiegogo does not work for screen reader users. It's a massive sight. None of these are labeled properly. These aren't even placeholders. These are labels that they did not associate with the fields properly. It's the credit card number. Credit card is about the only one that reasonably works. So... There are lots of sites out there that are successful and do it wrong. Being successful as a business just means you're leaving more money on the table. But here you can at least hear that it's announcing those fields. All these other fields, it did not provide the appropriate labels. Okay. Did I do that right? Yes. Yay! There's always a risk NVDA is going to take over my machine and sound like a Cylon attack. Structure. Labels, by the way, are an awesome part of structure. Just in case you know, Field Set and Legend, awesome part of structure. HTML5 already has this beautiful structure built into it through sectioning elements. The header, the nav, the main only use one per page. A side footer and a form, maybe even your search form. If you use those elements screen reader can jump right to the main content of the page. I can jump to the footer. I can jump up to the header. I can jump to the nav. If you have three navs on the page, that's okay. Label them. There are a bunch of tutorials on how to do that. It can be as simple as an ARIA label or visible text or whatever it is. But I can just press D to cycle through all the landmarks on the page in my screen reader. And there's a really cool plug-in, Adkinson wrote. He's with the Pasella group. Funny. All the awesome people are there. Whatever. Ignore her. The landmark extension shows you all the landmarks in your page and will allow you to do landmark navigation with a keyboard as well. You don't even need a screen reader. It's kind of awesome. This is a layout that might look familiar to many of you. It's probably a web page. This web page is made accessible by ensuring I use the right HTML elements. And if I'm supporting a really old browser, I can just attach these roles. Header role banner. Main role main. Nav role navigation. Footer role. Content info. I feel like somebody made a mistake there. And it wasn't me. Form role of search. Aside role of complimentary. I don't know why they chose content info instead of just footer. I don't know why they chose content info but it's a whole bike shedding conversation. Now this might be the responsive layout of that same site. And by responsive I'm specifically talking about the mobile narrow screen view. So if I turn my laptop sideways or I collapse my window. But all we've done is we've stacked that layout, that mobile first approach and it's still the same stuff. Header. Nav. Form. Main. Aside. Footer. Whatever's appropriate for your site. But by using HTML5's main landmark regions, you're already in good shape. In addition to that, use only one H1 per page. The H1 should correspond to what the page is about. It should correspond to the title element. Because that's why I'm here. That's the page I'm reading. It doesn't have the site name and the five colons and the bar and the other characters you put in there. But if it's about this company, don't skip heading levels. Don't go from an H1 to an H3. Screen reader user or somebody like me who might view an outline view of a page will think that content is missing. Where'd the H2 go? Do I have to click something to display it? Uh-oh. To that end, use appropriate nesting. So if you're talking about dogs and then you talk about breeds and then you talk about Labrador's, you would come back up and see where they live, all dogs, whatever it is. Make sure that structure makes sense that you can parse it. There is no document outline algorithm. I don't know how many of you have heard about that before, but for those of you who have heard about the document outline algorithm, it is a fiction. It never existed. It was never in a final HTML specification. It was only ever in a draft. The document outline algorithm said each one every time used a section or article and the page would automatically figure out the proper structure and convey that. No browser ever wanted to support that. It doesn't exist. So just use good heading structures regardless of how you're using those elements. My general rule of thumb is anytime I open a section or an article, it should have a heading anyway because I'm really creating a new section of content, a new chunk of content. If I look at an article of mine and I just look at the heading structure, I can tell pretty quickly. There's what my page is about. Be wary of guarantees. H2 would be evaluating vendors and tools and then I have all these tips. Look for accessibility tickets. Ask around. Step back out of that. What to do when you've been burned. Step out of that. Some examples and then I say sites that do it wrong. Typeform, Slack, Wix, Discus, Poly, etc. So I have some structure to this page. You can see how it's organized. And it's pretty easy to get this visually. There are a bunch of tools that do it. I use Chris Prederick's Web Accessibility toolbar. It has a document outline feature and it shows me that view. And I use that when I do audits because it's awesomely handy. Other ways to structure your document includes using lists. Ordered lists, which put things in numbered order. If it matters what follows another thing, use an ordered list. If it doesn't matter, if it's a loose collection, unordered. And you can use description lists for key value pairs. Descriptions, definitions used to be their name in older, cooler versions of HTML. As an example, if you have a recipe, the instructions should be in order. Boil water, add pasta, drain water. If you drain the water before you add the pasta, you have an ordered list. The order in which you put the pasta, water, and olive oil on the counter is irrelevant. This is just what you need to do it. And on the definition list I need one pound of pasta, four quarts of water, not four quarts of olive oil. If you do that, let me know how it is. I've always kind of wanted to do that, just that big thing. I'm sure it'd be terrible. Be keyboard friendly. I think I have a bunch of slides on this one. Be careful with tab index. Tab index is dangerous. I see people add tab index to things in order to allow them to tab through a page that's not necessarily a good idea. You use tab index negative one if you're going to use script to set focus on something, like a dialogue that you've popped up. It does not put it in the tab order of the page. Tab index of zero, zero will allow the user to set focus to it. You'll see this in when people do a div, tab index zero button because they hate their users. Tab index one or greater, don't do this. It totally messes with the tab order of the page. If you do tab index one, two, three, four, you can go visit a site and as soon as you start tabbing you can get trapped in a crappy captcha, which often use a tab index of three, four, five, six before you get into the skip page link. Positive tab index values will always get focus first on the page before the regular content on the page. So don't do that unless you want to force your users into your terrible nonsensical flow. If you have scrolling content boxes, that's a thing. You might want to remember that keyboard users can't scroll those content boxes. They can see them, but they don't have a mouse. They don't have a mouse wheel. They can't put focus on it in order to make it scroll. If you have content that only displays on hover, remember that your keyboard users also probably cannot access it. A technique to get around that, like a scrolling area, would be to give it a roll of region and an aria label so a screen reader user knows what it is and give it a tab index of zero. Now I can put focus on it and when I do that, I can start to scroll. So in this table where all of the text gets clipped, I have scroll bars and all I'm doing is tabbing through and then using my arrow keys. This is one where the text only expands on hover but because I've given it a tab index and a focus style, the focus style matches the hover style and it expands to show me the stuff. So there are cases where you can use stuff we tell you not to use and it can actually benefit the user. The trick is to be keyboard friendly. Emoji are a thing and I think I have video for this as well. Emoji are tricky because they sometimes convey too much or too little information. I understand that peaches and eggplants are popular with the kids for Emoji. Am I wrong with that? Does eggplant translate? It's probably for the best I didn't put it up here then. It's the big purple... Aubergine! Thank you! So this is listening to it in NVDA. So using the mouse I have a tutorial that shows you how to do this and I also have it support a keyboard user by putting tab index on some of these so that just the ones where I put tab index you can tab to them and see what's going on. Let me try in place again. Graphic poop. Graphic mouse. The idea here is I've taken something that's strictly visual and I've added support for a screen reader and then I took something that is keyboard only or I'm sorry mouse only and I added keyboard support to it and by the way, I use a mouse and I don't use a screen reader and I don't know what some of these really cool Emoji are that the kids are using so it adds value to me considering me a cognitively challenged user because I need that assistance. Oops! That plays automatically. Do not use div nor span as a control they're not links, they're not buttons they're not your really cool select menu. Try and find real controls first and foremost. If a control takes you to another URL if you're moving somebody to another page AHRF it's important to note it does not fire on the space bar if I put focus on a hyperlink and I hit the space bar can anybody tell me what happens I'll take that as no if I hit space when a link has focus my screen the page scrolls one screen full so if you have a link that you're calling a button and maybe you put roll of button on it button does fire when I press the space bar so if you put roll of button my screen reader will tell me it's a button I'm going to hit the space bar because it's the biggest key on the keyboard and nothing's going to happen because you're using the wrong element and you're recasting it and lying to the user about what it is if the control changes something on the current page just use a button type button is that simple if you're submitting a form field input type submit button type submit for internal style reasons code style reasons I always counseled my clients to use an input type submit so they wouldn't mentally confuse it with a button I would try to get them to think input type submit forms button type button for opening and closing boxes on the page and scrolling and doing stuff like that versus a link which takes me to another page it's really easy to style this stuff one of those is a button one of those is a link one of those is an input type submit but they all look exactly the same there's really no reason to use the wrong element you can make them look however you want make sure that you define focus styles anywhere that you have a hover style add the focus selector so when I put my cursor over something if it changes color, if it catches fire if it sends an email to my grandmother make it do that when I tab to it as well make sure that you don't have this style in your style sheets if you're using a CSS reset if you ever see outline none unless you have a damn good reason for using it just remove that by default at least stuff will work generally don't rely on browser defaults you can test this just with the tab key you can tab around pages where you are at all times there are cases though where you will see pretty quickly how the browser default is wildly insufficient this is a screenshot from Chrome I'm on a Google page this Google page is telling me how to use Chrome and I'm tabbing through with my keyboard and the default focus outline is blue and the default background color of their navigation bar is a very similar blue so I can't even see you might be able to see it but further back you might not be able to see it so don't rely on the browser defaults create good styles make sure that they work the same for keyboard and mouse users this is me trying to use the now gone virgin america site if you look down here you can see the URL keeps changing I'm tabbing through the page I'm trying to see where I am on the page I have no idea where I am on the page until it scrolls it scrolls awesome I still don't know where I am still not a clue the page keeps scrolling I'm hitting the tab key no idea and it isn't until I get to the very bottom of the page that I start to get a sense of where I might be this site, the virgin america site again thankfully shut down now the virgin america site won all sorts of accolades design awards, it got articles in popular condonast magazines whatever and it was a wildly unusable site and one day they said we're going to make it accessible so they hired a third party and they added a link that says see the accessible version and the accessible version was worse those of us in the accessibility community just piled on we had so much fun it was just this twitter game of who could find the next most annoying thing didn't work with a screen reader their groups of radio buttons weren't unique so you could select all the radio buttons at once the colors were wrong there were no graphics but they had weird image tags it was just a mess and that probably would not have happened if they just left their focus outlines on because then we wouldn't have started picking on them and made them feel they had to respond as poorly as they did display versus source order this is something that people often forget about you can use css to reorder your code so you can have your code a heading and a block of content more blocks of content and more headings and you can use css floats or absolute positioning to rearrange it you've been able to do that for a really long time and it's always been a potential problem with flexbox and grid it becomes even more of a potential problem specifically because you can use the order property in flexbox to rearrange things on the page the catch of course is that visually it might look one way but it might be announced a different way giving instructions to somebody can suddenly be meaningless whether they're just seeing differently than what they're hearing or the mobile or the desktop version have reordered the content or their css is broken they're on an older browser that doesn't support flex or grid the behavior of how the browsers handle this stuff might be different Firefox no longer does it this way they've changed but the idea was you could reorder stuff so in this example it will at least jump one two three four one two three four because that's the order it appears in the code over here it doesn't go one two three four it goes in the order that appears on the screen as I'm tabbing through that page these are two dramatically different experiences and they're just two different browsers I preferred the way that Firefox did it because it was following the code order and I felt that it would force authors to do a better job of managing that but Firefox eventually went that way which is confusing for users of screen reader users cited screen reader users and people following instructions you've heard me talk a couple times about how I'm repeating things you say for the benefit of captions are we really that low on time in my mind everybody uses captions and subtitles rare cases have there been other than totally blind people who don't use them in some setting regardless of your circumstances they should include an audio description they should include the speaker identification so you know who it is who's talking there's a great site craptionsnomercraptions.com where you can upload your captions from a YouTube video and you can review them to see and you can fix the really terrible stuff like this is a talk I gave in Sweden while so long to his Viagra I think what he was saying is this is Adrian Roselli do all your video audio clips have text alternatives are the links to closed captions or transcripts built into the player or are they a separate text link so if the player doesn't even load can I at least download that transcript is there an audio description available that you can reference later on I don't want to go too deeply into ARIA partly because I'm running out of time ARIA stands for accessible rich internet applications and the idea was it's a bridging technology between novel interactions and screen readers and other devices that will support it the idea was that HTML5 doesn't have patterns for things like tabbed interfaces and accordion interfaces and ARIA is there to help patch that up until an element might appear so while the HTML team discusses panels and panel sets that would take the place of carousels and tabs and accordions you can use ARIA to sort of spackle over that there are some rules to using ARIA use a native HTML5 element first don't just start throwing ARIA at stuff look for the element that does the job don't change native semantics do not change an H1 into a button do not change a link into a button different interactions, different behaviors all interactive ARIA controls must work with the keyboard they have to be able to perform equivalent actions if your users can't do that you got a problem you either got to fix your ARIA or come up with a different interaction do not use role presentation or ARIA hidden true on an element you can't really see focus because a screen reader will never know it's there these basically say this doesn't exist and by allowing them to put focus on it you're going to confuse the situation because they'll never be able to get to it every interactive element must have an accessible name there must be a programmatic name associated with the control sometimes it's visible like the text in a button sometimes it comes from something like the alt text on an image it's usually very easy to satisfy but make sure that you are at least providing that in a screen reader there are all these really cool pre-built pattern libraries that you can lean on to pull a lot of this information pattern libraries are a great way to document all the rules for your custom widgets pattern libraries allow you to define things like these are the keyboard shortcuts it needs to honor these are the different states that it has these are the things to click these are the messages when it goes wrong individual widgets can be used to put together a larger pattern library the aria authoring practices guide already has a pre-built pattern library you can go steal a ton of stuff from them it's like already built much of the code is already there the keyboard interaction is already defined it's not perfect but it can help you out if you've got a really really custom widget you've never seen before like a DDR style interface if you make people dance in front of their computer aria is not going to help you it's probably just a terrible interface this is an example from the aria authoring practices that's from their practices this is just a terrible mock-up of it but it tells you what's the tab order as I tab through it what happens what are the different roles and states that I pull out of aria to tell me what it does what are the different behaviors that we're going to see BBC has done a beautiful job with this pattern libraries the BBC has gone so far as to identify what the label text should say what the images sizes should be what comes first in the tab order they include things like this should be an H2 this is also an H2 they provide detail that's great for somebody on the design team and for somebody on the development team and everybody in between to be able to implement these patterns and they don't run the risk of having a new developer come up and invent something new or break an existing pattern I told you there were four exercises right yeah four this is the fourth and final one I feel like I should have started this sooner because like three of you were asleep and they're all re-on so here's what I want you to do I want you to take that user interface element and I want you to talk about make some notes draw on it whatever it is how you might code it think about those disability categories individually we're representing earlier think about that persona that you came up with Hannah, Adriana random guy Matt I'm terrible at this game and think about the changing needs that they're going to have those different contexts somebody might be totally able to use it in one context but if Hannah's at a dance club she's not going to be able to use Tinder in the same way why do I keep going back to Tinder anyway take 15 minutes and write something up and my plan is to wrap this up relatively quickly so we can get you out of here to reasonable time because I think I have like five slides at the end of this so go nuts what what what what what are you sending? what are you sending? that's just a high message okay so it's not the kind of one time that wait where is your first I think that he said that it's not a new text inside of the form, instead of the real form. So this could be the, I don't know what it's like, maybe they are the, never to know, never to know. It's not a copy or just an axiom. It's not a copy or just an axiom. It's not a copy or just an axiom. It's not a copy or just an axiom. It's not a copy or just an axiom. It's not a copy or just an axiom. It's not a copy or just an axiom. It's not a copy or just an axiom. Hello, hello, hello. Just a heads up, I was informed that I need to let you out with enough time to get to the closing remarks. So we're gonna go just a few more minutes. I'm sorry I'm not giving you as much time as I'd hoped to. We're just gonna go a few more minutes and then what I want to do is just have you quickly report and then we can run through my last five slides and I can set you free. I didn't even see your comment. I'm going to say that if you don't mind, you can run through the next round. But if you don't mind, it's not a problem. You have readable advocacy in the 20th century. You can't see your own work. You can't see your own work. You can't see your own work. You can't see your own work. You can't see your own work. You can't see your own work. You use your own multiples of sounds. That part of our, you can go through it, okay? You don't know if you've got the new job up there? And is there a new project, or are there some content different on this? Yeah. I thought we used to do that. It's been quite a time. But we can say that maybe we are at a time where we don't have a lot of time. How do you get there? Well, we want to spend time together. We're going to spend a lot of time together. Something like that. I thought about it. We're going to spend a lot of time together. So we're going to spend a lot of time together. Yes, we will have time together. If it gives the half a cent and recognizes yes, that's okay to follow the signs. If not, we'll get them back here and say, okay, if we are content. If not, we'll get them back here. And I think that's an issue. The question is not about the same thing. I want to say that again, I don't know if I'm going to answer it. Check. Check. Check. Check. Check. Check. Check. Check. Check. Check. Check. Check. Check. Hello everybody. I'm going to cut this exercise short. I'm sorry to do that mostly because I wanted to see what you came up with. What I'm going to do is in order to manage it in the time that we have is I'm going to give each group the microphone and I want you to very quickly tell me what your interface element is and a thing, let's just do one thing that you did to accommodate users and that benefit. So let's hear from your group. One thing? Yeah, let's do one thing. If you do it quickly we'll do a second thing. So what was your interface component? It was signup form for something and we made the checkboxes, sorry, the fields without the placeholder but with the label tag. We also added icons next to each field to let them know, maybe the dyslexic people know easier what's the label about. For example in the name and last name we put a little icon of a person. At the email we put the ads symbol etc. We used the big phones in our mind and we added a big checkbox and a big button so that they can click on it easily. I looked at your checkbox and what I like is that you have all of the text after the checkbox and the label as well. So they have a huge hit area. I could press it with my elbow from across the room. Somebody from this table, tell me what your interface component is and a thing or two or maybe more of what you did. Okay, our component is a shopping cart page but the product description area of that. Oh, product page, okay. Yeah, well no, it's the shopping cart but people can see what products they put in their shopping cart. Yeah, but not all the other stuff that's in the shopping cart. So we have the product name on the line so they can go back to the product so they know it's a link and we have a product image so they can refer to the stuff they're actually buying and we have a quantity box with big up and down arrows so people can increase or decrease. Increase or decrease and we were actually struggling with the way we were displaying the price like show the regular price, show what's the discount, is the price displayed as a discount or should you put a minus or a percentage. We were trying to figure it out. That was a hard part. If there's any consolation there are a lot of people who do e-commerce for accessibility who struggle with the best way to convey what's the original price, what's the sale price, how much is the discount, without providing too much information, without overloading the user. Yeah, what's cool is I think there are some case studies on this online. I can't remember who off the top of my head sadly. Thank you. All right, who from here? You're holding the pen? Does that mean it's you? Anybody? Oh come on. I think she just assigned you. Was your interface component and some of the considerations you make? It's just a form to be filled in order to send a message to complete information, to ask for more contact for more information. So just have four fields with names or name, general message, then GDPR consent and validation control for a recapture and a send button. We considered just the possibilities of having big elements so that they can be easily clickable. We were considering also the fact that GDPR consent to be given through not with a check box but with a radio button, with a message button, so that it can be reconciled, selectable also for blind people. And we just have a black and white interface so with not any particular color added to it so that it is accessible for everyone without any information conveyed through color. Okay, that's an interesting choice. We usually don't recommend going black and white because you can convey valuable information with color to people who can still see color. That doesn't mean it's wrong. It's just an interesting choice and I don't know based on your persona that might be totally appropriate because I don't know her intimately. She declined my tender. I really gotta stop with that. All right. Thank you very much. Ideally if I had planned more time we would do a little bit more in depth. I just have a few last minute slides and then I'm gonna set you free as long as I hit the right button here. Part of my job as an accessibility consultant is not to tell you you can't do a thing. I'm not supposed to be the one who says you can't make that cool design. I'm supposed to be the guy who makes sure that you can do it and build it excessively. There's a risk when you build things following a checklist. You can end up with something that is wildly inaccessible. This ramp integrated into stairs will kill somebody in a wheelchair either by slamming them into a wall or sending them into the pit of crocodiles. And people like me who take the stairs two at a time are going to trip every few steps. And they got to that because they followed a checklist. At the same time you have to remember that it's about maintenance. So you can have a ramp that's totally accessible but if you put a potted tree on it in the middle of winter, you've taken an affordance that you built and made it completely inaccessible. It's an ongoing process. It's not a checklist. And that's the thing I also want you to keep in mind as you leave here. I will upload the slides. I will tweet the URL of them and that is it. My talk is over I think just at the point that I negotiated. So, bye.