WordPress Keyboard Accessible Dropdown Menus Plugin Version 0.1
Published: Dec 1st, 2011 | 2 Comments
This post focusses on a WordPress plugin that I’ve put together that enables the dropdown menus in the default WordPress themes to be operated by keyboard only users.
Introduction
One of the most common accessibility issues that seems to get overlooked on websites is keyboard accessibility. When keyboard users tab round a screen often the focus tends to disappear and it becomes difficult or impossible to work out which link or button has focus. Contrast this to when the links are hovered over – you get colour changes and other highlights.
If the navigation menu on your site has dropdown or flyout menus that are triggered by mouse hover, are they keyboard accessible too?
The default themes that are present when WordPress is installed allow dropdown menus. But these submenus are not opened by keyboard focus. Since many sites these days employ the default WordPress themes or themes based upon them, that means that these sites may have accessibility issues. In fact some pages on these sites could be very difficult or impossible to reach.
The ccAccessibleDropdownMenus Plugin
Purpose
The plugin attempts to make dropdown menus keyboard accessible – intially in the WordPress default themes. When tabbing through the primary navigation the sub level menus will become visible and users will be able to tab to the lower level links.
A future release may have options so that the functionality works on other themes too.
Development
Much work has been done in the area of accessible dropdown menus and there is nothing radically new in this plugin. But perhaps it is the first time that a solution has been placed in a WordPress plugin.
The mechanism used in this plugin has been adapted from Blake Haswell’s excellent example of a multi-level accessible dropdown menu. See Blake’s example page.
I’ve made some necessary amendments to get it to work in WordPress – starting with the default WordPress themes.
Works with
The plugin currently only works in the default WordPress themes ‘twentyeleven’ and ‘twentyten’ – this has been tested.
It may work in child themes using those themes as the parent but that has not been tested.
The plugin may also work in any other themes that have the horizontal navigation in a container with an id of ‘access’. This also has not been tested.
What the plugin consists of
There are three files in the plugin folder:
- readme.txt – Similar content to this post
- cc-accessible-dropdown-menus.php – PHP file containing the functions to insert the necessary code into WordPress pages
- cc-accessible-dropdown-menus.js – Javascript file which attaches the necessary CSS classes to elements within the page.
How it Works
Enabling the Accessible Dropdown Menus plugin
The plugin uses a combination of CSS and javascript to enable the dropdown menus to be keyboard controlled.
An extra stylesheet block is included in the header section of each WordPress page and the small javascript file is included at the bottom of the page so as not to slow the page down.
Using the script, whenever a link in the menu gets focus its containing list item (<li>) is given a class of hover. This enables the new CSS definitions to open any hidden submenus and bring those links into the tabbing order.
In the absence of javascript the full submenu lists may not open but the individual sub-links can be tabbed to.
For a full description of the functionality see Blake Haswell’s page.
Would you like to try it?
The plugin is in an early stage of development but it has been tested on a number of WordPress sites. I’d be most grateful if you gave it a try and let me have any feedback. The plugin is not yet available through the official WordPress plugins route but it will be soon.
You can however download the plugin here: cc-accessible-dropdown-menus-0.1.zip
Installing the Plugin
Place the cc-accessible-dropdown-menus folder into the plugins folder within your site.
Then go to the plugins page in the Admin area and activate the plugin.
There are no options for the plugin in version 0.1.
Uninstalling the Plugin
Deactivate the plugin from the plugins page. If you wish to you can delete the cc-accessible-dropdown-menus folder from your plugins folder.
Any thoughts?
If you’ve got some feedback on this plugin or anything to say about it why not leave a comment below.
Other posts tagged 'Navigation'
- Using Headings Properly - Dec 17th, 2009
- Navigation – Where Are You? - Dec 3rd, 2009
2 Responses to “WordPress Keyboard Accessible Dropdown Menus Plugin Version 0.1”
Like to leave a comment?
Please note: All comments are moderated before they will appear on this site.
Previous post: Accessible Forms – Grouping Elements Together With Fieldset
Next post: WordPress and Accessibility – a11yLDNmeetup December 1st 2011
Keyboard Accessible Dropdown Menus Plugin is a very useful plugin ,I like it ,thank you for sharing
Beste Graham Armfield,
Thank you for sharing this plugin. I have a website (http://www.ict4vip.nl) for people with visual impairments who use screenreading software. By using your plugin, I can now use the default WordPress theme and sub menus.
It would be nice as this technology is included by default in WordPress.
Sincerely,
Ton van Leest