#90: What’s Behind Inclusive Design from UX@UW

Hello everybody. Thanks for joining us on episode number 90 of The Drunken UX Podcast. I am your host, Michael Fienen. This week’s episode is something a little special for you. You see recently, Aaron and I were invited to come speak to the UX at Uw Hackathon at the University of Washington. We were super excited to get the opportunity to come talk to these students and explain what usability means and how it applies to the world around them, especially as it involves accessibility and inclusive design.

So this episode that follows is actually the audio recorded from that talk so that you all can hear it as well. And if you would like to follow along with the slides, we will have this also uploaded to Youtube where the slides will be synchronized, but for now kick back, enjoy the episode and we hope you learned something about accessibility and inclusive design.

Hello everybody. And thank you for inviting us to come on and talk to all the students here at the University of Washington. We’re really excited to be able and share a little bit about what we know about all of this kind of stuff. I am your co presenter, Michael Fienen,

How you doing, Michael? I’m doing all right. I’m doing a little bit okay here. We’re gonna be talking about the art of accessibility, the art of usability, and how these things sort of collide into this concept we think of as inclusive design and why this matters to to all these uh, nice kind folks behind the monitor. Uh, everybody welcome to the drunken UX presentation. I am Michael, I’m a senior front end developer over at a company called Aquent.

Um, I was formerly the CTO at the interactive map platform company, New Cloud and also is director of web marketing for Pittsburg State University, here in the wild state of Kansas. Um, I’m terrible at building slide decks and so I apologize in advance for sort of the juvenile second rate design that is going to proceed uh, in these slides, if you want to find me at any point, just look at my last name. I’m fine and I’m pretty much that everywhere except instagram or I’m in finding

Mm

Uh, this evening I am drinking from the valleys of my local neighborhood grocery store. Uh allure al oh it’s an aloe vera mangosteen and mango juice cocktail with absolutely no alcohol in it.

So we were going to talk about these ideas of a usability and accessibility, you’ll hear these words thrown around a lot, hopefully you’ve heard them in some of your classes and and learnings over the past few years. This these ideas tend to follow each other in a very close lockstep. Um and so we want to help you understand kind of how these things interplay and why they matter. Um and and how we think of them sort of in the professional industry when we’re building things and and what happens there.

Yeah. So what we’re getting to is this idea of accessibility being kind of foundational to everything that you do and design. Accessibility comes first should that’s the key word there. You’ll hear a lot of times about people working on accessibility after after the factor doing remediation. Um if you pay attention to the field at all, you know, there are a lot of lawsuits that are happening over the last three years. The rate has roughly tripled give or take. Uh and the prison these problems exist is because we don’t treat it as foundational frequently enough.

Why does any of this matter? Number one is real simple. In this country, we have 328 million people. 51 million of them have some amount of disability that affects their ability to use a website. It’s roughly 1/6 of our population. And there’s another interesting fact about this. Keep this number kind of in your head though, for the moment, 60% of people who use screen readers feel that content accessibility has gotten worse over the recent years. Could you

Um I don’t worry, I will tell you what it is, I know this is for you more than them. Um So a screen reader is a way that somebody who has a visual impairment, they can’t see the screen well, or at all, they will use a screen reader literally to read the screen to them, It tells them what they are seeing. These can be built into browsers, they can be part of the operating system. Um phone usage of screen readers has increased by like 70% over the last five years.

So this is a way of somebody who can’t see content learning what’s on their page, which is very important to their ability to complete tasks uh Of users who have some sort of disability that affects them with the Web, of them will leave a website that’s not accessible. This is a baseline usability staff that’s telling you like for these people that 51 million number, 71% of those people will leave a website if they can’t use it because of their disability if they aren’t being served. It’s it’s a really 35 million I think.

Yeah. Yeah, huge number in that case. Now In the in this study from Crown Peak they did a scan of the Fortune 100 companies. These are the biggest corporations in the United States. They found among those sites 815,600 week high compliance issues at those companies.

gag web content accessibility guidelines. So these are the things that tell us how to make something accessible.

Right. Yes. Three Consortium W three years behind html. Everything. Yeah, they’re the guys and gals that are behind that. Um, so these issues, this number is small. I want to be clear because The thing is those scans can only automate so many detections. A lot of week had compliance is done through manual tests. So this 815,000 number is actually much higher when you factor in the number of things that would have to be remediated through manual testing. Here’s the stat though, that I love of that number. 815,086% of them violated. We cag level A

