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 arrows to see what is in the dropdowns, and then the down and up arrows to navigate to their desired item.
Pick your favorite accessibility nonprofit and make a donation to them. They need it more than we do!
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 just 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 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. Once you’ve found it, you can view details about the latest release, such as community reviews, ratings, and description. Install the plugin by simply pressing “Install Now”.
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.
Q: Who does this plugin help?
A: Anyone who navigates your site using a keyboard rather than a mouse or trackpad. This includes people who have reduced mobility, people with faulty mice or disabled trackpads, and people who just prefer to navigate using only their keyboards.
Q: Will this plugin work if my menu has no dropdowns?
A: Yes! While there is not much advantage to being able to navigate a single-level menu with the arrows rather than just tabbing through it, some people might prefer it, and this plugin enables that just fine. In order for it to work, you should write the same CSS selector in the menu setup screen for both primary and secondary menu items.
Q: Are there any visual instructions to my visitors telling them how to navigate with their arrow keys? I do not see any.
A: By default, the instructions are set to appear just above the menu as a semitransparent message. If your menu is at the very top of the screen, these instructions may be off the top of the screen. You can adjust where these instructions appear by playing around with the “Distance from top” setting. As with any top CSS declarations, be aware that if you want it to appear above the container it’s in, you’ll need to write a negative number in this field.
Q: The plugin is not working. How do I get support?
A: Email us at firstname.lastname@example.org and we’ll do all we can to help you out! Use the same address for feature requests or offers to help. We would love to work with you!