This episode is a recording of a March 2023 WordPress Accessibility Meetup where Alex Stine and Amber Hinds test the usability of the popular WordPress plugin, Paid Memberships Pro, providing real-time feedback to their team to help them improve their plugin. If you would like to watch a video recording from the meetup, you may do so on the Equalize Digital website here: Paid Memberships Pro Plugin Accessibility Audit: Alex Stine and Amber Hinds.
WordPress Accessibility Meetups take place via Zoom webinars twice a month, and anyone can attend. Learn more about WordPress Accessibility Meetup and see upcoming events.
Listen
Mentioned in This Episode
- Paid Memberships Pro WordPress plugin
- HTML required Attribute
- ARIA: alert role
- Text-level semantics: The a element
- aria-describedby
- Alex Stine on LinkedIn
Transcript
Welcome to episode 013 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.
This episode is a recording of a March 2023 WordPress Accessibility Meetup where Alex Stine and Amber Hinds test the usability of the popular WordPress plugin, Paid Memberships Pro, providing real-time feedback to their team to help them improve their plugin.WordPress Accessibility Meetups take place via Zoom webinars twice a month, and anyone can attend.
For show notes, a full transcript, and additional information about meetups, go to AccessibilityCraft.com/013. And now, on to the show.
>> Amber Hinds: So, of course, today, we have with us Alex Stine. If you’ve been before, you know Alex, but I’m going to let him introduce himself. He’s a wonderful contributor in the WordPress community to accessibility.
Alex, I just spotlighted your video; if you want to give everyone a little hello and introduction?
Alex Stine: Hello. I mean, that’s pretty much all the introduction I need. I do cloud engineering work; it’s my full-time job, an accessibility consultant to pay the extra bills, and I show up to meetups every now and then. So I have a lot of fun. You can find me around the community, hti, or miss.
>> AMBER: yes. You’re on LinkedIn the most, right? And you’re also on WordPress Slack?
>> ALEX: Yes.
>> AMBER: Awesome. And then I don’t need to introduce myself again. So I’m excited to introduce Jason Coleman. I’m going to pop his spotlight up there as well.
Today, we are going to be doing our live audit for paid memberships pro, which is a membership plugin. I’ll just say, before I let Jason introduce it, that we’ve used it on client sites. I also am very impressed with their commitment to open source, and the fact that they really care about giving back to the community. And one of the things I’m excited about today is that they came and without us even probably, they said, “We want you to test the front end, but we also want to make sure our settings pages are accessible so people with disabilities can use our plugin on their websites,” which I think is really cool because a lot of plugin developers wouldn’t even think or realize that they have to think about the settings pages too. So I love that, and I feel like you all, like, really care about the WordPress community, so welcome.
I going to let you introduce the plugin and where people can go to learn more about it if they want to try it out for themselves.
Jason Colman: Sure. Thanks for that introduction. I’m excited to have open ears and learn a lot as Alex and everyone goes through the plugin. I mean, the website is the best place to get started: “paidMembershipspro.com.” And if you want updates from the business, we post most often on Twitter: @PmProPlugin. And we’re also pretty active on our YouTube channel, posting “how to” videos and stuff like that, but also sometimes getting into the business behind membership sites and e-commerce and things like that.
So thanks.
>> AMBER: Well, thank you. So I am going to stop sharing in just a second. But I’d like to put a little bit of guidelines for the meetup.
So first of all, just so everyone is aware, the goal of this meetup is to give voice to assistive technology users. So I might provide some feedback or guidance, but really, my goal is to allow Alex to speak as the user. And we’re hoping that if you’re posting in the chat, let’s not put aside Alex’s experience as the user. So we just want to make sure that everyone knows that that’s really important.
Secondly, the point of this meetup is not to say, “XYZ plugin, it sucks,” or, like, has horrible problems. Accessibility is a journey. It’s a learning opportunity. It takes a lot of, I think, courage to be willing to come up here. And so we just ask that everyone not bash. Remember, this is about providing actionable positive feedback for the plugin developers. And I hope that we would all leave here applauding them for their interest and willingness to get up and learn, and make their product more accessible rather than saying, “Oh, this thing is bad.”
So those are our two guidelines. I’m going to stop sharing, and I’m going to let you go over and start sharing, Alex.
>> ALEX: OK. So don’t be alarmed, I won’t make everyone listen to feed. It is a little excessive for beginners, I think. Yes, we’ll try it at 50%.
>> AMBER: Alex, I’m wondering if it might be better for us to go a little bit slower, like, 45. Just because I want them to at least in the after video [inaudible]
>> ALEX: This is so painful.
>> AMBER: I know it’s really slow for you. The other question I have is, if you’re able, do you think you can open the speech viewer? All right, and that’s actually in a decent position, so.
>> ALEX: So then we better just pray it stays there.
[laughter]
>> AMBER: So just for everyone’s background, we have a staging site that has paid memberships pro set up on it. And we have a few items that that paid memberships pro team has indicated to us. So we’re going to start. And the first one, Alex, was they were interested in you going to the pricing page, viewing a membership, and purchasing it.
>> ALEX: We’ll just see if we can find the pricing page using some basic link navigation. Here’s our pricing link. We’ll find the first heading on the page, so we don’t have to look through the navigation. The heading level one, as it should be, is in the main landmark. Landmarks are just another navigational function of screen readers.
So the first minor problem we have is a link that says “Select.” In the grand scheme of things, you can figure it out with context if you look at the surrounding text. But where vague links really become a problem is in this situation.
So we have three select links, but they’re not actually telling you what you’re selecting. This is the elements’ list. So this is another way that users can get an idea of what’s going on on the page.
>> AMBER: Can I chime in for one second, Alex?
>> ALEX: Yes.
>> AMBER: And then ask you a question? So obviously, we sometimes get into a spot where they only have so much space on a button, which is how this link is styled. So your recommendation on this, I’m assuming, is either an ARIA label or hidden screen reader text within that link that says “Select Professional memberships”, or “Select beginner membership.” Would that be what you’d like to see?
>> ALEX: Exactly. ARIA labels are perfectly sufficient now. They used to not be, but they are now.
>> AMBER: Awesome.
>> ALEX: Having these memberships are very easy to navigate. So about the enhanced membership, I mean, everyone always likes the most expensive ones.
So we have a heading three after a heading one. We’re going to want to correct this to a heading two. We have a link or change. We’re going to want to add context here to say what we’re changing. I’m not actually sure why that’s so verbose. I guess it’s just text, but actually, it adds reading time. So price colon: $45 per month, much shorter to the point.
>> AMBER: There is a discount code you could try if you want, it’s A11Y. Are those key-sensitive, Jason?
>> JASON: Shouldn’t be.
>> AMBER: OK.
>> ALEX: OK, that was rather interesting. So two notes. If the link opens a form, then it should actually be a button because it’s an in-page action. And there is definitely something going on with the focus event here because it probably shouldn’t have read the page title twice. My guess is this focus was called after some type of animation.
>> AMBER: yes, the field was hidden. And then when you click the link, it made the field visible.
>> ALEX: I have an “Apply” button. It would be even better if they said “Apply discount,” just so we’re really clear about what it does.
>> AMBER: So a visual message appeared, which was, “The A11Y code has been applied to your order.”
>> ALEX: So this would be a perfect scenario for the alert role or an aria-live role that reads this message, “This discount has been applied”, or else I’m going to sit here and wonder what happened.
OK, do these values matter?
>> AMBER: So I’m wondering if you want to first try and submit the form without filling in all those required fields to see the ARIA. But right now, these are good labeled fields, right?
>> ALEX: No. So there is nothing that tells the screen reader user that any of this is required.
>> JASON: Interesting.
>> AMBER: Oh, you’re right. It didn’t say “required,” did it?
>> ALEX: Yes, so as far as screen readers are concerned, all this can be left blank.
>> JASON: How would we tell the screen reader that field is required?
>> ALEX: You have two options. You have the required attribute, which is from the html5 spec, it will enforce html5 validation. So that’s kind of nice because then you don’t have to mess around with managing focus with accessibility. It’s all handled natively for the most part. And if you would rather keep that control in JavaScript and do validation yourself, you can use our aria-required equals true.
>> JASON: OK.
>> ALEX: And that only allows it for the screen reader and doesn’t html5 validate.
>> AMBER: I just put a link in the chat that goes to the W3schools that shows what “required” would look like on an input.
>> JASON: Perfect.
>> ALEX: So, unfortunately, what we’re seeing here is just a side effect of using Stripe. Stripe knows that they have accessibility issues with their frames and they do nothing about it, so.
>> JASON: Is that true of, like, the Stripe checkout, when you click and go to stripe, is it any better, that version of stripe? Do you know what I mean?
>> ALEX: I don’t believe it is.
>> JASON: OK.
>> ALEX: I mean, it might be if it’s not wrapped in a frame. Frames do strange things with screen readers. they are best avoided if you can. But yes, this is just one of those examples of something that would be a really great example of things that could have lasting change if companies would just take responsibility. Because there are countless websites that use this.
>> JASON: Yes.
>> ALEX: So that button has an icon that needs to be hidden. As we can hear, the screen reader does not appreciate it.
>> AMBER: [inaudible].
>> ALEX: But we’ll try to submit. Silence. So we get that message, but it’s not announced until we go and look for it. It doesn’t move our focus back to the field, it’s not complete. Although I’m not so sure if that’s even anything you can fix considering it’s Stripe. But one would think that it would at least mark some errors for these fields.
OK, so there is another error all the way up there. So I think that’s probably one takeaway; error/success message communication can be improved.
>> STEVE: This episode of Accessibility Craft is sponsored by Equalize Digital Accessibility Checker. Accessibility Checker is the best plugin for accessibility testing WordPress websites. Use it to find accessibility problems during new builds, or monitor accessibility and remind content creators of accessibility best practices on an ongoing basis.
In honor of Global Accessibility Awareness Day, we are offering all our podcast listeners 30% off all paid Accessibility Checker plans. From May 18 to May 24, 2023, visit EqualizeDigital.com/Accessibility-Checker/ and use coupon code GAAD23 (that’s G-A-A-D-2-3) at checkout to save 30% on any paid plan.
Don’t miss out on this limited-time sale – get Accessibility Checker today!
>> AMBER: So do you want to try and check out? You’ll have to fill in a lot, sorry. But I can tell you which fields are actually required.
>> ALEX: OK.
>> AMBER: So the username and password. So I think this is required.
>> JASON: Yes.
>> ALEX: Are we going to be checking emails?
>> AMBER: No, you use a fake email address.
>> ALEX: I know no one here would send me spam emails.
>> AMBER: [laughs] It is going on YouTube.
>> JASON: This is optional. The full billing address should be optional as well, except the [inaudible].
>> AMBER: I might have changed that because I wanted to see your billings. So you might need to put, like, a fake address in there.
>> ALEX: Which city should we use today? How about Nashville? Everybody loves Nashville. I hope it doesn’t check this.
>> AMBER: I don’t think so.
>> ALEX: Is that required?
>> AMBER: No. So this should work with this 4242 repeated.
>> ALEX: All right, how many more?
>> JASON: Eight more.
>> ALEX: [inaudible].
>> JASON: Eight total numbers. So 42 two more times, then you’re good.
>> ALEX: [laughs] Any date in the future?
>> JASON: Yes.
>> AMBER: Any date in the future.
>> ALEX: I don’t even know what this month is.
>> AMBER: Just put it, like, 12/24. [crosstalk ]. Oh, no.
[crosstalk ]
>> AMBER: OK, so there was an error. Do you want to see if you can find it?
>> ALEX: Yes, but to be fair, I just kind of know where to look for these after a while. Most users would not make it look that easy.
>> AMBER: You might just have to reenter the credit card information.
>> ALEX: Oh, my gosh, that is an accessibility issue for everyone, not just me.
>> AMBER: I suspect that that’s a Stripe thing. I don’t know if…
>> ALEX: Yes.
>> AMBER: You couldn’t do anything about that, right, Jason? Like, when the page reloads, Stripe isn’t going to allow you to keep the credit card info in it, would it?
>> JASON: I think, technically, we could somehow, but for PCI compliance, they don’t want you to do that. But yes, I’m not sure.
>> ALEX: Oh, don’t even get me started tonight on how the federal government is so accessible.
>> AMBER: Did it actually reload the page and it was just fast?
>> ALEX: It did.
>> AMBER: It did reload the page, right?
>> JASON: Yes.
>> AMBER: Is there a better solution on errors to ajax in the errors with an alert and not reloading the page? Because then that might not clear out the credit card information.
>> ALEX: That definitely would be a better solution. Yes.
>> JASON: Yes, I like that. And that could be possible. People request that. The problem is it’s WordPress, and so stuff is kind of infinitely customizable. And so doing JavaScript verification of the fields is possible, but really challenging. But it is kind of on our roadmap. I don’t know if we could talk about this later, but to split the checkup into multiple steps, which simplifies what’s on the screen at one time, and allows you to do better kind of JavaScript-level checking of things.
Definitely, there are ways for the username in particular and the email address to do an ajax. Like, “Hey, is this username available?” And kind of indicates to the user somehow when they sign up, or before they sign up.
>> AMBER: Yes, before they even hit the submit button?
>> JASON: Yes. So there are ways to do it. It’s good to hear that. It’s just like another reason for us to do it is to make it more accessible, you know?
>> ALEX: Well, I’d warn against doing the multi-step approach, because most people get it wrong. They don’t manage focus properly. The user has no idea what’s loaded at any given time. You can get yourself into a whole lot of trouble doing things like that.
>> JASON: We’ll have to get another audit from you before we push that out there.
>> ALEX: Always happy to help.
Is that it?
>> AMBER: Two more.
>> ALEX: Looks pretty good to me.
>> AMBER: Everything’s perfect on there. Awesome. So do you want to view your membership account?
>> ALEX: So we have our heading level three here. Need to change that to heading level two.
>> JASON: Heading orders is very important.
>> AMBER: I want to talk about this for just a second because I think this applies to a lot of plugins. Correct me, but is this a shortcode or a block on this page?
>> JASON: Yes.
>> AMBER: Is that the way this works, Jason?
[crosstalk ]
>> JASON: …shortcode probably right now. yes.
>> AMBER: So what I would recommend doing – because what is hard about this is you don’t know what other content the user might put on the page – is in an ideal world, you have an attribute on the shortcode, or, like, a drop-down on the blocks settings where they can select their heading levels for the various subheadings. Because theoretically, they could put an H2 higher up above this.
>> JASON: I think what happened here is this was coded… I don’t know exactly when it happened or maybe we were slow to do it before it became more standard to have your H1 used as the, like, post title instead of the site title. So that long ago, we just haven’t, like, reevaluated it.
I just worked on a website where that was still the case. It was using an old theme. And changing that is good for SEO and accessibility.
So we should assume H2, it’s more common for how the shortcodes are used, but having a way to override it would be good. And that would be good for folks who maybe have that older theme where they were relying on styling or something else like they had it underneath other headings and stuff like that. That’ll be good.
>> AMBER: Yes. I think just giving users the ability to choose heading levels is really important. On our theme developments, if we build custom blocks, we always try to do that, because you never know how they’re going to use it. [laughs]
>> JASON: With blocks in particular, we might be able to kind of figure it out. So that would be cool. I mean, [crosstalk ].
>> ALEX: All the table has table headings. That’s nice. It works. Yes, I can’t see any obvious problems with this page.
>> AMBER: Awesome. So Kim from paid memberships pro had asked about updating your member profile. So let’s say you realize that you didn’t live in Nashville anymore and you want to go move somewhere else, would you be able to do that?
>> ALEX: Oh, I overlooked these. My mistake. So “Change and cancel” should tell us what we are changing and canceling, and the same for update billing info in a perfect world.
>> AMBER: So again, like, that’ll probably be an ARIA label on the link that’s, like, “Change your membership level.” “Cancel this membership.” Yes. Can people have multiple?
>> JASON: Yes. I mean, it’s possible. It’s not super common, but yes.
>> AMBER: So it would actually need to be, like, “Cancel enhanced membership”?
>> JASON: Right.
>> AMBER: So that it has, like, the name of the membership that they’ve purchased in that.
>> JASON: Perfect.
>> ALEX: So these are not required either.
>> AMBER: Alex, I gave you a thing that you can actually fulfill. [laughs] But there are no address fields on this. So that was a bad suggestion. [laughs]. You can add a company name though or something.
>> ALEX: Rule that under “Update billing info.”
>> JASON: That would update your whole billing address and credit card. [Crosstalk ].
>> AMBER: Oh, so that might be where you would go if you were no longer living in Nashville?
>> JASON: Yes. We’re in the middle… I don’t know if you might like the sidebar, but there are billing addresses, shipping addresses, and mailing addresses. And people are in the habit in WooCommerce as well and also our membership plugin, of assuming the billing address is like their home address, or like just their “address.” So we’re kind of in the middle of updating our code in various places to treat these addresses differently, even though people have been treating them all the same. That’s something Interesting.
>> ALEX: We’ll go back here and just change something random. [inaudible].
My profile has been updated.
>> AMBER: So you’re going really fast. Would it have told you that and then you just move? Like, I was wondering if this one actually was starting to read out.
>> ALEX: No, it’s just the page reloaded and I moved to it. Yes, I didn’t expect anything to get read here.
>> JASON: Do you have the link, Amber, on that feature of how to announce something to the screen readers, but not regular users?
>> AMBER: Yes, I can find that for you.
>> JASON: [Crosstalk ] or aria-live role? So I could Google it.
>> AMBER: Yes, I’ll put that in the chat for everyone. The best links for ARIA that I’ve found, I don’t know if you have a different opinion, Alex, but I liked the MDN Web docs.
>> ALEX: Well, for all the best, yes.
>> AMBER: So there’s the alert role. Let me find aria-live. Oh, actually, that might be on the ARIA alert role documentation. But you can see everything on the left-hand column of that page. It has code examples and all kinds of stuff. It’s really useful.
>> ALEX: So the alert role and then aria-live as an attribute. So it takes a sort of, or polite, and it’s just one constant. That’s used as more like a region that updates with JavaScript mostly. And the alert roles can be a little bit more easy to implement, if you will.
>> JASON: OK.
>> AMBER: OK, so I think it would be good to transition into the admin setting screens, unless you have any other interest in front-end things. Jason?
>> JASON: I think that was the main front-end component. So yes, it’d be great to get to that admin. If you guys are excited too, I’m excited about the admin also, so.
>> AMBER: Yes, I think the…
>> JASON: Deep breaths. [inaudible]. [laughs]
>> AMBER: So you are going to log out of your test user and log back in?
>> ALEX: Oh, the WP admin bar which still remains the best even today. OK.
>> AMBER: So I slacked you a link to [inaudible]
>> ALEX: The link. Got it.
>> AMBER: Let me say something real quick, Alex. So it’s a little bit weird because it’s already been completed because the steps are set up. So you’re loading at the end. So I’m hoping there’s a way for us… Oh, here’s me. I’m trying to drag your speech here. I think that there are…
>> JASON: You can add a… maybe we can [inaudible] on a different link.
>> AMBER: Yes. So there is a link that’s called general info. And if you go to that “general info” link should, it load the first thing that a user will first experience.
>> ALEX: yes, this is why steps are a bad idea. We’re going to get into this here.
>> JASON: Oh, that’d be good. So when you activate paid memberships pro, it’ll redirect you. Yes, the first time you try to use Pm Pro, it’ll redirect you to the screen. But since it was already set up, we had to, like, fake it through the link. And now here. And some stuff will be a little bit different than it is on a brand-new install. But it’s pretty much the same. You’re good.
>> AMBER: Honestly, I’m a little selfishly, like, interested in this, because we’ve talked about designing one of these, right? [laughs]
>> ALEX: Yes. And at the time, I did tell you not to do it. So I was hoping you would listen to my advice.
>> AMBER: [laughs] I know. So why the steps? Why do you not like the steps?
>> ALEX: For this reason alone. So most screen reader users don’t like reading the navigation menu on every page. So we’ll find the first heading on the page, the heading level one.
What is the problem when the user doesn’t know about all those steps that are above them? Well, it’s that. They don’t know they’re there, because…
>> AMBER: What if you have the steps actually after the H1?
>> ALEX: That is where they should be, but probably laid out a bit differently. This is actually a good use case where you should have paid memberships pro as the heading level one. The steps that follow it and the step itself as the heading level two. And then each section contained within a step is the heading level three.
I’m sure there are plenty of consultants out there that would disagree. But also 90% of most users will never look above the main heading for those links.
>> JASON: Hmm.
>> AMBER: Yes that’s interesting. So I do have a question. Theoretically, you don’t need to use those links to move through the steps. I’m assuming when you get to the bottom of whatever this form is, it would just take you to the next one? But is it more that you don’t even know, like, you don’t know how to orient yourself to, “I’m going to have to go through five different screens”? Is that what the problem is?
>> ALEX: Let me ask a better question. Why do you as a sighted person like seeing these steps?
>> AMBER: OK. So for the same reason I just said. I like to know how many screens I’m going to have to get through to finish it.
>> ALEX: Yes. So the information that screen readers would also like to know is pretty much not available to them, because most people just don’t go looking above the main content.
>> AMBER: Yes, especially in the WordPress admin.
>> ALEX: Yes. And the other kind of given to that role is, most of the time, the steps, especially in, like, a tab situation, where there’s, like, tab displays, most of them are not accessible. So that’s another really good reason that most users wouldn’t pay this much attention.
>> AMBER: So Bruce asked in the chat, could you put something like “Step one of five, welcome to your new WordPress membership site” for the headings that you have here?
>> ALEX: You definitely could, yes. And that would actually be perfectly fine, but you’re still left with making the user search for that information. I mean, it takes away the guesswork of knowing how many steps there are, but.
>> AMBER: But it’s better… So the solution is just to make sure the H1 is always above the steps?
>> ALEX: That would be my ideal world, yes. Because if the information is valuable for sighted people, it is probably valuable for us as well.
>> AMBER: Yes.
>> ALEX: That isn’t always the role, though.
>> JASON: Yes. I don’t [inaudible] taking notes. But one thing we thought about when creating the steps was they were first informational of what step you’re on; and then secondary, it’s like, “Hey, if people click on the link, like, let them go there, but it’s not really meant to go out of order.” So I wonder if that would be confusing that they look like links and you can skip around? I guess you kind of can.
So I mean, we did build it in a way that if you skip around it, it only gets slightly confused, the code in the back end.
>> ALEX: Yes. The other thing worth noting is this should be marked up as an actual list. It isn’t. It’s a visual list, some type of visual presentation. And the thing is, it doesn’t actually tell you what step you’re on.
>> AMBER: Yes, so it’d be better if it was actually marked up as a nav menu with an LI and an updated current… like you would on a website navigation.
>> ALEX: That gets really tricky in the WordPress admin because if you have a nav landmark in the main landmark, and if users want to move past the nav landmark, there’s no longer a way to do that because it’s already in the main. That’s why I’ve always told people to make sure that breadcrumbs are just above the main landmark, but not in it.
>> AMBER: Yes.
>> ALEX: It’s definitely an option. But keep in mind that if you have a really long list of steps, that may be detrimental.
>> AMBER: Oh, this is really interesting. [laughs] It’s also kind of like one of those things where there’s not always… like, there are clear ways that are better, but there are things you have to really think about and discuss.
>> ALEX: Yes, that’s why my philosophy has just been, “Don’t do it.” That’s always the easy out.
>> AMBER: So how about the rest of the things here?
>> ALEX: So these fields are not labeled. The surrounding text is read, but there’s no actual associated HTML label for this field. This would be considered invalid.
>> AMBER: Can I say something real quick, Alex?
>> ALEX: Yes.
>> AMBER: So Jason, you have a label up there. It’s just what it’s missing is the “for” attribute and the id of the field.
>> ALEX: Oh, so close.
[laughter]
OK, so this is another really interesting pitfall in accessibility. So when you add “disabled” to a form element, there is no way to focus it without actually forcing the screen reader into a virtual mode where you can see the elements. So right now I’m in kind of an operational forms mode. So it only, via the tab key, jumps to elements that have a tab index of zero. And unfortunately, “disabled” takes it out.
>> AMBER: Yes, so that’s the item above that, which you can’t select.
>> ALEX: Yes, but users don’t get the helpful note on why they can’t select it. They just wouldn’t know it’s there.
>> AMBER: So would it be better to not even show, like, just hide this input completely rather than having it disabled? Like, if it’s not applicable, you don’t need to show it? Is that a better solution?
>> ALEX: The better solution, which requires a fair amount of work, would be to add something like, “ARIA disabled equals true,” and then somehow prevent users from checking or unchecking the box.
>> JASON: OK.
>> ALEX: That’s a lot of work though. But if you want perfection, that’s how it’s done. Because then, the screen reader can still focus this, and they will still get the disabled. Users won’t be able to click it, but they’ll get this little helpful note that, “Hey, this is why we can’t do this.”
>> JASON: Is it overly clever if… Can you just, like, sneak, like, a hidden field in between that only screen readers will see and be like, “Hey, FYI, I just skip this section because it’s disabled”? That’s like overly clever. [chuckles]
>> ALEX: So you actually cannot do that, because what will happen, it could do, is it will also be in the tab sequence for sighted users. So if they press tab on a hidden field, they’ll go, “What happened?”
>> JASON: Yes, it feels like a bad idea in general to kind of… just like when you’re developing for mobile, say, like, “Detect that I’m on mobile and only do this.” And it’s better to just make it look good on a screen that’s small because you don’t really know.
>> ALEX: Yes.
>> JASON: OK.
>> AMBER: Yes. So probably just don’t have the disabled field at all if it doesn’t apply.
>> ALEX: [inaudible] or what? That’s an associative label. Is there anything else on here that needs to be filled out?
>> AMBER: I mean, I think it’s all optional.
>> JASON: Yes, you’re on step two now, right? Or wait.
>> AMBER: Yes we’re still in the first one. So below this, there’s also a link for skipping any link to exit the wizard and return to the dashboard, just so you know what else is on this page. So you could try that.
>> ALEX: See, this is me reading out of forms mode.
>> AMBER: You’re in forms mode right now?
>> ALEX: Yes. We will show the difference. Well, that worked well. So it looks like the checkboxes get red, but the combo boxes definitely don’t.
>> AMBER: Yes, [inaudible] those labels.
>> JASON: They’re probably all programmed the same.
>> ALEX: None of these are actually issues that block anybody from using this plugin though.
Yes, you’re definitely going to need some labeling on these links for context.
>> JASON: Mm-hmm.
>> AMBER: The other thing is, I bet you those links open in a new tab. Like the view docs, they probably opened your website in a new tab. So you’d probably want a warning about that, right Alex?
>> ALEX: Actually, I’ve always been kind of one of the ones on the fence about that. It’s never really bothered me as much. But if it’s really easy to say, opens in new tab, just do it.
>> JASON: OK. Does the screen reader automatically, like, translate that little new tab icon people put at the end of links?
>> ALEX: No.
>> JASON: No, it’ll probably just say something silly. Yes [chuckles]
>> ALEX: Or it just don’t [crosstalk ].
>> JASON: I don’t know what the icon is called. Yes, OK.
>> AMBER: Yes, so you put it, like, on an ARIA label typically, or you can screen reader type, but typically ARIA label.
>> JASON: OK.
>> ALEX: But you want to be careful of those that you make sure you get your spacing right, because if you don’t, you’ll get something like docs open a new window,
>> AMBER: Window space in between. [chuckles]
>> ALEX: Window space. And that is actually more annoying than just links that actually open new windows.
>> AMBER: So I think we talked about editing, like, if you wanted to add a membership level. So you are in the settings now for Paid Memberships Pro.
>> ALEX: A heading two. We’re doing so good.
>> JASON: You skipped the tabs [background noise ].
>> AMBER: Yes, I don’t think you’re at the top of the page.
>> ALEX: Oh, interesting. So that is a navigation landmark. But, again, there’s no heading here, so that illustrated perfectly how you can miss this.
I’m not seeing anything obvious there on where I would go to add a new membership.
>> AMBER: So let me open it.
>> JASON: Do you want me to cheat and tell you??
[laughter]
>> AMBER: Do you want to keep exploring?
>> ALEX: I guess that’s pretty simple, but it feels like this panel might eventually go away.
>> AMBER: Why do you say that?
>> ALEX: Because of the way the buttons indicate the business of moveable widget. I don’t know. This page feels a little weird to me. It’s like it’s trying to replicate the WordPress dashboard.
>> AMBER: Yes, that’s what those are right? [inaudible].
>> JASON: Yes.
>> ALEX: OK. Well, it’s pretty clear where the “View membership levels” is, and where we need to go.
Oh, sorry. Now everyone’s going to get here my phone speak away.
So this page had a heading level one again? Hold on. All right, so…
>> AMBER: That’s OK. My phone did it too.
>> ALEX: Looks like this uses the WP table class, or at least, some form of it. Unless you all actually did make a custom table for this. But either way, it does work.
That’s kind of going to be a problem though. I’m not sure how you’re going to get around that.
>> AMBER: What? Oh, the drag and drop.
>> ALEX: Going to need some menu buttons: move up, move down.
>> JASON: Yes.
>> ALEX: OK, I don’t know where are you going to add a new…
>> JASON: It’s [inaudible]. It jumped right past the links. It’s interesting. I’ll figure out why that’s happening.
>> AMBER: Yes. I’m inspecting it.
>> ALEX: There’s no heading. See, we just keep highlighting this. I’m doing this on purpose. All right. Well, OK, so it’s not up here.
>> AMBER: Alex, there is a link that is the first link after the H1 for membership levels. I can tell you the text on it if you want. Oh, wait, I bet I know why. OK, it doesn’t have an href. It has JavaScript colon add level. Does that make it not focusable?
>> ALEX: It shouldn’t.
>> JASON: Is this coding very similar to, like, [background noise ]?
>> ALEX: OK, so our answer for this is probably going to be CSS. I think it’s hidden somehow.
>> AMBER: OK. Can I say something real quick?
>> ALEX: Yes.
>> AMBER: So Glen Walker in the chat said he thinks it’s a placeholder link. If it doesn’t have an href, then it’s not going to be tagged focusable. I think if you put a hashtag in there, and then you had your JavaScript on it, then it would be focusable.
He did share a link to HTML specs about this in the chat. But I think that’s why it’s not focusable because it has the JavaScript inside the “a tag”.
>> ALEX: Wow, that is…
>> AMBER: If you’re in browse mode, can you get to it and trigger it, just for now to see?
>> ALEX: No. There’s no way to get to that link. I don’t think there is a way to that link. Let’s see.
It shows up here so… Oh, now it’s there. Does it appear on some type of focus event or something?
>> AMBER: So can I tell you what happened? When you triggered that link – so actually, this should be a button, not a link – it opened a modal. However, it did not shift your focus into the modal. It looks to me like you’re still tabbing behind the modal, Alex.
>> ALEX: Oh, yes, I am sure that’s what’s happened, but I’m just really confused as to why the link is now there.
>> JASON: It looks like it’s active, so I don’t know.
>> ALEX: That’s very strange.
OK, so first we had the close link which is not accessible because it’s an icon. All right, I’ll select at three.
Hey, look, “required attributes.” This makes me very happy.
So this description is not read on this checkbox. So you can fix that attribute called aria-describeby. That takes the ID of this description text if it should indeed be associated with this checkbox.
>> JASON: Yes, it’s for the text field above it.
>> ALEX: No, it’s for this. Oh, you mean the checkboxes for the text field above it?
>> JASON: Yes, it’s like the checkbox relates to that text field above it, and then they use placeholder variable messages for the text box there too.
>> AMBER: So the other thing about this is, so this uses I think TinyMCE is like the default classic editor in WordPress to be able to write those messages and the description. Did it clearly communicate to you as you were going through, like, what the first TinyMCE was for, and then what the second one was for?
>> ALEX: About as clear as it’s going to, in WordPress.
>> AMBER: OK, so that’s done the best it can within WordPress, because…
>> JASON: We were talking about tables and this earlier, and this is using table for layout because WordPress lays out some other fields. I don’t know if they still do that on core pages.
>> AMBER: Yes, where the message is in the first column, and then the setting.
>> JASON: Yes. So it’s kind of a table of settings. But we did it just to be as close to WordPress HTML as possible, even though it felt a little icky.
>> ALEX: Well, I approve.
>> JASON: OK, nice.
>> AMBER: [laughs] Yes.
>> ALEX: There it is.
>> AMBER: So how can that announcement to tell you that it was added be improved? Focus on it when the page loads?
>> ALEX: If this is using the admin notices hook in core, there is no real easy way to improve this because core admin notices are not that accessible, to begin with. It’s a project problem.
>> AMBER: What about, like, skipping WordPress notices and using a browser alert?
>> ALEX: That would work perfectly fine.
>> AMBER: Because then it would pop up the browser button and be, like, “This has been successful.” And then they could, like, close that and then be in the page.
>> ALEX: I think most users would find that highly annoying, but it would work great for us.
[laughter]
>> AMBER: Yes. And I guess it depends on how frequently people are coming to these pages and adding new memberships. Do you know what I mean? Like, if you’re doing it all the time, you might find that annoying; but if it’s, like, once or twice, maybe, like, “OK, here’s my success message”, and I close it.
>> JASON: That’s something we thought about too. We moved around our menus and the dashboard, like, a few years ago, and we got some complaints from folks around, like the editing of membership levels being harder to find or something like that. And we tried to emphasize the stuff that site owners do every day, like orders and members and reports, and the stuff that they do once kind of gets de-emphasized.
But still, Alex was trying to find that “add level” button that was invisible and configure out the navigation of the main settings. Those are things that we can improve. But that’s a good point about how often you see that.
>> AMBER: So we have about 15 minutes left. I thought it might be really interesting to go look at your reports tab.
>> ALEX: Oh, yes. Sure.
>> AMBER: Alex, do you want to go find out how much money you made on your website? [laughs]
>> ALEX: And in real life, I’ll be paying somebody to tell me how much money I made. [laughter] Just throwing that out there.
OK, so the first thing to point out is that the heading level one on this page… well, there isn’t one. What the heading level one should be on this page is the page catalog reports. Instead, we have the first title, heading title of…
>> AMBER: [inaudible].
>> ALEX: It’s clear enough, but it would be nice if it said “report” somewhere.
Context is everything. That’s what I tell people. Context is everything.
That is an empty column heading. I would prefer that one to be hidden. It is perfectly accessible.
>> AMBER: I think there is something that is missing, actually, on these, which is if you went to, like, column two, row three, what context would you have for that?
>> ALEX: Column two, row three.
>> AMBER: So you know what, I actually did it. I wasn’t sure if it was going to read out. But no, you do have scopes of rows on your headers there, so that’s great.
>> ALEX: Yes. Tables are definitely not a problem in this plugin. That was the one thing that was consistently done right.
>> AMBER: Well, not the one thing.
[laughter]
>> ALEX: I mean, the one thing consistently with no errors anywhere. Not that this plugin is a mess or anything, because as I said earlier –
>> JASON: I’m not going to lie, this is great.
>> ALEX: – there are no blocking issues that I’ve found in this plugin with the exception of that “add link,” which seems to appear and disappear whenever it chooses to.
>> AMBER: Yes. So most of the problems you found are things that you can work around. They should be improved and made better, but it wouldn’t stop you necessarily from using this plugin.
>> ALEX: No, it would definitely not stop a user from using this plugin. It might frustrate users. But I don’t think we’re at a point where a lot of users would leave a website after encountering this plugin.
>> JASON: Nice.
>> AMBER: Yes.
>> JASON: The next widget, the sales and revenue widget, has, like, clever hide/show things. [inaudible].
>> ALEX: So what are the buttons for?
>> AMBER: So you want to have a more clear label on that. That’s, like, “Expand all sales for today,” or something like that? I don’t know what it does. You haven’t triggered it yet.
>> ALEX: Nothing. Yes, this is really confusing. I would just break this into different sections. It’s not worth trying to make this work in a table. Just one table. Just break this into multiple tables, make this much easier.
>> AMBER: Basically, what it is, is it’s like a table nested in a table, I guess?
>> ALEX: Yes, something like that.
>> JASON: It tries to break it down by price point and show you the individual sales by price point.
>> AMBER: Oh. I thought it was individual purchases. [laughs]
>> JASON: Oh, no.
>> AMBER: So I’ll say that was confusing for me also.
>> JASON: Yes.
>> AMBER: I mean, probably if I like was using it all the time, then I would have gotten that, right?
>> JASON: yes, I think you’ll get a handle on what that is if you’re looking at it every day. But it’s interesting it’s not labeled well, definitely for screen readers or even for sighted folks, like what’s going on here.
>> ALEX: I mean, my problem with this specifically, is if you had hundreds of sales, this is going to turn into a nightmare very quickly.
>> JASON: It does limit to three or five unless you override. It shows the most popular sales price points in that period. But that’s a good point.
>> ALEX: I mean, this could just grow out of control so quickly.
>> JASON: We shared a thing on Twitter. We’ve been running our own site on paid memberships pro for over 10 years. And I did, like, the all-time thing and I forced it to show every single price, not just the top five. And there was, like… I forget what it was, but, like, 30 or 50 different price points that we’ve sold our membership stuff added over. It includes every discount code, every sale we ever ran, and stuff like that. So it’s kind of interesting, and it broke it down and it showed how much we made for each one. It was kind of interesting to see over time.
>> AMBER: Go to the details on this tab. It’s after the table.
So you want to have that link, to be more clear because there are multiple details buttons on that page.
>> JASON: Oh, yes. Contacts and details. [inaudible] general note, to just scan the whole plugin for stuff like that.
>> ALEX: Whoa. You have to love inline styling for fields not. I wish all those were block-level. It would read so much better. And these labels are also not associated, so it seems to be an absolute nightmare to figure out.
>> AMBER: So go below all these filters.
>> ALEX: Yes, I think [inaudible].
>> JASON: This is Google Charts. I don’t know.
>> AMBER: Yes. So do you know what it is, Alex?
>> ALEX: Well, it said it was a chart. That’s about the only useful information I got from it.
>> AMBER: So when you encounter something like this, so this is, like, the ability to see revenue across a month, I think that is what this is currently, would you want to have a verbose paragraph summary? Would you rather just have a table that’s below the chart? Like, what would be most helpful? Or like an “Export to CSV” option, which may be they have as an add-on, right? Like, so you can get it into Excel. What do you think would be the solution for making a bar graph easily understood?
>> ALEX: Definitely a table. And I’m honestly surprised users haven’t already requested “Export to CSV.”
>> JASON: Yes. There is “Export to CSV”. It might be one of those hidden buttons. It’s next to the heading.
>> AMBER: Oh, Yes. Hidden meaning [background noise ] it’s behind the [background noise ].
>> ALEX: Oh, I can focus it with tab. So the link is definitely… It must be something with CSS that you’re doing because it’s in the DOM.
>> JASON: Oh, OK. It might be that JavaScript thing. I’ll play around… because this link is actually an href. And it goes to a URL that kicks off the CSV. The new level one is like a JavaScript that generates the modal and [background noise ]
>> ALEX: It doesn’t even get read by the screen reader until I manually focus it. [Crosstalk ].
>> JASON: That’s interesting. And this, this isn’t a problem. Maybe the CSS is a little different. The HTML is based on the posts table heading, and then there’s a button that says “New posts,” to squeeze that button in. So I don’t know if that’s a problem. If it’s a problem with WordPress, then we can try to fix it in WordPress as well. But I’m assuming when you go to the posts table –
>> ALEX: Oh, no. That looks fine.
>> JASON: – you find that new post button. Yes, it’d be interesting to figure out why it’s different.
>> ALEX: So interesting. There’s already a table here. It’s past the chart.
This table isn’t as accessible as the last one because it doesn’t tell you which state you’re looking at; it just announces the row number.
Yes, so if you brought this table more in line with what you had on the previous page, it should work well.
>> AMBER: So you know what’s interesting? So for us, that visually was the bar chart that you were going through. So I think that’s Google Charts’ attempt to make an accessible bar chart, which actually, having a non-screen reader tested this, I’m really impressed because I was assuming you were just going to get a chart and literally nothing else. Oh, sorry. What were you going to say, Alex?
>> ALEX: We’re going to see if sending screen reader focus through this does something different. No, the tab key skips the whole thing. Interesting. So yes, it’s just pure HTML. No keyboard events or anything.
>> AMBER: Mm-hmm.
>> ALEX: Yes, Google Charts. Not sure about that.
>> JASON: We’ve had folks ask to have these reports inline as a table, and I think we have custom code to do something like that. But I always say just export to CSV. Like, when the request comes in I’m like… [laughs].
>> AMBER: Probably outputting it visually on the page.
>> JASON: Yes. But it sounds like maybe Alex was, like, “Hey, I like CSV. That’s good.” Or if like having some kind of toggle-like table View chart view on here. [crosstalk ] kind of thing. Yes. It’s worth working on. Cool.
>> AMBER: So we’re at an hour and a half mark. Do you have any final questions, Jason, for Alex?
>> JASON: I don’t. Actually, here’s maybe a question. I feel like Alex might have reached out at some point, or we had, like, a really short chat a few years ago about getting an accessibility review. And I was, like, hesitant to do it. We’re hesitant, in general, to hire experts to give us advice on anything, like SEO, because we want to make sure that we’re ready to enact on the advice as soon as we get it. Otherwise, it kind of is a little bit of noise.
Maybe there’s some kind of, like, personal… Like, I was a little nervous, like, you have the roles. And I’m, like, “Oh, my god, I’m going to…” And there are people on social media who talk about accessibility and they’re very kind of fiery about it. And, like, I get where it would come from too.
So this was like a crazy, useful, entertaining, interesting experience. So I’m going to be your advocate and definitely try to hit you guys up for advice when we build the 3.0 features. I forget what we said we were going to do. Oh, the multi-step checkout, yes, which should be optional as well. So maybe that’s an answer too, is, like, make it one page. But that would be good to review and try to make it as accessible as possible later. And also just tell other folks that this is an awesome process and they should come on the show, or hire you guys.
So I appreciate it.
>> AMBER: Yes, thank you.
>> ALEX: No problem.
>> AMBER: Yes. There was, I think, one question a while back, but I didn’t want to interrupt Alex. Let me scroll back and see if I can find it, unless… yes.
So just a follow-up on when you use the role alert, a screen reader will often say alerts. And Glenn was wondering, Alex, if you find that annoying, rather than using a simple aria-live with polite, which will just announce the text. Like, does hearing the word “alert” bother you?
>> ALEX: It depends on the importance. So if they’re doing that every time a page loads, yes, that would become very annoying. But sometimes, aria-live set to polite is very easy to have your speech interrupt that. So if it is a useful error message that you might have just moved to something else and your screen reader didn’t have a chance to read it, then you miss out on the information.
It’s a mixed bag. Don’t overdo it; don’t overdo it.
>> AMBER: And I’ll also just say there were quite a few people in the chat, Alex, saying thank you, and that it was really cool to watch. And someone said, “Thank you, Jason, for having the courage to let him test drive your plugin.” And I second that. And being interested in making accessibility a priority. And I also say your Settings pages and stuff, while there are some things, like, there’s a lot of… I’ve seen plugins where you can’t do anything in the settings stage at all. So I think that’s great.
>> ALEX: I will never come after anyone who wants an accessibility review. But where I’ll start to draw the line is the companies who would knowingly do bad. Like, if they’re brought to their attention and they just continued to ignore.
>> JASON: Yes, so it’s like simple fixes. I mean, this is time… I have a list. There are like 30 or maybe more bullet points in here, and they’re all a little bit. But in my opinion, it’s straightforward, like, not… There was a couple that was, like, “What do we do here? Move it? How are we going to move the H1 above the menu and make it look the same way?” But it’s fairly straightforward. So yes, that’s annoying.
So it’s very popular for folks to use React to build their settings pages? Is that just generally more or less accessible when people are using React as a framework for their pages instead of… We use kind of like the older school WordPress settings format, you know? It’s just HTML generated by PHP.
>> ALEX: React is more accessible in the JS world compared to frameworks. Like VueJS, V-U-E.
>> JASON: OK.
>> ALEX: But as far as more accessible than this? Absolutely not. Oh, my gosh. Developers have no idea what they’re doing in React for accessibility. And I’ll just blanket statement that. I mean, that’s the truth. Nobody knows what they’re doing in React for accessibility.
I mean, there are things that look great visually, and then it just doesn’t translate the, “Oh, that user might not see that up here all the way down the DOM if they’re blind.”
>> JASON: Yes. It’s like the core to React. It is like stuff is updated everywhere, all at the same time. And that’s definitely confusing to screen readers.
>> ALEX: We can do a whole case study and test on Gutenberg to prove that point.
>> JASON: Yes. OK. I feel like an old man sometimes, because I’m, like, “Isn’t just the textbox enough?” Or, “Can’t this just be more straightforward?” Or, like, “Does this really have to be as fancy as they think it is?” And I feel maybe that sentiment that I have, as long as I’m maintaining these plugins will kind of naturally make it a little more screen reader-friendly. And if we do some of these other things you are suggesting, I’m excited about how usable this will get.
>> ALEX: That’s what’s annoying to a point, though. It’s like React itself is not inaccessible. Developers just use it in highly inaccessible manners.
>> AMBER: Yes, well, I mean, that was the thing we were talking about pre-show [laughs], if you will, where over the weekend, I encountered a table that was totally fully built with divs. And it had, like, class of table, class of row, class of item. And I was just like, “Why?” [laughs]
>> JASON: One part of our settings that is probably the trickiest is the user fields, GUI, to add fields. And you shouldn’t get into it, because it probably would just take a while. But on your own time, I will hire you to look into that as well.
Not every site needs it. You can use custom code to, you know, kind of… We started off, like, you kind of have someone code up the fields that you need. It’s also a way to get fields on your page. But there’s a GUI for it. And it’s kind of like the most complicated UI and most recent. So it’d be interesting to look at that later.
>> ALEX: Yes, I can imagine that’s probably very interesting. It probably suffers from a lot of the challenges that used to be on the menus page under appearance.
>> JASON: Right. Yes, there’s just a tonne of stuff. It makes me think, when we think of features, most people will kind of just want this, click this button and you get the common fields. So things like that might help. Anyway.
>> AMBER: Well, thank you both. I really appreciate it. We’ll have the recording for you, Jason. And if you want, I can also get you the chat transcript with all the links that we shared.
>> JASON: Oh, perfect. That’d be helpful.
>> AMBER: I’m going to say goodbye, but I’m going to take a second before I actually hit the end button because I got to watch the captions and make sure that we fully captioned our goodbyes. So we do the smiling and wave and end quietly.
So do you each real quick just want to say where people can find you again if they want to follow up?
>> ALEX: You can find me at “Alex Stine” on LinkedIn. And “I am Alex Stine” on the make WordPress Slack. And if have a random slack, it’s here and there.
>> JASON: And I’m Jason Coleman. I’m on the WordPress slack. To contact me personally, Jason_Coleman on Twitter is a good way to poke me. And the plugin is a paid memberships pro. It’s in the WordPress repository for free, and also on the website, “PaidMembershipsPro.com.”
>> AMBER: OK. Well, thank you both. Have a great night, everybody.
>> JASON: Thank you.
>> ALEX: Thanks.
>> 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 helped make 1000s of WordPress websites more accessible at equalizedigital.com.