Your navigation menus are how people find their way around your site. You want these menus to be usable by everyone, regardless of their abilities.
Why use Max Mega Menu
I’ve tried a lot of menu plugins over the years, and Max Mega Menu is hands down the best for accessibility. It integrates seamlessly into almost every theme and produces a reliable and dependable accessible menu.
But, with any tool that can create something accessible, it can also create something totally inaccessible. It’s all in how you configure everything. I’ve put together 5 videos walking through the various steps that I do every time I build out a menu for max mega menu. The first 2 videos are here on this blog post, the other 3 you’ll need to visit the full max mega menu guide.
Choose your primary 2 colors
Before we get started building out our menu, we need to pick out two primary colors that we’re going to use. Sometimes we’ll use three, but most of the time when I build a menu, I only use two colors.
So to do this, I’m going to go to the easya11yguide.com website, and I’m going to go to the DIY Tools menu and then click on Quick Contrast. This will allow me to do contrast between two colors.
So I’m using blue and white. These are two colors that are generally great to contrast with each other. I will put my first color, which is either one, into my color one input, and then I’ll put the second color into the color two input.
So I’ve put FFF for white into the color one input and 0075a5 into the color two input for blue. It’s going to give me an instant answer telling me that my contrast ratio is over five, which is good for AA.
When you’re doing contrast for a menu, you always want to make sure that it’s at least 4.5. Always. A little higher is better. In the case you are dealing with a blue-on-black situation, you want to go even higher, striving to get a triple-A score, which would be a seven.
Then here we can see our contrast samples. We’re going to go ahead and continue building on our menu with these two colors.
Creating your desktop menu
Max Mega Menu is a great plugin to create an accessible menu on your WordPress website. It works with tons and tons of themes right out of the box just by installing it and activating it. However, just because you can create an accessible menu doesn’t mean you don’t need to do some configuration to get there. So here we’re going to walk through the desktop configuration for the Max Mega Menu plugin.
General Settings
First thing you’re going to do is install it. Once it’s installed, you’ll go to Mega Menu and Menu Themes. Here you’ll see the Theme Title. We have it set to just default.
If you’re going to have several different menu themes, perhaps you have menus used in different locations and may need different orientations, you can give them appropriate names so that you can find them again later. I typically leave the arrows alone, but if you’d like to modify these, you definitely can and they have a few different options if you have a particular style you want to match.
The line height – I will normally set the line height to 1.5. That’s very readable for most people. Z Index, I normally leave alone. The shadow can be really nice to help differentiate your menu from the page background.
Typically, I will either do a border or I will do a shadow. In this example, I will be doing a border, so I’ll leave the shadow turned off. Keyboard Highlight Outline – this is a fantastic new feature that they have recently added, and this allows you to match your website’s branding and to create nice contrast between the outline and the actual color menu items.
So here I’ve selected to set color to match my branding. I’ve set the width from their default of three pixels to my preference of two pixels, which matches the rest of my theme. I have set the offset from negative three, which is where it was by default to zero. This way, it will include the double outline that is in my theme.
So when something is outlined, it gets first a white outline and then a blue outline in my theme, and that makes things very easily readable in contrast. So I will set the offset to zero. I don’t use Hover Transitions and I don’t use the Reset Widget Styling. And when I’m happy, I save these changes.
Menu Bar
Then I come to the Menu Bar tab. The first thing I do is I want to set heights in rems and I want to set widths in either pixels or VWs. VWs are viewport width. I have set my menu background to be transparent. I don’t need the actual menu itself to have a background color.
I normally don’t use a lot of padding here, but you definitely can if that helps with the design style that you’re aiming for. You can align your items however you prefer. It’s really just a preference and design style. This will align your items either on the left, in the center, or on the right, and depending upon what style you have for your look, one of those may be more appropriate than the others.
The Item Font – I set this to the color I’m using, and I set the font size to be one rem, because you always want your font sizes in REMs. This way, when people enlarge their fonts, which zooming your fonts to 200 % is a WCAG requirement, this will allow people to do that and not break.
The Safari and the FireFox browsers have a built-in text-only zoom. There’s also extensions, for Chrome and Chromium browsers, which will do the same thing. So it’s important to allow people to just scale their font size and not break the rest of your menu.
I set white for the Hover because I will be using a hover background. I set the item background itself to be transparent and then to be blue on Hover. You can add item spacing if that matches your design. Typically, I leave the item padding alone, and if I do modify the padding, I keep it in pixels.
Normally, I don’t put borders around the top level menu items, and I normally don’t do a border. You do want to turn off the Highlight Current Item because that can actually cause problems for people who have cognitive disorders and of course, save these changes when you’re done.
Flyout Menus
Then we’re going to come to Flyout Menus. Here in the Flyout Menus, I want to set a color for the background because this is going to overlay sight content. I have set the background to be white. I normally leave this width alone. If I do modify it, I’m going to go with either pixels or VWs.
Again, that is for Viewport Width. I will typically only use that if I’m pulling out a full on mega menu. We’re just doing flyouts for this tutorial. I have set a menu border and I’m using the two pixels that I have been using throughout my design and I’ve set it to the color that I’m using.
I set the actual individual item background to match that of the submenu background. Then I set the background on hover to match the main level of the menu. Heights, again, are always set in REMs, so I have set the height to 2.5 REMs. This matches the height of the main menu, the top level.
I’ve left the paddings alone. And for the font, I have set it to be the blue. And again, I have set my font size in REMs. Hover, it’s white and on a blue background.
I frequently turn on the menu item divider. This is a decorative styling, but I found it to be quite nice and it can definitely help people to see the difference between the different menu items. Since it’s decorative, I’m just using a light gray.
Applying Mega Menu as Your Primary Menu
Now that we have set up our desktop menu, we are going to go to Appearance and then Menus. And here we are going to enable the Max Mega Menu for my primary menu.
If you don’t see the ability to turn on Max Mega Menu, then it means that you haven’t selected a menu location. This display location is essential to get Max Mega menu working. So if you do have to select it, make sure to save your menu.
Now that I’ve enabled Max Mega Menu, I typically leave the defaults alone. The effect is Hover Intent. That means that you put the cursor over it. That is the most commonly used one and what most people expect.
I do a very quick effect and it’s just a fade. I don’t do any effect on mobile. This theme matches the theme name that we set in the initial menu themes settings. And then I just click Save.
Links Versus Buttons for Top Level Menu Items
While I’m here, I want to decide what I’m going to do with top level menu items. What I mean is here’s my demo site. You’ll see this menu item about the test and it acts as a dropdown. It also is a link. So this can be a little bit confusing.
I’m going to show you the keyboard navigation on this and you’ll see that it selects the whole item. Now, generally, what I prefer to do is for top-level items, I turn on the Mega Menu and I click on Settings and I disable the link, and then I save that. Those settings are now saved.
When I come back here, you’ll see that there’s no longer any actual link that’s being highlighted. This turns this into a button and the button only opens and closes the menu. The button doesn’t do anything else, and that’s much cleaner markup and much easier for people who have disabilities to understand. This is a button, it opens a submenu, that’s all it does.
And I will do that as well for my other drop-down menu, I will set the settings to disable the link. If I were to have a normal About menu, what I will normally do is I will have the About menu on top and then the very first item as the intended link where I would normally want to say about the company. Now we have set up the desktop version of the menu. Now we are going to go into the next tutorial and do the mobile menu.
Mobile menu setup
Mobile menu guide is on the Max Mega Menu plugin guide page available to Easy A11y Guide subscribers.
CSS improvements for accessibility
CSS improvements on the Max Mega Menu plugin guide page available to Easy A11y Guide subscribers.
Testing the menu for accessibility
Testing the menu is on the Max Mega Menu plugin guide page available to Easy A11y Guide subscribers.