5 Ways to Ensure Web Accessibility (and Avoid Legal Trouble)
Kevin Klos presented “5 Ways to Ensure Web Accessibility (and Avoid Legal Trouble)” at UX Camp Fall 2020. Enjoy!
What do Beyoncé, Domino’s Pizza, and Amazon have in common? They have all been sued for non-compliance with the Americans with Disabilities Act. And they are not alone. Kevin will share 5 ways to ensure your web site is accessible (and can avoid legal trouble) and will discuss what ADA and Web Content Accessibility Guidelines guidelines are.
UsableNet has found on average, one web site-based lawsuit is filed every hour. This presentation asks and answers: Who is suing and why? What are the consequences? Why is it happening and what can be done about it? Kevin will highlight which groups are served by web accessibility, outline ways to achieve the WCAG guidelines, and provide an understanding of how ADA noncompliance lawsuits originated. You’ll also learn how to broaden your market penetration by ensuring your web apps and sites are accessible to all.
Senior UX Designer, Best Buy
With a background in UX, visual design, and front-end development and armed with a human-centered design thought process and WCAG guidelines, Kevin has taken on and solved UX challenges for clients such as Marriott Bonvoy, US Bank, Dunkin’, United Airlines and more. Away from UX and on the ice, Kevin can also be found in costume as a hockey mascot that performs magic tricks.
The following transcript very likely contains typographical errors. Please forgive any mistakes!
Thank you every for coming today, and we’re gonna talk about the five ways to ensure web accessibility and avoid legal problems. I’m Kevin close, I’m a senior experience designer with Best Buy. And so let’s just get to it. When I was a kid growing up in the 1980s, I watched a lot of GI-Joe cartoons, and with the end of each GI Joe cartoon, there was always a public service announcement that would have to do with how to stop a noble team work helps you win and the GI Joe character would explain to the kids how to go about that, and then at the end, they would all figure it out and say… And now we know. And the Geo would say, Yes, and knowing is half the battle. And now here I am 30 years later, using its Matra to advocate for a lot of accessibility because knowing really is half the battle, and it really is forming up to be quite a legal battle for a lot of companies. So according to usable nets 2019, what accessibility last report, there is one lawsuit filing happening every work an hour of the week, right now, 21% of those lawsuits are against companies that have already been sued in the past for a lawsuit or web accessibility, and now 20% of all these federal ADA cases are also claiming apps are inaccessible as well, and a lot of people have seen accessibility widgets and overlays pop up on different sites in the last…
Let’s say here, and even with those, we’re finding that these businesses are still getting lawsuit, so accessibility widgets aren’t perfect at keeping everything ADA compliant. So the first step we wanna talk about it is to ensure that your online presence is Well-accessible.
A lot of people don’t even know, and businesses don’t even know when they get sued, what ADA compliance is or what a rains… Let’s start off there. ADA is the Americans with Disabilities Act. It’s a similar rights law that prohibits discrimination against individuals with disabilities in all areas of public life.
Thanks to 88, we have the larger handicap restroom, restrooms in public places, is the reason we have Braille on elevator buttons. It’s the reason there’s so many. There’s ramps and elevators instead of just stars. It’s helpful for a lot of different groups. And was signed into law in 1990. The problem with that was, there wasn’t really… The Internet is nothing like it is now. Back in 1990, we didn’t even have the AOL disks. Yeah.
So it’s important, and here we go into step two is to just know that the groups that ADA and web accessibility help, and we can kind of break it down into four different groups or areas.
So the first group we wanna talk about is the deaf hard of hearing group, and the things that we wanna focus on the most for this group is we wanna provide multiple contact options, you would be surprised, although now you’ll look for it, how many websites still only have a phone number for contact information, and that’s definitely not gonna help the deaf or hard of hearing group. We also need subtitles and captions for videos, so shout doctors, Chicago camps for once you’re having this all recorded, putting in the captions, that’s gonna help a lot of people and you simple English, because for a lot of deaf people, American Sign Language is actually their first language, than we have the blind, low vision and color blind Group, and what we wanna focus on with them is text equivalence for images, use that web pages, so we always wanna take all tags and make sure those are filled out, especially if there’s words that are on images, that’s important to put on there for screen readers, and that’s a miss for a lot of places, navigation using only the keyboard, this is very important, this is where a lot of companies end up getting soon because there’ll be someone on a switch that uses a keyboard or someone on a screen reader that uses a keyboard and into that desktop view, even on some mobile house, they can’t be able to navigate around on the site without it, and we also wanna make sure our text can be expanded to 200% on websites, and then sometimes when that happens and companies are thinking about it, you can end up with the structure of the HTML just blowing out or you have copy on top of a button, and then none of that works, so that’s very important to take into consideration, you want good contrast in colors, so whatever type that we have, whatever color does the background needs to be enough of a difference in contrast, it’s readable, and then we never wanna rely on color alone to convey content, and we’ll get into that a little bit more to…
Our third group is the motor, which is inability to use a most lower spans time-limited motor control. With this group, this could be anyone, from a person that has arthritis, to someone that has a broken arm, to someone that’s a quadriplegic, for This group, we want wider clickable areas for… That you’re clicking into. So think about when you have or you’ve seen a lot of small text links punched all together, that’s gonna be really hard for someone with arthritis or someone that has very limited motor control to be able to tap in those areas. So we wanna make sure we’ve got enough space to find, which is usually around the cage, tells us around 48 pixels that they can be able to tap or click into it, and then again, everything needs to be able to be a keyboard controlled ’cause a lot of these people are using devices such as switches to help them navigate the internet. The last group is cognitive, this can be people learning disabilities, distract abilities and ability to focus on large amounts of information, could be like autism, this is a very wide group of people that we wanna look out for and
With them, text needs to be as simple as possible, so
You wanna provide definitions for any sort of jargon that you’re using, or if there’s abbreviations, we just wanna spell that stuff out and let them know what it is, navigation, the layout needs to be consistent across the entire site. We’re looking a lot for just consistency, so I… Sure, going page to page and say the navigation completely changes, or the rest of the structure completely changes, where maybe that’s something that they were getting used to and relying on… That can be hard for them to figure that out. We wanna provide clear instructions and air messages when filling out forms, you’d be surprised about how many websites within their form fields only have a red X or I might just turn the whole yield red… This is Ben on a few different areas because for one, if someone’s using a screen reader, they’re not gonna get that information feedback back to them, or if you’re color-blind, you may not even know something is wrong.
o we need to call out what the air messages and then let them use or know easily how to fix it.
And then finally, just avoid time limits on content, our automatic refresh is one possible, think about when you have really long lines of form fields that you need to fill out and it’s timed, and everyone’s gonna be doing a sort of different speed, so you wanna make sure you got enough time for someone that’s using maybe like switch your screen reader or just don’t have good muscle control to still be able to fill everything out.
08:31 S1: So step three is achieves double a level to protect against lawsuits.
So a-keg is the web content accessibility guidelines that we just refer to as MK, ’cause otherwise it’s doing the pronounce…
It Was created by the World Wide Web consortium way back in 1999, it was the first version of it. And the whole idea of it was just to get people with disabilities, the same access that typical people have to be able to use the internet, so these guidelines were approved by the worldwide weapons Arnim to put these all together. And in 2008, they came out 20 because obviously technology was starting to change and the mobile devices are starting to grow, a K21 came out in 2018, and that has a lot more information on tablets and mobile devices as far as guidelines. How to make those accessible, and this is very timely right now because next month comes out with k22, so the event more… Everything from the previous versions, and then they’re gonna lay out some more like accessibility guidelines that mostly have more to do, I think with mobile and tablet devices, so these standards of three levels is A a double A in and then they have four accessibility principles. Let’s go over the levels first, level is the minimum, and this is what you need to do just to get people with disabilities on devices to be able to navigate through your site, and
Again, the most important thing is make the site accessible by being able to navigate everything just using the keyboard only, we wanna provide text alternatives for non-text content. So let’s look at our photo here of day a crow, some… Some sites, there might not be any text, so a screen reader might just read it as image 1j pig, then we could at least add a man all text, at least saying, calling a Dave girl, so people know what the context is of the image, but really, you should kinda think more descriptive of it all and be like Dave were all rocking out on his guitar thrown during a live concert, let the people know that are using a screen Ater, give them that same experience of what you’re seeing within the image in the context you’re on the site.
And then finally, just use more than one sense for instructions, so if I can’t read everything and see everything on the site, I gotta be able to hear it and vice versa, due is the standard that most businesses and websites are gonna want to achieve. So
What we wanna do here is include a contrast ratio of four and a half to one between normal text and background, we want that again, we wanna be able to like the user, increase the text size 200% without everything blowing out and getting screwed up, and then provide audio descriptions of video content.
So let’s kinda look a little bit of contrast ratios for a second, this is Kim Kardashian sight before she was due for an accessibility, and as you can see the contrast ratio, it was only 1 to 2, and you do this by taking an eye dropper tool and by dropping the color of your text and then the background color.
And so this is a tool that I use and it shows that it fails on the double A and AAA level after she fixed things up, it got a contractor issue of 1955 to one, and as you can see, it passes both double A and E, It looks much better, it’s more readable for even typical vision people, and that’s one of the things you gotta think about with a guidelines, not only makes things better for certain disability groups, but it just makes things better for everyone all together, ’cause now it’s so much easier to read this way.
Level AA is that this is the top, but EPA isn’t what necessarily… You need to go for… It really is the double A. And then if you can add these APA guidelines, then all the better, ’cause they’re looking for a contrast ratio of 701 between normal and background tax, and then there’s some other things that you have to include for tea, but just for an example, you need sign language interpretation for pre-recorded video, you need closed captioning or live audio.
We know that that would be… Take up a lot of resources and be very expensive and probably too much of a burden for a lot of companies and businesses to do. So this level treat tends to be more for, if you’re making a website for a specific disability group that they’re gonna use, that’s when you wanna do the AAA level Of… The design principles behind all these accessibility principles make like a bartender and poor… That’s how you can remember it. Pure.
So the first question we wanna ask is, Is your project perceivable? Is there anything on our website that a blind death poison or color-blind user would not be able to perceive and you’ll kinda see… These are kind of the same things that we brought up with when we were talking about the groups of the different groups of what they’re looking for, so the content must be sentence ways on all tags at caption, text links need to be discoverable, a color change and content is a good contrast.
So let’s talk about color blindness for a minute.
So one in 12 men and one in 20 women are color line, that’s over 300 million color blind users worldwide, so chances are there’s gonna be color-blind users that are gonna interact with your site and your app.
So if we look at this example, which is like a ticketing example, which I’m sure all of you have seen before, if you have a typical vision, this is really easy to use and just relies on color only pretty much, but what happens if we use a color line filter, well, now all of a sudden, it’s a lot harder to distinguish some of these seat types, and it can be frustrating for color-blind users, and that’s something we need to think about when we’re creating is… And I’m sure there’s another example of a graph that everyone has seen these types before, again, if you have a typical vision, this looks fine, but if you’re color-blind all of a sudden on this right portion of it, it gets a little harder to figure out what’s going on between these three lines, and there’s really easy SOLS that we can do for… One would just be, we could add shapes and now we can see the differences between these lines a little easier, another thing that we can do is besides just using color, we could use color and we could use patterns, and again, that’s a pretty easy fix, but some people just don’t think about when they’re designing these, but it’s important to keep that in mind, and when you think about it, when you’ve gone on a walk on a Sunday, so not Minnesota, but on a sunny day and the sun’s beating down on your phone, and there’s a glare coming off your screen, it’s gonna kinda look more like what’s going on to the right than to the left, and so again, this one accessibility not only solves for color blind users, but it kind of solves and makes things easier for every…
All of the users. Next question, why I ask, Is your project operable? So can all functions of your site be performed with the keyboard, can users control the interactive elements of the site, ’cause your website make tasks easy, and again, we’re kind of just talking about the same things that we were talking about, what the groups are looking for, but one thing I really wanna point out is be mindful of content that causes seizures, so you can give someone that… You can give someone a seizure without really thinking about it, if you’re flashing light on the screen more than three times second, and I have a cousin that has epilepsy and he works at a hotel chain, and he was an all-staff meeting once where they were showing a PowerPoint deck, and someone got to creative with the PowerPoint slides and was using flashes and he ended up going into a seizure, they had to call the ambulance, he went to the hospital, and then he called his mom from the hospital and she’s like, Oh my God, what happened? And he’s like, It was a bad PowerPoint, and
So it’s just… You need to keep that kind of stuff in mind, and unfortunately other kind of groups have also realized that you can weaponized basically gifts with flashes. And so last year, some Twitter trolls were using flashing gifts to target people of epilepsy, eating of the lebar month. So basically, if anyone ever wants to use flashes and some sort of transition on your PowerPoint or your website or your app, keep web accessibility in mind and just say No. Next is your project understandable, it’s all the text on the website clearly written, are all of the interactions easy to understand, and we’ve kinda gone over some of these things already from more groups, but I just wanted to point on… Again, help users avoid and correct errors if you got your form fields happening and there’s an air message, don’t just say air, say what’s wrong and how to fix it, and that’s gonna help the users out quite a bit. Finally, is your project robust? So most browsers need to understand your site content, not just the newest ones, and does your site work with different assistive technologies, it’s very important that you can navigate through the whole site without using a mouse and be able and even watch those kind of updates.
The bottom with this, I pull the tweet from earlier this year, where our users that are very disappointed in at dominoes for updating their app without considering accessibility for blind iOS users. I am now no longer able to check out and have to use the website, so domino really wasn’t thinking much about it, of accessibility in a couple of different cases, and they ended up going all the way up to the Supreme Court, but in this instance… Yeah, they updated their app, but it wasn’t really tested, I think all the way through, and then all of a sudden if you’re on a screen reader, you wouldn’t be able to order… And so that’s problematic.
So now I step for understanding 88 non-compliance losses originated. So back in 2017, President Trump issued an executive order requiring that all federal agencies identify regulations for the repeal, replacement or modifications. Ada
Was one of these things that was basically repealed and modified, so the guidance documents that they were using to help define and understand all this, we’re kind of throwing out by the US Department of Justice, which then led ADA activists to define the law through a lot of suits and these being in forcing companies to ensure that their sites were ADA compliant.
So if you’re wondering who’s been sued for web accessibility, everyone on this traffic and a lot more. Beyonce was sued because her website wasn’t… You wouldn’t be able to navigate it alone without using a mouse on the desktop, and all of her… It was a very heavily image-based, but none of the images had any sort of a text behind it, so you were on a screen reader, it was really hard to do anything, and there was a woman, a blind woman in New York that sued Beyonce because in the last such claims she was a big Beyonce fan and she was unable to order Ponte hoodie from Bois website using your screen reader, so she sued for that, she also sued Rihanna because she said she was a bigger on a fan and tried to go on and buy some. I think it was also a lady from Rihanna… I could do it. And sued for that. She’s also sued about 30 other businesses, including she tried to book… Were in a bar 3 and wasn’t able to do it. So she sued, she believes to Christmas tree central ’cause she wasn’t able to order a Christmas tree using the screen reader or screener off of that.
So what you kind of find is there’s a lot of… What some people refer to as ADA activists, that kind of go from site to say it, looking to see, this is non-compliant.
If can I use my screen reader and be able to order and do everything off of it, sort of the craziest one from her was she lives in New York, but she sued a restaurant in Washington DC ’cause she wasn’t able to order off the menu, like using your screen right here, and I feel the most on brand one of all these was Playboy because there was a man in Florida on a screen reader that sued Playboy because he said that he was unable with the screen reader to real the articles on Flava dot com, so I guess that’s on brand, but I don’t wanna spend this whole little presentation just trying to scare people about web lawsuits, ’cause there’s a whole another side of this that really makes a lot more sense and why you need to be witches IBE, and that’s the broad in your market penetration by ensuring your site and your app are accessible
According to the CDC. One in four Americans have a disability. So that’s 61 million Americans. If you want to a world-wide, there’s over one billion American… Or one billion people with disabilities. The US Department of Labor found that Americans with disabilities have 175 billion and discretionary spending, that’s money that they could be using on your website or your app, if your website or app is a lot of accessible… And then finally, a web accessible site has better SEO because the code is cleaner, all your all tags are listed, it’s easier to find for search engines, and so it’s just a win-win-win to be able to make your site a lot of accessible… And I’ve talked to different people that are blind, and they have told me when dealing with a lot of accessibility that they don’t… There’s a lot of problems where companies just assume, Hey, this guy, blind people aren’t gonna use our product or service, so we don’t need to make things a lot accessible where… That’s not true at all. There’s a lot of people that they’re buying… There’s blind people that are buying things for their friends or their family, or they’re even working in places where they’re in the position where they’re buying things for their company, where they need things to be…
What of accessible and for instance, what do they think the most important things I’m gonna tell you today is, there’s two types of people in this world, there’s people that like professional wrestling, and then there’s people that hate fun, and I’m not here to judge what kind of person, you are A… I’m willing to admit I like professional wrestling, I always did. And when I would go to these events, I would see people of all walks of life, and there would be people with disabilities that would go to this, and even I see people that were blind, that we’re going with their family or with just their community groups. So everyone seems like they go to professional resting events, and so I got this email back last February, and it’s a nice looking email, it tells us… Okay, Sunday, April 21, 70 PM Mayo Civic Center, I get a hashtag views on social media, there’s a big red CTA button by tickets, I get my promo code, we live comes to Rochester, AJ styles, which is Daniel Bryan versus colenso and a triple threat match. Charlotte flare is gonna be their exclusive pre-sale now through February 28, 10 PM, I get the pass code again, tickets available this Friday starting at 15 bucks.
Amazing, right. Well, so then what happens if we turn off the images, what’s the screen reader gonna see on this… Almost nothing. And I’m sure there was a visual designer and a copywriter in a front-end developer, and they all work on this email together, but they’re completely missing out on a big group of people that would still be willing to interact with this email and buy tickets and all you’re gonna get in a screen reader is WWE live comes to Rochester WWE. So that’s something to really think of when companies like this big are still neglecting screen readers and web accessibility, but… So now you know, and knowing is half the battle. But the other half is doing so, always ensure your online presence is well accessible, keep in mind the groups served by lab accessibility, you want to achieve that KEA level to protect against lawsuits, know about how adani compliant plastids originate and keep happening, and then broaden your market penetration by ensuring your site and apps are accessible, you’re gonna have better SEO, you’re gonna have more groups that are gonna be able to access your content, and you’re gonna make all of that content a lot easier to experience, not only for disability groups, but for everybody in general…
And I just wanna end this with some handy tools to check for web accessibility, so that contrast checker was the web aim dot org, you can get that off of there, and
Then there’s some different CRO maps, the… I wanna see the color blind was the color blind filter that I used earlier in the deck, there’s
The images, not an off, which is a use for the WWE email, so you can check to see, do these things have all takes what happens when the images are of… And then there is a nice app called Chroma called Acts that can help check for a lot of accessibility issues too. So thank you very much.