How to Create an Accessible Menu in Oxygen (OxyExtras Version)

0:00:00
In today’s tutorial, we’re going to take a look at best practices for developing an accessible menu inside of oxygen. Now, when we did our primary templates tutorial, you’ll remember, back, if you have watched that, that we put a lot of focus on accessibility and we actually structured those templates a very specific way to ensure accessibility across the entire website. So it makes sense that when we develop our menu, we want to carry on that focus on accessibility. If we weren’t creating an accessible menu, this would be very easy to do. We could use any of the menu elements inside of oxygen. We could design something manually, very simply. Unfortunately, the accessibility side of things does complicate matters, but it’s still important to make sure that we implement accessibility standards in our websites. So with that said, we cannot use the pro-menu module. We can’t use the regular menu module. We can’t use the new mega menu module. None of those are accessible inside of oxygen. And if we went to develop a menu manually by ourselves using vanilla oxygen, we would not be able to accomplish that without JavaScript. And it’s a little bit complicated on the JavaScript side of things. And because a lot of people tend to run away, when JavaScript is involved, I didn’t want to make this first tutorial for creating a fairly simple menu require JavaScript. So what we’re going to do is I’m going to record a few different tutorials on creating an accessible menu inside of oxygen. This one in particular is going to focus on using the oxy-extras mega menu element. Now, oxy-extras is a paid third-party plugin. However, I will say this, it is one of the most important add-ons for oxygen. It gives you a lot of different elements beyond just the mega menu. And when I say mega menu, it’s called a mega menu element, but you can create simple menus with it. You don’t have to create a mega menu. We’re not going to be creating a mega menu in this tutorial. I will do a separate tutorial on creating an accessible mega menu because that requires a lot of additional things. All right. So I’m just trying to lay out all of the context for you here before we get started. So there will be additional tutorials. Additional methods will be discussed.

0:02:14
But this method in particular uses oxy-extras. And I would highly recommend that you buy oxy-extras, and by the way, they don’t have an affiliate program. I’m not an affiliate. I don’t get commissions for telling you to do this. We install oxy-extras on every single website because there are tons of very powerful elements that come along with that package. And a lot of those elements replace some of the default elements in oxygen that are not accessible with accessible versions. For example, accordions and things like that. The modal element, oxy-extras, it’s a light box that’s accessible while the normal modal inside of oxygen is not accessible. So very, very important to have. That’s why we’re using it. And let’s go ahead and get started. So I’m going to go ahead and screen share. Now I will say as we go through this, even though oxy-extras is doing a lot of heavy lifting for us, it’s still somewhat of a complicated tutorial. You may need to slow it down at times. You may need to re-review certain parts at times. There is two lines of JavaScript involved, but they are copy-paste. So just do your best to pay attention, follow along, absorb the information, and then feel free to go back and re-watch whatever areas you need to re-watch as you build your own menu. The first thing I’m going to do is open our primary template. And then I also have our website open on the front end. I want to show you some of the accessibility-related stuff and why we’re going through all of this trouble to do what we’re doing in this tutorial, to accomplish an accessible menu. So once we are open in our primary template, we’re going to add, well, first click on the header and then add the mega menu element inside of Oxygen. Now don’t get confused. There are two of them. One has the Oxygen logo on it. That’s the Oxygen Mega Menu. It is not accessible. Don’t use that. Use the other Mega Menu element. And I guess I should pause here.

0:04:13
We’ll just go to the admin real quick. I do want to make a quick note. If we go to Oxygen and Oxy extras, you’re going to see all of the things that are available to you when you install Oxy extras. And I believe all of these are turned off by default. So nothing will show up in your builder by default. You have to go into the Oxy extra settings and turn on the elements that you want to use. So we need to turn on three different things in order to create an accessible menu. The first one is this burger trigger. That’s going to be the trigger for our mobile menu. The next thing that you’re going to want to turn on is, let’s see if we can find it, the slide menu. We’re going to need to use that as well. And then the Mega Menu drop down. Obviously we need to enable that. So if you’ve enabled those three things and then you hit save changes at the bottom, then you’re good to go. Inside of your primary template, you’ll be able to access these three things. Now I’m going to open my structure panel and our primary row of our header. And you’re going to see that by default Oxygen adds that Mega Menu into the left row. I actually want this to be in the right row. So I’m going to drag it over to row right. All right, perfect. And we’re also a good start. We just got a first try drag and drop in Oxygen builder. That is a good omen. All right, so first thing I want you to notice, the Mega Menu in Oxy extras is just a container. It actually doesn’t have anything in it. You have to put things inside of it. And the way that you put things inside of it is by using this when you have the Mega Menu wrapper selected, there’s a button over here in the in the main panel that says add new drop down. So if you click that, it’s going to put a link in here.

