As part of our commitment to giving back and sharing knowledge, we have partnered with the WordPress Foundation’s community team to run an official WordPress Meetup centered around building more accessible websites with WordPress. This post has a recap of our Meetup that took place on Thursday, January 6th, 2022, and a video recording of the presentation.
About the Topic
In this presentation, Alex Stine, DevOps Engineer & Accessibility Consultant, and Amber Hinds, CEO of Equalize Digital, performed a live accessibility audit of the popular WordPress donation plugin, GiveWP and provided real-time feedback to General Operations Manager, Matt Cromwell, and the GiveWP Team.
Thanks to Our Sponsors
MediaSesh, run by Christine LeVasseur, is an SEO consulting and training firm that helps businesses to be found by their customers online and reach their fullest potential in search results.
Empire Caption Solutions strives to create inclusive experiences and engage individuals with different abilities and backgrounds by providing high-quality accessibility services for recorded media, such as closed captions, transcriptions, Audio Description, and ASL interpretation. By utilizing both the latest technology and human expertise, ECS is able to help its clients meet WCAG 2.1 success criteria and ADA compliance while offering options that fit almost any budget.
About the Meetup
The WordPress Accessibility Meetup is a global group of WordPress developers, designers, and users interested in building more accessible websites. The meetup meets twice per month for presentations on a variety of topics related to making WordPress websites that can be used by people of all abilities. Meetups are held on the 1st Thursday of the month at 10 AM Central/8 AM Pacific and on the 3rd Monday of the month at 7 PM Central/5 PM Pacific.
Learn more about WordPress Accessibility Meetup
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.
Links Mentioned in This Video
The following resources were discussed or shared in the chat at this Meetup:
- WordPress Accessibility Facebook Group
- Equalize Digital Meetup Website
- Mediasesh Website
- Mediasesh Twitter
- Empire Captions Website
- Upcoming Meetup: The Internet is Unusable: The Disabled View – Nicolas Steenhout
- Upcoming Meetup: Accessibility for Content Creators – Ronnie Burt
- GiveWP WordPress Donation Plugin Website
- Form Grid
- Screen Reader Text Format WordPress Plugin
- Accessibility Internet Rally Google Search
- Aria Label by Mozilla
- NV Access Screen Reader
- Accessibility Web WordPress Meetup
- Source to Learn About A11Y by Harvard
- South Central Coast WordPress Meetup
- Alex Stine LinkedIn
- Alex Stine Contact Email
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.
Read the Transcript
[00:00:00] >> AMBER HINDS: I am going to get started just so we have enough time for speaking. Feel free to continue adding comments on the chat if you want. A few announcements. If you are new, we have a Facebook group, WordPress Accessibility. You can find it if you search on Facebook or we might be able to throw the link up in the chat. If you want to talk about Accessibility in between meetups, this is a good place to go and connect with other users.
[00:00:31] Then, if you want to find any upcoming events or you want to find recordings, so we do record this. It takes about five business days but we get– once we have the captions corrected and have a full transcript, we will post the recording on our website, which you can find if you go to equalizedigital.com/meetup. We are seeking additional sponsors. As someone noted in the chat, unfortunately, we do not have ASL interpretation today. We are looking for a sponsor to help us with the cost of ASL interpretation. We also do not have a sponsor for our daytime meetups live caption starting next month. We will still have live captions even if there’s not a sponsor.
[00:01:16] My company will just cover the cost of that because I know it’s very important. However, we are hoping since we’re not making money off the meetup and the WordPress Foundation doesn’t have the cost, they’ve said to cover the cost of that, that we can find a sponsor to help. Please, reach out to me if that’s something your company would be interested in. If you have any suggestions for the meetup, please do reach out to us. We have an email meetup@equaldigital.com that goes to myself and Paula, who is here today and you’ll see her talking a bunch in the chat. If you need something or if there’s something you think that we can do better, feel free to reach out to us at that email.
[00:02:02] So, who am I? I am Amber Hinds. I’m the CEO of a company called Equalize Digital. We are certified B Corporation. We specialize in WordPress accessibility. It’s a passion of mine. We have a plugin called Accessibility Checker, which audits websites for accessibility issues and puts reports on the post and page edit screens, sort of like your SEO plugins do.
[00:02:27] That’s what we are. If you want, you can find out more about us on our website, which I’ve already said that, and then, we’re on Twitter @EqualizedDigital. Our live caption sponsor for today is MediaSesh and Christina, who I’m not sure if I saw her come in or not.
[00:02:48] I don’t think she’s here today, but she runs a SEO consulting firm based out of Denver that helps businesses be found by their customers online and reach their fullest potential and search results. She kindly offered to sponsor live captions for today, which we very much appreciate. We always ask, if you can give a shout-out to our sponsors on Twitter and thank them for helping to make our meetup accessible. You can learn more about MediaSesh @MediaSesh, which is sesh.com, or you can find her @MediaSesh on Twitter.
[00:03:28] We also have a sponsor, Empire Captions, who has kindly offered to donate their transcription services to us after the meetup is over, so that we can have a corrected transcript and captions for our recorded video, which is super important and we very much appreciate this because when we were doing it as non-experts, it was taking us many hours.
[00:03:53] Empire Captions, we recommend checking them out if you are looking for a captioning solution. They also do audio description, which is descriptions of videos for people who cannot see them. It will describe what is happening or being shown in the visuals in the video.
[00:04:10] You can learn more about them at empirecaptions.com and you can find them on Twitter @EmpireCaption. We have two upcoming events that I want to just highlight. Our next event will be Monday, February 21st. It’s at 5:00 PM Pacific. If you’re on the West Coast and then there’s some other times, if you want to translate, 7:00 PM for me here in Central time. That will be Nicolas Steenhout, who if you’ve ever heard it, he has a podcast called the A11y, which stands for Accessibility Rules Podcast. He has been doing a series that I’ve really been enjoying where he does little sound bites.
[00:04:58] There may be five to seven-minute interviews with people with disabilities, and he asks them to describe their disability, talk about what challenges they experienced on the web, and then, if they had one piece of information for a designer-developer, what would they want to say? He’s going to come and give us a talk and share quotes from a lot of his podcasts and different users to give us an experience of the broad depth of challenges that different people of different abilities face on the web. That should be a really great talk.
[00:05:35] Then, following that up the next month in this same time slot on Thursday, March 3rd, we will be having a podcast from Ronnie Burt who’s at Sensei LMS and Automattic, and he will be talking about, in his presentation, accessibility for content creators, so things you can do while entering content in the content editor. I have a couple of speakers that I’m going to introduce today or different topics. Let me find Alex and I will pop up out a pin on here. There we go. Our tester today who is going to be working with me and be doing a lot of talking and I’m super excited to have him is Alex Stine. Alex is part of the accessibility team for Make WordPress.
[00:06:29] He started in web development doing tech support. Then, he moved into accessibility development and he is working as a DevOps engineer at a WordPress host. Not long after starting in tech support, Alex lost what vision he had and he’s now completely blind. This was a single event that motivated him to enter the accessibility world. He really wants to help others have access to all the information that everyone should have on the web. We’re really excited to have you here today with us, Alex, and we’re all going to hear more from Alex in just a minute.
[00:07:07] Today, we’re going to be looking at the Give WP Plugin and I’m going to find and add a pin on Matt. I don’t have Matt’s face, but I have a screenshot from the WordPress plugin repository up here. We’re going to be looking at Give WP. This is a plugin that we’ve used on some of our client sites. It’s a donation plugin if you haven’t heard about it.
[00:07:36] Basically, the goal of the plugin is to make it easier for organizations and individuals around the world to gather donations on their website for free.
[00:07:45] The base version of the plugin has over a hundred thousand active installs and they sell a number of different add-ons, one of which that newly came out was the peer-to-peer add-on, which we will be looking at today. We’re really excited to have Matt here and be having the opportunity to help them improve the accessibility of their product. Before I stop sharing my screen and I let Alex share his and take over, I want to go over some guidelines. This is only the second time we’ve done one of these meetups. After the first one we did, I had a debrief with our speaker who was Joyce Oshita from VMware and I realized that I probably needed to put a little bit of guidelines on these.
[00:08:32] We have two guidelines that I want to request everyone follow and respect during this meetup. The first one is that the goal– We have two primary goals. Number one, we want to give voices to the users. It’s really important that we give our tester room to speak. To that front, what I would like to do is I’d like to request that no one chime in until we ask, if people from the audience. If you have thoughts or ideas about how something could be improved, or if you noticed something that seems like an accessibility problem. I know we have a ton of experts here, which is awesome, put it in the chat. That’s a good place to put that in and I will intermittently ask if there’s any questions.
[00:09:16] If you’re also not sure about what Alex is experiencing, then feel free to put that in the chat. If I see that, then I might ask him, “Oh, hey, Alex, was this a problem for you or not?” We really want to make sure that we hear from our tester as much as possible today and not as much from our audience members. Hopefully, that will go well. Then, of course, our second goal for this is, in short, is no bashing, but I know it takes a lot for a plugin developer to be willing to step up in front of everybody and have their thing tested and possibly have problems pointed out.
[00:09:52] I really cannot applaud enough that plugin developers are willing to do this and that they do want to make their products more accessible, which is awesome. Of course, the goal of this is to provide positive actionable feedback to the plugin developer. I really want us to applaud their efforts to make their software more accessible and don’t leave here and be like, “GiveWP plugin has so many problems.” Right? Let’s figure out how we can help them make it better in a positive way that encourages more developers to want to come here and get that feedback. Those are my two requests for today. I’m going to stop sharing and I’m going to let Alex share his screen and, hopefully, his audio.
[00:10:41] >> ALEX: All right. Let’s see.
[00:10:46] [pause ]
[00:10:53] >> AUTOMATED SCREENREADER: [inaudible] controls window. Live transcription post captioning has been enabled. Press F6 for more information about who can see this transcript alert.
[00:11:21] >> AMBER: Can you pause for just one second, Alex, while I do a quick– what this is for people.
[00:11:25] >> AUTOMATED SCREENREADER: Participants can now see a screen alert.
[00:11:28] >> ALEX: Yes.
[00:11:28] >> AMBER: Okay. Also, I don’t know if this matters necessarily for us, but you may be zoomed out quite a bit. I don’t know if you wanted to reset it to 100% [crosstalk]
[00:11:36] >> AUTOMATED SCREENREADER: Form grid. Firefox Mozilla Form grid.
[00:11:39] >> AMBER: Just real quick, what we have is we’ve set up the GiveWP plugin on a sandbox site. It only has the main free plugin, so this is all the free plugin, and then, it does have the peer-to-peer add-on, which we’ll look at. It’s just using the main WordPress 20– What is this, 2021? The green one? [laughs] Theoretically, that theme isn’t doing too much to override what’s happening in the plugin, but there are sometimes instances where things conflict. Yes. That would be one thing I would, Alex, if you’re able to. Could you set your zoom on the browser to 100%?
[00:12:19] >> AUTOMATED SCREENREADER: [crosstalk] STO to everyone. I think he’s– New menu. Pull up bar sub-menu T102. Fullscreen. Repair. Texting. Page style. Zoom. Sub-sidebar. Sub– Zoom. Zoom. Menu. Zoom. CT zoom. CT actual size. CTR Zoom. Actuals from [inaudible] to everyone. Alex, if you hit CTRL+0 on your keyboard, it will go to 100 alert. Actual size CTRL 0, 1, level 1. Form grid. Sandbox dot–
[00:12:32] >> ALEX: Is that better?
[00:12:35] >> AMBER: No. If you hit CTRL+0, does it do it?
[00:12:37] >> AUTOMATED SCREENREADER: From [inaudible] to everyone. Command+0 on Mac alert.
[00:12:44] >> AMBER: Oh, command+0. That might actually work for you right now. That’s 110%, that’s probably a better view [crosstalk]
[00:12:52] >> AUTOMATED SCREENREADER: From [inaudible] to everyone CTRL+ increase-
[00:12:55] >> AMBER: I’m also wondering, do you want to pause the Zoom chat notifications so we’re only hearing the [crosstalk]
[00:13:05] >> ALEX: I really wish I knew how to do that because the speech is so slow, the chat lags behind. It’s also annoying for me, so there’s that.
[00:13:20] >> AMBER: Okay. Since it might take a while to figure out how to do that-
[00:13:24] >> AUTOMATED SCREENREADER: [inaudible]
[00:13:26] >> AMBER: -what I think makes the most sense is-
[00:13:27] >> AUTOMATED SCREENREADER: Reminder to everyone. You can turn off chat notifications for screen reader in the Zoom settings alert.
[00:13:30] >> AMBER: Yes. It’s in the zoom settings. If you think you can find it, we’ll do it.
[00:13:34] >> AUTOMATED SCREENREADER: [inaudible] currently for audio settings. [inaudible] Video. Video settings. Open participant– More options for participants. [inaudible] chat button. New share. Share. Annotate button. New share. Annotate button. Remote control– X button. More drop-down button. [inaudible] button. [inaudible] share. All imute– Currently muted [inaudible] button. Audio settings drop-down button.
[00:13:45] >> ALEX: The question is–
[00:13:47] >> AMBER: Yes, audio setting.
[00:13:47] >> ALEX: Audio setting?
[00:13:49] >> AUTOMATED SCREENREADER: Menu. Select a microphone. Microphone array. Intel smart– [inaudible] system object. Select a speaker. Realtek HD. Speakers. Realtek. [inaudible] system object. Test speaker microphone, switch the phone audio. Leave computer audio. Audio settings. Select a microphone. Microphone array. Intel smart audio settings.
[00:14:01] >> ALEX: Audio settings maybe?
[00:14:03] >> AMBER: Yes. Maybe.
[00:14:04] >> AUTOMATED SCREENREADER: From [inaudible] to everyone. There is a section for accessibility and Zoom alert.
[00:14:10] >> ALEX: First time I’ve heard of that. I’m not sure where it’s at.
[00:14:16] >> AUTOMATED SCREENREADER: Stop video. Alt [inaudible] audio set mute. Currently mute. [inaudible]
[00:14:22] >> ALEX: Maybe under more?
[00:14:23] >> AUTOMATED SCREENREADER: Menu. Record folder. Shows up [inaudible] Subtitle settings. Reactions.
[00:14:30] >> ?SPEAKER: There’s an accessibility section in these settings. Maybe it’s in there?
[00:14:34] >> AUTOMATED SCREENREADER: Hide [inaudible] Hide video panel. [inaudible]
[00:14:37] >> AMBER: Yes. That outside of the Zoom room?
[00:14:39] >> AUTOMATED SCREENREADER: [inaudible] checked. Stereo [inaudible] Leave. [inaudible] Le- [inaudible] Le- [inaudible].
[00:14:46] >> ?SPEAKER: There’s a bunch of screen reader results checked in mine.
[00:14:50] >> AUTOMATED SCREENREADER: Settings button. Close work processibility [inaudible] close button. Settings button. Settings window. List. Statistics selected.
[00:14:59] >> AMBER: Yes. There we go.
[00:14:59] >> AUTOMATED SCREENREADER: [inaudible] selected. People as shortcut selected. Accessibility selected. Type control. Overall type selector checked.
[00:15:04] >> ALEX: I never even knew this was here. [chuckles] See? We all learn something every day.
[00:15:08] >> AMBER: I think you’re still on the Statistics tab. You need to go back to the [crosstalk]
[00:15:11] >> AUTOMATED SCREENREADER: [inaudible] selected.
[00:15:13] >> AMBER: There you go.
[00:15:13] >> AUTOMATED SCREENREADER: [inaudible] caption font size 14. Close caption captions will [inaudible] [inaudible] button. Screen [inaudible] list. I am– chat– received check selected.
[00:15:23] >> AMBER: Yes. There we go.
[00:15:25] >> AUTOMATED SCREENREADER: Unchecked alert. [inaudible] Participant has joined left waiting room. Unchecked alert. Participant has joined left waiting room. post only check selected. Audio muted by host. Check selected. Video stopped by host. Audio mu, Video screen sharing started from them to everyone, [inaudible] recording permission granted result. Check public [inaudible] chat received. Check selected. Private meeting chat [inaudible].
[00:15:41] >> AMBER: Yes, you might that one. I don’t know if [crosstalk]
[00:15:45] >> AUTOMATED SCREENREADER: [inaudible]
[00:15:50] >> ALEX: Okay. Let’s hope that gives us some results.
[00:15:55] >> AUTOMATED SCREENREADER: List. Accessibility selected. [inaudible] Close caption font size 14. Close captions [inaudible] More drop down button.
[00:16:05] >> AMBER: Okay. The first thing we’re going to look at then is the form grid. This page, just to give you– Because Alex hasn’t really looked at this, so I’ll give a quick– This is the kind of page if you had a donation and you’re like, “I’m doing a bunch of different donation campaigns so I’m pretending this is an animal shelter and I put dogs you can donate to.”
[00:16:31] Alex, let’s say you want to donate to a dog. Could you– There are three instances of this that we put on here. One’s coming from a shortcode and two are using the block editor and they do different things. I have headings that describe what they are. If you wanted to come and donate to a dog at this animal shelter, would you be able to do that?
[00:16:51] >> ALEX: Well, I always like to start by jumping by heading because exploring the entire page with the arrow keys can be a very slow process.
[00:17:03] >> AUTOMATED SCREENREADER: [inaudible] from grid-level one. Form grid [inaudible] header level two. As a shortcode. Heading level three. Donate to [inaudible] level three link. Link. This cute dog needs only a little money. Link $250 of $100 raised. Link progress star 100. Link [inaudible]. Link f61fdf883 circa 944. Link heading level 3. Donate to [inaudible]. Link f61fdf883 circa 944.
[00:17:34] >> ALEX: If I had to guess, I would say that’s where we’re supposed to be clicking for this. We’ll activate this link and see what happens.
[00:17:45] >> AUTOMATED SCREENREADER: Link header level three donate to [inaudible].
[00:17:56] >> ALEX: Nothing as far as I can tell.
[00:17:58] >> AMBER: Yes. This one is from the Shortcode, which I didn’t keyboard test. Should that one link open, Matt? You put that one in.
[00:18:08] >> AUTOMATED SCREENREADER: [inaudible]
[00:18:09] >> MATT: Two different methods. One is that it will redirect to a form page. Other is that it will open in a pop-up. I don’t recall. I believe the default is that it should redirect. I also believe that the whole element is actually clickable, but-
[00:18:31] >> AUTOMATED SCREENREADER: [crosstalk]
[00:18:32] >> MATT: -I’m going to pull the sign up and double-check real quick. That one did get added last and most– Oh, there’s the pop-up.
[00:18:38] >> AUTOMATED SCREENREADER: This cute dog needs only–
[00:18:41] >> AMBER: Yes. [crosstalk]
[00:18:43] >> ALEX: Yes. The pop-up is probably at the bottom of the page.
[00:18:50] >> AUTOMATED SCREENREADER: [inaudible]
[00:18:52] >> ALEX: I’m just attempting to find the pop-up and-
[00:18:58] >> AUTOMATED SCREENREADER: [inaudible]
[00:19:03] >> AMBER: Do you want to pause for one second, Alex?
[00:19:11] >> ALEX: Sure.
[00:19:13] >> AMBER: I was just going to say– You could probably explain this, what happened and what probably would have been more desired, which is that you opened it, it opened a pop-up. We can see the pop-up, but it didn’t shift your focus into the pop-up. Now, you’re trying to find it. Also, did you hear–? Was there a pop-up open or modal opened alert?
[00:19:41] >> ALEX: No. I actually can’t find any dialog on the page at the moment, which is kind of odd.
[00:19:49] >> AMBER: I think on this particular– with the pop-up, you’d probably have to go through everything on the page, I would guess, in order to get to it, because it didn’t shift you there and it didn’t tell you that it opened. Then, my other guess is the headings on it are exactly the same, so if you were to try to navigate by headings, it would be the repeat of the, like, “Donate to Curley” heading is also in the popup. I don’t know. Would it be better to have a different heading or something so that you could jump to them?
[00:20:27] >> ALEX: Well, it focuses mainly. That becomes a non-issue.
[00:20:31] >> AMBER: Yes.
[00:20:36] >> AUTOMATED SCREENREADER: [inaudible]
[00:20:38] >> MATT: [crosstalk] that one is like– I’m not familiar with a way to tell you that a popup has opened. How is that achieved actually?
[00:20:50] >> ALEX: The best way to manage that is to render it as a dialog. Then, you can just literally call focus event on it. Usually, add a negative minus one tab index to the parent element of the dialog. You can add things like an aria-label to label the dialog, as aria described by for any description text you might have. Yes. The main thing there is just managing the focus and making sure that it is actually a real dialog, whether that be the dialog tag or the aria role dialog.
[00:21:40] >> MATT: I think at the moment, yes, like Amber was saying, it’s probably difficult to find the popup itself. Essentially, what you’re saying is as soon as the popup is triggered, if the focus goes into that immediately, then everything becomes a lot more clear.
[00:22:01] >> ALEX: Yes. Another thing you’ll want to do is actually prevent the focus from leaving the popup because if you get the situation where you tab out of the said popup, oh, that becomes not good.
[00:22:17] >> MATT: Yes. [crosstalk]
[00:22:21] >> AMBER: One thing you might look at, Popup Maker, I think, does this pretty well. The free version of Popup Maker, they have done a fair bit of accessibility where when a modal opens, it shifts focus in and they lock focus in the modal.
[00:22:43] >> MATT: Then, occasionally, you’ll want to get out of the modal. Maybe, I might have donate, maybe not, but you should be able to just hit escape to get out of the modal as well is what you’re saying.
[00:22:54] >> ALEX: Escape and a close button.
[00:22:57] >> MATT: And a close button. Yes.
[00:22:59] >> ALEX: Yes. I will also throw out there just because WordPress is awesome. We do have the accessible modal component for Gutenberg, so if you want to check that out.
[00:23:14] >> MATT: Interesting.
[00:23:20] >> AMBER: Do you think you want to try to get into this problem, Alex?
[00:23:23] >> ALEX: Well, that’s what I was looking to do. I’m not sure it’s actually possible.
[00:23:28] >> AUTOMATED SCREENREADER: [inaudible]
[00:23:32] >> ALEX: Oh, okay.
[00:23:33] >> AMBER: I think you’re in it now.
[00:23:34] >> AUTOMATED SCREENREADER: Button, [inaudible] frame button.
[00:23:40] >> ALEX: Yes. This isn’t a traditional popup. This is like a frame.
[00:23:44] >> AUTOMATED SCREENREADER: [inaudible]
[00:23:48] >> MATT: That’s right. It is a frame. Yes.
[00:23:53] >> AUTOMATED SCREENREADER: [inaudible]
[00:23:55] >> ALEX: If we focus here on the link and try to tab anymore.
[00:24:00] >> AUTOMATED SCREENREADER: [inaudible]
[00:24:02] >> ALEX: Eventually, we reach a point where tabbing becomes interesting. I was able to make it to a “Donate now” button.
[00:24:12] >> AUTOMATED SCREENREADER: Button.
[00:24:16] >> ALEX: An unlabeled button, which I take to be probably closed.
[00:24:20] >> AUTOMATED SCREENREADER: Button. Button. [crosstalk]
[00:24:25] >> AMBER: Those buttons, Alex, are actually– they’re basically like pagination buttons because this is styled like a three-page paginated form, the close button you actually focused on earlier, but it didn’t read out close, so I think it’s missing. It’s unlabeled. Also, I’m not sure if it was a button because I didn’t hear it say “button” when you went to close. It was focusable because I saw your focus go to it.
[00:24:51] >> ALEX: Yes. I think the issue here is that it’s a frame. Screen readers have varying support for frames, most of them very bad. This would be much better served as an actual dialog.
[00:25:10] >> AMBER: You’d rather see it as like a div element?
[00:25:12] >> ALEX: Or even just the dialog tag or what’s in it.
[00:25:16] >> AMBER: Oh, dialog tag?
[00:25:17] >> ALEX: Yes, either one. You can definitely add rule dialog if that’s an easier fix.
[00:25:26] >> AMBER: Okay. Do you want to see if you can donate with that “Donate now” button?
[00:25:33] >> AUTOMATED SCREENREADER: Frame button. Button. Button. Button. Donate now button. [inaudible]
[00:25:40] >> ALEX: All right. Let’s try for $250 because who doesn’t love that?
[00:25:47] >> MATT: Yes. Be generous. [chuckles]
[00:25:52] >> ALEX: Okay. I pressed enter on $250 and nothing happened.
[00:25:57] >> AMBER: What didn’t happen to see now is there’s a field above that shows the dollar amount you’ve selected. It changed it from 100 to 250, but, yes, you didn’t get the alert that there’s actually a continue button down there.
[00:26:14] >> AUTOMATED SCREENREADER: [inaudible] Continue button.
[00:26:18] >> ALEX: Okay. The best way to do something like this would be to make this a combo box. Essentially, what would happen is you would be able to select an option amount, as it would be a normal form control. Then, tab would–
[00:26:34] >> AUTOMATED SCREENREADER: [inaudible] custom amount button.
[00:26:38] >> ALEX: You can land on this custom amount or you could-
[00:26:40] >> AUTOMATED SCREENREADER: Continue button.
[00:26:42] Alex: -land on continue or you could even have the custom amount as an option in the combo box, which would be even better. It would have a label that says something like “Select amount.” You focus the combo box and you’re able to select it and move on. If customers selected, then you can move the focus into the custom dollar amount field.
[00:27:10] >> MATT: Yes. That’s actually one thing that we had mentioned, Amber, was that right now, what we’re doing, we’re going, kind of, painstakingly through the donation form itself. This is actually like– I’m not sure how many folks have followed the journey of GiveWP but it’s– How old is it now? It’s almost seven years old. The markup from this donation form is basically also seven years old. [chuckles]
[00:27:39] We are in the process now of creating a whole new way to render our forms, which we are making sure that the markup is going to be far more accessible going forward, once we have those new forms going. We have a very limited ability to really make serious changes to the forms in their current state because of the nature of how they were built forever ago. This calendar year, we’re going to be pushing out some new forms.
[00:28:14] >> AMBER: That’s awesome.
[00:28:16] >> MARK: Yes. All I’m saying is all of this is essentially in the process of being scrapped. [laughs]
[00:28:24] >> AMBER: Okay. Maybe it makes sense to keep going down the page rather than continuing on the forms is what you’re saying?
[00:28:30] >> MATT: Yes.
[00:28:31] >> AMBER: Okay. Can you escape from this and not donate to this dog?
[00:28:35] >> AUTOMATED SCREENREADER: [inaudible] Continue button. [inaudible] custom amount button.
[00:28:41] >> ALEX: It does not appear so.
[00:28:42] >> AUTOMATED SCREENREADER: Dollar 100 button. Dollar 50 button. Dollar 25 button.
[00:28:46] >> ALEX: The list is back open again. That’s interesting.
[00:28:49] >> AUTOMATED SCREENREADER: Dollar 10 button. Select the 250. [crosstalk]
[00:28:53] >> ALEX: Yes. We just really are progressing straight up the center of the form. Now, maybe you should be able to escape at this point I think.
[00:29:04] >> AMBER: There might be a close button above it if you [crosstalk]
[00:29:09] >> AUTOMATED SCREENREADER: [inaudible] circa 944 [inaudible]
[00:29:12] >> AMBER: That’s your close button.
[00:29:13] >> MATT: [crosstalk]
[00:29:15] >> AMBER: It doesn’t say “close.” I think it might have read out like an ID or something because it’s unlabeled.
[00:29:22] >> ?SPEAKER: It may actually be hidden from view at this point also and only picked up by a tab.
[00:29:29] >> AUTOMATED SCREENREADER: [crosstalk]
[00:29:32] >> AMBER: Yes. That was one thing which doesn’t apply to screens but that was one thing I noticed in your screen readers. The color contrast on that, the close button is almost unreadable because it was dark text on a dark button.
[00:29:47] >> ALEX: What comes close appears not to do anything either.
[00:29:51] >> AMBER: Further down the page, I have this inserted in and it has the redirect action. I have a heading labeling it, so that might be worth testing [crosstalk]
[00:30:03] >> AUTOMATED SCREENREADER: [inaudible]
[00:30:09] >> AMBER: Could you pause for one second? I’ll just say this because I already messaged Matt about this, the images, and the overlay. I think they’re working on some styles. In case [chuckles] anybody’s noticing, there is a text overlapping images that is unreadable, Alex. I just thought I would call that out, but they’re working on that. It’s because I did the thing where I pretend I don’t know anything about cropping images and I just uploaded random-sized images from [inaudible] like a client would. [chuckles]
[00:30:44] >> MATT: Exactly what would promotions would do.
[00:30:46] >> AMBER: It needs like an overflow hidden to force them to stay in their container. [chuckles]
[00:30:50] >> ?SPEAKER: Is it possible for anyone to hit this sandbox page? Can we put the link in the chat? I’d like to see if it’s possible.
[00:31:02] >> AMBER: Yes. Do you mind if I just send the front-end link, Matt?
[00:31:05] >> MATT: Yes. That sounds great.
[00:31:07] >> AMBER: Okay. Yes. I’ll put the link in the chat.
[00:31:08] >> ?SPEAKER: Thank you.
[00:31:12] >> AUTOMATED SCREENREADER: [inaudible]
[00:31:18] >> ALEX: I’m not sure where the redirect is.
[00:31:27] >> AMBER: There should be a heading, too, that says– that includes the word like, “built with redirect,” if you just listen to heading [crosstalk]
[00:31:34] >> AUTOMATED SCREENREADER: [inaudible]
[00:31:37] >> ALEX: Oh, there it is.
[00:31:39] >> AUTOMATED SCREENREADER: Heading level three as a shortcode. [inaudible]
[00:31:44] >> AMBER: Yes. Okay. That got a little thrown off because actually, I think that was the one you were on with the Shortcode. Can you find the age three that says, “As a block”?
[00:31:54] >> AUTOMATED SCREENREADER: [inaudible] heading level three.
[00:31:58] >> AMBER: It’s right after that. Yes, as a block, so right below that. Try going to one of those.
[00:32:03] >> AUTOMATED SCREENREADER: Charles. Sandbox document. Links to content. [inaudible] heading level two.
[00:32:13] >> AMBER: This might be a quick fix before you get the modals fixed, which is you could educate your customers, Matt, that if they need their thing to be accessible, they should use the redirect because this work way better than Alex rather than the pop-up.
[00:32:27] >> ALEX: This is also a frame, though, so this is going to have varying support.
[00:32:32] >> AUTOMATED SCREENREADER: Button. Heading level two. Donate to Charles. Button. [inaudible] frame button.
[00:32:41] >> AMBER: Yes. Really, the question is should it be an Iframe or should it just be like a page on the– like a post single or something. Right?
[00:32:50] >> ALEX: Definitely no Iframes.
[00:32:54] >> ?SPEAKER: If you guys don’t mind, I’d like to add in that if you notice in web design and development, that we have a tendency to want to hide data, and it makes it so much more complicated to program, to make right. If you noticed, if you go to apple.com or you go to mit.edu, probably the most technologically advanced people, right? You’ll notice that they don’t use carousels. They don’t use pop-ups. They don’t use all of these things because not only are you losing SEO because a crawler won’t come in and find that content, just as Alex has demonstrated.
[00:33:47] Also, I just want to bring that up for everybody on the conversation because we need to teach our designers to try to be more creative with the beauty of things and keeping it all on the page, and don’t go to these types of styles or things. Even though they’re nice for us visually, we need to be able to challenge ourselves to say, “It’s okay for me to scroll. It’s okay for me to see all that data.” I just want to introduce that as an idea.
[00:34:28] >> ALEX: I agree.
[00:34:31] >> ?SPEAKER: Awesome.
[00:34:31] >> MATT: We thought that the content is hidden. The content is on the page, and it is absolutely scrollable and searchable. I think you were talking about search engines, but I think the navigation aspect of being able to navigate from the keyboard is definitely highly challenging for sure. The redirect method seems to have been a lot easier. Alex, correct if I’m wrong. You’re still able to get into this form even though it is in the Iframe, correct?
[00:35:01] >> ALEX: Yes, but I won’t use that as a guarantee. Different screen readers have varying support and also, you have to take into account user skill. I’m a web developer. I know how to use these things. If we were to look at this from a normal user’s point of view-
[00:35:22] >> AUTOMATED SCREENREADER: [inaudible]
[00:35:23] >> ALEX: -this is how it would look. We’d start at the top. I kid you not, I graduated with a lot of people that did this. They would do this through the whole page.
[00:35:35] >> AUTOMATED SCREENREADER: [inaudible]
[00:35:40] >> ALEX: Okay. We hear “donate now,” but we have to remember our context from the previous page. It doesn’t read any content above this button, and it was almost like an empty tab stop in between navigation and here. For most users, they would’ve been done by now.
[00:36:07] >> AMBER: I’m going to ask you. I think that empty tab, that might have been when you got to the Iframe. Is it helpful? Because I noticed this doesn’t have a title attribute. Would it be helpful to have a title attribute on the Iframe?
[00:36:18] >> ALEX: I mean, generally, title attributes are discouraged period because those also have varying support in screen readers. I don’t know. To tell you the truth, I’ve never seen an accessible Iframe yet. Maybe it won’t exist, but I’ve never seen one.
[00:36:40] >> MATT: I think typically, we would have– Whoever would be building out this site would have an H1 and a paragraph that would come before this form. In this particular case, it’s just a form on a page. Generally speaking, most of our GiveWP users are creating a whole marketing page, and then, the form is just one piece of the whole page. I don’t think that that’s typical. Nevertheless, I think trying to provide as much context as we can here would be helpful. There is context up above that donate now button. As you are gapping through, obviously, it skipped that. It didn’t say, “Donate to Charles. This cute dog needs a lot of money,” [chuckles] which is the context that it should have given you, but it didn’t.
[00:37:26] >> ALEX: Well, the other way to look at this is Windows has a very different interaction model than Macs do. What essentially would happen on a Mac is– Let’s start on the top page.
[00:37:42] >> AUTOMATED SCREENREADER: [inaudible]
[00:37:48] >> ALEX: Here we are in the frame, but it would be right before the frame, it would announce a frame, then you’d have to interact with it. It’s actually an extra step to get in these frames with voiceover.
[00:38:01] >> AMBER: You’re currently on a PC, right?
[00:38:03] >> ALEX: Yes.
[00:38:05] >> AMBER: What screen reader are you using? Because I think we probably [inaudible] at the beginning.
[00:38:08] >> ALEX: NVDA currently.
[00:38:10] >> AMBER: Okay. Yes. That’s my experience because I have a Mac and it’s more challenging for me to get in. It says, “You’re on frame. To interact with this frame, do you control–” My VoiceOver keys, I have to hit three keys to even get into it.
[00:38:26] >> ALEX: It’s very challenging to handle focus in frames, so it’s very possible that you could start interacting with this frame and get completely disorientated. With VoiceOver, that is not a good thing because as I already mentioned, VoiceOver’s pretty much a nightmare to do anything with already. It really shows when we don’t get accessibility updates from our OS manufacturer, VoiceOver had a extreme lack of updates, and suffers from issues that sometimes you don’t have on Windows.
[00:39:09] The same could be true for Windows. There are some things on Windows you may not experience on Mac. The biggest advantage to Mac is they have a much more accessible terminal than on Windows. It’s very interchangeable.
[00:39:24] >> AMBER: Do you want to go to the donor grid page and we can see if you wanted to look up who’s donated to the dogs?
[00:39:34] >> AUTOMATED SCREENREADER: [inaudible]
[00:39:42] >> MATT: [crosstalk], Alex, it’s amazing to me how quickly you do find all these things, especially how fast the screen reader is reading. Yes. It’s just amazing to me. I really appreciate getting to see how you navigate this site. It’s amazing.
[00:39:59] >> ALEX: I’d be happy to demonstrate at the end what my actual listening speed is because this is painfully slow for me.
[00:40:07] >> MATT: Oh, my goodness.
[00:40:08] >> ALEX: To give you an idea, it’s at 50%. I usually keep it around 90.
[00:40:13] >> MATT: Oh, wow. That’s amazing.
[00:40:16] >> ?SPEAKER: Awesome.
[00:40:16] >> AMBER: Yes. Well, we appreciate you turning it down for all of our ears.
[00:40:19] [laughter]
[00:40:20] >> AUTOMATED SCREENREADER: [inaudible] RP. Heading level three, random person. RP. P-R-P.
[00:40:27] >> ALEX: RP for random person. Not sure I know what exactly that means.
[00:40:35] >> AMBER: That is a placeholder because I think it’s pulling, if there’s a Gravatar, there’s one where I use my real email address and it pulled my image. If someone doesn’t have a Gravatar set up and it’s doing their things, but I’m wondering would you rather just [crosstalk] that for that [inaudible] hidden on it, so you don’t even know that there’s a niche–? It’s like decorative, right?
[00:40:55] >> ALEX: Yes.
[00:40:57] >> AUTOMATED SCREENREADER: [inaudible] random person. Heading level three.
[00:40:59] >> ALEX: In order for this page–
[00:41:03] >> AMBER: Yes. I mean, that’s probably on me. I didn’t put an H2 but although, I guess, maybe the feedback on that might be you might want to give a toggle in your block to allow people to choose what their heading levels should be, because if they don’t think to put an H2 on the page, then it would be out of order. Right, Alex?
[00:41:20] >> ALEX: Yes. That’s always a challenge with these typed plugins is how they integrate with content. It’s something that many, many authors face.
[00:41:31] >> MATT: Sorry. Was that an H3? Was that what that was?
[00:41:34] >> ALEX: Yes.
[00:41:35] >> AMBER: I think that also would apply to your form grid because I noticed like I put a– those are also H3s and it was fine because I had H2s but then, when we had the Shortcode and the block, we had H3s for those. Really, in that instance, the form, the grid, it should have made those H4 headings to nest them under. It’s like giving your users the ability to choose what heading level they want to use would be nice.
[00:41:58] >> AUTOMATED SCREENREADER: $100, February 3rd, 2022, FW. Heading level three [inaudible]. $50 February 3rd, DW. Heading level three [inaudible]
[00:42:11] >> AMBER: How is that?
[00:42:17] >> ALEX: Oh, we’re about to find out.
[00:42:20] >> AUTOMATED SCREENREADER: [inaudible]
[00:42:28] >> ALEX: Okay. This is going to be a challenge.
[00:42:32] >> AUTOMATED SCREENREADER: [inaudible]
[00:42:35] >> MATT: Get the whole bunch of folks, I think.
[00:42:37] >> AUTOMATED SCREENREADER: [inaudible]
[00:42:41] >> ALEX: Essentially what happens is load more buttons are a real pain and the reason being is because of when more content is loaded, my focus stays on the load more button, and now there’s X number of items above it. Essentially what has to happen is you have to remember where you left off, navigate either backwards, or start from the top of the page, and navigate down to where you were, and keeping in mind where you left off to find out where the new content starts.
[00:43:21] The best thing you could do here is you could focus the most recently loaded item after the load more action completes. In this context, you can add a tab index of minus one and you can focus the heading.
[00:43:41] >> AMBER: How do you feel about the way the WordPress media library did it where they added a button next to the load more that’s like jumped to most recently loaded item? Do you like having to choose it or would you rather that it just happens automatically?
[00:44:00] >> ALEX: I’ve seen some discussion around it. I’ve never actually tested it, so shame on me for that because I know there was a lot of work that went into it. Yes. I don’t know. I have also never had a media library with that many items. There’s also that.
[00:44:21] >> AMBER: Would you prefer that it just shifts you automatically or would you rather that you have a button that you can choose to make it do that?
[00:44:30] >> ALEX: Me, personally, I think I would want it to shift automatically because load more is one of those very much a context issue type deal. It could be different every time in theory or the user might not know exactly what they’re looking. Well, what I’m getting at is if you know the item you’re looking for is on Page 3, you just click Page 3. In the context of a load more, you may not exactly remember how many times you selected load more. There’s no real context to tell you where you are at any given time. I actually liked the pagination model a lot better but that would, in my opinion, the automatic focus after load more is the way to go.
[00:45:19] >> MATT: Yes. Similar feedback to opening up the form and a modal where, after you click on it, we should reset the focus into the form automatically. Yes.
[00:45:31] >> ALEX: That’s a must. I mean, you can’t–
[00:45:37] >> AMBER: On this page, there is one person, George Jetson from Spacely Sprockets [chuckles] who has injured a very long comment and I’m wondering if you’re able– it’s basically truncated and then there’s a link to open it, to read the whole thing. I’m wondering George Jetson.
[00:46:00] >> AUTOMATED SCREENREADER: [inaudible] $1,234. February 3rd, 2022. [inaudible]
[00:46:08] >> ALEX: Okay. A couple of issues here.
[00:46:16] >> AUTOMATED SCREENREADER: [inaudible]
[00:46:17] >> ALEX: Read more is not a button or a link, clicking on it, may or may not do anything.
[00:46:25] >> AUTOMATED SCREENREADER: There’s a really, really long comment to see what happens. [inaudible]
[00:46:34] >> ALEX: Well, the good news is clicking on it does do something, then, it continues reading. I actually like that.
[00:46:41] >> AMBER: Also, just so you know, what context does, this one opened a pop-up and it shifted your focus into the pop-up when it opened.
[00:46:48] >> AUTOMATED SCREENREADER: Command. Command. That’s a really, really long command. Command. Command. [inaudible]
[00:47:02] >> MATT: [crosstalk]
[00:47:04] >> AMBER: Oh, you were. Can you close it?
[00:47:09] >> AUTOMATED SCREENREADER: [inaudible] Button.
[00:47:13] >> ?SPEAKER: Now, it just says button. That was it. That is it.
[00:47:18] >> AMBER: It’s just not labeled.
[00:47:19] >> ALEX: What I would do here is I would render this as a dialogue, make sure the focus doesn’t go anywhere, add a close button at the top, and keep your close button at the bottom because I think close buttons in both places actually work well, I hear, and I would probably throw a heading one in here just with a comment or a name so we don’t lose context on what just happened with this dialogue.
[00:47:51] >> AMBER: That’s an interesting point because for us, visually, that close button is at the top, but it’s actually at the bottom in the dom.
[00:48:00] >> ALEX: Yes. Of course, close button, labeling super easy, throw an aria-label on it, call it a day. All right. As far as what happens when we select close.
[00:48:16] >> AUTOMATED SCREENREADER: [inaudible] grid. Sandbox. Mozilla Firefox. Private browsing. [inaudible] grid. Sandbox. Mozilla Firefox. Private browsing [inaudible] grid. Sandbox document. Content [inaudible] proudly powered by [inaudible] WordPress.
[00:48:23] >> ALEX: Yes. That’s got to get fixed, too.
[00:48:27] >> AMBER: Can you explain what happened?
[00:48:28] >> ALEX: We went from the top of the site all the way down to the bottom. What needs to happen is when a dialogue is opened, the focus should be returned to the trigger, the dialogue. In this case, it would be read more.
[00:48:43] >> AMBER: That you’d be back where you were in the order of the page?
[00:48:47] >> ALEX: Yes. so a couple–
[00:48:49] >> AMBER: Do you think– Oh, sorry.
[00:48:50] >> ALEX: Go ahead.
[00:48:51] >> AMBER: I was just going to ask you do you think that that [inaudible] should have screen reader texts on it, though, would say like, “Read more of George Jetson’s comment,” in case there’s multiple of these read mores?
[00:49:02] >> ALEX: Yes. That was what I was going to mention and you should also render that as a button because right now, there is probably no good way to focus on it and VoiceOver may not even let you click it because VoiceOver is a lot more particular about these things than NVDA or [inaudible]. You can get to it via the arrow keys as far as actually focusing it. That’s not going to be an option. Throw a roll button on it and you can cheat with tab index to zero. I know there’s probably a lot of experts in here that are really going to frown on that, but it is what it is. It would be more accessible that way.
[00:49:50] >> AMBER: There were some questions– I think you had suggested in the pop-up to add a heading and maybe you said I missed this, an H1, and some people were saying there should be only one H1 per page. That’d be like an H2 or something?
[00:50:05] >> ALEX: Well, at that point, you’ve changed context, so if you’re no longer able to see any headings, you’ll be in the dialogue. H1 should be fine, I think. I don’t think it would make any sense to add an H2, for example, because there is no other headings.
[00:50:24] >> AMBER: You’re thinking about headings relative to the context of what you are in rather than the page as a whole?
[00:50:33] >> ALEX: Yes. The important thing to remember with accessibility in this way is, especially with screen readers, you are very much centrally focused on one item. In the example of this read more, you are in a dialogue. The rest of the page at this point does not matter.
[00:50:54] >> MATT: I think their concern is from an SEO perspective. That messes things up because all the markup is still in on the same HTML document.
[00:51:13] >> ALEX: Well, in theory, you could wrap it in a span tag. It really doesn’t matter, as long as you link it with ARIA, labeled by.
[00:51:27] >> ?SPEAKER: Yes.
[00:51:30] >> MATT: I would prefer a heading because I think that’s really simple to jump into the top of dialogues. I won’t argue the SEO perspective.
[00:51:39] >> AMBER: Okay. I’m going to skip the donor dashboard for now. Can you go to the peer-to-peer campaign?
[00:51:55] [automated screenreading]
[00:51:58] >> AMBER: What this is, is basically, it allows people to build their own fundraising campaigns that they can invite people to create teams, and then teams can have people. I don’t know the best example. Hopefully, everybody knows what that means. Let’s say there’s a Hogwarts team and there’s a Slytherin team. If you wanted to join one of these teams to fundraise, do you want to go choose Hogwarts or Slytherin? Not Hogwarts. Wait, Gryffindor. Sorry. Gryffindor or Slytherin? If you wanted to join one of their fundraising teams and help fundraise, would you be able to do that?
[00:53:30] [automated screenreading]
[00:53:35] >> ALEX: Okay. These links, as you can hear, don’t add any context. It says “Join team,” but it doesn’t tell you what team.
[00:53:54] >> AUTOMATED SCREENREADER: Join team link.
[00:53:57] >> ALEX: Join what team?
[00:54:01] >> MATT: In that context, we could provide that as an ARIA label.
[00:54:07] >> ALEX: Yes, you could do that. ARIA labels, you would want to make it read something like “Join example team.”
[00:54:18] >> MATT: Yes. Visually, right now, that would be hard to fit the team name in the space where that button is. Sometimes team names are very long. It could be a challenge. If we can give it context with the ARIA label, that would– I got it. That makes sense.
[00:54:42] >> AMBER: Do you want to join Gryffindor or Slytherin?
[00:54:45] >> AUTOMATED SCREENREADER: [inaudible] Sylethrin
[00:54:50] >> ALEX: Well, I don’t know anything about either one, so [laughter] [inaudible] Yes. I’ve never read any of the books.
[00:54:58] >> AMBER: Gryffindor has a more team members. That would be your first “join team” button.
[00:55:03] >> ALEX: All right, let’s go there.
[00:55:07] >> AMBER: There might be more people on that.
[00:55:15] [automated screenreading]
[00:55:23] >> AMBER: Real quick, would it be [inaudible] for you to be focused here, instead of back at the top of the page?
[00:55:43] >> ALEX: Because the page reloaded, I’m fine with being focused back at the top of the page.
[00:55:48] >> AMBER: Okay.
[00:55:49] >> ALEX: The only time I really worry about managing focus is in the event that dialogs are more dynamic type content.
[00:56:00] [automated screenreading]
[00:56:01] >> ALEX: It does not appear that these form fields actually have labels. Sounds like placeholder text.
[00:56:10] >> AUTOMATED SCREENREADER: Space, space.
[00:56:11] >> AMBER: That’s correct. They do not have labels. Matt, one thing that might be good to know is, for people that have like cognitive disabilities or memory loss, that’s why it’s important to have a visible label above. Even if you were to have a label for screen readers, you still are supposed to always have a visible label above every field.
[00:56:32] >> MATT: I’m a little surprised at that because I know that we were digging into that. I know that the team is fully aware of that need. I’m a little bit surprised, I have to say.
[00:56:48] [automated screenreading]
[00:56:49] >> ALEX: What should our first name be?
[00:56:52] >> AMBER: Well, Harry Potter hasn’t joined this team yet.
[00:56:54] >> ALEX: Well, could you give me something I could spell? [laughs]
[00:57:01] >> AMBER: You can make it whatever you want.
[00:57:04] >> ALEX: How about test? I can spell test.
[00:57:08] >> AMBER: Okay.
[00:57:08] >> ALEX: How about “testing?” I can spell that too. Now, one thing I will add is it would be really nice to know if these fields are required or not. You can do that with the required attribute, if you want HTML five validation, or you can do that with the ARIA required attribute. Either one works.
[00:57:31] >> AMBER: What if you tried to submit the form right now without filling it anything else?
[00:57:36] [automated screenreading]
[00:57:38] >> ALEX: It focuses you back in email, but doesn’t tell you why.
[00:57:46] >> AMBER: Yes. There is an error. “This field is required” or something.
[00:57:53] [automated screenreading]
[00:57:57] >> ALEX: There’s no errors above the form either, or below.
[00:58:07] >> ?SPEAKER: It’s relying visually, just on a red outline around the box.
[00:58:12] >> ALEX: Yes. You can’t get away with that. There had to be some visible message somewhere. I would think even from a general UX perspective.
[00:58:27] >> AMBER: I don’t know if you’ve ever used Gravity Forms, Alex. I feel like the way Gravity Forms has handled some of their error messages, they put an error above, but then there’s also an error message on every field that’s visible and will be read out when you engage it with the screen here.
[00:58:42] >> ALEX: Yes. I enjoy those. Those are nice and simple.
[00:58:46] >> AMBER: You want to put a fake email address in here.
[00:58:51] >> ALEX: Oh, sure.
[00:58:54] [automated screenreading]
[00:58:59] >> ALEX: How many emails do you think actually gets into this address?
[00:59:03] >> AMBER: I’m sure it bounces. I use @website.com all the time.
[00:59:09] >> ALEX: All right. Password.
[00:59:13] [automated screenreading]
[00:59:17] >> AMBER: Okay. Well, I’ll just tell you so we don’t waste too much time. A message popped up there that says your password must have at least six characters. I don’t think it told you that.
[00:59:28] >> ALEX: Yes. It most certainly did not.
[00:59:30] >> AUTOMATED SCREENREADER: Password must have at least be six characters.
[00:59:33] >> ALEX: You can do that. What’s the best way to do that for a field? I don’t know. I’m not confident enough to start talking about like fieldset and legend elements because I don’t have a lot of experience with them. Maybe that, I don’t know. Maybe somebody else could comment on the best way to deal with a message like that? [crosstalk] If Gravity Forms does it, then that should be something to copy from.
[01:00:05] [automated screenreading]
[01:00:11] >> ALEX: Any more errors?
[01:00:18] >> AMBER: No.
[01:00:23] [automated screenreading]
[01:00:24] >> AMBER: I was just going to ask. I think that’s good. I like that it labels the current step. I’m assuming that’s helpful to you to know where you are. I know we want to point out things that could be improved. I think that’s helpful and sounds good.
[01:00:54] >> ALEX: Yes, it’s very helpful. I actually become rather annoyed when there are steps that are not marked current, like that’s useless. Of course, there are [crosstalk] marked visually, but not necessarily for screen readers. Very rarely does it ever do you any good.
[01:01:18] >> AMBER: Would it have been helpful for the heading on this to change when we’re actually joining a team, so instead of “Start fund–“? This is the main. Should it have been like, “Join the Gryffindor team” or whatever, to have that context?
[01:01:36] >> ALEX: Yes, that could definitely help. Context is everything when you can’t see what’s going on with the screen. Yes, any little bit you can do helps, for sure.
[01:01:51] [automated screenreading]
[01:01:56] >> ALEX: Oh, look. It already did the work for us. I’m happy with that.
[01:02:07] [automated screenreading]
[01:02:08] >> AMBER: [chuckles]. I was going to ask you. Did you know what that was?
[01:02:10] >> ALEX: It just looked like text to me.
[01:02:16] >> AMBER: Okay.
[01:02:16] >> MATT: You didn’t know– Did you know that you were in the text area and that that was placeholder text?
[01:02:23] >> AMBER: And you could either keep it or replace it?
[01:02:25] >> ALEX: Yes, [inaudible]. That was good.
[01:02:28] >> AUTOMATED SCREENREADER: Profile image. No profile image for your profile. Accepted formats are PNG and [inaudible]. For best results use 250 x 250 pixel image size. [inaudible] image. Personal fundraising goal. Upload an image. Personal fundraising goal. Dollar. [inaudible] personal fundraising [inaudible] image. ELL.
[01:02:41] >> ALEX: This upload an image button, well, it’s not a button. It needs to become a button.
[01:02:47] >> MATT: Yes, it’s one of those trackable upload areas.
[01:02:56] >> AMBER: I think, in that case, you’d want to have that but also have a button inside it, right, a style to look like it’s inside it, but it would be below it maybe?
[01:03:07] >> ALEX: They know this does nothing.
[01:03:10] [automated screenreading]
[01:03:11] >> AMBER: Oh. It opened.
[01:03:13] >> ALEX: Yes, I’ve seen these quite a bit. Try to render that as a button if you can, and it should be fine.
[01:03:22] [automated screenreading]
[01:03:26] >> ALEX: Okay, this is another field that needs a what, label?
[01:03:34] >> AUTOMATED SCREENREADER: Dollar personal fundraising goal.
[01:03:35] >> ALEX: Here, you have personal fundraising goal, but if you focus the field.
[01:03:39] [automated screenreading]
[01:03:40] >> ALEX: It doesn’t actually communicate that, so that would be something good to fix. Can you use a label for that?
[01:03:54] [automated screenreading]
[01:03:55] >> ALEX: Then there’s “Create profile.” I guess we’ll see what happens.
[01:04:00] >> AUTOMATED SCREENREADER: Unavailable.
[01:04:09] [silence]
[01:04:09] >> AMBER: [crosstalk]. There’s a success message that is visible to us. It says, “You’re ready to start fundraising,” and then you can access your profile or tem below.
[01:04:23] [automated screenreading]
[01:04:24] >> ALEX: You would probably want to– Is there’s no option to refresh the page for that?
[01:04:38] >> AMBER: Because on the other steps it refreshed the page and you liked that.
[01:04:41] >> ALEX: Yes. I can’t see change in the model here.
[01:04:52] >> AMBER: The options are refreshing the page completely or, when this part loads, forcing focus on that “You’re ready to start fundraising” message.
[01:05:02] >> ALEX: Yes, I don’t really need. The only issue you’re going to see in focusing content like this is mobile devices don’t always work. Actually, very seldom, if they ever work, especially voiceover [inaudible] on the iPhone, for example. It’s very, very, very challenging to make mobile focus work. If there is a way to reload this page, that would be the better way to go because it fits your current model already.
[01:05:35] >> AMBER: Do you think– This is where we get into weird semantics of language. Do you want to hear a little “Your profile has been successfully created” first, “you’re ready to start fundraising?”
[01:05:54] >> ALEX: No.
[01:05:54] >> AMBER: You don’t think that matters?
[01:05:56] >> MATT: Success is success.
[01:06:00] >> AMBER: Okay.
[01:06:05] [automated screenreading]
[01:06:09] >> MATT: All of that text is customizable by the admin. They can word it how they want.
[01:06:17] >> AMBER: One thing I will say, I was super impressed having to set up this demo thing at how quick it was with your [inaudible]. I was thinking, man, I’m going to have build all these forms. There’s like three clicks, and it was like, “Here’s all the default stuff.” That is awesome, and congratulations on it because I’m sure it took a ton of work to prebuild that onboarding stuff. It was great.
[01:06:37] >> MATT: Thank you. I also, overall, Alex, it feels like you navigated through this whole peer-to-peer process a lot more easily than you did our donation forms. Is that right?
[01:06:51] >> ALEX: Oh, yes.
[01:06:53] >> MATT: That’s encouraging because we did just build this, [laughs] compared to the forms that we built seven years ago. It feels like we’re improving. Slowly but surely.
[01:07:07] >> ALEX: Yes, [inaudible] which is great.
[01:07:10] >> MATT: Yes, but the giant oversight of no labels on those fields, that’s a big surprise to me, actually. That’s an easy fix.
[01:07:21] >> ALEX: Yes.
[01:07:22] >> AMBER: Would it helpful to have him on going to either one of these other profiles or the team to give you some feedback on either of those?
[01:07:30] >> MATT: I’m not sure. I don’t know how much time we have. We’re at our hour, and I do have other meetings as well.
[01:07:42] >> AMBER: [crosstalk] 11:30 is what we have for our stock–
[01:07:46] >> MATT: I don’t know. I was curious if other people had input or feedback too.
[01:07:50] >> ?SPEAKER: I do
[01:07:53] >> AMBER: [crosstalk] We also didn’t get a chance to look at your dashboard, but I don’t know if anybody else has any questions or thoughts?
[01:08:00] >> ?SPEAKER: I have thoughts. [laughs] [crosstalk] It’s something that– I’ve solved it on my own site, when I saw the pain that Matt had when he saw the join now button, and it’s so cute and it’s in that spot. I had the whole team name their– [crosstalk] What I ended up doing was, A, you can use FlexBox and you can do order, if you want the button to show up after you’ve already announced the team, but that doesn’t help the screen readers. What I do is I have screen reader text and I dynamically throw the title in there, so it’s like “Join blah, blah, blah.” [crosstalk] [inaudible] in there and it’s automatically in there, so the client doesn’t have to worry about it or anything. Does that work, Alex? [laughs]
[01:08:45] >> ALEX: Yes.
[01:08:47] >> ?SPEAKER: Okay.
[01:08:48] >> MATT: I like that. I like, Alex, that, throughout the whole time, you really emphasized that context is everything, and I think, that was really helpful for me to get my head around the whole thing a lot better.
[01:09:07] >> ALEX: Yes, that’s one of the most important things to remember. As someone who started, you see the whole page, but as somebody with a screenreader, you’re seeing each section one bit at a time. It’s a much different model of exploring.
[01:09:24] >> AMBER: Alex, I posted on the chat but I am just amazed how you can quickly remediate things, like, oh you just add time index one or time index zero. How did you get better at it because you used this as a user, but then getting that skill to making it accessible has been a stumbling block for me. I’ve been reading a lot of documentation, but I just haven’t found good tutorial that I can actually just sit down and learn. I want to see someone make an inaccessible website into an accessible website, and I want to see ARIA role getting used than just reading it from documentation. Have you run into any good resource for a front-end developer to get better at these things?
[01:10:17] >> ALEX: That’s half the battle, right? There’s a few courses out there, and that’s about it. I won’t lie, I learned of what I know from experience. I absolutely cannot stand the accessibility web standards. I think they are confusing, convoluted. This is what I do every day. There might be plenty in here that disagree with me on that, but I think the web accessibility standards is a really good way to go to sleep at night, if you can’t.
[01:10:56] [laughter]
[01:10:56] >> HEGGIE: I could get in touch with you if I have done my research, and I still cannot figure it out?
[01:11:04] >> ALEX: Yes, you’re more than welcome to get in touch. I know there is someone who sent me a private message, and I will be honest, I have no idea how to look at that in zoom. You can find me on LinkedIn. I’m most active on LinkedIn.
[01:11:25] >> HEGGIE: Oh, great. I can find you there. That’s great.
[01:11:28] >> MARTY: That was me, Alex. Sorry, man.
[01:11:30] >> AMBER: That was Marty. [laughs]
[01:11:34] >> MARTY: Yes.
[01:11:35] >> ?SPEAKER: I’m going to say this so that we know later for the transcript, the person who was just talking was Peggy. [chuckles] Alicia has her hand raised.
[01:11:44] >> ALICIA: Yes, I learned a lot of what I know right now because I participated, and I just put the link in there, from a Google search. I participated in the accessibility Internet Rally. You have about six or maybe eight weeks, Joe Simpson also did it, he’s here. [laughs] We were on the team, and we had someone on the team who was really versed in this, and we competed. If you’re competing for something, you learn it, and so I learned a lot. I learned how this screen reader text method, a lot of things.
[01:12:24] Get into something like that, where there’s a group of people, and then they’re moving along in the same period that you are, and you get a mentor too, and you get someone with a disability, who’s a mentor to look over the work as you’re competing to say, “Yes, this is okay; no, it’s not.” I would highly recommend it.
[01:12:44] >> ?AMBER: Yes, that’s through knowability. Joe Simpson, you had your hand up?
[01:12:51] >> JOE SIMPSON: Yes, I wanted to give kudos to Matt for burying his site like this and allowing Alex to go through. My question was to Alex. Alex, I know you’ve mentioned your disdain for the standards and things like that, but how long did it take you in the accessibility space to get the type of experience where you feel comfortable solving a lot of these problems as a developer?
[01:13:16] >> ALEX: I’ve been an accessibility developer, coming up on six years now, and there’s still stuff I don’t know.
[01:13:25] >> JOE: Where did you say you learned it by just doing it, or did you learn it through some formal training?
[01:13:37] >> ALEX: Just by doing it, reading a lot of documentation, finding out how much sense it never made, and just figuring it out.
[01:13:44] >> JOE: Cool.
[01:13:47] >> HEGGIE: I’m just looking at ARIA role, and that, somehow, really scared me because I couldn’t find any video on it. You talked about that a lot during this meeting. I just don’t understand the documentation. It doesn’t say anything about ARIA stash button or anything. I’m just speaking out loud on my impression on the documentation. I just feel like it’s done poorly for new beginners.
[01:14:21] >> ?AMBER: Have you looked at Mozilla’s documentation?
[01:14:26] >> HEGGIE: [crosstalk] mozilla.org.
[01:14:28] >> AMBER: I feel like Mozilla has some of the best documentation on ARIA labels. I’m not sure if Alex has other resources.
[01:14:38] >> ALEX: It is the best, and even it’s lacking at best.
[01:14:43] >> HEGGIE: I wish they actually have some Codepen example of what was it before and how did you make it accessible, than just telling me ARIA expanded this for this widget that collapses.
[01:14:58] >> ALEX: A lot of developers are going to hate what I’m about to say next, but it needs to be said. You should not be using things like roll button and tab index of zero. These are cheap, cheating, dirty ways to get around problems. You should actually create a button and style it to look like your span or whatever you wanted it to look like, but to actually try to trick screen readers into using an element that isn’t designed for that purpose, is really bad practice, in my opinion. It should only be used if you really don’t have another option.
[01:15:37] >> AMBER: We need to go back and study our basic HTML semantics.
[01:15:43] Alex: Yes, that’s what I’ve told people all the time on why I don’t know why people think accessibility is so difficult. If you just use good semantic HTML, you’re not going to have a lot of problems. Spans are not meant to be buttons. I’m sorry, they’re just not meant to be buttons.
[01:16:03] >> ALICIA: Can I also suggest that– Is it Heggie that’s been asking these questions? There’s another incredible meetup on Amber’s, and it’s the WordPress and accessibility meet-up. Once a month, they have demos and things too. Summer Davenport, Ron Emmerich, and Jennifer Wang are the hosts of that one, or the organizers. Any of these questions– Just come to all these different meetups because I’m just chomping at the bit, because ARIA cannot be sprinkled liberally over your food, just like salt can’t because you can go crazy with that, and it’s going to get in the way.
[01:16:42] Screenreader text’s to be an option and a lot of these cases. There’s a wonderful guy on Twitter that I’m following, and he’s in Canada, and he’s like ARIAman, the ARIA whisperer or something. [laughs] He says that so that you start following people, real people, and their specialty. I don’t know if we can leave messages in the chat under this meetup with links because sometimes meetups are weird like that. [laughs]
[01:17:09] >> AMBER: If you leave them in the chat here, that records for me, and we usually include them with the recap.
[01:17:16] >> ALICIA: I just woke up and got five minutes, I see what I could dig up in five minutes and throw them in. [chuckles]
[01:17:24] >> AMBER: Thank you. Alicia, can you put the link to– Or Joe, can you pop the link for your meetup in the chat? I’m learning the IAAP, International Association of Accessibility Professionals. They have some courses and things that could be helpful as well.
[01:17:47] >> ALEX: Without going down too much of a rabbit hole, I have something to say about that as well.
[01:17:54] >> AMBER: Okay.
[01:17:55] >> ALEX: I was really, really shocked to discover the accessibility issues on that website.
[01:18:02] >> AMBER: On the new one that they just launched?
[01:18:06] >> ALEX: I haven’t seen the most recent one, but I looked at it probably about three weeks ago, because I was looking into certifications there.
[01:18:17] >> AMBER: Oh, that’s the new one. [chuckles]
[01:18:18] >> ALEX: Oh, that’s depressing.
[01:18:22] >> AMBER: You should give them feedback. If you gave everyone feedback, that’d be all you’d be doing all day long.
[01:18:30] >> ALEX: Yes. That’s the other problem. Free feedback does not put food on the table. As much as I love doing it, bills are bills; we all have them. The other issue at play here for me is, I can’t necessarily start my own consulting business because what happens there is you get these problems where it’s like, here’s a client that wants visual work done, now you got to go send them to another developer. Why would they pay extra for you, and they can go find somebody that can do it all?
[01:19:09] >> AMBER: Yes, that’s frustrating.
[01:19:11] >> ALEX: As far as the IAAP goes, I was honestly pretty shocked. With all these professionals that are surrounding this organization, it’s just saddening to me, honestly.
[01:19:26] >> JOE SIMPSON: That’s really, really depressing because I’m in the process of going through my certification now. [laughs]
[01:19:33] >> ALICIA: Oh, which certification are you doing, from the IAAP?
[01:19:38] >> JOE SIMPSON: Just after hearing that, you really just need to get in and get your hands dirty and learn that way. That sort of makes me question what I’m doing right now. [laughs]
[01:19:48] Alex: The other thing I’ll mention about IAAP is their options for testing are a little limited. I think it is I remember saying this not too long ago, it says right on the page, “Remote testing is not accessible” and I was like, “What?” This is coming from an accessibility organization. They can’t make their remote testing accessible? [crosstalk].
[01:20:15] >> AMBER: That is very crazy. I really appreciate all the feedback you gave. Matt, thank you so much for allowing us to test the plugin. If anyone wants to follow up with you, what the best place is? I know you mentioned LinkedIn, Alex, but I don’t know if there’s anything else you want to share.
[01:20:37] >> ALEX: I want to give a big thanks to Matt as well because it’s not every day that we get to have some influence over tons of websites. That’s always a great thing. You can find me on LinkedIn. I exist on Twitter and Facebook, but LinkedIn is your best bet to get in contact with me. I’m there pretty often.
[01:20:59] >> ?SPEAKER: Alex, would it be possible to get an email?
[01:21:05] >> ALEX: Yes. You can reach out to me at @alex@alexstein.com.
[01:21:11] >> ?SPEAKER: Awesome. Congratulations, brother. I think that your skills are valuable today in today’s world. All the technology that’s going to push our world to even better places is going to stem from things like this. When we have to stop reading and losing our eyesight because of people like you, you’re going to– this work is invaluable.
[01:21:39] >> ALEX: That’s what keeps me going every day. It’s much appreciated.
[01:21:46] >> ?SPEAKER: Kudos to everyone who organized and everybody else.
[01:21:51] >> AMBER: I just want to give Matt a chance real quick. What’s the best place to get a hold of you or to learn more about Give, if people want to learn more about Give?
[01:21:59] Matt: Well, thanks. I’m really happy to be here, and I really appreciate your work, Alex and Amber, for inviting me on. I do hope and expect that you’ll see great and accessible work coming out of GiveWP going forward. givewp.com, of course. Twitter, GiveWP. I am on Twitter most often @learnwithmattc. Thank you everybody so much for having me here.
[01:22:26] >> AMBER: Thanks, everybody. Have a great day.
[01:22:29] [] [END OF AUDIO]
