Web accessibility has been in the news a lot lately. Most recently, a case involving Domino’s Pizza has the potential to go all the way to the Supreme Court in what could be a landmark decision that will shape the future of web accessibility.
With lawsuits on the rise, it’s critical for businesses to understand the risks associated with having an inaccessible website. In this installment of the Solving for B° Podcast, our experts will help you understand web accessibility so you can avoid a corporate lawsuit, better serve your website guests, and grow your brand.
Read the Transcript
*This transcript has been edited and formatted for readability.
Chris Wilks: Today we're going to be talking about website accessibility and why it's important to your brand. And to help me address this topic, I'm joined by Director of Brand Experience here at BrandExtract, the wonderful Cynthia Stipeche, and our Vice President of Software Engineering, and resident expert on accessibility, Donovan Buck.
What is Web Accessibility?
Chris: Thanks for lending us a little bit of your time today, guys. So I want to dive right in, and I think the best place to start is defining exactly what we're talking about when we talk about website accessibility. So Donovan, can you, at a high level, define what we mean when we say 'website accessibility'?
Donovan Buck: Sure. For a website to be accessible, it needs to work well with assistive technologies like screen readers. You want to make sure that you've accommodated all the things that a user will need to, as the WCAG puts it, "perceive, operate and understand the website - and that it be robust." Those are the requirements for something to work well with assistive technologies.
Chris: Yeah. And you mentioned screen readers. Screen readers, I assume, are probably the most common assistive technology when we're talking about accessibility. But when we were preparing for the episode, we talked about a couple of other ones. Can you just briefly go over some of the others?
Donovan: Sure. So beyond screen readers, you have other technologies that assist people with different disabilities. It could be something as simple as a transcript for a video, or it could be something a little more exotic. It could be a sip-and-puff mechanism to control a mouse interaction. So there are a lot of different devices out there to help people with different disabilities.
Chris: Yeah. So that makes our job, as we're building websites, more difficult. Or I guess it's just a lot more things to consider, right? If we're optimizing for screen readers, we've got to make sure that it's not just screen readers we're optimizing for. It's the whole gamut of assistive technologies.
Donovan: Right. A lot of those assistive technologies work well with the metaphor of a mouse and click, right? Those actually lend themselves well. The one that is kind of more difficult to accommodate is screen readers, because it's a completely different way of communicating the information.
The Potential Domino's Supreme Court Case
Chris: Interesting. Yeah, that makes sense. So when we were in the pre-show meetings, we talked about different ways to frame up this topic. And one of the ones that came up was the potential Domino's Supreme Court case. So Donovan, can you tell us a little bit about what's happening there and kind of set the groundwork for us?
Donovan: Sure. I think it started with a case last year in California where someone, who was trying to order a pizza using the Domino's app, was not able to do so, and they weren't able to use the website either. Domino's had done a pretty bad job of making their website accessible to people using screen readers. So they were sued in California, and Domino's lost the initial court case. The judge ruled that the website was covered under the ADA as part of their facilities.
So they appealed that ruling, took it to the 9th District Court. And the 9th District ruled that the website and the app were in fact extensions of Domino's facilities, so they were covered. And they sent it back to the lower courts for the lower court to decide what the consequences would be and how they should proceed, how should they should remediate. Well, Domino's chose to petition the Supreme Court for that case to be heard, and we're still waiting to hear whether the case is going to go to the Supreme Court. I'm hopeful that it does. I'd like to see some action there, but we won't know until the fall.
Chris: Well, and you mentioned being part of Domino's facilities, for example. And the reason why that's important is because the ADA explicitly states that your facilities need to be accessible by all, right?
Donovan: Yes. That's right. So the ADA is old enough that it doesn't explicitly mention websites, but it does mention facilities. So that's where the argument comes in. Is the website part of your facilities?
The Number of Lawsuits Continues to Grow
Chris: And right now, and correct me if I'm wrong, but it seems like there's more attention being paid to the ADA in terms of websites than any time before.
Donovan: Yeah, well, the number of suits is going up. It's not quite a hockey stick, but it's a slope of increasing steepness. So there are significantly more ADA related lawsuits this year over websites than there were last, and the same was true the year before that. So the number is going up significantly.
Chris: Okay. So with that being laid out, the fact that ADA lawsuits are on the rise for websites, what can we do to stop, or to defend ourselves against a potential ADA lawsuit?
Donovan: So one of the things that you can do is, of course, just take steps to make sure that your website works with assistive technologies. It's not that hard to do. It takes some careful planning and a lot of research, but it's not a huge technical burden to try and make your website accessible.
Cynthia Stipeche: Yeah. Something that we typically do in user experience is we always want to look at who's using the website. So we want to understand who that audience is. And I have no doubt in my mind that these companies that may be going through lawsuits at the moment had a UX team that worked on personas and tried to understand who that target audience was. The thing is that, interestingly enough, it's like even going that far and trying to understand the customer, and their needs, and requirements for the site, that these users with disabilities might be disregarded.
So it's something that needs to begin to be included in that. We always want to have empathy for that end user, but we need to go beyond just individuals. Now we need to think about the devices (assistive technologies) that we need to take into consideration so that the site is actually accessible.
Where to Start to Make Your Website Accessible
Chris: What are some of the main elements that are overlooked when we're talking about accessibility? If I'm a small business owner, for example, and I listen to this episode, and I think, "I don't want to be sued for being in violation of the ADA," what are some things that you can start looking at? What are some of the things to focus on?
Donovan: Well, the first thing that I would look at is making sure that your headers are structured in a way that describe your content structure well. There was a survey done earlier this year of people who were using screen readers. And [over] 65% of them look at the headings first, the headings of the section, to decide where they should go in order to navigate a page. And if your labels aren't clear for your sections, then it is hard for them to perceive what's inside there, and they don't know if that's where they need to be.
I know I'm guilty of sometimes trying to write a clever headline–not professionally, I do this with my own websites–and maybe the clarity of the headline doesn't come in until you've read the first part of the paragraph. Well, that's not helpful at all for someone who's using your headlines to decide where the information they need is.
So it's really important to make those clear and structure them properly. So in HTML, you have different levels of heading. You have h1, h2, all the way through h6. And in the past, it was a common practice to use those h1, h2 tags for style purposes, right? Not necessarily for document structure purposes. And that was a really bad practice for screen readers. So the important thing is to keep them structured properly, the correct level of nesting. Think of it as an outline of the page.
Chris: Yeah. You hear that SEOs out there? The h1's matter. Include not only target keywords, but be explicit about what can be found in a particular section. That's important to screen readers and to users with potential disabilities.
Is there anything else? Cynthia, you mentioned contrast ratios. I think there are probably designers out there that are saying, "Oh, you're limiting me" or "What are we going to do?" What would you say in terms of making a site beautiful and appealing, while balancing that with contrast ratios? Is there a magic formula?
Cynthia: I wouldn't say there's a magic formula, but I think, going back to what the role of the designer or creative is in this industry - we're not artists. We're solving problems. And we need to look at the user again, and empathize with them and say, "What's really going to work for them?" I think it's dependent on the site. Again, we know though that separate is not equal. So we don't want to create a highly experiential version of the site, and then one that's really static, and just kind of a bucket of information.
So we need to really look at it and find out where that middle ground is, to still create a dynamic and engaging website, but on the back end and on the front end, it's developed so that users with all levels of capabilities can come to the site and actually achieve the task. There's a reason why people go to a site. And there's also recorded instances in these cases where people come to a site to do something like purchase something in particular. It's kind of a slap in the face when a user arrives on the site and they're ready to purchase and they can't find the buy button.
So it doesn't matter how cool the site is. You have to keep in mind that there's a purpose for the site. It's not art. It serves a purpose. There's a function behind it.
The State of Web Accessibility in the U.S.
Chris: Yeah. So Donovan, whenever we were in the pre-show meeting, you mentioned that the current state of web accessibility in the US is pretty abysmal. Is there any relief on the way? Do we foresee anything changing?
Donovan: Well, it's funny. We do a lot of research and investigation on our own about accessibility. We don't have a lot of clients coming to us clamoring for accessibility. Even though I think the increasing amount of litigation around this topic is clear to everyone, a lot of people still are taking a wait-and-see approach. "Let's wait and see what happens with the Supreme Court," for example. That's a fairly recent development.
But most of the lawsuits are happening in certain states. One or two states are responsible for probably 90% of the lawsuits. So I think companies that aren't based in those states are less concerned. It's hard to put a pin in the motivations of why people aren't making websites accessible.
Chris: So there's obviously the legal implications, or potential legal implications, of not having an accessible website. But really, it starts to become an ethical issue, right? We want to provide the best experience to everybody, right? Not just a select few. So I think that's important to consider.
Cynthia: Yeah. Because if you think about it, and just looking at some of the research, you think about people who are mobile users who might have disabilities. And a lot of times if you pare down a site experience for mobile, if it's responsive, and it kind of scales down a bit, then what is it doing for individuals who can't access that content or that site through a device. You're really kind of painting them into a corner.
Chris: So we talked a little bit about contrast ratios earlier. We talked about headings. I know another big one is minimum font size, just to make sure that your site is legible and accessible.
Cynthia: I was going to say, and that's a lot of the stuff we consider just in general for all audiences, and we want to ensure that it's a legible site. So that's kind of top-level, high-level stuff. It's paint on the house.
WCAG Guidelines for Accessibility Standards
Chris: We're talking about all these elements. Is there anywhere where there are some guidelines or standards that we can consult to make sure that we're in the clear in terms of ADA compliance?
Donovan: Just back up one second, because it's not ADA compliance. It's not really explicit in the law yet. So what we do is we conform to a standard. It's an industry-defined standard. You've got a lot of experts from different organizations that have come together and established these guidelines for building websites. It's called the Web Content Accessibility Guidelines, or WCAG usually. And they're on version 2.0 of the standard right now. 2.1 is in draft mode. It'll be out soon. It's not significantly different from 2.0. But what the WCAG standard does is define a series of success criteria, a little over a hundred different tests, that you can use to evaluate your website and see if it's accessible.
Chris: I'm glad you corrected me in the compliance versus conformance. I guess, to clear it up, the United States does not have a law currently.
Donovan: That's right.
Chris: But I believe you mentioned that the EU and some other countries might.
Donovan: The EU does. I believe Canada does. The UK has their own. They've established their own laws. And most of the countries that have established laws around this have adopted the WCAG 2.0 guidelines.
Chris: So I guess what we're saying is if you're out there looking to make your website accessible, a good place to start is to become familiar with the WCAG 2.0 level guidelines.
Donovan: That's right. There's three levels of conformance with each of the specifications. There's A, AA, and AAA, and they are progressively more difficult to achieve. What we recommend that most of our clients go for is AA, because we suspect that when a law does come out, that's the specification that they're going to target. We don't know for sure, but that's where we think we'll be. And if you're doing WCAG 2.0 AA, there's a very good chance that you're going to be conformant regardless of what they decide the rules should be.
Chris: Got it. And if potential litigation does occur, if you can point to the fact that you're conformant to the WCAG AA guidelines, you probably have a better chance of coming through that unscathed.
Chris: So we talked a little bit about things to look for. Say there's a listener out there who is managing his company's website and is panicking because he's not in compliance with the ADA, or worried he's not in compliance with ADA. Where can this maybe not-so-technical fella get out there and start?
Donovan: So the headlines is a really good tip. That's super important. There's two more or three more that I'd say are just basic things you have to have done. So in addition to the headlines, your link text is really important. A lot of times you'll see websites that have maybe multiple news items listed on a page, and there'll be the title of the news item, then some body text, and then a link. And the link says, "Read more."
And then you click on that, and it takes you to more about that particular story. But the problem is a lot of people, when they're using assistive technologies, will navigate through the links. They'll just tab from one to the next until they find one that they're looking for. Well, when the screen reader reads them off, it just says, "Read more. Read more. Read more. Read more." You don't know what you're going to read more about. So it's important to have descriptive text in your links as well.
Next, you want to make sure you don't have keyboard traps. So since people who are using screen readers aren't going to be using a mouse, they're going to be using their keyboard to navigate, you want to make sure that as they tab through the page, there's no mechanism on your page, maybe a fancy search box or something like that, that causes the user to get into an endless loop up at the top of the page, and they can't get to a lower portion of the page. So making sure you don't have keyboard traps would be number three.
There are tools to help with some of these things. There are plugins for most of the browsers now that will test accessibility. They do a great job of testing things like font size, contrast ratio ... Do you have alt tags on your images? That's another important one. They can test those things. But there's a lot of the success criteria from the WCAG standard that they can't test. Like going back to the headlines, are your headlines descriptive of the content? These tools can't check that. You've got to have a human go through and make sure they're correct.
Going forward, you need to establish policies for the people who are maintaining your website. A lot of companies will go and have someone build a website for them, and then they'll maintain it themselves with a CMS, right? So you need to make sure that the in house people are going to continue the best practices that your developers put forth for making sure that your content is accessible, that everything's tagged properly because if it's not maintained, it's just going to fall apart.
Chris: Awesome. Well, actually, one quick plug. Donovan has a really good article on the BrandExtract website about accessibility, and I think it goes into a little bit more detail about some of the finer points of accessibility and the WCAG guidelines. So I would encourage everybody out there to go check that out. But I think we've covered the topic pretty thoroughly today, so I want to thank you guys very much for your time. Donovan and Cynthia, thanks for joining us, and thank you out there for tuning in. And we'll see you next time. Thanks.