WordPress Keyboard Accessible Dropdown Menus Plugin Revisited

Published: Jul 8th, 2013 | Author: Graham Armfield | 2 Comments

Reading Time: 3 minutesBack in December 2011 I posted about a plugin I’d written to make the dropdown menus for the default WordPress themes keyboard accessible (see WordPress Keyboard Accessible Dropdown Menus Plugin v0.1). I believe a few people did download the plugin from this site and a couple left some favourable comments.

Well, an updated version the plugin is now in the official WordPress Plugin Repository – view the plugin page here.

Why I built the plugin in the first place

As I mentioned in the original article, a common accessibility failing of many websites is that their dropdown or flyout menus can only be opened when a mouse pointer hovers over the links. Whilst many people do use a mouse, some people with motor impairments cannot, and they rely on keyboard commands to move around a website.

This means that unless some easily-reached secondary navigation is available, it is sometimes impossible for people to navigate to all parts of a website. If your site is selling your products or services this could result in lost sales.

The original plugin combined some CSS stylesheet techniques with a small piece of javascript to allow the menus to open when visitors tab through the navigation links. The plugin worked with the default WordPress themes Twenty Ten and Twenty Eleven and probably many child themes that used those themes as parent themes.

However it would not work with all themes because of the way it targets the menu to add functionality too.

So what’s new?

Recently I was contacted by Amy Hendrix (aka @sabreuse on Twitter). Amy is a fellow WordPress developer and she wanted to use the plugin on a piece of work she was doing for The Ada Initiative.

She proposed a collaboration and offered to update the plugin to try to make it function with more themes. And given the growing use of touch devices and their perceived incompatibility with dropdown menus, we decided to block the functionality on touch devices.

Technical bit

The original version of the plugin targeted the specific id in the HTML of the main navigation. So it worked with any theme that happened to use that id.

Amy’s idea was to target the ARIA role of navigation that is being used in growing numbers of themes to signpost a menu list.

Amy has also amended the plugin to use jQuery – a javascript library already used by many WordPress themes.

The result

Amy’s changes should allow the plugin to function with many more themes – including the newer WordPress themes Twenty Twelve and Twenty Thirteen.

The plugin has no configuration options and should work as soon as it is activated.

I want to publicly thank Amy Hendrix for making the changes and steering the plugin through the WordPress plugin submission process.

The future

Whilst the new version of the plugin will work with more themes, there are undoubtedly many themes where it won’t work – even some that provide a good level of accessibility, but just don’t happen to feature the navigation ARIA role.

Amy and I intend to amend the plugin further to accomodate as many themes as possible.

Potential ideas for enhancement:

• Add an option so that a site administrator could specify the id of the navigation menu they wish to target. Obviously this wouldn’t be appropriate for non-technical administrators, but it would work for more tech-savvy site managers.
• Add an option to allow dropdown menus to appear to the right or left of the main navigation links. This would suit sites (like this one at time of writing) that have vertical navigation in a sidebar.
•  Add functionality and options to allow the dropdown menus to behave appropriately in response to touch commands – ie to open on first touch and to navigate to page on second touch.

What do you think?

If you’ve got any comments on the plugin, or suggestions for further enhancements, why not let me know.

You can leave a comment in the Comments section below.

Useful links

• Download the new version of the plugin from WordPress
• Amy Hendrix’s website
• Amy’s introduction of the new version of the plugin on sabreuse.com
• The ADA Initiative write about using the new version

Other Accessibility posts

• Building Accessible WordPress Themes – Featured Images - Apr 28th, 2019
• How to Build an Accessible WordPress Theme - Apr 28th, 2019
• Accessibility Checklist - Apr 7th, 2019
• Street Accessibility for the Blind in Vienna (Video) - Jul 28th, 2016
• Instagram Accessibility Reduced by New Design - May 18th, 2016

Categories: Accessibility, Navigation, Usability, WordPress | Tags: CSS, Javascript, Keyboard Accessibility, Keyboard Focus, Motor Impairment, Plugins | 2 Comments

2 Responses to “WordPress Keyboard Accessible Dropdown Menus Plugin Revisited”

1. From: Accessibility Round-up – 11th July 2013 | Accessibility in India Community Group on July 11th, 2013 at 11:30 am

   […] WordPress Keyboard Accessible Drop down menus – plugin revisited […]

2. From: Accessibility Round-up July 11th 2013 | Sai Gagan Accessibility Solutions - One store for all e-Accessibility needs on July 11th, 2013 at 4:34 pm

   […] WordPress Keyboard Accessible Drop down menus – plugin revisited […]

Like to leave a comment?

Please note: All comments are moderated before they will appear on this site.

Your Name (required)

Your eMail (will not be published) (required)

Your Website

What would you like to say?

Previous post: Simple Usability Improvements for your WordPress Theme

Next post: Accessibility presentations at WordCamp UK 2013