The new WCAG 2.2 rules you're already breaking (part 1)

VIRGIL 0:00

So, first of all, welcome back to season four. We have a really exciting season for you. Hopefully you listened to our teaser about it. But today we're going to kick off by talking about one of the things that has been very important to me for a long time and very important to my company, which is accessibility standards. Recently, the WCAG 2.1 standards were updated to 2.2, and we're going to talk about this. As a matter of fact, we have so much to talk about with these new standards that we're actually going to break this into two episodes. And so you're going to hear me kind of pivot in the middle of this session where I realize that this is going to go really long. So we're going to talk about this over two episodes. Also, you're going to learn that sometimes when you think things are easy, they're not always easy, and that is that. I kind of messed up. I thought I was recording audio and video, and it ended up that I was only recording audio. So for those of you on the video, you're going to get something fun in place for us instead of our pretty little faces for episode one. But by episode two, we'll have all learned from my issues in user experience with this new system and go from there. So if that all interests you and you think it's a good start to season four, join us as we start Discussing Stupid.

COLE 1:28

Discussing Stupid is brought to you by High Monkey, a digital consulting company. We talk about this stuff because we've lived it. We help organizations all over the world deal with their stupid. Find us at highmonkey.com.

VIRGIL 1:41

Everybody, welcome back to season four. Excited to get things kicked off here. And, as always, with me is Cole Schlotthauer, who is with me almost every time we have it. And today we have a special guest, Seth.

SETH 1:59

Wait, is this the first episode of the season?

COLE 2:01

Yes, it is.

VIRGIL 2:02

This is the first episode. Look at how honored you are to be joining us.

SETH 2:05

I'm very honored to be here.

COLE 2:06

I didn't even tell Seth it was the first episode of the season, but what a surprise.

SETH 2:09

Yeah. Thanks, guys.

VIRGIL 2:11

It is the first episode, considering we just released a teaser. Then right after that would be episode one. And we probably lost half of our audience now for our stupid humor in there.

COLE 2:23

Stupid for a reason.

VIRGIL 2:26

Yeah, that's a very good point. Yep. And so speaking of that, today we kind of thought we'd talk about accessibility. The WCAG specifications, not too long ago, they updated them to 2.2. And even though that isn't mandated out there for anybody, we thought it would be a good time to talk about it, because fall is a lot of the times that a lot of organizations start looking at redesigns, updates, refreshes, and that, which is also a great opportunity to look at your accessibility and inclusivity design. So, Seth, being our resident accessibility expert, you've been looking into those things, and we wanted to talk about them today.

SETH 3:13

I have, yeah. And it seems more and more companies are more interested in the 2.2. You know, I think we're going to start seeing more interest in having sites be on the 2.2, rather than the kind of bare minimum at this point, which is 2.1. So today I wanted to talk about the new 2.2. We've got two new ones from Level A and a couple of new ones from Level AA. So we can just dive right in unless we have any other stupid things to say.

VIRGIL 3:47

I think one thing that would be good to mention, and that we've talked about a little bit before, is that this is very different than previous standard implementations or introductions in that a lot of those have been focused around how somebody uses a screen reader, somebody who's visually impaired and needs that. And this is actually more towards cognitive type or more physical issues. And it really kind of spans a little bit difference when you talk about the differences between 2.1 and 2.2.

SETH 4:20

Right. It seems like with each new iteration, there's a deeper focus on more nuanced needs from an accessibility standpoint. And I think what we'll talk about today will kind of point out some of those specific things.

VIRGIL 4:33

Yeah. And there are some probably easy ones, and there's a few big ones in there.

SETH 4:37

There are. So, I mean, let's jump right in. I think the first one we'll talk about is consistent help. I think a lot of us who practice accessibility in our website builds kind of take this one for granted. It's something that we see as just standard practice. And this is things like having the phone number or like a Contact Us link in the same place consistent across the site. Same with like a chat widget, basically making your website standardized. So someone knows, oh, on this web page and on any other web page, I can find the same thing in the same place instead of it constantly changing around.

COLE 5:26

Be dependable, you know.

VIRGIL 5:28