0:05:57
There’s a lot of nomenclature and wording inside of the Oxy extras Mega Menu system that I don’t agree with that I think can dramatically be improved. So I’m going to explain some of this to you as we go along. First of all, we’re not even building a Mega Menu, but we’re using the Mega Menu elements. Okay, second is we just added a drop down, but it doesn’t have to be a drop down, right? It should say like add top level link or something like that, because when you add that new drop down, which I now have selected, you can actually come over here and from drop down contents, choose link no drop down. And that’s going to take its drop down ability away. I’m going to hit apply parameters. And it’s no, it’s just a normal link now, right? So you would think when you hit add drop down, that you’re adding a drop down, and you’re like, well, I don’t want to do that. I want to add a normal link. So how do I do that? Well, it’s you do it through this. You add a new drop down, but then you switch it from a drop down to something else and you get this main link right here. So over here under link text, I can make this say home, and then I can make the URL go to the home page. I apply parameters and I now have my top level link by first top level link. So I’m going to go ahead and hit save. We’re going to take a look at this on the front end. When you’re developing a mobile, or I’m sorry, an accessible menu inside of oxygen, or really on any website, it has to be structured a certain way as far as HTML goes. So let me turn off my notifications on my phone. All right.

0:07:25
So first things first is the container needs to have a nav landmark. And you can see right here, let me zoom in, you can see that oxy extras applies the nav landmark by default. That is really cool and really important. Okay. Next is you can’t just have links inside of a wrapper. We actually need our menus to be an unordered list, right? So you’re going to see that oxy extras automatically create a UL and then an LI inside of that UL and then puts the link inside of that LI. This is proper HTML structure for an accessible menu. Oxy extras does that right off the bat. That’s one reason why we’re using oxy extras. There’s not a lot of options for creating accessible menus and WordPress, certainly not in oxygen. So this is just one more reason why oxy extras is such an important add-on for oxygen. So we have the nav landmark that we’re supposed to have. We have the UL, we have the LI, we have the A, all of this structure is perfect right off the bat. So we can continue going. I just wanted to show you that and so you know what we’re looking for when we are building something from an HTML standpoint. All right, so the next thing I’m going to do is grab our wrapper. Again, I’m going to add a new drop down. I want to take care of the whole top level first, then we’ll start working with drop downs, then we’ll move on to how this is going to work on mobile devices. All right, so the next one, I also want this to be a link with no drop down. I want the link text to say about us and I want this to go to the about page. All right, I’m going to go back up to the top of the wrapper here and I’m going to add another drop down. This one is actually going to be a drop down and it’s going to be called services and I’m going to leave the URL as hashtag drop down. Okay, we’re going to go back to our wrapper and we are going to add a new drop down and this one is going to say contact us. How about that? All right, so I’ll make this point to contact and we will apply parameters. Awesome. We apply parameters on this one. We need to apply parameters on this one and now I can go on my contact us and make sure that that is a link with no drop down. So I’m going to go ahead and hit save and we’re going to take a look at our menu on the front end. All right, there we go. So we have home about us services and contact us.

0:09:47
Now what I want to do is focus on the styling of these top level links and there’s a panel over here. When you have the mega menu wrapper selected, it’s kind of think of it this way. The mega menu wrapper does a lot of global control and you’re going to see that I’m not adding classes to a lot of different things. I’ll add classes to like one or two things in a minute, but I’m not adding classes to every element as I normally would and one reason I’m not doing that is because classes don’t actually work in these oxy extras elements a lot of times and they don’t work in the mega menu. If you add a class to this mega drop down and try to style the class, nothing will happen. So but it’s okay because we’re only using this. This is our primary menu. It’s only being used in one location, which is the primary template. So classes really aren’t that important in this case. All right, so I’m going to have the wrapper selected and I’m going to go to drop down links, which is actually your top level links. Okay, so again, a little bit confusing on the wording here, but this is your top level links styling. So you’re going to open that up. First thing I want you to see right off the bat, there’s a lot of default padding and margin and it’s all in pixels. Yuck. Okay, we’ve got to get rid of all of that. So the first thing I like to do is just zero all of these out and hit apply so that we can start from a blank slate, which is basically all of these things touching each other. And we have to talk here about designing use case for a second.

