WordPress Keyboard Accessible Dropdown Menus Plugin Version 0.1
Published: | 10 Comments
Reading Time: 3 minutesThis 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'
- WordPress Admin Menu Accessibility Plugin Version 0.1 - Apr 26th, 2012
- Using Headings Properly - Dec 17th, 2009
- Navigation – Where Are You? - Dec 3rd, 2009
Share this page (Links open new windows/tabs)
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
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
[…] WordPress Keyboard Accessible Dropdown Menus Plugin Graham’s own plugin to help make dropdown menus work without a mouse. […]
Thanks a lot for your job.
I try it at http://www.acessibilidades.pt with a template based on a child theme of twentyten and works well. I made some modifies:
1) I put the css properties at the child’s theme folder that is twentyten-child;
2) I tried to put the javascript reference at the head of the page (for accessible reasons I don’t like javascript references at the body of pages), but when I do this, the script goes right to the head but don’t run (!). Why?
The cc-accessible-dropdown-menus.php is now like that:
<?php
/*
Plugin Name: ccAccessibleDropdownMenus
Plugin URI: http://www.coolfields.co.uk
Description: Makes dropdown menus in default WordPress theme keyboard accessible
Version: 0.1
Author: Graham Armfield
Author URI: http://www.coolfields.co.uk
*/
function writeScriptFile() {
$path = WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__));
echo '’;
}
add_action(‘wp_footer’, ‘writeScriptFile’);
/* wp_head */
?>
Thanks for your comment Jorge.
I think the reason it won’t run properly if you place the javascript in the header is that the functionality runs straight away which is before your menu exists within the HTML. So the necessary triggers for the menu will not get added.
I placed the javscript within the footer deliberately so as not to slow down the loading of the page, but also to ensure the javascript was run as soon as possible. I’m not aware of any accessibility reasons for not putting scripts into the end of the page, but if you could explain the issues then I would be very interested.
Graham
For some reason the sub-menus all appeared all at once when the page is loaded. I fixed this by adding !important to the followings:
#access ul ul {
display: block !important;
margin-left:-9999px !important;
}
#access ul li.hover > ul,
#access ul a:focus+ul {
margin-left:0 !important;
}
Thank you for your hard work 🙂
[…] The original version of this plugin was built by Graham Armfield. It is still available at http://www.coolfields.co.uk/2011/12/wordpress-keyboard-accessible-dropdown-menus-plugin-version-0-1/ […]
Using Divi Theme and WP ver 4.6.1 will your plugin work or do you know of another menu plugin that is accessible?
Hi Renea, the Dropdown Menu Plugin is quite old now and I’m not sure it’s compatible with more modern themes. I don’t have access to the Divi theme as it doesn’t seem to be on the WordPress Repository.
Dropdown menus have been more keyboard accessible in WordPress themes over the last few years. The default WordPress themes have had keyboard accessible menus since Twenty-fourteen I believe. Because of that I haven’t reworked the plugin, and I’m afraid I don’t know of any other plugins that do the same.
If the Divi menus aren’t keyboard accessible, have you approached the theme authors/vendors to ask them is they have planes to make the menus accessible?
Hi Graham: It appears the theme is not keyboard accessible, and I don’t any information in their support forum indicating they are working on making their themes accessible, very disappointing.