In this episode, special guest Alex Stine gives a first-hand look at how blind individuals use the web using both a good and bad example.
Listen
Watch
Links Mentioned
Transcript
>> CHRIS HINDS: Welcome to the Accessibility Craft podcast, where we explore the art of creating accessible websites while trying out interesting craft beverages. This podcast is brought to you by the team at Equalize Digital, a WordPress accessibility company, and the proud creators of the Accessibility Checker plugin. Now, on to the show.
>> AMBER HINDS: Hey, everybody, it’s Amber, and I’m here today with Steve.
>> STEVE JONES: Hello, everyone.
>> AMBER: We have a special guest, our friend, Alex Stine, here today as well. Hey, Alex.
>> ALEX STINE: Hello.
>> AMBER: How are you doing today?
>> ALEX: I’m doing great today. It is Friday, and the weekend is right here.
>> AMBER: We have a tasty beverage, but before we do that, do you want to introduce yourself for all of our viewers or listeners?
>> ALEX: My name is Alex Stine, I’ve worked in technology a little over nine years. Work in DevOps, systems engineering full-time, and do a little accessibility consulting on the side.
>> AMBER: Awesome. If anyone wants to, you have been a guest on this podcast before, so they can go back and listen to that episode. We’ll make sure to link it in the show notes, which for people who are tuning in and they want the show notes or a full transcript, you can find those if you go to accessibilitycraft.com/132. Steve, do you want to introduce the beverage? Do you want me to? What do you think?
>> STEVE: Amber’s having me do this because I butchered the name beforehand. It’s called Jarritos. Is that the name of the-
>> AMBER: No, I think it’s Jarritos.
>> STEVE: I have to do the tongue roll? Like in–
>> AMBER: Yes. So, J-A-R-R-I-T-O-S, which is Spanish.
>> STEVE: Okay. The flavor that we’re doing is pineapple. Beforehand, I was like, “Is it Jarritos?” You can tell that I am a born and bred Midwestern boy, but Amber’s a little closer to the border, so she can pick the pronunciation up a little better than me. There’s not a lot.
>> AMBER: It’s pop.
>> STEVE: It is pop, non-alcoholic, right?
>> AMBER: It’s very popular in Texas. Have you had Jarritos before, Alex?
>> ALEX: I have not, and I’ve lived in Texas for three years.
>> AMBER: Oh, we are introducing you to a Texas soda tradition.
>> STEVE: The question is, since you’re a transplant, and I think you’re a born and raised Midwestern boy like me, right? Kentucky?
>> ALEX: Kentucky.
>> STEVE: Yes. [laughs]
>> AMBER: All right. We’re going to open this. Alex, you already opened it. Do you want to take the first sip and give us a flavor profile description?
>> ALEX: I will.
>> AMBER: You can be our sommelier for the episode.
>> ALEX: I don’t know how to describe that at all.
>> AMBER: Does it taste like pineapple? Now I’m nervous. Should I be nervous before I drink it?
>> ALEX: I don’t think that tastes like pineapple. It’s hard to describe.
>> STEVE: Yes, yes.
>> AMBER: It just smells sweet. I don’t know if I smell pineapple.
>> STEVE: It’s a glass bottle, and it’s got a two-color printed logo on it. So there’s not a lot of description on these. A lot of times when we do these craft beverages, there’s just tons of description, but there’s not much here, and there’s not much on their website either.
>> AMBER: Yes. Pretty much it told you, if you want to eat this with tacos, eat it with barbacoa. [laughs]
>> STEVE: There you go.
>> AMBER: I think that’s what it said.
>> ALEX: It has got a really good taste to it, but I cannot describe this at all.
>> STEVE: Definitely not pineapple.
>> ALEX: No, not pineapple at all.
>> AMBER: No. It’s just like sweet and vaguely fruity.
>> STEVE: There’s some nice fizz to it, too.
>> AMBER: This is a very bright yellow, and you know what I think it tastes like? Those popsicles we used to have when we were kids that were just like, I don’t know, a plastic sleeve with flavored ice inside it?
>> STEVE: [laughs]
>> AMBER: I don’t know what those are called. [chuckles]
>> STEVE: I mean, it’s not like– the flavor is mild to me.
>> AMBER: Alex, would you get it again?
>> ALEX: I would get this again, because the flavor isn’t like over the top.
>> AMBER: No. Would you eat it with barbacoa tacos?
>> ALEX: I don’t even know what that is.
>> STEVE: No, I don’t either.
[laughter]
>> AMBER: I think it’s like– I’m pretty sure it’s pork. I don’t eat meat, so I could be totally making this up. I think it’s pork, but it’s like a slow-cooked with like spices, but really tender meat, is what I think that is.
>> ALEX: That does sound good.
>> STEVE: A Mexican dish traditionally made by slow-cooking meat, often beef, lamb, or goat, in an underground pit or oven. Which is interesting. I’d probably eat that.
>> AMBER: You’d have a pineapple soda with it?
>> STEVE: Yes, I think so. Maybe Alex would have a big old steak with it.
>> ALEX: Oh, I mean, yes, absolutely.
[laughter]
>> AMBER: Alex loves steak. I think we’re all generally a thumbs up on this beverage.
>> STEVE: Yes.
>> ALEX: Yes, I think so.
>> AMBER: Okay. We’re going to continue enjoying it while we talk a little bit more about how blind people experience the web. We invited our friend Alex here to actually do some fun screen sharing today, which we haven’t done previously, because a lot of people wonder, what is it like when a screen reader user is on their computer or on the internet? How does it sound like on a website? I think sometimes when we say, “Oh, that’s a problem.” You think, “Oh, no, it’s not.” Or, “I don’t really understand. What is it like in real world?” Alex can be here to give some real-world experience.
It might be useful to give people some idea of what level of sight, if any, you have. Then maybe you could explain what screen reader you use normally, or any background you think would be good for people to know before you start screen sharing.
>> ALEX: So, I am very blind. I lost what vision I had about eight years ago. Occasionally, I can see the sun, sometimes. It has to be very bright, on a bright day, and it’s nothing usable. Let’s put it that way. There’s no benefit to having what little vision that I have. I use a screen reader called NVDA primarily on my Windows laptop, and from time to time, VoiceOver on Mac, and I have TalkBack on my Android phone.
>> AMBER: Okay. I don’t know, Steve, do you have any follow-up questions for him before he shares his screen?
>> STEVE: [chuckles] No, but I’m pretty sure I’m going to have some questions when he starts. I’ve actually had the pleasure of sitting next to Alex at a Contributor Day. While I was trying to roll up some, I think, Gutenberg or something, get something running, and I’ve had the pleasure of seeing him blowing through track tickets 10 times faster than I can, and his screen is completely off. It’s an interesting experience to see. I think when I think back to my journey into accessibility and stuff, I really think the epiphany moment for me or the ‘aha’ moment was definitely when I got to see real user testing, and I got to see it in real life.
I first just want to thank you for being here with us, Alex, and sharing this with us, because I think seeing, a lot of times, for typically abled people, goes a very long way into shifting their mindset on how important accessibility is.
>> ALEX: Definitely. Always appreciate having the platform to share, because I definitely did not count on losing my vision as something I had to adapt to in life, so it’s always a possibility, whether you think it’s likely or not.
>> AMBER: It can happen to anybody.
>> STEVE: Yes. A lot of times in accessibility, when we talk about making applications and websites accessible, we’re focused on people that don’t have typical abilities, but really, we’re building a future internet for ourselves, because any of us could be afflicted with any kind of degenerative problem or neural problem as well. We’re all aging. We’re all susceptible to any kind of our senses being degradated. So, we’re building the internet for ourselves later, of sorts.
>> AMBER: When we were talking about this during planning and we were saying, “Okay, what should we look at?” I realized there’s really great timing. By the time this episode comes out, our page builder accessibility comparison report will have been published. So, what we are actually going to have Alex do, of course, we don’t have time today for him to look at all 20 of those builders, but he is going to pull up and share with everyone one of the worst ones, one that’s kind of in the middle, and one that’s up at the top, so people can see and hear what that experience is like. Then we’ll share some thoughts along the way. Do you want to start sharing, Alex?
>> ALEX: I’ll start.
>> AMBER: Oh, boy. Give us a read of that page.
>> ALEX: Now we’re just doing a little bit of navigation. Home, components, log, about.
>> AMBER: Before you go forward more, can we talk for a second about what we’re hearing? [laughs]
>> ALEX: Yes. This is the normal rate at which I listen. It took me six months, so a good year to really get the comprehension down. Inherently, website navigation via the keyboard can be pretty slow. So, the faster you listen, the more beneficial it is because you can actually get stuff done.
>> AMBER: Okay. So, you listen really fast. I’m guessing Steve and I can’t understand what this thing is saying. Can you understand it, Steve?
>> STEVE: No, not at all. I don’t even know what speed I have mine at. I don’t think it’s very much faster than the default, but that is-
>> AMBER: Would you mind turning it down to not expert level for us?
>> ALEX: Maybe a little bit less than 90%.
>> STEVE: Oh, you have it at 90.
>> ALEX: I think 50% is where it starts out normally, and it’s so painful. Once you go from listening that fast, this just doesn’t sound normal anymore.
>> STEVE: I mean, can you speak to that a little bit? Of course, for us, it’s extremely fast. When you go through that navigation, we can’t even comprehend what it’s saying at all. Can you explain, since you went from only being able to hear it at 50% and now you do it at 90%, can you give us a little insight on how you get from that? To build that comprehension, or is it just something that comes naturally after just increasing it and increasing it?
>> ALEX: It’s just practice. You just step up a little bit at a time, and it also helps if you incorporate it into other things in your life, such as podcasts, audiobooks. I mean, you have to do so much learning just by listening. It just comes natural over time. I can finish an audiobook in a day if I wanted to.
>> AMBER: I’ll say, I actually have started listening to all podcasts and audiobooks. The slowest I’ll go is one and a half. A lot of audiobooks, I listen at 2x now, and YouTube videos. My kids will get in the car with me, and they’ll be like, “What is this? How can you understand it?” I’ve had that same thing. I started listening to them so much faster, and now it doesn’t sound fast to me. I don’t know.
>> STEVE: Yes, I do listen to podcasts at 1.25, sometimes 1.5, depending on the speaker. I do use a podcast app that cuts out blank space. It cuts out spaces in the audio. It definitely helps you get through them quicker, but this is definitely a superpower, Alex, that you can comprehend it at that level.
>> ALEX: At the end of the day, it comes down to keeping up with others. I work in a very high-stress field, where we always have a lot going on. Yes, you’ve got to keep up or you’ll get left behind. That’s just part of the technology industry. So you adapt and make it.
>> AMBER: I have a question. Obviously, you’re going to do a lot more just going down through everything that’s here, but I’m curious, when you first go to a website, what would you normally do? I’m guessing you wouldn’t actually just listen to the whole page. What would be your routine when you visit a website to begin with?
>> ALEX: It depends on what I’m looking for, and the context. If it’s just a news article, I’ll be looking for the first heading on the page. If it’s my banking website, I’ll be looking for where I know the sign-in function is all the time. If it’s to pay a bill, same thing.
>> AMBER: Do you use Control F and just try and find when you’re looking for a login?
>> ALEX: I can do that, or I’ll just use other controls. I’ll search for buttons that say sign-in, or I’ll use the elements list and find the sign-in link. Just navigating websites in general, even living with blindness, requires a lot of memory, because you’re able to map rooms and physical environments, but it also goes back to websites because if nothing ever changes, you can learn to get around a website very quickly just by remembering where things are.
>> AMBER: Yes. I would imagine that that’s where having that good HTML structure comes in. [chuckles] It makes it easier for you to get around if it has underlying semantics, like you were saying, the elements list. If things are tagged as headings, they’ll show up there, that kind of thing.
>> ALEX: Definitely.
>> AMBER: Do you want to dive into this first builder that you have up, Brizy?
>> AUTOMATED VOICE: Brizy.
>> AMBER: Maybe listen and then share some thoughts. Steve and I might occasionally chime in with questions. [Laughing]
>> AUTOMATED VOICE: Navigation landmark list. List six items. Link Brizy Home. Visit the same page link Components. Link Blog. Link About. Link All Builders. Link Contact. Out of list navigation landmark list. List on one item. List My Account. Heading level 2 Accordion 1. Link Equalize Digital. Web accessibility lorum ipsum dolor sit amet, inclusive design ensures equitable access to digital content by users of all abilities. WCAG guidelines provide a robust framework for perceivable, operable. Semantic HTML and sufficient color . . . ex facilisis, enabling . . . must not be overlooked-tabindex management.
>> ALEX: Now we’re just reading line by line here, stepping through the websites slowly.
>> AUTOMATED VOICE: label. use label for relationships instead. For non-visual users.
Accordion 2. Web accessibility in WordPress in lorem ipsum dolor sit amet, Link includes WCAG2 readers. rely on semantic WordPress. Develop right click here. Color contrast and focus states vestibular text for image improves the required associated labels and build a web for everyone.
Accordion 3. Web accessibility lorem ipsum for Word. everyone. Lorem ipsum. Best practices. Avoiding reliance on [inaudible] for important content. Inclusive design is not just [inaudible].
Heading level 2 Carousel/Slider.
>> STEVE: Alex, before you go too far, I have some questions about that accordion. You were not able to go through that accordion without listening to all the content in every expanded– did you even know it was an accordion?
>> ALEX: I know it’s an accordion based on the heading above it that says accordion, but none of the semantics are communicated that it’s actually an accordion or that any of those controls are interactive.
>> AMBER: A couple of them were actually closed visually, but it sounded like your screen reader read them anyway.
>> ALEX: Yes. That’s a very common unfortunate practice of web development. We’ll visually hide content, but it’s still very much available in the DOM, so you get a very different experience as a non-sighted user.
>> AMBER: If it’s visually hidden, you would want it also to be hidden for you?
>> ALEX: Definitely.
>> STEVE: The first accordion was toggled open by default. When you made it to the first accordion heading, you would have wanted it to tell you that it was already expanded, so you could then choose whether or not to read it or close it and move on to the next one, correct?
>> ALEX: Definitely.
>> STEVE: It looks like down next is coming a slider, so this is going to be interesting. [laughs]
>> AUTOMATED VOICE: Graphic. pink, yellow, and lavender macarons stacked. Accessible screen reader label lorem WordPress focus tab keyboard skip-link robust plugin. Link Accessibility Checker. Role widget operable ipsum navigation compliance theme perceivable. Contrast alt-text guideline. Link Equalize Digital. Link. Tab selected. Three tab 1. Three tab 2. Three tab three of three. Lank Heading level 2. Three. Out of tab 2. Select two of three tabs. Selected two of three.
>> ALEX: Well, at least there’s selectable tabs. This isn’t something we always see.
>> AUTOMATED VOICE: Carousel/Slider
>> AMBER: Would you think that’s okay, on a carousel, for the buttons to be labeled as tabs like that?
>> ALEX: It would be nice if they were a little bit more descriptive, but it’s not the end of the world, because most of the time they’re not labeled at all.
>> AMBER: Okay.
>> STEVE: Most of the time you-
>> AUTOMATED VOICE: Two of three tabs selected. Two of three.
>> ALEX: Although that’s kind of a problem.
>> STEVE: Yes, yes. [laughs]
>> AMBER: What?
>> ALEX: I guess once you select one tab, it’s just going to start announcing it over and over again.
>> AUTOMATED VOICE: Two of three tabs selected. Two of three.
>> ALEX: It’s not me.
>> STEVE: That’s weird.
>> AMBER: Oh, I bet it’s saying it. Every time the slide changes, it’s reading out?
>> AUTOMATED VOICE: Two of three tabs selected. Two of three.
>> ALEX: Yes.
>> AUTOMATED VOICE: Two of three tabs selected. Two of three.
>> ALEX: See?
>> STEVE: No, I think it’s every time the slider cycles. Every time it goes through its whole cycle.
>> AMBER: Then it reads out.
>> AUTOMATED VOICE: Two of three tabs selected. Two of three.
>> ALEX: Yes, it’s going to keep doing that. Great.
[laughter]
>> AMBER: You know what I was impressed about this builder, there’s very few builders that actually have a pause button. This one has a pause button. I don’t know that it’s labeled as a button, but it visually has a pause button. [chuckles] So you might be able to stop this so it won’t keep reading to you later down the page.
>> AUTOMATED VOICE: Two of three tabs selected. Two of three. heading level 2. Graphic. four [inaudible]. Tab one of three. Tab selected. Blank.
>> ALEX: If it has one, it’s not labeled.
>> STEVE: You’re on it now. Right now.
>> AMBER: What is that called?
>> AUTOMATED VOICE: Two of three tabs selected. Two of three.
>> ALEX: That reads as blank.
>> AUTOMATED VOICE: Tab one. Blank.
>> AMBER: Blank?
>> ALEX: Yes.
>> STEVE: If you press enter or return right now, yes, it does stop, but you had no context to what that was, right?
>> ALEX: No. It’s got to be just a fake icon there, because it doesn’t read.
>> STEVE: Yes, just like [crosstalk]-
>> AMBER: Yes, and it didn’t tell you if it was pressed or not.
>> ALEX: Yes, just a fake control as far as screen readers are concerned.
>> STEVE: Yes, it should have been a toggle button.
>> AMBER: Further down.
>> ALEX: All right. Now we’ll come to Form. Let’s check this out.
>> AUTOMATED VOICE: Note: this is a fake form. No emails will be sent. Name. Edit required entry as auto-complete. Company. Name. Edit required entry as auto-complete.
>> ALEX: Okay, so we have required here. We have a label associated with the field. Not bad. Let’s see if it gets better.
>> AUTOMATED VOICE: Company. Edit as auto-complete. Email. Edit required invalid entry as auto-complete. Phone number. Edit as auto-complete. Birthday. Edit read only.
>> ALEX: Oh, yes, we always have these.
>> AUTOMATED VOICE: Birthday. Edit as auto-complete.
>> ALEX: Let’s see what’s going to happen with this.
>> AUTOMATED VOICE: Phone number. Edit as auto-complete. Blank.
>> ALEX: That is a phone number input.
>> AUTOMATED VOICE: Birthday. Edit read-only blank.
>> ALEX: Now we have a read-only birthday field with no way to enter text because it’s read-only. No instructions on how to enter a birthday.
>> AUTOMATED VOICE: Combo box collapsed.
>> ALEX: No. I’m guessing that’s going to be labeled month.
>> AMBER: Yes. When you focused it, a date picker popped up. [chuckles]
>> STEVE: If you hit Shift Tab on that field, on the birthday field.
>> AUTOMATED VOICE: Only blank.
>> STEVE: Shift Tab, does it? No.
>> ALEX: No.
>> STEVE: This is completely inaccessible to Alex.
>> ALEX: Yes, totally. Might be able to get to it. Let’s see.
>> AUTOMATED VOICE: What’s your favorite cake flavor? Edit read-only. Which way should we… email phone text. Message. Edit required text.
>> STEVE: Oh, with the arrow keys. Yes.
>> ALEX: Let’s see, where is it?
>> AMBER: It was above the field, the input.
>> ALEX: Really?
>> AUTOMATED VOICE: Message edit request. Birthday. Phone.
>> AMBER: Yes.
>> STEVE: Well, it depends on the viewport size.
>> ALEX: Yes, where– let’s see.
>> AMBER: Wow.
>> ALEX: No, it’s in the bottom of the DOM. It’s always in the bottom of the DOM.
>> AUTOMATED VOICE: 4, 3, 2, 1.
>> AMBER: Oh, it’s at the bottom of the whole page? You would have had to tab through everything to get to this?
>> ALEX: This is not interactive, so Tab would skip it.
>> AUTOMATED VOICE: 30 30. 27. Purpose and accessibility . . .
>> ALEX: There’s no content info landmark.
>> AUTOMATED VOICE: No next button.
>> ALEX: Let’s see.
>> AUTOMATED VOICE: Combo box collapsed. [inaudible] 2025
>> ALEX: Oh, interesting. They didn’t get this totally wrong.
>> AUTOMATED VOICE: This site was created . . . combo box collapsed . . . August. . . .
>> ALEX: These are interactive. Maybe.
[beeps]
>> AUTOMATED VOICE: Purpose. This site was created . . . combo box collapsed . . . August. . . .
[beep]
>> ALEX: No, not even these inputs are operable.
>> STEVE: Yes, you can’t change.
>> ALEX: What a shame.
>> STEVE: Can’t change the month.
>> ALEX: No.
>> AUTOMATED VOICE: >> AUTOMATED VOICE: Purpose. This site was created . . . combo box collapsed . . . August 1907.
>> AMBER: What do you want to see here?
>> STEVE: 1907.
>> AMBER: The ability to type in the field?
>> ALEX: There should be multiple options for these. One, you should be able to type in the field, very standard date format. Two, there should actually be a calendar widget that is accessible versus this thing that floats down at the bottom of the DOM, it’s totally uninteractive.
>> AUTOMATED VOICE: Sun Mon Tue Wed Thu Fri Sat 28 29 30
>> ALEX: None of these tell you whether you can select it or not. Let’s just–
>> AUTOMATED VOICE: 31 1 1 2 3 4 5 6 7. Birthday read-only edit 1907-08-07.
>> ALEX: Okay. I was born in 1908. Great progress.
>> STEVE: Yes.
[laughter]
>> STEVE: Something I wanted to mention, that when you got to the name field, it gave you context that it’s required, but actually does not give visual users context that it’s required.
>> ALEX: Yes, that’s-
>> AMBER: There’s no asterisks or anything.
>> ALEX: That’s definitely a problem. It’s actually more accessible to me in this scenario than it is to sighted people, which we definitely don’t see very often.
>> AMBER: Yes.
>> ALEX: Yes, that’s a strange call out.
>> AMBER: What if you submitted the form without filling in required fields?
>> AUTOMATED VOICE: combo box. Blank. Massage. [inaudible]
>> ALEX: Oh, total loss of focus. These are all fake inputs.
>> AUTOMATED VOICE: Blank. Blank. Message edit required . . .
>> AMBER: They’re just saying blank?
>> ALEX: Yes.
>> STEVE: They’re–
>> AUTOMATED VOICE: Yes radio button. Check one of two.
>> STEVE: Oh, yes.
>> ALEX: These are radio buttons.
>> AMBER: The radio buttons labeled?
>> ALEX: Yes, but there’s no legend around it, so you can’t tell what you’re-
>> AMBER: Saying yes to.
>> ALEX: -selecting yes to.
>> AMBER: [laughs] Alex will give me all his money. [chuckles]
>> ALEX: Yes, that’d not be great. Okay, let’s try submitting. No announcement, no nothing.
>> AUTOMATED VOICE: Heading level 2 icon list. Form heading level 2.
>> ALEX: So we’ll just go back up here.
>> AUTOMATED VOICE: Note. This is a fake form. Name. Edit required.. auto-complete.
>> STEVE: Do you know what they are? Do you know what that is? Do you have any guess on what those fields are?
>> ALEX: I suspect they’re probably spans.
>> STEVE: What component of a form it is.
>> AUTOMATED VOICE: Company. Edit. Email. Combo box collapsed. Which ways should we. Email. Phone. Text.
>> AMBER: Oh, the ones that are non-label?
>> AUTOMATED VOICE:
>> STEVE: Yes, the ones that-
>> AUTOMATED VOICE:
>> ALEX: Yes. I can manually get to them down here, but based on the way this is laid out, these could be checkboxes. Yes, I don’t know what they’re trying to emulate, because it doesn’t– it’s not semantically communicated.
>> STEVE: Yes, they are checkboxes. What they’ve done is they’ve decided in favor of using divs and CSS to make them look fancy. Not like the typical default UI for checkboxes, which is actually messed up your experience.
>> AMBER: Yes.
>> ALEX: Which you can always take that path if you want to. It just takes a lot of extra work. So, not recommended.
>> AUTOMATED VOICE: Edit required invalid entry. Multi-line.
>> ALEX: It seems like even when you submit the form, there’s no real visual feedback of what happens. I mean, unless the field’s dotted.
>> AMBER: Things turned red. [chuckles]
>> ALEX: Yes.
>> AMBER: There were some red outlines added to some things, but this one didn’t even have an error message or anything.
>> ALEX: Yes, just nothing.
>> AMBER: Yes. Let’s keep going down the page. Oh, sorry, Steve.
>> AUTOMATED VOICE: Heading level 2 Icon List.
>> STEVE: I would just tag on. I’m certain, from a visual standpoint, if you haven’t filled in a required field, it just changes the outline of it. I’m sure if you tab back through that form, when you get to that field, there’s no additional text telling you why it failed.
>> AUTOMATED VOICE: Button Submit. Message edit required invalid entry. Multi-line blank. 1.
>> STEVE: Oh, it did say invalid entry for you, but not for visual users. Right?
>> ALEX: I’m pretty sure it said that from the top, though.
>> STEVE: Oh.
>> AMBER: From the beginning. Yes.
>> STEVE: Oh, before you submitted. Okay.
>> AUTOMATED VOICE:
>> AMBER: I think any time a field is blank and it has a required attribute, NVDA is going to say invalid entry when you enter the field.
>> STEVE: Oh, interesting.
>> ALEX: Which it shouldn’t, but that’s a whole other discussion.
>> AUTOMATED VOICE:
>> ALEX: Okay. Moving on down the page.
>> AUTOMATED VOICE:
>> ALEX: I’m not sure what that’s supposed to actually represent, so it’s hard to comment on it.
>> STEVE: The list?
>> AMBER: Oh, the icon thing? Yes.
>> ALEX: Yes.
>> STEVE: Because it’s not a list? Is that-
>> AMBER: It’s a list with checkmarks instead of bold points. Only in this instance, it’s not a list. [laughs]
>> STEVE: It’s not a list.
>> ALEX: It’s just a visual list.
>> STEVE: So you have no context to if it is a list, how many items are in it, right?
>> ALEX: Correct. It’s just text.
>> AUTOMATED VOICE: Pies. Heading level 2. Loop/Post Blocks. Graphic looking down at apples and pies with berries and flowers on the table. Two Pies, Twice the Delight – Now Baking Fresh Apple & Berry Pies. At Butter Bloom Bakers, we believe there’s no worrying way to do pie – but there is a right way to try a new flavor. And that time is now! This week, we’re serving up two seasonal favorites, fresh from the oven. Pie. Classic Apple Pie. Made with crisp, hand – . . . Link. Read More.
>> ALEX: Oh, I always love my Read More links.
>> AUTOMATED VOICE: Read More link.
>> ALEX: Doesn’t actually tell me what I’m reading more about, but I can read.
>> STEVE: Something. It’s pretty ambiguous.
>> AMBER: Something.
>> AUTOMATED VOICE: Meet Sarah – The heart .. at . . . Select Read More. At Butt & Bloom Bakers . . . Link Rad More. Heading level 2 Tabs.
>> STEVE: Yes, if anybody is listening, we’re kind of being a little bit sarcastic from our own accessibility towers over here, but when we’re talking about ambiguous links, if you have a link that just says read more, for a non-visual user, they don’t know if that refers to what they were just on. So you typically want to give them context. Read more about, and then typically the post title.
>> ALEX: This is where this matters.
>> AMBER: Yes, I think after we get to the bottom of this page, I want to go to the good page-
[laughter]
>> AMBER: -as a comparison and just see how different it is. You’re at-
>> ALEX: The reason-
>> AMBER: -tabs now. I’m sorry, go ahead, Alex.
>> ALEX: Yes, I was going to step back for just a minute. The reason why links not having context matters is because of this.
>> AUTOMATED VOICE: Elements list dialogue Level 0. Equalize Digital
>> ALEX: This is a list of all the elements on the page.
>> AUTOMATED VOICE: Read More 14 of 24 Level 0. Read More 15 of 24 level 0.
>> ALEX: This is where this becomes really practical really quick, because now you only hear read more. You get none of the surrounding context.
>> AUTOMATED VOICE: Components.
>> AMBER: You were saying that when you first come to a website, if you’re trying to find something specific, you might just open that elements list and listen to all the links to try and find the link you’re looking for.
>> ALEX: Correct. They can be a lot faster.
>> STEVE: Yes. That highlights a little bit, too, about the difference here, right? I kind of gave my little thoughts on why you should do that. I can test and use a screen reader pretty well, but I’m still a sighted user. I don’t use it day to day. Alex uses this day to day because he has to, and he uses it in a different context than I do. I think that’s why user testing is so important, because even me, as an accessibility professional that understands accessibility development, I’m still going to miss things, because I actually, my ability in that testing is a little bit of a crutch, right?
>> ALEX: Yes. I mean, I think that’s definitely a fair point. Then, even within the blind and visually impaired community, we’re going to use screen readers somewhat differently as well, based on skill level, just how we learn to navigate.
>> AUTOMATED VOICE: Tab setting level 2. List with 3 items. Tab 1. Tab 2. Tab 3.
>> ALEX: Oh, my favorite. We got fake tabs here that don’t actually tell you that they are tabs, except for the label.
>> AUTOMATED VOICE: Out of list link Equalize Digital Accessible screen reader
>> ALEX: It doesn’t tell me which tab is selected.
>> AUTOMATED VOICE: List with three items tab 3 A. Out of list link WordPress Accessibility Meetup nav aria-pressed lorem compliance tabindex role button toggle Semantics.
>> ALEX: This is tab three, but it made no such announcement that I’ve selected tab three. Doesn’t give me any context on where the tab content starts and ends either.
>> AMBER: One thing that does seem slightly better about this versus the accordions is they’re actually keyboard focusable, and you can trigger them. They’re missing the necessary ARIA to tell you what you did, but the accordions didn’t even have controls on them.
>> STEVE: I’m not sure these do either.
>> ALEX: No, these don’t either, because getting to the other tabs.
>> AMBER: Tab one, tab two, tab three. How does that work? Keyboard wise.
>> ALEX: You can do this via virtual navigation. I’m not sure that they’re actually keyboard accessible tab, but we can do a real quick test.
>> AUTOMATED VOICE: Read More link.
>> ALEX: We go back up here to this read more, hit tab.
>> AUTOMATED VOICE: WordPress Accessibility Meetup link.
>> ALEX: Yes, those are not keyboard accessible without a screen reader.
>> STEVE: Yes, because I tried on-
>> AMBER: So you were using– oh, go ahead, Steve.
>> STEVE: I tried on my end, and I actually could not access them with the keyboard.
>> ALEX: No, this is-
>> AMBER: You were using the arrow keys in NVDA to move through them, which is a feature NVDA provides, but without a screen reader, you wouldn’t be able to do that.
>> ALEX: Yes, correct.
>> AMBER: Got you.
>> AUTOMATED VOICE: alt toggle. Semantic. Readability. Block-level. Heading level 2 Testimonials.
>> ALEX: Testimonials. Everybody’s favorite part of the website.
>> AUTOMATED VOICE: No testimonials block available.
>> AMBER: Yes, this one’s not as exciting. I don’t have a good testimonials example, because the filter didn’t have a block.
>> ALEX: All right, screen reader text.
>> AUTOMATED VOICE: If no text outputs here beneath the headings, that means that the theme has added that class for the screen reader text. If text is visible, the theme does not support the class. Only one is sufficient for a pass – they do not both have to be supported. Heading level 3 – screen-reader-text.
>> AMBER: This is a test that I do mostly for us sighted people to figure out if they’ve actually hidden text with a screen reader text support class.
>> AUTOMATED VOICE: This text is wrapped with the screen reader text support class. Heading level 3 sr-only. Text is wrapped in the sr-only class. Graphic attached image file. Heading level six Company. Heading level six some text here about the company. Some text here about the company. Heading level six feature. Navigation landmark list three items link Equalize Digital link.
>> ALEX: Okay. Now we have a second navigation landmark.
>> AUTOMATED VOICE: Link Accessibility Checker. Link Accessibility Auditing Services.
>> ALEX: When we have a second navigation landmark, they should have ARIA labels to tell you what type of navigation this is.
>> AUTOMATED VOICE: Out of list heading level six Resources.
>> AMBER: Like primary, footer, that kind of thing?
>> ALEX: Correct. Landmarks matter, because they can be really helpful to jump in between sections of a page, but if you have multiple landmarks and they’re just not labeled in any way, they’re just next to useless.
>> AUTOMATED VOICE: Heading level six Features. Heading Level six Products. Heading level six Support.
>> ALEX: Oh, what is this? Are these submenus?
>> STEVE: No.
>> AMBER: I’ll give you some background on what that is. When I set these sites up, I left a lot of their demo content that they had in the footer, but I did remove fake links, like hashtag links. So it’s just text that are not linked to anything anymore, but apparently, it sounds like they had these all set up with headings, even though it just visually looks a list. [laughs]
>> AUTOMATED VOICE: Heading level six contact. Heading level six WhatsApp. Heading level six email. Separator. Link Equalize Digital.
>> ALEX: Yes. Heading structure on this page is definitely not great either. I think we’ve just established that.
>> AMBER: Before we go to the next page, could you open that elements list and show the landmarks that are available on this page?
>> ALEX: Yes, I think we can make that happen.
>> AUTOMATED VOICE: Elements list dialogue. Filter by. Active button. Move to button. Cancel button. Links. Headings radio. From fields radio. Buttons radio. Navigation four level zero. Navigation three of four level zero.
>> ALEX: Navigation.
>> AUTOMATED VOICE: Purpose and accessibility Notice complimentary. Four level zero.
>> ALEX: A complementary landmark.
>> AMBER: I’ll just tell you, I have a plug-in installed on the network that adds that complementary landmark at the bottom of every page there. I’ve added that one. Do you want to talk about what else is missing?
>> ALEX: Yes. There is no main landmark that wraps the main content, there is no content info landmark that marks the footer. It’s technically not the worst site I’ve seen, but it’s not great.
>> STEVE: Right. Like you said before about those three navigations, to you– I mean, actually, to me, too. What navigation is it? Is it the primary one? Is it the secondary? Is it the footer?
>> ALEX: Are they all the same?
>> STEVE: Are they all the same? [chuckles]
>> ALEX: Then we can also look at-
>> AUTOMATED VOICE: Type. Groupings. Landmarks. Links. Radio. Headings. Radio. Button. [inaudible]
>> ALEX: -headings.
>> AUTOMATED VOICE: Preview Accordion 1 late level 0. Carousel slider 2 of eight level 0. Form three of eight level zero. Icon. List four of eight level zero.
>> ALEX: Actually, that’s not near as useful as I thought it would be.
>> AUTOMATED VOICE: Group post [inaudible] of eight level zero.
>> AMBER: The elements list in NVDA doesn’t really tell you what heading level they are. It just visually nests them.
>> ALEX: That has got to be a bug. That just doesn’t work at all. Wow.
>> STEVE: I can tell you that there is a missing H1. We go through a bunch of H2s, we jump to H3s, and then we skip all H4s, all H5s, and go right to H6s. [laughs]
>> ALEX: Yes, don’t do that. We’re trying to get [unintelligible 00:35:42].
>> AMBER: I think we should go over to the good page. Just based on time, I’m not sure if we’re going to be able to look at one that’s in the middle. Maybe we can just go through a few. The thing I wanted to flag before we do that, that I thought was so interesting about this builder, and one of the reasons why I wanted to have you look at it is this is just a plug-in only, and it doesn’t have a companion theme. A lot of page builders have a companion theme. This one doesn’t.
I really went back and forth with what I should do, but I was like, “Okay, let’s give them benefit of the doubt. I’ll test it in 2025,” which is a core WordPress theme which has had accessibility review and we know has the main landmark, and has the footer landmark, and has the banner landmark and all those things. What I found out was, once I started setting up the builder, it overrided all the accessibility features in the theme. The skip link is missing, all that kind of stuff. I thought it was kind of interesting that you can start with an accessibility-ready theme and then put a plug-in on it like this and it can just unaccessible.
>> STEVE: Degradated.
>> AMBER: What? Yes.
>> ALEX: Yes, with great power comes great responsibility. Unfortunately, this plug-in used it very wrong.
>> STEVE: Yes, cool.
>> AMBER: Should we go look at Kadence?
>> ALEX: Yes, we can do that.
>> AUTOMATED VOICE: Unread messages. In the middle. [inaudible] Mozilla Firefox. Same page links.
>> ALEX: Okay.
>> AUTOMATED VOICE: Same page links.
>> ALEX: Let’s take a look at our landmarks.
>> AUTOMATED VOICE: Elements list dialogue. Type grouping. Links radio. Headings radio. Groupings. Form field. Buttons radio. Landmarks radio. [inaudible]
>> ALEX: Got a banner.
>> AUTOMATED VOICE: Level 1 navigation.
>> ALEX: Primary navigation.
>> AUTOMATED VOICE: Level zero. Main expanded. Two of four.
>> ALEX: Main landmark.
>> AUTOMATED VOICE: Level 1 accordion. One one of two.
>> ALEX: I don’t know why the accordions are landmarks, but we’ll get to that later.
>> AUTOMATED VOICE: Slider content. Two of two. Level 1.
>> ALEX: Slider content.
>> AUTOMATED VOICE: Level zero content info three of four.
>> ALEX: Content info for the footer.
>> AUTOMATED VOICE: Purpose and accessibility notice. complimentary. Four of four. Level zero.
>> ALEX: Then our complementary landmark.
>> AUTOMATED VOICE: Components. Cadence. Same page links. Skip to content.
>> ALEX: We have a skip link, which is helpful for users to skip the navigation.
>> AUTOMATED VOICE: Banner landmark. Secondary navigation. List with one item. Link my account.
>> ALEX: Now this is a good callout. This is a little verbose, because the ARIA label has the word navigation. What you’re hearing is the label plus the type of element landmark that you’re in.
>> AUTOMATED VOICE: Out of list button collapsed view search form.
>> ALEX: A view search form. Let’s see what we have.
>> AUTOMATED VOICE: This search landmark. Search for. Edit as auto complete. Search. Blank.
>> ALEX: Focus is transferred to the search field. That’s great.
>> AUTOMATED VOICE: Search button.
>> ALEX: There is a search button. That’s great.
>> AUTOMATED VOICE: Close search button collapsed.
>> ALEX: There is a close search button, which is collapsed. That is a slight error, but not the end of the world.
>> AUTOMATED VOICE: Search landmark. Search for. Edit as auto complete search.
>> ALEX: Oh, focus is trapped. Interesting. There is nothing to tell that would happen.
>> STEVE: Isn’t that correct with a modal pop-up, or did you not get context that this was a modal?
>> ALEX: I don’t actually know that this is a modal.
>> AMBER: I don’t think– now that you say that, that button probably does not have ARIA has pop-up on it, right?
>> AUTOMATED VOICE: Purpose and accessibility. This site was created for link Equalize Digital’s WordPress page Builder Accessibility.
>> ALEX: Oh, man. That’s a problem. [crosstalk]-
>> STEVE: Is that pop-up have a role of dialogue on it? Yes, it’s probably not a properly coded pop-up overlay.
>> ALEX: I just hit Escape to get out of it, and now focus is at the bottom of the website.
>> STEVE: Adam, for my own curiosity, can you go back to the header-
>> AUTOMATED VOICE: Same page link. Skip to content.
>> STEVE: -and open that again and use the close button to see if it returns focus?
>> AUTOMATED VOICE: [inaudible] search landmark. Edit as auto complete search. Close search button collapsed. Expanded. Banner landmark view search form button expanded.
>> STEVE: It does return focus if you use the close button-
>> AUTOMATED VOICE: Close button collapsed view search form.
>> STEVE: -but not if you use the Escape key.
>> ALEX: Yes, there’s some order of events issues on this, because focus is returned before we return ARIA expanded back to false. This needs to be cleaned up, but it’s usable.
>> AMBER: Okay.
>> AUTOMATED VOICE: Link Kadence. Primary navigation. Navigation link. Landmark list with six items link home. Same page link for page components. Link blog. Link About. Link All builders. Button Child builders. The same page link for page components. Button child menu level out. Link all builders. Button child menu of all builders.
>> ALEX: Child menu is a little bit verbose, but sometimes more information isn’t always a bad thing.
>> AUTOMATED VOICE: Link all button child link about.
>> ALEX: Let’s make sure these are tabbable.
>> AUTOMATED VOICE: child level menu out button.
>> ALEX: Which these are.
>> AUTOMATED VOICE: All Builders link. child menu of all builders button.
>> ALEX: I’m not sure why this doesn’t announce state, though. That’s not great.
>> AMBER: It’s missing collapsed.
>> STEVE: Yes. What would you prefer the label on those to be?
>> ALEX: I think even you could shorten those submenu blog, or you could technically just have blog as the label because the button gives enough context with the correct ARIA properties to tell you what it’s doing. That’s my opinion. There’s others in the community that may disagree.
>> AMBER: Yes. I feel like I mostly see them say submenu and then whatever text it’s adjacent or a submenu of.
>> STEVE: Yes. Yes. That’s what we do on our website.
>> AUTOMATED VOICE: Expanded.
>> ALEX: Okay. We do get expanded, but we don’t have initial state of collapse.
>> AUTOMATED VOICE: List of 20 items without a link.
>> ALEX: Can we get out of this with escape?
>> AUTOMATED VOICE: Child menu of all builders button expanded.
>> ALEX: We have an order of events issue again, but it more or less works.
>> AUTOMATED VOICE: Contact link. Child menu of all builders button collapsed. Contact link. Out of list heading level 1 components.
>> ALEX: All right. We have Heading Level 1.
>> AUTOMATED VOICE: Main landmark heading level 2 accordion. Heading level 1 components. Main landmark heading level 2 accordion. Landmark primary navigation navigation landmark list with six items
>> ALEX: Not sure why that heading 1 is not in the main landmark. That’s a little strange.
>> AUTOMATED VOICE: Components. [inaudible] level 1.
>> STEVE: Can I ask a question just for my own curiosity? On the header, it has a role of banner. Is that necessary?
>> ALEX: On this H1, I don’t think so.
>> STEVE: The header has a role of banner.
>> AUTOMATED VOICE: Main landmark. Banner landmark. Primary navigation. Landmark list with six items. Home link.
>> ALEX: I don’t really think it is in this scenario, because there’s not really a logo per se. I don’t really see what they’re considering banner content here.
>> AUTOMATED VOICE: Secondary navigation navigation landmark. List with one item. No previous landmark.
>> AMBER: Normally, the standard is that any sort of header that would have the site title or the site logo and navigation grouped in it would have a banner role. That’s the landmark region for a header.
>> AUTOMATED VOICE: Primary navigation list with six items. Home link.
>> ALEX: Let me take a look where this actually.
>> AUTOMATED VOICE: Elements list type. Headings Form fields. Buttons radio. Landmarks. Level 1 primary navigation. Level zero banner expanded. One of four
>> ALEX: Okay. It’s just announcing slightly strangely.
>> AUTOMATED VOICE: Level 1 primary navigation. Level zero main expanded. Two of four.
>> ALEX: Not even this is a full picture, though, because it doesn’t show the secondary navigation. This is very strange.
>> AMBER: Yes, I’ve noticed. I think the elements list in NVDA is not as nice as the rotor in VoiceOver.
>> ALEX: Oh, I 100% agree.
>> AMBER: They also don’t include article tags in the elements list in NVDA. VoiceOver does. It’s really interesting the things that NVDA has decided to skip. I saw a GitHub issue on their GitHub about the article landmark not being included, and one of the responses from one of the contributors was just, “We don’t actually think people would ever navigate by articles, and so we haven’t included it.”
>> ALEX: Yes, screen readers. I mean, there’s an endless amount of information that can be communicated. Some people go on the side of, “Let’s not include it.” Some people go on the side of, “Let’s include everything.” So it just depends. Which, I mean, yes, this website is more or less fine. Me personally, I would put the H1 in the main landmark, because that’s where I would expect it, but it’s not the end of the world that it’s not there.
>> AUTOMATED VOICE: Components level heading 1.
>> AMBER: Okay.
>> AUTOMATED VOICE: Main landmark heading level 2 accordion. Heading level 1 components.
>> ALEX: I would love to see an outline of landmarks to figure out exactly where components falls, because it almost sounds like it’s not in a landmark at all.
>> STEVE: Oh, no, it’s inside of a header, which this is why I asked. On visual inspection of the elements is why I was, okay, the main header has a role of banner, and then the heading has a role of header. I’m guessing that’s why they put banner on the main header, because they’re using another header here. Does that make sense?
>> ALEX: I mean, even this header here should really just be in the main.
>> STEVE: Right.
>> AMBER: Yes, I think that actually does not make sense to use a header tag. I think you’re only allowed to use a header tag if it’s inside another, like an article, then you could have a second header. If it’s outside of an article tag, you couldn’t have a second header or a second content info.
>> STEVE: It is in a section. I don’t know if that allows it, but I do think there is some over semantics happening here.
>> ALEX: Sections aren’t really read either, unless they’re attached to the role region and ARIA label, so also pretty invisible.
>> STEVE: Yes.
>> AUTOMATED VOICE: Main landmark heading. Level 2 accordion. Heading level 3 button expanded Accordion 1. Accordion 1 regional link Equalize Digital Web accessibility lorem ipsum dolor sit amet.
>> ALEX: Okay. That’s where our regions come from. These must–
>> AUTOMATED VOICE: Out of region level 3 button expanded level 1.
>> ALEX: That is a Heading 3 plus a button control. It’s definitely discoverable. I’ll give them that.
>> AUTOMATED VOICE: Accordion two button collapsed level 3. Heading level 3 button collapsed accordion 3. Heading level 3 expanded. Expanded. Accordion 2. Region. Web accessibility in WordPress lorem. WordPress. Right click here. Vestibulomotor. Require associated labels. [inaudible]. Inclusivity is not optional. WordPress Accordion 3. Button collapsed. Heading level 3.
>> ALEX: Yes, these are– they tell me when they’re open, and their headings, and their buttons, and they give multiple options. I don’t really have a problem with this. It’s very clear where the content starts and ends.
>> STEVE: Yes.
>> AUTOMATED VOICE: Level 2 Carousel/Slider. Slider content carousel button go to last slide. Button next slide. One of three slide heading level 3 slide 1. Accessible screen reader label lorem Equalize Digital. out of slide button. start auto play. [inaudible] tab selected Go to slide one. [inaudible] level 2 form.
>> ALEX: That’s probably one of the best sliders I’ve seen in a while.
>> AUTOMATED VOICE: Slider button start auto play.
>> ALEX: Let’s see what happens here.
>> AUTOMATED VOICE: Pause auto play.
>> ALEX: It’s all announcing.
>> STEVE: Should–
>> AUTOMATED VOICE: Start auto —
>> AMBER: You know what?
>> STEVE: Should it talk like-
>> AMBER: It might not autoplay even though you turned it on. This is an interesting thing. It looks like your mouse might be over the slide. [chuckles]
>> ALEX: Oh.
>> AMBER: I think that a lot of these carousels, when you hover them with your mouse, they don’t play. I don’t know if you’d be able to move your mouse.
>> ALEX: No, not right now.
>> AMBER: Yes, because it’s just in the center of the screen.
>> STEVE: Can I-
>> AMBER: Maybe if you left the carousel, it would start auto playing. If you shifted your focus somewhere. Even if you hit play.
>> STEVE: There’s probably a hover tracking on it. Can I ask a question about the play/pause button? It actually is modifying the ARIA label when you toggle it, which I’m not sure is the best approach. I mean, you can confirm. I think that the ARIA label should stay the same and that it should be treated as a toggle button. Correct?
>> ALEX: Correct. This, historically, doesn’t work very well cross-platform either. It’s very recently when NVDA actually added the support for this. Most of the time it wouldn’t read updated dynamic content like this.
>> STEVE: Cool.
>> AUTOMATED VOICE: Tab selected. Go to slide 1. Out of carousel. In level 2 form.
>> ALEX: Unfortunately, we’re in a world now where screen reader developers are trying to keep up with bad web practices. That’s kind of one of those things that’s evolving for the better over time, but then you start talking about price of other commercial screen readers, like JAWS is Freedom Scientific screen reader developer, you start to have an issue. People might be running that screen reader that’s five years out of date.
>> AUTOMATED VOICE: Note. This is a fake form. No email. name. Edit required invalid entry as auto complete.
>> ALEX: Yes, I see these also read as invalid entries.
>> AMBER: I think that’s just NVDA and the way it handles a required field that doesn’t have anything typed in it.
>> ALEX: Yes.
>> AUTOMATED VOICE: Name edit required invalid entry as auto complete link. .
>> ALEX: Does announce is required.
>> AUTOMATED VOICE: Company edit as auto complete blank. Email edit required invalid entry as auto complete link. Phone number edit as auto complete link. If you tell us your birthday, we’ll send you a gift every year. Month spin button.
>> ALEX: Okay. This even tells you the– reads you the description. That’s nice.
>> AUTOMATED VOICE: 0 9 10 11 12. Day spin button. 16 17 18 19 20 Year spin button 2026 2019 calendar button collapsed.
>> ALEX: All right. We have a calendar. Let’s see if this is accessible.
>> AUTOMATED VOICE: Expanded.
>> ALEX: It doesn’t tell you when you cross months, so this isn’t super great. You wouldn’t lean on this, would you?
>> STEVE: Are you able to toggle the month?
>> AUTOMATED VOICE: Next month’s button
>> STEVE: Keep going back. Tag back.
>> AUTOMATED VOICE: button collapsed. previous month’s button.
>> AMBER: It needs a screen reader over there.
>> STEVE: Yes.
>> ALEX: Yes, to try and expand this.
>> AUTOMATED VOICE: Choose a month of the year dialogue. November 2019. Button expanded.
>> ALEX: This is just way overly engineered at this point.
>> AUTOMATED VOICE: Month [inaudible] button knob. Year 2019.
>> ALEX: You’d just be better off manually typing.
>> AUTOMATED VOICE: 2020 2014 December 2014. Button expanded. Months [inaudible]
>> ALEX: Focus does return. So, not perfect, but improvable.
>> AUTOMATED VOICE: what’s your favorite cake flavor? Combo box chocolate collapse. We will send you —
>> AMBER: Also, I have to say, just in general, in comparison to the other one where you weren’t allowed to type in it- [chuckle]
>> STEVE: Yes.
>> AMBER: -and you couldn’t even get to it. That seem pretty good.
>> STEVE: Oh, yes.
>> ALEX: Oh, definitely.
>> STEVE: Yes.
>> AMBER: I’m curious, would you normally even try to use those, or do you just want a field you can type in?
>> ALEX: I just want a field I can type in.
>> STEVE: I’m kind of the same way. As a visual user, I think we’ve overengineered date pickers to a crazy degree. [chuckles]
>> AMBER: Especially for like your birthday. I see that all the time. I’m like, “Why do I want to have to pick my birthday out of a thing? I just want to type it.” [chuckles]
>> STEVE: Yes. Especially when your birthday keeps moving down the list further and further.
[laughter]
>> AUTOMATED VOICE: Which way should we contact you? Group email check box not checked.
>> ALEX: Okay, this is read very nicely.
>> AUTOMATED VOICE: Phone text box. Text check box not checked. Message edit require invalid entry multi line request grouping. Yes radio button not checked one of two. submit button.
>> ALEX: Yes, everything on this is read. Now let’s see if we can submit.
>> AUTOMATED VOICE: Please alert name is require. Email is required. Alert item is required. Alert message is required. Alert item is required. Alert name is required. Link same page. Email is required. Link same page. Item is required. Link same page. Message is required. Link same page. Item is required. Link same page. Please fix the error heading level 2. Link name is required. Link same page. Link email is required. Link same page. Link item is required. Link same page. Link message is required. Link same page. Link item is required.
>> STEVE: Holy crap.
>> ALEX: This is what happens when we overengineer with ARIA and focus.
>> STEVE: ARIA. Yes.
>> AMBER: What happened?
>> AUTOMATED VOICE: Same page. Link name is required List heading level 2. Please fix the errors.
>> ALEX: What happened is, it sounds like this became an ARIA live region and then focus was moved to it.
>> AMBER: Yes. This is interesting, because I tested this for them with VoiceOver. With VoiceOver, it only reads one time. NVDA reads the region once for being ARIA live and once for getting focus?
>> ALEX: Sounds that way.
>> STEVE: I actually think what happened was– I mean, I think it did that, but I think it read what you focused on and what was in the ARIA live, but were the individual messages on all the inputs also exposed into the ARIA live? Is that what it was?
>> AUTOMATED VOICE: -required. Edit required.
>> ALEX: Let me see. This is probably–
>> AUTOMATED VOICE: Menu. Inspect components Kadence Documents. Main landmark Article developer tool.
>> ALEX: If I’m right, I bet you these are alert roles.
>> AMBER: Yes, they are.
>> AUTOMATED VOICE: grab the color from the page button.
>> ALEX: Yes. This is just, do not do this.
>> AMBER: Those should not have alert roles on them.
>> STEVE: Right.
>> ALEX: Yes, you can definitely associate them with the field, but–
>> AUTOMATED VOICE: app. Kadence,. Name edit required invalid entry as auto complete. Name is required. Blank.
>> ALEX: That way it announces when you tab into the field, but this is way too verbose.
>> STEVE: Yes. It just read all those out, all at one time. Yes.
>> AMBER: That is so interesting.
>> ALEX: Yes, and then-
>> AMBER: I will say the amazing thing about Kadence is that they have been very quick to fix things.
>> STEVE: Yes. [laughs]
>> AMBER: I can almost guarantee these will all be fixed before this podcast episode comes out. Should we go past the form? I feel like we’ve only got about 10 more minutes.
[laughter]
>> AMBER: There’s a lot to show.
>> AUTOMATED VOICE: Heading level 2 link to pies twice the delight. Now vacant.
>> AMBER: Yes, there we go.
>> AUTOMATED VOICE:
>> ALEX: These read more links are better.
>> AUTOMATED VOICE:
>> ALEX: These tabs do not read when they are selected. That’s unfortunate.
>> AMBER: No?
>> AUTOMATED VOICE: [Inaudible]
>> ALEX: No.
>> STEVE: Yes. Just to jump back.
>> AMBER: Wow.
>> STEVE: Just to jump back a second. Alex is super quick. I mean, in comparison to the other page builder, when he went through the postbox there, those read more links are– they do give context to what they are. They’re not ambiguous, like they were on the other one.
>> ALEX: Correct. We can-
>> AUTOMATED VOICE:
>> ALEX: -take a quick look at that.
>> AUTOMATED VOICE: Elements list dialogue. Pie 17 of two pies. Read the — Read [Inaudible] pies. twice. Company info 20 of read more Meet Sarah – The Heart Behind Our Bakes. Company info 23 of 36. Our Bread, Our Process – Beaked to Perfection Every Time. 25
>> ALEX: The only call out I’ll make here is-
>> AUTOMATED VOICE: Company info 20 —
>> ALEX: -company info. I suppose that’s maybe a category. Because it’s above the heading, it’s less discoverable.
>> AMBER: Oh, you’d like to see those positioned below the heading?
>> ALEX: Yes, I think that would make it more discoverable.
>> STEVE: Yes. I think we’ve run into this on client stuff, too. Where a design calls for a heading like that to be above, but semantically, it really should be below, like you’re saying, and I’ve used CSS grid to visually move it above, where– but it still is in the right place in the DOM.
>> AUTOMATED VOICE: Testimonials level heading 2.
>> ALEX: Okay. Down to testimonials.
>> AUTOMATED VOICE: List with three items. Heading level 3. Saved my night! Graphic 5 out of 5 stars. Block quote the quiche was a lifesaver on a busy weeknight. flake knowing I can bring home something. Out of block quote graphic head shot. Jane D. CEO of Mega Corp, LLC. Heading level 3 amazing bread. Graphic 5 out of 5 stars. Block quote. I’ve had a lot of — perfectly crisp. Out of block quote graphic head shot James L. Heading level 3 made the day. Graphic 5 out of 5 stars. Out of block quote head shot Tanya S. Happy Mom. Out of list heading level 2 screen reader.
>> ALEX: That is a bad as perfect as I expected to get for testimonials. It’s structured well with the headings and it all reads great.
>> STEVE: Yes.
>> AMBER: Awesome.
>> AUTOMATED VOICE: If no text outputs here — the screen reader text. is sufficient for a “pass”. Heading level 3 screen reader text. text is wrapped in the screen reader text class. heading level 3 sr-only. This text is wrapped in the sr-only class. Content info landmark footer navigation list with three items Equalize Digital.
>> ALEX: Then we get down to the footer, where the landmarks are communicated.
>> AUTOMATED VOICE: Link Accessibility Checker. Link Accessibility Auditing. Out of list link Facebook. Link GitHub. Link LinkedIn. Link X. Link YouTube.
>> ALEX: We have our social links.
>> AUTOMATED VOICE: 2020 Kadence – WordPress Theme by link Kadence WP. Accessibility —
>> ALEX: Yes. I mean, this just needs a couple little adjustments. I mean, this is no more than a, maybe, a barely couple hours’ worth of work. I mean, it’s a really solid theme.
>> AMBER: Yes. Let’s stop sharing for just a minute and do a little wrap up. I really appreciate you sharing all of that and sharing thoughts. I’m curious from you more broadly, having looked at a really bad thing and something that’s like good, almost perfect, only needs a little bit of work, what’s your average experience like? Where do average websites fall in this span?
>> ALEX: It’s a really subjective question, because what’s accessible for me might not be accessible to others. If I was to give my opinion on it, it’s very much industry-specific. Before we had the European Accessibility Act get passed and go into effect, Amazon.com was maybe one of the worst retail websites out there. It was awful. Now?
>> AMBER: Imagine how much we all order on Amazon, and that all the blind people who were left out.
>> ALEX: Now it’s a work of art. It is not perfect by any means, but they are making meaningful change. There is more attention to heading order. Just having stuff– Amazon, it was so bad that I actually had my own custom workarounds. Now my workarounds don’t work anymore, because they’ve actually made the website function the way it should.
>> STEVE: Was their app any better before?
>> ALEX: I don’t know. Most Android apps, when it comes to that level of accessibility, are measurable to iOS, Apple. Their Apple app might have been fine. Android, I guess developers are still under this thought process that Android is used less by the blind, so you can tell it in their apps.
>> STEVE: It’s not prioritized. Yes.
>> ALEX: As far as blogs and other small websites, your mileage varies. Local businesses like restaurants, hardly ever accessible. It’s so rare.
>> AMBER: Yes, and a lot of them use PDFs for their menus and things, so if you want to know, you have to download a PDF, and I’m sure those are horrible as well.
>> ALEX: Which these days we can at least scan them into AI and get accessible descriptions, but most of the time they just take a picture of a piece of paper when all they really have to do is provide what made that piece of paper.
>> STEVE: Right. A lot of those small businesses, they’re working on very limited budgets, and they’re probably using off-the-shelf solutions, right? Which is kind of what we’re talking about a little bit here and we’re kind of testing. And I think it underscores the importance of makers of those off-the-shelf solutions, such as us in the WordPress community, how important it is to think about accessibility when you’re building this, because this is going to be used by a small restaurant that doesn’t necessarily have a budget to do extensive accessibility auditing or user testing. So I think us as developers, we have a lot of responsibility in that regard.
>> ALEX: Definitely. We can’t always control how users use content, but if the structure is not there, it doesn’t matter how they use content. It’s still going to be inaccessible. And that’s where developers have a responsibility to do better. This theme is almost perfect. Before this episode is out, a good amount of this, if not all of it, will probably be fixed. But then we go back to the first website and it’s useless. I wouldn’t even stay on that website.
>> AMBER: If you had one thing that you would want to say to WordPress plugin developers or theme developers, what would it be, Alex?
>> ALEX: Do better. The status quo is not acceptable. Accessibility is not a new thing. Quit acting like it’s a new thing. You are hurting real people, and you need to realize that.
>> AMBER: Yes, for sure. We really appreciate you coming on and being willing to share your expertise and your screen reader with us, even at the painfully slow speed that it was. If people want to follow up with you about doing more accessibility testing or asking you any additional questions, where can they find you on the web?
>> ALEX: You can find me on LinkedIn, and I run around in a couple of Slack groups here and there, but mostly on LinkedIn. That’s the best way to get a hold of me.
>> AMBER: Great. Thank you so much.
>> STEVE: Great. Awesome chat, and as always, Alex.
>> ALEX: Yes, it’s been great. Really appreciate the time.
>> STEVE: All right. Thank you.
>> CHRIS: Thanks for listening to Accessibility Craft. If you enjoyed this episode, please subscribe in your podcast app to get notified when future episodes release. You can find Accessibility Craft on Apple Podcasts, Spotify, and more. And if building accessibility awareness is important to you, please consider rating Accessibility Craft five stars on Apple Podcasts.
Accessibility Craft is produced by Equalize Digital and hosted by Amber Hinds, Chris Hinds, and Steve Jones. Steve Jones composed our theme music. Learn how we help make thousands of WordPress websites more accessible at EqualizeDigital.com.