This episode is a recording of a September 2023 WordPress Accessibility Meetup where Alex Stine, Engineer & Accessibility Consultant, and Amber Hinds, CEO of Equalize Digital, performed a live accessibility audit of the AccessAlly Plugin and provided real-time feedback to the AccessAlly team. If you want to watch a video recording from the meetup, you may do so on the Equalize Digital website: AccessAlly 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
Transcript
>> CHRIS HINDS: Welcome to episode 039 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 September 2023 WordPress Accessibility Meetup where Alex Stine, Engineer & Accessibility Consultant, and Amber Hinds, CEO of Equalize Digital, performed a live accessibility audit of the AccessAlly Plugin and provided real-time feedback to the AccessAlly team. 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/039.
And now, on to the show.
>> AMBER HINDS: So I am super excited. Let me get our auditor, Alex, and our guests, Nathalie, up here so everybody can see them. Today, we’re going to be auditing and getting feedback to Nathalie Lussier from AccessAlly.
Nathalie, do you want to introduce the plugin a little bit?
>> NATHALIE LUSSIER: Yes, definitely, so we’ve been around since about 2014, and we started off pretty much just building the plugin for ourselves. It was a very, very basic LMS, and I use that word, Learning Management System now, but back in the day, we didn’t even know what an LMS was. When we set out to build this plugin, it was really just for ourselves.
I was teaching online courses, and the plugin I was using at the time was causing all these crashes on our server, and I have [inaudible] both developers that were, like, “OK, let’s just fix this quickly.” And so we built a very, very basic management plugin for content, essentially, and then over time, it’s grown a whole lot. Now it does payments. It does everything from member directories, teams, you know, like learning tracking, quizzes, and all kinds of stuff, so it’s really grown a lot over time.
So, essentially, today, it’s a full-fledged LMS, but back in the day, it started off as just this tiny little thing. [chuckles] It was just meant to give people access to the courses that we had.
I think that what makes AccessAlly a little bit different is just that we focus on trying to really give everyone what they need without using a ton of add-ons or other additional plugins, so that’s kind of been our approach to development, which means sometimes a plugin gets kind of big because it has a lot of functionality under the hood, so I think it’ll be really interesting to see your take on it, especially from an accessibility point of view as well.
>> AMBER: Thank you for coming. We’re really excited to have you here.
>> NATHALIE: Thank you so much for taking the time to give us your feedback.
>> AMBER: Yes. For anyone who can’t see, their website is “AccessAlly.com.” A-C-C-E-S-S-A-L-L-Y dot com, so you can go there if you want to learn more about the plugin as well, and I think there’s also a free demo that anyone can spin up if they want to try it and play around with it.
There are a couple of guidelines that I just like to remind everyone as we get started. First of all, the point of this meetup is really to give voice to assistive-technology users, so we have Alex here today.
Hey, Alex, you are up. [chuckles]
>> ALEX STINE: Hello.
>> AMBER: And I only say this because the very first time we did this, we had people talking over. I know we’re not in meetups, but I do still think it’s important to point out that even me as an accessibility professional, my experience is not the same as someone who uses screen readers, and so we encourage everyone, put comments, put ideas in the chat, feedback that you have, because all of that is a really great feedback for the plugins that we review, and I’m sure Nathalie appreciates that, but we also don’t want to discount anything that Alex says, because obviously, Alex is a user who’s experiencing it himself.
Number two, it’s really important that everyone remember, no bashing, so this meetup is intended to provide actionable, positive feedback for the plugin developer. It is incredibly scary, and people are incredibly brave to be willing to come up and let their things be audited live and publicly, and we want to applaud their efforts to improve the accessibility of their software.
So nothing is perfect. I know that I sometimes have accessibility problems on my website, and Alex points them out to me, and then I’m, like, “Crap, I got to go fix this.” [laughs] So thank you Nathalie for being here; and for everyone who’s attending, please keep that in mind.
I’m going to stop sharing my screen and let Alex take over sharing. I will be watching the Q&A, so if anyone has a question about something Alex says, or something he’s hearing as he’s going through the site, and he’ll share so we can all hear his sound, feel free to put them in the Q&A, and I will ask him those questions as well.
Do you want to share, Alex?
>> ALEX: Yes. I was waiting on you to wrap up.
>> AMBER: So, Alex, introduce your screen reader for everyone?
>> ALEX: So this is my screen reader. He speaks very, very fast, and if there’s any blind people in the audience tonight, you can probably understand it; but for everyone else, we can probably slow it down a little bit. 90% is where I like to stay. 40% is probably a little bit more reasonable, so we’ll get started.
>> AMBER: Nathalie, do you just want to give us a quick background on where we’ve landed, and how this might relate to what a user of the plugin would see?
>> NATHALIE: Yes, exactly, so this is a site that we built using AccessAlly, kind of under the hood, and we built it as a demo site experience, so if somebody is curious about what kind of site you could build with AccessAlly, you can go to the website and opt in to your own kind of sandbox demo-site experience, and the idea here is that we’ve used, like, gamification, and kind of the features to show you what AccessAlly can do, and so you’re not going to see, in this particular couple screens, the back-end of the plugin, but I did send a login to Alex if he does want to go and check out the actual back-end of Access Ally, but this is more of like a front-facing example of an AccessAlly website.
>> ALEX: First thing we can do is, we can just see if we got some basic web page structure, so I’ll just see if there is any heading ones on the page. There’s not. Heading ones are important because it communicates at what page, and kind of a context to where you currently are.
Let’s do some further exploration. We do have a “Skip to Main Content” link.
>> AMBER: Can I ask a question real quick? That heading two that Alex can hear is white, and it looks like the container is white. Although ,when I load this, I think there’s actually a dark background.
>> NATHALIE: Yes. I’m not sure if you want to refresh the page, Alex. I’m not sure if it just didn’t load properly for you, but, yes, that was [inaudible]. That’s how it should works. [inaudible]. It was not loading properly, but.
>> AMBER: So there’s a background image behind the text. What you might do as a fallback is put dark color background behind the text also, in case it doesn’t load.
>> NATHALIE: Yes. I actually just did that. [chuckles] After I saw this load, I was, like, “Oh, that’s terrible.” [chuckles]
>> ALEX: OK, so the first heading we actually get on this page is “You earned,” then a “Graphic 25.” Then another “Heading level two points,” neither of which actually communicates the context of this page.
The second comment to make about this is, this is over engineered for the purpose that it communicates, so one heading, it that says “You earned 25 points” is definitely sufficient.
>> AMBER: So rather than having two headings around an image, is what you’re saying?
>> ALEX: Two headings around an image, yes, and then another heading level two that has that message, about 100 points.
So “Icon with a checkbox,” it describes the image, but it’s probably more for decoration. Decorative-type image in this area, so it’s probably a little redundant to spell that out since it really doesn’t add value to this page.
Same deal with “Icon with a star.”
>> NATHALIE: So what would you recommend in this case? Not describing it, or?
>> ALEX: The empty alts are good for decorative images.
>> NATHALIE: OK, that makes sense.
>> ALEX: OK, so the first heading on this page is a heading level three.
The main problem we’re really seeing here is, this page just really doesn’t have too many semantics.
>> AMBER: Do you understand what’s on this page, Alex? Or what’s your understanding of what’s on this page?
>> ALEX: I understand that I need to watch a video, and then there’s something else I need to look at.
>> AMBER: So what would be helpful is having a heading one that tells you the name of the course that you’re about to do, I’m guessing? Or the step of the course?
>> ALEX: Yes. At the very least, the module that we’re currently on. Then maybe some text underneath that, which talks about your course progress, and then below that, you can start with the course content.
In this module, this description text here should be before the video, because it describes what this module is about.
>> AMBER: Yes, so the h2 module one, “sell more of AccessAlly,” one thing that I’d point out.., and I think this came up previously when we did an audit and we talked about the onboarding wizards that plugins do? And how they put sort of like you have where there’s the module one, module two, like the progress bar, and if you put it above the heading one, it causes a problem, like, it gets missed a lot of times.
So I actually think where Alex pointed out that you need a heading one for that? I don’t think it would be sufficient to just make that heading to a heading one. I think that it would need to be moved above.
>> NATHALIE: Yes. Flipping those sections makes a lot of sense now that I’m hearing it this way.
>> AMBER: Yes.
>> NATHALIE: If you have context before you get to the actual, like, point the navigation, so that makes sense.
>> AMBER: Yes.
>> ALEX: Yes. Are those checkboxes labeled appropriately, Alex?
>> ALEX: No, there’s no associated label with those.
>> AMBER: OK. Do those get checked automatically when you do the thing, Nathalie?
>> NATHALIE: Yes, so the first one, when you watch the video, it will auto complete, and then the next one, when you click that link and then come back, it should also complete as well.
>> AMBER: How do you handle that, Alex? It’s like a checkbox that you can’t actually checkoff. You’d have to do something [inaudible] system checks it off.
>> ALEX: So this checkbox is still focusable, so that’s good.
The only other suggestion here would be, I would modify this to say, “Watch the video to complete step one.”
>> NATHALIE: OK. Yes, that makes sense.
>> ALEX: And then, of course, all these checkboxes need this text as an associated label does. Right now, it’s just a meaningless checkbox, essentially.
>> NATHALIE: Yes. It’s not associated at all, right?
>> ALEX: No.
>> AMBER: If you inspect this, there is a label there. [inaudible] empty, but what’s interesting is the label is where the square is. Like, there’s an input that I can’t see. I don’t know if you want to try and pull that up, Alex?
>> ALEX: That’s cool. Oh, there’s the empty label.
>> AMBER: The label has a roll of checkbox on it, and it has Aria-disabled on it, but there’s also an input [inaudible] label.
>> ALEX: And it has tabindex of zero, so that’s how you get the focus.
>> AMBER: (On the label?) or [inaudible] yes.
>> ALEX: Aria-checked. Oh, yes. Yes, this is a good case of something that gets to be way overly engineered, when you could just use the checkbox.
>> AMBER: So what I think I would do, Nathalie, is.., because you have a table here, and the first cell on the table is what I think is actually supposed to be the label.
>> NATHALIE: [inaudible]?
>> AMBER: Yes. I’d have the label tag go around that, like, “Watch the video.”
>> NATHALIE: Awesome.
>> AMBER: And then have an actual checkbox rather than the.., because you can style a checkbox to be large, an input checkbox.
>> NATHALIE: Yes. I think originally when we built this, we didn’t have any of this context. [laughs] We were just, like, “Make it pretty.” But I think this makes a lot of fun to do it that way.
>> AMBER: Yes. Peter has a question, Alex, about the video. It says, “When including videos, is it helpful to include “screen reader only text,” indicating that the next element on a page is a video? Or do videos announce themselves?
So this is assuming there isn’t an already visible introductory text before the video, which I think maybe goes back to you asking to move the paragraph above the video.
>> ALEX: Yes. The paragraph above the video should be sufficient, and, usually, video players are pretty hard to miss.
>> STEVE JONES: 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 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 API 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 accessibilitycraft to save 10% on any paid plan.
>> AMBER: Yes. Is it possible, Nathalie, to skip ahead in this video, and then we can see it checked? Or will the video force you to watch all four minutes?
>> NATHALIE: You can totally skip ahead, yes. If you hit play, and then if you can fast forward it, you should be able to [inaudible].
>> ALEX: All right, sorry, this is really loud.
All right, can we fast forward now?
Fast forwarding.
All right.
>> AMBER: All right, but now if you hit play, will it check it off?
>> NATHALIE: Yes. [inaudible] play again.
>> AMBER: Maybe you need to go slightly further back instead of right at the end.
>> NATHALIE: Yes, he got it now. I don’t know what the key was on the key but…
>> ALEX: “Opens in a new window”? Really? Let’s see.
>> AMBER: So that’s not the video.
>> ALEX: I’m just shocked that actually opened in a new window.
>> AMBER: I know.
>> ALEX: No, it didn’t open in a new window; it opened in a new tab.
>> NATHALIE: Oh, yes, that’s true.
>> ALEX: Those matter [chuckles]
>> AMBER: So you want it say “new tabs”?
>> ALEX: Yes, because they are two distinctly very, very different things to screen-reader users.
>> AMBER: Yes, and how you can get back is different.
>> ALEX: Oh, yes, very different.
OK. This keeps referring to next “button.” These aren’t buttons. These are links.
>> NATHALIE: Got it.
>> AMBER: Oh, yes, the text says… Yes. “Click the next button.” It’s styled like a button.
>> ALEX: Details matter.
>> AMBER: Yes, so, probably, I’d just say, “click next.” [chuckles]
>> NATHALIE: Got it.
>> AMBER: Do you have any issue, Alex, with those checkboxes checking themselves? Was that OK for you?
>> ALEX: It was pretty clear what it was eventually going to do, but I tend to not like those patterns anyway, because it can be rather subjective at times depending on the situation. How do you actually make this checkbox check itself?
>> AMBER: Yes.
>> ALEX: Yes.
>> NATHALIE: So saying, like, the checkbox will check itself, would that be helpful for the first one, for example? Or do you think both of them?
>> ALEX: Preferably, we wouldn’t have a feature like that in an LMS, because I think it does more harm than good, but if we have to keep it, that’s probably the preferable way to keep it.
>> NATHALIE: Got it.
>> AMBER: Yes. I do think it’s good to use an actual input instead of an image or something that just swapped out, because when he went there, it did say that it was an input that was checked, but I do think it’s a little confusing, because even I asked you, “How do these get checked?” [chuckles]
>> NATHALIE: Yes, for sure. That’s a good point.
>> ALEX: Let’s see something. OK, so there’s no field sets or legends here, so that means if you entered a quiz using tab alone, you’d never actually know what question you are answering. I’m going to guess this is the option, but I don’t know. [chuckles]
>> NATHALIE: Yes, you are guessing correctly. [chuckles]
>> ALEX: OK, so to all the JavaScript developers out there listening: If you’re going to have a JavaScript module like this, that when you click next, a new question is shown, please be mindful that non-sighted users cannot see what just happened and manage focus accordingly.
>> AMBER: So for that, you need to have Aria, right?
>> ALEX: For that, you need to…
>> AMBER: Aria Live Regions?
>> ALEX: Well, you can’t here, because you can say a new question is loaded, but there’s no straightforward way to get there, because there’s no heading structure. That question to a [inaudible] output is below the content, so it’s pretty much useless to a screen-reader user.
>> NATHALIE: So could we try to, like, bump back to the top and read the next question? As opposed to being stuck at the navigation part?
>> ALEX: The preferable way to do this would be, each question should have a heading level.
>> AMBER: I think if you had focus, when they hit next, wouldn’t you just want to have… You could have JavaScript and shift to the focused up to the next question.
>> ALEX: In an ideal world, the heading one should be the title of this module. The heading two should say “quiz.” And the heading three should say, “Question one, question two,” instead of having this text that says “two-four” at the bottom.
>> AMBER: Yes. There’s a little more on this page, but maybe built with the quiz feature would be an h2 and an h3. I do think there’s probably something that would have to happen.
Alex, the question is above where you are.
>> ALEX: Oh, I know.
>> AMBER: OK
>> ALEX: I’m just trying to get across that this page has to know some [inaudible] structure for blind users. There’s no way to aria-live this, because aria-live would say the next question is loaded, but there’s no easy way to find the next question.
>> AMBER: Got you. Yes, so if they had the headings, and they also did a JavaScript when the next button is to force focus on that question…
>> ALEX: Yes. Now you can…
>> AMBER: That would make it read out, right?
>> ALEX: Yes. You can “tabindex minus one” to focus text.
>> AMBER: Yes.
>> ALEX: Going here, assuming I’m correct.
>> AMBER: Those are all labeled properly, right?
>> ALEX: Yes, they are.
>> AMBER: So that’s good.
>> ALEX: There’s just the missing field sets up here or, but the labels on the options are OK.
>> AMBER: I did add a link in the chat to explain field sets, what he’s looking for.
Hey, Alex, maybe don’t select one and hit submit, and let’s see what an error would do if you don’t.
So, visually, it made them all bold.
>> ALEX: Yes. I’d be willing to argue that it probably doesn’t do much visually, either.
>> AMBER: No, it doesn’t.
>> NATHALIE: It’s true. [chuckles]
>> ALEX: So there should be some type of focus placed on a visible message that says, “Please select an answer,” or something to that effect.
>> AMBER: Yes, right. “This field is required,” or something. Yes.
>> ALEX: Yes. OK, so I guess that’s saying the whole quiz is correct? That’s confusing.
>> AMBER: I think that one is actually saying that answer was correct. There is a separate message further down on the page about your score on the quiz.
>> ALEX: Yes, that’s got to be communicated better, because all the questions were above and on positioning, so no one would even guess to look for that there.
>> AMBER: So that, for me, is where an Aria Live Region is helpful, because it could have just read it out. Do you agree? Or would you handle it a different way?
>> ALEX: I agree. I’m just not exactly sure why we still have this page of questions here, and I’m less sure of the ideas to go back and see which ones you got right, but that’s also confusing, because now there’s only a “previous” button, and it says start over.
>> AMBER: There is a “Retake quiz” also.
>> NATHALIE: Yes. I think the idea is, if people didn’t do well, they could go back and check their answers and see which ones they got wrong with the “previous” button, but I agree about having the correct.., and then underneath, you can see the result. Like, you don’t get to that until later.
>> ALEX: There’s the “retake.”
OK, this is a non-semantic button.
Once you do that, there is nothing that actually labels this field, and that is an accessibility violation: no visible label.
>> NATHALIE: OK.
>> AMBER: It looks like it’s a div with placeholder text and a tabindex on it of zero, so that it becomes focusable rather than a field, but would it just be a field, or would you rather see a button.., because if field gets bigger?
>> ALEX: Yes. There needs to be a button that opens this field, because there is no button. It’s a visual button, maybe, but it’s not a button to screen readers.
>> AMBER: OK, so now I’m looking further up. There’s a div that has a roll of button with the Aria-label, “Edit note.” Oh no, that’s the [inaudible] button, I think, that we saw.
>> ALEX: There was some DOM replacement that happens, so there is no longer… Yes, I’m not sure what happened here, but it is unfortunately not accessible.
>> AMBER: Let me inspect that real quick, so where you are right now is a text area, but it doesn’t have a label on it?
>> ALEX: Correct.
>> AMBER: So I think the text above it, “Share your goals for a membership or course project” would need to be a label for this text area. I would sort of question whether you need to have the small field that actually reveals, sometimes it’s easier not to do stuff like that. I don’t know how important it is, Nathalie, to have the smaller visual, if you’re trying to keep pages short?
>> NATHALIE: Yes, I would have to check with our customers and stuff, because it’s always one of those, like, you don’t want to change legacy behavior [chuckles], and the type of stuff that they have, they are designed like a small box or whatever, but, yes, I think this is a really good realization for us.
>> AMBER: Yes. Otherwise I would say the div with the roll of button, I think, technically, would need to function sort of like an Accordion with like expanded and collapsed on it, to, like, [crosstalk ] Aria-controls to sort of say what it is? I don’t even think you can find that, Alex, unless you were to cancel [inaudible].
>> ALEX: So it does have a tabindex. It’s sort of a button.
Oh, so it does the same thing? Well, that’s very interesting.
This is the problem right here, this note text field, “Click here to enter your note.” It’s not an edit field, it’s not a semantic control, so it can’t stay like this.
>> AMBER: You know what I actually wonder, though? Would it be sufficient to not have that the be keyboard accessible at all? That “Click here to enter your note”? Because it does the exact same thing that the button you’re going to hear before it does that actually expands it.
I’m wondering if “Click here to enter your note could” be hidden from screen readers completely.
>> ALEX: You’d also take it out of the tab order.
>> AMBER: Yes.
>> ALEX: Yes, you can do that.
>> AMBER: Because it’s really duplicate.
>> ALEX: I’m not sure “Edit note” is good text for this, since you’re not actually editing the note; you’re writing a new note.
>> AMBER: Yes. I think I might label this, like, “Open notes field” or “Show notes field” or something that more clearly explains that this is like a.., because this is.., and then it needs Aria-expanded, true and false?
>> ALEX: Not really, because the button itself disappears.
>> AMBER: Yes, but it shouldn’t. Yes, and then it sort of would… Yes, so maybe not. Maybe not, because it’s not [inaudible] like an Accordion.
>> ALEX: It’s also worth noting that this “Add attachment” is not focusable at all, so you will skip this.
>> NATHALIE: Got it, and if you type something into that and then hit save, I think this is where it gets [inaudible] again, because, basically, that’s where the, like, “Enter your note here” part gets replaced with whatever you wrote there on the page.
>> ALEX: There’s nothing that says the save was successful. Also, the label that wraps this doesn’t make much sense: “Note text field.”
>> AMBER: What do you think about putting a focus lock on that to some degree once they trigger it? Where they go through the field, the cancel button, the save button, but they can’t go anywhere else on the page. Would that be helpful, Alex?
>> ALEX: Oh, I agree. It should be done. The vast majority of this needs to be refactored totally.
>> AMBER: For this piece, yes.
>> ALEX: Yes.
>> AMBER: I kind of wonder, instead of having the “cancel” button, of leaving that other button, the edits, just with the different label and having that be the cancel? Or basically “open-close” kind of thing, because it would make it more clear that there’s a field? Or the other thing is, you know, like I talked about, maybe this section just has the edit, but I don’t know if that’s confusing if they can submit, because the save button works except for the announcement, right, Alex? You just didn’t hear that it was successful?
>> ALEX: Yes.
>> AMBER: This one’s challenging. I don’t know if anyone watching has any thoughts. Feel free to put them in the chat, but I might have to think about it and come back. [chuckles]
>> NATHALIE: I do like the Accordion more. I like the “open” and “close” like, you-know-which-state-you’re-in part. I think that’s important. Or it could at least solve part of the problem. I know there’s a lot of issues, but…
>> ALEX: You just have to be careful not to change the button text, because that’s a WCAG violation as well.
>> NATHALIE: Got it.
>> AMBER: Yes, so you would always have it be like notes field, and then you’d have Aria-expanded, so then when someone encounters it, they would hear “Notes field expanded” or “collapsed.”
>> NATHALIE: Got it.
>> AMBER: Rather than saying, “Open notes field” or “Close notes field,” depending on the state.
>> NATHALIE: This might be a bit of a like cannibal rooms question, but what if somebody has multiple of these notes on one page? Would it just be like the label or the question above that tells you what it is, but it’s the same Accordion?
>> ALEX: Well, the problem with this is, this is weird because there’s an editing area and then there’s a viewing area, both of which are not totally clear. I would really like to see this switch to, you know, if you show it, you’re editing. If you hide it, you don’t see it anymore, because after I get finished editing a node, I’m going to be a little confused, “Will I still see my node?”
>> AMBER: So I think the intent here is that they could take notes just for themselves. I don’t think they’re actually sending it anywhere.
>> NATHALIE: Exactly. That was the original intent with it. We do have, now, the ability to send it to, like, say the course leader or something like that, but originally, it was just for the student to, you know, take notes as they’re going through the course.
>> AMBER: You asked about putting in multiple on the page.
>> NATHALIE: Yes.
>> AMBER: If somebody building out a course with an LMS puts multiple on the page, would it have multiple of the headings, like what we see built with AccessAlly’s private notes? Or would it just have multiple of the questions like, “Share your goals?”
>> NATHALIE: Multiple of the question, like “Share your goals.” The second one.
>> AMBER: Then yes, I think that’s the unique identifier that you’d have to use as the label.
>> NATHALIE: To connect it with that button?
>> AMBER: Yes.
>> NATHALIE: That makes sense.
>> AMBER: So do you want to read this? [inaudible], Alex?
>> ALEX: Oh, OK. It actually [inaudible].
>> AMBER: Actually, wait, first question. Nathalie, does your plug-in generate these certificates? Or would this be something that the person would create separately?
>> NATHALIE: Yes, so the person would design the actual PDF, upload it, and then AccessAlly can put in different fields, like the date, and the name of the person who completed the course.
>> AMBER: OK.
>> ALEX: Probably not worth looking at this, then.
>> AMBER: Yes, because the plugin’s not totally generating it. This might be worth providing some feedback or some resources to your users about how they can create accessible PDFs, because I bet if they don’t upload an accessible PDF, then it wouldn’t be useful to a blind person who’d be taken their course.
>> NATHALIE: Yes, I agree. I think that’s great.
>> ALEX: All right. I don’t think I have to talk about what’s wrong with this. [chuckles]
>> NATHALIE: Yes. I’m, like, pinching over here, so, yes, totally. [laughs]
>> ALEX: This is just borderline confusing. Just a little bit, that’s all. [chuckles]
>> AMBER: So those buttons, I think, are probably not actually buttons too. Like, “get community,” does that link over to your pricing page or your shopping cart to check out?
>> NATHALIE: Yes, it does. Yes.
>> AMBER: Yes, so I would guess that they have the role equals button on them? And you only want to use that if it’s actually doing something on the page. If it’s linking somewhere, then you don’t use role equals button, even if it’s styled to look like a button, and this is not unique to you. Almost every page builder, developer does that same thing.
>> ALEX: Yes.
>> NATHALIE: Totally. OK.
>> AMBER: So it’s a commonly confused thing. Is there anything else on the front-end, before we shift gears to a logged in editing experience?
>> NATHALIE: If you keep going, there will be, like, a member directory, which might be interesting to look at; and the team feature, which also might be interesting to look at, but I know, like, time turning up, so whichever you prefer is up to you.
>> AMBER: Where’s the member directory?
>> NATHALIE: If you click on bonus content, it’ll be coming up, basically.
>> AMBER: So I think you have to go to, is it “Press to start?”
>> NATHALIE: “Press to start,” yes, sorry.
>> ALEX: Icons. Aria-hidden true, always. There’s never a time you don’t hide your icons.
>> NATHALIE: Got it.
>> ALEX: These fields do not have labels.
>> AMBER: Yes. It also doesn’t have a visible label. I think it has a placeholder text, but it’s very light.
Is this a search field?
>> NATHALIE: Yes.
>> AMBER: So you could search like a name or something?
>> NATHALIE: Yes, exactly.
>> ALEX: This “go” button is not a button.
That actually does have a label, funny enough. It’s the only thing here that has a label, but it has a label.
>> AMBER: Are these clickable, or supposed to be clickable? Or is it just [inaudible]?
>> NATHALIE: Yes, it’s just for display, just to show an example.
>> AMBER: Yes, so I would think about if you can have a meaningful name on the badges.
>> NATHALIE: Yes, that makes total sense.
>> AMBER: And maybe you do, [chuckles] and for the demo, you just didn’t fill them in. Or even thinking about that, this is where sometimes you can provide guidance to users in the plugin. Like, what would be the label that would make sense? Because just hearing “green gem” doesn’t really mean anything.
>> NATHALIE: Totally. It could be, like, “Level one completed,” or something like that.
>> AMBER: Yes.
>> NATHALIE: Yes, that’s awesome.
>> AMBER: Good. Do you want to log in, Alex?
>> ALEX: I can definitely try. Let me pause my screen share, so that way, everyone doesn’t get to read my email with me.
[laughter]
>> NATHALIE: This is already amazing, so thank you. I know you’re probably like, “This is terrible.” [chuckles] I really do appreciate the feedback. [laughs]
>> AMBER: No. We appreciate you coming and being open to it, and we’re excited to see what you all do with the feedback and all that.
>> NATHALIE: Yes, and I think some of these features have been around so long that, like, we didn’t really know what we were doing in the beginning. I said when we started building the plugin, we were not plugin developers. We came from a completely different development background, so even developing for the web was new, and we’ve improved things over time, but this is like a whole other lens that we haven’t, you know, [inaudible], but I think it will be really helpful.
>> AMBER: I can tell that you all have put some thoughts into it, because there is some Aria on the divs, right? Whereas we’ve seen some where they were built a long time ago and everything was divs, and nobody had tried, so I can tell that you all have tried to put some effort in, and I think that’s great.
>> NATHALIE: Yes. Yes, we did try, but I don’t think we had real feedback. We were just doing some research, and I think that’s what we need to do. This is way more actionable, so thank you.
>> AMBER: Yes. I think your camera broke, Alex.
>> ALEX: Oh, really?
>> AMBER: Yes. It’s telling us a “No camera.” You don’t have to fix it, though, if it will take a long time. [chuckles]
>> ALEX: That’s hilarious.
>> AMBER: We can still hear you; that’s the most important part.
>> ALEX: That’s really weird. I kind of want to know what happened to my camera. I promise, no baseball bats today.
[laughter]
>> AMBER: It was on at the beginning when you first joined.
Do you mind going 100% again?
>> ALEX: Are we there?
>> AMBER: You’re at 80. It’s probably enough.
>> ALEX: What are we looking for in here?
>> NATHALIE: So basically, after the setting, there’s an AccessAlly tester, but they’re gone right after that. [inaudible]
>> ALEX: Well, because these are actually red, I’ll give it a 10.
No, I don’t need a lot of work. Come on.
[laughter]
This might take the record of being the longest heading level four I’ve ever seen. [chuckles]
>> AMBER: Yes, so those should probably not be headings; they should be paragraphs.
>> ALEX: OK, the dialogues, [laughter] probably a bit much.
>> AMBER: Is this just because it’s like a first time? Is that why?
>> NATHALIE: It is, so basically, the [inaudible] one, that’s basically when you first log in; and if you haven’t seen it, it will show. The other one, it’s like if you haven’t seen it for like six months or something, it’ll show, but, yes, I think we have too many, obviously. [chuckles] I’m not sure exactly why they’re all showing, but we’re going to look into that, for sure.
>> AMBER: Correct me if I’m wrong, Alex, but I think those modals were correctly coded, because you weren’t focused on the page behind them. They captured your focus and put you on the modal when it opened.
>> ALEX: Yes. There’s some missing aria attributes, so it doesn’t read the content within the modal until you interact with it.
>> AMBER: Hmm.
>> ALEX: So aria-labelledby should match the title if there’s a visible title. Aria-describedby should match the visible description if there’s a description, and the icon on the “close” button should be hidden, because it’s read as a comma, so you might have heard it say [elongated] “close” [chuckles] instead of just close, so that’s the reality of how icons can change the reading.
>> AMBER: Yes. This is an element for banner that’s showing on your page.
>> ALEX: OK, so there’s no headings on this page. Looks like we have some links here, but none of them are indicated to which one is currently selected. We know we’re on the dashboard right now.
OK, I think we’ve heard enough of that.
I’m not quite sure what that was.
AMBER: Is that’s a Google Chart?
>> NATHALIE: Yes, that’s a chart. I don’t know how to handle that, but…
>> AMBER: I don’t know if you’re using Google Charts, but I think Google Charts reads this tables to screen readers, so that’s probably what that was, Alex.
>> ALEX: I’m not sure why the first part of it read like that though. I could see the table, but it’s the text above it that’s the problem.
>> AMBER: Yes. I don’t know if it’s also thrown off because it doesn’t have any revenue. Is it supposed to be revenue?
>> NATHALIE: It is, yes, and this is a test site, so I don’t have much happening on it. [chuckles]
>> ALEX: Oh, trying to skip the table. [chuckles] All right. It’s would be better if some of these labels came first. “The last seven days revenue,” for example, should come before $0. “Members” should be should be before 37.
>> AMBER: It could still be visually positioned below. You would just want it to come first in the DOM, and then they can you CSS to position it below if they want?
>> ALEX: Yes.
>> NATHALIE: That’s awesome.
>> AMBER: What would be a good thing for him to go try and edit? What would you be curious about?
>> NATHALIE: I think probably our offerings, so that’s sort of where people create the structure of a course, so that we write underneath the dashboard link would be the offerings link.
>> ALEX: Oh, we have a bunch of non-semantic controls and unlabeled links.
>> AMBER: Yes, so what I see is what looks like each one of these has what’s probably an edit, which is a pencil to me. A copy, I’m guessing. An eyeball, which might be to visualize it, or to see it on the front-end, and the trash can is to…
>> ALEX: Yes.
>> AMBER: But I’m guessing none of those are actual buttons? You can’t get to them?
>> ALEX: I only get one link, so the rest are just literal icons.
>> AMBER: Do you want to follow one of those links?
>> NATHALIE: So, yes, it took you to the front-end to see the page as a member would see it.
That one took you to the editing page.
>> AMBER: So what did you do in order to be able to edit this, Alex?
>> ALEX: There is a “click event” on the title.
>> AMBER: Yes. Those are probably not coded as buttons, and you just have JavaScript making them act like buttons.
>> NATHALIE: I’m not as nearly as optimized for accessibility, so [chuckles] this is a good wake-up call.
>> AMBER: Yes, I think it’s worth pointing out, like, Alex figured out how to get into this, but a typical user might not, because Alex is a developer. [laughs] So he knows how to figure out what the JavaScript is doing and access it.
>> ALEX: Also a lot of educated guesses.
>> AMBER: Yes. Do you want to edit one of them, if you can?
>> ALEX: Is that the edit link?
>> AMBER: Yes, that’s an edit.
>> NATHALIE: Yes.
>> ALEX: Oh, you’re not using Gutenberg yet, so, of course, we can edit this.
>> AMBER: So this makes Alex happy, right, Alex?
>> ALEX: Yes, very happy.
[laughter]
Most of these Meta Boxes should probably work OK.
>> AMBER: What does that table do in that Meta Box where he was?
>> NATHALIE: That pop-up, LA Pro, that would show if you have multiple pop-ups set up for this particular page; which ones are enabled, and when they would happen, so if it was an “exit” intent or click triggered or something else, but we don’t have any pop-ups on here, so that’s why it’s empty.
>> AMBER: I wonder if that could use a message or something, like none.
>> AMBER: Yes, that would be useful.
>> AMBER: To make it more clear why there’s nothing in that Meta Box.
>> NATHALIE: Yes, that’s right.
>> AMBER: Can you remove an Access tag?
>> ALEX: That would be a no.
>> AMBER: OK. Can you add one? I don’t know what content’s on this. Like, if he searching…
>> NATHALIE: Yes, it should auto start. If you just start typing, it should try to find [inaudible].
>> AMBER: Is that a field you can get into, though?
>> ALEX: I can already tell you, this is going to be a problem. What would be something to type?
>> AMBER: Oh, because you’re going to search for it? “Add an access tag” is the text that I can see visually.
>> ALEX: Yes. There’s going to be no suggestions visible to me until I type something, maybe.
>> AMBER: I don’t even think you’re focused on it right now though. It looks like you’re just focused on page.
>> ALEX: Oh, yes, there’s focus on it. That’s just very, very weird input.
>> AMBER: Silver; is that a membership on this page?
>> NATHALIE: Yes, you could take silver or bronze.
>> ALEX: Yes, you’re right. It’s not going to be tied into it.
>> AMBER: There you go.
>> ALEX: [chuckles] Oh. Wow. Yes.
>> AMBER: Is this a dropdown, Nathalie? Like, are those other things that are on the site?
>> NATHALIE: Yes, those are all on the site.
>> AMBER: OK. That just sounds weird because I think people were testing things. [chuckles]
>> NATHALIE: Yes. Yes, yes, this is a test site, so it has a lot of weird stuff on it, but.
>> ALEX: I’m not sure what this uses though.
>> AMBER: So we added it, but it didn’t have a message that told you it successfully added it.
>> ALEX: In this field, it says nothing about auto complete or anything. Let’s see if we can see it.
Oh, so, yes, it’s just a regular input with no Aria support for this.
>> AMBER: I don’t have a good link for that off the top of my head, but it’s a combo box, and I can follow up with you, and we can try and put it in the notes, on what you need to do for an accessible combo box. I think I have an example, but I don’t have one off the top of my head.
>> NATHALIE: No worries. We can do some research, too.
>> ALEX: Yes, those are always hard to get, right? Especially the third-party libraries, which are inaccessible out of the box.
That’s strange.
>> AMBER: Is it your normal TinyMCE?
>> ALEX: Yes, I guess so. I didn’t realize closing the browser inspector would lay into entirely TinyMCE. That’s very strange.
>> AMBER: So that’s a WordPress thing that’s [inaudible] [laughs]?
>> ALEX: Yes. All right, we’re out of it again
>> AMBER: That’s the fun of editing things in the back-end and testing, sometimes we would, like, “Not your fault”
>> NATHALIE: “There’s nothing I can do about that one.” [laughs] Right?
>> AMBER: Yes.
>> ALEX: Or in the case of when we test with Gutenberg, it’s, “We don’t know if it’s your fault or not. It might be; it might not be.”
[laughter]
>> AMBER: How about the page settings? That has what looks to me like tabs on it.
>> NATHALIE: Yes. The Progress Ally page setting, yes.
>> ALEX: So this here link should tell you where you’re going.
>> AMBER: Which link?
>> ALEX: This link labeled here.
>> AMBER: Oh.
>> NATHALIE: Yes.
>> AMBER: Yes, so just change the link so that “View our documentation and tutorials,” that whole text is the link.
>> NATHALIE: Is the link. Got it.
>> AMBER: So it’s meaningful.
>> ALEX: Is this a table inside a table?
>> NATHALIE: That should say, “view our tables” right from the beginning, which I apologize for a lot.
[laughter]
Like, that’s still a table, so yes.
>> ALEX: Tables are good for structured data. Tables are not good for design in 2023. [chuckles]
>> NATHALIE: I agree. I completely agree.
>> ALEX: Yes.
>> AMBER: Can you add one?
>> ALEX: I guess not.
>> AMBER: Yes. I’m not sure what that is. It looks like there’s input fields there, like a dropdown. A dropdown and, like, a text field, but it’s possible they’re not actually inputs if you can’t get to them. [inaudible] after that.
There you go. What if you go across?
>> ALEX: No. Whatever happened there is not good.
>> NATHALIE: OK. A lot of learning. [laughs] Thank you. [laughs]
>> ALEX: That is a combo box. These are selectable.
>> AMBER: So this is a good combo box?
>> ALEX: Almost. It doesn’t have an associated label.
>> NATHALIE: Got it.
>> AMBER: Yes, the checks label, but the way this is coded would be the way you’d want to code your other ones for the actual field.
>> NATHALIE: Got it.
>> ALEX: Like this checkbox, it has an associated label.
>> AMBER: So that one’s good?
>> ALEX: This one is good.
>> AMBER: Can you follow one of those?
>> ALEX: One of what?
>> AMBER: Well, they’re reading to you as links. They look to me like tabs.
>> ALEX: Oh, no, they’re nothing.
>> AMBER: It’s not interactive?
>> ALEX: Yes, they’re non-semantic elements to screen readers.
>> AMBER: Hmm.
>> ALEX: If anything, that probably has like an onmousedown event on it or something, because not even “enter” does anything.
>> AMBER: Hmm, interesting. Let me see if I can find one with… Here’s the tabs pattern. I’ll put that in the chat. There’s an example on that page for tabs with manual activation –
>> NATHALIE: Got it.
>> AMBER: – And what would need to happen on those.
>> ALEX: All right. I think that’s the end here.
>> AMBER: Yes.
>> NATHALIE: Yes.
>> AMBER: We’re about at time. Do you feel like we dumped a bucket [laughs] on you?
>> NATHALIE: [cheerfully] A little bit, [chuckles] but this is really, really awesome, and, yes, it’s huge. I really appreciate it, some of the stuff, I knew. Like, I knew the back-end of the plugin, some of it is a little bit more dated, and we haven’t done as much work on it.
The front-end, we wanted to prioritize because more people are seeing it, but, yes, this is really good feedback for us to work on.
>> AMBER: Alex, do you have any final thoughts or anything?
>> ALEX: I don’t. Do we have any questions?
>> AMBER: We did not get any other questions, so I don’t know if anybody else had any other questions. We did get some feedback: Adrian said, “We appreciate you going through this, Nathalie. It’s how we all learn.”
Oh, there was some conversation also about emails being the only place left for layout tables [chuckles] because of Outlook, and he said, “As soon as Outlook updates, then we can get rid of that in emails.” [laughs]
>> ALEX: Yes, so that’s a good reason to always have a plain-text option for emails, because Outlook tables are really not accessible.
>> AMBER: Yes. Is Outlook accessible, or would somebody just not use Outlook?
>> ALEX: Outlook is very accessible, depending on if the email content is workable.
>> AMBER: Hmm. Yes.
>> ALEX: And the best way to make it not workable is to use layout tables.
>> AMBER: OK. Nathalie, do you want to share again where people can go if they want to see the plugin and play around with it and test it out?
>> NATHALIE: Sure. Yes, so “AccessAlly.com.” That’s A-C-C-E S-S-A-L-L-Y dot com, and you’ll see a lot more information, and you can do the demo, kind of what the first part of this was all about, like a take-the-tour button. You can find that on every page, and I’d love to just have your feedback if you have any other feedback. Obviously, I’m open to that as well.
So thank you for being here and taking the time to see what we can do to improve. [chuckles]
>> AMBER: Yes.
Alex, how can people get a hold of you if they have questions after?
>> ALEX: You can connect with me on LinkedIn. It’s Alex Stine, S-T-I-N-E on LinkedIn, and I’m, of course, in multiple different WordPress Slack groups, and I hang around the WordPress Accessibility Facebook group, so I’m around.
>> AMBER: Great. Well, thank you both. Thank you, everyone for tuning in.
This is your short reminder: If you have not registered for WordPress Accessibility Day, go register to attend. It is next week, starting on September 27th at 10am, US Central Time, but it will run for 24 hours, so no matter where you are in the world, there will be talks in your time zone, live captioned, and sign-language interpreted. “2023.WPaccessibility.day.”
Thanks so much.
>> ALEX: Thank you. >> NATHALIE: Thank you so much.
>> 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.