Lifter LMS Accessibility Audit: Raghavendra Satish Peri & Amber Hinds

>> AMBER HINDS: Welcome to WordPress Accessibility Meetup, where we are going to audit the LifterLMS plugin. Raghavendra Satish Peri is the accessibility consultant and user tester that we have here today. I am Amber Hinds, CEO of Equalize Digital. Before we get started, I have a few announcements that I like to run through. If you haven’t been before, we have a Facebook group. It is a great way to connect between meetups, share what you’re working on, get feedback, ask questions, plug in recommendations, all of those sorts of things, also answer questions. We have a good community going on there.

You can find it if you search WordPress Accessibility on Facebook or the direct URL is facebook.com/groups/wordpress.accessibility. Everyone always asks, is this being recorded? Yes, it is being recorded. It takes us about a week and a half to two weeks to get corrected captions and a full transcript and write up a summary, and then we have the recording available. You can find all of our past recordings and upcoming events in one place if you go to equalizedigital.com/meetup.

You will also get notified when the recording is available if you join our email list, as well as getting emails about other upcoming meetups and other accessibility news. You can do that at equalizedigital.com/focus-state. The final place where we release this is in just audio format on our podcast. We had some attendees let us know that they wanted to be able to listen but not actually watch YouTube videos. You can find those on accessibilitycraft.com. We are seeking additional sponsors for the meetup.

This is part of the official WordPress meetups program, but the community team told us that they did not have any budget to cover the cost of captioning or transcription services, and so they said, “Find sponsors.” This is my pitch that I give at the beginning of every meetup. If your organization would be interested in helping to support this meetup and making it accessible for everyone, please reach out to us and we can share more details about what is involved in sponsorship. We also have that on our website on that same meetup webpage that I previously shared.

You can reach myself and Paola, my co-organizer, if you email us at meetup@equalizedigital.com. We would love to hear from you, not just about sponsorship, but also if you are interested in speaking, or maybe you’re not someone who wants to speak but there’s a specific topic you think we should cover, if you message us, we can do our best to see if we can find someone to speak on that topic. Feel free to send us an email if you want to get in touch, or you can also reach us through the Facebook group. My company is Equalize Digital. I mentioned that previously.

We’re a mission-driven organization and a corporate member of the International Association of Accessibility Professionals, and we are focused on WordPress accessibility. We make a WordPress plugin called Accessibility Checker that can help you to find accessibility problems in WordPress websites so that you can figure out how to make them work better. I’ve shared our website already, but if you want to find us on social, we are most active on X. I did change that icon to X just recently. [laughs]They changed their domain, so I decided I finally maybe needed to go ahead with that.

We’re just @equalizedigital on Twitter/X. We have a sponsor that I do want to thank today, which is GoDaddy. GoDaddy is covering the cost of live captions for this evening’s meetup. GoDaddy’s mission is to empower a worldwide community of entrepreneurs by giving them all the help and tools they need to grow online, including a simpler, safer WordPress experience. GoDaddy provides a managed WordPress experience that is as easy as it is effective.

The latest version of WordPress comes pre-installed with exclusive themes, plugins, and tools to get you up and running quickly with automated backups, updates, and malware removal so that the pros that use GoDaddy can spend less time on monotonous maintenance and more time building their businesses. You can learn more about GoDaddy at godaddy.com. If you want to tweet a thank you to them, you can find them @GoDaddy on Twitter or X. I always encourage people to give a shout out to our sponsors and say thank you for sponsoring.

It helps to let them know that we are doing what we have said we would do, and I think it encourages them to continue sponsoring and lets them know that what they’re doing supporting captioning is important and that people value it. If you are willing and you want to send them a quick thank you, we would very much appreciate that. I have two upcoming events that I want to highlight for you. The first one is we normally meet on the first Thursday, but the first Thursday in July is July 4th, which is a holiday here in the United States.

For those who aren’t in the States, you may or may not know this, but it’s a pretty big holiday, so we have decided that for July, our first meet up is actually going to be on the second Thursday, not the first Thursday. It will be on Thursday, July 11th at 10:00 AM U.S. Central Time, and Gavin Colborne will be talking about enhancing university accessibility with real-time web registry services. He’s going to be talking about how you can manage accessibility testing at scale for institutions that have hundreds or thousands of URLs and websites that they are managing and testing for accessibility.

Then, our Monday meetup in the same time slot on Monday, July 17th, I will be giving a talk about which page builder is the best or worst at accessibility. I went through and I tested a bunch of different components for several different page builders, and I am going to compare them and contrast them and give you a breakdown from best to worst for page builders, which is a question people always ask me. I figured I needed to go and actually do some testing and get a good answer for that instead of guessing, so that’s what this talk is going to be.

>>AMBER: Today, we are going to be looking at the accessibility in LifterLMS, and I’m going to bring on our two people from Lifter, Chris and Kim. Welcome. We are so excited to have you here and willing to trust us to test the plug-in. I wanted to give you the opportunity though for anyone who’s not familiar with LifterLMS, can you give a little bit of background on what Lifter is and how it can help WordPress websites?

>> CHRIS BADGETT: Well, thanks for having us, Amber, Paola, Ragha. We’re really grateful to be here and have this opportunity and appreciate your effort helping us improve our accessibility at LifterLMS. Lifter was born about 10 years ago. It’s a learning management system for WordPress. You can use it for creating courses, training-based membership sites, certification programs. Why do we do all this? I like to say my life mission is I’m lucky that my life mission is also our company mission, which is to lift up others through education.

I feel that education has the biggest opportunity to create ripples of positive impact in the world for all the world’s people. That’s what keeps me motivated. You will not find somebody more obsessed with courses and online education than myself, and I’m grateful to be here to learn. Lifter, technically, we have a free plug-in on the WordPress repository that you can download and get started. It’s super powerful. We have about 22 other add-ons that add things like e-commerce, advanced quizzes, group management and education, and a lot of other things.

We also have a full-site editing block-based theme called Sky Pilot that’s awesome. Lifter works with any well-coded WordPress theme. I’m just happy to be here and support the online education entrepreneurs, I call them, the people that are building online training, whether it’s free in a school or somebody’s trying to make money with their expertise teaching what they know or empowering businesses to train their team members, their prospects, their customers.

We have everything from all the learning management system stuff from courses to progress tracking, user accounts, advanced reporting, and data just around all that activity in the LMS, as well as the e-commerce engine for if you are going to sell your courses, memberships for bundling courses together and protecting other parts of the website, and some engagement features to create gamification through certification, achievement badges, personalized e-mails, and much, much more. We’ve been very busy over the past 10 years, and I’m excited to learn from you today.

I’ll pass it over to Kim, one of my partners at LifterLMS who joined us in 2023, and she’ll tell you a little bit more.

>> KIM COLEMAN: Yes, I mean, I just want to add that with a plugin like LifterLMS, it’s such a heavily used by a wide variety of people, and we want to make sure that the people building with LifterLMS have accessibility baked in as much as possible with the things that they don’t have to edit, that they can create their course content and that the people taking them are able to access them no matter who they are or where they are in the world. It’s very important that this open source product has accessibility as a focus both in the front end for the users the students and in the back end for the admins that are creating it.

Yes, we’re just excited.

>> AMBER: That’s great. Yes, we love to be able to do not just front end but also admin accessibility testing. We’re going to do a little bit of both today, and we’re excited to have you here. I’m going to pop Ragha up here as well so he is here. I’m going to go over just two quick guidelines for people who are watching and then I’ll stop sharing and let him take over and we will dive into our testing. The quick guidelines are, number one, the goal of this is to give voice to assistive technology users, so sharing ideas in the chat are welcome.

If you see something or you want to inspect on the front end, and I think we can share a link in the chat to the front end of the site we’re going to be looking at, that’s great, and probably that will be helpful information for Chris and Kim and the people on their team, but we want to make sure that we’re not invalidating Ragha or another assistive technology user’s experience because this is their real-world experience of the website. Then, the second guideline that we always like to emphasize is that this meetup is intended to provide positive, actionable feedback for our plug-in developers.

I think it takes a lot of courage to be willing to come up here and publicly have someone look at your work and test it, and so we want to commend Chris and Kim for being open and willing to do that. This is not about saying that a plug-in’s really bad or whatever. We all have room for improvement. I know we just made some accessible improvements in our own plug-in that we were like, “Hey, why did we miss this?” I don’t know, but we fixed it. We just want to have all of our attendees please keep that in mind, that this should be positive and we hope to keep it positive.

I am going to stop sharing as soon as I figure out where that fun Zoom toolbar went. There we go. Ragha, do you want to go ahead and share your screen and your sound?

>> RAGHAVENDRA SATISH PERI: Yes.

[pause ]

>> AMBER: I will put in the chat for anyone the link to just view the front end in case it’s helpful for you to also look at this. We do have the speech viewer up. If it becomes problematic where it is, we might close it, but I think for now we’re going to leave it up. I think our first goal on the front end here was just looking through some of the courses. Can you give us a background though on this theme, Chris or Kim, one of you? What theme is this using?

>> CHRIS: This is our theme called Sky Pilot.

