From PPC and CRM to KPIs and CRO, the marketing industry loves its acronyms. But here’s one acronym marketers might not yet be familiar with: WCAG, also known as Web Content Accessibility Guidelines. Like the name implies, WCAG is a step-by-step set of technical requirements that allow your website to be accessible to everyone, including those with disabilities. In other words, if your brand has a website or an app, then the rules of WCAG affect you.
In this episode of The Marketing Remix, Monique Veenstra, Marketing Technology Engineer, and Ashton Taylor, Associate Design Director, discuss the impact of WCAG, the basic principles of online accessibility, its design implications and more.
What are Web Content Accessibility Guidelines?
Ashton: Well, I can start at a very broad level. It's a set of documents that explain how to make web content more accessible to people with disabilities.
Reid: That's pretty straightforward.
Ashton: Yeah, there you go.
[laughter]
Reid: A lot of people have to access your website and some people, a lot of people don't always take that into consideration. It's important I recognize what the issues may be. So, what are some of the disabilities that are covered within these guidelines?
Monique: There isn't an explicit list of disabilities that the guidelines cover. The disabilities can range from the visual, to physical, to speech cognitive, in some instances a combination of those and much more. The main objective of the guidelines is to really create web content that is accessible to as many users as possible.
What are the basic principles of online accessibility?
Monique: Sure. WCAG guidelines are categorized into four principles, known as "POUR." And those principles laid the foundation necessary for creating accessible content. Each one of those principles has a set of guidelines that needs to be satisfied in order to claim conformance. There are three levels that you can claim, level A, AA, and AAA, and each level gets progressively harder.
Reid: Is it critical? Are there different brands or different kinds of companies that need to conform to A, AA or AAA?
Monique: Level AA is the web standard. Level A is pretty basic. A lot of people can probably do level A updates on their own. But level AA is the standard level. AAA is the most comprehensive and the most difficult conformance level to achieve. So, level AA is the standard for most industries.
Ashton: And from my understanding, too, and correct me if I'm wrong, Monique, the AAA rating is very, very difficult to achieve. It's nearly impossible, which is why it's at such a high level, but it's there and does have some important principles within itself.
Reid: What are some of those principles?
Monique: The first principle, which is the "P" in POUR, stands for perceivable. This basically states that the user must be able to perceive the information on the website, in some way. This is using one or more of their senses. This means that we need to provide text alternatives for non-text content. It means that we need to provide captions and other alternatives for multimedia. We need to create content that is presented in different ways without losing meaning.
Monique: The "O," which stands for operable, means that the user needs to be able to control the elements on the webpage, in some way, so we need to make sure that all of the functionality is available from a keyboard. We need to give the users enough time to read and understand the content. Instead of having these auto-rotating care cells, give them the option to stop and play that at their leisure. We need to make sure that we don't create content that causes seizures. What comes to mind is those animated GIFs that blink and just don't stop.
Monique: The "U" stands for understandable, and this essentially... This is a big one because just because your content may be perceivable and operable doesn't necessarily mean that it's understandable. It means that they need to understand the information as well as the operation of that content and what the intent is. So, making text readable and understandable, making sure that it operates in a predictable way, and that it's in logical order. One of the things that we can do is help users avoid and correct mistakes as they run into those sorts of things.
Monique: And then the last one, which is robust, this basically says that the content needs to be developed in a way that will work across different technologies as technologies change. And so we can do this by using well-adopted web standards and just always referring back to the guidelines to make sure that we're checking everything off.
Reid: And that's awesome. It's really detailed. I'm sure that a lot of people, who are listening to this, have to... They're, "Oh, man, that's a lot of stuff." But there's also the balance of these things. We're talking from A technical standpoint and then from a design standpoint, and that's one of the things I love about the show, as we do here, is we tend to bring people from different disciplines. But this is a case in which you guys have to really work together to get this thing sorted out between Ashton on the design side, and Monique on the tech side.
How does WCAG impact the relationship between Creative Deisgn and Technical Development?
Ashton: Luckily, Monique and I work pretty closely together on a lot of projects, so there's a lot of back and forth between us when we're wireframing stage, and things like that, building out websites. And I'd have to say that the guidelines are very useful to have there as a resource, but just having that direct line of communication has been huge in really understanding how to abide by a lot of these guidelines, and getting the insight from the tech perspective really helps me on the design side to really get a grasp of the whole thing. It's very daunting when you start going through some of the actual technical documentation of this. A lot of it isn't even spelled out for people that actually build websites but actually build browsers, so that can get very technical in nature as well.
Monique: Right. And just to add on to that, I would say that planning for WCAG upfront in the wireframing stage is extremely important, and it takes a lot of time and development and testing when you plan ahead and you don't have to make changes last minute, and possibly end up restructuring an entire page or several pages.
Reid: So, you're saying that part of the planning process, we've gotta start planning ahead for this stuff or else you're gonna have to redo a lot of stuff.
Monique: Right.
Reid: I'm sure there are some listeners who are all of a sudden going, "Uh-oh." [chuckle] They're in the middle of a process or project, or something like that. I'm curious actually for you guys now, having now been doing so much of this, do you guys see the web differently? Are you guys a little more sensitive to this?
Monique: Oh, yeah, definitely. I think I've been heads down in WCAG for almost a year now. It's a hard switch to turn off. Every time I see something, it just is... We need a big site.
Reid: "That's not compliant. Oh, no."
Monique: Right. And so it's just... It's ingrained in me. And I think it's for the better, because I'm able to easily spot these things out and make recommendations.
Ashton: We touched on the disabilities a little bit earlier, but I think one thing that I really learned over this process is how broad the range of disabilities are out there and how many different variations there really are to design to or code to. So, that's something that's opened my eyes a lot.
What are the design implications of creating WCAG compliant content?
Ashton: There are some valuable things within WCAG that are actually important for design as well, and can add and benefit to the design process. Just basic things like color contrast, which is something that's talked about a lot with WCAG, and design because you have to meet a certain contrast ratio to meet level AA, for instance, to have enough contrast so that it's readable for the user. Things like that are just important principles that allow you to gauge and make decisions that are a little bit more informed.
Reid: That's interesting. I would imagine then it just applies in the real world, if you are doing something that people have to see quickly. Normal-sighted people see quickly on a freeway, or something like that, it might maybe change the way you approach that.
Ashton: Absolutely.
Monique: I think there's also a misconception that if you have to design for accessibility, that your website is gonna be ugly, which is really not true at all. Obviously, there's gonna be some compromises, but really designing for accessibility is good for all users, users with disabilities and users that don't have disabilities. To provide some perspective, I was reading an article recently that's at that latest US Census report that one out of five people identify as having some type of disability. That's 19% of the US population. And that number doesn't include people that don't identify as having a disability, so that includes the aging population. It can include people that are facing situational constraints. Let's say you're in a really noisy environment, you can't hear the video that you're trying to listen to. So, if you have text alternatives, then you're able to consume that information. It also includes people who have temporary disabilities, such as a broken hand, and let's say someone has to operate and navigate your webpage with just a keyboard for a few weeks. So, if you add all of those users, in addition to the users with disabilities, that number is really much larger.
Reid: And I think that speaks true a little bit. I think people think of WCAG and then they go, "Oh, man, the risks are we get sued or we think it's like that," but what you're talking about is conceptually 20% of the population becomes accessible to you if you comply with WCAG guidelines, which is an opportunity. It's not a penalty of some sort. So, I think, hopefully, and what some of the things I hope listeners do take away from this, is there's a real value to this aside from going, "Oh, man, we gotta fix this."
Ashton: And I don't think... In the design community, at least, I don't think it's been grasped very quickly. Because of the detail and the nature of it, it is very antiquated and very robust, so it's taking a little bit of time, I think, for the design community to really take hold of it and understand the value behind it.
Reid: You have to appreciate it. At the end of the day, you don't wanna see it as a burden. You wanna see as an opportunity. And certainly, I think, there are creative challenges, I would imagine, can be fun.
Ashton: Absolutely.
Monique: I would argue, too, that everyone fell in the design anti-community when responsive design came out, everyone had the same feelings. It's gonna be extra work. You're designing within certain limitations, but responsive design is inherently accessible, as well.
Reid: For our listeners, just for that little sidebar, talk about what's responsive design. What are you talking about there?
Monique: Responsive design is designing and building a webpage that responds to multiple view ports. If your user is on a desktop, the website performs and looks great. If they're on a mobile device, they're getting the same experience.
Reid: Yeah. And I think a lot of people would always talk about it as it degrades into, or whatever you use vernacular like that. And I think now it's become such a mobile-first world where, I think, people used to think you are degrading a desktop down into mobile. And now, so much, or at least half, of the traffic, most likely, is on mobile and it's really you're crafting an experience for that, and that's the expectation. It sounds like this is becoming more and more, or should become more and more the expectation as well.
Monique: Right. And I think, in a few years, it is gonna be the new standard.
Reid: Yeah. Do you think the standard will apply then globally as well? This is not just a US thing, right?
Monique: Absolutely. The WCAG guidelines are maintained by an international group of developers and designers, so it's not something that is specific to the US. It's also important to note that US companies do have global audiences, and so this is going to become the mainstream at some point.
Reid: That makes sense. I think that you're gonna have to accommodate then different languages and different requirements probably country to country, which then brings up the subject of that makes you think of speaking. What about voice? We talked about it in previous podcasts, and content around Voice First. Does Voice First, and how we're moving toward your Alexas and Siris, and things like that, is that factored into this at all yet?
Monique: The guidelines are really meant to be technology-agnostic, meaning that they provide these concepts that can be applied to any type of technology that you're using. Voice would be covered under these principles, so it's definitely something that needs to be factored into your website.
Reid: That's interesting. Yeah. I wouldn't necessarily realize that they're keeping it that flexible, but it makes sense. The conditions don't change largely. Just the technology, it seems to move forward. And so since you guys have been spending so much time in this, and I alluded to that earlier, but what are maybe some of the stories that you had in terms of re-architecting some work we've done for so many of our clients that are going through this at the moment? I think we've caught some people on the front end, where we're able to apply it as we're building, but some people have had to mitigate or fix what they've got going on their site at the moment.
Monique: I think some of the clients that we've had to provide a remediation for have results and... We do the audit, first, so we try to find what are the common things that are happening that are not accessible. A lot of times it's a lot of the same things. So, all text are missing images, there's not enough color contrast between elements, missing links, for example, and correct usage of headings, too many H1s on the page. Those sorts of things are a lot easier to fix. Some of them more complicated elements, when there's complex functionality, and third party integrations and libraries, those tend to be a bigger level of effort and require more planning.
What are the risks of non-compliance with WCAG?
Monique: Being sued, obviously that's a big one.
Reid: And it's happening a lot. We're seeing this stuff happen more and more. Yeah. Sorry, carry on.
Monique: Obviously, fear is a big motivator. People don't wanna be sued, and that is a risk. I think a lot of people, and probably the majority of people, are motivated to start updating their websites to be WCAG-compliant because of that. And that's fine, but I think that if we can realize that there are greater benefits, then maybe that motivation changes and it just becomes the norm.
Ashton: Just to build on that a little bit, I'd say, even beyond the legal implications, I think it's really gonna be bad press, too, for companies where they're not making their content accessible to as many people as they can. That's just another thing that's a little bit broader, even legal question.
Reid: Well, when the legal component comes into it though, there becomes a time pressure that they don't maybe have at the moment. So, if companies haven't, at least, explored this, there's a point in time where they may get under some kind of a time pressure to remediate whatever issues are. So, obviously encouraging our clients and anybody out there listening to us to go through this process. What does that process really look like on the front... If somebody says, "Hey, you know what I do, I wanna conform to this. I'm compelled at this point." What does that process look like?
Ashton: From a design perspective, again, it's really important to get ahead of these things as quickly as you can. A lot of my experience has been, if a company comes to us and they potentially have web-standard guidelines that they usually have, if you can take a look at those, you can begin to identify things that could be issues, like, for instance, color contrast with their brand pallet, and things like that. And then once you identify those things, oftentimes it's a conversation with the client on the implications and what sort of modifications can take place from there.
Reid: That's interesting. So, their brand pallet, in and of itself, could be an issue?
Ashton: Absolutely, because it relates to the fonts you're putting on the website and all the colors. So, if they don't pass the contrast test, which a lot of them do, I'd say at least half, if not more, then you have to have that conversation and understand the implications.
Reid: There went the brand book, all of that time and effort.
[chuckle]
Monique: The good news is that your logos... Logos are exempt from that guideline.
Reid: There you go. At least there's something to salvage. But, yeah, actually you go back to the opportunity there. That means that if your logo had an issue with it though, then there is an audience there that's probably struggling with it. It's interesting.
Monique: Absolutely. I think, from a development standpoint, after collaborating with the designer and coming to a design that meets level AA, or whatever level we're trying to target, when we start to develop, one of the key aspects is to make sure that we're testing often and early. There are automated tools that are really great for helping catch some of these upfront issues, like all text messaging missing on images, color contrast ratio issues. But the one thing I will say is that those automated tools should never be used in isolation. We should be manually testing with different types of technologies and preferably a person with a disability would be also testing your website, because only a human can really determine true accessibility. These tools are great, but really, at the end of the day, accessibility is very subjective.
Reid: Yeah. And those are good tips. I think, it's something that companies, as they're going through the process of redoing their site or something like that, need to explore within their contract with whoever is doing it, or internal resource to make sure that this is a part of it, and then take it to whatever degree is appropriate. And what you guys have said is that AAA rating is pretty hard, but at least AA, and making sure that whoever is doing it understands what those benchmarks are, and I think we're trying to help them here.
Reid: I really appreciate you guys joining us on the show. There's a lot covered here. There was the acronym and a lot of details in there, so we're helping people out as well beyond the podcast. We've got a full POV on WCAG available online. There are teams put together to be helpful to the audience out there, and the expectation here is that people with disabilities will be able to access all of that content just fine, appropriate contrast and the like. I thank you guys for joining us and doing what you do.
Ashton: Thanks a lot.
Monique: Thanks.
Like what you hear? Subscribe to the show and leave us a review on iTunes.