Practical UX Tips for Designing Accessible Products by Adam Rayman

Unknown Speaker  Yes! 

Chris Land:  Oh yeah. 

Unknown Speaker  Thank you. 

Chris:  So we hate to discourage everybody warming up and talking. There’ll be time after. Let’s do the meeting part. That’s cool with everybody. Welcome. Thank you for coming out. We are very happy to see you here. 

Chris:  And thanks for joining us. So welcome to our February 2023 accessibility and inclusive design meetup, San Diego. Let’s see tonight. We’ve got three speak. Are you in the right place? Yeah. I’m going to be talking about AI and disability bias. 

Chris:  Harris is going to be speaking about focus. And Adam over here is going to be giving a talk on tips, accessibility in UX design. So just a little bit of housekeeping. Harris:  and I don’t want to present every time. 

Chris:  We need more volunteers. So you don’t have to be an accessibility expert. You can be somebody just getting started. You don’t have to be a professional speaker, new speakers that just want to share something about their work or even a little bit of accessibility that they’ve got started into. 

Chris:  It’s a casual format. We can help you with your slides, whatever. Just want as much diversity of opinions and knowledge and stuff related to accessibility and inclusive design. We’ve got three books to put I view it. 

Chris:  If you are interested in even just talking with us about the potential of speaking later in the meeting, we’ll give you a copy. We’ve got four of these. Agile accessibility handbook. 

Harris Schneiderman:  Written by my boss. 

Chris:  So anyway, best that talk to us later if you’re interested in speaking or want to just talk more about accessibility. 

Harris:  I definitely don’t want to speak at every one of these, so you’ll probably be sick of my voice by 15 minutes in. So please volunteer. It’s a very relaxed environment. You can test out a presentation you might be doing at a conference. 

Harris:  Anything like that. But I’d like to thank our sponsors. First off, we have Deque. Actually, I work for DQ. We provide accessibility consulting services and software, including the Axe DevTools browser extension, which I personally work on. 

Harris:  We actually have a number of pretty cool features coming soon, so feel free to talk to me during the networking portion. I can tell you all about it. We also have a few career openings, so if you head over to dq .com, you can see what’s open there. 

Harris:  Lastly, for Deque, we have our conference called AxeCon coming up. That is March 15th and 16th. I actually will be giving a talk called Extensive Testing and Reporting with Axe DevTools. It’s all free, right? 

Harris:  It’s all free. It’s online. Sign up now while you can. No, you can do that all the way up until then. But it’s a really good time. There’s actually some really good speakers this year. I’m excited for the lineup, so check it out. 

Harris:  It’s free. We also like to thank our other sponsors, Evince. Evince provides software tools to build accessibility as a development process throughout the coding and testing pipeline. You can learn more about their products at evince .com. 

Harris:  I’d like to give a special thanks to Mable’s for having us here last minute and Stacey for helping us get that organized. 

Chris:  Thank you. 

Unknown Speaker:  We’re super happy to be here. We’re super awesome. 

Harris:  Why hit me with my Edgar comforting. 

Adam Rayman:  So anybody need to drink or food? 

Unknown Speaker  Thank you. 

Chris:  Okay, first up is going to be Harris:  with Focus on Focus. Harris:  is product manager, developer, and co -founder of Accessibility San Diego. He has been working with Focus on accessibility for over 10 years. 

Chris:  Currently, Harris is working on the Axe DevTools browser extension, which helps users test their applications extensively for accessibility issues. And… There we go. There we go. 

Harris:  All right, I actually have to interact with the computer a little bit, so I’m gonna be like, get some aerobics exercises here, but before we get started, I’m gonna take, everyone take a deep breath in and out, because we’re gonna get focused now. 

Harris:  Okay, so first off, what is focus? We’re gonna talk about how to manage that focus in modern web applications that are often dynamic. So, wow, this is cool. The definition of focus is a control within a webpage that receives input from the keyboard. 

Harris:  Another way to look at it is if you’re a keyboard user, or you happen to be using your keyboard to tab through a page, there’ll be interactive elements that receive focus. So, like, think about a button you tab to, you hit the space bar, or enter, and it will activate it. 

Harris:  Same thing with the text input, so you’re feeling out of form. You can tab to the first name input and start typing into it. So that’s what focus is, in case you didn’t know. And I’m gonna get started with the first example of how you wanna manage focus. 

Harris:  And I’ll get to explaining why it’s important every step of the way. It should start making sense pretty soon. So, example one. By clicking that link that I just clicked on my page, that was tuned to the section, right on my screen I have a heading that says example one, same page link. 

Harris:  So I clicked the same page link, and you can’t really tell because we’re using a projector, but there’s an inset box shadow around the whole section because it’s a whole section of focus. So I shouldn’t have to use any JavaScript. 

Harris:  That’s why I have a little look -a -mah -no JavaScript. And underneath this code block, which kind of explains what’s happening. So I had an anchor tag, which is with this A, this is HTML, and it’s href, it’s kind of its destination for the link is pound section one. 