>> AMBER: Okay. I think we’re going to try mostly to do– I know it’s hard when you have a plugin where you might have short codes or blocks or something. [chuckles] We’re going to try to stick to the plugin, but since it’s your theme, if something comes up theme related, then we might mention that as well. Ragha, I think what makes sense here is to view the courses. There’s a link to view all courses. There’s also courses in the nav, but I think if we want to get to just an archive of courses as a first. Feel free to give any feedback and thoughts on this nav since it’s their theme. Know that’s not plugin related, but.

>> RAGHAVENDRA: Oh, okay. It’s interesting. When I press down arrow from here, the courses, it says list of 18 items I thought 18 courses are there, which is form of a list, but all these courses are also inside heading. What happens in browse mode when I’m pressing down arrow? To go to the next list item, I think it’s going to take time. Press down arrow. Normally, if it is just a navigation link like here, those are in lists and it’s easy to move to that content, but we already have headings here. I don’t generally use lists here.

>> AMBER: This is like an archive page where-

>> RAGHAVENDRA: There’s a course for each, yes.

>> AMBER: – yes, each post, right, course, it’s sort of functioning like a post grid, right? There’s a list. You’re saying you don’t like the list. I actually think I would put this in a list. This is where some things are a little subjective, right? What’s your thought on that?

>> RAGHAVENDRA: It is subjective. As I said, you can move from list item to list item. If I press I and NVIDIA, I think it moves from list to list item to list item. That is also available, but you already have headings also. The only problem I face is when I press thinking that it is a list and I press down arrow and I see all this featured image, then the heading, then the content, the summary of the course, and then I press down arrow, I move to the second list item.

>> AMBER: Because there’s a lot of content inside each list item, it makes it harder to navigate with arrows?

>> RAGHAVENDRA: Yes.

>> AMBER: One of the things that I’m seeing visually is I think these might be categories. Feel free to tell me if we’re wrong on this, Kim or Chris, for the courses. There’s a percentage– Well, I can see– Oh, maybe only because I’m logged in. You’re not logged in. When I’m logged in, there’s a percentage finish, but there’s also the categories, maybe, for the courses, and then the heading two, and then the author, and then what is maybe the difficulty, so advanced, beginner.

>> RAGHAVENDRA: Yes, I’m going there. That is the author name. Beginner is, I think– is it how difficult is the course? That is one more thing. When I read beginner, here you see 19 lessons, so I think here you should put, “Difficulty: beginner,” or whatever is it. Learn more.

>> AMBER: That could be with screen reader text to just clarify what beginner means?

>> RAGHAVENDRA: Yes. It is in featured and technology, this one, but again, the word category, featured and technology is missing.

>> AMBER: To give you the context of what those categories are.

>> RAGHAVENDRA: Yes. Normally, earlier in I think in blog post still on WordPress, we have something called category and tags. We differentiate both the category and tag by saying category and tag on the post type. Yes.

>> AMBER: Yes. I think, structurally, it seems like technically everything here is correct, but there could be some things that make it a little more clear for user, is that right?

>> RAGHAVENDRA: Yes. This is also very good. Learn more, and it reads the title.

>> AMBER: Yes, so that’s awesome. I had looked at before, I don’t know if these all have the exact same lessons, but the commercial real estate, do you just want to go into that one?

>> RAGHAVENDRA: Okay. Okay.

>> AMBER: One thing that I’m noticing here as you do this, and tell me what you think about this, Ragha, is those were list items with multiple different links in them, and I wonder if it would be less noisy if that content was wrapped in a single link. That would mean that maybe the categories couldn’t also be linked to the category archive. It’s a question of whether that functionality is actually necessary. I don’t know if you have any way to get data off to people actually, right, because it’s not on your website. [chuckles]

Do people actually click on the categories to try to go to the category archive or is that more just informational, in which case, it doesn’t need to be linked?

>> RAGHAVENDRA: The category archive generally I think it’s in the menu here. This is where we are seeing all this category, which is– One thing I don’t understand is what is the difference between the category which you see here, or was this the bundled courses? That will be one thing. If there are five courses under budgeting, I think that will be bundled under budgeting. That is my expectation.

>> AMBER: I think that’s correct.

>> KIM: That’s correct. Yes. Yes.

>> RAGHAVENDRA: Those will be the categories. If I have a course on ARIA, let’s just say I’ll come to accessibility on WCAG. We have three courses. We create a category called WCAG and put it under them so that people understand all these courses come under WCAG.

>> AMBER: Yes, I guess my point was I just don’t know if you actually need to link to it from the archive if you– I know you don’t have control over whether they’re putting it in their nav.

>> RAGHAVENDRA: It is noisy. Yes, it is noisy for me. If I have control, a checkbox or something, I remove it from there because all I need is who is the author, what is the difficulty level, how many lessons, and a call for action that takes me to the course page.

>> AMBER: Do you want to explore this course page just a little bit and then give us some general impressions of it?

>> RAGHAVENDRA: I’m doing this discovery with headings right now. Let’s see. If I see all these headings are broken. H2 is missing after H1. It was confusing for me already because the way the structure is there, I think this is part of the lessons.

>> AMBER: Kim or Chris, have you heard of the headings map browser extension? I’ll put a link to it in the chat. That’s the GitHub, but there’s links there for either Firefox or Chrome, whatever browser you use. That will allow you to output the outline. I don’t know– [crosstalk]

>> KIM: Oh, perfect. I use Wave right now. I don’t know if you guys like that one.

>> AMBER: Wave is helpful. This literally gives you a tree view of all the headings on the page. That’s all it does, but it’s super handy. It will flag if you skip heading levels. Is the plugin outputting hard-coded heading levels, or is this something that would be controlled if these are, I don’t know if these are blocks, inserted into a page?

>> KIM: What you’re navigating here are hard-coded into the plugin. I’ll add that there’s a PR with fixes to some of this and also some removal of headings that don’t actually apply. I know that that’s not part of this testing, but I’m taking that note to just revisit it and use your tool. I think some of these that are landmarks don’t really need to be.

>> RAGHAVENDRA: Yes, I have seen complementary landmark.

>> AMBER: Usually– [crosstalk]

>> KIM: [inaudible] [crosstalk]

>> AMBER: Yes, I think the course– or sorry, that would be– I’m going to try and do this, correct me if I’m wrong, but that would be the lesson under the section, like course welcome, that’s a heading, but it probably doesn’t actually need to be a heading because there’s no subcontent.

>> KIM: Correct, and I will double-check, but I believe that’s one that I removed. I also removed the heading usage in the pricing table above, which also seemed incorrect. I think there’s a tendency to use heading levels as a developer because you think that they create some kind of font relationship, and that’s just a big no-no and something to undo if you’re a developer and you’re like, “Oh, the font’s bigger now. I put it in a heading tag.” No.

[laughter]

>> AMBER: Yes, you got to use classes. A way around that, if you want it to match, is when you set up your styles for your headings, you could also have a class like .h2, .h3 that have the same styles, and then you could make it whatever with a– It could be an h3 with a class of h2, and then it would style it like an h2, even though semantically it needs to be an h3.

>> KIM: Pro tip. That’s a good one.

>> AMBER: Yes. Okay. Anything else you notice on this page, Ragha?

>> RAGHAVENDRA: One minute. There are multiple complementary landmarks. I think all those landmarks should be removed. Let me– Difficulty is advanced. Okay. Okay. This is price. Okay.

>> AMBER: I’m not sure. Are you catching that that section is, I think, related courses, or is that to actually take this course?

>> RAGHAVENDRA: No, I think this [inaudible] and you pay $500 to take this course.

>> AMBER: Okay. Yes, that was confusing to me when I first came here. I was like, are these related courses?

>> RAGHAVENDRA: Yes, because I would have seen the price. Yes, I would have seen the word price, but– Course with membership, free. Okay, so you need to buy the academy pricing. See, something is confusing here from the user experience standpoint. What is member pricing? You become a member for academy, and then this is free for you. I know that whole wordings should be there. This is inside a list. If it is just one, it doesn’t need a list.

>> AMBER: That’s where things get hard, but you almost need conditional logic that recognizes whether or not the user has only put one item, and if they have only put one item, then don’t output it in the list, but if they have multiple, then output it in the list.

>> RAGHAVENDRA: Yes. Yes, and enroll is again, I think you go to the checkout page.

>> AMBER: Those are ambiguous because there’s two enrolls, but they go to different places maybe? Yes. They would need to have screen reader text [inaudible] [crosstalk].

>> RAGHAVENDRA: Screen reader text only. Yes. I think these are all lessons, lessons under this course, so there should be one heading, and these should be inside the list.

>> AMBER: Inside the sections– [crosstalk]

>> RAGHAVENDRA: You remove the headings.

>> AMBER: Then, the lessons that are below the– There’s an introduction heading. I think that would stay and there’d be one lesson under that, and then there’s an instructional content, and that has, I’m going to call it eight. I haven’t counted. Those could probably be in a list, I think, so that you get the feedback that there’s eight of them under that.

>> RAGHAVENDRA: Yes. Okay.

>> AMBER: Oh, wait. Okay.

>> RAGHAVENDRA: Okay, so under this first lesson, there are all these three, the quiz, the assignment, and all?

>> AMBER: I guess there is 10.

>> RAGHAVENDRA: I thought all these are individual lessons or–

>> AMBER: They are.

