Accessibility Show with Joe Dolson, Episode 2: Key issues and solutions in website menus

[00:00:07] Nathan Wrigley: This episode of the WP Builds podcast is brought to you by GoDaddy Pro, the home of manage WordPress hosting that includes free domain, SSL, and 24 7 support. Bundle that with the hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients and get 30% of new purchases. Find out more at go.me/wpuilds.

And by Bluehost. Redefine your web hosting experience with Bluehost Cloud. Managed WordPress hosting that comes with lightning fast websites, 100% network uptime, and 24 7 priority support. With Bluehost Cloud, the possibilities are out of this world. Experience it today at bluehost.com/cloud.

And by Omnisend. Do you sell your stuff online? Then meet Omnisend. Yes, that Omnisend. The email and SMS tool that helps you make 73 bucks for every dollar spent. The one that's so good, it's almost boring. Hate the excitement of rollercoaster sales? Prefer a steady line going up? Try Omnisend today at omnisend.com.

Hello there and welcome to the second edition of the Accessibility Show, which I'm doing every few weeks, hopefully with Joe Dolson. There is Joe. How are you doing, Joe?

[00:01:42] Joe Dolson: I'm doing great. Glad to be here again.

[00:01:44] Nathan Wrigley: Yeah. I'm really pleased that you are. We had, we had our first episode where we looked at mobile menu toggles, several weeks ago now. Subsequently, I met up with you at WordCamp US. That was nice.

But, we're back and we're gonna talk about something a little bit different today. If you are interested in finding the content, we've got a YouTube channel, but go to wp builds.com and search in the menu. In the archives menu, you can see the Accessibility Show. If you click in there, there's an archive, and hopefully you'll be able to locate the episodes.

And hopefully, I think, the last episode was well received. Certainly in the WordPress community that I know of, people thought it was a really credible show and they thought it was a good idea. So we're gonna press on. How was it received in the sort of accessibility side of things. Did you get any feedback?

[00:02:29] Joe Dolson: I got some feedback, yeah. Oh, and it was positive. It got shared in some fairly prominent places and.

[00:02:35] Nathan Wrigley: Nice.

[00:02:36] Joe Dolson: Some lists that have been going on for many years of new things and published in accessibility. So I think it was well received. I think it's, it was, it was novel in that it was so focused. Yeah. Just one issue, just tight. And I think that was something that was appreciated.

[00:02:54] Nathan Wrigley: Okay, perfect. that's the endeavor. We're gonna try and focus on one particular thing for each episode and keep it to about 30 minutes. So you should be able to consume it fairly quickly.

We're gonna share Joe's screen, and when Joe's screen is shared, obviously whatever is on his screen, you will see. Hopefully it'll be fairly straightforward. I'll try and interrupt if I'm confused in any way. But, shall I share your screen, Joe, whilst you tell us what it is that we're gonna be looking at this time around?

[00:03:19] Joe Dolson: Sure. Go for it.

[00:03:21] Nathan Wrigley: Okay.

[00:03:22] Joe Dolson: So this show, first of all, I'm going to continue slightly with this whole mobile menu toggle idea from the last show. I'm gonna show one that's pretty good. It's not perfect, but it's not going to cause any barriers. It's a good experience.

[00:03:38] Nathan Wrigley: Nice.

[00:03:38] Joe Dolson: And then I'm gonna segue from that. Into taking a look at navigation menus themselves, because of course, once you have a menu, you're great, you can open it and close it. But, can you in fact use the menu itself?

In this case, I'm not looking at the mobile menu, I'm gonna look at the desktop menu. But, these are very important things. The key thing about using any website is, can I get around?

[00:04:02] Nathan Wrigley: Right.

[00:04:05] Joe Dolson: The characteristics generally of a navigation menu are going to be that it is in a navigation landmark. That navigation landmark has a name that's meaningful, so that when a screen reader enters it, for example, it tells them this is a navigation region. It's called main. That's great. I now know I'm in the main menu.

Then you should have visible focus. You should be able to tell where you are. And then, if it has sub menus or a mega menu, you should be able to get into those and find out what those are.