0:11:15
If you want a hover background color on your links, for example, when you mouse over them, then you’re going to want padding on your links. If you don’t care about backgrounds or having any sort of shape to your links, when you hover them, maybe you’re just going to change the text color on hover, then you don’t even, you don’t need padding. You can just use margin to space out your links. Okay, so that’s what I’m going to do here. We’re going to create basically the simplest menu we can possibly create that’s accessible. I’ll leave it up to you to play with all of these panels and all of the additional styling options that you have. You’re going to have to do that to try to fit the design of whatever website you’re trying to create, right? I’m here just to show you how to accomplish an accessible menu. We’re not going to go through every single panel, every single setting that would be completely overwhelming. I’m going to show you how to get from beginning to end to have a usable accessible menu on desktop and mobile. Then it’s up to you to explore the rest of these panels to figure out all of the different styling options that are available to you because literally there’s just an unlimited amount of styling that you could apply to a menu, right? Okay, so we’ve got no spacing, no padding, no margin, nothing in this top level here. So I’m going to leave our padding all set at zero and I’m going to simply use a margin left to space all of these links out. The reason I’m doing margin left is because the menu is aligned to the right and I want that last element to be in line with all of the rest of the content on the page, the page width content. So if I put margin on the right of these links, it would move my menu over to the left and it would be out of alignment with the rest of my content. By adding margin to the left, I’m going to avoid that scenario. So I’m going to use M’s for margin as I like to do with small amounts of spacing, especially when you’re spacing out text. I like to use M’s because M’s will scale if my text size happens to change. So I’m just going to use 1.5 M. Actually, let’s do 1.75 M on the left and you can see exactly what happens there. So I’m going to go ahead and save and we’ll take a look at the front end. So now I have a little bit of spacing between those elements. Okay. Now my top level is kind of set. We still have to apply some hover colors and things like that, but my links are spaced out the way that I want them. This one’s a drop-down the way I want it to be. These are normal links the way I want them to be. I think we’re ready to tackle the drop-down side of things now. So for the drop-down, I’m going to click on the services that has the drop-down and this is also a container. Okay. In the Oxy Extras Mega Menu system.

0:14:01
So I can put things inside of it. Now I don’t want to put manual links inside of it. I want to put a WordPress menu inside of it. So if you don’t know how to build a WordPress menu, I mean this is very basic stuff. On the front end, you can go to customize, you can then go to menus, you can create a menu like I’ve created the services menu and it’s got my services links inside of it. You can also do it from the back end here under appearance and menus. So either way, you want to create a menu, that’s fine. I need a services menu for my services drop-down. So I created one. I put dummy links inside of it. And now what I’m going to do, there’s two ways to do this. You can do this drop-down and select WP menu, fly-out menu. And then you can select your services menu from this drop-down here. But what I found is that it’s more difficult to style the drop-down items or links at a granular level. So I do it a different way. I leave this set at, if I can get the menu back open again, I leave this set at place elements inside, which is the default state. And then I go up here and I add a slide menu. And this is another oxy extras element that we turned on in the very beginning. So I’m going to go ahead and add the slide menu. And then I’m going to click and we’re going to see that our slide menu is actually over here. And I need to choose, let’s see, custom place elements inside. I need to open this in the structure panel, choose slide menu. And now from menu source, I can select menu from a list and I can choose my services menu. And there it is. So you see my services link. But it’s way, way, way over here. So the slide menu is just chewing up my links. The styling of this drop down is actually done at the parent level. So we’re going to go all the way back to the mega menu wrapper that contains all of our links. And I’m going to go to, to right here, that says drop downs. And here you can choose the font size of your drop down links.

0:15:59
So I’m going to go ahead and change this to none. You could set this to something like 1.6 rim. If you’re using automatic.css, you could use a variable. You could leave it as its default. If you don’t want to change the size, it’ll be the same size as the top level, all is all as well there. For our background color, what I would like to do, I think, is just so we can get some variance in our design here. Well, now I’ll leave it as white. Text color, I’ll leave it to inherit. That’s fine. Let’s take a look at size and spacing now. So we have our outer padding and we have our content padding. And don’t worry, we’re going to change the position of this in just a second as well. So our outer padding, I’ll show you in a minute, we’re going to deal with content padding right now, which is the padding inside of here. We have to make another design decision. If you use content padding, and here’s what it looks like, I can do 1M, apply to all, and now I have spacing around my links, right? On the outside of all the links. Unfortunately, if I want to do the background hover color effect on these links, this would create a border between the edge of the menu and where my links are. So this is in fact not what we want to do. And you can easily get tripped up and do padding there and then have to come back later and fix it. So I’m going to show you what we’re going to do instead. So I’m going to click on our slide menu and on our slide menu, I am actually going to apply a class. This is one of the few elements where a class will actually work. And so what I’m going to do is call this, and this kind of alludes to a class we’re going to use on our main wrapper in just a second. In fact, let’s just go do that. I’m sorry, I’m jumping around. There’s a million things to think about and do when you’re doing this. So I’m going to call this nav double dash primary. This is going to be a nav, but it’s going to be our primary nav. So the modifier is primary. And I’m going to go ahead and put that on our entire wrapper. Now what I can do is click on my slide menu, and I’m going to do nav primary double underscore, and you can call this whatever you want. You can call it like drop down or slide menu, whatever. I’m going to call it drop down. So nav primary drop down. And now what I’m going to do is start styling. And I can come down here to menu items, click on that. And then I have color available to me, hover color, background background, hover color. I also have spacing options. So I’m going to go into spacing, and I’m going to go to padding. And I’m going to do all of the spacing inside of this drop down menu on the actual links themselves. So I’m going to do one in and apply all, and you’re going to see what we’re going to get. Now I can see the top and bottom is a little bit too much. So I’m going to do point five point five. And then that is pretty solid spacing for our drop down. So as you can see, this is done exclusively on the links that are inside of that drop down. So that now when I do a background hover color like var primary, I actually do var primary hover, we get a full width hover effect on these links versus having some sort of a border on our drop down. Right.

