Keyboard Navigation Help extension

Version 1.12

The Keyboard Navigation Help extension provides compact instructions to help your visitors navigate the menus with the keyboard.

View the demo to see it in action. Press the keyboard navigation hotkey and a layer will popup with instructions on how to navigate. It will then set a cookie so that doesn't happen every time.


Download the Keyboard Navigation Help script, copy it into your udm-resources folder, and add the script include to the body section:

<!-- keyboard navigation help extension -->
<script type="text/javascript"

Then to style the popup help layer you need CSS like this:

/* necessary help layer styles */
#udmKeyHelp {
	/* z-index should be (um.orientation[6] + 21000) */ 

/* customisable help layer styles */
#udmKeyHelp {
	padding:0.5em 0.8em;
	border-color:#bdb #080 #080 #bdb;

Most of the styling is optional - the bare minimum is indicated by putting it in a separate rule. Obviously I wouldn't recommend you use a transparent background, but otherwise it's up to you - I went for a color scheme that matches the default menus.

The hotkey icon is a dynamically-generated <kbd> element:

/* customisable key button styles */
#udm kbd {
	border-color:#eec #cb7 #cb7 #eec;
	padding:0 0.2em;

I went for simple styling to make it look like a button - if it looks like a button then it should inspire people to press it, and that's when they'll see the instructions :) It has no background so that it merges into the link behind it, while the font and color is inherited from its parent.

I've used absolute-right positioning, which is appropriate in this case because there's plenty of space in the link. But if the first link is already full with text, or crucially if you're using a horizontal navbar (where the width of cells is "auto"), then absolute positionining is not appropriate - you should use relative or static positioning, and margins to tweak it into place.


There are two parameters in the script, which set the text of the popup message, and whether the hotkey icon should be permanent or not:

var helpText = ''
             + 'The "<hotkey>" key sends focus to the navigation bar. '
             + 'You can move around the menus with the Arrow Keys,  '
             + 'activate a link by pressing "Enter", '
             + 'or jump back onto the page with "<hotkey>" again. '
             + '';
var permanentIcon = 'yes';

The helpText is a single string which can say anything you want - but do not change where it says "<hotkey>" - this is replaced by the script to reflect what the hotkey actually is. Furthermore you cannot use entities or HTML inside the string - only plain text.

The permanentIcon icon variable defines whether the icon should always be present ("yes") or disappear after the first time of seeing the help layer ("no").


You must be using the keyboard navigation module.

Implementation notes

The script sets a cookie so that your visitors aren't irritated by the instructions popping up every time. The cookie stores 14 bytes of data, and it expires after one month, on the rationale that if it's been a month since a person's last visit then they've probably forgotten what the key assignments are by now.

The <kbd> element is always inserted into the very first link in your navbar, so it's possibly better to avoid having a menu for that link - the help layer will still show above it, but it may look strange, confusing perhaps.

Acessibility notes

Since the script uses a cookie, obviously if cookies are not supported then it won't know the instructions have been seen already - they'll popup every time. It's either that, or don't appear at all, and I took the view that always is better than never.

But visitors may still want to be reminded of the keystrokes, even if they've seen the instructions already. You might also be offering a hotkey preferences form, so users can change the "F12" key to something else, and it would be impractical to put that inside the popup help layer as well.

So make sure you still have instructions somewhere else, such as on your accessibility information page, and put the preferences form there as well.


We would like your feedback! Take the UDM4 Survey!

UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.