uh, A is a rating. Yes. It is the lowest level, lowest bar to get over. Basically. It’s the minimum standard. There’s a there’s double and then there’s triple a uh, like Bond rating. So we’re talking about only 14% were among the medium and high level compliance standards, 86% of them were missing. Things like putting all text on images, making sure you’re compliant or your contrast compliance was correct. These things are easy to do if you know a little bit about those standards and start studying how to bake them into your design process from the start.

But here’s the thing, right? 51 million people in this country with disabilities. You’re going to be one of them. Think about the fact that, yeah, some of you folks who are watching and listening to this right now, you are not, not disabled. Another way that we think about this is your temporarily abled. You’re young probably you’re, I’m sure have keen eyesight. You’re not an old man like me yet. My, my wrist was hurting me the other day. I had to wear a brace on it for a while and impeded my ability to use the mouse. Like everybody can always become disabled at any point.

Maybe not permanently, but you’re always throughout life going to interact with things in different ways based on what abilities you have. It’s a lot of ways this can factor in. So maybe that’s fine. Motor controls. Maybe that’s an issue with Dyslexia. Dyslexia affects between five and 17% of the entire United States population. You may have issues with colour contrast or picking out colors, like having colorblindness, one in 10 men is color blind to some degree. You can also have issues neurological issues like sensitivity to flashing.

If you see a lot of motion on screen, it can make you dizzy or give you headaches and you may have other reading comprehension problems. These are all things that can come and go with some people. Um, and this doesn’t get into things like, hey, I broke my wrist, you know, let’s say, or maybe I got an ear infection and I can’t hear right now. There’s a lot of things, these, what we call temporal problems. They’re only there for a limited amount of time, but they can affect the way that you interact with the things around you. Let’s take one of these. I find,

Yeah. Some people simply process information in different ways better. So if we take the high number I said between five and 15% or five and 17% of americans have dyslexia, dyslexia in the United States. That can be upwards of 55 million people think about how this would impact them. For instance, everybody’s had to use a capture at some point. Or maybe you use something that has two factor authentication. Imagine for a moment that you have a you have problems reading letters and numbers in the order that they appear in.

Or maybe you have problems discerning anything that’s got funny shapes associated with it. Right? Imagine how that first capture could be problematic in trying to figure out what it says.

Yeah, I would totally

you don’t have dyslexia. But that’s the problem. And when we think about this captures in particular pose really significant accessibility challenges. If we get into something like the little puzzle piece ones. Cloudflare used to using, I don’t know if they still do. Um but you have to drag the puzzle piece to where it goes and then slide the little activator bar underneath it, both using fine motor control. So if you don’t have good control of your mouse, this can pose a significant barrier to entry for somebody with the technology that they’re using.

So so about what we can do about the accessibility side of things. Because here’s the thing we cag the web content accessibility guidelines provide checkpoints. It’s basically a list of things to do That’s very, I would say very easy. Um It’s a long list, trust me, but it’s a very clear list. It’s like you do these things, you meet the legal requirements. I hate that because you shouldn’t do things under threat of legal consequences. And throughout the rest of this talk we’re going to kind of explain why there are more reasons to get into this stuff besides just the legal aspect.

But for the week at checkpoints in particular, think about things like how they provide guidance for the markup that you may be riding, are engaged with or dealing with content creation or design elements. So some examples of this that are very simple things that you can go check on a website right now. Make sure if you’re including an image that is in any way informational related to the page provide alternative text for it. Very straightforward. Make sure if you have something clickable That it’s not an icon that 16 pixels by 16 pixels minimum.

Hit box sizes should be 44 pixels according to Wiki level double A. And then another common one is color contrast. We love putting like you know whites and grays together sometimes or whites and blues together. But minimum contrast for accessibility is 4.5 to 1. And there are 1000 tools that can help you deal with that and measure those numbers. You don’t have to know them off the top of your head. But those are things that are very simple remediation efforts that start to hit some of these things to help out folks who are using your site.