>> RAGHAVENDRA: If they’re all individual lessons without a module, then they are supposed to be inside a list. Generally, the module will be the heading. The lesson should be list items inside it.

>> KIM: It wouldn’t be a list with a nested list. You would do heading– We call them sections, but modules is great too. Section of course is the heading, and then a single list for the sections lessons. We just wouldn’t get the count of total lessons in the course unless we added screen reader text for that. I mean, sighted people don’t also get that total lessons in course unless only on that course catalog view.

>> AMBER: A screen reader user, if it’s in a list, they’re going to already hear the item 1 of 10, so visually, you’re outputting this and it’s saying complementary landmark because it’s inside an aside tag, the HTML tag. That’s what he was saying, the complementary landmark is kind of noisy. It actually would be better not to use that aside tag. If these are in a list, then having the 1 of 10, 2 of 10, 3 of 10 is helpful for sighted people, but it would be repetitive for a screen reader user. I would almost put ARIA hidden, tell me if I’m wrong, Ragha, on that visual text, because if it’s in a list, they’re going to hear that because of the list HTML.

They wouldn’t also need text, if that makes sense. That’d be the visual text for sighted people, but you’d hide it for screen readers. What do you think the clickable is?

>> RAGHAVENDRA: I think that is a JavaScript, some JavaScript that does not properly handle it. That’s why the clickable things come up.

>> KIM: You’re correct. It’s a favoriting, and when you’re not logged in, it would read out a number. That’s all it would currently do. That needs screen reader text to say zero or two favorites or something like that. It’s just-

>> RAGHAVENDRA: Ah, okay.

>> KIM: – not obvious at all right now.

>> AMBER: It should be a button.

>> RAGHAVENDRA: Yes, it should be a button. When you’re not logged in or when you’re– [crosstalk]

>> AMBER: It could be a disabled button when you’re not logged in, if you can’t use it, and then it would be a functional button– [crosstalk]

>> RAGHAVENDRA: Yes, so use ARIA disabled. Use ARIA disabled instead of disabled attribute, because if you use ARIA disabled, you can get it into tab focus and still, two people, two students favorited it and it says disabled. Only when you can log in, you can–

>> AMBER: Yes, so I would add [inaudible] that’s more meaningful on what the number even means, because they can’t tell it’s a heart, if that makes sense.

>> RAGHAVENDRA: I never even realized that there’s a heart on the favorite icon there. Yes, as you said, 5 of 10 instead of ARIA hidden role presentation, does it work? If that works, then I use that because we also need to look how the division spans for this entire block is set up because ARIA hidden generally hides everything under the DOM tree.

>> AMBER: The other thing, which I don’t know if you can interact with this, but if you’re logged out and you hover over these, there is a visible tool that says you must enroll in this course to access course content and it’s no longer linked over to the post. I don’t think you’re getting that in any way.

>> RAGHAVENDRA: Is this one?

>> AMBER: Can you follow that link, and does it do anything for you?

>> RAGHAVENDRA: It generally should take me to that page and say, you should enroll for the course.

>> AMBER: Does it do it?

>> RAGHAVENDRA: I don’t think it is doing any– One minute. No, it doesn’t. It doesn’t.

>> AMBER: Yes, so what it looks like it’s doing is you all have removed the href when they’re logged out, so it still has an A tag when I inspect this, but there’s no href going to the post single. That’s why it’s reading as a link, but he can’t actually follow it or do anything with it. What might be better is still having the link to the single but using content restriction if they follow the link.

>> RAGHAVENDRA: Or open a dialogue and say that you need to enroll for this course.

>> AMBER: Like a browser dialogue?

>> RAGHAVENDRA: Yes. Going to other page again, you need to come back.

>> AMBER: Yes, so there’s that issue, right? That there’s text here that a sighted person can see but a screen reader can’t engage with on the needing to enroll. Do you want to go ahead and try and enroll? Yes, use the a la carte. I think we can [inaudible] get, right?

>> RAGHAVENDRA: Okay.

>> AMBER: I think you’ll need this to make a whole form, but you can use fake information.

>> RAGHAVENDRA: Yes. I want to see that as– Yes, there seem to be no errors.

>> AMBER: What you did, just to confirm, is you submitted nothing and you hit “buy now” because you wanted to see would it say, “You have forgotten to fill out all these fields.”

>> RAGHAVENDRA: Yes.

>> AMBER: Gravity Forms is actually a really good example to look at this on their validation summary where you submit it and it puts right up at the top a list of all the fields that were missed in a really obvious error. I think that the errors here, it’s not super obvious, even from a sighted perspective.

>> RAGHAVENDRA: Yes, and our request fields are marked up, and I see the labels are also there. The only thing is errors are missing. The way Gravity Forms have done it, it will be great. I want to see if they have auto-completed– There’s not a complete– According to WCAG, we have to use the auto complete attributes for the personally identifiable fields, and those auto complete attributes are missing from this entire form also.

>> AMBER: Are you familiar with those, Chris and Kim?

>> KIM: I just added them in PM Pro. Yes, and they also help people using one password and things like that. The email and the password fields, we can– What do you guys do? You guys do the spell check thing too, or we don’t need to do that?

>> RAGHAVENDRA: In HTML 5.2, there are about 53 auto complete tokens that are defined. Wherever you collect personally identifiable data, like name, email address, house address, phone numbers, those things need to have the specified auto complete.

>> AMBER: Yes, but I don’t think you have to have spell check from an accessibility standpoint.

>> RAGHAVENDRA: No, you don’t.

>> AMBER: Yes, just the things I put in the link for everyone, just in case anyone watching is interested what the specific attributes are that you’d want to have auto complete on. All right, do you want to fill out the form?

>> RAGHAVENDRA: Yes.

>> AMBER: All right. Pause for one minute, Ragha.

>> RAGHAVENDRA: This is great. The password is great. [laughs]

>> AMBER: Yes, hold on. Before we do the password, Kim and Chris, you may have noticed this, he tried to paste his email address in to save himself time typing. Ragha, it did not say this to you, but it put text in that field that just says copying is not allowed, so your paste did not work.

>> RAGHAVENDRA: Oh, okay. [laughs]

>> AMBER: He might’ve known that when he tried to submit the form, it might’ve given him an error that the emails didn’t match. I’m not sure, but you actually don’t ever want to block a user from being able to paste into a form field. Even in that, cause they could paste an error, right, but they could also be pasting out of some other place where they keep things that make it easy for them with their assistive technology to get through faster. Ideally, we don’t want to block pasting. You’ll need to retype that, Ragha.

>> RAGHAVENDRA: I didn’t even [inaudible] [crosstalk] I think only too short, medium doesn’t help. It should say more than that, password is too short, use uppercase, lowcase, or whatever the criteria that needs to be met.

>> AMBER: I don’t actually know this. Is it correct for it just to be reading star because the password is not visible,-

>> RAGHAVENDRA: Yes, yes.

>> AMBER: – or should it be telling you so you know what key you pressed?

>> RAGHAVENDRA: No, it does not.

>> AMBER: Okay.

>> RAGHAVENDRA: From security standpoint, I feel this is the right thing, unless and until assistive technology provides that option.

>> AMBER: Okay.

>> RAGHAVENDRA: I chose manual. Oh.

>> AMBER: You can do Stripe, it’s [inaudible]

>> RAGHAVENDRA: If I press down arrow from here, if I press down arrow again, and I press down arrow. From manual, if I press down arrow, it should ideally go back to the credit card area, but focus– Okay. I think it moved to the credit card and my focus immediately jumped to the credit card field.

>> AMBER: The number instead of– You’re expecting it to stay on the radio field?

>> RAGHAVENDRA: Yes, it is supposed to be on the radio field.

>> AMBER: Okay. The credit card number you can use.

>> RAGHAVENDRA: There’s no field set and legend used for the payment details.

>> AMBER: Are you guys familiar with that? The field set [inaudible] [crosstalk]?

>> RAGHAVENDRA: It doesn’t group these elements here.

>> KIM: It may be outside of our control, but it may not be. This is an embedded Stripe element [inaudible] [crosstalk], but it’s possible we can.

>> AMBER: Oh, I think he’s talking about the list of three options. Yes, that should be in a field set because they’re all related to each other, and then the legend tag would be wrapped around payment details, that heading.

>> KIM: Probably the same of the other form sections as well, were not in the field but could have been, or were they?

>> AMBER: I think the only ones that have to be in a field set normally would be radio fields and check boxes-

>> KIM: Radio fields and check boxes.

>> RAGHAVENDRA: Yes.

>> AMBER: – because that’s how you know that they’re in a group. The credit card numbers, Ragha, is just credit card number, 4-2-4-2-4-2, over and over again.

>> RAGHAVENDRA: I think that’s good.

>> AMBER: Yes. That’s supposed to be a month and a year, so I think if you put another four at the end.

>> RAGHAVENDRA: Yes.

>> AMBER: Oh, wait. That’s expired.

>> RAGHAVENDRA: How did I move to the expiration date?

>> AMBER: It automatically went to it as you’re typing.

>> RAGHAVENDRA: It’s moving my focus automatically. Okay, and this is also not good.

>> AMBER: That comes from Stripe, I think.

>> RAGHAVENDRA: Yes, yes.

