Welcome back my friends. In this lesson we are talking about accessible basic website navigation. There is a lot to talk about. Some of it is quite technical.
We are not gonna cover every imaginable navigation scenario and best practice, but what we are gonna cover in this training is how you can add a simple, accessible navigation to your website in your header template. We talked about templates in the last episode. How you can add simple, accessible navigation in your header template. The important boxes that that navigation needs to check in terms of accessibility and proper semantic structure.
Because again, not all of you are using Brics. A lot of you are. I’ve gotten so many messages of people who have switched over to Bricks and who are loving their life using Bricks, but not everybody has switched over. And so what I want to empower you to do, even if you are not a Bricks user, we’re gonna do this in Bricks, even if you are not a Bricks user, you need to watch this lesson because we’re gonna talk about proper semantic structure, proper accessibility, how to look at the structure and make sure that it’s got all the things it needs to have, how to test the accessibility of a navigation to make sure that it’s all above board, crossing Ts, dotting Is.
And if you’re not using Bricks, you need to be doing this because chances are your page builder is not empowering you to create a simple accessible navigation menu. It’s likely empowering you to create a little bit of a disaster of a navigation. You want to make sure that that’s not happening. I’m not saying that that’s 100%, but I’ve seen a lot of really awful navigations coming out of Elementor and Divi and all of these other, Beaver Builder, all of these other tools that people are using.
Now they may be using various menu plugins, I don’t know, and that’s another thing. You know, if you do go off and you want to use a menu plugin, I need you to know what to look for so that you can rule out, hey, this menu plugin is not going to work for us because it’s not accessible or it doesn’t use proper semantic structure or whatever the case may be. This is the lesson that’s going to empower you on what to look for when it comes to basic, accessible navigation on a website. So with that said, let’s go ahead and dive in.
All right, let’s go ahead and get started. So I’m gonna go up to Bricks and I’m gonna go to Templates. I’m gonna go to my header template, Edit with Bricks, and you’re gonna see that my header does not have any sort of navigation in it. So the first thing we’re gonna take a look at is what are my options for navigation in Bricks?
And of course, every page builder is different. If you’re not using Bricks, you still need to watch this training because we’re gonna talk about some things that are applicable to every builder. You need to check to make sure that the page builder you’re using is constructing a proper accessible navigation. And if it isn’t, then you’re gonna need to find a way to make it fixable.
If it’s not fixable, then I would highly recommend you switch page builders. This is absolutely critical. The navigation of your website is the central piece of user experience. And if it’s not accessible, that’s a huge violation and it’s just it’s not a situation you want to be in and it’s not a situation you will be in if you’re using a professional page builder.
Brics gives you two options. One is called nav nestable. This is for creating a completely custom navigation menu, perhaps even going to the levels of creating mega menus. And then there’s this nav menu element that is just for basic, simple, accessible navigation.
And we’ve done a lot of work, you know, we lobbied Bricks for a while to make sure that accessibility was a huge focus of the navigation. They’ve done a lot of updates over the past few months, making the navigation more and more and more accessible. And so, again, if you don’t have advocates or users who are strong advocates of accessibility in the page builder community that you happen to be in, then it’s very possible that your page builder is not able to create accessible navigations, which is, again, why we’re creating this episode and why we all need to be watching this. So what I will say about these two options is start with this one, the basic nav menu, come to an understanding of how to create a good best practices, simple navigation, a simple navigation is simple links, maybe some dropdowns, but nothing crazy, no mega menus, none of that stuff.
And then get the mobile navigation experience correct as well. And that’s really the hardest part of all of this, creating an accessible, basic, you know, just links in a row, horizontal navigation. That’s very, very easy. Creating the dropdowns adds complexity.
Thankfully, we have good page builders like Bricks that do a lot of the heavy lifting for us. And then the mobile experience where we transition to like a hamburger icon that fires a perhaps an off canvas element or that adds a lot of complexity. And again, if the page builders do their job correctly, they do all of the heavy lifting. We just need to make sure that our page builders are doing the job correctly.
And we need to know the basic principles of good, clean navigation. And then once you have all of these fundamentals down, then you can migrate into the land of mega menus. Don’t start in the land of mega menus when you don’t even know how to create simple, basic, accessible navigations, okay? So we’re just going to add the nav menu element and then you’re gonna see it says no menu items And it says menu WordPress and I click the drop-down and there is a menu right here, which I think I deleted So let me go ahead and because I wanted to start fresh for this training so I’m gonna click on this and it still says that there’s a menu which I don’t think there is because It’s still not pulling anything in and that’s what I wanted to talk about, right?
WordPress has a menu system that is different from the page builder that you’re using. Now the page builder you’re using, like in this case Bricks, can actually access the menu system in WordPress, fetch one of the menus you’ve created, and display it wherever you are using the nav element. And that’s exactly what this does right here. So I’m gonna go show you how.
We’re gonna go back into the admin. There’s actually two areas where you can create a menu inside of WordPress. The first area is the appearance area and then you click on menus. And you can see right here, menu name, menu, and we can start adding things to the page.
Okay, so you can go to view all pages, you can add your home page, and then you can find like your about page. I will add, these are all just random things. I’ll just add units, I’ll add practice, and I’ll add links, okay? And then what we also wanna do is we do wanna have one, at least one dropdown so that we can talk about that.
But in order to create that dropdown, I’m gonna go to a different area. I don’t have to, I just want to, to show you this other area. And I actually happen to think, I’m gonna go to the front end of the website, I actually happen to think that this area is the best place to create a manager menu. So you go to the customizer, you open menus here, I’m going to open the same menu that we were just editing, there are the links that I added, but now I can add items from here.
And I’ll show you what the one big benefit here is. Number, well, there’s actually two big benefits, I would say. Number is when I add new items, I can actually see my menu being populated. Okay, so if I go add another item, let’s do messagely.
Okay, so it adds that and I can hit publish. You’re gonna see messagely pop up right there. Maybe if I refresh, of course, you know, there it is. Briggs normally adds it when you’re doing this process, but of course I’m, you know, recording the screen, so it’s not going to do it.
But now I can see it, right? Much better than in that back-end dashboard where I couldn’t really see what was going on. And additionally, the second really big benefit is if I want to add new pages from here that don’t already exist, it’s actually going to create the pages for me in WordPress. It’s not just going to add a link in the nav, it’s actually going to create the page.
So I’m basically killing two birds with one stone. And you can do the same thing with posts, you can do the same thing with custom post types. I highly recommend managing your menus from this area right here. Okay, so let’s go into pages and let’s just do one dropdown.
And the way that we do a dropdown, I’m gonna do grade 101, I’m gonna take that item and I’m gonna nest it under another item. And that is going to tell WordPress, but also Bricks in this case, that this is actually a submenu item of practice. Okay, so I’m gonna add another one. We’re gonna add units.
Now you can ignore the fact that I already added units here. I’m just literally randomly adding things to a page. And I’m gonna add practice as a third sub link under practice which makes absolutely no sense. But you know, that’s exactly what we’re doing.
So I’m gonna go ahead and hit publish here. And then I’m gonna jump out of the customizer, and we are gonna see that I do in fact have a dropdown. Now I wanna go into Brics and just do some basic styling on this real quick, and then we’re gonna jump back to the front end, and we’re gonna take a look at the actual navigation structure so that you know exactly what you should be looking for. And we’re gonna talk about the accessibility side of navigation and then we’re going to take a look at how this interaction and you know stuff happens on mobile as well because mobile and desktop completely different beasts when it comes to navigation.
Okay so I’m going to refresh the builder and now you can see Bricsys is actually able to pull that menu in properly inside of the builder. I’m gonna go to top level here. What Bricks does is it adds left margin to all of the links by default. I put that to zero, I just cancel that out.
And then I use the gap. The gap is a much cleaner way to space out your navigation links. So I’m gonna use my content gap variable, and that’s gonna give me that nice, consistent spacing up in, and that’s responsive spacing as well, up in the navigation menu. Okay, the next thing I want to do is I want to set the color of my links.
So I’m going to change the color from this default link color over to white. And then in Bricks, I’m going to hit this little state pseudo classes thing right here. And I’m going to choose the hover state. And I’m going to go back to typography.
And now what I’m doing is setting what I want the hover color to be. And then I can come back out and now you see that it actually gives me that action hover shade on hover. Okay and it’s it’s actually already for this icon it’s picked up you know the the color of the links as well so Bricsys is doing a lot of heavy lifting here for me. I can go down for the icon sub menu I can choose what my what I want my icon to be.
I can open the typography I believe I can make it a little bit smaller than it currently is a little bit. It’s a little bit big there I like that smaller arrow and then you can say do you want it on the right? Do you want it on the left? I’m not gonna go into too much detail here because not everybody is using bricks and this isn’t the really important part The next thing I’m gonna take a look at is that sub menu styling Okay So we’re gonna go to sub menu and I’m gonna change the background color of this sub menu over to white.
There you go. That’s perfect. And then we’re going to go to the typography. So item typography color.
And you know, I will fault bricks here. You know, this is not the most intuitive because there’s so many menus and sub menus and so many different settings, panels and groups. And it’s really, really, really, you gotta kind of study it a little bit to get comfortable with it. But you can see, you know, relatively quickly, I have a completely different sub menu style than I had a second ago.
I am going to make these links smaller. Okay, the next thing that we’re going to do is we need a little bit of a hover style going on there. So I’m going to go back into our hover styles and then this is the item let’s go to background color. Let’s just see what it looks like.
Okay, that’s that’s it should be what happens on hover. Let’s go colors and let’s do our action hover shade. And I believe that it’s showing all of them as being hovered right now, but I think it’s only gonna do one at a time. Yes, there you go.
So we’re getting a nice little background hover on those. And I think that’s all we really need to do here. Because again, styling is not the important part of this tutorial. Now, before we go off into the DOM and look at the code and structure and accessibility and all that, I do want to take a look at what Bricks is doing in terms of the mobile menu.
So I’m going to come down to this and you can see that it took the navigation links away and it’s presented me with a hamburger icon that we can’t actually see because it’s the wrong color. So I’m going to get out of our hover shade or our hover state and I am going to go down into mobile menu and I’m going to find the hamburger toggle icon and I’m going to change the color of this to white. And now you can see that it’s actually white and you can also see the mobile menu right here that comes out in like an off canvas panel. Okay and I can set the width right here of the toggle.
I think the toggle is the, it’s the right size, it’s fine. So what I really wanna do is under mobile menu, first of all, you can tell it what break point to show your mobile menu at, to switch from that desktop menu over to the hamburger style menu. And it’s fine at mobile landscape, that’s perfectly fine. The width of this panel is controllable.
Like I believe if I do 100%, it’s gonna take up the entire thing. I kind of like it to be, let’s do 70% that should be perfectly fine. Or we can set it to 300 pixels which seems to work as well. It’s not, you know, it’s completely up to you.
I’m just showing you some of the options that you have available to you. The background is fine the way that it is. Let’s go ahead and look at the links though because they’re obviously the wrong color. We’re gonna need to make those white.
Okay, that’s pretty simple. That’s the top level styling. And so what we wanna do here is come down to the sub menu styling. And instead of those being white, why don’t we do white and then we can do a transparency, right?
We can do like 70% transparent, and that’s gonna make them kind of a light gray. Now I can go up to my hover state and then for my submenu, let’s start with the top level again. So what do we want to happen on hover? Let’s just make them the action hover color.
That works. And then on the submenu typography, let’s do the same thing there. So they can also be action hover. So that’s what’s going to happen on hover.
Let’s go ahead and hit save. And I think we’re pretty much good to go. So I’m gonna refresh the front end. I’m gonna check my hovers, I’m gonna check my dropdown.
All of that looks really, really, really good. And then I’m gonna go into mobile mode and we’re gonna see that the navigation, one thing that you wanna check for is to make sure that your navigation never runs into your logo. See, mine breaks to a hamburger well before those links ever come into contact with the logo. So that’s something that you always want to check for.
You don’t want to collision there. And I see collisions all the time. You don’t want to collision there. So you need to break to the mobile menu sooner.
If you have more items in your main navigation, you’re going to need to break to mobile sooner. Otherwise there’s going to be a collision. You do not want this navigation wrapping to two different lines or any crazy stuff like that. So just that is a main thing that you need to monitor.
Okay next thing I’m going to do is I’m going to dock this on the side over here so that we can see it easier and we’re going to check out just check out the um oh at first before we look at code sorry before we look at code let’s go ahead and check out the mobile experience. Okay so here we are we’re going to click this we get this little nice side navigation and all right that link works drop-down works everything’s working okay let’s go ahead and go back let’s go to desktop and let’s refresh the page and now let’s inspect the actual navigation so I’m going to right-click this and I’m going to inspect and we’re going to talk about some very important things the first thing that you’re going to see is that a navigation is not a div, it’s not a section, it’s not anything else but a nav. So it needs an actual semantic nav tag. That’s number one.
Number two, you’re going to see that inside of the navigation there is an unordered list, a UL, and that’s very important because assistive technologies, also called screen readers, but there are more assistive technologies than screen readers as well. We’re talking accessibility now. So for unsighted users, people who can’t actually see the page that they’re interacting with, they rely on the assistive technology to explain to them where they are on the page and what is happening. And this is why accessibility is so important.
If you don’t care about accessibility, people with assistive technology cannot use your website. And we’re not gonna go into why this is such a bad thing and on and on and on. We’re just going to talk about, we’re just gonna pretend that you agree that it’s important. And we’re gonna move on talking about what you need to see inside of your navigation.
So we need to see a nav tag. We need to see an unordered list. Why do we need to see an unordered list? Well, in assistive technology land, when the assistive technology encounters a unordered list, it’s going to announce that this is a list and it’s also able to count the number of items.
So when you have your UL inside of a nav, it’s going to announce to them that this is a navigation. It’s going to announce to them that there are, let’s say in this case, one, two, three, four, five, there are five links in the navigation. This gives the person context as to exactly what is going on. Now we open the UL and we see LIs, we see list items, okay?
This is also very important. You can’t have divs or anything else or paragraphs or just raw links inside of an unordered list. So the structure we need to see is nav, then a ul inside the nav, and then lis inside the ul. And then inside the lis, that is finally where we can see the link.
And then you’ll see this ARIA current, which shows a page. So it’s basically marking, because we’re on the homepage, it’s telling the assistive technology, hey, you are currently on the homepage. That’s very important, right? So you can go and see when you’re creating a navigation, does your page builder add the ARIA current tag?
And there’s some other ARIA labels that may show up here and there. Yours may use ARIA role equals navigation. If you’re creating more than one navigation, for example, if you have a footer navigation, you can say ARIA label equals footer. And because it’s attached to a nav, it’s going to announce that as the footer navigation if you have a table of contents Navigation you can say aria label equals table of contents Therefore it’s going to announce that as the table of contents navigation see how this gives Additional context to screen readers it also gives additional context to Google at all like any any You know bot or whatever that is crawling your website, this stuff is very important for SEO as well and will continue to be, or I would say get more and more important for SEO going forwards.
But guess what? Human beings from Google do not crawl webpages to index them. They use what are called spiders. It’s just software that runs and scans.
And the software needs these cues, these landmarks to figure out how a page is structured and configured and how well coded is it and what relates to what else. And it gains additional context when you build things the right way. We kind of talked about that in the beginning of this series. Okay, so we need to see a nav, we need to see an unordered list, we need to see list items, and then we need to see A’s, actual links inside of the LIs.
That is a basic accessible navigation. And what that amounts to is when I land on the page, if I start using my keyboard, you can use tab and shift tab on your keyboard, and you should always be testing this out on your websites. Can you navigate the navigation purely with the keyboard? And it’s not just a yes or no.
It’s a how well can you? Is it perfect or is it imperfect? Okay And so what we’re gonna take a look at is a couple details that you want to keep an eye out for and this is why I added a drop-down. So as you see I can navigate to the home link I can hit tab and navigates to the units link.
I can hit tab and it navigates to the practice link But if I hit tab again, it’s going to navigate to that arrow right there. And if I hit enter on my keyboard, it’s going to allow me to go into that sub menu. Okay. Notice also that there is a red box around what I am tabbing to.
So you guys can track that. That’s actually added and styled by automatic CSS. Your page builder may not add that for you, which is a bad thing, because if I can’t visually see what I’m actually navigating to with my keyboard, I can’t really use my keyboard at all. So this is called a focus style.
I am focusing on these links, and you can either add this with custom CSS. Hopefully your page builder adds it for you, but if they don’t, then if you’re an automatic CSS user, we do add it for you, so that’s all good. But that’s exactly what that is, that’s what’s going on there if you are curious. But notice, it’s very important that I can actually go past the drop-down if I want to, okay?
And so, not every page builder is going to create navigation like this. Most of the time, actually, when I’m on site, I will notice that I am forced to go into the drop-down, if I can keyboard navigate it at all. Sometimes I can’t even keyboard navigate at all. But if I can, I’m forced to go into dropdowns.
Now imagine if there were five different dropdowns and every dropdown had seven different links in it. You’re forcing people who are using a keyboard to go through every link in those sub-navigations to get to the next link in the main navigation. And that is a horrible user experience. So Bricks has done a lot of work to improve this.
This was something that Bricks did early on. They forced users into the sub-menus, and we lobbied very hard to say, hey, don’t do that, we need the ability to skip the dropdown if the user wants to, and now you can see that we can easily skip. Or if we want to, we can go into the dropdown and we can go through. Now, what happens next?
Well, the dropdown should automatically close and take me to the next top level link. And you can see that that’s what happens here. That doesn’t happen in all websites. Okay, and then when I’m done, it’s going to start tab navigating into the actual page content.
Now, I’m gonna turn on Apple here. And I don’t know if you guys will be able to hear hopefully you can if you can’t hear that I’ll cut it out, but I’ve done this in many many many videos past showing how you can actually listen to Apple’s voiceover, and it will announce this kind of like a screen reader does so here we go Voice over a drone bricks clean Google Chrome current page visit link image current page visit link home list five items. Notice that it said. To click this link, press control, option, space.
Notice that it said there were five items. Link, units, visited link, practice. Practice submenu, collapse button, group. So it announced this.
To click this button, press control, option, space. It announced this as a dropdown button letting the user know, hey, this is a drop down button. Okay. We’re going to do that one more time.
Practice practice sub menu, collapse button group. You are currently on a button group to click this button, press control option space. Notice it also announced it as the practice sub menu button. So that lets the person know this is the sub menu for that practice link or that practice section of the navigation.
Link links, visit link, message, link, visited, link, image, this is my new top voice control. Okay, so now we’re done. So this is the stuff that you want to check for when you are building your menus. Can you keyboard navigate it?
Can you skip over the submenus if you want to? Can you trigger the submenu separately from the top level link? Can you go through the submenu properly and fully and then does it jump from the last item of the submenu to the next top level menu item. These are functionalities that you should be looking for with your navigation.
Now we have to check out the mobile version. So I’m going to bring this down and we are going to inspect the mobile version. We’re going to see that we have a button now. The button is that little hamburger icon.
So you can’t just slap an SVG icon onto the page and then try to trigger it somehow. It needs to be a button element. And then it’s going to have some ARIA labels attached to it. So we have ARIA has pop-up equals true.
So that’s letting the assistive technology know, hey, when you click this button, there’s going to be a pop-up, which in this case is like an off canvas element. And then the ARIA label is the mobile menu. So it’s going to announce this as the button for the mobile menu. And then it’s going to have this ARIA expanded label which says false.
And that’s letting it know that the current state of the button is false. The current state of the button is not expanded, which means you cannot see the options right now. When the user clicks, I want you to watch this ARIA expanded statement right here. When the user clicks to activate the menu, the ARIA expanded changes to true.
So this is a JavaScript interaction that is changing this attribute right here, changing the value of that attribute on the fly. When I close it, it’s going to change it back to false. So again, like I said, the page builder is doing a lot of heavy lifting here in this JavaScript interaction. First of all, creating the button for you, making sure that the interaction with the button actually triggers the off-canvas menu, and then in doing so, adjust these ARIA attributes to have the proper values.
And the fact that it’s putting these ARIA attributes here in the first place is really, really important. Okay, and then the same things are gonna be true over here as were true on desktop. And we see this all comes together. We have the proper nav, the proper UL, the proper LI, the A’s inside the LI.
We can navigate through, we can select the drop-down separately from the top level links. Everything is announced properly. When things collapse down on mobile devices to a hamburger, that hamburger is a button. It has ARIA expanded true, it has ARIA has pop-up equals true, it has ARIA label as mobile menu, all of these boxes that we need to check are being checked by the page builder if you are using a competent professional page builder.
I will tell you right now most page builders are a little bit of a disaster in this area and so if you’re not using Bricks you definitely want to make sure, double check. Now you know what to look for. You can actually inspect the code, you can find the elements, you can make sure the necessary code is here. And then I also showed you how to do the actual keyboard navigation to test your menu and make sure that it’s functioning properly.
That’s gonna be the end of this training. We don’t need to go into mega menus and all of that. That’s not 101 level area. The only last thing I will say about your menus is they need to be clear, they need to be logical, they need to be easy to you know read and to navigate.
Okay you don’t want to put 7,000 items in your menu. You don’t want to nest things under other things in illogical ways and you don’t want to over complicate the names of your pages or anything like that. It’s kind of common sense, it’s kind of common sense but I will do other trainings on this channel about horror. I already have in the past if you watch my WDD live series we look at navigation menus all the time.
So it’s not that this content doesn’t exist on the channel it’s just we can’t cover every aspect of navigation in one single video. What I wanted to empower you to do is to go in and create a simple, accessible navigation that collapses properly on mobile and checks all of the boxes that we just talked about. And again, if you don’t use a page builder that allows you to do that, you should probably look at changing page builders. If you have any questions, drop comments below.
I’m happy to jump in and answer them for you. I’ll be back very soon with another lesson in PB 101. I’ll be back very soon with another lesson in PB 101. Peace.