Yeah, be dependable, exactly. You know, like when we were talking about this the other day, Cole even mentioned that so many of these are standards that we've used in user experience for a long time. And so that kind of already plays into it. But this one's an interesting one because, you know, for people to really get the context, it's talking about sites that are built differently. So you know, a lot of times your homepage is different than your landing pages. Or maybe you have, you know, you're a big government organization, you know, college, something like that, that has a lot of different things and they all tend to have different people controlling them and have different rights and that kind of stuff. So they're saying it. But I think the best example of a company that fails this one right now is Amazon in that. I think of it because, you know, when you go on Amazon. Yes. Trying to contact them in the first place is like a very difficult thing. They don't want you to contact them.

SETH 6:26

You can contact them.

VIRGIL 6:29

But it's, it's in the footer, you know, to get like that customer support and that kind of stuff.

COLE 6:34

Chatbot.

VIRGIL 6:34

But when you actually move to the checkout process, most of that goes away. It's not there. And if it is there, it's very hard to find and it's in a different location. So that's really what it's talking about, is that even if these are a hundred different systems working the interactivity of a really large site, they want it to be if you have a Contact Us up in the upper right hand corner of your site, that stays there, or your help system or that. And that it's consistency. It's so that people don't have to constantly relearn pages and figure out how to get the support they need. Which has honestly been a UX standard for a very long time.

SETH 7:15

Right. I was going to say it's great UX, great for UX reasons. But then also think about people who, you know, might not use the Internet very often and don't understand web pages like some of us who are constantly online, and having that consistency. So they know where to look when they're switching up pages, and otherwise they can get easily confused and frustrated with the website.

COLE 7:45

Yeah, this is what I was kind of talking about the other day. You'll kind of notice a trend with a lot of these new standards. It's just, it's a lot of it is just about good UX in general. Like you adhering to some of these standards. It's not just helping a certain individual. This is helping everyone. So this is a perfect example of that with this standard here.

VIRGIL 8:06

Yeah, I mean, but we've been saying it for a long time. Good UX also equals good accessibility. It's kind of like page structure. Having good page structure also meets accessibility. And the reality is we're a very diverse world and we need to be supporting all these in that. And where this, honestly, out of all the standards, is probably one of the more mundane ones as far as it goes about simplicity. There are sites out there that I can think of that this is going to be a big challenge for, because it's basically talking about them having to change the architecture of a lot of their systems, and that's a big deal. Or these companies that really don't want you to contact them for support and want you to figure it out on your own, or that kind of stuff. Again, that's going to be something that they potentially could face legal issues if they don't make those justifications or those adjustments once, you know, the standard is more accepted and more in place as a regulation.

SETH 9:07

Right. And I think that sometimes comes down as a business decision of, hey, we want to torpedo people into the shopping cart so they buy, but then they totally forget that, you know, we need to be accessible for all our users. So it's kind of that balance between the two.

VIRGIL 9:25

So you said there were two under Level A.

SETH 9:27

I was about to say, so this one, I feel like consistent help is very, you know, we have a lot of things to say about it and it's pretty straightforward. Redundant entry is the next one. And this one's not as straightforward in my opinion. So this one is about making sure users aren't reentering information already provided in a process. So like a great example is a web form, especially long web forms. There's like the trope of people joking about, you know, when you're filling out an application, you submit your resume and it's got all the information there, but then you have to fill out an online form with all the same exact information. And I think this is kind of along those lines, but a little more nuanced in the accessibility view.

VIRGIL 10:19

Yeah, this one's huge. I mean there are two on this list that I think are just massive from the development effort side of things. I mean, it seems straightforward. You have, you know, whether it's a multi part form, you know, where you're going through different screens, or whether it's a form that you're filling out when you're already logged into a site, and that the entire purpose is that if you know stuff about the person that's on your site, you should not make them have to regurgitate that information for you constantly. And we all know that in there. And honestly, there are two things that go along with that that I always think of is poor UX as well. One, having to reenter the information. Two, and probably more classic and more frustrating, is that like when you don't answer all the correct information and you hit submit or next or whatever like that and you get the error message, and it ends up erasing half the stuff you already put in and you got to put it in again.

SETH 11:22

Nothing more frustrating.

VIRGIL 11:24