Harris:  Pound represents an ID in HTML. And then below that we have a section with an ID of section one. And most importantly, we have this attribute called tab index. That’s what allows it to be focusable. Its value is negative one, which allows it to be programmatically focusable. 

Harris:  In this case, the browser handled that programmatic focus ability. Sometimes you have to use JavaScript, where you call element .focus. And normally to be something in the natural tab order, you have a tab index equal zero. 

Harris:  That would allow me to actually tab to it. This will keep it out of the natural tab order, but allow you to programmatically focus it. So that’s the first most simple example of how you might want to manage focus. 

Harris:  If there’s an internal link, maybe in some documentation you’re working on, you want it to actually shift focus to that section. Otherwise, your keyboard users will kind of be left to work a lot harder to get to the content they’re trying to. 

Harris:  So example two, an element removed, as we all call it. So when a focus element is removed from the page, the browser doesn’t know what to do with focus. So I have a few examples, but what we’re looking at is a few rows of items, I have one for four, and they have delete button. 

Harris:  So imagine I’m a keyboard user and I tab to that delete button. When I activate it, it’s actually delete the whole row. And so the browser goes, okay, where do you want focus now? It doesn’t know, so it’s only gonna default back to the body, which for those who don’t know HTML, the body is what wraps the entire document. 

Harris:  And so what’s gonna happen if you don’t manage focus is I hit delete, I’m a keyboard user, I’ve worked really hard to get down to this content. I hit delete, my focus gets lost, I get thrown up to the top of the document, I have to tab all the back to the page to get back to where I wanna be. 

Harris:  So it’s important that if your users are performing important actions to retain that focus. So there’s a bunch of different right answers and it depends on what your application’s doing. So I actually have four different examples of a focus being retained to different elements. 

Harris:  So on item one that I’m going to activate, I’m going to tab over to the delete button, activate it, and it’s going to focus the next row. So what we’re gonna expect to see is a whole row of item two gets focused. 

Harris:  And if you’re trying to follow along visually, the focus indicator is this blue and black obnoxious outline just to make sure you can see it. So I’m gonna activate that. And sure enough, item two was focused. 

Harris:  Another logical place, depending on what I might be doing here would be to focus the next delete button. So maybe your users are performing kind of a bulk delete. You wanna let them just hammer on the spacebar, delete a bunch of content at the same time. 

Harris:  That’s one thing you could do. So I’m gonna do that. Sure enough, I focused item three’s delete button. Maybe it’s like a recipe builder app and when you delete a recipe -grade ingredient, you wanna move them to the next adjacent text input. 

Harris:  So when I delete this item three, it’s actually gonna focus item four’s input. Maybe that’s a way that your power users can get through the recipe building process quicker. And then finally, you wanna make sure if there’s some kind of no items left in the case you want to still want to handle focus so when i hit this finally button i’m gonna add an empty message to the down to the to the document and it itself that message uh… 

Harris:  I can share this link with everyone after this after the show and let’s move on to example three which is kind of the inverse what we do in the home it gets added so uh… when i’m gonna have it uh… 

Harris:  you want to make sure focuses brought to the new element that makes sense as you can tell there’s always a lot of right answers uh… he was performing something really important you don’t want to steal their focus you are the congressman that and there’s other uh… 

Harris:  other means of informing three users and other users of that content but in this example uh… we want to focus the new item that is acting down so i’m actually going to click on the uh… and you know it’s going to added new items in the page and it will focus it since i click that it’s not focus when i’m at it in the new paper new home at the page now on example four our model dialogues insure many are familiar with them uh… 

Harris:  models are the little pop -up windows that show up on the screen uh… and they are if you’re a developer or designer really know that the pretty complicated to implement i’m only gonna focus on the focus aspects of the bunch of stuff you need to do to make sure screen readers uh… 

Harris:  interact with models properly but i don’t get into that that probably be its own small t -series like you talk but i’m going to highlight three key things that we need to do in terms of focus so uh… 

Harris:  we need to shift focus to a model when a trigger is clicked a trigger would be the button which launches the model so when you think about it as if you’re sighted and there’s some big window over the rest of the screen and the rest of it is dimmed out your attention or your focus is brought to that right? 

Harris:  that pop -up so same thing for keyboard users and screen reader users which which non -sighted users use you want to make sure focus is brought to that and the next item is trap focus within the model which means you don’t want to allow users to tab outside of that model they shouldn’t be able to interact with content behind that model and lastly when the model is closed you actually want to be the inverse of this first point which is to return focus back to the launching element so i’m going to show a demo of that happening uh… 

Harris:  I tabbed to the launch model button i clicked enter we have this fake dialogue that popped up it says dialogue title dialogue content and um… again that trusty focus ring is around the dialogue element itself as i keep saying there’s a bunch of… 

Harris:  there’s millions of ways you can do this uh… properly if it makes more sense to focus the heading inside the dialogue that’s fine too if it makes… if it’s a form it might even make sense to focus the first input as long as it’s being managed and brought to something logical i think it’s okay um… 

Harris:  and then if i hit the tab and shift tab key there’s only one focusable element here so it’s trapped within the model and if i hit escape we have a disness model in focus return to the launcher or the trigger uh… 