They’re actually a number of browser plug ins that can also help with this. Go check out wave or check out acts. Um Those are two very good ones Andy from the Social Security Administration. Um They provide a tool as well and I have one that I really like, which is the front end CSS letter accessibility dot CSS And you can just google that and find it on gIT hub. They have a version, you can drop into your site development so it will just show up on your site or they have a browser plug in to let you use it anywhere that you want to use it just by clicking the button.

But it will highlight common markup problems that can make a page hard for somebody to read or understand. Very very simple but very quick. Um Another thing you can do is make sure you test your work with assistive technologies and what do I mean by that? I’m thinking for instance those screen readers we talked about you can go download jaws or in V. A. Those things are free I think jesus free. I have to double check that. I know NVIDIA is

chrome, has one and most operating systems have one baked in as well. Um you just have to go through your accessibility settings to turn it on, but spend some time once in a while and turn one on and listen whatever your building is. It? A website is a web application, a mobile application, turn it on and listen to the way it reads your site and see if it makes sense

It, believe me using it yourself is only the tip of the iceberg because yeah, it’s that the speed with which people consume information that way, who have been doing it for decades. Well yeah, it’s it’s absolutely mind blowing the difference but it also emphasizes why you need to talk to those people when you’re building stuff for them. Uh Some other things you can do, make sure you throw away your mouse once in a while. I try to use whatever it is you’re making with the keyboard and make sure it’s keyboard navigable.

Uh put your browser in high contrast mode, see what it does to your CSS and your design. Um and make sure you use browser zoom, See what happens to that page. If somebody blows it up to. I think the weekend standard is um, it has to maintain flow up to 400% is the number you the last thing user test. So for instance, those screen reader, users get them in a room at some point have one try something that you’re building and see if they can do what it is you want them to do.

All of this is for not if you don’t spend time talking to actual human beings and not proxy in your own experiences through what you build or what you design, that will get you so much farther down that road to understanding the different ways that people consume information. And it’s going to lead into what we’re talking about when it comes to inclusive design.

It worked, but it went the wrong direction. Yes, there we go. Okay, cool.

many, many other books.

A human who may be in crisis too. Because keep in mind if you’re, if you’re talking about, especially the subject of telehealth or anything in the healthcare industry, people seek out that care most frequently when they are in trouble and so they have that added burden associated with them. We we are terribly, you know, not preemptive in medical care too frequently. So if I am already in crisis for something that’s one more ball, in many cases, maybe maybe medicine ball to depend another metaphor.

so when we talk about these these concepts, right. Accessibility is a checklist basically there there there is a finite number of things you can do to make a website accessible and if you do those things, you probably have succeeded. Usability is an outcome. It’s a it’s a product, it’s a byproduct of good processes, good techniques and and good execution. So what we want to do now is talk about inclusive design because what what inclusive design does is it takes these kind of ideas, smashes them together and anchors them for you in a repeatable process, that you can then apply to the way you work.

So if you go over to the inclusive design toolkit, they’ve got this, they say that that inclusive design is the design of mainstream products and or services that are accessible to and usable by as many people as reasonably possible without the need for special adaptation or specialized design. What does that mean? That’s this idea that I had mentioned earlier, for instance, like accessibility deals with things like if the user is blind, then this should be the thing you do. But it doesn’t care as much about if the user is blind for the moment, but maybe won’t be later.

Or if the user is outside in the sun and there’s glare on their screen and they can’t see it very well. There’s a lot of use cases that start to fall in. And what we learn with inclusive design is that a lot of these actions you take from the purposes of accessibility, actually have much larger broad spectrum benefits. So the way I say this is inclusive design is designed to keep you honest to yourself and to your process. So you’re going to hear a lot of words thrown around. Sometimes in conjunction with this, you’ll hear inclusive design.

You’ll also hear things like accessible design or universal design and ethical design if you want to go that direction. And you may ask, well, what’s the difference between all of these and there are subtle differences between them, but there’s a huge amount of overlap. I was going through the wrong side, so I wasn’t I? Yeah, I

that was me by my apologies. Got notes on one side and slide deck on the other. Uh, so this idea they overlap. They have a lot in common, but they are suddenly different. But it’s okay to kind of use them a little bit interchangeably. That I think maybe one of the best ways to kind of phrase this is an idea of thinking about something called kind design. I like, I like kind of design, right? Because you’re trying to make something good for the user that they can, you know, complete their task with whatever that may be.