So let's look at a handful of these menus and see what we've got. The first site I'm gonna look at is, this site called biritemarket.com. And this is a thing that was actually specifically inspired by going to WordCamp US, because Amber Hinds and Brian Coords used this site for one of Jamie Marsland's very fun live shows of speed builds.

[00:05:00] Nathan Wrigley: Nice.

[00:05:01] Joe Dolson: And as I was looking at it, I was like, huh, this site has some interesting characteristics that would be fun to take a look at.

First things first, I'm gonna take a look at this mobile menu. So let's just flip ourselves into our mobile view.

[00:05:19] Nathan Wrigley: Okie doke.

[00:05:20] Joe Dolson: So here we are. We've got our mobile menu. I'll inspect that just to find out what it is. And one of the things you find out right away is it is in fact a button. Great. That means it is automatically going to be keyboard accessible unless they've done something really weird, which they haven't.

Additionally, I'll notice it has an aria expanded attribute. So that tells me that the user on encountering this button will be immediately notified whether or not it is in fact open.

Using the keyboard, it's got a skip content link, that's great. It does have a focus state. It's a little bit light for my taste. You can see that it changes, so at least there is something going on there.

[00:06:06] Nathan Wrigley: Yeah. Yeah.

[00:06:07] Joe Dolson: Then I hit enter and it opens. I hit enter again and it closes. This is working effectively. Now I just lost myself, but that's my fault because I clicked somewhere I shouldn't have.

So I'll get back to that. Now I'm in it. I can navigate down, I can get into the menu. And I hit escape and I can close it.

[00:06:34] Nathan Wrigley: Nice.

[00:06:35] Joe Dolson: So essentially that's a pretty good navigation for a mobile view. I'll continue to say it's not perfect. It does a lot of things that are good, but it doesn't constrain focus. So when I'm tabbing through that menu, I could end up leaving it and getting lost in the page. That isn't disastrous because it also still closes on escape, even though it's not currently focused. So it could be a lot worse. And the focus states within the menu and for the button itself are pretty light. I don't really care for that, but it does work. It is functional.

Now let's take a quick look at their desktop menu. Now, the first thing I wanna do is I'm gonna look and see, what do we have in the way of landmark regions on this page?

So now this menu, it does not show up as being in a navigation landmark. Although up here in the corner, we do have a landmark that's a navigation landmark. Now that I would consider a major negative. If you're going to have only one navigation landmark, it really should be the main navigation. This is on this little utility navigation in the upper right corner.

Second, the accessible name of this navigation landmark. If you can see that it's very small.

[00:07:51] Nathan Wrigley: I can yeah. Yep.

[00:07:51] Joe Dolson: It's site navigation colon top navigation. So first of all, the word navigation should never be in your aria label that gives that accessible name for a navigation region, because that is already announced by the screen reader.

So literally what this is going to be announced as, when you're reading it in NVDA, is site navigation, top navigation landmark.

[00:08:15] Nathan Wrigley: Right, so a lot of navigations.

[00:08:17] Joe Dolson: I do think, somebody will definitely get the idea that this is navigation. But the main navigation doesn't have a navigation landmark, so it's not findable using landmark navigation, and it's not going to be announced as navigation when you enter it. So that, that's a bummer.

[00:08:34] Nathan Wrigley: Okay.

[00:08:35] Joe Dolson: So let's look at it and see a little bit of what we can do using the keyboard. So I'm turning on pressed keys so I can keep track of where I am, and I'm gonna tab around. You could see here I was right there. I'm in the locations and contact us. So next, I'm expecting to get to the menu.

It does have a focus state here. But there aren't any dropdowns. So are there dropdowns on this? Ooh, there are.

[00:09:07] Nathan Wrigley: There certainly are, yeah.

[00:09:08] Joe Dolson: Yeah. There are definitely dropdowns. They're not visible. Now are these buttons? Perhaps they're buttons and I should click on it.