Harris:  let’s look at example five which is single page applications or spas as the hipster is like to call them so um… to describe what single page applications are they’re really just uh… slightly newer techniques went around for a while uh… 

Harris:  for web applications that don’t actually trigger a full page reload when you go from one page to another it uses like basically this java script to load in the new page it’s not a true navigation as far as the browser’s concerned so there’s actually a few kind of considerations uh… 

Harris:  you should make if you’re doing it that way obviously in most cases keeping it simple is the best way to go but if you’re working on some kind of cool dynamic application that has to be uh… coded as such you just want to make sure you’re retaining focus 

Adam:  Um 

Harris:  So I have an example I’m going to go to in a second. There’s a link down here that says go to new page. When I click that, there’s going to be a brief loading period in between the two states, and then a new page loading. 

Harris:  When that new page loads, I want to focus the H1. So in my little code block here, you can see H1 .Focus is what the JavaScript’s doing here to manage that focus. So I’m going to click Enter and go to new page. 

Harris:  We have loading, and then the heading for this new page is focused, new page. And similarly, I’m going to have another example from going to this new page back to our slideshow. When I click this, I want to return it back to that section that we were on. 

Harris:  And we’re back here. Cool. So some of you might have noticed that loading state that I briefly touched on. And you might have even noticed that there was that trusty, ugly focus ring that I created. And that’s my sixth example. 

Harris:  Loading states. It doesn’t have to be between different page transitions. It can be you form submitting. There’s a bunch of different reasons why a modern application would have a loading state. And those are another thing that you want to maintain focus on. 

Harris:  If you’re a blind user using a screen reader, and they perform some action, and you don’t make these considerations, they might be confused. If you submit a form, and visually some overlay comes up, and there’s a fancy little loader spinner, but you don’t focus it or have it announced, then the screen reader user is going to be confused. 

Harris:  Like, is my data being submitted? What’s going on? So one technique to accommodate that use case is to focus the loader itself. So instead of them being confused when they submit the form, it’ll say submitting your bank application, or whatever you might be doing, or loading a new page. 

Harris:  So what I’m going to do is click this true loading state. And as soon as I do that, we’re going to focus the loader. When the loading sequence is complete, we’re going to focus the button that started it in the first place. 

Harris:  You start to get a theme here. You always want to make sure it’s going somewhere, so your keyword users aren’t lost and brought to the top of the page. Now let’s look at my seventh, and I think it’s the last example. 

Harris:  Notifications. Another common pattern in modern web applications is some kind of user feedback that something’s happened. Error messages, info, toast messages, as they call them, or warnings, or success messages. 

Harris:  So same thing, same theme that has every single example so far. In certain cases, you want to show it’s focus when it’s important to. When a notification comes up. So in this demo, I can trigger my notification. 

Harris:  It says, cool, your progress has been saved. If I hit Escape on it, it’ll dismiss it. But I do want to say, use this with caution. I didn’t read all this text, but another technique if a user is performing some important action is you don’t want to shift focus. 

Harris:  That can actually be annoying. So you want to use this kind of this technique sparingly. And in those cases where maybe they’re filling out a form and there’s some feedback that’s needed for their attention, but not so urgently, you can avoid shifting focus to it. 

Harris:  You can use this thing called roll alert. And it’s an HTML attribute, and screen readers pick up on that and say, OK, this is some kind of alert style information. When next time I have a second, I catch my breath as a screen reader that actually verbalizes what you see on the page, I’ll let them know that the progress has been saved. 

Harris:  So that’s what we call a polite, live -rigid announcement. And there’s also versions of that that are called assertive that will interrupt what they’re doing. So like I said, it depends on what you’re doing and your application. 

Harris:  Sometimes you want to move focus to that success notification. Maybe if you submit a form to create an account, your loader comes in, you focus the loader, you go to a new page, you might want to focus on notifications that says user -created successfully or something like that. 

Harris:  So those are all my examples of focus. Let me know if you have any questions, and thank you for listening. Any questions before we get our next speaker up here on stage? 

Unknown Speaker  I had a question. So for the asset that you used for the post -alert and notification, if you were to move the focus to the notification and then in fact, let’s say, in our notification or loading, that has repeat. 

Unknown Speaker:  Well, how does that work with the screeners? Is it a drawing the experience to transition and then transition back? 

Harris:  Yeah, let me try to narrate it. So I would tap to this trigger notification as the text in the button. So it would say button trigger notification. And I click on it. And I know that I clicked on it. 

Harris:  So there’s no feedback there unless you have some weird settings. And then it would just immediately read out the role of this thing. So if I gave it a region role or something, it would say region. Your progress has been saved. 

Harris:  It would actually just start reading out the content that’s focused automatically. You don’t have to do anything special for that. OK. Any other questions? Cool. Well, next up we have my good friend Christopher Land, who is an accessibility program manager with Oracle and background in design and coding. 

Harris:  He is obsessed with AI, technology, and the range of potential utopian, dystopian futures ahead of us. I think he’s just priming us for his talk here and something. So let’s listen to Chris:talk about disability bias in artificial intelligence. 