>> AMBER: Yes. Just give it any month and year in the future.

>> RAGHAVENDRA: Okay.

>> AMBER: It’s a two-digit month and a two-digit year.

>> RAGHAVENDRA: Okay.

>> AMBER: Yes. This can be any three-digit number. Does this have to be a US zip?

>> CHRIS: Just five numbers for the test.

>> AMBER: Yes, just type any five numbers.

>> RAGHAVENDRA: Why did I go to PayPal now? I pressed that from here.

>> AMBER: I think that this would actually be easier for a screen reader user if you weren’t nesting the Stripe inside that group, so have the how do you want to pay question, and then show whatever is necessary, like the Stripe fields or if there’s some other payment thing below it, instead of trying to nest it in because I think that’s why he’s getting confused.

>> RAGHAVENDRA: Oh, okay, so first I have the Stripe and then the credit card fields and then the PayPal link button. Correct?

>> AMBER: Well, what I was saying is because the do you want to pay with Stripe, do you want to pay with PayPal, do you want to pay manually, are related, I think what’s confusing is that it’s putting the Stripe credit card fields, if that makes sense. Yes, I think you can buy now.

>> RAGHAVENDRA: It says, “There’s an issue with your chosen password.”

>> AMBER: You might have to make it harder. [inaudible] [crosstalk]

>> RAGHAVENDRA: I have to reenter credit card details?

>> AMBER: That’s what I was just wondering, but it’s reloading now. Oh, no.

>> RAGHAVENDRA: Okay, [inaudible]

>> AMBER: Okay, and there actually was a visual message that came in that said six– [crosstalk]

>> RAGHAVENDRA: Alert.

>> AMBER: Yes, it slid in from the side and it was basically a success message like, you’re enrolled in the course.

>> CHRIS: The screen reader doesn’t pick that up, those pop ups, the slide-ins. We call those notifications, so they’re outside the view, it sounds like.

>> AMBER: You can do that with an ARIA live region. I’ll put a link to Mozilla developer docs for that.

>> RAGHAVENDRA: Yes, either ARIA live or role alert because those are more of alerts. Not alert, yes, ARIA live should be good. Role status.

>> AMBER: Do you want to go look at one of the courses now? I think you should be able to go to one now that you’re logged in.

>> RAGHAVENDRA: Why did it say dialogue?

>> AMBER: I’m looking to see [inaudible]

>> RAGHAVENDRA: I think that add favorite for this lesson should be removed from here. It’s so confusing.

>> AMBER: In the the list of lessons,-

>> RAGHAVENDRA: In the link, yes.

>> AMBER: – you’d only want to add a favorite when you’re actually on a lesson, is that what you’re saying?

>> RAGHAVENDRA: If I read this slowly and slow this– Okay, if I do shift tab now. I’m doing tab now. If I press tab again. I think those two anchors are in the same place.

>> AMBER: What it is is I think you’d be able to add favorite for every individual one of these lessons, but I think this maybe is a worthwhile UX discussion, is would people actually add a favorite of a video they’ve never watched before? If the answer is no, then– [crosstalk]

>> RAGHAVENDRA: No, I’m thinking if I click this, it goes to that lesson. That is my understanding.

>> AMBER: There is also a favorites heart, although I don’t know if you can interact with it.

>> RAGHAVENDRA: Yes, but it should not be in the same anchor.

>> AMBER: Yes, it should be outside of the link to the lesson, is what you’re saying?

>> RAGHAVENDRA: Yes.

>> AMBER: I’m logged in. Should these be interactive right now, Chris and Kim?

>> RAGHAVENDRA: You mean the the buttons, the favorite buttons?

>> AMBER: Yes, the buttons to favorite them, yes.

>> RAGHAVENDRA: Yes, they can be interactive because what happens after I go through a few lessons, if all these lessons are coming below the end of the course or just before I’m finishing the course, I can favorite which are lessons I liked from there, just like going to the button using the shortcut key B and favorite those lessons or something and then close it.

>> AMBER: Yes, I– [crosstalk]

>> RAGHAVENDRA: Chris was saying something.

>> AMBER: Yes, go ahead, Chris.

>> CHRIS: I was just saying there’s two sides. There’s the I want to favorite this lesson above the video, and then on the right, if there was a lot of activity in this course, you could see which lessons were the most popular in case you wanted to jump to that one next, like, “Oh lesson 7 has 57 favorites, maybe I’ll go to that one next.”

>> AMBER: These are public, these are not just for the individual user?

>> CHRIS: Correct.

>> AMBER: Okay. I think– [crosstalk]

>> KIM: [inaudible] [crosstalk] work though to make them read as you’ve favorited this separate of count of total favorites, and that’s not in this because there’s nothing favorited in this outline yet, but just on my mind, it’s going to have to say like, “You favorited this lesson and so did 30 other people,” or however we want to read that out, and I don’t think that that’s broken up at all currently, so that’s just another note– [crosstalk]

>> RAGHAVENDRA: My understanding was when I do favorite of my lessons, I can see them somewhere, these are your favorites.

>> AMBER: That’s true. There’s a student dashboard that shows your favorited lesson list, yes. I think what you were hearing before, the video is an iframe, below that there’s a way where you can mark it complete once you’ve watched the video and then it will-

>> RAGHAVENDRA: I’m going there.

>> AMBER: – show you– track your progress. Do you want to mark that complete?

>> RAGHAVENDRA: Okay, did it, shift. Okay, it refreshed the page. Oh, it moved me to the next lesson.

>> AMBER: It did show, so this is the same thing, however you’re building those slide-ins, you want to have ARIA live. Now you have a progress bar, and I’m wondering if you want to see how that goes.

>> RAGHAVENDRA: This is the progress, 7.69 percent.

>> AMBER: That might be useful to have screen reader text course progress or something like that.

>> RAGHAVENDRA: Yes, so I would have preferred it over here. I think before this heading level one or somewhere, course progress, or after this heading, it will be easy, because this is the second lesson, and below this, the course progress colon 7.5 over here when you go back. Is this a button, by any chance? Add favorite for this– [crosstalk]

>> AMBER: That’s that’s what I was trying to ask before because at least me when I’m logged in with the admin user, I can’t actually use any of these buttons to favorite anything, and I don’t know if he’s– [crosstalk]

>> CHRIS: You might have to be enrolled in the course.

>> AMBER: Oh, okay. Maybe Ragha can.

>> RAGHAVENDRA: Okay, but they are not clickable. I’m not able to tap to that favorite button.

>> AMBER: I think it’s because it’s a div, so I would look at– yes, that should ideally– Oh, you just did it.

>> RAGHAVENDRA: Yes, but still it says zero. I forced it. I forced it with screen reader. Now it changed to one. It’s a div. It’s a div.

>> AMBER: Yes, so that ought to be a button, and I think a toggle button because it’s going to be favorited or not favorited.

>> RAGHAVENDRA: Yes, it is a toggle button, so you have to use here a button with ARIA pressed as a state.

>> AMBER: I will put a link to that as well. Before we–

>> RAGHAVENDRA: We have previous and next as headings.

>> AMBER: Yes, those probably don’t need to be headings, right?

>> RAGHAVENDRA: Yes.

>> AMBER: Does the course that you completed tell you that you’ve marked it complete in that sidebar after where you are where it has the list of all the courses or lessons?

>> RAGHAVENDRA: I’m going there. No, it did not.

>> AMBER: Yes, so visually, you’ve checked that off, but there needs to be some way to tell a screen reader user that it’s complete.

>> RAGHAVENDRA: Complete, yes.

>> AMBER: Which could just be screen reader texts that you add on after the name, like course welcome completed, something like that.

>> RAGHAVENDRA: I think already the course welcome is there or here.

>> SPEECH VIEWER: Heading level 3 Instructional Content. Visited link clickable. Add favorite for this– Visited link heading level 5 Course Welcome.

>> RAGHAVENDRA: I think [inaudible] course level completed, text is sufficient.

>> AMBER: Yes. Before we go to the back end, would it be helpful to have him look at any of the quizzes or is there anything else that you would want him to look at on the front end as a user?

>> CHRIS: One of the main things that’s pretty central is the Student Dashboard, their Account page.

>> AMBER: Can you tell us where he can find that–

>> SPEECH VIEWER: [crosstalk] navigation blog link. Courses [crosstalk]

>> CHRIS: It’s in [crosstalk]

>> AMBER: It’s in the Nav.

>> CHRIS: It’s the button in the Nav on the far right, it’s behind the tick notes button right now.

>> SPEECH VIEWER: [crosstalk] Community submenu button collapsed. Contact link. Dashboard link. Main landmark Commercial Real– Banner landmark–

>> CHRIS: Dashboard, I think.

>> SPEECH VIEWER: Main landmark– Clickable content info landmark. List with 5– Out of list link. Skip to content. Dashboard. Mainland landmark dashboard, heading level 1. Navigation landmark, list with 14 items. Visited link Dashboard. Link my profile. Link my courses. Link my grades.

>> RAGHAVENDRA: Okay.

>> SPEECH VIEWER: Link my memberships. Link my achievements. Link link my notes. Link my favorites. Link notifications. Link edit account. Link redeem a voucher. Link order history. Link sign out. Out of list, heading level 2 dashboard. Heading level 3, My Courses. List with one item. Visited link Graphic Commercial Real Estate Investing. 7.69%.

