WordPress Keyboard Accessible Dropdown Menus Plugin Revisited
Published: Jul 8th, 2013 | 2 Comments
Back 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.
However it would not work with all themes because of the way it targets the menu to add functionality too.
So what’s new?
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.
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’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.
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.
- 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
- Using aria-hidden to help provide better link context in WordPress Admin screens - Nov 26th, 2013
- WordCamp London – A great experience - Nov 25th, 2013
- Another two accessibility presentations in November - Nov 8th, 2013
- a11yLDN is coming soon - Oct 17th, 2013
- A possible ARIA solution to improve accessibility of the WordPress Add Media Panel - Sep 18th, 2013
2 Responses to “WordPress Keyboard Accessible Dropdown Menus Plugin Revisited”
Like to leave a comment?
Please note: All comments are moderated before they will appear on this site.
Previous post: Simple Usability Improvements for your WordPress Theme