Oh, but when I clicked on it, it actually did navigate through to the page, which is not what I wanted to do. And I'm also gonna note that, this is actually working, this is opening the dropdown. It didn't in my previous test, which was on a different browser. This is on Chrome, I previously tested it on Firefox.

[00:09:45] Nathan Wrigley: Oh, interesting. Okay.

[00:09:46] Joe Dolson: And so that's actually an inconsistency and that's means that people are gonna have a different experience depending on what they're doing.

However, the fact that it, actually opens up that page, creates some problems. I just triggered it in a way that it will not open that page.

So let's see if I can get into this menu. Ooh, I can. I have some doubts about that color contrast, mind you.

[00:10:08] Nathan Wrigley: Yeah, it's very high, isn't it?

[00:10:09] Joe Dolson: Now I've gotten into it, I can't really see what it is. This is going to be particularly a problem for people who have very low vision. It's gonna be a problem for people with, particularly if they're using a tight zoom where they can only see what they're actually focused on, and you don't see it until you get to it, and you can't see it then.

So this is questionable. So on the whole, it does work. It's unreliable, it doesn't use, it clearly does not work in all browsers. And it's got, it's got some fuzziness about it. It's okay. It's not the worst I've ever seen.

So let's move on to another one. I'm gonna take a look now at a different site.

[00:10:55] Nathan Wrigley: Whilst you are getting that ready, I will just say that if you want to find the show notes for this, if you head to wpbuilds.com, search for probably just the keyword, Joe Dolson. And then the episodes will come up and we will provide the links in the show notes. So hopefully you can locate them. Yeah.

[00:11:13] Joe Dolson: All right. Here we are on our next site. this is shop.arredodalpozzo.it.

[00:11:22] Nathan Wrigley: Okay.

[00:11:23] Joe Dolson: This is, and I'll just say, this is like all of the sites I'm picking, one that's been selected from the WordPress Showcase.

[00:11:30] Nathan Wrigley: Thank you.

[00:11:31] Joe Dolson: So you can find this in the WordPress Showcase if you wanna take a look at it, and see more of it or go to that URL.

First things first. Once again, I'm gonna check and see whether we have a navigation landmark. And once again, we don't. We do have a landmark. We have a banner landmark that doesn't appear to contain anything, and really nothing else.

One of the general rules of using landmarks is that if you use landmarks, all content on the page should be wrapped in a landmark. It's not required to use a landmark, but landmarks, the idea of landmarks is that a user with a screen reader can trigger a landmark navigation and just jump from the main sections of a page freely and find everything.

And the key thing there is they should be able to find everything by going through the landmarks. There shouldn't be anything that's orphaned and not in a landmark. I don't think any user would think this had landmarks since it appeared to only have one. So they would be suspicious pretty quickly.

But so, no navigation landmark, that's inconvenient. Now let's try out the focus states. I'm not seeing anything here.

[00:12:54] Nathan Wrigley: Oh, you're not getting anywhere there, are you? It's just.

[00:12:56] Joe Dolson: I'm tabbing through. No idea where I am. No clue at all. I can see from monitoring the actual address that I'm on in the footer of the browser, way down here.

[00:13:10] Nathan Wrigley: Yeah.

[00:13:10] Joe Dolson: That I was just on a. Facebook link.

[00:13:14] Nathan Wrigley: Facebook link. Yeah. I saw that.

[00:13:15] Joe Dolson: I haven't the faintest idea where this Facebook link might be. I don't see it anywhere.

[00:13:20] Nathan Wrigley: It's the kind of thing you would see in a footer or something, but I don't know. Yeah, I don't see it anywhere.

[00:13:24] Joe Dolson: So these are interesting clues. They certainly suggest there's something fishy here. One of the things that suggests to me is that there is content here that's been hidden. But isn't actually hidden. It's still in the DOM. So it can be accessed by the keyboard, it can be accessed by a screen reader, but it is not visible.

So let's try and figure out where that actually is. So I do know that this is a toggle button, because I looked at this in advance. So what does that code look like? It is a link with a JavaScript trigger. It has no aria expanded. It's not gonna tell you whether it's open or closed. It's going to expect, it's gonna tell you it's a link. It doesn't have a role of button. It isn't a button. So you're gonna expect it to link to something. It does not do that.