Because here’s the thing, if you think about accessibility and usability in a vacuum, what you get is sort of this austere kind of antiseptic build because you can build something that is technically usable and is technically accessible. That is still bad. We actually

what happens when you don’t do kind design? We have a name for it. It’s like, yeah, like the opposite, Like literally the opposite of being kind. It’s hostile design. You may also hear this called dark patterns depending on where you’re eating. But hostile design is incompatible with inclusive design. They are diametrically opposed and they cannot be done together because hostile design is all about. When you learn about user experience and user research and user testing, you learn very powerful techniques to figure out what users want and how users work.

Now you have a choice to make, what are you gonna do with that information? What you gonna do with that power Because you can use that power for good or you can use that power for evil and hospital design is where that comes in to working for evil. All of us have probably dealt with this over the last couple months. We all filed our taxes probably or have in the past, hopefully uh universally most people have complaints about the software. They used to do that.

If you did it with software, they’re constantly trying to Upsell you, they’re constantly trying to get you to use something that you don’t need or don’t want. This is a screenshot from TurboTax and there’s a little link that is highlighted in the lower left. I have a service code. What does that mean? That means your employer at some companies, they will pay for you to use TurboTax, just kinda like insurance and other things. Your company went to TurboTax and said, we’ve got 1000 employees, we want them to use your software, cut us a deal and we’ll let them use it.

And so they may Come out and say, you know what I find it’s $75 a user. But If they can get you to pay $129.98, well that’s not their fault. You didn’t click the link in my mind using a service code, you’ll see there’s a button here that says view payment options. Well, I have a service code. My service code is my payment option. That’s the way I’m going to pay for this, the way my employer told me. And instead they de emphasized that link and intentionally try to misdirect you to do the wrong thing and double dip.

Now your employer has paid for your code, but you’ve also paid to use the service even more. These are hostile design patterns.

So there are a lot of hostile design patterns and this list is not all inclusive. And we will come up with new categories as technology changes as websites change. But things like trick questions, roach, motel, hidden costs, confirm shaming. These are just a few of that model that

there’s a link in the lower right corner. You can go read all about it. But these techniques are designed to take what we know about user experience and use them against users to get them to do things that they don’t want to do and we can’t operate that way. That’s not how we should be building websites. So let’s put this into practice a little bit inclusive design. I said takes accessibility, takes usability and bridges these things that puts them together to make something greater than the sum of their parts.

So imagine you’ve got a video, the video has closed captions and immediately you think, great, I solved my accessibility problem. Somebody who’s deaf can now get the content of that video and my work is done. But inclusive design says, yeah, but how does that actually help us in a much broader context in conversation. So here’s your pop quiz, complete with answers. Why include subtitles with video content? Well, obviously, we have taken care of the accessibility problem.

We’ve made strict accessibility compliance Number one is taken care of but we’ve also taken care of our temporary disabilities, that person with the ear infection who can’t hear right now. Well, they can now take care of that, but you’ve also accommodated people with a temporal inconvenience, for instance, they’re traveling on the subway right now and they don’t want to turn their speaker ups with everybody around them. Here’s what they’re listening to or what about folks were in a different location.

If I work in an office every day and it’s an open concept office, then I may not have the luxury of turning speakers on in that situation or have headphones. So you have made that content inherently accessible to a much broader group of people outside of just those simple checkpoints. I’ll put this into another sort of context. Let’s move this Meatspace. What you have is this problem with elevators.

If you build a building and realize Five years later that you built a 10 story building with no elevator in it, it’s gonna be really hard to go back and add that elevator in and it’s gonna be really expensive When we approach is we’re really good about this in the construction space to write, we have entire code standards that tell us how to make a structure 88 accessible. And from the start when we design those buildings and make those plans, we factor in ramps, we factor in automatic doors, we factor in elevators, we take care of all of these things, the elevator goes in.

Yes, we’ve checked the box. Somebody with a wheelchair can now get to the fourth floor but I tore my A. C. L. A few years back. What about me? I’m on crutches, I benefit from the elevator or maybe I just got back from the gym and I’m just looking at that staircase and I’m saying no man, I’m not doing those stairs right now, it was leg day. Uh I worry baby. Just I’m just lazy.

