Crow's Nest Menu Navigation

Crow's Nest Menu Navigation adds the ability for visitors using keyboard navigation on the site to use the arrow keys while in the menu. Thus, rather than tabbing all the way through all dropdowns to get through the menu, visitors can use the right and left arrow keys to see what is in the dropdowns, and then the down and up arrows to navigate to the desired item.

Prerequisites Before installing, be aware that this plugin will only work for your site if the menus drop down when you tab into them just like they do when you hover over them. Usually this only requires adding an identical :focus style to what may only be a :hover style in your stylesheet. It may take some hunting in the stylesheet to find the right :hover style. Once your menu drops down when you tab into it, you are ready to install Crow's Nest Menu Navigation. Automatic installation Automatic installation is the easiest option as WordPress handles everything itself. To do an automatic install of Crow's Nest Menu Navigation, log in to your WordPress dashboard, navigate to the Plugins menu and click Add New. In the search field, type “Crow's Nest Menu Navigation” and click Search Plugins. Install the plugin by simply pressing “Install Now”. Post-activation Open the Menu Setup option in your WordPress admin menu to set the plugin up by telling it various CSS selectors it can use to find the different parts of your menu. If you are unfamiliar with this process, you might want to get a developer to do this part for you, or go through some CSS Selector tutorials before trying this. Some basic instructions and examples are provided in the setup screen. After you click Save, you should be able to navigate your menus with the keyboard arrow keys. Accessibility considerations It's important to make clear who this plugin helps, and who it doesn't. Crow's Nest is designed to mainly help people who navigate by keyboards on sites that have extensive menus that drop down on hover and focus. Best practice for menu accessibility is to have it drop down by clicking either the primary menu item that has a dropdown, or a drop-down control right next to it. This allows screen reader users, as well as voice-activation users, to navigate the menu. Screen reader users are able to benefit from Crow's Nest, but it takes a little bit of effort: they need to disable the virtual cursor in JAWS and NVDA, or the Quick Nav in VoiceOver. It's not a difficult process, but is an additional step that will need to be taken to navigate the menu most easily. We suggest that you include something similar to the following paragraphs in your accessibility statement to let visitors know how to most efficiently navigate your menu: "While the menu is fully navigable to screen reader users by using the Tab key, or even arrowing through it, it has a considerable number of items spread across several dropdowns. Screen reader users who disable the virtual cursor (NVDA and JAWS), or disable QuickNav (VoiceOver) are able to use the left and right arrow keys on their keyboard to navigate the primary menu items, and the up and down arrow keys to navigate the submenu items. To do this, before you navigate into the menu, for JAWS and NVDA, use the keystroke Insert + Z. For VoiceOver, press the left and right arrow keys simultaneously. When navigating the menu, press Enter to go to the selected menu option, or the Escape key at any time to exit into the page. Once out of the menu, make sure to reenable Virtual Cursor by again pressing Insert + Z, or Quick Nav by again pressing the left and right arrow keys simultaneously." Another case you should consider with your menu is the user who comes to your site on a large tablet. This may have a large enough screen to display your desktop menu, but if your primary menu items are links in addition to dropdown indicators, there may be no way for touch users to make the menu items drop down since tapping on the menu item will take them to that link instead. If you remove the link from the primary item itself, tapping on it should give it focus and thus cause the menu to drop down, though you should test your menu extensively to make sure this is the case. In any event, Crow's Nest is not designed to fix every accessibility issue with your menu, but can be helpful for many users. When you are able to undergo a thorough remediation effort on your menu, you should do so. Crow's Nest may benefit many of your users until then. It may even be beneficial after then if your menu remediation does not enable arrow-key navigation.