So already this is going to be a problem. You can get to it. It's difficult because you don't really know where you are, but it's possible. Oh, that was something else. I don't know what that was. I'm gonna try and get to this. Nope.

[00:14:41] Nathan Wrigley: Oh.

[00:14:42] Joe Dolson: Okay. I'm not gonna try and get to that with the keyboard because it's too much work. That should tell you something.

Alright, now I've opened it. There's clearly a contrast problem here.

[00:14:55] Nathan Wrigley: Yeah.

[00:14:55] Joe Dolson: All of these are very light, very pale. You can see that this is opening a whole bunch of additional stuff. So let's see if we can get to that. I'm focused on this right now.

[00:15:09] Nathan Wrigley: Uhhuh.

[00:15:09] Joe Dolson: So in theory, I should be navigating into the menu. And I did, so I can see I focused on the close button. That's a good sign. Now what happens next?

[00:15:21] Nathan Wrigley: Nail biting.

[00:15:22] Joe Dolson: Nothing. Nothing in particular. I'm on a bunch of JavaScript stuff. I don't know what it is. Let's see what that does. I don't have any idea what that.

[00:15:34] Nathan Wrigley: You went to a category, something.

[00:15:36] Joe Dolson: I went to a page.

[00:15:37] Nathan Wrigley: A different thing.

[00:15:38] Joe Dolson: I'm clicking on some random JavaScript behavior. I went to some random page. I don't know what happened.

[00:15:44] Nathan Wrigley: Okay, so can I just make a point at this point, we're having a bit of a laugh here, aren't we? Because it's interesting. But I guess the serious point here is this is really frustrating.

[00:15:57] Joe Dolson: This is very frustrating.

[00:15:58] Nathan Wrigley: Yeah.

[00:15:58] Joe Dolson: If you are trying to navigate this without having a mouse, you basically are dead in the water.

[00:16:03] Nathan Wrigley: Yeah.

[00:16:04] Joe Dolson: You can't get anywhere.

[00:16:05] Nathan Wrigley: Yeah.

[00:16:06] Joe Dolson: So I'm just gonna do a few inspections here and just take a look at what's actually going on here so we, we can talk about it.

This close button, this is the one thing I did focus on.

[00:16:15] Nathan Wrigley: You did? Yeah.

[00:16:16] Joe Dolson: It is in fact a button. It's, that's great. Does it have an accessible name? Let's find out.

[00:16:31] Nathan Wrigley: Oh, you've increased the size of your, there we go.

[00:16:34] Joe Dolson: It does not, there's nothing in here that provides any kind of naming. It's got, it's the character inside it is an SVG. That SVG does not have a title element. So there is no name of this button. Nobody, you can get to it, but you're not gonna know what it does.

These Are interesting. So if you do navigate into this, and I secretly looked at this in advance.

[00:17:00] Nathan Wrigley: Oh, good for you. That's good.

[00:17:01] Joe Dolson: And here's the thing, you can actually tab into this menu, and you can get through this stuff. The thing is, all of these links, there are tons and tons of them, they are all in the dom permanently.

[00:17:14] Nathan Wrigley: Okay.

[00:17:15] Joe Dolson: They've been hidden using opacity, and that's how all of the hiding is being done on this site. Which means that they're just invisible. If you're tabbing through, you're going to go through every single one of these links on your way through to get to the page.

[00:17:32] Nathan Wrigley: So every, so we're probably looking at what 30 on that sub menu.

[00:17:37] Joe Dolson: Alone.

[00:17:37] Nathan Wrigley: And then if you go to the other one, okay. Another 30 ish.

[00:17:39] Joe Dolson: There's a lot. This is just a ton of stuff. And this is an index letters.

[00:17:45] Nathan Wrigley: This is the whole alphabet. Oh, hang on. Yeah.

[00:17:47] Joe Dolson: I accidentally clicked on something. So yeah, this is a labor intensive menu. If you're using this as with a screen reader, whew.