This is very much in there. But there is a nuance to this that from a development standpoint there's actually some big challenges around here because, you know, you have to look at how you're managing that. So if you had like a form that was like five screens, in that you're having to maintain that state across that five screens. Are you writing back to the database and storing it much like you do with an ecommerce cart and the abandoned cart process? So you're storing that information, or are you storing that in memory? What happens if the person starts the form and then leaves, and then comes back and tries to continue it? There's so many things. And then you have the other side, which is if I'm logged into an account and you have the known information in there and you're not filling it into the forms, even if it's just a Contact Us form, that technically is in violation. And that's about not making people do work. Because we don't think about, you know, whenever we talk about accessibility we always think about people with screen readers, which is challenging to have to fill out multiple things that way. But we also don't think about people that are like, you know, somebody who's a quadriplegic that has to use, you know, a point interface, or somebody that's using a voice interface and having to constantly do that kind of stuff, or somebody that has some kind of cognitive issue that, you know, frankly typing is much more of a chore than most other people in that. And there's all these situations that you think of. So I mean again we kind of go back to, well, what we've said before. There's a good UX practice that is now being said. This is also a good accessibility practice as well.

COLE 13:12

Right.

SETH 13:13

And I think it's all about like the path of least resistance. And that's where these accessibility things become good UX practices. Well, hey, if it's easy to do the form because it's prefilled out for me, that's great UX practice. But the idea originates with let's make sure it's easy for those who have the most trouble navigating a website or typing into fields. So a lot of that UX kind of comes from that path of least resistance.

COLE 13:46

Yeah, which definitely takes effort, you know, especially as Virgil mentioned on the development side of things. But yeah, what are some ways you guys think that this standard is like on the front end best, like applied? Like one thing I think of is, you know, when you check the box of the billing address being the same as the shipping address.

VIRGIL 14:10

Address, yep. I mean, I think from that side, I think a lot of times, you know, I think of like a bank loan. You know, a lot of times when you're filling out like paperwork for a bank loan, you might be the person applying for the loan, you might also be the guarantor, you know, you might also be the person that is put in the contact, you know, who to contact about this loan and that. And a lot of times because of their legal forms, they have to have all this different stuff in there. And so you end up typing your name in five different times, your address in five different times, maybe your contact information in five different times versus what it's saying is that. So you think of like applications, you think of like ordering processes. I mean, yes, you go to an Amazon or Walmart or something like that, they kind of have that all automated. But I've been to many smaller ecommerce sites where you end up having to put this information in once, put it in again, and then put it in again, and then put it in again, and then the system errors out and you got to go back and do that all again. So it's really about that consistency. And it is kind of an interesting thing because one thing that it very much brings up is that so many people use third party tools for these complex forms and for ecommerce and all that kind of stuff. And they've got to kind of use that maybe now as a standard to look at. Does this autocomplete the information, and does it make you have to do an unnecessary amount of work to be able to get through some type of form process?

SETH 15:39

Yeah. And from an idea standpoint, this one's very simple. But like you said earlier, Virgil, from a development and effort standpoint, it can be a lot of work to implement this.

VIRGIL 15:54

Yeah. So these are some big ones. Even though I don't consider these the big ones, I think I'm starting to realize, guys, we might just actually end up having to break this up into two episodes, because we're already kind of over halfway of where we normally like to start with an episode. And here we are, and we're only through two. So we might just have to. This is going to be our first two part episode ever, because these are such big things. But I think it's very important to talk about it in the ramifications, because marketers, which I think is a majority of our listeners, don't necessarily always think about this stuff. They think about the business as like, here's what I need. But they don't think about the ramifications and really looking at it from that side and looking at the opportunities to make things better. If you are marketing something, you're trying to make it better for someone in that, you know, life better, anything like that. Therefore, shouldn't you make the process to get that something or understand that something better? And that's really a lot of what this is.

SETH 17:01

Exactly. And I think marketers might have to make some concessions in how they want a design to look or how they want something to function in order to reach those folks who need extra help to make the process easier for them. But then that makes it easier for them to buy stuff from you, to use your services, and then your marketing pays off that way. So there is some value in this.

COLE 17:27

Crazy, right? You don't need to lock people out to help them access your product.

SETH 17:36

I mean, people nowadays, they'll cancel an Uber if it's five minutes longer than they want to wait and reorder a different one for a shorter thing.

VIRGIL 17:49

Why don't we tackle one of the AAA ones here and we'll kind of go through that, and then we'll save the other ones for the next episode.

SETH 17:56

Yeah, well, actually we're jumping into double A, but this next one.

VIRGIL 18:00

I'm sorry, I meant double A, because we actually did a AAA.

SETH 18:05

