Accessible Full Screen Menu

You might argue is full screen menu good idea in the first place. But it can be attractive and useful in the same way as modal dialog when done right. First step is to make it fit in your site design. Not all sites have a natural place for full screen menu or modal dialog.

Then work hard creating accessible full screen menu and you’re done! In this article I use Munsa WordPress theme as an example. From demo site you can check the final result.

Accessibility for sighted users

For sighted users there are couple of important points we should consider when creating full screen navigation.

First, remember color contrast. Menu buttons and link colors should have enough color contrast against background color. Also follow other accessibility guidelines.

Second, disable scrolling on html or body element is probably good idea when you open full screen menu. That’s because I don’t want to scroll body element or have two scroll bars when full screen menu is opened. You can do that using one line of CSS when adding class disable-scroll-when-menu-is-open via Javascript:

.js.disable-scroll-when-menu-is-open {
    overflow: hidden;
}

In the same time take care that you can scroll the navigation element if it’s taller than site body element. Otherwise users could not reach all the menu items.

There is no scroll bar so we can’t reach all the menu items.

Fix this using overflow CSS rule:

.js .main-navigation {
    overflow: auto;
}

Did you notice the js class? We talk about that in next chapter.

Full screen navigation should work when Javascript is disabled

Sometimes users disable Javascript or it just doesn’t load. These users should still be able to see full screen menu items. This can be achieved by adding no-js class to HTML element. When Javascript is available, change no-js to js class programmatically. In Twenty Sixteen WordPress Theme this done via wp_header hook.

function twentysixteen_javascript_detection() {
	echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
}
add_action( 'wp_head', 'twentysixteen_javascript_detection', 0 );

After that it’s a matter of styling the full screen menu using no-js or js classes.

Quick tip: In Chrome you can disable Javascript by entering URL chrome://chrome/settings/content. From there check Do not allow any site to run Javascript.

Use buttons for opening and closing menu

Article Links are not buttons. Neither are DIVs and SPANs sums it up really well.

• DIVs and SPANs do not have accessibility properties build in.
• Links are for navigating to another page or same page anchor. Empty or invalid href attribute doesn’t make it a button.
• Buttons trigger an action like opening and closing full screen menu.
• Buttons are keyboard accessible by default and yes, they can be styled with CSS.

With all that said use buttons for triggering full screen menu.

Initial focus

When full screen menu is closed menu items should not be keyboard focusable when tabbing trough the site using Tab or Shift+Tab. This is because keyboard users might get lost where they are navigating. This can be done by using display: none and display: block CSS on menu element.

• display: none when menu is closed.
• display: block when menu is opened. Now menu items are focusable.

It’s even more important to shift focus when toggling full screen menu.

• When opening the menu (using button toggle) focus should shift on the element itself or the first focusable item inside the menu.
• When closing the menu focus should shift back to element where we were. That’s probably toggle button. Otherwise it’s really frustrating for keyboard users to figure out where to hell they landed and start tabbing again.

Keeping focus inside full screen menu

When tabbing through menu items do not lose focus outside the full screen menu.

• When pressing Tab key on last focusable element focus back to first focusable element. Or to toggle button.
• When pressing Shift+Tab on first focusable element focus back to last focusable element. Or to toggle button.

Closing the full screen menu when pressing Escape key

It’s also important to provide users an escape route and close the menu when they want. Close button should be part of the focusable elements inside full screen menu. But also close the menu when user press Escape key. And remember to shift focus back to where it was in this case also.

But where is the code?

I didn’t want to put too much code examples in this article. Instead I wanted to give ideas what you should consider when building accessible full screen menu. But do not fear, you can check all the code from Munsa Lite version in Github repo.

• Javascript file handling all the things talked in this article.
• Demo for Munsa theme full screen menu.

Let me know if I screwed this accessibility article badly or you have ideas to improve it.