[00:17:57] Nathan Wrigley: You gotta go through all of them. There's hundreds.

[00:17:59] Joe Dolson: You can't find anything. You can't get anywhere. So yeah, I would just classify this as a menu that is incredibly frustrating. I have much, not much else to say about that one. It would be.

[00:18:13] Nathan Wrigley: Okay, no, that's fine.

[00:18:14] Joe Dolson: Be a terrible experience.

[00:18:16] Nathan Wrigley: Okay, so we're going for another one, which I believe we did last time actually. I think this website came up last time.

[00:18:21] Joe Dolson: Yeah, I think we may have looked at this one before.

[00:18:23] Nathan Wrigley: Yeah, we did.

[00:18:24] Joe Dolson: But the thing is, it was really unique in its top level menu. So it's really well worth looking at again.

[00:18:32] Nathan Wrigley: Okay, nice.

[00:18:33] Joe Dolson: Now I'm gonna do this one a little bit differently because I want to show you what the expanded menu is before I start trying to explore it.

[00:18:43] Nathan Wrigley: Okay.

[00:18:43] Joe Dolson: So you can click on any of these top level items and they all open the same menu.

[00:18:52] Nathan Wrigley: Ha, that is unique.

[00:18:53] Joe Dolson: So it's basically, this is the artwork stuff. This is the shop, this is the museum stuff. And they just all open whenever you want.

[00:19:03] Nathan Wrigley: So that's really bound to the view port, isn't it? If the view, port is wide, then it works, and if not, then I'm guessing it doesn't.

[00:19:09] Joe Dolson: And actually the internal structure of this is pretty standard.

[00:19:13] Nathan Wrigley: Okay, good.

[00:19:13] Joe Dolson: This, these are, this is a sub menu list that's nested inside this list item.

[00:19:19] Nathan Wrigley: Oh, okay, great.

[00:19:20] Joe Dolson: So the structure is the same as any other WordPress menu.

[00:19:23] Nathan Wrigley: Got it.

[00:19:23] Joe Dolson: It just looks really different. Now we're gonna take a look at this using the keyboard, because it's a little unique.

[00:19:36] Nathan Wrigley: So I should say this is noguchi.org. Another showcase website. Okay.

[00:19:41] Joe Dolson: Alright, so you can open it. Great. You can't close it with the keyboard. And I've now opened it. I have not been able to find any way of closing it. I can press the escape key.

[00:19:57] Nathan Wrigley: Oh.

[00:19:57] Joe Dolson: Turn on my pressed keys. You can see what I'm doing.

[00:19:59] Nathan Wrigley: Yeah.

[00:20:00] Joe Dolson: Doesn't do anything. There's no close button. So the only thing I can do at this point is actually go to a link or just keep navigating through. But now, because I've navigated out of the menu, it's hidden.

[00:20:13] Nathan Wrigley: Got it.

[00:20:14] Joe Dolson: The way you close it is by clicking anywhere outside of the menu, but it's the only way. It requires an event. Click on something. So you just, you can't close it.

Now what happens if you don't open the menu?

[00:20:30] Nathan Wrigley: What?

[00:20:31] Joe Dolson: Yeah, it just disappears.

[00:20:33] Nathan Wrigley: It just went away.

[00:20:35] Joe Dolson: And that's because, it's a bit messed up. What happened is this is another case where that sub menu is not actually removed from the DOM. So what I focused on there was biography. So when I tabbed past Isamo Noguchi.

[00:20:52] Nathan Wrigley: Yeah.

[00:20:53] Joe Dolson: It went to biography.

[00:20:54] Nathan Wrigley: Okay.

[00:20:54] Joe Dolson: Biography was in an invisible zone, so it's now focused in an invisible space. And I have no idea why the entire rest of the menu disappeared.

[00:21:06] Nathan Wrigley: Okay.

[00:21:06] Joe Dolson: That, all I can tell you is.

[00:21:08] Nathan Wrigley: It did.

[00:21:09] Joe Dolson: That would be a bug that I would have to explore at length. Okay, and I thought it was really interesting.

