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

VIRGIL 0:00
Well, sometimes an episode just takes so long that we need a part two. And so we got part two of talking about the new WCAG 2.2 standards and all the different things. And let me tell you, if you thought there was some hot topics on the last one, you got to listen to this one, because there's at least one that's even a bigger ramification for almost every website out there. So if this interests you, join us as we start discussing stupid.

COLE 0:32
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 0:45
Okay, everyone, welcome back to the podcast. Today we're gonna continue our conversation that just went way too long in the last episode and probably gonna go long again today because there's just so much to talk about with this WCAG stuff. And joining us again is Seth. Hi. Welcome, Seth. And I actually laugh. I was telling the guys that outside of here, ever since we recorded the first episode, I've had, like, oh, my God, I think probably 10, 15 times that I've had a chat bubble block something on a screen that I've been trying to access, and that's just so annoying in there. So what a great accessibility feature that will also help us now, that was mostly on my iPad and my cell phone, but still, it's a big problem. Even on my desktop, I'm often trying to get behind the chat window. And, you know, I had mentioned before about shutting down the chat window, and then it shut everything off. It's just an interesting thing, but not an interesting solution. So. But here we wanted to go on to some of the others. So, Seth, why don't you kick us off by what's kind of the next one we want to talk about?

SETH 2:01
Well, and we'll get to yours next, but the one I wanted to talk about first, kind of continuing our conversation, is dragging movements. So this is functionality using, you know, dragging things across the screen. And the accessibility requirement is having something that you can click on that can do the dragging for you, so it doesn't rely entirely on that actual click and drag motion. And that's, you know, for people who use screen readers and for people who don't have great mobility in their hands if they're using a touchscreen. So, like, a great example of this is if you're looking at a slideshow at the top of landing page, and you're going to want either arrows on the side or Maybe some page pagination where you can click and it'll go to the next slide instead of asking or having your users drag over to get to the next item. And this is used in a lot of different things. I think the slideshow is the most common one we think of. But there's Kanban boards, there's reorganizing lists and just having that alternative to click and drop something down instead of holding it with your finger and moving it down, or clicking and moving it down. It just. I mean, I think about when I have bad Internet connection or something and you click to drag and it just takes forever to even register what's going on. So this is really another one of those cases where it's a great user experience but also very applicable for people who need extra help in the accessibility front.

VIRGIL 3:47
Yeah, I was going to say, I mean, though, this one is probably a little bit less applicable to, you know, someone on a general website. I mean, you know, most websites are going to probably have this type of interaction in there. But I think when you talk about it from a website perspective, you know, especially from an application, you know, obviously we've used online Kanban boards and we've done all that kind of stuff. And, you know, or even if you use like the Outlook interface in the web, you know, when you're drag and dropping something, you know, to a folder, or you're drag and dropping it to, you know, a calendar, to a new day or something like that, it's such an interesting thing, but I always laugh when I first read this. You know, me being significantly older than you two, I think back when it was very popular to have sliders as, like, form interfaces, it'd be like, you know, have a slider. As a matter of fact, I could even think of a particular one. Probably not such a great example, but when, when. During the pandemic when small businesses can apply for loans through. It was. It was emergency loan system through the SBA and that kind of stuff, you could go in and see what you wanted and kind of look at the payments and that. And you had a slider that kind of went from zero to like a million dollars. And you were, you were going back and forth and see like, what your payments would be for there. But, but I mean, those all would be it. I mean, we've had that for like picture sliders for a long time on pages where, you know, part of accessibility is you need to be able to, one, stop it, but then two, be able to click something there. So this is basically an Expansion on that. Probably not as big a ramifications for most website companies, but going to be a pretty big ramification for people that manage applications or kind of more interactive things like that.

SETH 5:49
Right.

COLE 5:49
SharePoint. When? Oh well, I just want to say real quick in SharePoint, you know, you can drag files into folders and whatnot, but I almost never do that. I just like to press the move to and then just select where I want to put it. Because dragging is honestly such a hassle, especially on a laptop with a trackpad. So again these kind of go back to just general usability. A lot of these new standards.

SETH 6:11
Dragging on a trackpad is the worst.

COLE 6:15
Quite awful.

VIRGIL 6:16
Yep. But I can't disagree with that.

SETH 6:19
It's really about doing stuff, you know Virgil, like you said, it's not applicable on site so much because that's taking in information where this is more about. I want to do an action whether it's moving something to a different folder, changing up a view. This one's more applicable to doing things on the Internet or within applications.

VIRGIL 6:43
Right. And these are a lot of higher level interactions that a lot of kind of applications on the web do, you know, because a lot of people use, a lot of organizations use SaaS type systems and it's something to consider, I mean from there when you have those kind of things again, probably not as applicable to general websites, but you know, more interactive form based, you know, functional, you know, kind of desktop emulating type. Sites are going to have this type.

