Prototype for a more accessible drop-down navigation for WordPress themes

Project purpose

This project aims to create a prototype for a more accessible drop-down menu experience in WordPress themes. The goal is to build a solution that can be used in all themes to provide a consistent experience.

This repository holds a prototype of a standard WordPress primary navigation menu in an HTML file.

Demo at CodePen.

Problem

The challenge with most primary navigation menus in WordPress themes including the default themes is for horizontal menus, keyboard navigation requires the user to navigate through all sub-menus to get through the full menu. While this can be seen as an acceptable trade-off for smaller menus, it is not ideal, and it becomes a major issue in larger menus.

Proposed solution

Create a navigation menu prototype that

1. Expands sub-menus on parent item focus.
2. Introduces a "Collapse sub-navigation" button on next focus to allow the user to opt out of traversing the sub-nav.

Project requirements

The solution should serve as a best-practice example of Resilient Web Design and accessibility. To meet these goals, a set of requirements must be met:

1. HTML element structure reamins as-is (auto-generated by WordPress)/.
2. All navigation items are accessible when JavaScript does not load. This likely means all navigation items are open on load and hidden via JS.
3. Vanlilla JavaScript. No jQuery or other dependencies.
4. When sub-navigation is hidden visually, sub-navigation items should not be focussable by keyboard. This eliminates the "hide the sub-nav by shifting it 10000000000px offscreen" solution.
5. Unless the "collapse sub-navigation" button is clicked, sub-navigation should remain open until the user tabs away from the parent item (forwards and backwards).

Current status

The current version (as of Tuesday April 3, 2018) works as a general demo, but has significant issues around keyboard control, most importantly tabbing backwards and in and out of sub-menus causes unexpected openings and closings.

Contributions welcome

Calling all accessibility / CSS / JavaScript people. This is a joint effort (at least I want it to be). Please contribute your skills and expertise and help make multi-level menus more accessible. This repository holds a prototype of a standard WordPress primary navigation menu in an HTML file. To contribute, clone the repo and make changes to style.css and navigation.js as necessary. The prototype HTML has been lifted from a WordPress site to isolate the scope. The solution built here can be used in WordPress or anywhere else.

Background

WordPress allows the administrator to create custom menus (navigation) via the Customizer or Appearance -> Menus panel. These menus can comprise any combination of links to posts, pages, archives, or external sources, and those links can be nested.

WordPress themes typically display at minimum one such navigation at or in the vicinity of the header of the layout. Themes cannot and should not control how an administrator chooses to organize their menu items, meaning the displayed navigation could be anything from a single link to a large multi-level array of nested items.

In the case of multi-level nested items, the visitor needs to be able to navigate to and interact with the desired menu item using all input devices: touch, keyboard, and mouse.

For some examples of how this has been accomplished in the past, refer to the default WordPress themes Twenty Seventeen, Twenty Sixteen, Twenty Fifteen, and Twenty Fourteen.