[00:21:15] Nathan Wrigley: Yeah.

[00:21:15] Joe Dolson: But I have no idea what it was.

[00:21:17] Nathan Wrigley: Oh gosh. Yeah. That was, that certainly was interesting. So we're stuck, we're trapped inside this menu basically.

[00:21:22] Joe Dolson: Right.

[00:21:22] Nathan Wrigley: No way out. Okay.

[00:21:23] Joe Dolson: Yeah. And that's the interesting thing is because these links here, these are just standard links. They are not gonna inform you that they are actually being used as a button, that they're a toggle in some way. They don't have an aria expanded attribute. They don't have a role equals button. So as a user, if I'm just navigating with the keyboard, I am not going to get to that link and say, I need to click on this to expand the menu. I'm going to say, oh, Isamo Noguchi. I wonder what else is in this menu? And I'm gonna tab, and now I'm like.

[00:21:58] Nathan Wrigley: Yeah.

[00:21:59] Joe Dolson: What just happened?

[00:21:59] Nathan Wrigley: Yeah. I'm lost. I've just been transported.

[00:22:02] Joe Dolson: So it's always fun. Yeah. That classifies as just a fun, unique experience exploring the menu.

[00:22:09] Nathan Wrigley: never to be seen again. Yeah, literally.

[00:22:12] Joe Dolson: So this is just an example of things that can happen with a menu if you're not really anticipating controls. And so much of that would be resolved if that link simply was actually mapped to be, hey, there's a button, and had aria expanded. And then when a user gets to it, they're like, I now have expectations of what this button will do. I expect that it will open something. It's going to toggle something open. I'm not going to expect that I can just do something extra.

And also having that sub menu actually removed from the DOM means you don't suddenly focus on this abstract area and trigger the unknown bug that I'm not gonna go into detail on 'cause.

[00:22:51] Nathan Wrigley: Okay.

[00:22:52] Joe Dolson: I would be making stuff up.

[00:22:54] Nathan Wrigley: Yeah. that's fine.

Okay, interesting, things that you've discovered there. Is there any more on this website or do you wanna go on?

[00:23:03] Joe Dolson: No, I think that's it for this website. Okay. I'm gonna go onto the next one. This is newsroom.spotify.com.

[00:23:11] Nathan Wrigley: Gosh, is this their like, PR department or something?

[00:23:15] Joe Dolson: I assume so.

[00:23:16] Nathan Wrigley: Yeah. I, something like that.

[00:23:17] Joe Dolson: It makes sense. So I didn't do this on the last one because mostly I wanted to make sure we got to the kind of weird bug. But landmarks, let's take a look.

Again, we don't have a navigation landmark. In this case we do have a whole bunch of landmarks, so people will actually navigate this expecting that the, that the landmarks do something.

And they will, you'll sort of find it, because the navigation is inside the banner and you can maybe intuit that. But it's not helpful, it's not gonna be the best way of finding it.

So let's take a look at how this actually navigates with the keyboard. First of all, it does have a focus state. It's pretty clear. I think that's pretty straightforward. So yay.

Next. I can open this sub menu. It's a nice big sub menu. I fully expect when I hit tab, I will either go to the close in the upper right corner, or to news and announcements. Either those would be somewhat reasonable. Ah, I did not.

[00:24:24] Nathan Wrigley: Oh, joe, do you wanna put your pressed keys on it?

[00:24:27] Joe Dolson: Oh, sure, I'll put the press keys on. Yeah, why not?

[00:24:29] Nathan Wrigley: Thank you.

[00:24:31] Joe Dolson: Anyway, so as you see, what actually happened is I went to the company dropdown. So the navigation did not go into news announcements, or to the close button, it went to company.

Okay. so that suggests that this is a weird order. What's gonna happen next?

Okay, now I went to search and now the menu closed. So I'm not clear how would I actually get into this menu with the keyboard? I hit company, I hit next. I'm in the search, but the menu's closed.