Yeah, yeah, yeah. So this next one has a double A, but then a AAA aspect to it. So this one is called focus not obscured, minimum for the AA and then maximum for the AAA. Minimum means let's say there's a field that you jump to while you're tabbing through a page. AA says you can't entirely hide the field that you've jumped to. AAA says you have to show the entire field. So an example of this, like I said, is.

VIRGIL 18:41

Hide? Yeah. What do you mean by hide? I mean, like, hopefully nobody's hiding fields, right?

SETH 18:47

Well, maybe not intentionally, but let's say you have a header that's sticky on a page, or you have a chat bubble on a page, and you jump to a field like you're filling out a form, you need to fill out your first name, and all of a sudden you just see a tiny piece of the field because there's a nice big sticky header floating above that field. Now you can't see what you're typing into and you might get lost as to where you are on the page.

VIRGIL 19:14

You make me think about something. I was having a chat with somebody at Micro Center the other day on their website trying to figure something out, and they wanted me to fill out a form, and it covered up half the form in there so I couldn't actually see it because they had side by side fields. So you know, it was like first name, last name, da da da da da, like that. And I had side by side fields like this, which overall is just a terrible practice in my mind in the first place because it so doesn't work well with responsive. But that's neither here nor there. And so I couldn't get it around the chat bubble to see what the other fields were. So I shut down the chat bubble real quick to get it out of my way, and it ended the conversation. Yeah, I mean it's like, okay, come on, are you not using the latest technology in chat and that kind of stuff? But I mean right there, that's a perfect example of what you're talking about. But yeah, obviously sticky, you know, headers too, they'll scroll down there, you start tabbing and all of a sudden the header's in the way or there's something, you know. I know we're going to have an episode about pop ups and how pop ups get in the way of a lot of that stuff, you know, in there. I mean there's so many use cases of this. And again, you know, it's also frustrating for someone that doesn't have any of these challenges in that. And so if it's frustrating for me and it's frustrating for you, then how is it for somebody that actually has some type of challenge that is making that whole process more difficult in the first place?

SETH 20:49

And this one in practice is an easy fix. It doesn't take a lot of development work to make sure that your fields are visible when someone tabs to them. I think another culprit is anchor tags. If someone clicks a link to drop them further down onto a page, they want to go where they're expected to go instead of, you know, halfway down the page, or half of the section they're trying to view is obscured by a header, or you know, is above the fold.

VIRGIL 21:20

Well, and that's not only like having a sticky header, that's also just the fact of somebody like putting their anchor tag too low and then missing the header. You know, how many times do you have to scroll back up to see the header of the section or something like that? No, that's a great thing. I think there's a lot that people need to think about. I think this really kind of, especially with the prevalence of chat bots and that kind of stuff and, you know, chat windows and that. I think that the way we organize things, and we don't necessarily think about that. Or like you have the sites where they have like the side panels, you know, that you can kind of float out in that, that are kind of more like interactive applications in that. And honestly if that floats out, it shouldn't float over. It should push the whole design over. I mean there are standards like that that you need to think about and that we tend to. And it's a great opportunity. You know, we have so many things that happen from trying to make web act more like a desktop app that I can think of in that. You know, like when you have a pop up that's giving you some kind of error, or you have, you know, the side windows, or you have different things like that. I can't tell you how many times on the web, you know, on a desktop usually I can take the screen and I can drag it over to my other monitor so that it's out of my way. But on the web you're inside the bounds of the browser, so you don't really have that opportunity there. So this is a big one. And I agree. I mean, you say it's easy to fix and it may be, but in some instances it's going to be a very big structural change in that. And I would say this sometimes is almost more prevalent than when we have like sticky headers on desktop and then we carry it through to a mobile, and how many times that causes a lot of problems on mobile. Or you have a slide out that causes problems on mobile. Mobile tends to be even more so from that standard. So this is an interesting one, and this is a very big one that could have some impact. It's honestly not the biggest one on our list. There's one that's much bigger than this for organizations, and boy, if I didn't just tease you about sticking around with us till the next one, I don't know what to say. But overall I think it's going to be very much about that.

COLE 23:51

Yeah, looking forward to that one. And didn't expect this to turn into a miniseries, but here we are. We kind of had the same thing happen last season. So yeah.

VIRGIL 24:08

If you enjoyed today's episode, you can access more by visiting us on the web at discussingstupid.com. You can also find us on LinkedIn, YouTube, and TikTok, and all the other major social platforms. Discussing Stupid is proudly produced and owned by High Monkey.

‍