WordPress Keyboard Accessible Dropdown Menus Plugin Version 0.1
Published: | 10 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.
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
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.
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.
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
How it Works
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.
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.
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'
- WordPress Admin Menu Accessibility Plugin Version 0.1 - Apr 26th, 2012
- Using Headings Properly - Dec 17th, 2009
- Navigation – Where Are You? - Dec 3rd, 2009
10 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