So this is a pretty significant focus order problem. Essentially, what really should be happening is one of two things. When you open this menu, either it should be dynamically managing focus so that the next focus point is inside that sub menu. Or that sub menu should be in the document object model next, after the news. So that when you hit that tab key, it just goes into the menu that you've just opened.

Instead, you don't have any apparent mode to actually get into that. There's just, there's nothing there. That's also true of the company. You can't get to that menu. And then a search, which I didn't address yet, it's got this nice little quick list of popular topics, which you also can't get to.

[00:25:58] Nathan Wrigley: Oh gosh.

[00:26:00] Joe Dolson: Because as soon as you tab, it goes to the submit button, which is great. It's got a submit button. Yay. but it closes the information. So this is just mismanagement of when things close. Things are in the wrong place, they close the wrong time. It makes things difficult.

Now, as far as where this is actually located, let's just take a quick look. This dropdown pane is located in a container. It's in a whole row right after the container that contains the menu.

[00:26:37] Nathan Wrigley: Okay.

[00:26:38] Joe Dolson: So that's, that means, it's close by, but it is not next.

[00:26:43] Nathan Wrigley: Got it.

[00:26:44] Joe Dolson: It should be left open until somebody gets to it. It should be, probably needs some focus management. This is behaving like a modal because it closes, it hides everything behind it. It's not exactly a modal, but it's like that. So it probably also needs to constrain focus. I'll see if it does that.

I'm gonna say it does not, you've just, I've just jumped to the next content. This is now, because it's behind the scrim, it's not really very readable.

[00:27:17] Nathan Wrigley: Yeah.

[00:27:18] Joe Dolson: So you are in a place, but you can't really see what you're doing. And it doesn't close with escape, so you're just lost.

So I'll also note that in that navigation, I never did get to the close button.

[00:27:34] Nathan Wrigley: Let's see if you can finally get there.

[00:27:37] Joe Dolson: Nope, I cannot get to the close button. So what is this? The close button, it is an anchor element.

[00:27:47] Nathan Wrigley: Okay. It's not a button.

[00:27:47] Joe Dolson: But it's an anchor element with no href attribute. And what that means is it's not a link. So the A element, it's called the anchor element. It's not the link element. It behaves as a link if it has an href attribute and it behaves ,as a target if it doesn't. Back in the old days before we targeted everything using an ID on a div or a heading, you would target something by putting an A with a name attribute.

[00:28:17] Nathan Wrigley: Yeah.

[00:28:18] Joe Dolson: And that was the anchor that, that's a with a name attribute is an anchor. It's a place where you can land somebody. But because it doesn't have an href, it is not something you can focus on. You can't tab to it. This is a common error because people assume that because the A element is used for links, that it's natively accessible. You can tab to it automatically, but that is only true if it has an HF attribute, and this does not.

So even if somebody managed to get into this, they would have a hard time closing it.

[00:28:50] Nathan Wrigley: Gosh.

[00:28:51] Joe Dolson: So if they could get back into that main menu, they could close it very quickly because as soon as they changed focus.

[00:28:57] Nathan Wrigley: It's a learned behavior.

[00:29:00] Joe Dolson: I feel like that's going to create a pretty poor experience. This is a creative menu, and there's no reason it can't be accessible. With some minor focus management, they could have made this exact same interface, totally, reasonably accessible. It could be completely predictable. They didn't. And that's the common case.

Just to take a quick look at the triggers. Those are actually pretty solid, because they do tell you that they trigger stuff. It's a link, which not ideal, but it has aria has popup equals true, and aria expanded. So it's going to tell you what the state of what it's controlling it is. It's going to tell you, it's gonna give you a clue about what it does by bringing up a popup. People will be able to figure that out. Even as an aria controls attribute, which tells you what it controls, though in terms of actual accessibility consequences, that has almost no application anywhere. But it is a good thing to have.

But it, unfortunately because you can't actually get to that, it's told you all this stuff, but it is effectively a lie. Yeah. Fun with menus.

[00:30:15] Nathan Wrigley: Indeed.

[00:30:15] Joe Dolson: There's all these different ways that people can create menus that look really cool. But when it comes right down to it, you can't use them.