0:19:08
Now on the hover color, I want these to actually be a var shade white. These are just variables from automatic.css. You can easily just use, you know, the color picker, right, to do white. But I’m just using variables because it’s what I do. Okay. All right. So I’m going to go ahead and hit saves. We can save our work. Now let’s take a look at the positioning of this slide menu. So I’m going to go to our overall mega menu wrapper. And you’re going to see mega menu type. Where is individual drop downs standard drop downs? Interlay out current links. I think it’s on the wrapper default drop down with custom width. That’s where we want to do it. So the default drop down width, even though that was blank, that box, it sets it either container or content or something similar. And that’s why it’s way over here. I actually wanted to be a custom width. And then I’m going to go to set this like a 24 rim or something like that. I’m actually on the class, which I don’t want to be on. I want to be on the the ID. You notice that when I applied that, nothing happened. So I’m going to go back here container with 24. I’m going to apply parameters. And I believe we are going to get yes. So now this is properly aligned over here. Except for the fact, you know what? I think what we need to do. Let me go back. We know we don’t want to set a container with here. We want to set, we do have to choose custom width, but we want this actually set to auto because the slide menu is going to control the actual width. Okay. So now that I have this set to auto, you can see it’s very scrunched. It doesn’t know what width to be. So I’m going to click on the slide menu now.

0:20:54
I’m on my class. And here I can actually control the width. And now you can see that again, we have full width hover effects on these items. I can make this literally whatever width I want it to be. And this would be like a default width for our drop downs. But if you needed to override that width on a specific slide menu, then you could do that at the ID level where I could come in here and say, this one’s going to be 18. So I now have a default, which is assigned at my class. And I have an override at the ID level that I can use at any point in time. All right. So the next thing that we are going to do, and this is, it’s a little confusing because some things you do at the slide menu level, some things you do at the drop down level, some things you do at the mega menu level. And I try to do as much as possible at the mega menu level. So I’m going to go to drop downs. Under my mega menu, I’m going to go to drop downs and I’m going to go to shadows. And I’m going to just going to add a shadow because right now it’s hard to see these drop downs. So I’m going to actually not use a variable. Let’s do this very simply. We’ll use black. I’m going to do a zero horizontal. I’m going to do a four pixel vertical offset. I’m going to do a 20 pixel blur. And then I’m going to put this at 12 or so. And then I’m going to uncheck in set, which loves to check itself. If you click like way over here, it checks the in set box, which is super fun. So you end up with an in set box shadow when you thought you were making a normal box shadow. But now you can see I have a nice subtle box shadow on my drop down. I also want to show you something else.

0:22:30
Let me get out of this customizer. All right. So I hover over. Okay. The menu is perfectly aligned with the left side of the services. If in the very beginning, if we had used padding to separate out these links, this would not be the case. It would look as if our drop down is offset. So by using margin, we actually get perfect alignment. Whereas padding would not lead to perfect alignment with your drop down. You would have to do something else to nudge them or position them differently to get that alignment perfect. Okay. All right. So I’ve got our services with our services menu in here. I’ve got top level links all looking good. So we’ve got a nice little hover effect here. The other thing we can take a look at doing is with our animation. So again, I’m on my mega menu. We have container container animation. So I’m going to go ahead and set this to fade transition in. We’re going to do 300 and 300 on the out and apply parameters. And I believe that is going to I haven’t played around with animation too much. It’s not super big on animation. I like to keep it subtle. It looks as if that’s fading in now. So that’s much better. Okay. So let’s take a look at top level styling. And then what we need to do is we need to go tackle the mobile side of this. We’re basically getting to the point where we have an effective desktop menu. Of course, it’s not completely accessible yet, which we’re going to take a look at in a minute. All right.