SETH 7:16
Of challenge and I will point out the one exception that they call out is panning on a map. They say typically it's because there's, you know, arrows where you can click and move across a map. But I thought that was curious. It's the only exception that they gave.

VIRGIL 7:34
Yeah, I suppose that's something that, that is very applicable to a website because you know, a lot of times you have Google Map where you're showing a location or something like that and people might pan around on that. But yeah, so maybe a good just practice there is to make sure that you have, you know, the arrows enabled. So if you're, you're importing Google Maps into your, to your website, that, and if you're allowing people to be able to move around the image, then you want to make sure that you have that as well.

SETH 8:04
Yeah. And just making sure if you do put Google Maps on one of your pages, being able to get within that application while using a screen reader on the page because sometimes people paste it on but then this screen reader will just skip right over it and not actually go in and allow you to interact. So that's something you'll want to test if you're putting that on a page.

VIRGIL 8:25
Yep.

SETH 8:26
So our next one.

VIRGIL 8:29
Yeah.

COLE 8:30
Gosh, I just keep wanting to chime in with my, my own little examples.

SETH 8:33
Here, but it's a great user experience, right? It's all user experience for sure.

COLE 8:40
I love how in Figma you can either like adjust a margin or like spacing manually or you know, you can type in, you can click on the margin itself and type in your value and it helps when you have like very specific spacing or whatever you need. So great example of this one here.

VIRGIL 8:59
A lot of applications.

SETH 9:00
Well, another example of spacing and doing something that is, our next accessibility item is target size. And I think Virgil's going to have a soapbox for this one because he was experiencing it over the weekend a bit. But this is making sure, so for example, a pop up comes up and you have that little X to close it out, and just having the size of the X, one large enough to see, but two large enough to click on. So accessibility, or WCAG, calls out 24 by 24. Fat finger syndrome.

COLE 9:45
Last episode on this in season two, I believe.

VIRGIL 9:48
Yeah, I think we actually did. I think we talked a little bit about fat fingers and you know, I have fat fingers. And you know, and especially on a cell phone a lot of times we're mimicking buttons. You know, marketers spend too much time and designers spend too much time trying to make things look great versus being practical. Therefore they like the small icons and that. But I think the bigger one here is this is talking about in general. So I mean you're talking about that if you have a button or you have a clickable type, something the target needs to be big enough that somebody without a lot of dexterity, somebody who maybe, you know, has tremors or, or just has. Lacks that finger dexterity, can still click it in that. And this is going to be a big one. I mean this is huge from a marketing kind of website stand standpoint because there's just so many things that can go wrong with that. I mean I get it, you know, on mobile more than anything in that, you know, where, where the buttons are too small. But even on a desktop, you know, I mean you think of it. The interesting thing is, and I remember us looking at it, they actually excluded text links.

SETH 11:05
Yeah.

VIRGIL 11:05
And that. So which is interesting. I can understand why they did that. But at the same time, another thing that a lot of Mobile interfaces suffer from is too small a text. And so you've got a really crammed paragraph or something in the middle that is there and you're trying to click that exact thing. And I've ran into instances where there's two links that are close together in there and you're trying to click one and you end up clicking the other. So I mean, this is such an interesting thing and how we do like side by side social icons and side by side, you know, buttons and all that kind of stuff that's all going to have to be considered from there. I mean, this is a really big.

SETH 11:44
Impact one and it drives everybody crazy when they're not able to close something that they're trying to or they click on the wrong thing. Again, just user experience is really at the core of a lot of these. And yeah, Virgil, the exception to the text, the link within the text, it. It's a little baffling to me why that's an exception. But you know, if you wanted to make the period of a sentence clickable, you know, that technically kind of falls in line with this.

COLE 12:20
Loophole is all over. Seth.

SETH 12:22
Yeah, I know.

VIRGIL 12:22
Well, and one of the things is we're kind of a little. There's definitely a focus in the world of accessibility around desktop, using a computer to navigate the web and that what it is. And that as long as that's accessible, you're okay. And people don't really think of it that, you know, people with mental and physical handicaps and all those kind of things use cell phones too, use tablets too, use different interfaces than just desktops. And it's kind of a very big conceit to think that, well, as long as the desktop's there and they can click it with a mouse and that. And even going back to what we were just talking about with the drag and drop, you know, you know, even a drag and drop sometimes with those, those interfaces when you have the buttons in that they're really small and you know to click through it and it's really hard to do. So this is a big one and has a lot of ramifications out there for organizations. I would say it's going to be one that probably more so even on mobile interfaces and desktop interfaces, this is going to be a big change that organizations have to make and adjust to really kind of get this to be where it needs to be. And it's talking about the target size, is talking about the space. So what are some alternatives? So let's say that you have. You want to Keep the text the same size, but it's a clickable space. So the div around it or whatever it might be that needs to be have a certain amount of padding around it, which basically means that you're not going to be able to get those things as close together as you probably want to from a design interface. And when you start moving to smaller screen sizes like mobile, you're probably going to have to look at stacking, you know, more so than side by side. And these are things that are going to really irritate the crap out of designers, you know, because they want everything to look a particular way but something. So using small buttons with just an icon in the middle of it is probably not going to work for the most part, because you're either going to have to make that a lot bigger or you're going to have to add text to that. I mean, there's other issues with that as well, but I mean, those are really good examples of things that could do it. So you can think of it even from like a form, when you can, like roll over and click the help, you know, the little help icon that often sits next to a field, they give you an explanation that if that's clickable, that's going to have to be bigger. It's going to have to be big, like a big button. And that's going to be a very big aspect for those type of things. I mean, this one above and beyond everything has the hugest impact. And even though a lot of these don't have as big an impact out there, this one in particular is massive.

SETH 15:21
And this one too, I think, Virgil, you're saying, you know, it's kind of clashes with what designers want, but I think it in some aspects clashes with some business decisions of, you know, maybe an app wants you to accidentally click something else. I think of a couple apps where I know the button I'm supposed to hit on the next page, but once it loads, all of a sudden something pops up to where I usually click, or I should, and then all of a sudden I'm headed somewhere else, which might be a business decision on someone else's part, but it's a massive, massive issue with accessibility.

VIRGIL 16:02
Yeah, I mean, honestly, we could probably go on and on about mobile interface and how companies just totally screw that up in the first place. But yeah, I mean, this one's a big one. And one I think that is going to require a lot more attention by organizations because a lot of things that even you, you know, like I said, form vendors. And all those have done are things that technically, under this specification, would no longer be compliant.

SETH 16:28
And not to drag this out into a part three, but I wanted to circle back, Virgil, on what you said earlier about how accessibility is really desktop focused. You know, it makes me think, will 2.3 be a lot more mobile focused as our world is, you know, more and more into, you know, everybody has a phone, right? And are we going to see another round of accessibility rules more focused on that as the world goes?

VIRGIL 16:56
And that's the thing is a majority of the accessibility has been focused on screen readers too. And it's now expanding out to, you know, it's not just somebody that is visually impaired that, you know, requires accessibility accommodations. And we've known that for a long time from, you know, a lot of other standards. But I mean, these are things that are just growing as, you know, the Internet continues to be the main source of everything.

SETH 17:24
Right. All right, onto our next one, which I think is going to be another good conversation is accessible authentication. So that's entering your username or password and then authenticating into something. So that's not only being able to type or paste your passwords into a field, but it also includes the CAPTCHA and having a CAPTCHA that, you know, doesn't require, or I shouldn't say CAPTCHA, like a second form of authentication, like memorizing a code to enter in and making sure that, you know, people aren't forced to memorize things. If they have a cognitive disability allowing them to be able to paste a password into a field, which we see all the time. Passwords might get blocked for pasting stuff in to try to avoid bots being able to, you know, attempt authenticating into. Into websites.

VIRGIL 18:27
Yeah, that one is, wow, Cole, we need to do an episode on CAPTCHA and all that kind of stuff at some point because this is. This is another very loaded topic. And so much of it is this conflicts with a lot of what you consider kind of general good security practices from that side. And, you know, that's the reason if you can't copy and paste in a password, it's because they're worried that bots would do that kind of stuff and, you know, use it as a testing platform. But it also makes sense. I mean, you know, somebody who has challenges, you know, with typing may have a list somewhere else. I mean, but even from a practical standpoint, you know, we all use password managers that we use as a company and drives me crazy because I also use highly complex passwords that are auto generated and that kind of stuff. And I don't want to go in there and type in something that's 28 characters long and nothing that I can really, you know, because it's capital, special case capital. This data like that. I mean that's, it's another big one. I mean from that side when I.

COLE 19:41
Just won't log in, honestly.

VIRGIL 19:43
Yeah, I mean that's one thing that people have to think about. The more frustrating they make the experience. Or even from the CAPTCHA side, you know, this whole trend of image based CAPTCHA, you know, where it's like drag the puzzle piece across, you know, I've done some of those where it's like oh my God, if you don't lay it exactly over top of it in there, which is great. And I've done a couple of those with my trackpad and it hasn't worked at all because I can't get my, you know, I don't use my trackpad all that much in my laptop. So I mean there's a lot of ramifications there. And this one's a really big one. This, this is something that companies are fundamentally going to have to look at. And that, and this very much goes hand in hand with what we talked about in the last episode with you know, auto filling, you know, and that, you know, if I've already done this one step in a form process, I shouldn't have to fill out it again. It's kind of the same thing. If I have my password over here, I shouldn't have to manually type it for your reason. You're going to have to look at other reasons like, you know, something coming from a specific address. If they miss five times, they're locked out until they do a reset and all those kind of things. They're going to have to look at other security measures because obviously this is one that probably a lot of internal IT organizations are really going to push back on from a security standpoint. And I think the whole world of CAPTCHA just has to be rethought in such a big way and that would go so far beyond the scope of this.

COLE 21:16
Yeah, we should do another episode for sure. Do you guys know like in terms of like the third party tool aspect of like CAPTCHA, how much that is held accountable versus like the people who are like setting up logins on their site, you know, like adding in constraints, is it reCAPTCHA? Like I've never even looked at this. Is that like a company or.

VIRGIL 21:36
No, no, reCAPTCHA is with Google.

COLE 21:39
Okay.

VIRGIL 21:39
Google does reCAPTCHA. But I mean, you know, there are other organizations out there that have CAPTCHA type solutions and there's open source CAPTCHA type solutions, you know, and all that kind of stuff. So it is, I mean there's going to be a certain amount of accountability. So the good news is the Googles of the world, and those are probably going to become compliant before you do. So they're going to probably force that issue to a certain extent because they tend to be trendsetters in that. And especially as much as Google kind of adheres to good accessibility, that that's going to be a big piece.

SETH 22:17
And the one exception to this WCAG rule is the object recognition CAPTCHA. So like choose all the photos with the bus in it is the exception. And you think, well, how is that?

VIRGIL 22:32
Which is interesting because that's the one I hate the most and I hate that. It's like when you're, you're doing the lines and the lines are across multiple images and then I select all the images that the lines sit on and it doesn't do it because I was just supposed to select the two with the most lines in it or something. It's like, it's so inconsistent. It's so frustrating and irritating from there. But that, but that's a UX thing, not a, not a WCAG thing. But again an interesting exception from that. So I mean there's just so many things from that. But this also goes to like MFA, you know, I mean that just real quickly, before we kind of talk real quickly about the, the AAA ones, which are just basically extensions on these. But anyway, MFA, you know, copy and paste your code in is another thing that a lot of MFAs don't allow. And they're going to have to start allowing that for accessibility to copy and paste your code. Because a lot of times, you know, it comes in like via text and I'm on my phone and I just. It'll automatically insert it and there's a fair number that won't let you do that because they've disabled that.

SETH 23:37
Yeah, in that it's definitely a big one.

VIRGIL 23:41
Yeah. So Seth, let's kind of wrap up by just kind of talking about the AAA ones here. I know a lot of people don't deal with this, but it's just important to kind of know how these extend a few of these.

SETH 23:52
Yeah, so the AAA is really just extending on these, making them kind of fully compliant, if that makes any sense. So a good example is 2.4.12, which is Focus not obscured and The AAA version is. You know, in last episode we talked about, if a field you're typing in is partially obscured, that passes for AA. But if it's fully obscured and you can't see where you're typing into, that does not pass the AAA. You gotta make sure that whatever you're interacting with or whatever you've tabbed to is fully viewable inside the window you're looking.

VIRGIL 24:38
That's going to take a lot of browser testing just to make sure that if you tab into something that. That fully appears and isn't blocked by anything, including chat bubbles.

SETH 24:48
Yeah. And then the other AAA item is the one we just talked about in accessible authentication, and it actually removes the object recognition CAPTCHA exception that was on that rule. So clicking all the bicycles is now doesn't pass when it comes to AAA.

VIRGIL 25:15
Okay.

SETH 25:17
And then the last one is the Focus appearance. So this one is when you're tabbing through a site, being able to see what you're tabbed on. And this one is setting contrast rules around the styling that's applied. So, like, if I'm tabbing through a page and I'm on a certain link, it needs to pass specific contrast rules to show that that link is differentiated from everything else, but also still passing the visual accessibility rules.

VIRGIL 25:53
And honestly, that's a good practice in the first place. I mean, if you're going to do it, you should make sure that whatever the clickable area is is very easy to tell from the rest of the page in the first place. So we have a lot here. I mean, there's a lot. We got two full episodes. We probably could have went to 10. But I guess we got to move on to other things at some point, don't we, Cole, and talk about some other things. But thanks for joining us on this one, Seth. I think this is all really good and some big things. I think we're going to have to address some of these down the road as organizations start implementing them. The pain points that are going to go along with it. I know we've already seen our first government RFP requesting 2.2 WCAG. So it's coming, people. If you don't understand that it's already here, you better jump on the ship and start moving forward, because it's going to be here. So thank you both for joining me, and thank you all for everybody, and we'll talk to you next episode. 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.

‍