>> RAGHAVENDRA: Yes.

>> SPEECH VIEWER: Link real estate.

>> RAGHAVENDRA: It just says 7.69% course complete.

>> SPEECH VIEWER: Heading level 2 visited, link Commercial Real Estate Investing. Graphic, Arthur Wells. Arthur– Advanced. 13 lessons. Status Enrolled. Enrolled June 18th, 2024. Visited link Learn More. Visited link– Out of list. List with one item. Visited link, Commercial Real Estate Investing. Visited link Learn More. Visited link Commercial– out of list link view. All my courses, right arrow. Heading level 3, My Achievements. You do not have any achievements yet. Enroll in a course to get started.

>> RAGHAVENDRA: All these are in page links.

>> SPEECH VIEWER: Main landmark, navigation. My–, my courses, my grades, link. Dashboard. My Academy. Dashboard. My Academy busy. Banner landmark. Visited link My Academy. Navigation– Mainland mark dashboard [crosstalk]

>> AMBER: No, not necessarily.

>> SPEECH VIEWER: Link my profile. Link my courses.

>> AMBER: They go to other pages.

>> RAGHAVENDRA: Yes, they are in page links.

>> AMBER: I think it depends on which one you click on.

>> RAGHAVENDRA: Okay.

>> AMBER: I put a comment. That navigation menu, if you can just add an aria-label to it that names it, like User Dashboard, or something for the navigation, just to distinguish it.

>> SPEECH VIEWER: My Grades heading. Content info landmark. Main– Table with three rows and four columns. Dashboard heading level–

>> RAGHAVENDRA: Okay.

>> AMBER: Some of them do just go to sections on the page but some of them go to other pages [crosstalk]

>> RAGHAVENDRA: Yes, I see that. I see that.

>> AMBER: You’re on the grades right now. This has a table. Might be worth looking at.

>> SPEECH VIEWER: Table with three rows– row 2, link Commercial Real Estate– Row 3, course column 1 through 2. Progress column 3 through 4 clickable sort. combo box collapsed enrollment date most recent. Button update. Edge of table. Edge of table. Course column 1 through 2. Row 2 progress column 3, 7.69%. Row 1 progress. Row 2, 7.69%. Enrollment date column 2. June 18th, progress column 3, 7.69%. Row 3 progress column 3 through 4 clickable sort. Combo box collapsed– Course column 1 through 2. Progress column 3 through 4 clickable sort. Combo box collapsed. Enrollment date most recent. Button update.

>> RAGHAVENDRA: I did not understand what– What did it–

>> AMBER: Might be slightly more clear if you– It might be worth looking at this dashboard again. If you were to log out of this user and click the link that logs you in as the admin user that I sent you in Slack because this same page has a lot of courses on it if you log in as that user.

>> SPEECH VIEWER: Out-of-table content. Info landmark list with five–

>> AMBER: Do you want to grab that link?

>> RAGHAVENDRA: Yes.

>> SPEECH VIEWER: Skip to– Lorem ipsum–

>> RAGHAVENDRA: Where is Log Out?

>> AMBER: Oh, it’s Sign Out. It’s in the Nav.

>> SPEECH VIEWER: Skip– Sign Out 24– Dashboard.

>> AMBER: There you go.

>> SPEECH VIEWER: Academy modular Firefox. Link GitHub. Main landmark– [crosstalk]

>> AMBER: That’s an interesting thing.

>> SPEECH VIEWER: Sample content. Visited link. User login. In terms of– the experience. The experience, I have not looked at– I think that– Out of message– Clickable message HTTPS//equalizedigital.myliftersite–

>> AMBER: Yes, that one.

>> SPEECH VIEWER: Busy. About blank. Dashboard, My Academy WordPress busy. Main menu, navigation landmark. Link, skip to main content. Main landmark clickable.

>> AMBER: You’re logged in now.

>> SPEECH VIEWER: Clickable move up button unavailable, move [crosstalk]

>> AMBER: If you want to go back to the front end.

>> SPEECH VIEWER: Move down button, move LifterLMS quick links box down.

>> RAGHAVENDRA: Okay. I should go to now which page?

>> AMBER: If you go back to the front end of the website. Real quick, I want to ask you, would you think to look for Sign Out or would you always look for Log Out-

>> RAGHAVENDRA: Log Out.

>> AMBER: -when you’re searching to be able to log out.

>> RAGHAVENDRA: Log Out. Very rarely I look for Sign Out.

>> AMBER: It’s like a weird language thing.

>> RAGHAVENDRA: Yes. You look for Sign In and then Log Out. Rather than Sign Up, I look for Register.

>> AMBER: I think eventually he’d explore and figure it out.

>> SPEECH VIEWER: [crosstalk]

>> AMBER: A lot of times, you’re going to use your search to try and find things quickly.

>> SPEECH VIEWER: Collapsed. Dashboard. My Academy WordPress document busy. Button moved down. My Academy, expert, speaker, author, coach busy. Clickable toolbar navigation– Menu item collapsed about WordPress. Main landmark create generational wealth– Banner– Navigation– Vommunity submenu button collapsed– Groups– Memberships link.

>> AMBER: It’s the other direction.

>> SPEECH VIEWER: Dashboard. My Academy/ Expert, speaker, author– About WordPress, collapsed 1 of 5.

>> AMBER: Then you’re on the My Grades.

>> SPEECH VIEWER: [crosstalk] dashboard. Elements– My Profile– My courses 13 of 67. My grades– My– Dashboard. My Academy. Mozilla Firefox. Toolbar navigation landmark. Out of menu. Main landmark table with 12 rows and 4. Out of table, heading level 2, My Grades.

>> RAGHAVENDRA: Okay.

>> SPEECH VIEWER: Table with– Column 2, Enrollment Date. Column 1, Course. Column 2, Enrollment Date. Column 3, Progress. Column 4, Grade. Edge of table. Column 3, Progress. Column edge of table. Out of table– Table with 12 rows and 4 columns. Row to link young retirement. Enrollment date column 2, May 26th, 2023. Progress column 3, 0%. Grade, column 4, edge of table.

Row 3, progress column 3, 7.69%. Enrollment date column 2, May 26th, 2023. Course column 1, row 4 link– Enrollment date column 2, May 26th, progress column 3, 0%. Grade column 4, row 5, 33%, Progress column 3, 0%, [crosstalk]

>> AMBER: Ragha, how does this table sound to you?

>> RAGHAVENDRA: It is good but it doesn’t have row headers. It has column headers. When I do from here, let’s just say,–

>> SPEECH VIEWER: Progress grade column 4, 33%.

>> RAGHAVENDRA: If I press Alt Ctrl up arrow from here-

>> SPEECH VIEWER: Row 4–

>> RAGHAVENDRA: -it doesn’t read the course name.

>> SPEECH VIEWER: Row 3. Row 2. Row 1, Grade.

>> RAGHAVENDRA: It’s ideally supposed to read the course name-

>> SPEECH VIEWER: Row 2, 0%.

>> RAGHAVENDRA: -and then read this percentage.

>> SPEECH VIEWER: Row 3, 7.69%.

>> RAGHAVENDRA: If you [inaudible] for these datasets-

>> SPEECH VIEWER: Edge of table. Link, Commercial Real Estate– Edge of table. Row 4 link, Emergency Budget.

>> RAGHAVENDRA: -then it will read that.

>> AMBER: A TH tag with a scope of row for your first column. Then all the headers would be a TH tag with a scope of COL?

>> RAGHAVENDRA: Yes.

>> AMBER: It had what you were encountering before was there’s a sort of drop-down [crosstalk]

>> RAGHAVENDRA: Yes, I need to go–

>> SPEECH VIEWER: Row 8t link, Investing for– Row 9 link, Life– Row 10 link– Row 11 link– Enrollment date– Row– Edge of table. Out of list, progress column 3 through– Edge of table. Clickable sort. Combo box collapsed in– Course column 1 through 2, navigation landmark. List with three items. Current page 1 link, 2 link next.

>> RAGHAVENDRA: Why did that column–

>> SPEECH VIEWER: Row 11 course column 1, Money Preservation link. Enrollment date column 2, May 26th, 2023. Progress column 3, 0%. Grade column 4. Edge of table. Edge of table. Row 12 course column 1 through 2, navigation landmark. List with three items. Current page 1, link 2. Link next. Out of list progress, column 3 through 4 clickable sort. Combo box collapsed enrollment date. Most recent. Button update. Row 12, enrollment date oldest. Course title AZ. Course title ZA. Enrollment date most recent. Row 12 course column 1 through 2. Navigation landmark list with three items. Next link. Row 12 progress column 3 through 4. Sort. Combo box enrollment date. Most–

>> AMBER: Are you able to sort it by course title?

>> RAGHAVENDRA: I’ll do.

>> AMBER: Enrollment date. Course title AZ.

>> RAGHAVENDRA: Is it refreshing the page or is it dynamic?

>> AMBER: There is actually an Update button.

>> RAGHAVENDRA: Okay.

>> SPEECH VIEWER: Update button. Dashboard. My Academy busy. Toolbar navigation– Main landmark table with 12 rows and 4 columns. Row 12 progress column 3 through 4 sort. Combo box collapsed. Course title AZ.