0:24:01
So let’s go ahead and look at we’ve got drop down styles. I need to be on our container for mega menu and drop down links colors. And then hover text color. I would like this to be var primary hover. And let’s see if we apply parameters. There we go. So we get a little hover effect there. I don’t that’s a little bit light. So I’m just going to use the primary color. There we go. Okay. So if we look at that on the front end. Now we have hopefully, yes, we have hover effect on our links. We have hover effect on our drop downs. So we’re good to go. This is the part where we could either tackle the mobile side of things or we could check on the accessibility of this main menu. And I think what we want to do here is stop and check on the accessibility of this main menu. So with accessibility and menus, there’s a few different things that you’re looking for. One of the first ones is can I navigate it with my keyboard? So if I start hitting tab, you’re going to notice that here’s my focus up here. Here’s my skip to content link. Here’s my logo. If I hit tab again, this home link should have a red outline just like this one does, except it does not. And that’s because Oxy extra is being as helpful as they can possibly be set the outline of all of their focus elements to none. And automatic.css, which I’m using, uses outline for focus. So then we ask ourselves the question, all right, how do we style focus on these links? Well, we go into the panel as you would normally do. So I’m on my mega menu here.

0:25:40
Let me get back to my mega menu. And I start looking. I go to drop down links. Okay, focus borders. There we go. That sounds like we need it. But what you’re going to notice is it uses border. And border is inappropriate in my opinion. And you’re going to see why I’m going to show you why. You don’t have to think my word for it. Borders inappropriate for styling focus on websites and links and things like that. And here’s why border is like a block level styling. It affects the effective, it affects the effective, it affects the effective heightened width of elements that it’s applied to. So on focus, here’s what happens. Watch this. And I have to put in my, well, let’s just put a red. Let’s just use red. And this is going to get super laggy because the border, there’s a bug in oxygen with the border section where it just can’t handle you doing things. It can’t handle life whatsoever. And it gets super laggy and bogged down. So I’m going to put a two pixel and I’m going to wait, you know, 10 minutes for this button to actually show up that I clicked it. And then I am going to hit save. Okay. Now we’re going to go back to the front end, refresh and there you go. But watch very carefully the text. First of all, the borders like right on it because we don’t have any padding. We took the padding away. And I don’t want to have to add padding back just to have a focus style. That’s ridiculous. But watch the text move as I focus from item to item. See the text moving?

0:27:15
Because the border is changing. It’s effective with and height relative to the other links. This is why you should not use border for your focus styles. It’s why I use outline and automatic CSS. Notice that when I focus on these elements down here, nothing changes, right? Because the outline is independent of the effective with and height of the element that it’s on, right? The outline just exists around it. It’s almost like it’s absolutely positioned. So outline is the appropriate way to style. But oxy extras doesn’t give us the ability to style with an outline. It’s so unfortunate, right? And it’s something that I’m going to bring up with them. So what I want to do is actually set this to none. We don’t want any borders on focus. And I’ll wait 10 minutes for that button to show that I clicked on it. All right. So we go back to the front end and good. We have no focus styling. So now what we’re going to do is add our focus styling manually. So here’s our our SOP that we’ve been starting to work on for creating an accessible menu inside of oxygen. And I’m just going to copy all of this CSS. And I’m going to give you this CSS. All we have to do is go to manage style sheets. And we have to go create a new style sheet. We’re going to call this menus. And we’re going to paste that in there. If you’re not using automatic.css, you’re going to want to replace these var primaries with just a hex code. So you could do like aFFF, something like that. Or well, you wouldn’t want to use white. But you get the point, right? You just use a hex code instead of the variable. And you’re good to go. But this will take care of the focus styling for you with your oxy extras menu. So I’m going to refresh. We’re going to tab focus and boom. You now see I have really good tab focus. And none of the text is moving because we’re using outline which does not affect the size and width, heighten width, I should say. So here’s a couple of things you want to note about an accessible menu. When you’re using keyboard navigation, see this drop down right here. You should be able to move past that drop down without activating it. Let’s see if that is true. That is true. You should be able to interact with that drop down using the keyboard.

0:29:32
So if I hit enter or if I hit the down arrow, the drop down should appear. That works. I should be able to navigate through. And I can. And then when I leave, it should go away all on its own. And it does. So we just checked a lot of different accessibility check boxes off right there. And really oxy extras has done all of that for us. It is ensured that all of this works. Now we have to check something else. We have to check how this is going to behave when someone uses a screen reader. How is the screen reader going to announce our navigation? So I’m going to turn on voice over voice over and visit. Okay. So we’re on the logo right now. So I’m going to tab over and we’re going to get to we need to check two different things here. How are these links announced? Is this announced as a drop down? And how is the container itself announced if we choose to focus on the container? So first I’m just going to go link by link. Visited link home list four items. You are currently on a link to click this link press control. Okay. Good. I’m going to shut it up. So notice it told me I’m in a list of four items. That’s important because it’s telling the person hey there’s four options in this navigation right and you’re currently on the home. So now I’m going to click to about us. Visited link about us. Okay. You are current services collapsed button. Services collapsed button. So that tells the person hey this isn’t just a normal link. This is actually a collapsed button. You can interact with it in other words. So I can interact with it. Visited link service number one list three items. So now it’s telling me hey you are on the service number one item right but this is a list of three items. So it’s telling the person in this drop down here there are three items. That’s really important. That’s critical.