[00:30:26] Nathan Wrigley: Yeah. They're not working. They're not working.

[00:30:28] Joe Dolson: There's also a fun thing in this one.

[00:30:30] Nathan Wrigley: Oh, yeah.

[00:30:31] Joe Dolson: That fun animation. I don't. That's interesting. But if you look at the code for this, the way they've done that is every single letter.

[00:30:39] Nathan Wrigley: Oh my word.

[00:30:41] Joe Dolson: Of a separate line. So I'm gonna tell you how this will be read by a screen reader, and it's letter by letter. If you're doing a line reading, you're using your arrow keys to navigate through this. You're gonna read N E W S A & A, and is gonna go on forever. All so that they could have this cute animation.

[00:31:05] Nathan Wrigley: That fun little animation so that it can scroll up from the start to the end. My word, the spider's webs that we weave, eh, in order to try and get a new.

[00:31:16] Joe Dolson: Try and do something clever and the end result is we've made an experience that is very painful for a certain subset of users. So that's what I've got for today. I just picked out four to look at. I wanted to pick four that had, all had somewhat unique different types of navigation issues. And I think you saw some fun experiences.

[00:31:41] Nathan Wrigley: Nice. I appreciate that. I've taken the, screen away, so it's just you and I now. But, firstly, I would say a great big thank you, Joe. I appreciate it. It's amazing.

[00:31:50] Joe Dolson: Thank you.

[00:31:50] Nathan Wrigley: You coming on and given us all of this wisdom for free.

Joe, where can we find you? If people wanna make contact with you. You never know, it may be the people who run those websites.

[00:32:03] Joe Dolson: Maybe.

[00:32:03] Nathan Wrigley: How would we find you?

[00:32:05] Joe Dolson: So you can find, my website is joedolson.com. You can find me on Twitter, or X whatever @joedolson. You can find me on Mastodon at, I better check that, I think it's toot.Io.

[00:32:20] Nathan Wrigley: I think, is it Toots, the plural? I can't remember. I'll, oh.

[00:32:25] Joe Dolson: toot.io.

[00:32:27] Nathan Wrigley: Okay.

[00:32:27] Joe Dolson: Is what WP Accessibility Day is on.

[00:32:31] Nathan Wrigley: Okay.

[00:32:32] Joe Dolson: You can find me at WP Accessibility Day.

[00:32:35] Nathan Wrigley: Let's go with that.

[00:32:36] Joe Dolson: WP Accessibility dot day. Lemme just try that again.

[00:32:42] Nathan Wrigley: Yeah, that's okay.

[00:32:43] Joe Dolson: WP accessibility day dot D.

[00:32:46] Nathan Wrigley: No, it's W, I'm gonna do it for you.

[00:32:48] Joe Dolson: I can't do this. Speak to me.

[00:32:50] Nathan Wrigley: I'll do it. It's 2024. So clear what you've got in your browser url. Type in 2024.wpaccessibility.day.

[00:33:01] Joe Dolson: See, all I have to type is two because I've done it so many times.

[00:33:06] Nathan Wrigley: That's right. So thank you. Hopefully, hopefully you'll get into a conversation with some people who've watched this. If you've got any intuitions about it, please head to our website, wpbuilds.com. Search for Joe's name, top right. And hopefully. hopefully some of the bits and pieces that he's done with me will show up, and you can leave a comment there.

The other thing to say is these websites came off the WordPress Showcase. Again, I'll link to that. And a caveat that we didn't add in this episode, but we did in a previous one. The intention here is not to bang people over the head with a stick and make people feel miserable about their endeavors.

The intention here is to show real world examples of how it can be crazy making, and frustrating, and convoluted for people who use assistive technology. And I think you demonstrated that really well in that episode.

So we'll be back, dunno when, but it'll be in a few weeks time hopefully. And I'll join you again and we'll do episode three.

Joe, thank you so much.

[00:34:04] Joe Dolson: Yeah, I'm looking forward to it.

[00:34:06] Nathan Wrigley: Take care.

[00:34:06] Joe Dolson: Thank you.