Uh That elevator literally benefits everyone even though if people were allowed they would cut that from their list. They would say that’s a four story building. It’s not a big deal. I can walk up those steps, I substitute my experience for everybody else and I want to save that money but we don’t

up, everyone can walk up a rap. So this is what happens when inclusive design starts to think about your spatial relations. One more good example thinking about parking spaces. So when we talk about accessible design there is an 80 a standard that tells you if you have 25 parking spaces you need one of them to be 88 accessible. If we look on the right we see five Handicap parking spaces that means they have up to 150 parking spaces. And according to the A. D. A. one of those spaces has to be van accessible.

But somebody looked at this and said why don’t we make all of them being accessible? We can do that. We can take these spaces that are good for everybody who needs access to the walkway there and to get where they’re going and we can make this design better. And instead of meeting the minimum letter of the law we can design this space inclusively to accommodate anybody who wants to park there. So let’s just make all of them being accessible. That person was very small. But

so I’m going to end on a quote here. This comes from an article over at top tall. They say these barriers when they say these barriers, they mean like the things that prevent folks from doing something that six page form. These are often created inadvertently during the design process when designers great products for people like themselves. What that means is we’re not mean spirited, we’re not out to make bad things.

It’s just that we don’t realize sometimes the things we’re doing if we aren’t constantly testing, they go on to say by employing inclusive design methodology and empathizing with diverse groups of people, designers can create products that are accessible to all. So when you get into this space, understand the web changes, technology changes. People change the goal you should have is getting up every day and thinking about making something you are proud of.

Making something that moves people in the right direction and make sure that you test those assumptions and fix things as they change because they will always change and that is not a failure. It’s not something broken, it’s just that people adapt, Technology changes. We, we will have tools next year that we don’t have now. We will have ways of using websites that 10 years from now that we don’t have now and that will impact the way we design and build websites. And so I think

It’s at the end of the day, I was a communications major in college and there’s a lot of different methodologies of communication and one of them that I’ve always spoken to and I really love emphasizing is this idea that at the end of the day, everything that we do on the internet boils down to one human being, trying to interact with another human being and everything else is in the way. And so our job as designers, as developers is to minimize all that noise that is in between those two people.

So that’s your job and that’s what I’m setting you off to go do with what we’ve been talking about here and I hope that this has helped you and turned you on to some new stuff and gives you something to go look at and research and and just think about

that happens at the end, which means if folks want to find out more about us. We are the drunken ux podcast. If you go to drunken ux dot com slash ux at U W. That will get you a list of links for everything we have, from subscribing to the show to uh, following us on the social media’s. Uh, otherwise, I mean you can do with all of this what you will. Um, I also emphasize it has nothing to do with the talk but do less better. Don’t do everything badly.

Do less better because when you would you do that and you focus on that, you realize that you just have to keep your persona is close and your users closer. Thanks for having us. And I’m happy to answer any questions.

Uh, interesting. I love to tell folks, yes, I was a communications major, but I was more than that because I was, I actually was a theater major of all things in college and I have been building why I started building websites in the 1990s and I’ve been doing it professionally for the last 15 years. Um, it anybody can get into this space and I encourage them and I love communication majors because of that exact thing. I talked about everything we do is about helping people interact with each other, even though you may think, well I’m just using that computer, whatever.

Well, yeah, but somebody has to fulfill that order or you’re trying to get information on, you know, if you’ve ever like done research on any kind of medical situation, you know that there’s a ton of just terrible websites out there with information on all these diseases or conditions that are really there to sell you something or get in the way. And it’s really speaks volumes to how far we have to go to really distill our processes down to something more pure I think, and it’s gonna be a long road, but the com majors of the world are there to change it.

So I have faith in you that that helps me, that makes me feel a little bit better.

Um what I’ll say is I can always teach people to code. Code is relatively simple. when you really boil it down, the thing that calm people are always consistently good at is that the human side of our work um when you, especially if you work at a large company where you may have a development team, you may have a marketing team, you may have a content team, you have a deVOPS team, you’ve got all of these disparate people all coming together to make a website run and the people who understand how to talk to all of those people and interact with them on their level are the ones that sort of make the wheel turn.

You know, they operate as that hub because it’s very easy for and this is not a knock on computer science or anything. But there there are types of developers who are just really good at development but they aren’t necessarily good at explaining those concepts to a marketer for instance and that’s okay. That’s that’s just something not everybody is good at but the the people who can emphasize crossing those borders will find themselves I think in in very good spaces two coordinate and facilitate.