0:31:29
Visited link service number two. Visited link service number three link contact us. Okay. So all of this is working as intended. Now we’re going to see what happens if someone chooses to focus on the container itself. So I’m going to go back visit it. Visited link. If I hold if I hold control an option I believe it is and then hit the arrow key over it’ll actually it should choose that landmark that nav landmark and we’re going to see how it announces this navigation. You’re currently in a navigation. So it announces that container as navigation which you would think is very you know that’s exactly what it should do. Here’s a big problem. When you have more than one navigation on a web page. For example here’s a footer navigation down here right. Let’s say you’re on a blog post with a table of contents. That table of contents is a navigation right. What if you have bread crumbs on your blog post that those bread crumbs are a navigation. They can’t all say navigation because then the person with the screen reader has no idea which navigation exactly they’re on right. It should announce itself as a specific type of navigation maybe a primary navigation or a bread crumb navigation or a footer navigation or something like that. So the way that we handle this is with Aria labels. But oxygen. Oxygen for the oxygen. Digital ambition training. WordPress. Web content voiceover off. Okay. Sorry. Sometimes I forget to turn it off. So oxygen has a bug where if you are on a third party element like an oxy extra mega menu and you go to advanced attributes and you try to add an attribute to it. This is not supported. I think it’s not supported by oxygen’s API. So you can’t do that. You can’t add an Aria label to this. And if you go into this panel here and you start looking for where you would add an Aria label. It is unfortunately not here. You can go to user interaction. It’s just not there. So here’s where that little JavaScript snippet comes in.

0:33:38
Okay. So we’re going to go back over here. We’re going to copy these two lines which I’m going to provide you these two lines. We’re on our mega menu. We’re going to go to advanced. We’re going to go to JavaScript and we’re going to paste our two lines. I will explain exactly what this is doing so that you understand it. It’s basically assigning the class of nav primary to a variable called z which this doesn’t matter. The variable can be anything. Then it takes z and it sets the attribute of Aria label primary. So again, we’re identifying basically where’s the nav primary. Let’s assign that to a variable. Let’s set the attribute of that variable to this. And we’re using Aria label because we’re adding an Aria label. We want the value of that Aria label to be primary. This JavaScript snippet will not work if your nav doesn’t have the class. If your mega menu doesn’t have the class of nav primary. So if you’re using a different class like just nav, for example, you would want that to say nav. Mine is nav primary. So I’m going to use nav primary. Now we’re going to save. That’s all you have to do. And so now we’ve used JavaScript to effectively assign an Aria label to our mega menu. I’m going to turn on voice over. Voice up link. Visit it. Link in it. So now when I go and focus, watch what happens. Primary navigation. It announces that it’s primary navigation. If I had a breadcrumb on the page, it would announce it is breadcrumb navigation. If I have a footer nav on the page, it’s going to say footer navigation. So that’s very important to screen readers and to increasing the accessibility of this menu. All right. So we’ve done the keyboard focus styling. We’ve done the, let me make sure that you can live. They can live dialogue and Firefox, digital and wish voice over off. Forgot again, to turn off the voice over. So we’ve got the keyboard navigation.

0:35:39
All of that is working. We’ve got the voice over announcing items properly. Our desktop menu is done as far as I’m concerned. So now what we’re going to do is turn our attention to creating the mobile version of this menu inside of oxygen, which is another entire adventure in itself. Okay. So I’m going to open the structure panel. I’m going to collapse my mega menu. And I’m going to come up here. Actually, I’m going to grab my mega menu so that I have some sort of anchor for where this next element is going to go. I’m going to hit add burger trigger. So now we’re going to add our burger trigger. Here is a really important, this is what’s going to trigger our mega menu. Really, really, really important. Don’t muff this up. The burger trigger must come before the mega menu. And you’ll see why in just a minute, if I can remember to show you why, otherwise just take my word for it. But I’m going to try my best to remember to show you why it has to come first. I can’t show you until the mobile menus actually created. All right. So on our burger trigger, we are going to just on the ID level here. I’m going to set the scale to 0.75 because I don’t like it being, you know, that big. You can adjust different styling here, but we’re not really going to worry too much about that. One thing I do want to do right off the bat is I want to come down to button text and this element, even though the mega menu doesn’t, this element, the burger trigger does give you the ability to add an R real label. So I’m going to do that right off the bat.