Chris:  So, yeah, thank you, Harris. That’s what I’m gonna talk about. Let’s get into it. So, let me turn my clicker on. Some of you will have ideas of what artificial intelligence is already. It’s intercepting all of our lives, whether it’s recommendation engines or chat robots. 

Chris:  And so I’m gonna cover, in the beginning, just a couple definitions, just because we might hear these things, but I’m trying to provide a little extra clarity there. So we’re gonna talk about what AI is, how bias in general can get into AI and the development. 

Chris:  Then we’ll talk about the specifics of how it affects people with disabilities, and then talk about suggestions for preventing it or avoiding it. So let’s get into it. So part one, 

Unknown Speaker:  You 

Chris:  What is AI? So a couple definitions to cover. 

Unknown Speaker:  Thank you. 

Chris:  Artificial intelligence. It’s a broad science of emulating human intelligence with computers, including thinking, reasoning, learning, and making decisions. So anytime we’re trying to emulate human thinking power, that’s artificial intelligence. 

Chris:  And that’s the broad category or the broad definition. One of the ways that we build artificial intelligence is using machine learning. And with machine learning, we are taking large amounts of data and an AI framework and having it process large amounts of data to come up with its own program and its own rule set. 

Chris:  So I mentioned recommendation engines earlier. If you’ve noticed when you go into watch TV these days, the recommendations that Netflix and Amazon give you based on your history, I’ve gotten better and better. 

Chris:  And the way this works is it’s got your history of the shows you’ve liked. And especially if you’ve gone in and rated shows or thumbs up shows, you’ve given it more feedback on what you like. And it can cross reference that on every other single user’s history. 

Chris:  This is immensely powerful. Because there are going to be profiles of folks that tastes like yours, tastes partially like yours, and people that don’t like things. And so anyway, this is from a high level how that’s working. 

Chris:  Big data is basically the catchphrase or any huge amount of data that we have available. And the advances we’re seeing these days are due to the fact that so much of what we do is tracked or recorded as data, but computing has become cheaper and cheaper. 

Chris:  Computers are faster and faster. So you see it getting more and more intelligent. Who in the room is messed around with like chat GPT, for example. It’s mind blowing, right? I mean, the idea that you could take an AI and I don’t know how much of the internet that chat GPT has ingested, but it feels like a lot. 

Chris:  I had a scary time just going and asking it about things like I do for my job, like, how do you build out an accessible program in a large enterprise? And I swear to God, it was saying exactly the stuff I would say if asked and I started to get worried about my job. 

Chris:  So anyway, the point I want to touch on is the difference between how programming has been done in the past and machine learning now. So the old school way we’ve always done it is called procedural programming. 

Chris:  And in this case, developers write the logic explicitly. They write directions and say, let’s say it’s a Pac -Man video game. We code the ghost behavior to say, hey, it’s on the easy level. So generally go towards Pac -Man on an X and Y dimensions, but make mistakes because it’s the first level. 

Chris:  Anyway, it’s all explicitly programmed what that behavior is. The problem here in the limitation is, first of all, what humans know. And second, that doesn’t scale so well when you get to these huge data problems of like, what’s the stock market going to do or these kinds of things that are just impossible to write out the code for. 

Chris:  But the logic for any, whether you’ve had programming or not, you’re saying, if this happens, do that. Compute math and it gets above, say, 80 degrees, turn on the air conditioner. So one example for this would be, you could do a spam blocker, procedural logic. 

Chris:  You would have a human write out things like, if the subject of the keyword says free and easy, put it in the junk file. If it comes from a random string of letters dot r u, put it in the junk file. And, you know, we got pretty far with that, but you have people out there spamming that are always finding new ways to work around that. 

Chris:  With machine learning, you present this huge amount of data to the AI framework and give it the objective of say, to text spam, and you give it a huge pile of non spam and a huge pile of mail that’s been labeled spam. 

Chris:  And you say, do your thing. it writes its own decision network in a neural network. But you see, instead of if then else on the bottom, we’ve got question mark, question mark, question mark. Because the problem is that neural networks are not human readable, leading to the black box problem. 

Chris:  The decision engines of these AI, you couldn’t, if you went into Netflix, let’s say they honored these kind of things, and said, hey, why did you recommend Terminator 2 to me? Nobody could open up the Netflix algorithm and identify that. 

Chris:  It might be incredibly accurate. It’s probably more accurate than procedural, but we can’t read its brain. It’s like a human brain. You couldn’t scan someone’s brain and say, oh, the neurons are arranged like this. 

Chris:  Therefore, this person believes that. So this becomes a problem when we have mistakes with our AI, such as bias, or discrimination. So that is our next section, bias in AI. So I’m gonna start with a couple examples that are outside of disability leading into it. 

Chris:  So here’s an example. This is about five years ago. The headline was Amazon Scrap Secret AI Recruiting Tool that showed bias against women. So what this would do is it would scan somebody’s resume or their LinkedIn. 

Chris:  I’m not sure exactly what the other inputs were, but if the applicant had a female name, it would be scored less than a male name, all else being equal. So why do you think that is? What we’re gonna point out here is it’s what the data is trained on. 