>> AMBER: Did that work okay for you in that way/

>> RAGHAVENDRA: Yes, but why is the sort at the end? Why is it not something that I can choose about the table because until I go through the table, I don’t even know this option is there?

>> SPEECH VIEWER: Out of table– Main landmark table.

>> RAGHAVENDRA: The table also doesn’t say– The table captions should either say there’s a migrates table sorted from A to Z.

>> AMBER: You’d want to have a caption-

>> RAGHAVENDRA: Some hint.

>> AMBER: -which may or may not be visible indicating how it’s currently being sorted.

>> RAGHAVENDRA: Yes.

>> AMBER: Then when the page reloads after you sort, you would know that your sort worked.

>> RAGHAVENDRA: Yes.

>> AMBER: Okay.

>> SPEECH VIEWER: Row 12 progress column, 3 through–

>> KIM: [crosstalk] empty grade column, what value you would expect spoken in an empty column? It’s not speaking anything, I don’t think but obviously–

>> RAGHAVENDRA: Yes, we understand it is an empty data set.

>> KIM: That’s okay. Okay, [inaudible] [crosstalk]

>> AMBER: Sometimes we put screen reader text in ours and we’ll either say “not applicable” “not provided” “not available” depending on the context of the table. You could say “no grade” or something. I think it’s not technically a failure to have it be empty.

>> RAGHAVENDRA: No, because if you see the previous progress it is 0%. By looking at the previous data set, I already know that there will be no data in this one.

>> AMBER: I mean there are some where there’s a percentage of progress but there’s no grade yet. Anything else specifically about the dashboard you want us to look at?

>> RAGHAVENDRA: Yes.

>> SPEECH VIEWER: Course column 1 through 2, navigation landmark. List with three items. Next link.

>> RAGHAVENDRA: I’m clicking on Next. What happens?

>> AMBER: It’s like a pagination link for your table, I thought it sounded okay.

>> RAGHAVENDRA: This should say “page” I think.

>> AMBER: Like, “Go to page 2”?

>> SPEECH VIEWER: [crosstalk]

>> RAGHAVENDRA: Yes.

>> SPEECH VIEWER: Row 12, course. Column 1 through 2. Navigation landmark list with three items to link. Next link.

>> RAGHAVENDRA: I think they should say “next grades” or “next–“

>> AMBER: Next courses or grades, yes.

>> RAGHAVENDRA: I think “next course grades” or something. What were you going to say, Chris?

>> CHRIS: I was just going to say, I don’t know how much time we have but it would be really cool to see taking one quiz question on the front end if possible. That’s not on the dashboard but when we’re when we’re done here that might be cool to see.

>> AMBER: Yes. What course would be good to go to for a quiz?

>> CHRIS: They all have one.

>> AMBER: Do they all have quizzes? They all have one.

>> RAGHAVENDRA: Yes.

>> AMBER: Do you want to pick any course and go to it, Ragha?

>> RAGHAVENDRA: Yes.

>> SPEECH VIEWER: [crosstalk]

>> CHRIS: It will be a lesson named, Lesson With a Quiz.

>> SPEECH VIEWER: Technology link. Technology. My– List with Crypro apps, visited link. Learn more. Money apps. Graphic– Learn more. Toolbar navigation– Course welcome heading, level 5 link. Instructional content. Lesson with quiz heading. Level 5 link. [crosstalk] landmark. Menu.

>> AMBER: This one is 100% complete. Will that mean that the quiz is too?

>> SPEECH VIEWER: Main landmark lesson with quiz heading. Crypto apps–

>> KIM: You’ll be able to retake it.

>> SPEECH VIEWER: Quiz lesson, frame clickable. Play button. Progress bar– clickable– Volume– Transcript, Settings menu button– Full screen. Take quiz link.

>> RAGHAVENDRA: Take quiz.

>> SPEECH VIEWER: Visited. Lesson with Quiz Quiz. My Academy busy. Clickable toolbar navigation landmark menu– Main landmark lesson with Quiz Quiz heading level 1. Return to lesson visited link. Combo box select and attempt collapsed. Attempt number 2 to 100% pass. Lesson with–

>> RAGHAVENDRA: Oh, it auto-submits?

>> AMBER: Well, I think this one was already taken so you’re getting a slightly different experience because it’s showing you what you got previously. You might want to go to a different course.

>> RAGHAVENDRA: Okay.

>> SPEECH VIEWER: Clickable– Banner landmark navigation. Navigation– Expand– Llist with six items. Technology budgeting link. Budgeting, My Academy, [crosstalk] link heading.

>> CHRIS: Any one with 0%.

>> AMBER: Yes, that one would be fine I think.

>> SPEECH VIEWER: Clickable– Course welcome heading– level– instructional content heading level– lesson with quiz heading– Lesson with quiz. My Academy busy. Toolbar– Main –Course welcome heading– Next– Complementary– Take quiz– Take quiz link. Lesson with toolbar navigation landmark. Main landmark lesson with– Return to lesson visited link. Start Quiz button.

>> RAGHAVENDRA: Oh, okay.

>> SPEECH VIEWER: Complementary– Start Quiz button.

>> RAGHAVENDRA: Start Quiz.

>> AMBER: Okay so it loaded something which you can’t see. We want to make sure that it announces something.

>> RAGHAVENDRA: Yes.

>> AMBER: Something else that I noticed and feel free to weigh in–

>> SPEECH VIEWER: [crosstalk]

>> AMBER: Hold on, before you do that– The quizzes have a time limit.

>> RAGHAVENDRA: Oh, okay.

>> AMBER: There’s a countdown timer.

>> RAGHAVENDRA: I should be notified before I start even the quiz.

>> AMBER: That there’s a time limit?

>> RAGHAVENDRA: Yes. How many questions? What is the time limit? If it is a person with disability they need an accommodation [crosstalk] in.

>> AMBER: That may or may not be something that you would do but if you’re creating documentation for your course creators you would want to guide them on if they use this setting where there’s a time limit, that they should provide, in their accessibility statement or somewhere in their footer or their information for users, “If you need an accommodation that allows you more time, then here’s how you would request one,” or “how we can do that,” because there is actually a requirement that users have to have control over time limits if needed.

>> RAGHAVENDRA: Yes.

>> KIM: The previous screen before even beginning the quiz could say, This is a timed quiz. You will be given 30 minutes to complete. There are 12 questions.” That just benefits anyone who decides to click that button.

>> RAGHAVENDRA: Yes.

>> KIM: For sure.

>> AMBER: I don’t think that’s your plug-in, that’s education for people writing content for their quizzes. Do you want to try and take that?

>> SPEECH VIEWER: Link complementary landmark 3 of 10. Toolbar– Main landmark lesson with quiz– Next question button. Complementary landmark 1 of 1 course. Welcome heading level 5 clickable zero link. Next– List with three items clickable C, clickable B–

>> RAGHAVENDRA: Oh, these are radio buttons, they’re not operable. I can’t use– They don’t have a role, they’re [inaudible].

>> SPEECH VIEWER: Clickable A. Out of list heading level 3 which is the LifterLMS logo. 27 minutes and 38 seconds time remaining. Heading level 1 lesson with Quiz Quiz. Time– List with three items– Clickable B. Clickable C.

>> RAGHAVENDRA: There should be radio buttons.

>> KIM: It’s not saying anything.

>> RAGHAVENDRA: Yes.

>> KIM: Is that actually coded as a radio or it’s–

>> RAGHAVENDRA: No, it is there I think.

>> SPEECH VIEWER: Clickable B.

>> RAGHAVENDRA: Sometimes when you disable–

>> SPEECH VIEWER: View sub-menu– Toolbars– Sidebars– Zoom– Page style– Page style menu. Basic page style– No style– Menu. Main landmark complete. No next radio button.

>> RAGHAVENDRA: No, it does not there.

>> SPEECH VIEWER: View– Zoom– Page style– Page style menu. Basic page checked. Lesson with Quiz Quiz. Button, Next Question list with three items. Clickable C.

>> AMBER: I would recommend– Also I clicked on a different one and I found one where it’s an example of where it’s asking people to put things in the right order so it’s a drag and drop, that definitely is going to have issues for screen reader or keyboard-only users, sighted ones as well.

It might be worth going through your quizzes and making sure that they all function with the keyboard and that you can tab to them, use arrow keys to go between options and radios or checkboxes and be able to engage with all of them without a mouse. Then things that are draggable would have buttons with arrows up and down so that they could move it– If you can like in Gutenberg in the block editor, you can click the arrow and it will move it, you don’t have to drag it, thinking about that.

>> RAGHAVENDRA: With keyboard you have more up, more down. Screen reader speaks it out.

>> AMBER: I think probably this needs a little bit more investigation I don’t know if we have enough time to go through all of your quiz options. That’s what I would say at first glance.

>> CHRIS: Thank you.

>> AMBER: Do you want to go to the back end and check out building something?

>> SPEECH VIEWER: Navigation [crosstalk] Quiz– Blank. Admin/selected– collapsed. Lesson– 6:57 AM.

>> AMBER: We have about 15 minutes left with our captioner-

