How to add access keys to wp_nav_menu

I’m not sure if this is the right place for this, but I thought I’d share the relatively painless way I came up with to add access key attributes to the output of wp_nav_menu(), for improved website accessibility.

The basic concept is:

• Use the XFN attribute to define the access key for each desired menu item (so this assumes the XFN field is unused)
• Use a custom walker to grab the XFN value and assign it to the accesskey attribute.

So in your functions.php you need a nearly-identical version of the standard nav menu walker:

class My_Walker extends Walker_Nav_Menu {
	function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' . $item->ID;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
		$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

		$output .= $indent . '<li' . $id . $value . $class_names .'>';

		$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
		$attributes .= ! empty( $item->xfn )        ? ' accesskey="'    . esc_attr( $item->xfn        ) .'"' : '';
		$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

The only difference is that instead of rel we have accesskey.

Then to use the custom walker with wp_nav_menu(), you need to do as follows:

$walker = new My_Walker;
wp_nav_menu( array( 'walker' => $walker ) );

(You can, of course, add whatever other arguments you want to the array.)

Now in the Appearance Menus Screen, make sure the XFN attribute is visible by checking the box in Screen Options. Then for whatever menu items you want to have an access key, just add the key value to the XFN field.

While there are no agreed standards for access keys, the UK Government suggests the following:

• S – Skip navigation
• 1 – Home page
• 2 – What’s new
• 3 – Site map
• 4 – Search
• 5 – Frequently Asked Questions (FAQ)
• 6 – Help
• 7 – Complaints procedure
• 8 – Terms and conditions
• 9 – Feedback form
• 0 – Access key details

Further reading:

• Wikipedia page describes how to use access keys in various browsers.

I’d be keen to hear if anyone has any suggestions of how to improve on this. (Being able to add a genuine accesskey field to the Appearance Menus, rather than hijacking the XFN field, would be good.)