Chris:  An algorithm can only be as smart as the data is trained on. So I believe we all know that historically there’s been bias in women in the workplace, and if you take a big long set of data, and that’s a problem in the society, and you don’t think about it or correct for it or tweak it, whatever biases are in the society are just gonna be carried on by the robot. 

Chris:  So yeah, this is the joke slide of 10 old white dudes sitting around a table for the past 100 years. The majority of people doing well in corporate America and getting raises and great reviews are gonna skew towards old white dudes in suits. 

Chris:  Then there’s this one. This is Google Photos, and they’ve since, they were very publicly shamed. This is 2015, but in Google Photos it went through and automatically categorized people’s photographs and it’s mischaracterizing African Americans as gorillas. 

Chris:  And yeah, this got a lot of press. And amazingly what Google did is they were like, oh shit, and they pulled gorillas out of the image search. Like if you went for like two years after that and said, Google Photos show me this, it was like, sorry, cannot find. 

Unknown Speaker  Thank you. 

Chris:  I think they’ve fixed it now, but terrible. But now why would this happen? I mean, obviously the internet’s full of photos of people of all skin colors and shapes and sizes. Well, even if it isn’t apparent in the society, if you’re not careful about sampling the data correctly, you’re gonna have another source of bias. 

Chris:  So I’ll talk about these later, but when it’s built into society, that’s a social bias. When you do a bad job picking representative data, that is a representation bias. So these are just two types of popular types of how it creeps in. 

Chris:  So it’s speculative, right? But if Google trained their images on a dataset that’s skewed heavily towards happy white folks instead of a more diverse set, you’re gonna get skewed results. One of the potential problems of this skew is I’ve read articles and I think it’s common knowledge too, is there’s just, there’s a skew of young white dudes in tech. 

Chris:  And probably this is happening unconsciously. For anybody in UX and development, it’s just a very common mistake to imagine the user on the other side of the screen as someone that looks like you, you’re your own best test user. 

Chris:  So in inclusive design, we stress over and over again, you have to go through the process of the user is not you. Think about the whole population and go through the thought exercise of how is what I’m building gonna work for these different groups. 

Chris:  Okay, let’s pull it into how this affects folks with disabilities or why this is specifically challenging within accessibility and for people with disabilities. Let’s see, I wanna see this the right way. 

Chris:  There’s even within the community of people with disabilities, there’s a whole lot of diversity. What Google was able to do and Google’s phones used to have a problem with being very good at auto contrast adjusting on white faces and poor on darker skin faces. 

Chris:  To the point where you’d have like two people with different complexion standing next to each other and you take a shot with your Google Pixel and like one person would look way too dark and you couldn’t see their features and then the other one’s perfectly balanced. 

Chris:  Again, Google got the news flash on that that you can look up, they’ve got a promotional commercial they made about like, well, this is how we design now and it shows them working with all sorts of people. 

Chris:  But you’ve got people with visible disabilities, invisible disabilities and then even within that community is a big range, so it’s even more different factors to control for. The impact is different to folks and I’ll talk about an example in the second but then fitting and balancing the data to then represent all the different types of disabilities is challenging. 

Chris:  So the sort of thought exercise to walk you through is AI hiring, we use lots of AI in screening people and in the interview process these days. It’s a challenge if you put a job up for a junior JavaScript developer, you’re gonna get 10 ,000 applications and how do you even work with that? 

Chris:  AI tools are appealing, right? But let’s imagine two users, one user is blind and the other user has mobility related disabilities. So for the first screen of this test, you have to take an automated test online. 

Chris:  And let’s say that the blind user is a daily screen reader user, they’re fast, they fill out the test accurately and just as fast as anybody else with sight or without. The user with a mobility disability, maybe they have just as much knowledge but their mode of input, maybe they’re using a speech to text tool or maybe they’re using a different adaptive control, they just take more time. 

Chris:  And if time is part of the test, you might screen this individual out without them ever talking to a human, right? So let’s say you get to stage two of the interview process, it’s time to use our AI video recordings to speak your interview. 

Chris:  These became a hot thing during COVID whenever all the interviewing was done. They will allow you to share videos of an applicant in your company and it comes with an employability score generated by AI. 

Chris:  How did they come up with the score? Not sure. It’s all proprietary. But people speculate that it takes into account things like tone of voice, confidence, maybe facial expressions. AI can analyze with accuracy people’s emotional responses in their face and it might score something like eye contact. 

Chris:  So in this scenario, the user with a movement related disability, maybe they score fine. Maybe they just don’t move from the neck down or have limited movement but they smile and tone of voice is great. 

Chris:  But then if the AI is say analyzing eye contact and you have a blind user either not staring into their camera or wearing sunglasses, again somebody could get screened out without ever talking to a human. 

Chris:  So let me see. Okay, I’m close to time so let me go a little bit quicker. The problem is or something I want you to be aware of is even when you get it right, you can see that AI is always looking for the middle of the bell curve, the average, the pattern in the data. 

Chris:  So the risk of taking people at the ends of the curve out of the equation is always a problem. So without getting too mathematical on you, this is a scatter plot with a line of vest fit. Pretend this represents a bunch of different users. 