>> SPEECH VIEWER: Lesson with Quiz Quiz. [crosstalk] button [crosstalk]

>> AMBER: -is it most useful to get information on the courses and lessons or where do you think would be most helpful for you all right now?

>> CHRIS: In the back end, you’re asking?

>> AMBER: Yes.

>> CHRIS: The fundamental thing is to create a course so I’d probably start there.

>> AMBER: Okay. You can go to courses and Add Course.

>> SPEECH VIEWER: Clickable move up. Move down button, move Lifter– Skip to– Categories– Tags 11– Comments– Courses– Add course 38 of– Dashboard, My Academy WordPress Mozilla Firefox. Dashboard, My Academy WordPress document busy. Button moved down. Main menu navigation– Out of– No next edit field. Link, skip to main content. No next edit– Main landmark clickable dashboard. Heading level– Clickable heading. Clickable level 2 LifterLMS quick links. Main– heading level 1, Add New Course. Heading level 1, Add New Course. Heading level 1, Add New Course. Heading level 1, Add New Course.

>> RAGHAVENDRA: That page did not load?

>> SPEECH VIEWER: Heading level 1, add new– main landmark.

>> AMBER: There we go.

>> SPEECH VIEWER: Add title. Edit focused multi-line– Caps lock on– Caps lock– O-V-I-E-R-V-I-E-W, “Ovierview”– blank. O-V-E-R-V-I-E-W, “Overview” spelling error, W-C-A-G– Empty block. Start writing or type forward slash to choose a block document editable type/to choose a block. [inaudible]

>> RAGHAVENDRA: I think we need to go to the settings side.

>> AMBER: Yes, let’s let’s pause for a minute. I don’t know– Where you are right now is Gutenberg. A lot of that is not them. I don’t know if it makes sense to go through the Gutenberg [crosstalk] the course.

>> RAGHAVENDRA: No, no. I’ll go to the course.

>> SPEECH VIEWER: [crosstalk]

>> AMBER: There’s a meta box.

>> SPEECH VIEWER: Pressed expanded. Pressed expanded.

>> RAGHAVENDRA: This is the LifterLMS.

>> AMBER: You’re in the right place, it’s just there’s a meta box below where you would type course information called Course Options–

>> SPEECH VIEWER: [crosstalk]

>> AMBER: It’d be good to look there because that’s going to be coming from the plugin.

>> RAGHAVENDRA: Okay.

>> SPEECH VIEWER: Block. Paragraph document. Clickable edit. Multi-line clickable course information.

>> RAGHAVENDRA: Yes, I see the course information.

>> SPEECH VIEWER: Editor content [inaudible]–

>> AMBER: No, you’re still in Gutenberg.

>> SPEECH VIEWER: [crosstalk] course information. This is a sample. Out of edit clickable heading level 3 course instructor. Clickable edit multi-line clickable. This is a sample course. Spelling error “information–” Out of edit block. Paragraph document editable. This is a sample course. Out of document, clickable. Edit multi-line clickable. This is a sample course. Spelling error “informationcourse information”–

>> RAGHAVENDRA: How come I’m–

>> AMBER: There’s an H2 called Course Options. This is why the block editor can be really difficult for [inaudible] users, that’s not you all, or [inaudible] then it’s just the block editor.

>> SPEECH VIEWER: No Next Edit field. Block. Paragraph– Clickable edit multi-line clickable. This is a– Out of edit clickable heading level 3 course instructor. Graphic Arthur Wells. Arthur– an expert in his– Clickable no access plans found. Clickable 50%. Clickable button continue.

>> RAGHAVENDRA: I entered data in the meta box, is it not visible?

>> CHRIS: Still further down, I think.

>> AMBER: Yes, it’s further down beyond where you are.

>> SPEECH VIEWER: [crosstalk] out of region editor footer. Region block breadcrumb course button. Editor publish region. Open publish panel button collapsed. Editor content region clickable. Edit multi-line clickable. This is a sample course. Spelling error “informationcourse information” out of edit block. Paragraph document editable. This is a clickable course instructor heading level 3.

>> RAGHAVENDRA: I see course instructor.

>> SPEECH VIEWER: Clickable course options. Heading clickable level 2–

>> RAGHAVENDRA: Course options.

>> SPEECH VIEWER: [crosstalk] level 2.

>> AMBER: There you go, Course Options.

>> SPEECH VIEWER: Button expanded– panel. Course Options. Navigation landmark list with seven items. Clickable sales page. Clickable general.

>> RAGHAVENDRA: Yeah, but they’re not coming. All those are clickable not tickbox or radio buttons.

>> SPEECH VIEWER: Clickable restrictions, clickable [crosstalk]

>> AMBER: Actually, what they visually are, are tabs.

>> RAGHAVENDRA: Oh, okay.

>> AMBER: They’re coded like a list. Those need to have–

>> RAGHAVENDRA: Tabs.

>> KIM: [inaudible]

>> AMBER: Basically tab schematics. I’ll get a link for that.

>> SPEECH VIEWER: Clickable ninja forms [crosstalk] out of list with one item clickable.

>> AMBER: They’re not interactive right now. You wouldn’t be able to go to those [crosstalk] tabs. You might be able to force it but–

>> SPEECH VIEWER: Sales Page content. Customize the content [crosstalk] students who are– Combo box collapsed. Clickable display default course content. Display default course content. Display default course content combo box. Display default course content. Display default course content, focused collapsed. Out of list heading clickable, level 2 access plans. Button expanded, toggle panel. Access plans. Clickable access plans. Define the payment option. No access plans exist for your course.

Button, add new button– Clickable heading. Clickable, level– Button, add new button. Unavailable. Save. Clickable heading clickable, level 2 student management. Bbutton expanded, toggle panel, Student Management–

>> AMBER: Are you able to, for example, there’s a list item called Restrictions,-

>> RAGHAVENDRA: I can go there, yes.

>> SPEECH VIEWER: [crosstalk]

>> AMBER: Yes, see if you can go there and force a trigger on it.

>> SPEECH VIEWER: No access– Clickable sales page. Out of list, clickable ninja– Clickable reviews. Clickable restrictions–

>> AMBER: Are you able to force it?

>> SPEECH VIEWER: Clickable add title, edit multi-line clickable. Spelling error, double– Out of– Editor content. Access plans heading clickable level– Button expanded– Clickable access plans. Define the payment– No access button. Add new button. Unavailable. Save.

>> RAGHAVENDRA: No, I can’t.

>> SPEECH VIEWER: Clickable heading clickable. Level 2 student management. Course options heading– Button expanded– Clickable general. Clickable restrictions.

>> AMBER: Okay.

>> RAGHAVENDRA: I tried.

>> AMBER: You have. It didn’t tell you but you did trigger. Ragha is very advanced screen reader user, most users would be done, they wouldn’t know how to even force it to do that. What it did was if there are more options available now which you may be able to get to if we wanted to just look at some of the fields. There’s an input, for example, for Content Restricted Message down below.

>> SPEECH VIEWER: List with six items, Content Restricted Message. Edit has– Without enrolling– This message will be displayed when non-enrolled visitors attempt to access Content Restricted Message. Edit has auto complete. You must enroll in this course to access course content.

>> RAGHAVENDRA: Okay.

>> SPEECH VIEWER: Clickable, Enable Enrollment Period. Set registration start and end dates for this course. Clickable– Clickable, enable course time period. Set start and end date, selected range.

>> AMBER: Can you explain for just a second,-

>> RAGHAVENDRA: No, I’m not able to access–

>> AMBER: -when you hear “clickable” what that means and what we actually want to hear?

>> SPEECH VIEWER: Set start and end dates for this course. Clickable, enable course time period.

>> RAGHAVENDRA: I think that is a checkbox, you enable it and it enables you to choose a start and end date, when this course will start, and when this course will end. If I click–

>> SPEECH VIEWER: [crosstalk]

>> RAGHAVENDRA: Now I have enabled it if I’m not wrong.

>> SPEECH VIEWER: St start and end dates for this course.

>> AMBER: Yes.

>> SPEECH VIEWER: Selected range clickable.

>> RAGHAVENDRA: This is supposed to be a date picker. This is not accessible.

>> SPEECH VIEWER: Clickable course start date. Clickable. Clickable course start. Edit has auto complete. Clickable course, clickable. Selected range, clickable.

>> RAGHAVENDRA: What is selected range? This is confusing. Why there is a selector–

>> SPEECH VIEWER: Clickable edit has auto complete. Clickable course end date. Edit has auto complete. Clickable course opens message. This message will be displayed [crosstalk] course info ID equals–

>> AMBER: What I think for the toggles, is it would be the same thing we talked about. It would be a button. It could be a checkbox like you said, or it could be a button with aria pressed that would indicate if it’s been toggled on or not so it would go between true and false on aria press. Then and then the the date picker is pretty challenging. If you can, it would be good to have that be more of an input. Do you have a good example, Ragha, of a–

>> RAGHAVENDRA: Date picker?

>> AMBER: -date field that you can type in or use a date picker?

>> RAGHAVENDRA: Yes. There’s one on whatsock.com

>> KIM: On what website?

>> SPEECH VIEWER: [crosstalk]

>> KIM: [crosstalk] date picker [crosstalk] or not really?

