WordPress Keyboard Accessible Dropdown Menus Plugin Version 0.1

Published: | 6 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

A dropdown menu in a default WordPress themeOne 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

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'

Share this page (Links open new windows/tabs)

  • Share this page on LinkedIn (opens new window)
  • Share this page on Delicious (opens new window)
  • Share this page on Digg (opens new window)
  • Share this page on Posterous (opens new window)
  • Share this page on Reddit (opens new window)

6 Responses to “WordPress Keyboard Accessible Dropdown Menus Plugin Version 0.1”

  1. From: charlies on December 2nd, 2011 at 3:11 pm

    Keyboard Accessible Dropdown Menus Plugin is a very useful plugin ,I like it ,thank you for sharing

  2. From: Ton van Leest on February 8th, 2012 at 4:49 pm

    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

  3. From: WordPress Meetup 1st March 2012 « 2020Media.com Blog on March 2nd, 2012 at 12:40 pm

    [...] WordPress Keyboard Accessible Dropdown Menus Plugin Graham’s own plugin to help make dropdown menus work without a mouse. [...]

  4. From: Jorge Fernandes on March 2nd, 2013 at 11:45 pm

    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 */
    ?>

  5. From: Graham Armfield on March 5th, 2013 at 2:07 pm

    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

  6. From: Pat on February 10th, 2014 at 9:41 pm

    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 :)

Like to leave a comment?

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





Previous post:

Next post: