Listen
In this episode, we review the changes introduced with Web Content Accessibility Guidelines version 2.2 in detail, and talk about key areas where organizations will need to implement changes in order to adapt to the new standards.
Mentioned in This Episode
- Ramune Japanese Soda
- What’s New in WCAG 2.2
- WCAG 2.2 Explained & How to Test for It
- How and why is success criteria 4.1.1 Parsing obsolete?
Transcript
>> CHRIS HINDS: Welcome to episode 56 of the “Accessibility Craft Podcast,” where we explore the art of creating accessible websites while trying out interesting craft beverages. This podcast is brought to you by the team at Equalize Digital, a WordPress accessibility company, and the proud creators of the Accessibility Checker plugin.
In this episode, we review the changes introduced with Web Content Accessibility Guidelines version 2.2 in detail, and talk about key areas where organizations will need to implement changes in order to adapt to the new standards.
For show notes and a full transcript, go to “AccessibilityCraft.com/056.”
Now, on to the show.
>> AMBER HINDS: Hey, everybody. It’s Amber, and I am here with Chris.
>> CHRIS: Hello, everyone.
>> AMBER: And Steve.
>> STEVE JONES: Hello.
>> AMBER: And we are going to do sort of a delayed conversation about Web Content Accessibility Guidelines 2.2, which were released in October. But there is some interesting things that are changes, and I know a lot of organizations haven’t rolled that out yet, so we thought it might be good to talk about WCAG 2.2.
>> CHRIS: Yes. I’m excited to run through it. I was just saying before we started recording that I’ve read through that summary about three times, and I’m still trying to retain everything, because some of the changes are definitely a little bit complex, but we’re going to talk through them in order, and I think before that, we have an interesting beverage/puzzle that I’m excited to introduce.
>> AMBER: Yes. So what are we drinking, Chris? What is this?
>> CHRIS: So we’ve got Ramune, which comes in different flavors, but it is a Japanese soda that has been around since the 1800s. It used to just be like carbonated lemonade, but since then, it’s come into all sorts of different flavors.
The unique thing about it, for people who haven’t seen it before, which you can kind of see it captured on the screen here, is in the neck of the bottle, there is a narrower portion, and then the bottle is actually sealed with a glass marble instead of a twist top, and so to open this, you have to use the included little tool piece in the top of the bottle to basically push down really hard and knock the glass marble down into the receptacle so that you can drink it, and it should maybe produce some interesting background noise as we open these up. But other than that, it’s a soda. It’s going to be sweet. It’s going to taste like whatever flavor they assign to it. But I’m going to go ahead and punch mine down here. We’ll see if we can get it on mic.
>> STEVE: Oh, yes.
>> AMBER: Wait a minute. I I want to know, like, it’s the 1800s, really? Oh, there’s instructions? Where are the instructions?
>> STEVE: It’s on the tab here on the very top.
>> AMBER: Oh, yes. So it has a plastic lid over the glass bottle and a wrapper I have to peel.
>> CHRIS: And then you have to separate this piece from the the housing, which is something I forgot, because I definitely don’t drink these all the time.
>> AMBER: “Remove the seal from the top, detach the plunger.”
>> STEVE: Ooh, that was loud. [chuckles].
>> CHRIS: Yes.
>> AMBER: “Place the plunger on top of the bottle, press down firmly with the base of your palm to release the marble. Throw away the seal cap and plunger, and have fun drinking Ramune”? That’s what you said?
>> CHRIS: Yes, and I don’t know if I can really get this on camera, but you can kind of see the glass marble in there with the bubbles on it, and a little glass receptacle. But it’s kind of fun. It’s different.
>> STEVE: Let’s go for the ASMR. Ready?
>> CHRIS: Yes.
>> AMBER: [chuckles] Yes. You guys, I’m going to try and push down on this, and I probably won’t be able to. I’m a little bit afraid. [chuckles]
>> STEVE: Did you get it? Oh, man, it’s spilling. [laughs]
>> AMBER: No, I can’t. OK, hold on. You really have to push hard on this.
>> CHRIS: Yes.
>> STEVE: Yes.
>> AMBER: Like, OK.
>> CHRIS: Yes. With the palm of your hand and then brace the bottom so it doesn’t slide on you.
>> STEVE: There you go.
>> AMBER: I can’t do it.
>> STEVE: She can’t do it.
>> CHRIS: Did you separate the two lid pieces?
>> AMBER: Wait, what do you mean, separate the two lid pieces?
>> STEVE: Like this.
>> CHRIS: So if you look at our camera, like, these two things separate. So you got to kind of push down.
>> AMBER: Oh, wait, the thing I’m supposed to be pushing down was still [chuckles] in the wrapper I removed.
>> CHRIS: Yes.
>> AMBER: So I was just pushing down on a blue plastic thing that does nothing. No wonder it was very hard. OK, I’m trying again.
>> CHRIS: And don’t push that yet, Amber. You’ve got to separate the two pieces of the lid so this little plastic piece breaks away.
>> AMBER: You even told me on Twitter that you were going to do this and I was going to look dumb, and now here I am looking dumb.
>> CHRIS: Yes, and you made fun of me.
[crosstalk ]
>> STEVE: Look what it did to my hand.
>> AMBER: What did it do? Describe what it did to your hand.
>> CHRIS: Oh, yes. I’ve got circles on my hand. Yes, yes. I’ve got indentations on the palm of my hand.
>> AMBER: OK, wait. I don’t understand these instructions. [laughs]
>> STEVE: The palm of my hand has a perfect round circle imprinted on it, and it’s a little red.
>> AMBER: OK, so now that I’ve separated them, then I push down just on the tiny piece?
>> CHRIS: Yes, and it should punch down and [crosstalk ].
>> STEVE: Ooh, she did it.
>> AMBER: I got it. [chuckles] Finally.
[laughter]
OK, that was a puzzle. I’m very challenged.
Also, I am almost certain that Alex Stine would tell us that this is not an accessible bottle. [chuckles]
>> STEVE: No, no, not at all.
>> CHRIS: No. Very much not.
>> AMBER: You need someone to teach you how to open them. [chuckles] But once you know how, it probably is accessible. It’s just knowing how.
>> STEVE: It, like, releases the marble down from the top into the bottom there.
I wonder how many people have swallowed this marble. Or if it’s ever made his way back out.
>> AMBER: Well, it did say somewhere on there not to eat it.
[laughter]
>> CHRIS: Yes. “Do not eat the glass marble.” Yes.
>> AMBER: I’m wondering, why does the marble only go partway into the neck? Why did they make the bottle that way? Just to make it look interesting? Or do you think it does something versus the marble going all the way to the bottom of the bottle?
>> STEVE: It’s more visual, right?
>> CHRIS: Maybe that. Maybe if the marble plunges all the way down to the bottom, it does something with the carbonation or something. Maybe it does something with the carbonation.
You know how if you, like, slap the top of a beer bottle, it can all turn to foam?
>> STEVE: Yes, yes.
>> CHRIS: I wonder if the act of the marble, like, shooting down to the all the way to the bottom would do something to the soda.
>> AMBER: [crosstalk ] Oh, make it, like, foams up more?
>> STEVE: Breaks the bottom of the glass.
>> CHRIS: Yes.
>> AMBER: No, I guess it’s not totally sealing in between the neck. It can go around it.
>> STEVE: Did we announce what flavors we’re drinking?
>> AMBER: No.
>> CHRIS: No. I’m trying melon, which is very melon-y.
>> AMBER: And green.
>> CHRIS: And green.
>> STEVE: All right.
>> CHRIS: Yes.
>> STEVE: What are you drinking, Steve? You’re red.
>> STEVE: I’m red. I’m drinking the strawberry.
>> AMBER: All right. Well, you guys know how I feel about food coloring. But I decided I would go for original, which is white, and I have no idea. I’m about to find out what I have.
>> CHRIS: That should be like a lemon lime flavor.
>> STEVE: It’s clear. It’s not white.
>> CHRIS: Yes.
>> AMBER: Oh, yes. Sorry, it is clear.
[laughter]
>> CHRIS: Yes. The thing that’s fun about this is it’s like you go a little extra [crosstalk ].
Like Steve mentioned ASMR. You kind of have this…
>> STEVE: Oh, yes.
>> AMBER: Oh, the marble rolling around in there?
>> CHRIS: …Marble jiggling around while you drink.
>> AMBER: Is this lemon lime? I don’t think this is lemon lime.
>> CHRIS: That’s what the original flavor was, but maybe their original is something else.
>> STEVE: Yes, it’s hard to drink because the glass is made out of, like, two sections. There’s an upper section and a bottom section, and the bottom has to fill the top before you can get any… [chuckles]
>> AMBER: Maybe it is lemon lime, but it’s so weird. It’s not like Sprite or 7UP or something.
>> CHRIS: Yes.
>> AMBER: I don’t know what kind of lemon. Maybe there’s a little bit of citrus in there, but I don’t know.
>> STEVE: It’s not as sugary as I thought it would be. It’s more like a red cream soda. Mine is the strawberry.
>> CHRIS: Yes. That was the first thing I noticed, too, having the melon, is it’s not super sweet, which tracks. If you have Japanese desserts, they’re usually not super sugary. That’s going to be our beverage to pair with WCAG 2.2.
Amber, do you want to get us started?
>> AMBER: Yes. So there are different versions of Web Content Accessibility Guidelines, and the one that we have lived with and worked off of for five-plus years, probably, was WCAG 2.1.
In October, after much delay, especially due to COVID, 2.2 came out, and it had a few changes that I thought would be sort of interesting for us to talk through. Both what’s new, and they removed a guideline, and maybe that’s sort of an interesting place to start.
>> STEVE: Yes.
>> AMBER: Anyone remember what they removed?
>> STEVE: It has to do with having proper closing tags, right?
>> AMBER: So what used to be was success criterion 4.1.1 parsing. Yes, I think it had to do with having proper semantic tags, but also, like, naming, and what I was reading when they removed that was they said that anything that failed 4.1.1 also would, by default, fail info and relationships and name role value, and so they ended up deciding that they didn’t need that because it was duplicative and wasn’t really unique enough, so they just removed 4.1.1.
>> STEVE: So that was, “In content implemented using markup languages, elements have complete start and end tags. Elements are nested according to their specification. Elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.”
>> CHRIS: So what I’m reading here is that, apparently, assistive tech has increasingly started to rely on browsers to handle the parsing and the parsing errors and to interpret the code.
I didn’t know this, but apparently, screen readers and stuff used to do their own markup parsing, and the browsers didn’t, which I thought was interesting. A little bit of history that I didn’t know.
>> AMBER: I mean, screen readers are, like, 30 years old, right?
>> CHRIS: Yes. I mean, it makes sense.
>> AMBER: Like, JAWS, I think?
>> CHRIS: Yes. But basically, it’s like the technology has advanced sufficiently that this is no longer required, and like you were saying, there’s other rules that basically cover this or supersede it.
>> STEVE: So it doesn’t necessarily mean to go out there and stop adding “close” tags, right? And adding duplicate IDs, right? It still applies, right?
>> AMBER: Yes. It’s just, if you come across that, like, [inaudible]. I don’t know if I’ve seen many things where developers left without a “close” tag. If that is, it’s an accident, and usually, you’d notice it because other things are messed up on the page. Like a link without an end closing tag would result in all the text following it having the link styles and functionality, right?
>> STEVE: I’ve seen the browser interpret those before… Like, I don’t know necessarily.
>> AMBER: And fix it?
>> STEVE: Yes, close it. I’ve seen in a few cases where it’s auto interpreted the tag. Like it’s fixed it even when it shouldn’t have been fixed. It should have been in error, but I look at the source, I’m, like, “Wait, hold on. This looks right, but the code doesn’t look right.”
>> AMBER: Yes. Yes. Well, anyway, I think, though, that they were saying even if you came across that, you could fail it for another reason.
>> STEVE: So there’s a new spec. There’s a new thing to refer to when you’re… right?
>> AMBER: Yes, yes. So let’s talk about what they added, and maybe we can just sort of go down this list, for people who haven’t had a chance to review it yet.
The first one, it’s 2.4.11. Focus Not Obscured (Minimum). This is an AA requirement. So we had before focus-visible, meaning that when you tab through the page with your keyboard, you always have to see a visible focus indicator, which is normally an outline, and this is now saying that other things cannot get in the way of that, or partially cover it, or cover it completely. Like, if they had an example, or if there are banners on the page and the focus goes behind it, which, to me, it’s so interesting that they had to create this, because when I think of focus-visible, I’m, like, it also shouldn’t be obscured.
I don’t know if you guys have thoughts on why [crosstalk ].
>> CHRIS: My immediate reaction when I read this.., and I remember, because I brought it up with you, Amber, and you were, like, “We have to talk about this on the podcast.” Now I’m going to talk about this, which is, believe it or not, I don’t have every WCAG criteria memorized, and so when I was reading this, I immediately asked Amber, I was, like, “This wasn’t a requirement before to have visible focus?” That was my immediate question. But no, it’s clarifying that the focus also can’t be covered, in addition to having it be visible.
So maybe that clarification is necessary. Maybe someone was trying to be technically correct instead of correct, and just say, “Well, the focus is still there. It’s just covered.” So they had to…
>> STEVE: Yes. Yes. I think in user testing it, the reason why we’re probably like, “Oh, that wasn’t required?” Is because when we user test, you guys would do that anyway. It just made sense, right?
>> CHRIS: Yes.
>> STEVE: But I can see the challenge from a development standpoint, right? In our own plugin, the Accessibility Checker, we got a front-end highlighting feature when you highlight certain elements, and we have to do a lot with focus state in regard to that, and we’re highlighting elements that don’t exist on the page, or they’re maybe off to the side of the page or above, right? Like, they’re out of the viewport. So we had to account for that. We had to move them into the viewport and then show them.
Now, where that can get kind of weird is if it’s on a website that has a popup, right? So from a development standpoint, we’d probably… If there’s some way for us to evaluate if something’s overlaying that, and that can get very difficult if things are being injected through JavaScript, and then you’ve got to think, too, like, it’s responsive too. It’s at any size, and anything that overlays content gets kind of difficult when they get squeezed down the mobile, because you’re covering up most of the page anyway, right?
>> AMBER: Yes. So the other one, which is sort of related to this is the AAA version. So 2.4.12, Focus Not Obscured (Enhanced). So the other one says it needs to be at least partially visible, but, like, on the right side, it’s cut off; or on the left side, it’s cut off.
We’ve seen that sometimes because we do outline offsets, and I don’t know what you guys do to fix it. But a lot of times when I’m doing a very first round of tests, if I tab through stuff, like a grid of posts or something, all the ones in the middle will be fine. But the ones on the left, like the outline-offset will be, like, outside of the container div, and so it’s hidden? I don’t know.
>> STEVE: It has to do with some Gutenberg blocks that have “overflow: hidden” on them.
>> AMBER: So you just have to say “overflow: visible,” and then it’s fine?
>> STEVE: Yes. Well, I mean, if the block that we’re using gives us the option to do that, we can do it in the editor. If not, I’ve done it with a class. Just add a class to the block, so it shows.
>> AMBER: So it sounds like in this first instance, the AA, it’d be fine if the focus was cut off on just one side?
>> STEVE: Yes.
>> AMBER: And the AAA, it’s that it’s visible everywhere, like, fully visible without anything blocking one part of it or partial.
>> STEVE: Yes. I mean, it gets a little difficult. We try to do a two-pixel outline with a two-pixel outline-offset on most elements. So you’re looking at four pixels all the way around that you have to account for. So yes, you could make sure you don’t have your overflow: hidden, or you can have a little bit of extra padding there to account for those outlines.
>> AMBER: Yes. You want to share the next one, Chris?
>> CHRIS: Yes. So we would be looking at 2.4.13, focus appearance, or do you want to jump to 2.5?
>> AMBER: No, let’s talk about focus appearance. We haven’t talked about that one yet. I mean, that kind of tails off of what Steve just said, like, what’s been our practice for years. So what does that literally say?
>> CHRIS: So what it literally says is, “When a keyboard focus indicator is visible, an area of the focus indicator meets all of the following. It’s at least as large, with the area of a two CSS pixel-thick perimeter, and has a contrast ratio of at least three to one. The exceptions would be that the focus indicator is determined by the user agent and cannot be adjusted by the author, or the focus indicator in the indicators background color are not modified by the author.”
So there are some exception cases in there, but generally two pixels, three to one contrast ratio focus indicator.
>> STEVE: This episode of “Accessibility Craft” is sponsored by Equalize Digital Accessibility Checker, the WordPress plugin that helps you find accessibility problems before you hit “publish.”
A WordPress native tool, Accessibility Checker provides reports directly on the post-edit screen. Reports are comprehensive enough for an accessibility professional or a developer, but easy enough for a content creator to understand.
Accessibility Checker is an ideal tool to audit existing WordPress websites, find accessibility problems during new builds, or monitor accessibility, and remind content creators of accessibility best practices on an ongoing basis.
Scans run on your server, so there are no per-page fees or external PPI connections. GDPR and privacy compliant. Real-time accessibility scanning.
Scan unlimited posts and pages with Accessibility Checker free. Upgrade to a paid version of Accessibility Checker to scan custom post types, and password-protected sites. View site-wide, open issue reports, and more.
Download Accessibility Checker free today at “EqualizeDigital.com/Accessibility-Checker.” Use coupon code “Accessibility Craft” to save 10% on any paid plan.
>> STEVE: That’s typically what we do, except for we add an offset, right?
>> AMBER: Yes.
>> CHRIS: Well, and don’t we also have, like, a double-color outline, so that whether it’s light mode or dark mode, [crosstalk ]?
>> AMBER: No, that’s really hard to do. On buttons, it’s easy, but if you have links that wrap.., because haven’t we tried doing that with a border and, like, a shadow or something? Or an outline offset? I don’t know what it’s called. [inaudible]
>> STEVE: Yes, what happens is that if you don’t define outline, the browser would try to interpret it, and the browser will add both. That’s when you’ll see the default blue and the white around…
>> AMBER: Like in Chrome, it’s blue and white.
>> CHRIS: OK.
>> STEVE: Yes, yes. Any Chromium browser, you’ll see that. But we typically will go through and add our own outline. So it is more difficult to do that. You can do it with a box-shadow and an outline, but it gets kind of messy, right?
>> AMBER: Yes.
>> STEVE: So what we typically try to do is try to evaluate the focus state on a on a section-by-section basis.
>> AMBER: Yes, and if possible, we try not to set the color and allow the browser to do it, so they do get a two-color, and then we’ll only go back and set color if we have to, because it just really doesn’t pass contrast.
So this one, they added this, and it’s AAA, and it really bugs me that is AAA. Probably at some point, I’m going to go back and try and dig through, because all the conversations on these are open because it’s an open source project on Web Content Accessibility Guidelines.
I don’t love that this is AAA, and it’s so interesting to me that this got added. I wish that they would have enhanced focus-visible AA, because literally what it says is, like, people should be able to see the focus indicator, so it can’t be tiny.
I’m going to get my WordPress Core Contributor badge. I’m so excited. Not because I committed any code, but because I opened an issue that led towards Joe Dolson committing code for me. [chuckles]
>> STEVE: Hey, a badge is a badge, right?
>> AMBER: Yes. But it was because there was a focus state in the 2024 theme that I discovered when I was building our shop with it on buttons that was a one-pixel dotted, and so it was very thin, it was dotted.
It was interesting, because I opened the issue and I was, like, “This should be two-pixels, and it should be solid always.” Like, this should just be our standard, and then someone came back and they were all, like, “Well, that’s WCAG 2.2, and we don’t need that.” And I was, like, “No. This has been best practice way before WCAG 2.2 said you should do this.”
[laughter]
They just did, right? I was, like, “We should just do it.” And it does kind of bug me that they made it AAA, because I’m concerned that, you know, clients or web developers who feel like they have to meet, but they don’t really want to, are going to look at that and be, like, “Oh, no, a one-pixel border is fine, because that’s AAA, and we’re not meeting AAA. We’re just meeting AA.”
I don’t know if you guys thought about that. But sometimes I feel like the guidelines can hurt you, because people feel like they want to do the bare minimum.
>> STEVE: Yes. There’s always the technical people, too, and then there’s always the people on the Internet that want to have an argument, right? It’s like they want to win an argument. [chuckles]
>> AMBER: Yes.
>> STEVE: I think we’ve always practiced what’s the best thing to do. We’re not saying you have to AAA on everything, but this one is super easy. Let’s just do the right thing.
>> AMBER: And it can make a big difference.
>> STEVE: Yes.
>> AMBER: Yes.
>> CHRIS: I would have been interested to be a fly on the wall. I mean, that might all be public discussion, but to know what pushed them to make it AAA instead of AA? I would be curious to know that.
>> AMBER: I don’t know. If we’d been smart, I would have asked somebody before this podcast so we could report on that. But that might be as a good follow-up item for us to see if we can find the discussion for that, and if so, link it in the show notes.
So those are three new guidelines around focus indicators, which I think are all good, but maybe I sort of question the level on them, and then we move into guidelines about input modalities, which, for those of us who are not technical, what the heck does that even mean? Input modalities?
>> STEVE: Modalities. I just like saying that word, Modalities.
[laughter]
Sounds like an ‘80s pop band or something, right? The Modalities.
>> AMBER: Input modalities?
>> STEVE: Input modalities. [laughs].
>> AMBER: This is what Steve’s going to name his band.
>> CHRIS: It immediately makes me think of modals, but I’m guessing it’s beyond that.
>> AMBER: It just has to do with how you can input information. I think that’s what this means, right?
So what’s up first there?
>> STEVE: Yes. So this is 2.5.7, Dragging Movements. “All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the alter.”
>> AMBER: So user agent references, like, browser or phone, right?
>> STEVE: Yes, yes. Yes.
>> AMBER: So I’ve seen this sometimes on forms where they’re, like, “Rank order things that are most to least important to you.” And people drag and drop things into order, and this is basically saying you have to have a way for people to do this without dragging and dropping with their mouse?
>> STEVE: Yes, because that benefits those that can use a mouse over those that can’t, right?
>> AMBER: Yes.
>> STEVE: So we want to equalize the playing field here for everybody and provide an alternative for keyboard users, right? That’s what I’m getting out of it.
>> AMBER: Yes, and this is AA. So it is something that people are going to have to do. It’s not like AAA bonus, right?
>> STEVE: Yes.
>> AMBER: The thing that I think is interesting, because at first, you’re like, “Oh, we don’t really see that so much in WordPress.” But I will say, beyond the form plugins that some of them have field options for that…
>> STEVE: The [inaudible]?
>> AMBER: Yes. Within WordPress itself, the WordPress editor, and the blocks, being able to drag and drop them. Or I’ve noticed this…
>> STEVE: But there is an alternative on blocks.
>> AMBER: What’s the alternative on blocks? Use a classic editor plugin?
>> CHRIS: No, there’s up/down arrows that you can go.
>> STEVE: There’s and up and down button.
>> AMBER: Yes, well, that’s what I was saying. So they’ve done that there, right?
>> STEVE: Yes, yes.
>> CHRIS: Yes.
>> AMBER: But also, I think if you’re a plugin developer and you’re building things for the block editor and you’re hooking into those default stuff, then that will already be done for you, because people on the Gutenberg team have put effort into that.
Now, where I see this failing is people that create custom blocks, either custom React blocks or blocks that are… I don’t know if I’ve noticed this in ACF. I’m not sure if that exists in ACF, but…
>> STEVE: Repeater Fields can be drag and drop?
>> AMBER: Oh, yes. Repeater Fields or…
>> STEVE: And I don’t think there’s an alternative.
>> AMBER: I don’t know why I’m forgetting, but there’s another…
>> STEVE: Flexible Content.
>> AMBER: Well, outside of ACF, there’s a competitor to ACF. I can’t remember. But in the sidebar, I’ve seen this where there’s settings in the sidebar for controlling the block settings in the editor that require drag and drop to order things, and I’ve seen those quite a bit where they can’t be moved with the keyboard.
>> CHRIS: I’ve also seen drag and drops for defining image size and stuff, but usually, there’s a text input alternative for those.
The other thing that jumped to mind for this with me is, with our company’s bank, there’s a web interface that you can use to remotely deposit, and the action of depositing requires you to click and drag a dollar sign from one end of a bar to another.
>> AMBER: Wait, for real?
>> CHRIS: And that’s the only way to submit that I know of. Maybe if I started tabbing, it would give me an alternative. But I’m guessing things like that would be a violation, right? Things that requires this type of motion. That’s something that jumped to mind for me.
>> AMBER: I think you just figured out how we’re going to make our $2 million. The next time you want to transfer money between our bank accounts, you’re going to attempt to do it with your keyboard alone, and then when you can’t, you’re going to sue them.
[laughter]
Then our bank is going to give us lots of money, and probably tell us we can’t be customers anymore.
[laughter]
>> CHRIS: Oh, my gosh. This is what’s wrong with the American accessibility culture.
>> STEVE: [laughs] Yes. Yes.
>> AMBER: I mean, is it, though? I can’t believe that’s the only way.
>> CHRIS: Well, no, I can’t believe that’s the only way. It’s, like, that’s the problem. I’m not saying that the idea of suing someone is a problem. That’s the only recourse right now. So of course, that’s what you do. Not that this needs to get a philosophical discussion, but, like, you know…
>> AMBER: You can contact them first.
>> CHRIS: Yes. But what I’m saying is, for most public corporations, there’s no regulatory body that’s going to go find them.
>> STEVE: Yes.
>> AMBER: Yes. Banking has extra rules beyond ADA.
>> STEVE: I wonder if what you’re talking about is, like, a cognitive test?
>> AMBER: Yes. It’s not just a mobility test. Here’s what’s so interesting about drag-and-drop things. They can impact so many people. So people who can’t use a mouse are blind people, because they can’t see where they’re pointing it. But also, some older people sometimes, or people with tremors, like Parkinson’s, maybe, might have a really hard time pointing or moving in a certain area, and holding the button down while they do it to drag. They can see, they know what they need to do, but their hand might not cooperate. Or people who can’t use their hands or their arms at all.
I don’t do anything with our money. [chuckles] It’s there. It makes me happy, and that’s it.
>> STEVE: She spends it.
[laughter]
>> AMBER: Yes. I had no idea. He’s dragging and dropping the money into a bank account in the Caymans, and I don’t have access to it. I don’t know.
[laughter]
>> STEVE: We’re going to have to have a talk after this podcast.
[laughter]
>> AMBER: But it’s interesting. When you first load the page, is it, like, “In order to process your payment, drag the dollar sign over…” Like, does it have written instructions, or do you just have to look at it and know?
>> CHRIS: I don’t know, because as a lucky individual, I don’t have to read those instructions or figure out an alternate way to do it.
>> AMBER: So you haven’t paid attention?
>> CHRIS: Yes, I haven’t paid attention.
>> STEVE: I will say that as a sighted user using drag-and-drop for years, I feel like there’s always a little hack that I have to learn to get a drag-and-drop to work properly.
>> AMBER: Yes.
>> STEVE: If you’re doing an ACF Repeater and you want to drag it, it’s like… I’ve had clients before that they’re, like, “I can’t get this to move.” And I’m, like, “Yes, I know what you got to do. You got to hold on it, and you got to go to the top of the screen while you while the viewport scrolls up, and then once that scrolls up, then you can go up and drag-and-drop it where you want to.”
There’s always these little hacky things with drag-and-drop.
>> AMBER: Yes. In Gutenberg, getting things to go into the right block, if you’re, like, “Oh, I need to move this out of this container block and into that one”?
>> STEVE: Yes, yes.
>> AMBER: Half the time, I end up having to use the Navigator? Is that what it’s called? On the left, where it lists views all of them, and dragging it there, because I have such a hard time getting it to go into the kitchen [phonetic]. [laughs] It’ll go above the kitchen, or below the kitchen.
>> STEVE: Or you put it in the wrong container.
>> AMBER: Oh, yes.
>> STEVE: Because it’s, like, there’s a container around this block, right?
>> AMBER: The thing about the bank though is, I can just imagine that whatever designer or developer thought of that, they were, like, “This is cute. This is fun,” right? I bet they were so excited about it, right? And they were, like, “It’ll be unique.” But you’re just, like, transferring your money should be not unique or special, [laughs] right?
>> STEVE: It’s probably a legitimate test. Not robot test, like alternative to a captcha.
>> CHRIS: Yes, I think what Steve is saying is it would be hard to spoof, right? For false transfers or someone’s account getting hacked. Is that right, Steve?
>> AMBER: But I mean, you need to be logged in. Don’t they have all the multifactor?
>> STEVE: Yes. A script, yes.
>> AMBER: But don’t they have all the multifactor for getting logged in, don’t you think?
>> CHRIS: Yes. But with the new security stuff that’s happening around, like, session spoofing, which is like the new frontier in hacking, you know, you can capture someone’s browser session, and it has all their cookies in there, and you can be in Czechoslovakia and log into their bank and do a bunch of stuff with scripts. I think that might be it, Steve.
>> AMBER: This is a security feature?
>> STEVE: I bet you it is.
>> AMBER: I mean, only if all the people who can’t use mouses… Mice? [laughs]
>> STEVE: Yes, that’s what we’re talking about, right? It keeps out robots and it keeps out people with disabilities, which is a bad thing.
>> AMBER: Yes.
>> CHRIS: Yes.
>> AMBER: So obviously, this was a much needed addition to the Web Content Accessibility Guidelines, because this one, unlike the stuff we were talking about with focus, where I was, like, “Wasn’t this covered already,” this seems very unique. I don’t remember anything else specifically referencing dragging movements.
>> STEVE: These marbles keep bouncing around.
[laughter]
>> AMBER: But I think this is a sign of the advancing internet, right? Like, we’re thinking of new technologies, and when WCAG was first created, you couldn’t really drag and drop stuff probably as much as you can now.
>> STEVE: Yes.
>> AMBER: So what’s next?
>> CHRIS: Target size.
>> AMBER: All right.
>> CHRIS: You want to take that one, Steve? Did Steve read the last one? I’m all Topsy-turvy.
>> STEVE: I know. He’s had too much carbonated…
>> AMBER: Sugar?
[laughter]
>> CHRIS: I’ll take this one. “So the the size of the target for pointer-based inputs is at least 24 by 24 CSS pixels.” That seems big. That seems bigger than I expected. “…Except where undersized targets are positioned so that if that pixel diameter circle is centered on the bounding box of each, the circles don’t intersect, target the other circle or another undersized target, or their equivalent. The function can be achieved through a different control mechanism or inline. The target is in the sentence, or its size is otherwise constrained by the line height of the non-text target.”
So there’s a bunch of exceptions to this, but the target for a pointer input is 24 by 24 pixels.
>> AMBER: Did we say this is an AA requirement?
>> CHRIS: We didn’t. So this is AA.
>> AMBER: Yes.
>> STEVE: 24 by 24 is not very big. You couldn’t make a button that says “cancel”…
>> CHRIS: I get something in, like, points and fonts, which is not the same as pixels, right? So I was thinking…
>> STEVE: Yes. This is like a tiny little square, 24 by 24.
>> CHRIS: OK. Yes. All right.
>> STEVE: Yes. I mean, 24 high is kind of skinny, like a skinny button, right? We try to make our buttons around 40, 50 pixels high.
>> AMBER: There’s already an AAA guideline that existed there. I think it needs to be 46 pixels square as a minimum.
>> STEVE: On AAA?
>> AMBER: Yes, AAA. That was in 2.1. I thought I remembered there was a tap target size on there. But of course, now I can’t find it, and I was at the last moment thinking I should. Let’s see. Oh, no, it’s 44. OK, yes. So this one already existed in 2.1, which is a success criterion 2.5.5 Target Size (Enhanced) AAA, and that requires a minimum of 44 by 44, and so they decided that we need to add an AA equivalent to this rule and look for the minimum 24 by 24.
Sometimes, it’s helpful for mouse pointers, like we were talking about people that have more jittery movements or something like that. But also, on touch-screen devices, so like phones, if you have large fingers, or there are people who don’t have fingers and they might be using, like, a mouth stick that they hold in their mouth in order to tap, or they might be using their elbow, like a larger surface area, so having larger tap target size can be really helpful.
>> STEVE: So are they saying that this doesn’t require to inline?
>> AMBER: So they’re saying one of the exceptions was, if it’s a link in a sentence.
>> STEVE: OK.
>> AMBER: Yes. A link in a sentence. You don’t have to make the spacing between the rows of text 24 pixels, right? But it’s more like floating buttons. So things like your social-media links in your footer, or a submit button on a form that’s on its own line, things like that.
Really, I feel like when you think about what was really small, it probably was, like, social media, links or buttons in nav menus or in the footer or social sharing icons. So anything with an icon, sometimes I see designers will make those really small.
>> STEVE: Yes, like where you’re utilizing an aria-label rather than actually outputting the text on the… I mean, that leads… OK. I’m looking at our website, at our social icons, but ours look fairly large.
>> AMBER: How big are they, if you look at them?
>> STEVE: Let me look. Inspecting. They’re 44 by 44.
>> AMBER: Oh, yes, because… AAA.
>> STEVE: Because they’re AAA. Way to go, Amber. I’m sure that was you.
>> AMBER: I know. That was totally me. [laughs] I mean, they’re in the footer. They’re probably made with a widget. I probably put it in there and set the size.
>> STEVE: Yes, yes.
>> AMBER: I think we use simple social icons plugin for social-media icons in the widget areas, which has appropriate labels, and hides the icon and everything, which is good. So it does not require a developer to make things accessible, which is always nice.
>> STEVE: That’s right.
>> AMBER: So the next one I’ll take. This falls under our guideline of predictability, meaning that things will operate the way we expect them to, and so this is a single A, which means really bare minimum.
>> STEVE: Yes.
>> AMBER: And 3.2.6 is the number that it was given, consistent help, and basically, what this says is, if a web page contains any of the following mechanisms – so things like human contact details, or a way to contact a person or a self-help option or a fully automated contact mechanism – and they’re repeated on multiple web pages within a set of web pages, they occur in the same order relative to other page content unless the change is initiated by a user.
So basically, if you have help in your nav menu, no matter what page they’re looking on, it should be in the same order in the nav menu. If you have one of those chat bubbles, which we could have a whole conversation about that, and maybe that actually would be a really fun podcast episode in the future…But if it’s the last element in the DOM and it’s in the bottom-right corner… It’s always in the bottom-right corner. It doesn’t, like, on some pages go to the left corner or something like that. That’s how I understand this. I don’t know if you guys understand it differently.
>> STEVE: No, I think that makes sense.
>> CHRIS: Yes.
>> AMBER: Yes. Just be predictable and consistent with how you lay things out across your entire website.
>> STEVE: Yes. Can you think of an example where that is not followed a lot?
>> AMBER: Oh, where the help information moves around?
>> STEVE: Or something moves, is in different places on different pages.
From archive to archive, for post type to post type, we try to have a consistent feel across those.
>> AMBER: Yes. This one is specifically referencing a way to get help or support, right?
>> STEVE: Oh, OK. So it’s not just anything. OK.
>> AMBER: Yes, and it’s not anything. It’s just anything referencing how to get help or support or contact. I don’t know if I’ve seen it myself, but I could see maybe designers were, like, “On the homepage, we’re going to put our live chat in the bottom right. But on this other page, we need something else there. So we’re going to put it on the side sticky on this one side.”
>> CHRIS: Yes. I don’t know if this would exactly apply, but I feel like I’ve had experiences like this going in and trying to cancel certain SaaS products or plugin license plans. They make it hard. They don’t make it easy or straightforward. I know it’s not exactly this, but it’s the same kind of thing, where I can see someone particularly with a cognitive disability, a person with that, and I don’t know how they would deal with that, if can barely get through it at times.
>> STEVE: I don’t know if this relates to this or if this is just a tangent. But if the page accidentally refreshes and then I’m at a live chat, I hate that.
[laughter]
>> AMBER: Yes. Yes. So that is one thing that’s nice. I’ve been on some websites, like WP Engine, which is pretty good this way. When you’re in their portal, if you need help, you can be chatting with them, and if you open another tab, your chat is still there in the new tab and it still works, and you can go back and forth between the different tabs and still talk to them. Or if you forget to click a link and open it in new tab and it goes to the page, it still loads it and you don’t lose. Whereas I’ve been on other hosts where the second you click on a new tab, it totally ends your chat session.
>> STEVE: Yes.
>> AMBER: So I think this might fall under that, potentially, with predictable and support, right?
>> STEVE: Yes, because if you’re in “support,” and they’re saying, “Go to your dashboard and check this,” right? And if you go there and then you no longer have your chat, that’s not very predictable.
>> AMBER: Yes.
>> CHRIS: Yes.
>> STEVE: Maybe that’ll be the AA or AAA.
>> AMBER: Yes. So now we’re moving from predictability to helping people with inputs.
>> CHRIS: Yes. So this first one which, Steve, I’ll let you take, but I feel like this one is going to be a “got you” for a lot of school registration forms and government websites with long and complex forms.
You want to take us away?
>> STEVE: Yes. This is 3.3.7 Redundant Entry, which is a single A. “Information previously entered by or provided to the user that is required to be entered again in the same process is either auto populated or available for the user to select, except when re-entering the information is essential.”
There’s a link to “essential.” I won’t click on that now, but I’m sure that helps us determine what is “essential.”
“The information is required to ensure the security of the content, or previously entered information is no longer valid.”
>> AMBER: So this is an interesting one that I’ve wondered if it will end up impacting WordPress core.
So here’s a good example of this. If I go to forget my password, I have to type either my username or email address in order to get it to send me the password reset link, and then I click the link to log in again. I think based on this, which is a single A guideline, my username or email address should be prefilled in the username or address field, because I’ve already provided it to the website one time and I am in the same session with the same cookie or whatever, right?
>> STEVE: Yes, but you’re not. You’re not in the same session. You’re in a new session.
>> AMBER: If I’m in the same tab, and I just click the link that says, “Go back to login,” and I go back? That’s how I interpret this.
>> STEVE: It’s going to send you a link in your email, and you’re going to click on that link, which opens a new…
>> AMBER: OK, yes, and that one would be even easier because they could put your email. With that, you would open the thing and you would get a form to reset your password. It wouldn’t ask you for your email address.
>> STEVE: Right, right.
>> AMBER: So you would reset your password, you hit “submit,” it saves it, and then there’s a link that’s, like, “login,” right? And you click that and it loads you in, and I feel like it should not ask you to retype your email address and your username, because it’s already…
Now, the password is a security thing, right?
>> STEVE: Yes, yes, yes.
>> AMBER: So that’s the exception. We’re not going to not ask you for your password to login at that point. But I feel like the username or email address should probably be prefilled because it knows you’re trying to log in as that user based on the workflow that you just went through.
This is really important for people who can’t use traditional keyboards, that are maybe typing with eye tracking or a sip-and-puff device and they’re, like, blowing in certain ways. Like, it can take a long time to type things out, and so having that, I think, is why this would be helpful, which is to reduce asking people for things.
>> STEVE: Yes.
>> AMBER: Your pain, Chris, I think, was we have four children, and every year when you register them for school, you have to type in our address and our phone numbers and all the emergency contact information every single time.
>> CHRIS: Four times in the same session. So this is a violation. It shouldn’t happen.
>> AMBER: I know. You can complain.
>> STEVE: Yes.
>> CHRIS: Yes.
>> AMBER: [laughs] It’s a school. Our kids are going to a charter school, but it is publicly funded with public dollars.
>> STEVE: We’re just going to sue everybody after this episode.
[laughter]
Like what you described, Amber, that’s a complicated fix, right?
>> AMBER: Is it, do you think?
>> STEVE: I mean, given WordPress is on half the internet, that probably has to be…
>> AMBER: But that’s just a change in core, isn’t it? Obviously, if you have a front-end login form, then all the plugin developers [inaudible] always have to do that. But what about just changing it in core? Would that be that hard?
>> STEVE: I don’t know that the actual code to change it would be that hard, but the process in which to get that deployed into a WordPress release might be hard.
So like what Chris is describing, and what we as developers do a lot, there’s a lot we can do that’s fairly simple.
If we’re using Gravity Forms, we can auto-populate another field based on a previously filled out form. So there is simple steps that we can take as developers to achieve this.
>> AMBER: Yes. Gravity Forms and a lot of the premium plugins do support auto-filling fields and stuff, but if you’re using Contact Form 7, probably you’re going to fail this single A guideline.
The next one is an AA 3.3.8 Accessible Authentication (Minimum). So this is a minimum level for that, and it says: “A cognitive function test, such as remembering a password or solving a puzzle, is not required for any step in an authentication process, unless that step provides at least one of the following.”
So either A, an alternative, so you could have a different authentication method instead of solving the puzzle, or a mechanism to assist the user in completing the cognitive function test, or if it is to recognize objects. So this gets around all the captchas that tell you to pick all the stoplights or buses or whatever. That apparently is an exception. Or, “The cognitive function test is to identify non-text content the user has provided to the website.” So, like, “What was your first pet’s name?” Or something like that, which you previously provided. So that’s OK.
Although, you know what I think fails this? Doesn’t Jetpack add the, “What’s 3 + 7?” Like, it adds math problems to the login. So I think that this is one that I’m thinking of that Jetpack is going to have to correct. Or websites that need to be accessible cannot turn that feature on in Jetpack. No math problems.
>> STEVE: Even as simple as the math is, because it doesn’t give any level to the… Right? Like there’s no criteria on what level of cognition is required.
>> AMBER: Yes. So even one plus one.
>> STEVE: Just real quick, can you explain to us why it labels these minimum?
>> AMBER: So usually, when something is labeled as minimum, that means that there’s going to be two versions. So there’ll be an AA, and that’s the minimum, and then the same thing will be AAA. So that’s the interesting thing, which is some of the guidelines, the color contrast is one. There’s an AA, which is the minimum color contrast you want to have, and then there’s enhanced, which is AAA, which is a higher level of contrast between colors. So you could be AA compliant, but not AAA compliant. Or if you are AAA compliant, then you also are automatically AA compliant because it’s the same success criterion subject area or something.
>> STEVE: I guess it indicates that there’s not a single A version.
>> AMBER: Yes, there isn’t single A. They’re like on a scale, the two things. So they did also add the AAA version. I don’t know if somebody wants to say what the difference on the AAA is.
>> CHRIS: I was going to say the marks difference there, and that’s the enhanced version of the same rule, is you can’t have the object recognition or a personal content alternatives in the AAA. So you couldn’t have those captchas that make you pick out all the bikes or the cars or the traffic lights or whatever else. Or something to identify non-text content.
>> STEVE: So dragging a dollar sign across the screen, is that a violation? Is that a cognition test?
>> AMBER: I don’t know. I think that’s more of a mobility test. But maybe it’s a cognition test if there’s no clear instructions telling you what to do, because how would you know that to submit the form, you have to drag this item to that? I don’t know. I still think that’s really weird, and I want to see it. [chuckles]
>> STEVE: Yes. Screenshot that and put it up on Twitter.
>> AMBER: Yes. Assuming it doesn’t have all my bank account numbers.
>> STEVE: Yes. Is this your personal bank or our business?
>> AMBER: Our business bank, which one is it?
>> CHRIS: They’re both at the same bank, but different accounts. So it’s both, yes.
>> AMBER: See? So the company, and we can complain. [laughs]
>> STEVE: There you go.
>> CHRIS: I’m going to say that again more slowly. Same bank, different accounts. Don’t go out there and say that all the Equalize Digital’s funds are running through Chris’s personal bank account. Not happening.
[laughter]
>> STEVE: No.
>> AMBER: So basically, those were the new things that were added in.
I’m sort of curious. We’ve talked a little bit about this, what we think might be implications for WordPress as we’ve been going. But what are you guys’ take on whether organizations should start working on these 2.2, and including them, versus continuing to say our organization meets 2.1, or even 2.0, which is technically all that’s required for Section 508 compliance? What do you guys think? Should organizations be doing this? They’ve been out since October.
>> STEVE: Yes. So 2.0 is the minimum requirement by most government and university.
>> AMBER: Yes, in the US, Section 508, right?
>> STEVE: Yes.
>> AMBER: But I know in Ontario, they say 2.1.
>> STEVE: [crosstalk ]. It’s coming.
>> AMBER: Yes.
>> STEVE: There’s no harm in preparing yourself and getting caught up, or being ahead of the upgrade or the guidelines, right?
>> AMBER: Yes. So out of all of these, I guess there’s two things that might be the hardest. But the first one is, not asking people for redundant information.
>> STEVE: Yes.
>> AMBER: Some of the other ones are CSS. So I’m, like, “Whatever.” That’s not hard to be, like, “We’re just going to do this.” But that one seems like it could be more complicated depending upon what kind of information you’re asking for people in there.
>> CHRIS: Yes. If you’re an organization that uses a lot of web forms for things, that could be challenging.
I feel like with this stuff, we’ll see slow ramp up with adoption.
Amber, with our audits, we’re always advising on the latest standards. We get people everything, right? And then they can decide how far they want to take it, like, if they want to leave off AAA as a phase two or [inaudible].
>> AMBER: Have you had any clients or prospective clients, Chris, tell you that they want to meet 2.2? Or are they even aware that 2.2 exists?
>> CHRIS: Everything I’ve seen recently is still referencing 2.1 AA or AAA. I never see 2.0, typically, in anything. So most people are still in 2.1 land. I haven’t seen any 2.2.
As a way to impress them and differentiate us, I did, in a recent RFP response, reference 2.2, and even in the Q&A portion of the RFP say, “Hey, this new version is out. Your organization seems to really care about this stuff because it’s a regional service placement organization that helps individuals with disabilities get access to services, job placement, et cetera.” And so I said, “2.2 is the most recent version. Your RFP says this. Do you actually want this, or do you want to go all the way: 2.2 AAA?” And I sent them things like the summary and some other stuff, and they ended up saying, “Yes, we want the latest and greatest.”
So after I land us that project, we will have a project coming up really soon where we’re going to be building something that meets these new standards, which will be fun, and they have a lot of web forms. So that’ll be something interesting, and maybe we’ll eventually be able to have a case study or something to share that’s, like, how we tackled that criteria on this new version of this website.
>> AMBER: Yes. So it’ll be interesting to ask them… I’m going to say “when” we get it instead of “if.”…But when we get it, if we were the only agency that referenced 2.2.
>> CHRIS: We were. I already know because I have someone on the inside, sales tip guys. Had someone on the inside before you respond to the RFP. This person’s calling me weekly, giving me updates without me having to ask, and the most recent update was there were… I’m not going to name the organization. So I don’t think I’m revealing anything sensitive here. But on this RFP, there were six responses, and three of the six recommended overlays to this organization.
>> STEVE: Wow.
>> CHRIS: Yes.
>> STEVE: That’s crazy.
>> AMBER: Bummer. It’s probably because they don’t actually know how to do it personally.
>> CHRIS: And they’re, like, “No.” So right there, 50% of our competition got eliminated.
By the way, for the agencies listening, this is, like, a $90,000 website project. So if you want to compete for these, you need to not recommend overlays. You’re going to get laughed out of the room.
>> STEVE: I mean, that could be a whole episode in and of itself. But if you’re recommended an overlay, you’re basically telling them you don’t know what you’re doing.
>> CHRIS: Yes.
>> AMBER: Yes. It’s like red flag Giganto. Maybe not for a small business website, because that person probably doesn’t know. But for an entity that is government funded or that supports people with disabilities, they’re going to know.
>> CHRIS: Higher Ed.
>> AMBER: Yes. Higher Ed.
>> CHRIS: Healthcare. A lot of the industries that actually have money to fund large website projects, which are the types of projects that most agencies interested in growth want. Yes. Don’t recommend an overlay, or you’ll be self-selecting out.
So 50% of our competition is out right there, and the other two of the three did not reference the current standards, or really speak significantly to their testing process, according to my internal contact.
So maybe we can say “when,” I don’t know. When we get it, but…
>> AMBER: Knock on wood.
>> CHRIS: Knock on wood. But I think…
>> AMBER: [inaudible] knock on his head, by the way, for anyone.
>> CHRIS: Yes, for our listening audience.
>> STEVE: Knock on glass. We can knock on the marble.
>> AMBER: Oh, maybe, if you can get your marble to make noise.
[laughter]
>> CHRIS: Anyway, that kind of turned into a tangent. But I think we’re going to see slow adoption over time, and for our part, Amber, we’re just going to test up to whatever the current standard is, and people can decide, with our help, what makes sense.
>> AMBER: Yes. So I’m curious, do you feel like we can write rules for any of these in Accessibility Checker, Steve?
>> STEVE: Yes, I think so. I think we can definitely evaluate forms for redundant information. We could check.
>> CHRIS: I’m sorry to interrupt. That is not the one I thought you were going to say. That’s impressive.
>> STEVE: Really?
>> CHRIS: Yes.
>> STEVE: We can check for the size of buttons, the hit area, and stuff.
>> AMBER: That one’s easy.
>> CHRIS: That was the one that I was thinking.
>> STEVE: It’s somewhat easy.
>> AMBER: I feel like it gets harder when it’s, like, how do you differentiate between links in a paragraph or body text versus links that are by themselves to know that, “Oh, these ones are excluded”?
>> STEVE: Yes. Yes. I mean, there’s a little bit that goes into that, right?
>> AMBER: Because you could only do it on links to have a class of button or something? Like, you could look for certain classes and be, like, “Oh, OK, they’re intending this to be a button, and so therefore, we’re going… To look like a button”?
>> STEVE: You could traverse outside of the links and check and see if it’s inside of a paragraph tag. I mean, that’s probably the most simple. That’s the most basic… [crosstalk ] Yes, because buttons typically are not going to be inside of a paragraph tag.
>> AMBER: Yes.
>> CHRIS: So I’m curious now, because I wasn’t expecting you to say the redundant entry one could be tested for. What do you think, at a high level, you would do, without giving away too much?
>> AMBER: On the spot, in two seconds. How would you figure that out?
>> STEVE: How would you code this?
[laughter]
>> CHRIS: He’s the CTO for a reason, guys.
[laughter]
>> STEVE: Goodness. I would grab all the forms, and then parse through each form and evaluate for similar labels.
>> CHRIS: OK. So if, like, label strings matched a certain amount, you give a warning?
>> STEVE: And here’s Amber. She’s going to blow that out of the water. What do you got? [laughs]
>> AMBER: No, no, no. What I was going to say was I think extending off of this is, if you can tell if a user is logged in, you should probably never ask them for their name on a form.
>> STEVE: Yes, yes.
>> AMBER: Because that is literally a user meta field, right? It should just be there. They can edit it.
>> STEVE: Yes, yes.
>> AMBER: But their name, their email address, if you’re asking for social media… Like, any of the core user meta fields that already exist, you should probably always pre-populate those on any form, if someone is logged in, and then if you’ve added your own user meta or you’re using a plugin, like a membership plugin or something that adds user meta, same thing. Like your form should know to look for that and populate it in.
Forms like Gravity Forms, which is what I have the most concerns with, it has merge tags that are super easy to just get, like, it doesn’t even require code to do that. That’s where I would start, but I don’t know how you would tell. Maybe you could tell if a form was on a restricted page, and only logged in users could access it or something, and then you’d be like, “Oh, this is one where, theoretically, it should have pre-populated info.” I don’t know.
>> STEVE: Yes. We have the benefit of being inside of WordPress, right? So, yes, we could check for user fields as well. It wouldn’t be an exact failure. I think it’d be a warning.
>> AMBER: Yes, because our definition of warning is, “We think this might be a problem, but you should check it.” [laughs]
>> STEVE: Yes, it requires some manual evaluation.
We do have a form on our plugin on the welcome page, on our main plugin page that has a form to subscribe to our email newsletter, and it does pre-populate with your email and your username, if, you know…
>> AMBER: So whoever is logged in would see that.
>> STEVE: Yes, yes. So, yes. Cool.
>> CHRIS: All right. Thanks for letting us put you on the spot with us, Steve.
[laughter]
>> STEVE: No problem.
>> AMBER: As we wrap up here, I realized the thing that we didn’t say about our… I think it’s funny because I call these pops, but this is a carbonated Ramune drink.
>> STEVE: Drink.
>> CHRIS: Yes.
>> AMBER: But it also has Japanese writing all over it. So maybe that’s a more literal translation than soda or pop. [laughs]
>> STEVE: Yes, yes.
>> AMBER: Would you buy it again?
>> STEVE: Yes. It’s pretty good. I told Amber and Chris this. Chris sent me a, I don’t know, was if a five pack of these?
>> CHRIS: Yes, something like that.
>> STEVE: And the second they hit the door and I opened the box, the kids would just, like, bother me. “When are you going to do it? When are you going to do it?”
[laughter]
>> AMBER: Because they wanted the extras?
>> STEVE: They want the extra ones. Then my daughter, last week, she just wouldn’t stop. She kept picking it up and bringing it to me. She like, “We got to do this.” I was, like, “Fine, we can do one.” [laughs] But the kids love these things.
>> AMBER: Yes. They’re pretty cool.
>> STEVE: But they taste good too.
>> AMBER: Yes. I like that it’s not as sweet. Like that grape soda one we had, I was, like, “Oh, my God, I feel like I’m drinking liquid sugar.” This is not as bad.
>> CHRIS: Yes. They’re a buck a piece on Amazon. You can get them, listening audience, and if you have Amazon Prime, they’ll be there within a day or two.
So make the kids happy. Give them a drink and an activity, all in one.
>> STEVE: There you go.
>> AMBER: OK. I will say, though, I actually find drinking out of the top of this thing hard. I haven’t finished mine, and it’s because I feel like I have to take [inaudible] because it’s got a really wide plastic rim, and then there’s, like, a small hole in the middle, and I can’t… Like, I think I want to straw. So that would be my recommendation. I don’t feel like they’re super drinking-friendly. [chuckles]
>> STEVE: I kind of feel like I’m making a mess of it a little bit, you know, when you… [laughs]
>> AMBER: Yes. But they are neat.
>> STEVE: Yes.
>> CHRIS: Yes.
>> AMBER: So.
>> CHRIS: All right, you all. Well, thank you for being here today, and to our listeners, we will see you next time.
>> STEVE: All right. See you guys.
>> AMBER: Bye, everybody.
>> CHRIS: Thanks for listening to “Accessibility Craft.” If you enjoyed this episode, please subscribe in your podcast app to get notified when future episodes release. You can find “Accessibility Craft” on Apple Podcasts, Google Podcasts, Spotify, and more, and if building accessibility awareness is important to you, please consider rating “Accessibility Craft” five stars on Apple Podcasts
“Accessibility Craft” is produced by Equalize Digital and hosted by Amber Hinds, Chris Hinds, and Steve Jones.
Steve Jones composed our theme music.
Learn how we help make thousands of WordPress websites more accessible at “EqualizeDigital.com.”