a human centered design is also another one of those phrases that you’ll hear kind of used in tandem with inclusive design very much I still like kind of like I know

Yeah, kind of bridging the gap between the company and the product and the people that are going to use it for the intricate scene between anybody do. Usability has a responsibility in my eyes to advocate for those users, the folks behind on the other side of the monitor that you never see because business will always try to steamroll the fastest solution. The cheapest solution and frequently what suffers is testing and research.

these types of things, I will answer very directly on that as far as like the UI goes, which is a voice user interface for anybody who’s unfamiliar voice in particular. Um, has one incredibly unique and hard to overcome accessibility challenge and I genuinely don’t know what the solution is at this point, but um, one of the key qualities of usability is learn ability or sometimes we use the word discovery, ability and view is inherently hide their entire interface. You are forced to guess what you can ask it.

And anybody who has a google assistant or an Alexa has sat around once or twice asking it the dumbest questions just to see what it will respond with. Because confirmed there’s no other way to know everything it can do as a result. Um they have to be paired with um they have to be paired with some kind of tangible U. I. One of the best examples I know of is Domino’s Pizza who has a voice ordering system that dovetails directly with their normal mobile app.

And so you can actually go in with their voice ordering and say I want a medium two topping pizza, gluten free crust with mushrooms and chicken. And it has the natural language processing there to break that down and understand what you’re asking for it. But NLP is still very limited, it is very garbage in garbage out um and it can only do as much as we tell it chatbots if anybody wants a really, really fun episode to go listen to go to the web, the drunken UX website and search for my rant on chatbots.

I was alone for an hour erin was out traveling that week and so I did a solo episode where for an hour, I explained why chatbots are terrible for you. X

did have a thought about that though, about like the innovation of us, you kind of touched on it a little bit but um when you were talking about afford Ince’s and integrating concepts that people are familiar with. Where is that kind of line drawn between keeping it familiar but as well as maybe introducing new concepts and designs that might cater to more people.

um I forget the name of dwarfism. Heard, I’m thank you. I know exactly where you’re gonna make that.

look like radio knobs. Yes,

Go, go look up if anybody wants to Google that it’s skewing Dwarfism is the name of it. Um 2007 was when the iPhone launched and that was like, that was the big conversation was transposing Uh physical reality to a digital interface for the sake of familiarity. And we did that that that impacted design for 10 years after that.

That’s where there towards the end of the talk when I was talking about how usability changes, your users change their experiences change, they understand interfaces, anybody who has a young brother or sister now or a niece or a nephew who’s 3, 4 years old, watch a music tablet and the amount of understanding they have of those interfaces at a very, very young age and consider how that is going to impact, how they use touch interfaces when they’re 18, 19, 20 years old or 50, 60 years old because this is all very…

I I love the age I am because I literally when I went to school there was not a computer in a classroom to now, I’m on the bleeding edge of building websites for you know, a huge company and and I’m in on all of this fundamental technology that I got to own at every generation where it came up with us. So all of our experiences are going to be very, very different. So we just have to always be listening. We have to always be talking to those folks.

I think you wanted to murder all jetties. Shall I execute order 66?

Awesome, awesome guys. Um thank you once again uh for your time and Shane dropping all of these knowledge bombs on us about U. X. And all the wonderful. Always happy to answer questions too. If anybody ever wants to hunt us down on discord or twitter we will always look at something or answer a question. Happy to help out anybody. Yeah let them uh tell everybody that came in a little bit late here where they can find you um what you have going on um different platforms when you guys do a podcast trucks. We are at drunken ux dot com.

If you hit drunken ux dot com slash ux at U. W. You will get a list of everywhere that we are from social media to subscriptions and everything in between. Um New episodes drop every monday. Uh Some upcoming topics. We have, our latest episode was on UX Research and the importance of UX Research. Um Next week we will be dropping an episode on static site generators um using Eleventy, we’ve also got some CSS animation stuff coming up, some website, testing, um testing automation work coming up so plenty in the pipeline every other monday.

Uh And otherwise I say if I won’t ramble off all our social media or nothing, you can find it on the website so easy, easy to track down.

Thank you very much for having us.