Listen
In this episode, we talk about accessibility considerations in navigation menus, toolbars, and mega menus, and the things we’re thinking about as we get ready to redesign the navigation experience on our own website.
Mentioned in This Episode
- Ginger Lemon
- Nav Menu Accessibility
- Anatomy of an Accessible Nav: Steve Jones
- Accessible Mega Menu
- The User is Drunk
- MPV Properties: Mega Menu Example
Transcript
>> CHRIS HINDS: Welcome to episode 30 of 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.
In this episode, we talk about accessibility considerations and navigation menus, toolbars and mega menus, and the things we’re thinking about as we get ready to redesign the navigation experience on our own website.
For show notes and a full transcript, go to “AccessibilityCraft.com/030.”
Now on to the show.
>> AMBER HINDS: Hey everybody, it’s Amber, and today I am here with Chris.
>> CHRIS: Hey, everyone.
>> AMBER: And Steve.
>> STEVE: Hello, everyone.
>> AMBER: And we are going to be talking about navigation menu accessibility. But before we do that, of course, we have to have a beverage. Chris, what’s our beverage today?
>> CHRIS: So we are tasting OLIPOP Ginger Lemon. I think that their distribution is getting pretty far out there now in terms of where you can find this. But for the unfamiliar, it is a soda that claims to support digestive health through prebiotics, botanical, and plant fiber directly inside the drink. This is not the first bioactive soda we’ve tried on the podcast, but I am a fan of these kinds of drinks. In my opinion, at least, I have yet to have a bad flavor from this, but I have not had the Ginger Lemon before, and this whole can only contains 40 calories.
AMBER: All right, so wait a minute. You’re a fan of these kinds of drinks? You mean drinks that try to pretend they’re healthy when they’re really just a sugar bomb?
[laughter]
>> CHRIS: Well, no. It’s 40 calories; not 400.
>> AMBER: A normal pop would be 400 calories?
CHRIS: I’m exaggerating, but no. Like, a normal can of pop, what do you think, Steve? Is it, like, 100, 120, or 150?
>> AMBER: Wait, do you have one on your desk, Steve?
>> CHRIS: Well, Steve drinks zero.
>> STEVE: Well, no, I don’t. I drink diet.
>> AMBER: Oh, OK. Yes. [laughs]
>> STEVE: Yes, so there’s zero in there now. There may be other things in there causing problems. But, yes, I think it’s pretty high. Like a regular Coke or some Dr. Pepper, like that. I think it’s pretty high. There’s a lot of sugar in there.
>> AMBER: I read the can, and I was, like, they have their green washing down, man. They have a label that’s very clean. It’s a simple kind of illustration style, with a lemon and some sort of green plant, and they have all that prebiotics botanicals plant fiber on one side, and then on the other side, it says, “Plant powered, microbiome approved,” and they’ve drawn it like it’s a seal.
To me, I was a little bit like, “Hmm.” But, again, I think we tried another pop that said it was probiotics, although I couldn’t figure out what the label was. I can’t remember what pop that was, and I think the takeaway was, if you are going to drink pop, maybe it’s better to drink a healthier one.
>> CHRIS: Yes. I just got to say, I mean, I tried to get it because I’ve had it before, and it’s amazing, but their Concord Grape flavor is ridiculous. But we’re trying Ginger Lemon today.
>> AMBER: So is it going to taste like a ginger ale, you think?
>> CHRIS: I don’t know. I would certainly consider maybe making a Moscow Mule out of this. That’d probably be really good. Prebiotic Moscow Mule.
>> AMBER: [laughs] Well, we’re going to have [inaudible] today. [laughs]
>> CHRIS: Yes. Yes, we are. All right, I think we’ve probably talked enough about this. Let’s give it a try. Bottoms up here.
>> AMBER: Oh, I like that. It’s gingery.
>> CHRIS: It’s very gingery.
>> AMBER: Wait, I might not like the finish, though. Hold on, I got to try it again. [chuckles] I like the first flavor. Like, it has a spice kick on it. Oh, Steve, you’re making a face. [laughs] I wish everyone could see your face sometimes when you try the drinks.
>> STEVE: [laughs] This is nasty.
[laughter]
>> AMBER: Hold on, I’m going to take another sip. Chris, what do you think it tastes like?
CHRIS: I think I’m not getting a lot of the lemon, to be honest, or any, actually. I’m only tasting ginger, but it is like a very spicy ginger ale. Maybe it’s their formula, but I agree the finish is a little odd.
AMBER: OK. What was that nonalcoholic margarita that we drank that kind of tasted like furniture polish?
[laughter]
This reminds me of that.
[laughter]
>> STEVE: Yes, furniture polish.
>> AMBER: The finish on the end is…
>> STEVE: Chemically. It’s like a chemical. It feels like a chemical.
>> AMBER: It doesn’t feel chemical to me. It tastes kind of floral, but it’s not clean. Some pops have, like, a bite, and they leave… This almost leaves, like, I don’t know if it’s oily, but there’s a mouthfeel after you’re done drinking it, and I don’t know if it’s good. I don’t know if I would recommend this pop to people. [chuckles]
>> STEVE: My recommendation would be to chase it with a diet coke. Here we go. Chase it with a diet.
>> CHRIS: All right, that’s two votes against.
>> AMBER: Do You like it, Chris?
>> CHRIS: I don’t mind it, but I really like ginger. My personal taste is I like spicy ginger ales. But I agree that the finish on this is definitely not its strong suit. There’s something weird going on with the mouthfeel and the lingering flavor afterwards. I don’t know what happens, but it’s like you get a big hit of ginger, and then that fades away very quickly, and then you’re just kind of left with this strange botanically kind of earthy, weird flavor.
>> AMBER: In their ingredients, it’s labeled as OLISmart, andOLISmart is cassava root fiber, chicory root inulin, Jerusalem artichoke inulin, Nepal cactus, marshmallow root, calendula flours and kudzu root. Some of them have extracts. They have asterisks for extract, so I’m guessing that’s the weird flavor, and it’s, like, water, then that, are the two biggest ingredients, and then after that, they have ginger juice, lemon juice, apple juice concentrate. Like, more what you’d expect, and I’m kind of, like, if they remove the OLISmart from it, [laughs] all the ingredients after that sounds good.
>> CHRIS: Yes.
>> AMBER: I don’t know. Did the grape one have that kind of flavor?
>> CHRIS: Honestly, not that I can remember. They have a root beer flavor too, which I’ve had. I’ve had root beer and grape, and now I’ve had this. This is definitely my least favorite of the three. The root beer flavor, it’s kind of reminiscent of root beer, but it wasn’t amazing. But their grape flavor, if you’ve ever had Concord grapes or a traditional grape soda, it was pretty close. It was nice tart, Concord grape kind of flavor, and I feel like the grape flavor lingered, whereas this, it’s like ginger, and then it quickly goes away.
>> AMBER: Yes, it’s weird, because when I first took a sip, I was like, “Ooh, I think I like it,” because I got the ginger at the front. Remember we had the Bhakti Chai that was very gingery, and I like a spicy ginger. But then the finish… I might keep drinking it throughout the episode and sort of see how I feel, but I don’t think I would ever buy it again, ever. [laughs]
STEVE: Good thing I’ve got a whole case of it that Chris sent me.
[laughter]
>> AMBER: Wait, your kids haven’t been drinking it?
>> CHRIS: They probably tried one and were, like, “Nope.” [laughs]
>> STEVE: No. When we did the root beers and the Hello Kitty stuff, they went for that stuff. But, no, they’re not…
>> AMBER: So when I went to get these out of the fridge today, these were the only two left, so I think our children have drank. Granted, we got these a little while ago. It’s not like they came in the mail yesterday, so apparently they like it.
>> CHRIS: We also pretty much never keep any sort of commercial soda in the house.
>> AMBER: Not pretty much. We never do.
>> CHRIS: Yes, and so this was, like, exciting for them probably. They don’t know any better. That’s a horrible indictment. I’m sorry, OLIPOP, but it’s like they drank it because they don’t know any better.
>> STEVE: Yes.
>> CHRIS: But I stand behind their grape flavor. I think their grape flavor is amazing, and that’s the one I wanted to get, and I couldn’t get.
>> AMBER: So maybe when Steve and I are over the trauma of furniture-polished soda, we will be willing to try the grape one.
>> STEVE: Yes.
>> CHRIS: I will say, I did get to try the fruited sour that y’all got to taste with Matt on the last episode we recorded, and that was good. I enjoyed that one very much.
>> STEVE: Yes, that was real good.
>> AMBER: And it didn’t taste weird when you were done drinking it? [laughs]
>> STEVE: No, and it made the rest of a working Friday very interesting.
[laughter]
>> AMBER: It was fun, right? I don’t know how the code looked on Monday morning. [laughs]
>> STEVE: No. It’s, like, “Why can’t I focus?”
[laughter]
“Oh, 9% alcohol, that’s why I can’t focus.”
>> AMBER: Yes. Well, this is non-alcoholic, but maybe not any better for an enjoyable Friday.
>> CHRIS: No. Well, speaking of focus, and ability to focus, that’s an important part of navigation menus, which we’re going to be talking about today.
>> AMBER: Oh, what a great segue, Chris. Yes, in your navigation menus, everything should be able to receive focus. [laughs]
>> STEVE: Yes.
>> CHRIS: Even if you are a bit impaired on a Friday afternoon. [laughs]
>> AMBER: You know, actually, this is sort of a funny sidebar, and maybe we can find this through the show notes. Did you all ever see The User is Drunk?
>> STEVE: No. [laughs] But it sounds good.
>> CHRIS: I don’t know what you’re talking about.
>> AMBER: There was this guy who was, like, a UX designer, I think, or something, and he got paid a lot of money by companies like HubSpot and some others as, like, it was a marketing stunt for them. But he would drink and get drunk, and then he would go on their websites and try to sign up for their services and do things, and record and release videos. It was very hilarious. But it was also a little bit, like, you never know what state a user might be in when they’re on your website.
STEVE: That’s right.
>> AMBER: I mean, I don’t know how many drunk people are, like, “I’m going to go sign up for HubSpot right now.” [laughs] But maybe that’s what, you know, at the after party for the CMO convention. [laughs]
>> CHRIS: Let’s be honest, with that pricing, you might need to be a little tipsy.
[laughter]
>> AMBER: To not be afraid of what it’s going to do to your marketing bottom line.
>> STEVE: That’s right.
>> AMBER: All right, so let’s talk about navigation menus. When this episode is going to air, you will have given a talk at WordCamp US on accessible navigation menus, so I’m guessing you are prepping a little bit for that, Steve. What thoughts do you have about important features of accessible navigation menus?
>> STEVE: Well, I mean, I have lots of thoughts about it. Prepping for the talk. I should be prepping for it. [laughs]
>> AMBER: Well, to be fair, it’s a slight version of a talk you gave for WordPress Accessibility Meetup, right?
>> STEVE: Right, right. Yes, and just like with accessibility in general, I’m improving the talk. I’ve gotten some feedback from the first round and from some blind users as well on things that we could do better in conveying how to make accessible navigation menus, so I don’t know if you want me to get into the nitty-gritty gritty details of it, but I think at a high level, accessible navigation menus convey the overall structure of the website adequately to the user, and in an expected way. The structure of it is semantic. It uses a list, and typically, a regular navigation menu would be an unordered list, and the submenus of that nests properly inside of that navigation menu.
I understand that with CSS and JavaScript, we don’t really have to write the HTML semantically and we can still achieve what we’re trying to achieve, but I think starting with a solid foundation of semantic list for your navigation menu that is nested properly is a good start, and then all those elements in that navigation menu should be accessible via a keyboard by hitting your tab key or even further, you could utilize arrow keys as well in your navigation.
>> AMBER: Yes. I would like to call out for all of our listeners. If you have never gone on your website and used it without a mouse, the navigation menu, do that. Either pause the podcast and go do it, do it while you’re listening, or make a mental note to do it later today. Do it, and go and see if you can tab through and get to your drop downs, because this is a problem that we see on a lot of websites we remediate. The drop downs, there’s no way to open them. Sometimes you can tab into them, but they don’t surface visually, which I guess is a CSS problem. Right?
>> STEVE: Yes, yes, totally.
>> CHRIS: Yes. I’ve seen that.
>> AMBER: They just stay hidden.
STEVE: Yes. It just depends how you’re doing it. If you’re trying to make your navigation purely with CSS, it’s difficult to get those submenus to stay open when they’re tabbed to, so typically, it requires a little bit of JavaScript to achieve that.
AMBER: Yes, and then, bonus points too, if you listen to it on a screen reader and make sure that it’s really clear.
>> STEVE: Yes, and I think if you have something that’s semantic, like, the HTML looks good and it’s readable to a screen reader, and you tab through and you can see all your sub navigation menus. What you typically see is you’re tabbed to your first nav item, and then when you tab, it’ll open the drop down, and it’ll start tabbing through the drop down items, and then when it’s at the end of that drop down, it’ll jump to the next parent navigation menu and repeat the same process.
I think what we found is, going an extra step and making the nav menu in a way where the parent items, when you tap to them, will tab straight through the parent items, and then we add a button next to parent items that have a drop down, and then that button gives them the opportunity to toggle on the drop down, and what that allows a screen reader user to do, or a keyboard user to do, is to just quickly tap to the parent items, and only open the submenu if they want to get that information.
>> CHRIS: Yes.
>> AMBER: Yes.
>> CHRIS: And you can imagine that experience versus having to tab through everything to get to something that’s three or four items along across an upper navigation menu, it’s the difference between 25 or 30 interactions, depending on how populated your drop downs are in three to four interactions.
>> STEVE: Yes. Yes, totally.
>> AMBER: Yes, and actually, that’s something that I know, earlier this year, you enhanced on ours, so our website, which we’re in the process of planning to rebuild as a custom theme, but it’s older. It’s probably one of the last Genesis websites we ever built.
The Genesis NAV menu is technically accessible, but it didn’t have that feature that you just described, which is allowing people to bypass drop downs, and when you have a lot of items in your drop down menu, it can get really annoying to have to tab through all of those sub items when you really want to get to something that’s in top menu position three, and so I know you enhanced that on ours, and that was your talk at WordPress Accessibility Meetup, so if anybody wants to find that recording, we can link it in the show notes. But it’s come up quite a bit.
We’re remediating a website for a community college that’s under mandated remediation with the Office of Civil Rights as part of the Department of Education in the United States, and they’re looking for that. Even though it’s not a WCAG thing, they’re, like, “It has to have these separate buttons to open drop downs, and you should not force someone to have to tab through all of your drop downs.” So even though it’s like a quote above and beyond on WICAG, it’s really the best practice from a usability standpoint.
>> SPEAKER 1: This episode of Accessibility Craft is sponsored by Equalize Digital Accessibility Checker, the WordPress plugin that helps you find accessibility problems before you hit publish. A WordPress native tool, Accessibility Checker, provides reports directly on the post-edits screen. Reports are comprehensive enough for an accessibility professional or a developer, but easy enough for a content creator to understand. Accessibility Checker is an ideal tool to audit existing WordPress websites, find accessibility problems during new builds, or monitor accessibility, and remind content creators of accessibility best practices on an ongoing basis.
Scans run on your server, so there are no per page fees or external PPI connections. GDPR and privacy compliant, real time accessibility scanning. Scan unlimited posts and pages with Accessibility Checker free. Upgrade to a paid version of Accessibility Checker to scan custom post types and password-protected sites. View site wide, open issue reports, and more. Download Accessibility checker free today at “EqualizeDigital.com/accessibility-checker.” Use coupon code “Accessibility Craft” to save 10% on any paid plan.
>> CHRIS: Yes.
>> STEVE: Yes, totally. Just think about yourself as a sighted user; we have the ability to just visually glance at the navigation menu and find what we’re looking for. How frustrating would it be if I could only see the one link that I’m currently looking at, and then I have to look at all the other ones. You know what I mean? If the only one I focused on with my eyes was the only one I could see. If you think about it in that respect.
Say, you have ten sub navigation items, and then there’s even fly outs from those, right? So you’ve got all these ancestor links that I have to run through just to find the “about” page, so it definitely increases usability for keyboard users so much.
>> CHRIS: Well, and I think this is a trend that’s leaving the space, thankfully. But I remember in the mid to late 2010s going to websites of bigger, flashier marketing agencies, or design oriented marketing agencies that were trying to win Webby awards or whatever, and their navigations would not at all even remotely resemble a navigation menu. It would be like a bunch of objects floating in space around their logo. It was like a picture with barely visible words to denote looking at their portfolio or something else. I don’t know if you all are visualizing what I’m trying to put out there, but it’s like these really weird, wonky, non-navigation navigations.
So The other thing I wanted to bring up here is, your navigation menu for all users, not just keyboard or screen reader users, should behave in a way that is at least somewhat typical of a navigation menu. It shouldn’t be this weird, outlandish, never-before-seen thing that adds a bunch of cognitive load and confusion because people don’t intuitively understand how to use it.
>> STEVE: Yes, and I’ll go back to what I first touched on, too, which was the importance of structuring your site in a way that makes sense, because you could go into WordPress and just create a whole bunch of pages, and then you can create a menu nested in any format that you like, and it’ll still output semantically based on the way you structured the nav menu inside the WordPress admin. But conveying the structure of your website through your navigation, I think, is extremely important. Like, nesting your pages properly
>> AMBER: Yes, and consistently across the site, because I’ve been on some sites where the nav changes, and that could really throw people off.
>> STEVE: From page to page?
>> AMBER: Yes. This has come up on something that we’re auditing right now, where they have contextualized sub navigation for subsections of the site, where it’s a bar that shows up on some pages and not on others, and it’s, like, what is the expectation for that consistency that it doesn’t throw users off, and they understand as they’re moving between different pages and sections where they are.
I’m sure we’re going to start talking about mega menus at some point here, but this was a trend for a while. I don’t feel like I see it as much on bigger websites anymore, though I do still see it on small websites, like, putting pictures in nav menus or videos or maps or other non-links. Things that aren’t links. What do you guys think? Good? Bad?
>> STEVE: Bad.
>> AMBER: Yes. What do you think, Chris?
>> CHRIS: I think it’s unnecessary. You’re clearly trying to shove something in front of the user’s intent. That’s the way I kind of look at this, from a user perspective, because if someone is engaging with your navigation menu.., and I think this is most common in a mega menu, where you’re shoving things in there that don’t necessarily belong. If someone’s clearly trying to navigate your website and find something and you’re basically distracting or disrupting them by sticking a video in there or something that really should not be there. It’s not the intent of the element, right? I don’t know. There’s like a NAV tag, right? I’m not a coder. But you’re putting a video inside of a navigation tag. From a standpoint of semantic HTML, that doesn’t really make a lot of sense.
>> STEVE: Yes, yes, totally.
>> AMBER: Yes. I mean, to be fair, probably most of those WordPress mega menus don’t even use nav tags. [laughs] Like, the random plugins that are out there, I think it’s entirely possible that a lot of them aren’t even doing that, right?
>> STEVE: Yes.
>> AMBER: But, yes, that’s a weird thing. There’s plugins for WordPress that allow you to use any widget that exists on your website in the navigation menu. Or, like, contact forms inside a navigation I’ve seen before. Yes.
I think we did it once. I remember a long time ago we had for, like, OB-GYN, and they wanted a video, and it was, like, update their “about.” And it was, like, “There’s the about navigation, and here’s the video.”
>> STEVE: Yes. [laughs]
>> AMBER: We will not do that again, though. [laughs]
>> STEVE: Yes. I mean, we’ve touched a lot on keyboard, usability, and stuff, but there’s a considerable amount of visual considerations to think about when you’re making a navigation menu, because navigations are very visual. They have to convey a lot of visual information to the user as well. Of course. “What link am I hovering over?” “What link is active?” “What link am I focused on?” It can be tricky sometimes, based on the design you have, to come up with styles that convey all of those things.
Say you have a parent nav item that is active, so the hover state and the focus state of that nav item is probably different than the rest: the ones that are not active, so making that consideration, I think, is important.
>> CHRIS: I’m just kind of stating the obvious here, but there are also lots of different kinds of navigation menus that can come up on websites, and I don’t mean just standard menus versus mega menus, but also there’s toolbars, and footer menus, and breadcrumbs, and I’m wondering, and this is me just not having as deep of a knowledge of this stuff as an auditor would, where should a secondary toolbar menu fall in the tab order? If someone’s tabbing through a website, they just hit the page, there’s a toolbar, and there’s a primary nav, like, where or how do they get to that toolbar menu and interact with it?
>> AMBER: Well, I mean, in an ideal world, the tab order matches the visual order on the page. Now, I’ve seen on WordPress themes where it doesn’t… One of my admin bar post is about focus order and reading order. B, and it’s only technically a WCAG violation if the focus order doesn’t match the visual order, if it impacts the user’s ability to understand the page, so if, visually, you have the social-media icons first, and then you have the primary navigation, but in focus order, you go the primary navigation, and then the social media icons, like that, probably, from a usability perspective for a screen reader user, even a keyboard-only user, it’s not really going to impact their ability to navigate or understand the website. It’s just kind of annoying for somebody who can see. But I don’t know if it’s a clear problem always.
>> STEVE: Sometimes secondary menus are actually above the primary menu. Say you have a top menu which has, like, “my account, shopping cart, checkout,” and then you have…
>> CHRIS: Yes, and that’s exactly what I was thinking of.
>> STEVE: Yes, and then you have your main navigation menu that has all the typical links in it, would one expect the order of those menus, semantically, to actually be the primary menu first, and then the secondary menu that is actually visually on top?
>> AMBER: I think a sighted person expects it to go in the order that they see them, and it would be confusing. If they hit tab and it skipped that top menu and went to primary, they might think that stuff in that top menu wasn’t keyboard accessible, right? Yes, I think the expectation is that it follows the visual order on the page.
Now, one thing you can do, the Genesis does, which is pretty nice, is they actually add a skip link that jumps. They don’t just have a “skip to content,” they have “skip to content,” “skip to primary nav,” and “skip to footer,” both of which function with keyboards and screen readers and will jump people, so I think if you have a lot of stuff, like, I’ve seen websites where there’s three or four different grouped navs in the header. Having a skip link that allows someone to quickly get to the primary navigation menu might be very helpful in that case.
>> STEVE: Yes.
>> AMBER: And that’s the thing that’s interesting about skip links; they don’t have to only just skip your header completely, you can add “hidden.”
There was one time on a search results’ page, or, like, with filtering when the page loaded, because it reloaded on filter, you added, Steve, like, a jump link to go to results. Just on that page, because when it reloads, the screen reader user is going to get dumped at the top of the page,
>> STEVE: Yes. Yes, I think we’re modifying the page title as well, so it would read out the count –
>> AMBER: How many results, yes.
>> STEVE: – Of the query. Yes, so I think with the secondary navigation menu, too.., and correct me if I’m wrong, Amber. For keyboard users or blind users, having a secondary… Say you have a secondary navigation menu in a left sidebar, if you do that, I think consistency is really important, from page to page, that the secondary navigation menu is in a consistent place. If your secondary navigation menu is in the side bar and it’s basically the same links that are in your drop down, that’s actually a good practice, right? That’s helpful.
>> AMBER: Yes. There’s a WICAG guideline called Multiple Ways, which is you need to provide people multiple ways of navigating a website, and so that could be one way, so you have your primary navigation, and then when you’re in a subsection, you have a sidebar that lists all of those same pages there. Or maybe that’s why you see in footers that they’ll list out pretty much everything that’s in the primary navigation, only it’s no longer in the drop down. So, no, I think providing interior page navigation is really helpful now. It needs to be coded as a nav tag and it needs to be labeled, so that’s one thing with nav tags we see. Sometimes there’ll be navigation menus and they’re in a nav tag, which is good, but there’s no Aria label on it, and so there’s no way for a user to know which nav is which.
Is this the primary? Is this an interior page navigation? Is this a breadcrumbs navigation? No idea. They’re all just navigation.
>> STEVE: Right.
>> AMBER: Also, when you use those names, those names can be used with the screen reader to jump to them, so if they hear that your navigation is main, they could jump to main navigation from anywhere on the page.
>> STEVE: Right, and the typical use case for that, aside from secondary navigation menus, is your footer nav, right?
>> AMBER: Yes.
>> STEVE: Yes. I’m looking at our main navigation. I wonder if our footer navigations have…
>> AMBER: I mean, I don’t know, because the footer on our current site is built with widgets.
>> STEVE: Yes, they are widgets.
>> AMBER: But are they menu widgets? I don’t even have it open, so I don’t know.
>> STEVE: Yes, it’s a menu widget.
>> AMBER: It’s built with a menu, so I think that’s OK. Generally, if you’re using WordPress and you’re using a WordPress menu block to add in a list of pages or posts, it’s going to give it the appropriate tags. Where people get in trouble is they’re, like, “I’m just going to use a list block,” because they know it needs to be a list, and they add that, and then it’s not wrapped in a nav tag; it’s just a UL for an unordered list.
>> STEVE: Well, the menu widget is not wrapped in a nav tag, but, I mean, yes, it’s a UL, we’ve got adequate titles above it, so it’s almost more like it’s not considered a navigation menu. It’s more of just like linked content in a list, right?
>> AMBER: Yes, with headings above.
>> STEVE: Yes.
>> AMBER: So this is an interesting conversation, because I know we’ve tried to avoid mega menus, but as Chris and I are talking about, what is the best user experience on our website. As our website grows, like, we’re creating a lot of content now, that it’s not super easy to find all of it, necessarily. With our events that are coming up, or past events, we have a ton of documentation. We have our plugin, plus we have our services, so now I’m in the land where I’m starting to think that we should have mega menus instead of just single drop downs, because the drop downs get so long, and I think it would be nice to have, like, two or three columns of content under each item, and have a button that you can click it and it would open that sub item, and then you’d have multiple columns in that. What’s
the general consensus on that?
>> STEVE: We were going to debate that here, right?
[laughter]
>> AMBER: Yes, it’s is debate. Are you anti us putting a mega menu on our own website?
>> STEVE: Who are you asking? [laughs]
>> AMBER: Yes. Steve, go first.
>> STEVE: Yes. I have a knee-jerk reaction to it. I mean, that’s my initial, “Ugh, no.” I’ll selfishly admit that’s probably for two reasons. One, accessibility is a problem. Two…
>> AMBER: You don’t want to code it. [laughs]
>> STEVE: They’re just always a nightmare to code.
>> CHRIS: I really want to dig into that more: the no knee-jerk reaction, and the fact that it’s harder to build. I want to dig into that more and kind of understand, as a non-technical person, what makes it significantly more difficult.
AMBER: It needs more JavaScript, right?
>> STEVE: Well, for one, accessible nav menu, I’ve got figured out.
>> AMBER: It already exists.
>> STEVE: It already exists. It’s already kind of done. It’s been done on a lot of websites, so typically, like, mega menus, when you go into a project, it’s custom to that theme. You’re having to code custom stuff that you don’t normally have to on every project.
>> AMBER: OK. Let’s talk a little bit about the ways that we’ve experimented with this in the past, because I think it’s sort of interesting, and I don’t know if there’s one we would choose. There are three ways that I think we’ve built mega menus in the past that are mostly accessible. I don’t know if they’re all perfect, so we tried for a while using Max mega menu, because I tested a bunch, and that was the one that was the closest. It doesn’t have arrow support. I don’t think it indicates active page, so it needs a little bit of help to fix it. But as far as mega menu plugins, that’s the best. The actual UI for building it can be a little bit confusing. I don’t think clients always know how to go in and edit stuff, and then also, it has the downside of it supports adding anything.
>> STEVE: Widgets.
>> AMBER: Yes, clients then can go in and be like, “Oh, I’m going to add weird random stuff to my navigation menu,” which I don’t like, so we’ve tried that. We’ve also done the approach of, you just take the admin menu and whatever is in sub items becomes the mega menu, and if you have about three sub items with five things under it, then you end up with a menu with three columns. But that also is not super intuitive, and then we’re remediating website that’s built that way, and then they only wanted the top ones not to be links, so they just put hashtags in.
I think one of our devs, Balginder, coded something that added a checkbox to the menu item, so if you checked it off, it would actually turn it into a heading because that’s what it is. It’s a heading. It’s not a link. It shouldn’t be a hashtag link just because they want a fake heading, right?
>> STEVE: Yes.
>> AMBER: So there’s that approach, and then there’s another project we did recently where we used ACF to build a custom mega menu builder, where you built the submenus in the WordPress Admin, but then you laid them out in the columns in the custom ACF thing. [chuckles]
>> STEVE: Yes, yes. I’ll add a fourth into that, which is I think we may have abandoned, but we definitely started. I found a way to hook in an ACF field into the nav menus. Like, WordPress nav menus, I hooked a repeatable ACF field into that, so you could actually build the modules inside of your mega menu, like, the sections in your mega menu inside of the link. I think we may have abandoned it just out of complexity and time restraints, and I think we went with the Max mega menu on that one, but, yes, that was definitely an approach, and I think it would have been slick if we would have had time to flush it out, but.
>> AMBER: Yes, so I do think that’s the thing. Going in this, it’s, like, “OK, now we have to.” As much as possible, we try to convince clients not to pick menus. Sometimes it happens. I have design files right now which I don’t think you’ve seen yet, Steve, for our site, and it’s got a main menu.
>> CHRIS: Hide them as long as possible.
[laughter]
>> STEVE: Yes.
Reject them.
>> AMBER: But I think, from a usability standpoint, we’re going to need it on our website. I think our website is growing enough, and we want people to be able to access the information, clearly, and I think it is a better user experience in this case to have a mega menu.
>> STEVE: Well, we haven’t touched on why mega menus are bad. Why they’re a challenge to make accessible.
>> AMBER: OK, so why?
>> STEVE: [laughs] OK, so we’ve put it back on me.
>> AMBER: You’re the developer. I just say make it accessible and then it magically is accessible, so I don’t think it’s hard. [laughs]
>> CHRIS: That’s how that works, right?
>> AMBER: I know. Amber’s just like, “Do this thing,” and it just happens. It’s,
like, [inaudible]. [laughs]
>> STEVE: Yes, “We just tell the dev team to make it accessible, and it just happens.”
[laughter]
Oh, man. Yes. So, I mean, they’re challenging just because there’s so much going on. There could be so many things. Like on the front-end, it’s a challenge. You have to code a custom thing that stays open. Does it fit within the content of the site or is it full width? Does it push the site down? Does it overlay the site? There’s just a lot of considerations there.
Like Amber and I were just talking about, you have to find a way to store that data somewhere in WordPress. How are you going to do that? How are you going to do that in a way that’s easy for you to output it on the front-end? How are you going to do that in a way that is intuitive for a content creator to modify? Without having to jump through a lot of hoops and, like you said, make links headings, because that’s the only way you could think to do it. That probably is the biggest challenge in a mega menu: providing something intuitive to the client to update.
From a content standpoint, you have to ensure that you go through your parent items. You hit that top one, that you’re calling out to a screen reader, that there’s a drop down, or would it be considered a modal? Or has pop up? Something like that; that you’re conveying that link has a drop down. Once you get inside of that, what’s in there? Is there a header in there? Are there buttons in there? Are there other menus in there? Are there videos in there?
>> AMBER: Well, we will not put a video in our navigation menu, I promise you.
>> STEVE: Yes, and you got to consider, too, if you have a video in there, is there a transcript for the video? Where do you put that transcript? It’s probably going to have to be linked off somewhere else, because you’re not going to want to put a big old, long transcript inside of a mega menu for a video. You’ll probably add link to it, right? Or have the content somewhere else on the page, and have “described by” or something like that, so there’s just so many caveats. You got to make sure your tab order follows, that it reads out right to the screen scene reader. There’s just a lot of things to think of because you’re essentially building a page. It’s a web page inside of a pop-up.
>> AMBER: Yes.
>> CHRIS: Yes, and Will say, too, this is something that I think we could probably include in the show notes. But the real estate firm that we built their website, their mega menu, I feel like from a keyboard navigation perspective, is quite good. I tab through the upper level menus. If I want to activate one of the pop ups, I hit my spacebar. Or not really pop up, but activate one of the mega menu drop downs, and then my tab order, like, the focus shifts. My tab order goes through everything on that mega menu in a logical sequence, and then it takes me back up to the upper navigation menu again if I want. It’s a nice, clean experience, and was probably very hard to build.
>> CHRIS: Well, I mean, that uses the Max mega menu plugin.
>> AMBER: There’s things about this one that I don’t like. I mean, we can link to it in show notes, since you mentioned it, and let’s talk about it. We had separate buttons for the drop downs next to the top-level items, because she has the top-level items linking two pages, and they made us remove them.
>> STEVE: Well, not just that…
>> AMBER: Not talking bad about our client on a call, but, hopefully… Or on a podcast episode. Hopefully, she doesn’t listen to our podcast. But they made us remove them, and I was like, “No, we need this.” And they argued, and we finally were, like, “OK, but you have to acknowledge that this is not an accessibility best practice.” And they were like, “OK, fine.” And sometimes that happens with clients.
>> STEVE: Also, weren’t there links that didn’t have… So, like, link that didn’t [crosstalk ].
>> AMBER: It’s been a while since we built this, so I don’t remember. But there were a couple of things that came up on this navigation menu that, in testing, because as part of our testing, we always do screen reader and keyboard testing, got flagged. You fixed them, and then they made it go back. [laughs]
>> STEVE: Yes.
>> AMBER: The clients were, like, “Why’d you do that?” “No.” Yes.
>> STEVE: We could have a podcast episode on buy into accessibility, you know, just on dealing with…
>> CHRIS: Amber write that down.
>> AMBER: OK.
>> STEVE: Yes. Just dealing with clients’ buy-in on accessibility, and even our suggestions, like, when we audit, and then those things aren’t remediated. There’s a lot that goes into that, and I know we’ve talked about it before too in Chris’…
>> CHRIS: See, now you’re just making me want to talk about it. Can we just go another hour?
[laughter]
>> STEVE: Yes. Chris, he’s given some good information about when clients choose not to take the most accessible route, right? We’ve even got ways to have sign offs that, “We’re choosing not to be accessible.” The client wants what the client wants, right? Sometimes we have to do what they want.
I’m pulling up the website now, and kind of inspecting the nav
menu.
>> AMBER: Yes, so this is a weird thing, right? Because we had buttons, but they had us remove them. But because she has the top-level items actually going somewhere, it’s a link, not a button, but it still has Aria has pop up and Aria expanded on it, which is a little weird on a link. But because she wanted them to go somewhere instead of just being a button to open the menu. But actually that’s an issue. Yes, so I don’t know.
>> STEVE: Yes, I’m looking at the code. I actually coded in some JavaScript, too, since it’s Max mega menu. This is not a menu that we made, or like a custom nav walker that we made. I actually had to write some JavaScript to flip that element from a link to a button, and Can see that we actually added that and then removed it.
>> AMBER: Although it’s weird, though, because I can’t actually.., so with a keyboard, it functions like a button. It just opens the drop down. You can’t follow the link that’s there; but with a mouse, you can follow the link. It’s weird, right? [laughs]
>> STEVE: But I think the saving grace here is that you tab to the first parent item, and then you can hit your spacebar or your return key to get the mega menu to open, and then there’s a heading of the same thing. It says “current development,” and then they have a “view current developments” button. That’s kind of the saving grace of not being able to link.
>> AMBER: Well, let’s say it’s a link styled as a button. It’s not a button. [laughs]
STEVE: Correct. Correct. Sorry.
>> AMBER: Yes. So, because they did that, there’s, like, the same link that a mouse user can get on the top item that a keyboard user can’t get is also in the mega menu, so it’s not like they can’t get there, so megamenus and all of that functionality, there’s a lot, I think, that has to be thought about with it.
>> STEVE: Yes. I don’t want to go super deep on this, but mega menus, when you get to mobile, you have to make some decisions about what’s really going to stay on mobile.
>> CHRIS: That’s a very good point.
>> AMBER: Well, if it’s just links and headings though, your headings on mobile have to become buttons, probably, that then expand the sub items under them, right?
>> STEVE: I mean, I’m saying even the content, like, you need to consider what content should stay. Do you really need that heading? Do you need that video on mobile?
>> AMBER: Yes, I’m looking at her mega menu, trying to figure out what’s all is in here.
>> STEVE: I think most things stay, don’t they?
>> AMBER: Yes. They have some bigger headings and some subtext on the left side. It looks like an h2, maybe. Oh, no. No one go inspect this website. It’s an h4. [laughs]
>> STEVE: What’s an h4?
>> AMBER: Well, I just inspected under the “about us” in that mega menu, there’s a heading that’s an h4. [laughs]
>> CHRIS: I wonder if they went and changed that.
>> AMBER: But it would have changed the styles, wouldn’t it? I don’t know.
>> STEVE: Yes, so that’s output by the mega menu block, right?
>> AMBER: I don’t know. That’s weird.
>> CHRIS: Wouldn’t Wave have detected that? I don’t know. Maybe they wouldn’t have.
>> AMBER: Yes. I mean, we would have, too, in testing, but I don’t know. We built this website a while ago. Who knows? We’ve talked about at the beginning, like, even Steve said, with his talk, previously gave an accessible navigation menu talk. He’s going to give it again at WordCamp US, or he will have given it again at WordCamp US when people are listening to this. But he’s making updates to it since giving the first… Accessibility is a journey. We do accessibility. That’s all we do. But we still find problems on websites that we built and launched.
>> CHRIS: Because we’re better today than we were a year and a half or two years ago when we built this. Yes.
>> AMBER: And that’s the way it should be for everyone. I don’t think you can demand perfection of yourself. You just have to demand willingness to learn and grow.
>> STEVE: Yes, and I think that underscores the importance of ongoing accessibility audits, whether it’s through a plugin like Accessibility Checker, or it’s hiring an agency to do ongoing audits either periodically or monthly, because if you have a website that’s living and breathing, content is being created by humans, which humans fail at following things, the task is to write an article, right? And sometimes you accidentally skip a heading level, so that’s why it’s always important to have some kind of accessibility plan within your company to have some kind of, at the very least, automated audit of your website.
>> CHRIS: Well, I was just going to say, if you can designate an internal advocate, like, if there’s someone on your team who cares about accessibility for whatever reason, even if they aren’t the WAS certified and whatever else with 20 years of experience, have an in house advocate, and just by having an advocate, even if they don’t know everything, if you listen to them, they will hopefully make your stuff more accessible. And, yes, have the testing tools, have a person in house who is kind of championing these things, if you’re a small team, and find a partner.
>> AMBER: Well, we sort of left navigation menu, so that tells me we should probably wrap on our podcast episode. We’ll definitely have to throw some of these links in the show notes. There’s another one that I’ll put up there for people who are interested in mega menus. Adobe has, on their GitHub, an example of an accessible mega menu, which is kind of cool if you’re thinking about building your own. I mean, I think where I landed, TBD, I guess, because who knows if we get this new website built, if it’ll have a mega menu or not. I’m voting for it. But I do think that if it were to be one, it will all be a custom tool. I don’t think we would use something that exists, in a WordPress plugin.
So maybe we could have a follow-up episode if we do that and talk about how we actually ended up coding our mega menu, and that’s my hint subliminal messaging to Steve that we’re going to have one. [laughs]
>> STEVE: Well, maybe we think about the community as a whole when we make that, and see if we can produce some kind of code or plugin or some kind of documentation alongside that.
>> AMBER: Yes, for sure.
Well, thanks, guys. It was fun talking nav menus and accessibility with you. I’m not so sure about OLIPOP Ginger Lemon. It’s still pretty full.
[laughter]
I have not drank at all.
>> CHRIS: I don’t know if OLIPOP Ginger Lemon will be on the menu again.
>> AMBER: Yes. Thanks for listening, everybody.
>> STEVE: All right.
>> CHRIS: Bye.
>> STEVE: See you guys.
>> 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, Google Podcasts, Spotify, and more, and 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.”