Thanks to Our Sponsor
Watch the Recording
If you missed the meetup or would like a recap, watch the video below or read the transcript. If you have questions about what was covered in this meetup please tweet us @EqualizeDigital on Twitter or join our Facebook group for WordPress Accessibility.
Read the Transcript
>> AMBER HINDS: Yes. We’re at 7:05. I’m going to officially get started with a little bit of announcements so we can dive in. Feel free to continue introducing yourself if you would like to in the chat while we go through some announcements. We have a Facebook group, if you haven’t been before you can join our Facebook group. If you just search WordPress Accessibility on Facebook, you’ll find the group. It’s a good way to connect with people in between meetups and different events, get questions, share ideas, or show us things you’re working on and get feedback from it.
It’s a great supportive group. Everyone always asks, “Are the meetups recorded?” Yes, they are recorded. The recording will be available. It takes us about two weeks at this point, I want to say, because the holidays, to have the recording edited and have a full transcript with corrected captions, but once we have that available, then we will post that up. The best way to get recordings is to either go to equalizedigital.com/meet up, or you can join our email list. You can either get to it by going to equalizedigital.com/focus-state. Or hopefully if we did things right, after you’ve been zoom, there’ll be a thank you window in your browser and you can join the email list there.
We send about two emails a month that basically have a recap of the past events, and information about upcoming events and how to RSVP for them. Definitely join the email list that is a great way to stay on top of things and know when the recording is available. We are seeking additional sponsors for the meetup. We rely on sponsors to help us cover the cost of live captioning so that this can be accessible for everyone. If your company would be interested in sponsoring meetup, please reach out to us there’s also information on that same meetup page on our website that you can get.
We don’t make any money off the meetup. It’s just to cover the cost, because WordPress Foundation unfortunately doesn’t have the budget for live captionings for all meetups so they’ve told us that we need to go out and find our own sponsors. That’s what we try and do. If you have any suggestions for the meetups, if you’re interested in speaking, we are booking speakers for spring ish right now and you’d be interested, please reach out to us. Our email address is meetup@equalizedigital.com that goes to myself and [inaudible] and we’d love to hear from you about your ideas for the meetup or things you want to learn about or things you want to speak about and have you join in.
Oh, look, we have an old slide that we failed to update. We no longer have Black Friday discount going on. That is over, sorry, but my company is Equalize Digital. We’re a certified B Corporation, a WordPress VIP agency partner, and we run the meetup mostly because we really wanted to be able to learn from other people. I didn’t have many accessibility people, especially accessibility and WordPress people are in my neck of the woods and so starting the meetup was a great way to learn. We also have a plugin called Accessibility Checker that provides reports in the admin dashboard on some accessibility problems.
There’s a free version of it on WordPress.org. As we’ll talk about today, it’s not a substitute for doing actual testing with the human being, but it can help you to find some problems and speed things along. We have a sponsor tonight who is donating their services after the fact to do transcription and make sure that we have accurate captions on our recording, and that is Empower Caption Solutions. They are a phenomenal company who has donated their services to us for this entire year, which we very much appreciate, because we were doing all those manual caption corrections our self, and let me tell you, when you’re not a fast-typer- which I am not- it takes a long time.
We very much appreciate that they do that. They also were the vendor that we used for WordPress Accessibility, a conference for sign language interpretation and they do audio description. They do a ton of different things around accessible video and audio. We definitely recommend checking them out if you have need of any of those services. We have a couple of upcoming events that I want to share with you. Our next meetup will be on Thursday, January 5th, at 10:00 AM Central time in the United States, and that meetup will be How to Counter Arguments from Developers and Designers.
That should be a great meetup to attend if you are frequently getting pushed back, or you’re trying to figure out how can I motivate designers or developers on my team, or at my company, or with other vendors that I work with to focus more on accessibility. Then on Monday, January 16th, Joel Snyder will be speaking in this same time slot, the 7:00 PM Central time in the US timeslot about Audio Description, which is basically how you can describe visuals in videos to someone who can’t see them, so that they’ll know what’s happening and not miss out when there are visuals.
That will be coming up then. Then in February, Steve Jones will be talking about the Anatomy of an Accessible Navigation Menu. Today, we have a couple of people joining me. We try and do these once a quarter so you may be familiar with Alex. I’m adding a spotlight to Alex’s video so he’s visible to you all now. Alex Stine, if you’re not familiar, is an accessibility consultant. He’s an engineer at Waystar, which is not a WordPress company. It’s in the healthcare industry, but he is a WordPress and Gutenberg contributor.
He’s on the accessibility team for WordPress, and is incredibly knowledgeable, and has volunteered his time to help people in the WordPress community learn more about accessibility and make their websites or their plugins, because sometimes we do these reviews on plugins more accessible. Of course, you have me, which I’ve already introduced myself. I’m Amber and I’m the CEO of Equalize Digital. Then what I’d like to do real quick before we dive in is I’m going to pop Michelle up here, and let Michelle tell you a little bit about Underrepresented in Tech, which is the website that we’re going to be doing an audit of today.
>> MICHELLE FRECHETTE: Hi, thanks for having us today. I partnered with my partner, Allie Nimmons, who couldn’t be here this evening. She and I started underrepresentedintech.com, because people were constantly reaching out to us asking us if we knew somebody in an underrepresented group who could speak at an event or they were looking to hire somebody and they really wanted to work on the inclusion and diversity within their project. Well, we didn’t feel like it was alright. She just started naming people and sending them, without other people’s buy in or opting in.
We created underrepresentedintech.com, which is a database that you can enter if you are an underrepresented person, or you can search- anybody can search the database- and you can enter in key factors, like you’re looking for somebody who wants to be on a podcast, and is an SEO expert in WordPress. That will return people who might be willing to work with you on whatever your project is. The whole goal was to make underrepresented people more easy to find, and to increase the inclusion on the diversity and the projects and events that happen in WordPress, and in tech, but in WordPress, specifically, because that’s our niche.
We also have a podcast associated with Underrepresented in Tech. Just about every week, we miss a week here and there, but just about every week, Allie and I get together for a 20 to 30-minute conversation about things that are happening in representation and technology. We just shoot the breeze about it and share that with the world to see afterwards.
>> AMBER: Yes. Well, thank you for being here, Michelle, and for your interest in having us give you some feedback on the website, because I think it’s really great what you all are working on. I do want to give two guidelines and then I’ll stop sharing and I’ll let Alex take over sharing his screen. This came up more when we were doing meetings, where people could just turn off their microphone and join in. It doesn’t happen quite as much now that we’re in webinars, but I do like to say that it’s important that we’re giving voice to assistive technology users. That’s part of why we run this meetup.
As much as possible, we want to hear from Alex and his thoughts about how things can be improved or what might be different. Obviously, I’ll also maybe sometimes chime in with thoughts, but we’re really focusing on the assistive technology side. There might be things that won’t thoroughly come up, like color contrast might not be mentioned in this particular call. If you have thoughts, feel free to put them in the chat. Michelle will have access to the chat so you can do that.
We do have the Q&A section, if you have a specific question or you want Alex to clarify something, of course, Michelle can chime in at any time, but if someone in our audience wants more information about why he’s recommending something, I’ll watch the Q&A and I can pass those questions to him. I may pass them closer to the end though, just because I don’t want to interrupt his flow as much as possible. Then the other one is really important. No bashing. The point of this is not to say that the Underrepresented in Tech website is horrible, because it’s not and there’s plenty of things on it that are good.
I just hope everyone recognizes that it takes a lot of bravery to be willing to let people do a live audit of your website or your software when we plug in developers. We always want to celebrate the fact that people are interested in making their work more accessible and that they are willing to take feedback. I think that’s wonderful and amazing and we have to applaud Michelle and Allie for being willing to do that. On that note, I’m gonna stop sharing. I’m going to let Alex take over sharing, and then we can dive in.
>> ALEX STINE: Okay. Let me get the screen share started.
[screen reader dictation]
>> ALEX: I already have pulled the website up.
[screen reader dictation]
>> AMBER: Alex.
[screen reader dictation]
>> AMBER: Your browser window is very tiny.
>> ALEX: Oh, yes.
>> AMBER: Can you make it full-screen?
>> ALEX: Are we getting better or not?
>> AMBER: It does not look like it’s resizing to me.
[screen reader dictation]
>> AMBER: Do you want me to request remote access for a second, make it bigger?
>> ALEX: Yes, you can do that.
>> AMBER: Okay.
>> MICHELLE: Amy’s asking if you can use Underrepresented in Tech to find [inaudible]
[screen reader dictation]
>> AMBER: Hold on. Let me–
[screen reader dictation]
>> AMBER: There we go. Let me stop–
>> ALEX: Well, this is entertaining.
>> AMBER: Okay. It’s big now. I’m going to stop my remote control and let you take back over. [chuckles] Sorry, Michelle, you were–
>> MICHELLE: Yes, I’m only able to comment to host and panelists in the chat, but I just wanted to answer Amy’s question. The Underrepresented in Tech, if people are searching for people, it can help you find a job, but we’re not a job matching and we don’t post jobs there.
>> AMBER: Great. I think the first question I’m wondering for you, Alex, was-
[screen reader dictation]
>> AMBER: -if you come to this website and you wanted to join this database and put yourself in there, are you able to do that?
>> ALEX: Yes, I think that’s actually possible. Unlike some reviews that I generally get to do, this website is actually fairly usable. This will be a session based on how to improve versus nothing works and now we need to make something work.
>> MICHELLE: Phew.
>> AMBER: [chuckles]
>> ALEX: We’ll go ahead and start navigating down the page
[screen reader dictation]
>> ALEX: That sounds like a promising start.
[screen reader dictation]
>> ALEX: This is great, because we have a heading level one, and that signifies generally where the page content starts. It saves time when you’re able to jump the headings.
[screen reader dictation]
>> ALEX: One little comment. This heading three feels slightly misplaced. This could very easily be a heading level two. The rule about headings is that if you’re going to use headings, they need to be in the proper order, because they signify importance. Heading one to heading level three, not really something that’s would be considered a good pattern, because the next logical conclusion would be heading level two for the form or maybe even a heading level one.
>> AMBER: Is this a Gravity Form by any chance?
>> MICHELLE: It is.
>> AMBER: That awesome thing about Gravity Forms is they’re a really good accessibility, but there’s a few things that are just built-in, which is you can’t change the heading level on the form. The secret about Gravity Forms is you should never turn on the form title and you should always just insert your own heading, because they will force it to be an H3.
>> MICHELLE: That’s really good information. I’ll be making that change later.
[laughter]
[screen reader dictation]
>> ALEX: Same deal with this level heading two. A heading after a heading is very rarely ever necessary.
>> MICHELLE: Well, the form is broken down into sections. You hit the first section and that was the title of that section.
>> ALEX: Then there was an argument that it would be a hard thing to communicate by just section by section to have headings like this in a form. These are probably, unless this form is several pages long, not totally necessary.
>> MICHELLE: Okay.
[screen reader dictation]
>> ALEX: That’s a nice labeled field.
[screen reader dictation]
>> ALEX: Another nice labeled field, and notice how it’s announcing required, so that’s good.
[screen reader dictation]
>> ALEX: That’s also announcing as a required field.
[screen reader dictation]
>> ALEX: It did not read this label.
>> MICHELLE: Yes, I saw that.
>> ALEX: That was probably somewhat important information to have.
>> MICHELLE: Absolutely.
>> AMBER: Yes. It read the description, but not the actual label.
>> MICHELLE: That’s odd.
>> ALEX: You could probably figure it out with your context clues here, but we never want to guess about these things.
>> MICHELLE: Right.
[screen reader dictation]
>> ALEX: All right. That label on description text is read.
[screen reader dictation]
>> ALEX: It doesn’t sound like this is required, so that shouldn’t be a blocker for people like me who decide to not keep screenshots of themselves.
>> MICHELLE: Yes.
[screen reader dictation]
>> ALEX: Okay, let’s continue.
[screen reader dictation]
>> ALEX: Okay. It doesn’t read that level either or label. That’s something to improve.
>> MICHELLE: Okay.
[screen reader dictation]
>> ALEX: It really doesn’t like reading those for some reason.
>> MICHELLE: It sure doesn’t.
>> AMBER: Alex, could this be a verbosity setting in NVDA? Do you have it turned down so it’s not being as verbose?
>> ALEX: I don’t. I do not have that adjusted at the moment.
>> AMBER: Well that one did actually read– You know what I think it does? Is I think it reads the first when you’re hitting tab, you’re going– Because it’s a field set, is the way this is coded. I think it goes to the first item and it reads the first item and then it reads the label after, because it’s a checkbox. At least that’s what I’m seeing when I look at the speech viewer.
[screen reader dictation]
>> AMBER: It only did it on the first item.
[screen reader dictation]
>> ALEX: Okay, that’s the previous list.
[screen reader dictation]
>> ALEX: That’s the next list.
>> MICHELLE: Yes.
>> ALEX: It just excludes it. That’s very weird.
>> AMBER: Yes. On something like this, this is what’s hard, because you didn’t build this form plugin, right?
>> MICHELLE: Right.
>> AMBER: [chuckles] That would be a support message probably to Gravity Forms, and say like, “Hey, we did a test and it wasn’t reading these out. Why?”
>> MICHELLE: Absolutely.
>> AMBER: Yes.
>> ALEX: We’ll keep moving forward.
[screen reader dictation]
>> ALEX: Okay. That’s interesting. Let’s see what happens with this.
[screen reader dictation]
>> ALEX: I’m not actually sure what that means.
>> MICHELLE: Which part? I’m sorry.
>> ALEX: About it opening a field up under links.
>> MICHELLE: Yes. It should be further down the page. I can’t see further down your page though to see if it actually did or not. It should toggle open. Basically, the idea here is there’s three ways for people to get in touch with you, and you can choose one, two, or three of them. Email a contact form on your website or via a social media. If you check your email, it should toggle open, have a place for you to put your email address. The same thing– Right. The form on your website, it would open up a place for you to put your website. Doesn’t sound like that’s working very well.
>> ALEX: Let’s see if we eventually find it.
[screen reader dictation]
>> ALEX: Okay. It’s there.
>> MICHELLE: It’s just further down.
>> ALEX: Let’s see.
[screen reader dictation]
>> ALEX: Check another one.
[screen reader dictation]
>> ALEX: I’ve always kind of gone back and forth on these, but if you enable an option above, some part of me wonders that these fields should receive some type of required attribute since you’ve now enabled the option for these respective fields.
>> MICHELLE: Oh, okay, like illogical. If I check this, then this should be required.
>> ALEX: Yes.
>> MICHELLE: I like that. I hadn’t thought about that, but I think it’s a great idea.
>> ALEX: One could make the argument, “Well, why would you need to make it required if you just did it?” Well, we have people in the world with memory issues and other things going on, and it’s just good to have the reminders.
>> MICHELLE: Absolutely. We have had one person forget to put anything in this area. They checked the box, but they forgot to put their email address in. People were finding them, but couldn’t contact them at all. Yes, that’s a very good idea.
[screen reader dictation]
>> ALEX: This is interesting. This is not a required checkbox.
>> MICHELLE: It’s the only checkbox though, but it should be required. I’ll have to go back and make that requirement.
>> AMBER: Is the–
[screen reader dictation]
>> ALEX: Oh, go ahead.
>> AMBER: Well, I was going to say I think it is, but I think it’s because you’re not hearing the-
>> MICHELLE: Oh, yes.
>> AMBER: -the label. You’re only hearing the description.
>> MICHELLE: Yes, I see it now. It is required. You’re right.
>> AMBER: Yes. Patrick commented in the chat that the form- it looks like it’s using Gravity Form’s legacy markup and he wasn’t sure if that might be impacting, which you can toggle on and off on the form settings. It might be worth trying to toggle that off and see if with the new markup it reads a little better.
>> MICHELLE: Yes. We use what is now Gravity Kit to display when people search the database. I’m wondering, we haven’t updated either one of those yet, so maybe updating Gravity Kit and Gravity Forms might solve some of the problems. I’ll have to look into that for sure.
>> AMBER: Yes.
[screen reader dictation]
>> AMBER: If you submit right now without the required information filled in, do you get notified that you’re missing required fields?
>> ALEX: Let’s find out.
[screen reader dictation]
>> ALEX: That was a rather bizarre experience. It sounds like it decided to focus the last checkbox and then it eventually decided to focus the error message.
>> MICHELLE: Yes, very interesting.
>> AMBER: Yes.
>> ALEX: At least it worked in the end.
>> AMBER: Yes. [laughs]
>> ALEX: It was an interesting path to get here.
>> MICHELLE: Yes, for sure.
>> AMBER: Did it reload the page or do you have it sent with Ajax? I didn’t notice if it reloaded the page.
>> MICHELLE: I have no idea if it does.
>> ALEX: Sounded like it reloaded the page.
>> AMBER: Yes. I think that Ajax is actually better on the Gravity Form, even though sometimes it’s not because I think it will– I think what happens when you reload the page at the Gravity Form is it doesn’t go to the right spot.
>> ALEX: Now we can see if each field is marked with errors.
[screen reader dictation]
>> ALEX: Oh, now it tells me that’s required.
>> MICHELLE: Yes. [chuckles]
>> ALEX: How nice.
>> AMBER: Yes.
>> MICHELLE: A little too late, but yes.
>> ALEX: It doesn’t start from the top though. That’s very interesting. Let’s see. Let’s get us back to the top.
[screen reader dictation]
>> ALEX: Oh, it really doesn’t want to go back to the top.
>> AMBER: Yes.
[screen reader dictation]
>> ALEX: Okay. It announces that appropriately.
>> MICHELLE: Okay.
[screen reader dictation]
>> ALEX: That’s an appropriate error message. It tells you there’s where to start looking.
>> AMBER: Have you seen the Wikads fields for 2.0 for Gravity Forms Alex?
>> ALEX: I have not.
>> AMBER: That plugin is free on wordpress.org, and one of the things it does is it modifies this, so it will have this message and then it will list out every field below it that had an error in that error message with a link so you could jump to the field.
>> ALEX: That’s what I was hoping to see.
>> AMBER: Yes.
>> ALEX: That can be very helpful to just have a place to start.
>> MICHELLE: Yes, for sure.
>> ALEX: One thing I would like to note is there-
[screen reader dictation]
>> ALEX: -at the top of the site is not a skip-to-main-content content link. Skip-to-main-content content links are very important, because they’re hidden links that sometimes actually get through a appear based on focused. It’s your choice, of course. It allows users to skip directly to the page content and bypass the header navigation menu, which this site has a collapsed navigation menu. It’s a little bit less relevant here, but still, something that users like to see on every website. Including me.
>> MICHELLE: Yes, okay.
>> AMBER: Are you familiar with those, Michelle?
>> MICHELLE: I’m not, but I will be looking it up.
>> AMBER: If you just go to wordpress.org, they have a skip-to-content link, and if you hit tab generally it would be what you would expect to be the first. I think it’s actually the third focusable item on [chuckles] wordpress.org, but you can see it if you go there. It’s invisible and then it becomes visible when you hit tab.
>> MICHELLE: Great. Thank you.
>> ALEX: Another call out to make is-
[screen reader dictation]
>> ALEX: -main nav button does not give the screen reader user any indication if it’s closed or opened. If I open it, silence.
>> AMBER: I think what you’re seeing there, and let me open this website up real quick, Alex, is I suspect that what the website is doing is loading a button that’s actually for the mobile menu, but because you’re on desktop, there is no collapsed menu, but you’re still getting that button. There’s a div that surrounds the top navigation and it has a roll=”button” and an ARIA label of main nav, but it’s not actually a button when you’re on the desk. It’s a button, but it’s a button that does nothing. [chuckles]
>> ALEX: It’s a button that does nothing. Okay.
>> AMBER: Yes. It’s a div. I think it’s incorrectly given a role of a button.
>> ALEX: Yes, I’m not actually sure it-
[screen reader dictation]
>> ALEX: -should be there at all. Well, that’s another easy fix then. Does this website not have traditional pages?
>> AMBER: It does. Can you get to the different pages that are inside that div that has a roll of a button?
>> ALEX: I don’t think so.
[screen reader dictation]
>> AMBER: There’s a menu item for podcast. Are you able to get to that?
[screen reader dictation]
>> ALEX: What in the world is this menu doing?
>> AMBER: What did you just to in order to get into that menu just then?
>> ALEX: I just forced the screen reader to stay out my way and forward all the keyboard input directly to the website. There is some weird Javascript of it that’s allowing the focus to go on to the menu, but it’s not shown all the time. That unfortunately is not a great accessibility issue to have.
>> MICHELLE: It’s a Divi site. We built it with Divi, so I’m not sure how that works, but we’ll definitely take a look at that.
>> AMBER: Oh, yes. That’s why. I didn’t realize this is a Divi site. There’s a plugin on Github called Divi Accessibility that CampusPress has and you need to install that. Otherwise that’s the only way the navigation menus are going to work, because Divi itself out of the box, the navigation menus don’t work.
>> MICHELLE: Got you. But that plugin will make it more accessible?
>> AMBER: It will make it more accessible.
>> ALEX: I will be honest though. I was one of the developers that worked on that at one time, and I’m not sure it will fix this.
>> AMBER: You don’t think so?
>> ALEX: I don’t think so. This appears to me like some type of floating menu and I’m not sure what’s going on here.
>> AMBER: I’ll post this in the chat in case you want to check it out. [inaudible] just did it.
>> MICHELLE: I see that.
>> AMBER: [inaudible] Alex used to work for the team over there at CampusPress.
[screen reader dictation]
>> ALEX: The good thing about the menu is is it marks the current page.
[screen reader dictation]
>> ALEX: That’s always a big help so users know where they are. Another thing that we should probably discuss is-
[screen reader dictation]
>> ALEX: -landmark structure on the page. Landmarks are a very useful way for screen reader users to jump around the page. You have your navigation landmark, your main landmark, your content info landmark for the footer, and complimentary landmarks for side bars. These are all very useful, because if used correctly, it allows the user to have an idea where they are.
[screen reader dictation]
>> ALEX: There are two landmarks on this page. A banner landmark which is appropriate for the header and there is a content info landmark for the footer. There is no exposed navigation landmark and there is no exposed main landmark. These are a couple of quick items to look into fixing.
>> MICHELLE: Absolutely.
[screen reader dictation]
>> ALEX: Let’s see if we can navigate to another page.
>> AMBER: Do you want to try searching the database and see if you can find someone?
>> ALEX: Yes. We’ll go back to home and see if we can find it.
[screen reader dictation]
>> ALEX: Nice and easy.
[screen reader dictation]
>> ALEX: Now why this did not start at the top is beyond me.
[screen reader dictation]
>> ALEX: All right. Here we are at the top.
[screen reader dictation]
>> ALEX: Heading level four here. This should be adjusted.
[screen reader dictation]
>> ALEX: [chuckles] That couldn’t be more true.
>> AMBER: Alex, can I ask you a question? We just heard three things that are three tips for reaching out to people, but I was expecting that to be a list. Does it bother you that it read number one, number two, number three, but it didn’t actually tell you that it was coded as a list?
>> ALEX: Not necessarily. On a short list, it really doesn’t matter. If you’re able to make a quick little action item to fix it, then of course if it announces a list of three items that hands user initial context and the ability to use list item navigation through the list.
>> AMBER: It’s good, but it’s a lower priority item.
>> ALEX: Yes. Given that that’s so short. It’s just so short. I wouldn’t make it a high priority call out.
[screen reader dictation]
>> ALEX: Without playing this video, this looks like a reasonably accessible video player.
[screen reader dictation]
>> MICHELLE: It’s actually audio. It’s not video at all.
>> AMBER: Do you think that matters that you didn’t know that it was a podcast player and you thought it was a video player or is that irrelevant?
>> ALEX: I think it’s irrelevant. I will call out that this does actually expose a navigation landmark onto the page and this is not good. This has the potential to really confuse users, because here’s what happens when navigating via landmarks on this page.
[screen reader dictation]
>> ALEX: It lands on the navigation landmark in the frame.
>> MICHELLE: That’s interesting.
>> AMBER: That was why you jumped here when the page first loaded, because there weren’t any other landmarks on this website and so it tried to find one and that was the only one it could find.
>> ALEX: No. I don’t know why that happened.
>> AMBER: No?
>> ALEX: That’s still a mystery.
>> MICHELLE: Interesting.
>> AMBER: Do you think this is a problem in the player? You’d like to see Castos fix this or is it more about how it’s embedded on the page?
>> ALEX: Probably a mix of both. I don’t know why Castos feels the need to put a navigation landmark in the middle of the radio player or audio player. The other item is, is there’s probably a way to represent this in such a way that we don’t have landmarks exposed onto the page. Maybe [inaudible] for this audio player. That gets to be an arguable area, because people are probably thinking right now, why is the accessibility expert recommending extra steps to find content? Because at this point, I think it would probably be a worse situation to have a random landmark in the middle of the page that could confuse users.
>> AMBER: Another question on that too, because I don’t use this so I don’t know how much you can control it, but do you have the ability to just be like, “I don’t want the subscribe button on my player embed.
>> MICHELLE: I don’t think so, but I’ll just look into it, because I don’t recall for sure.
>> AMBER: Sometimes [inaudible] approach things too is I’m like, how likely are people to subscribe right [inaudible] Do you know what I mean?
>> MICHELLE: For sure, yes.
>> AMBER: If you can just toggle a check box that says, “Don’t include this when you make the embed code,” then that might solve your problem without having to wait on them to code a fix.
>> MICHELLE: Yes, for sure.
>> ALEX: We’ll keep on moving.
[screen reader dictation]
>> ALEX: These labels are not read again.
>> AMBER: It did say specialization. I heard it.
>> ALEX: Yes. I was exploring. You can read the labels around it if you make the screen reader do that, but unless–
>> AMBER: Let’s say if you’re going to look for somebody to come on your podcast and talk about SEO. Do you want to see if you can find somebody for that?
>> ALEX: Yes. [screen reader dictation]
>> AMBER: I noticed visually that it actually [inaudible]
[screen reader dictation]
>> AMBER: It went to the reset first even though the reset is to the right. I don’t know if that’s just the CSS, or the order of it, normally I would want to see the focus order follow the order on the page.
>> ALEX: Depending on what reset does, it may or may not need to be a link. If reset performs an in-page action, it should be a button, not a link.
>> MICHELLE: Okay.
>> ALEX: For sending user data pages or outbound data websites.
[screen reader dictation]
>> ALEX: Okay. The audio player has stolen focus again. That is a-
>> MICHELLE: I can see that.
>> ALEX: -really, really–
>> MICHELLE: Except, I was just looking, it’s a shame, and I don’t see that there’s any settings here, I would have to go back and check under the Castos website or pull that frame from them to see if there’s a setting there. I’ll have to look into that, for sure.
[screen reader dictation]
>> AMBER: There should be a search button– Oh, okay. It did actually give you results, it’s just they come below the-
[screen reader dictation]
>> ALEX: So-
[screen reader dictation]
>> ALEX: This is actually a little confusing. It would be better to have these results if possible on a dedicated page, because you have to navigate through the page again. The first heading that gives it away is-
[screen reader dictation]
>> ALEX: -begin your search, but we’ve already searched. It’s more like a, read your search.
>> AMBER: Yes. The search results would be a better heading for you to know these are the results from my submission.
>> ALEX: Yes.
>> MICHELLE: Right. Because it did on the same page, is that going to change the header for that?
[screen reader dictation]
>> MICHELLE: I understand what you’re saying. Opening in a new page would be better?
>> ALEX: Yes. I think so.
>> AMBER: Are you just displaying this off of Gravity Forms entries?
>> MICHELLE: Yes, that’s using the Gravity Kit, the Gravity View.
>> AMBER: In the long run, I think it would be better if they were post-typed and then you could use one of the faceted search plugins to have different pages, but I don’t know. Maybe Gravity Kit has a way to submit a search, and then, I don’t know.
>> AUTOMATED VOICE: Heading level two. Displaying 1-25 of 40. List three items, current page, one, link, two, link, double right point, and angle bracket. Joe Howard link, heading level three.
>> ALEX: These are heading level three, that’s acceptable.
[screen reader dictation]
>> ALEX: Just a call out, the contact me heading level four is not necessary here since the heading bubble in the heading is generally not necessary.
[screen reader dictation]
>> ALEX: That’s probably redundant.
>> AMBER: That’s actually a photo of the person, and that’s their headshot that they uploaded. I think what you’re hearing is the alternative text that’s not correct.
>> ALEX: Okay. That’s very unique, alt text for that picture.
>> AMBER: An interesting thing about this, and we had big discussions with the WP Accessibility day website that I think might be relevant for you all is you might want to provide a field that asks people to describe themselves visually.
>> MICHELLE: That’s a good idea.
>> AMBER: Right? If Alex wanted to try and find someone who’s diverse, you might want to give him the same information that a sighted person would have about this person. I don’t know if you have thoughts about that, Alex, because I know we had lots of back and forth on that.
>> ALEX: Yes. My thoughts are really simple about it. It’s definitely like, sighted people get this information, why don’t I get this information? That’s pretty much where I leave it.
>> AMBER: Yes.
>> ALEX: It’s probably arguable to say that it would be better if this image was first in the dome or maybe I just feel like a picture at the end of the content is strange. Then again, it-
>> AMBER: There is actually more following this. It’s left-aligned, and to the right of it, there are some paragraphs and then a, I specialize in with a list, and an I’m interested in with a list.
>> ALEX: Oh, interesting. The picture is right in the middle of the content?
>> AMBER: Yes. For it’s going to be in the middle of the content, and then there’s going to be more content following it.
[screen reader dictation]
>> AMBER: I have a question for you Alex. I’m sure you hear this kind of stuff all the time. SEO like that, it reads it out and it doesn’t say SEO, right? Would it be better if it had periods or is it just like, people are so used to that that they did just ignore the fact that it sounds weird?
>> ALEX: I think after a while, you just ignore it, because every screen reader will read it differently based on how you represented it. There is no given way to predict how any screen reader would read it. It is interesting though that we have this bio description, and I’m having a hard time figuring out how to communicate this other meta information. Maybe a user doesn’t want to read the description for some reason or maybe we need to make it clear where the bio description ends. I think a user could definitely figure that out.
>> AMBER: If Joe’s name is in H3, would it be better to have an H4 that is bio and an H4 that is specializations, and an H4 that is interested in, and then that way you could quickly under each person have their names, then jump to their bio or jump to their specializations rather than using more like paragraph text?
>> ALEX: I think so.
>> MICHELLE: This is all right Gravity Kit, so I have to figure out how it works in Gravity Kit.
>> AMBER: [chuckles] You can change the output in Gravity Kit?
>> MICHELLE: Yes. If its Gravity View right here, Gravity Kit is the more recent version of it. If you’ve never used it, you have no idea how many hours went in just to make it actually show up things. This is good information, because I do want to make it right, of course so that it’s easy for everybody to use, but my brain is going, “Oh, no, now what?” [laughs]
>> ALEX: Oh, we understand.
>> AMBER: This is another piece of feedback about this, because we actually played with this plugin and considered using it on WP Accessibility day, and then we abandoned it. One of the reasons why is that — What you’re using is called the list view, I can see that when I inspect the code. It says, GV-list-view, but it doesn’t actually put them in a list, and I think then it might be– It does give the number at the top, but it might be handier for Alex to be able to hear in each container 1 of 27, 2 of 27, because then he could maybe more easily jump back to one if he wants to.
>> MICHELLE: Got you.
>> AMBER: Maybe he just searched for their name, I don’t know if you have thoughts on that, Alex. I think the overall container of this for Gravity View, it would be good if they– If you used the list view, it should make it a list.
>> MICHELLE: Yes, for sure.
>> AMBER: Yes.
>> ALEX: Yes. It’s more of a visual list.
>> AMBER: Yes.
>> MICHELLE: Yes.
[screen reader dictation]
>> ALEX: Are these names linked?
>> AMBER: Actual people’s names?
[screen reader dictation]
>> ALEX: I guess they’re links.
>> MICHELLE: They are. That way they can open in a link and they can share that link with other people. That was one of the feedback for the people in the database, because they wanted to have a link to our database that was just them and not back to a search. We were able to enable that.
>> ALEX: Okay. Let’s see what happens if we select one.
[screen reader dictation]
>> MICHELLE: It absolutely opens up the same page. [laughs]
>> ALEX: Yes, it does.
[screen reader dictation]
>> ALEX: That is definitely a problem. Go back, relax context. Context is unfortunately painfully important with screen readers.
>> AMBER: Yes. For sure.
[screen reader dictation]
>> ALEX: Looks like the same information on these pages. They’re just direct links.
>> AMBER: I feel it would be useful to decide, if actual post type, the WordPress structure of using posts might be better, because then you’d have more control over the content that’s all around the information. The 1one on the page would be like if you went to one, it would be the person’s name.
>> ALEX: Yes. WordPress would force you to be more accessible.
>> AMBER: Alex, we have two questions. Dennis said if sighted people get this information, I should get this information. Great standard, Alex, but where’s the line for you about the same information costing you extra time to receive through the reading of that alt text? Do you get frustrated with verbose alt text or if it’s kept undue 125 characters, is it okay even if it’s non-essential information?
>> ALEX: That is a great question. It’s one that I’m very mixed about it. I often find myself frustrated that there’s never enough information, but the flip side of that is in pictures, especially graphics, you can get to a point where it is extremely overloading. My personal opinion is I think a medium amount of information, so you should be able to get a pretty good idea of reading the alt text and understanding what’s visually happening in the image.
>> AMBER: If it’s really long alternative text, you could always just choose to stop it reading and move on to the next element, right?
>> ALEX: Oh, yes.
>> AMBER: On that front, should we all err on the side of being accurately descriptive even if it’s long?
>> ALEX: I think in the way of alt text, more description is probably better than not enough.
>> AMBER: Then this person is, their name says Deb. I don’t know if that’s their actual name or if they’re a developer, but can you clarify on why it’s wrong to put a heading after a heading? They said, usually we put an H2 heading after an H1. Is it just that you’re expecting paragraph text in between those or is there any other context you can give about why you don’t want to see a heading immediately after a heading.
>> ALEX: Verbosity.
>> AMBER: It reads out heading level and the number before it reads the text every time.
>> ALEX: Yes. If you have headings back to back, it makes little sense and headings start losing their value. Headings should not and really, really should not be overused on websites.
>> AMBER: It’s more about when you were talking about wanting to be able to jump to certain sections, that’s when it might make sense to have a heading when it can be used as a navigational aid.
>> ALEX: Yes, exactly, and in the way that headings right after headings, headings can very quickly start to become annoying and a nuisance for navigation. It’s always better to include some text in between the heading, unless you have a really good reason to not.
>> AMBER: Thank you. Do you have any questions right now, Michelle?
>> MICHELLE: No, I’m just taking it all in.
>> AMBER: Hopefully we’re not being too overwhelming for you.
>> MICHELLE: No. You don’t know until you know, right? This is awesome. I can’t promise I’ll have it all fixed by Christmas, but we definitely will make this a project for the first quarter. As Allie and I, this is a passion project on the side. It doesn’t necessarily bubble up when we have to get make our paychecks and all that, but we’ll make this a quarter one effort to get this as good as we possibly can.
>> AMBER: Alex, there’s a whole section here of logos of companies who have sponsored Underrepresented in Tech. I’m wondering how you feel about this section and if there’s anything you noticed that’s good, or bad, or confusing.
>> ALEX: The footer section, we’re here or went on.
[screen reader dictation]
>> ALEX: Heading level four. This is another rather interesting conversation about heading levels in the footer. It would be great if just no one did that.
>> AMBER: You don’t want headings at all in the footer?
>> ALEX: It just becomes so confusing from page content unless you had heading ones everywhere. Heading one for the main content, heading one for the navigation area, heading one that said footer.
>> MICHELLE: Got you.
>> AMBER: Something we do, I’m curious to what you think about this, because I don’t know if you’ve seen this on one of my websites. Actually. I think the WP Accessibility Day has it. We have a screen reader only heading two in the footer and it literally says footer, and then the headings in the footer are heading threes so that they’re nested below the heading telling you this is the footer, you’ve reached the footer now. Is that good?
>> ALEX: That’s definitely acceptable.
>> AMBER: That’s good. All right. Good.
>> ALEX: If I remember right, I think the WP Accessibility Day website has the title as the heading one, so it flows.
>> AMBER: Yes. The page title is the heading one. This is a little different on this site, because it’s use- it’s nesting content in an eye frame.
>> ALEX: Yes. We’ll continue.
[screen reader dictation]
>> ALEX: That’s a nice actionable link.
[screen reader dictation]
>> MICHELLE: That’s not named well. [laughs] Is it good that I can laugh at my own mistakes?
>> ALEX: I think we’ll stop it for our own sanity here.
>> AMBER: This one just doesn’t have an alt text defined, and when I look at the code, that’s– You know how WordPress uses the file URL as the title? The screen reader will try to read something.
>> MICHELLE: This is an easy fix. I can fix those very quickly.
>> ALEX: Just to add, over here–
>> MICHELLE: Can you open the dev console and show us this, Alex? Maybe. Because I think it’s worth pointing out.
[screen reader dictation]
>> ALEX: Oh, man. It’s a HTML mess.
>> AMBER: We can’t actually see it. I think it might be minimized, but what I’ll do is I’ll copy the [inaudible] in the chat, because what I think is relevant here is the– Oh, if I can. Let me see if I can copy it and paste it in. No. Nope. I don’t know why it’s not allowing me to– Maybe they’re not allowing HTML code in the chat, but what I noticed is that it has alt, but it doesn’t actually have alt equals “Empty.” This might actually be a problem with Divi, because if you haven’t defined alt text on the image, it should output empty quotes on the alt attributes so that it’ll just skip it for Alex.
>> MICHELLE: Got you.
>> AMBER: Rather than trying to read out the title. I think that might be a problem in the theme that it’s not putting empty alt text when there is no alt, if that makes sense.
>> MICHELLE: Yes, but I should go back and enter the alt text in so that it’s described. That’s what I’ll do for sure.
>> ALEX: It might also be a good idea to-
[screen reader dictation]
>> ALEX: -not include logo one.
>> MICHELLE: That’s because that’s the title of her logo, I think.
>> ALEX: That’s useless information though at the end of the day.
>> MICHELLE: If I put alt text in, you’ll get that instead, correct?
>> ALEX: That–
>> AMBER: Theoretically, yes.
>> MICHELLE: Instead of the file name, I mean.
[screen reader dictation]
>> ALEX: That’s right. That’s the file name. Nevermind.
>> MICHELLE: If I put in alt text, everything– This should be an easy fix if I can get the alt text in there.
>> ALEX: See, that was a tricky experience. That sounded close enough to alt text for me tobelieve it.
>> MICHELLE: Yes, because of the name of the file. Yes.
>> ALEX: Okay, moving on.
>> AMBER: I have another question for you, Alex.
>> ALEX: Oh, yes.
>> AMBER: Are you at all interested in having things like this displayed in a list so that you would get to it and you’d know immediately how many different sponsor logos there are on the page?
>> ALEX: That would be nice, because at this point, I have no idea how many I’m about to go through.
>> AMBER: Yes. Right now, it’s like with Divi, what it does is it puts it in a Div. If you’re able to use a list element, like an unordered list, then it would read out one of- I don’t know- 12.
>> MICHELLE: Could you do that with [inaudible], though? Because that’s one [inaudible] want them to do on the page, right?
>> AMBER: Yes.
>> MICHELLE: What I could do though, is I could put that in the alt text, right? I could put that Hannon Business Websites logo one of nine. I could do that so that you would at least have that information or is that not good?
>> ALEX: Better than nothing.
>> MICHELLE: Okay.
>> AMBER: Yes, I think that’s a decent workaround, as long as you remember to be consistent when you-
>> MICHELLE: Right, for sure.
>> AMBER: -[inaudible]. I think that’s one of the challenges with some of the page builders, is that what I’m telling you about putting in a list would be ideal, but it would require somebody to probably write custom CSS to remove the bullet point and make them format like you want here, which is more work than just using the columns from Divi. [inaudible], right?
>> MICHELLE: Yes. Can you tell me, these are navigating across and then down, is that right, Alex? The next one was the GravityView, really long title. Then the next one after that should be Give.
[screen reader dictation]
>> AMBER: He’s just going to keep reading it, because he likes it.
>> MICHELLE: I know. He just likes to give me– You can’t see it, Alex, but I’m blushing.
[laughter]
>> MICHELLE: Is the next one, Give? I just want to make sure that they go in the right order so that when I do that– Yes, okay.
[screen reader dictation]
>> MICHELLE: Then Newsletter Glue should be next.
[screen reader dictation]
>> MICHELLE: Perfect. Then I know how to do this. Perfect. Thank you.
>> ALEX: We’ll go ahead and get through the rest of these.
[screen reader dictation]
>> ALEX: These side-by-side links, what do we call those inline links? Those are always a bit weird to read, because the first one it lands on is the one that your Enter key will activate. It’s always better to have block-level links.
>> MICHELLE: To have what? Say it again. I missed what you said.
>> ALEX: The CSS thing, block-level links versus inline links. That is the end.
[screen reader dictation]
>> AMBER: The other major thing on this website would be the podcast, and I don’t know if you’ve sufficiently done that. I don’t know if you’d be interested in going and just checking out the podcast and seeing if you’re able to listen to the podcast or subscribe to the podcast if you wanted to do that.
>> MICHELLE: It is in the primary navigation.
>> ALEX: We can figure out a way to get there.
>> AMBER: Absolutely.
[screen reader dictation]
>> ALEX: Oh, well.
[screen reader dictation]
>> ALEX: Oh, it’s a sub-menu, because it has a three after it. Thanks, Divi.
[screen reader dictation]
>> AMBER: I will say it’s also weird that it told you three, because there’s actually only one item in the drop-down. Even though it didn’t work anyway, but it’s also giving incorrect information too. I’m not [inaudible]
>> MICHELLE: Sometimes Divi replaces that down arrow with the number three, so it may have been reading that.
>> ALEX: Yes, it’s–
>> MICHELLE: It is really weird in how it says that.
>> ALEX: That’s not a count for the sub-menu items. That’s just Divi’s sad attempt to place in a down arrow icon.
>> MICHELLE: Yes, exactly. Until it picks up. Sometimes you’ll go to a Divi website, and instead of a down arrow it’ll say three, three, three, three, and you’re like, “Why does they all say three?” It’s because of that.
>> ALEX: Or the long outstanding accessibility books.
>> MICHELLE: Well, yes.
>> AMBER: I think this might inadvertently be turning into a don’t use Divi meetup.
>> MICHELLE: Yes. Well, we just re-designed the site this year. I don’t know how y’all feel about Cadence, but I’ve been using Cadence a lot more and I think I might redesign that next time, not in Divi.
>> AMBER: I haven’t done one with Cadence. Have you checked out any Cadence sites, Alex?
>> ALEX: I have checked out some. It seems to be, I think, definitely better. I don’t want to get anybody else in trouble.
>> MICHELLE: [chuckles] Well, I work with Cadence, so you can be brutal if you need to. [laughs]
>> ALEX: I’m being careful how I deliver my feedback. [chuckles]
>> MICHELLE: No offense taken.
[screen reader dictation]
>> ALEX: [inaudible] at the page.
[screen reader dictation]
>> ALEX: My comment still stands about the heading level two. You could very easily make that a latest podcast episodes title, maybe.
[screen reader dictation]
>> ALEX: Those, in theory, should be– Those should stay heading level two, skip a [inaudible] fixed.
>> MICHELLE: Basically, those are the episodes. Those are the post types that’s going to open the page for that particular podcast, because it’s going to have the transcripts and everything on it.
[screen reader dictation]
>> ALEX: Read more. These have got to go.
>> AMBER: What should it be instead of Read More?
>> ALEX: Read More, title here or just read more can vanish completely since these are so sure. Unless there’s any excerpts on these.
>> MICHELLE: There aren’t any excerpts. If you open it, it opens up to the whole episode with the transcript.
>> ALEX: Yes, you’re–
>> AMBER: The point is that it should either have hidden screen reader text that appends the title so it’s a read more, and then the hidden part would be about how leadership affects teams.
>> MICHELLE: Got you. Okay.
>> AMBER: Or it would have an ARIA label that’s just read more of how leadership affects teams on the link. That would be the correct way to do that, but I think Alex’s point of maybe you don’t need Read More at all is probably good, because there is no excerpt. It’s just the title and the date.
>> MICHELLE: The titles are a link.
>> AMBER: The title is a link. You’re not really reading more of anything. It’s like start reading, right?
>> MICHELLE: Yes. For sure.
>> ALEX: For anyone wondering why this is so important, here’s what this looks like from a plane links standpoint.
[screen reader dictation]
>> ALEX: Read more what?
>> MICHELLE: What if instead of Read More, the link itself said full episode and transcript, would that be helpful? Because then you know that that link actually gives you the full episode and the transcript.
>> ALEX: Full episode and transcript for?
>> AMBER: You’d still want it to include-
>> MICHELLE: The title.
>> AMBER: -the title. The point is that if you just look at a list like this, you should know what every link does or goes to. Even pages where there’s downloads and it’s like download, download, download, download. Downlaod what? It always needs to be explicit about what it is without any surrounding context.
>> MICHELLE: Got you.
[screen reader dictation]
>> ALEX: Oh, that’s so weird. [chuckles] Okay.
>> AMBER: What specifically?
>> ALEX: The focus stealing is interesting.
[screen reader dictation]
>> ALEX: Yes, I think that will probably be a really large action item for you. Figure out what you can do with these third-party players, because the way it steals focus on all these pages, it’s an issue.
>> MICHELLE: Yes, that’s true.
>> AMBER: It’s frustrating.
[screen reader dictation]
>> ALEX: The transcript on this page?
>> MICHELLE: It doesn’t look like Allie put the transcript on that page. I don’t know why. Maybe it’ll still being transcripted. I don’t know.
>> ALEX: Of course, I’ll pick the only one.
>> MICHELLE: There might be more. We split the work, but ideally they’re supposed to be there. I don’t know why it’s not, but that’s definitely something to look into as well for sure.
[screen reader dictation]
>> MICHELLE: Do you have human transcriptions?
[screen reader dictation]
>> ALEX: What in the world did I stumble onto here?
[screen reader dictation]
>> AMBER: Do you want us to tell you what we’re seeing or do you want to keep trying to find out for yourself?
>> ALEX: I’d love to know what this is.
>> AMBER: This looks like– I’m guessing it’s also from Castos. Instead of an individual podcast episode player, it’s like a feed. You can hit play up at the top and that would play the most recent episode, but where you are right now, and I think why it’s telling you it’s a button, is it’s the second episode. I think if you triggered that it would change what you could play up at the top or perhaps it would autoplay. I’m not certain. It’s something that shows many episodes all at once in a player.
>> ALEX: That’s definitely a problem. I think it’s too much of a change of context on this page.
[screen reader dictation]
>> ALEX: The first two episodes. [inaudible] context for this frame.
>> MICHELLE: Yes.
>> AMBER: Would it help of it was a heading above this that communicated in some way to you that this is episode player or something? I don’t know what to call it. Would that help with the context so you understand when you’re tabbing what you’re going to get into? It wouldn’t be the heading to be tabbed.
>> ALEX: That’s kind of the whole problem. I’m not sure what you do here.
>> MICHELLE: I’m going to come up with some solutions.
[screen reader dictation]
>> AMBER: If there was a heading, at least you would– If you did hit tab and you got into this, then you could have it read content above and get the heading and understand where you were.
>> ALEX: Well, for me, it feels like this page either needs one or the other.
>> AMBER: You either want the player embedded or you want the excerpts to go to the single post. You don’t want both on the same page.
[screen reader dictation]
>> ALEX: Yes. I can’t actually find a way to view more episodes unless there’s only two.
>> MICHELLE: Well, there’s definitely more than two.
>> AMBER: I think what’s happened is the way this has been built out in Divi is that the top is a two column section and there’s two episodes on the left column, and then on the right column is this player. Below it is another container with a three-column section that shows more episodes. I suspect that these aren’t actually in– The two most recent are in a separate container which is why– You’d have to go past this entire player and then you’d be able to [inaudible]
[screen reader dictation]
>> ALEX: Well, they’re all heading level twos as well. This could take a while.
[screen reader dictation]
>> MICHELLE: Yes. It’s not going to let you get past player until you go through all of them, it looks like.
>> ALEX: Okay. New plan.
>> AMBER: There is a question, Alex, or a comment in the chat. Alicia was wondering, would it be helpful if the player was placed in an aside landmark so that it’s not in the main and other contents in the main?
>> ALEX: That would be preferable. If it was to be done, that would be preferable.
>> AMBER: Are you able in Divi to choose what HTML type you want to use for your containers? Is there a dropdown, like in Elementor you can choose what you want it to be.
>> MICHELLE: I don’t remember, but I’ll have to look.
>> ALEX: Somehow I kind of doubt it.
>> AMBER: That’s maybe a good idea that Alicia had, putting it in an aside if you’re able to maybe.
>> MICHELLE: What if we have the player on a separate page altogether?
>> AMBER: That’s just like listen to all or something as a navigation menu item.
>> ALEX: Just don’t put it in the sub-menu item, because there’s no way to get to those in Divi.
>> AMBER: Hopefully the Divi Accessibility plugin fixes that.
>> ALEX: Yes, it fixes some. Moving past this maybe.
[screen reader dictation]
>> ALEX: Oh, my gosh, we have more buttons. Okay.
>> MICHELLE: You’re going through the player right now, and that’s why.
>> ALEX: I don’t think there is a way to get past this player.
>> MICHELLE: It doesn’t seem so.
>> AMBER: Actually, here’s what I think I just realized about this page. This player is on this page twice.
>> MICHELLE: Oh, it is.
>> AMBER: I see it at the top of the page, and then I just scrolled down. The one that you’re on right now, Alex, is in a second section lower down on the page.
[screen reader dictation]
>> AMBER: Now you’re back into the entries.
[screen reader dictation]
>> AMBER: I think that kind of tells us, unless there’s anything else you feel like we should point out about this. I think there’s one other area that might be useful to look at, which is the resources section.
>> ALEX: I was really hoping we were going to find more a transcript, but it just wasn’t meant to be.
>> MICHELLE: I guess not.
>> AMBER: Glenn did say that there are somewhat transcripts, he commented that. Do you want me to find one real quick, because you’re interested in looking at the transcript?
>> ALEX: That would be good.
>> AMBER: Okay. Alicia said, it’s the one Michelle did. If you guys have one, you can throw a link in the chat real quick. Let me see. Oh, yes. It is titled, if you want to search for this, Disability and Accommodations is the first part of it.
[screen reader dictation]
>> AMBER: Not there, because that’s in a player.
[screen reader dictation]
>> AMBER: There you go. If you go to that one, it has the transcript.
[screen reader dictation]
>> ALEX: It has its own heading. That’s what I was after.
[screen reader dictation]
>> AMBER: The heading is good?
>> ALEX: Yes.
>> MICHELLE: Okay.
>> AMBER: Also, I think it’s good that you just put it visible on the page, rather than making it be in an Accordion or something like that.
>> MICHELLE: I try not to do that as often as possible. Especially since there’s nothing else that toggles. An Accordion maybe means more than one thing. If it’s just the episode transcript, it should just be there. Sorry, my voice is so horrible.
>> ALEX: It’s all right. We’re all making it.
>> AMBER: You won’t be able to get to this in the navigation, but could you just go to underrepresentedintech.com/resources. That could bet he last page that we could make it.
[screen reader dictation]
>> MICHELLE: I feel like this page is going to be a nightmare.
[screen reader dictation]
>> ALEX: Okay. The screen reader stopped talking. There we go.
[screen reader dictation]
>> ALEX: This could very easily be a list.
>> MICHELLE: Yes, for sure.
[screen reader dictation]
>> AMBER: Do you want to follow one of those links? Those are anchor links that link down to a different part of the page.
[screen reader dictation]
>> ALEX: That’s all we got.
>> AMBER: It scrolled, but what I suspect it did not do is shift your focus. If you hit tab, where does it take you?
[screen reader dictation]
>> AMBER: What it did was this is super common in almost every page really.[laughs] It scrolls you down, but it doesn’t shift the focus and if it shifts the focus on the container, then it should have read out to him like the monetization headline. Then if he hit tab it would go to the first link in that group.
>> MICHELLE: From a design standpoint, accessibility or not, do you think that the buttons at the top are important, or do you think that there’s limited enough information that we could just list it out?
>> AMBER: I think what’s good about that is that it allows you to see the groups that are available.
>> MICHELLE: Sure.
>> AMBER: Even I think for your purposes it would be nice Alex to know what groups are available without having to go all the way through them all.
>> ALEX: Nice general overview.
>> MICHELLE: Would this be something–
>> AMBER: But it needs to have the jump link fixed.
>> MICHELLE: Would this be something that would work in Accordion?
>> ALEX: Yes. An accessible one. [chuckles]
>> AMBER: But you’d make each group an accordion and then you could expand it.
>> MICHELLE: That’s what I was thinking or wondering about, because then I could put the list in each Accordion so that wouldn’t have to be far across. It could list them down then.
>> AMBER: Then when you first load the page, you would see just those headings, job search, type resources, those things.
>> ALEX: I do believe the Divi Accessibility plugin makes accessible Accordions. There’s that.
>> MICHELLE: That’s good. That might be a good solution.
>> AMBER: Then the other thing within this, if you want to go into one of them.
[screen reader dictation]
>> MICHELLE: [inaudible] those lists, then you’d know how many links were in each section.
>> ALEX: Yes.
>> MICHELLE: I’m learning so much. I love it.
>> AMBER: [chuckles] Awesome. Well, do you have anything else, any other questions? There is one other question, but I want to see if you have a question. Anything else that we could look at, Michelle, or that you’d be interested in getting feedback from? Just because we’re nearing the end of the time for the meet-up.
>> MICHELLE: No, I think we’ve covered a lot of it. This is certainly enough for me to get started [chuckles] making it better. Absolutely.
>> AMBER: Well, I think it’s progress over perfection in little bites at a time. Obviously, we know this isn’t your business that you make a ton of money off of.
>> MICHELLE: The whole idea is the underrepresented database serves underrepresented communities, and if somebody who is blind or visually impaired can’t use it, then we’re not serving who we say we’re serving. I really want it to be better so that it does serve everybody.
>> ALEX: As I mentioned, this one might’ve been not as “Entertaining” for everyone, because it’s not like it’s completely unusable.
>> MICHELLE: Thank God. [laughs]
>> ALEX: I think it was still educational in the way that even small issues can have some fairly interesting impacts.
>> MICHELLE: For sure. Obviously, we want to do well and we did put some thought and effort into it. We just didn’t know what we didn’t know, and now we do. Fantastic. I really appreciate all the feedback on it. I’ll make sure that I get it all fixed and then, Alex, I’m sending it to you so you can put yourself in the database. [chuckles]
>> ALEX: Sounds good.
>> AMBER: Awesome. Excellent. The last question that we had, Alex, Bruce was wondering how you like to see transcript marked up, if at all. There’s a preference there.
>> ALEX: Probably not at all really. That’s a really interesting point actually, because there is some transcripts that are nice and plain. Name, colon, what somebody’s saying. Some it’s name, new line, then what they’re saying. That’s really fine to me. Then you have products like Microsoft Stream in the enterprise world. It is this very, very dynamic list that is searchable and you can actually jump the different timestamps in the video, and it is so hard to use. To answer the question, plain is generally always better.
>> AMBER: You just like to have a heading above it that says transcript, so if you want to find it, you can find it easily.
>> ALEX: Yes.
>> AMBER: Cool. Excellent. Awesome. Thank you. All right. Well, thank you so much, Michelle. Thank you, Alex, and thank you everybody in the chat. If you’re not able to download the chat, Michelle, let me know and I’ll send you one.
>> MICHELLE: Thank you.
>> AMBER: We have to do a little wave and smile at the end, kind of like this week in WordPress, but it’s mostly because I have to watch and make sure that the transcript gets fully updated in case we have anyone here who’s relying on the transcript, because I learned I, unfortunately, end them too quickly and then they miss out on the last few sentences.
>> MICHELLE: Sure.
>> AMBER: Thanks, everybody, and we will see you all back after the new year.
>> MICHELLE: Thank you.
[] [END OF AUDIO]
Links Mentioned
- Underrepresented in Tech
- Accessibility Checklist for Gravity Forms: Form Fields To Avoid
- Divi Accessibility Github
- The Alt Scene: When and How to Write Alternative Text: Meg “Memi” Miller
About the Meetup
Article continued below.
Stay on top of web accessibility news and best practices.
Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.
Summarized Session Information
In this session, Amber Hinds and Alex Stine, an accessibility consultant and engineer at Waystar, performed a live accessibility audit on the Underrepresented in Tech website created by Michelle Frechette and Allie Nimmons.
The website serves as a database to help individuals from underrepresented groups connect with potential employers and event organizers in tech, especially in the WordPress community.
The session aimed to evaluate the accessibility of the Underrepresented in Tech website with a focus on improving its usability for assistive technology users. The Underrepresented in Tech website aims to help underrepresented individuals in tech be more easily found by potential employers, podcast hosts, and other collaborators.
Session Outline
- Initial observations
- Navigation and focus management
- Landmarks and skip links
- Improvements and suggestions
- Conclusion
Initial Observations
Alex began by navigating the website using his screen reader. He noted that while the website was generally usable, there were still areas for improvement. He highlighted a few specific issues that affected screen reader navigation:
- Heading structure: some heading levels were out of order, which affected the logical flow of the page for screen reader users. He recommended that headings be nested appropriately (for example, H1 followed by H2, then H3, etc.) to ensure a clear content hierarchy.
- Gravity Forms integration: one issue identified was the forced H3 heading on the form titles when using Gravity Forms. Amber suggested a workaround of disabling the form title and manually inserting an appropriate heading to maintain correct heading levels.
- Field labels and errors: the screen reader could not properly read the labels on several form fields, which could lead to confusion for users filling out the form. Also, error messages were sometimes challenging to locate, leading to a poor user experience.
Navigation and focus management
Alex noticed the website’s navigation was challenging because the screen reader did not clearly indicate whether menus were opened or closed. The Divi theme also caused an issue, inserting an unnecessary button role that made the navigation menu confusing. Amber recommended installing the Divi Accessibility plugin to help improve the navigation experience for screen reader users.
Landmarks and skip links
Alex emphasized the importance of implementing a “skip-to-main-content” link, which allows users to bypass repetitive navigation menus and jump straight to the page content. He also noted the website’s absence of proper landmarks, such as navigation and main content landmarks, which would help screen reader users navigate more efficiently.
Improvements and Suggestions
- Gravity Forms Accessibility: the team discussed how Gravity Forms can be configured to improve accessibility. Suggestions included adjusting heading levels manually and ensuring screen readers pronounce field labels correctly. Amber also recommended submitting support requests to Gravity Forms regarding Alex’s issues.
- Error Handling in Forms: Michelle committed to improving the website’s form error handling. Alex suggested that when a form is submitted with missing required fields, the focus should immediately move to the error message at the top of the form, allowing the user to identify and resolve issues quickly.
- Divi Theme Adjustments: Amber and Alex both provided feedback on the Divi theme’s limitations regarding accessibility. One issue was the lack of accessible navigation menus. They suggested installing the Divi Accessibility plugin, which CampusPress developed, to fix some of these issues. However, Alex also noted that Divi’s navigation elements might still present challenges even with this plugin.
- Improving Content Focus: there were issues with focus management, particularly with embedded audio players, which hijacked the screen reader’s focus. This confused users, as they could not easily navigate back to the main content after interacting with the player. Alex recommended placing the player in an aside element or moving it to a separate page to improve the user experience.
Conclusion
The audit provided several actionable insights that Michelle and her team could implement to enhance the accessibility of the Underrepresented in Tech website.