Chris:  What you can see here, do I have a little laser on this thing? Cool. The data near the middle, this represents the average. The line of vest fit is getting skewed off course by all the outliers. So this line represents an AI. 

Chris:  This is an AI that’s not accurate for anyone. How do you make it accurate? You use a different mathematical equation that purposefully minimizes the weight of outliers. So now you’ve got something that still is shit for the outliers but works great for the vast majority. 

Chris:  This is inherent in AI and will creep in if you do not actively fight it. So how do we control? I already touched on the types of bias, the ones that most come up for people with disabilities, the social bias, representational bias. 

Chris:  There are others that sort of apply generally into everybody. Fight bias with inclusive design. Design principles we use in web design should apply here too, as much as possible, have diversity on your teams. 

Chris:  Think about people with disabilities at every stage of the process. Test with them, work with them. There are many ethical frameworks out there but a company really needs to have leadership, embrace this as a value so that people know that they have the ability to do it and should do it. 

Chris:  And again, I said constant vigilance. If you are not, you can’t just do it once. It’s like accessibility on the web. You can’t just do it once and say, no, my website’s accessible and we don’t have to do that anymore. 

Chris:  So anyway, very quickly legal summary of this summary slide. Brazil has a pretty powerful law working its way through Senate that explicitly bans any AI based discrimination. I would say that basically everybody else is going through lip service. 

Chris:  Like, let’s have a bill to set up a committee to talk about guidelines and none of it has teeth. And then the last point there is I want to say the Americans with Disabilities Act. What it says is, can’t discriminate in places of public accommodation. 

Chris:  And that’s taken years for this to become the precedent that, hey, maybe the web is a place of accommodation. This is an opinion of mine, but it’s we need stronger ADA or stronger explicit laws for any company that doesn’t get on board on their own. 

Chris:  Yep. Point one summary. Fies against minority groups is an inherent risk in AI. Organizations need to proactively work against it. And we can’t trust companies necessarily to do it on their own. We hope they will. 

Chris:  But we should have laws that make sure that we don’t have bad actors. Thank you. Any questions? Thoughts? All right. Then let’s get back to the stage. 

Harris:  I mean, I got a question on your things, Chris. Yeah. Have you ever seen some of the responses that come out of these neural networks? Like, could we talk a little bit about the black box, right? Yeah. 

Harris:  And some of the less black box approaches do provide some interesting insights as to why they were under the shit and some of the things like that. 

Chris:  I haven’t, so, but there are efforts. There are people aware of this problem, and they advocate basically a glass box approach, or you can have extra overhead on your machine learning where the machine learning doesn’t need to do this to function, but just for transparency, will write as much as a kind of human readable login of how it’s coming up with this. 

Chris:  I haven’t seen too much of that. I did see there’s a great article, maybe I’ll share it on the meetup. Bing is using AI for a Bing chatbot, and it’s been, you can take this thing down weird dark paths by asking it to tell about a shadow cell. 

Chris:  It was telling like this journalist to like leave his wife and stuff. It was amazing, and something else I’ll share or ask me after I wrote, it’s a chat GPD, write me the 10 Commandments of Avoiding Bias in AI in Biblical Format. 

Chris:  So I have a fun list of like, now shall not leave users out, and it’s clever. That’s what’s striking about chat GPD is I’m like, wow, this really feels like creativity and cleverness. But anyway. 

Harris:  like a weighted probability, which is kind of close. You can see, so you can decide your own pressure with something like that. 

Unknown Speaker:  Yeah. 

Chris:  And we didn’t get into detail of it, but yeah, it’s it’s that you can’t just have the black box there needs to be some way for people conscious of these kind of issues to Have some sort of input of tinker the weights or like wow that’s that image search you did of families Just showed a bunch of super normative images. 

Chris:  How can we? Hit a switch here toggle switch here to make sure people are fit So we just can’t let the machine do it on its own It’ll mess things up Let me introduce before I go on too much more Adam’s presentation is practically UX tips for designing accessible products Adam:  is a UX designer with ten years of experience He has a passion for designing accessible products and he hopes to help other UX designers adopt accessibility best practices He works for Amazon AWS and is an avid baseball fan. 

Chris:  Welcome 

Unknown Speaker:  Woo! 

Adam:  Thank you everyone live streaming us at home. Hello. As Chris:mentioned, my name is Adam:  Raymond and I’m a product UX designer. Are there any other UX designers here in the room? Some hands? A lot of us. 

Adam:  Fantastic. All right. Great to see you guys. This one’s for you. All right. So before I go into my talk, just a little bit about me and how I got to the point of standing up in front of you all today, I discovered the wonderful world of UX design. 

Adam:  While I was going through grad school at the Illinois Institute of Technology, I got a master’s in technical communication and information design. And as part of my program, they did talk a little bit about accessibility, accent on the world of UX. 

Adam:  They told us why it was important. They told us about all image text. They told us at a very high level about contrast. And that was about it. At that point, it was, okay, go do accessibility. So, you know, what I realized through this training was what was lacking are the practical tips. 