0:37:11
And well, before I do that, I want to show you why we’re doing this. All right. So let’s go to the front end. There’s my burger trigger right there. I’m going to keyboard focus on it. And I’m going to use actually first, let’s inspect it. I want to show you something important. This is a true HTML button element as it should be. If you try to add an icon like this manually and you don’t make it a button, it’s just an SVG or a div or whatever, it will not work. It will not be accessible. So the fact that this gets added as a button by default by oxy extras is another very helpful thing. The problem is how it’s announced. So if we turn this off, we go back here, we turn on voiceover. Voiceover on Firefox. Digital. Listen very carefully. Button. It’s all it says. It’s like, hey, there’s a button here. We don’t really know what it’s for. We don’t know what it does is what we know it’s a button. That’s obviously not good. We need digital ambition training. Voiceover off. Sorry. In the builder, we go to the R real label. We add the R real label. Now, don’t call this menu button, right? Because now it’s going to say menu button button. Just put the label as menu. We’re going to hit save. You can also maybe say primary menu. Because it is our primary menu button. This would be if you had another perhaps another menu button on the page. I can’t think of many use cases where that would happen.

0:38:42
But if you did, primary menu would be a good name for this. Now we go back to the front end. And keyboard focus. Here we go. Voice primary menu button. There you go. So it says primary menu button. That’s exactly how we want that to be announced. Okay. Leaving digital ambition training. Voiceover off. So sorry. All right. So now what we’re going to do. We’re going to go to our mega menu wrapper. And we’re going to choose where we want this mobile menu to or where we want this menu to convert itself into a mobile menu. Because this is the mobile menu as well. There is no other mobile menu element. This thing is going to behave as a mobile menu. So we’re going to go down to mobile menu here in the panel. And we’re going to say at less than 992, I want this to be a mobile menu. All right. And then there’s a bunch of other things that you can take a look at here. One of them is going to be the menu background. But we’ll address all of that when we get there. So the next thing I want to do is take this burger trigger and say, hey, you know what? At desktop, I don’t really need you, right? So we’re going to go to advanced layout none. And that’s going to make it disappear on our desktop devices. And then we’re going to come down here to 992. And we’re going to say, hey, at 992, I want you to display flex. And we’re going to go ahead and hit save. And then we’re going to go to the front end. All right. Perfect. So we have no burger trigger anymore. Let’s check out on mobile. There you see. So we go from a desktop menu to a mobile menu. Now let’s click on it and see what we get. We get our menu, but it does not look very good. So what we’re going to have to do now is deal with the styling. And I believe what I need to do is on mobile menu, apply parameters to get this to actually disappear on mobile. So we can see what we’re doing. Okay. All right. So there is my mobile menu. First thing I’m going to do. And I have to have the mega menu selected. I’m going to come over here. And under mobile, I’m going to set a mobile menu background because right now you can see there is no background color. I’m going to use bar base dark for this. And when I do that, I now have to change my overall link color.

0:40:53
Right. So we’re going to have to go back to drop down links. And remember, I’m doing this at the 992 break point. If I did this at the desktop, it would override my desktop styling. I don’t want that to happen. I only want this styling to apply at less than 992 because that’s where my mobile menu takes effect. So I’m going to go to colors, text color. I’m going to do var shade white. And my hover text color. Oh, that’s actually pretty good. I think we’ll leave it like that. Or maybe we’ll do a hover background color of var primary. Okay. And yeah, you’re going to see there’s some spacing issues that we have to take care of here, which we’ll address in a minute. So the hover text color needs to be, that should be var shade white as well. There we go. Perfect there. So I’m going to go back here. And we’re going to take a look at our drop down links. That’s already in drop down links. I’ll go out and come back just so you can see it. And I want to zero these all out again so that you can now see we don’t have that weird border margin on the left hand side that was going on. So now kind of the opposite of what I did on desktop, I actually want to use padding to style all of this on mobile. So for padding left, I’m going to do an M of let’s try two and padding right. I’m going to do an M of two. And then you could see that brought in that arrow a little bit. So now we’re not so close to the edges on these things. Padding top, I’m going to do an M of 0.5 and then padding bottom, M of 0.5. And now you see I have a much cleaner menu on mobile.

0:42:29
Let’s take a look at what’s going on with our drop downs. Ooh, this is unfortunate right. Our drop downs are completely out of styling like this ends before it gets to the actual end of this menu. And it’s white and all of this. And you remember this is actually controlled by our slide menu. And when we do this, we probably want to be at our class. And then we want to be able to, we’re going to say it 992 here, our width now is going to become 100%. And that immediately fixes a lot of things. But we also want this to have a background color. So we’re going to go into menu items. We’re remember we’re adding everything to the actual menu item because the menu item makes up the entirety of the container. So we’re going to do a background color of var. Let’s do base ultra dark. So it has some offset to the color. And then we’re going to do a var shade white again for our link color. And then our hover color. We’ll just make sure it’s at the var shade white. Okay, actually, I don’t want. Hmm. I think I think that’s okay. Maybe we should just do var primary as our background hover. So we’ll do our primary. That’s better. Okay, that it was looking a little light. All right, it was using the hover from before. Okay, so that’s all good. You can also change the font size here. If you want to conserve more room on mobile, for example, but I’m not finding any need to right now, I do need to go to spacing here and take a look at our links.