>> SPEECH VIEWER: [crosstalk]

>> RAGHAVENDRA: I have one.

>> SPEECH VIEWER: Accessible date clickers roundup–

>> RAGHAVENDRA: Either use input type date00

>> SPEECH VIEWER: Related articles– Aria link. Accessible calendar widgets link. Sure enough my friend Dennis– List with 14 items. Aria date picker link. To link accessible date picker by Adina Halter, aria date picker link.

>> RAGHAVENDRA: I think this one.

>> AMBER: Yes. I’ll see if I can grab that link to your [crosstalk]

>> SPEECH VIEWER: Aria date pickers. Apex 4x–

>> RAGHAVENDRA: This one is very good.

>> SPEECH VIEWER: Navigation toolbar–

>> AMBER: Could you throw that in a chat if you’re able?

>> RAGHAVENDRA: Yes.

>> SPEECH VIEWER: [crosstalk] notifications. No new– NVDA, zoom to zoom. Screen sharing meeting controls. Screen sharing meeting– Webinar chat window. Input chat text type message here. Edit blank. You got it?

>> AMBER: Yes, it went. Thank you. Date pickers are challenging.

>> SPEECH VIEWER: [crosstalk]

>> AMBER: I think it would be good to make it more clear maybe that you can also just type a date in that field and then people could use the date picker or they could just type the date.

>> RAGHAVENDRA: I think input type date is [inaudible] more, the HTML date, it’s now supported in Mac also.

>> AMBER: What is really good is all of your fields are labeled. Sometimes we do this and none of the fields have any names at all. That’s been really good. I think I would look at the button. If I’m thinking broadly, an overall pattern, I know you’re already working on the heading levels and you’re aware of that, but I would definitely look at your buttons and make sure that everything is a button and that um if it’s a toggle button then it’s labeled that way. Then those tabs would be really helpful. I suspect there might be other tabs. I haven’t looked at your Settings pages but if you have custom settings pages that don’t just use WordPress styles, you might have the same issues on those, I suspect.

We kind of need to wrap up. I hope this was helpful.

>> KIM: Particularly helpful.

>> AMBER: Do you have any final questions for Ragha or anything that we can answer for you?

>> CHRIS: Well, first, I just want to say thank you, Ragha, that was a great tour. I learned a ton watching you navigate that, so thank you.

>> RAGHAVENDRA: Thank you.

>> CHRIS: I guess my main question is creating a learning management system is more complex than writing a blog post, so as with a complex platform, how do we think about that? Are there just so many settings, so many options, so many builders– I guess we just have to find all those things, like what’s the rule for buttons. I guess have you guys done stuff with WooCommerce? You probably have. That’s a complex tool. What can we learn from what you’ve done with helping complex platforms improve?

>> AMBER: I think it is hard when you have a lot. We even saw building your course, there’s the whole creating everything and using the block editor to shape it and then there’s a lot of different fields that people have to fill in. I think sometimes having almost– Maybe if this was the first time setting it up, do you have a wizard that walks people through creating their first course the very first time? That might be helpful if you don’t have one of those.

>> CHRIS: There’s a course builder we didn’t look at that kind of helps you build the syllabus and stuff.

>> AMBER: Where you connect lessons to the courses?

>> CHRIS: That can add videos to them and stuff like that but it’s a complex wizard in its own.

>> AMBER: Yes. Do you have any thoughts, Ragha, for screen reader users, easier to do really complex things like building courses or products?

>> RAGHAVENDRA: One of the LMS plugins that I am using is Sensei. The only reason– Creating courses is where you use Gutenberg it becomes easy, but here, I see only the same pattern, the radio buttons, checkboxes, and button patterns. I think it’s more of creating the design system for your LMS. Just because yesterday when I looked first time at the LifterLMS, the front end and the features that you have got me thinking maybe I need to move some of my courses there.

>> CHRIS: Oh, right.

>> RAGHAVENDRA: You have to stitch so many things when you’re using another plugin. I have everything here. I think it’s just you need to fix only a few things for someone like me to just move most of the work there and import/export because it’s only a few things. As I said with the radio buttons, all forms are very good so you need error messages there, in your quiz, if you use checkboxes or radio buttons. Most of these patterns are already out there.

>> AMBER: I know I’ve looked before and you have like a course that’s basically how to build where people can go through that to learn how to use Lifter. One thing I would look at on that if you’re trying to figure out how can you make it easier for people with disabilities, I would look at that course, and maybe you’ve done this already, but if not, you might consider making sure when you’re doing videos and you’re talking about how to use Lifter, that you’re verbally describing. Instead of being like, “Go go here and click Add New,” you’d say, “Go to courses page and click Add Course,” or, “Below the field, you need to go through every tab in the course options meta box,” being really specific. I think having the documentation is a really good way to onboard users with disabilities to a complex plugin because they may be more reliant on the documentation than perhaps a user who’s sighted and can just muddle around for a while until they learn the plugin, if that makes sense.

>> RAGHAVENDRA: I agree. When I do something, what we do is I read the documentation once and then I have a virtual assistant. My virtual assistant, when she doesn’t find something, she goes and finds it from the documentation, she does the things for me. It becomes easy because we keep always documentation ready, more than videos, I prefer text because it’s easy to read. The screen reader, much faster text documentation or jump using search, Ctrl F to the area that we need exactly.

>> AMBER: Yes, so making sure you have transcripts for all your videos if you have them, those kinds of things.

>> CHRIS: Super helpful. Thank you.

>> KIM: I think course creation is hard to understand when you onboard to a new plugin or platform. This gets me thinking about a way to help both people with and who aren’t using accommodations fast create a course, what does that look like? Is that just typing the outline in the text area with dashes or what does that look like, to get your content laid out there? Even, Ragha, that page you were in, it had pre-filled content but that’s not obvious when you say Add New Course. Our expectation as WordPress users are Add New Page, it’s an empty page. Add New Post, it’s an empty page.

>> AMBER: It’s blank.

>> KIM: We put stuff there that we think you’d be remiss if you forgot to put an access plan on your course content. Is there a way that we can tell people that there’s pre-filled content or have some kind of interface that’s add new course with pre-filled content, add new empty course page, or something like that because I think that was tripping you up. You were like, “Who’s course outline? Who’s Arthur Wells?”

>> RAGHAVENDRA: There are multiple authors. You’ll give it a drop-down combo works, choose one author from it, like how you choose it from the post, there are multiple authors on the blog. Those are very intuitive for us, someone who’s been in the blogging space. We expect familiarity, even if it is a course LMS like this, because you choose one of the course instructor as a drop-down. Okay, choose one course instructor. Then you have the sales page.

In my view, the sales content is nothing but the content that I put on the page but I think there might be some call-to-action buttons that are specific to LifterLMS here. What are those exactly? Those are–

>> AMBER: I think pre-filling content like you did can be useful. I know that was a big thing with the NASA website is they have a lot of templates that you can click off the dashboard and it will create an outline of a blog post and then they just have to go edit the content instead of blank.

>> RAGHAVENDRA: Yes.

>> AMBER: I think what might be helpful on that main courses archive is instead of just Add Course that does that, maybe there’s start blank or start from a template, like two different buttons, they’d technically be links I guess that go to that new page and either fill it in or don’t. That might give then people the expectation of there’s going to be things filled in that I can then just edit without– That might be a way to communicate that.

The other way is the browser dialogues like you mentioned at one point, just use a browser dialogue, those can be really helpful, and those work very well with assistive technology. It could open the Add New and there could be a dialog that’s like, “We’ve pre-filled some content-” Maybe it’s only on the first time they do it or something, I don’t know- “-to make this easier for you. If you don’t want this, you can Select All and delete,” or something like that.

>> KIM: Nice. I like that.

>> AMBER: We need to wrap up but thank you, everybody, who tuned in and stayed till the end because I know we went a little bit long tonight. Kim and Chris, feel free to reach out to us if you have any follow-up questions. I’m in [inaudible], Ragha. Are you in [inaudible]? I don’t remember.

>> RAGHAVENDRA: No, [inaudible] [crosstalk].

>> AMBER: What’s the best way for people to get a hold of you if they want to follow up with you?

>> RAGHAVENDRA: My email address or LinkedIn is much easier, faster.

>> KIM: LinkedIn.

>> AMBER: Raghavendra Satish Peri on LinkedIn.

>> RAGHAVENDRA: Yes. I’ll put my email address in the chat.

>> AMBER: Okay. All right. If anyone wants to check out Lifter or see it it’s just LifterLMS.com.

>> CHRIS: We have a free plug-in. Also, the demo site that we were using today, we host those, you can actually buy one for $1 for 30 days if you just want to play around with an existing site just like Ragha was doing today. We have those set up for test drives.

>> AMBER: That’s great. Well, thank you.

>> SPEECH VIEWER: Thanks, y’all, really appreciate it.

>> AMBER: Have a good evening, everyone.

>> KIM: Thank you, Ragha. Thank you, Amber.

>> RAGHAVENDRA: I’ve put my email address in the chat.

>> KIM: Perfect.

>> AMBER: Got it. Yes, it’s there. All right. Thanks, everyone.

>> RAGHAVENDRA: Thanks, everyone. Bye.

>> CHRIS: Thank you.

>> AMBER: Bye.