Adam:  What can we as UX designers do to design accessible products? What choices can we make to make sure our products are accessible? And what choices can we avoid to make sure that we avoid those kind of mistakes? 

Adam:  So, then I went on, I worked for Psychopedia Britannica for a little while, asked me about that later. It was fascinating, but it’s not like this. Worked for an agency called Isabar. And then in 2017, my family, who was right here in front of me, hi family, we decided that it was time to move out of very cold in snow in Chicago, and to sunny San Diego. 

Adam:  Got a job when I moved here at a company called ICW Group. It’s a local company that mostly focuses on work -comp insurance. And I was the only UX designer in the company. One day, my boss pops up at my desk and says, hey, Legal just asked me if our websites are accessible. 

Adam:  We understand that companies are being sued because their websites are not accessible. And so we wanna make sure that doesn’t happen to us. Can you check out our site and make sure that we’re all good? 

Adam:  Okay, sure. Right? So I didn’t know where to start. Used a couple of different automated tools, and I learned a lot along the way. Some of those things that I learned through this process was learning from my own mistakes and learning from the mistakes of designers that came before me. 

Adam:  And they allowed me to kind of identify some of these issues so that I can avoid them and I can make better choices kind of going forward. So it gave me a really good basis for this talk. It also taught me a lot about the difference between legal accessibility and what I like to call actual accessibility. 

Adam:  All right, probably most of us in this room didn’t wake up this morning and start looking forward to this talk because we wanted to make sure our websites were legally compliant, right? We mostly care about actual accessibility. 

Adam:  But our employers care about legal accessibility. Employers care about the bottom line. Not having an acceptable website means they can get sued, which means lost business and lost profit for them, right? 

Adam:  So there is a difference, it’s a subtle difference. Mostly they kind of work in parallel, but there are a few differences that I learned along the way, which I’ll expand later on in the process and in the talk, which I promise I will get to in a moment. 

Adam:  So Eplog left there, got a job at Amazon AWS. Can’t talk a lot about what I do at Amazon AWS, but I do have one fun fact about Amazon AWS that I’ll get to in a moment, some hot goss from Amazon. But I’m going to go into just a few of the practical tips that I’ve learned along the way. 

Adam:  It worked awesome. Okay, first one is about color contrast and contrast ratios. So like I said, in grad school, I was taught do good contrast, right? It’s good for everyone. Everyone feels to read their own website. 

Adam:  And what I come to find out as through this journey, is color contrast is actually the most common problem accessibility on the web today. I also learned that there is an actual definition of what makes good contrast. 

Adam:  It’s not just, yeah, make sure you look at it and if it looks good, then it’s fine. There are contrast ratios. These are a couple of them. They’re a little bit more complex than this, but I tried to break it down to a smaller part. 

Adam:  You want, between two colors, you want to make sure there’s a 4 .5 to one contrast between normal text and the background that it sits on. And if we’re talking about larger text, or if we’re talking about UI elements, then that ratio is a little smaller. 

Adam:  It’s three. So large text is actually about 24 pixels or so. It’s converted from points, but it’s about 24 pixels. One work around when you’re looking at larger text and if you go about that threshold, you can get away from a legal point of view. 

Adam:  This is one of the differences, right? It’s like not actual accessibility there. It’s you’re really not doing any favors for your disabled users at that point, but from a legal perspective, you can kind of get away. 

Adam:  When we talk about UI elements, UI elements are any non -text elements, okay? So form input fields, radio buttons, those kind of things. Elements that allow users to do things but aren’t necessarily text. 

Adam:  When it comes to things like rules and things that are more decorative, we’re not really worried about that. But elements that users actually have to interact with, that’s what counts as a UI element. 

Adam:  Okay, so let’s look at a couple of examples. Calculating the ratios is difficult. Weed, it’s a mathematical calculation based on color. So it’s not really something any of us can do unless we’re on some really good psychedelics. 

Adam:  For the rest of us, we are reliant on tools. There’s lots of different tools, lots of different platforms. I understand the Chrome browser extension. There is a big plug -in that you can use. But my favorite tool is webaim .org’s contrast checker. 

Adam:  Does anyone here use webaim .org before? Yeah, see a few hands? It’s an awesome tool. OK. So let’s say we’re looking at this button. This is an example of good contrast. So we’ve got white on blue. And if you go to webaim .org, it’s really simple. 

Adam:  You can just put in your X colors for the two colors that you’re using. And it will spin out a ratio. Then it will tell you if your pass or failed based on a number of different elements and requirements. 

Adam:  And also, this is really cool slider. So if you put your brand colors in there and you’re just a little off, you can use this slider to figure out how you can get back on course and make sure that you’re in compliance. 

Adam:  Then you can bring that to your brand and people using this permanent function and say, look, we’re not quite there. But if we just go a little bit more to this hex color, we can make it. So let’s look at an example of what we could consider bad contrast. 

Adam:  Now we’re below our 4 .5 to 1 ratio at 1 .97. This is an orange button. Orange is notoriously tricky for contrast. Not a lot of colors go with it and deliver enough contrast. So this is a bad contrast. Adam:  

