WordPress.org

Ready to get started?Download WordPress

Forums

How to add access keys to wp_nav_menu (8 posts)

  1. David Hunt
    Member
    Posted 1 year ago #

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

  2. hauxton68
    Member
    Posted 10 months ago #

    Thank you so much for this - works a treat.

    One thing I added that others may be interested in is the skip to content access key.

    Just need to add conventional html access key into the screen reader link in the theme before the menu call.

    ie

    <a class="screen-reader-text skip-link" href="#content" accesskey="s" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>

  3. esmi
    Forum Moderator
    Posted 10 months ago #

    No! Please do not use alphabetic accesskeys. This actually creates accessibility barriers by over-riding shortcuts in the user's own assistive technology software. All accesskeys are actually banned in WPORG themes.

  4. hauxton68
    Member
    Posted 10 months ago #

    Thanks for letting me know.

    I think access key S is standard for skip to content however so what is the recommended way to handle this in a WPORG theme?

    If access keys are banned - how is this handled? Is it simply up to the screen reader?

    Thanks for your insight.

  5. hauxton68
    Member
    Posted 10 months ago #

    just found this from RNIB in the UK ...

    http://www.rnib.org.uk/professionals/webaccessibility/designbuild/navigation/Pages/access_tabs.aspx

    pretty much says don't use them - strange as I was taught in college to always use them for accessibility plus major disability charities like scope in the UK use them ....

  6. esmi
    Forum Moderator
    Posted 10 months ago #

    I think access key S is standard for skip to content

    No - it isn't. Not any longer. No alphabetic keys should be ever used. In fact accesskeys are bad news full stop. I was once part of a mini-project that looked at accesskey conflicts across multiple types of AT software and multiple languages/keyboards. We concluded that there were only 2 keys that you could use with impunity. Something like Ð and ¬ (but don't quote me on the exact keys - it was a while ago).

    how is this handled?

    Screen reader users, generally speaking, do not use accesskeys at all. They have other tools in their software that provide shortcuts - including generated lists of all links on a page. Provide solid, semantic, markup and they'll be fine.

    A small minority of sighted keyboard users (VR users etc) might use accesskeys if they are available but the issue the is revealing which key combination does what to the user. And the key combinations will vary across browser and OS. So best accessible design practice is to not use them at all as they can only offer limited benefits to a minority of disabled visitors whilst creating severe barriers for other disabled users.

    Accesskeys were a good initiative about 10-15 years ago but without a clear code of usage alongside sympathetic browser & AT software support plus keyboards with a lot more keys, they should be filed under "Nice idea - shame about the lousy implementation". :-)

  7. hauxton68
    Member
    Posted 10 months ago #

    Thanks Esmi for the comprehensive reply and sharing of the knowledge - I think theres a lot of confusion out there!

  8. David Hunt
    Member
    Posted 10 months ago #

    It's been a year since I posted that code, and I have learned a lot about accessibility since then!

    I also want to thank Esmi for taking the time to make this an informative thread.

Topic Closed

This topic has been closed to new replies.

About this Topic