0:44:07
So if I do two, that basically gives us perfect alignment with our other elements. And I want to do two on the right as well. So it’s nice and even. All right, so I think what we’ve got here is a pretty nicely styled mobile menu. We’re going to go ahead and refresh here and see what we’ve got. There we go. Pretty, pretty clean. Okay, nice. Now we do need to see if we can style this or not style it interact with it with our keyboard. So I’m going to go over to my logo. I’m going to go to the button, the burger trigger. I’m going to hit enter. If I hit enter, it should open this menu and it does. Can I tab focus through my menu? Can I collapse the collapsible? Yes, I can. Everything is as it should be. We have the proper RELABELs, proper announcements. Voice over, I’m flag primary menu button. You are visited, link, home, visit, link, about us, expanded, visited, link, services, link, contact us, collapse, visited, link, services, visited, link, service number one, list three items, visited, link, service number two, visited, link, service number three, visit, visit primary menu button, banner, visited, link, voice over off. So there you go. All right, so we’re going to go out of here. So we have an accessible, normal menu with drop downs. We also have an accessible mobile menu with drop downs. All of the styling is nice and clean. Like I said, there’s an unlimited amount of ways you can choose the style menus and other cool things that you can do. I just wanted to get you going with an accessible menu and oxygen that works on desktop and mobile that announces itself properly, that you can properly keyboard and navigate all as well in the world, I feel, at this point in time.

0:46:09
So in future tutorials, we’ll look at other approaches for doing this. We’ll look at how to create a true mega menu that is still accessible. And we’ll actually look at a way to do all of this manually, but we will need a little bit more complicated JavaScript in order to accomplish that. So look out for future tutorials coming on additional ways to do accessible menus in oxygen, but this should get you started. And again, if you have concerns about oxy extras being another add-on, let me go back for just a second. And again, I don’t get any commissions for this. They don’t even have an affiliate program. Look at all of these elements that you get access to. And you can see the ones that I have turned on, right? A Jason Post is really helpful when you’re doing blog post templates, author box, super helpful. Back to top buttons on certain designs are very helpful. You have your burger trigger, carousels, I use all the time. And these are dynamic carousels that work with repeaters. Very, very, very powerful. Content switcher is important. Dynamic tabs, those are also accessible. So those work with repeaters, by the way. You have fluent form styling if you’re a fluent form user. I actually don’t need this. Gutenberg reusable block, if you’re a Gutenberg type user. I actually don’t need that. Hot spots and popovers, man. I did an awesome, if we look at 70surgical. I use these hot spots and popovers, man. This is a while ago. I don’t remember what page they’re on. Here we go. Here’s an example. So here’s their whole system, right? And you click on these hot spots. I mean, check this out. Like, you know, this is really solid. You can even put images inside of these hot spots. So that’s another example of something that oxy extras. Like, that’s something the client asked for specifically. Oxy extras bailed me out because it has all that functionality. I didn’t have to go worry about how to do all of that manually. It’s right there built into oxy extras. Then you have your off canvas element. You have your pro accordion, your pro media player. Read more, read less. I use that all the time. Reading progress bar, reading time.

0:48:16
Again, cool stuff for blogs. Slide menu. We are use that social share buttons. Those replace your social share buttons from oxygen, which are not accessible. Table of contents. I use that all the time. Toggle switches. So this stuff is very, very, very critical for most website build. It’s why we install oxy extras on every website. But that is going to be the end of this tutorial. I hope you guys got a lot out of this. Let me switch back to camera real quick. Okay, cool. Am I recording? No, okay. I’m not recording the screen anymore. If you have questions, if you have concerns about anything that you saw in this tutorial, the discussion section is open below. Go ahead, drop your comments, drop your questions. I’m sure there will be a lengthy discussion about a lot of different things going on in this tutorial. I wish that it was more straightforward. I wish it wasn’t this complicated. I wish we didn’t have to jump around so much and talk about so many different things. Alas, these are complicated problems that we’re solving. Accessibility does add a lot of complication, but it’s just life now in 2022 and beyond. Okay. So that’s it. I hope you guys got a lot out of this. Hope you are able to make an accessible menu for yourself inside of oxygen. More tutorials on the way. Love you guys. Peace.