Adam:  As I mentioned, you can tell that right here. A couple of other interesting things here. When we talk about legal accessibility versus actual accessibility, and we talk about UI elements versus tests. 

Adam:  Technically, here, this text on this background counts as text or link text. So you want to use the 4 .5 to 1 ratio. It’s also a UI. So this color here, this orange, you actually also want to check out the contrast between the button and the background. 

Adam:  This is the hot dots from AWS. We actually just made a change to our orange buttons. We had orange buttons with white text and, as I mentioned, not great contrast. So we’re actually changing our color to, and still keeping the orange button that’s our branding, but we’re going to black text. 

Adam:  It’s good compromise. It meets accessibility requirements. It also meets branding requirements. It’s not particularly cute, in my opinion, but nobody asked me. So that’s the hot dots. OK, another practical tip is your heading structure. 

Adam:  So people that use screen readers use the heading levels to understand the structure of the content. They can actually scan through the different headings to find the information that they need. So first of all, it’s important to have a good heading structure. 

Adam:  As Chris and Harris mentioned, as we, when we met for drinks a couple of weeks ago, if you have good heading structure or heading structure at all, you’re kind of ahead of the curve. So that’s a good thing. 

Adam:  But if you really want to get into the nitty gritty, if you really want to meet that legal requirement, you want to make sure that you don’t do one thing. You can always go down a level. Go each one, two, three, four, no problem. 

Adam:  You can repeat your heading level. You can do another each four, no problem. Then you can go back up and go four, four, each two. No problem. Where you get into trouble is when you skip levels. So for example, each one, each two, each four. 

Adam:  No good. You just skip to have a header on it. Here again, each two, each five, each five. Don’t do that. Avoid it. That’s the thing you can. Now most UX designers are probably saying, like, you know, kiddin’, you, why would you go from two to five? 

Adam:  That doesn’t make any sense. But normally when we get into trouble with this is things more like call -outs or modals or things where, you know, it’s like a little thing in the corner. And it just would look so perfect within age four, right? 

Adam:  According to the letter called law, you can’t do that. If you really want to and teach you a little workaround, if you are the type of UX designer that does your own code, you can do this if not engage your engineer, your developer. 

Adam:  They can actually style the headers so that they, in HTML, are the correct header structure. But they can apply some CSS style to style that heading to make it look like the smaller headers might engage. 

Adam:  So that’s your workaround. One last practical tip. Link text. So we have our two articles here. We have this briefing area on modillos and there’s other ventotin協os. All three of things. Look them up for this talk. 

Adam:  And let’s talk a little bit more actually about this side of the wrong words. The wrong for you, which is this is the problem here. Is this learning? Learn more, right? Learn more and learn more. First of all, it’s not good US. 

Adam:  You need to have better information sense. Learn more and when you’re scanning, it’s not going to really tell you what you’re going to get when you click that link. So a much better description would be something like this. 

Adam:  Learn more about screaming area on modillos. But you’ve got another problem. This is where the accessibility problem comes in. You cannot use the same link text to go to different places on the same page. 

Adam:  So that’s where we’re running the problems here. Hypothetically, these two are going to different articles, but they have the exact same text. So that some non -sided user or disabled user may have trouble when they don’t have that full visual context for using screen readers or what have you. 

Adam:  They’re not going to be able to have that same context to figure out what goes to where or where they’re going to. So they probably won’t click your link and you will lose them. There are sometimes that you can’t get away from the learning point, right? 

Adam:  All good UX designers would want to do the long drawn out version. But if you’re talking about mobile, if you’re talking a really tight rib, you just don’t have that amount of space. So again, there is a nice little workaround. 

Adam:  And that is what became my best friend during a lot of this, which is ARIA label. So ARIA label is something that you can apply to these kind of links. So you can have on the screen learn more. However, ARIA label allows the screen readers to pick up a different label, which you can program, or your engineering developer can program. 

Adam:  They can even do something tricky and say, learn more about insert bracket here and pull in your headline. So they can make it actually easy on them and easy on you. So it’s a little bit easier. So thank you all very much for listening. 

Adam:  I really appreciate it. I want to take this to more UX designers. And to do that, I need your help. So I really would like to hear any other practical tips that you all can provide to me so that I can continue to elongate this list and continue to provide practical UX examples. 

Adam:  So thanks again to Chris:and Harris:  for having me. Thank you all for coming. And I appreciate it. 

Chris:  Cool, well thank you Adam. Thanks everybody for your attention. We hope you enjoyed the talks. Let’s see what time we got. Yeah, we still have time. I don’t know when they’re gonna kick us out, but if we stay and order drinks and food, yeah, stick around, hang out, network. 

Chris:  We’ll be here for a little bit, and thanks again for coming and chat with us again if you wanna do some speaking in the future. Yeah, I was just kidding. 

Harris:  gonna reiterate that. Come talk to us if you want to speak. Like Chris:said, we have a few books to give out if you do want to just even half -ass commit to talking at some time in the future. That’d be awesome. 

Harris:  So come up and say hi. I apologize personally. We usually have name tags, but I left them in the car that I got dropped off in. So introduce yourselves to each other. 

Adam:  Bye live stream.