• content
• navigation
• access
• search

---

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.

• Installation
• Configuration
• Dependencies
• Implementation notes
• Accessibility notes

Installation

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

• Skip code example

<!-- keyboard navigation help extension -->
<script type="text/javascript"
	src="/udm-resources/udm-x-keyhelp.js"></script>

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

• Skip code example

/* necessary help layer styles */
#udmKeyHelp {
	
	/* z-index should be (um.orientation[6] + 21000) */ 
	z-index:22000;
			
	position:absolute;
	height:auto;
	left:0;
	top:0;
	}

/* customisable help layer styles */
#udmKeyHelp {
	width:16em;
	margin-left:0.7em;
	margin-top:-0.1em;
	padding:0.5em 0.8em;
	border-width:1px;
	border-style:solid;
	border-color:#bdb #080 #080 #bdb;
	color:#050;
	background-color:#f8fbd0;
	font-family:verdana,sans-serif;
	font-size:70%;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#bbddbb,direction=135,strength=2);
	}

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:

• Skip code example

/* customisable key button styles */
#udm kbd {
	font-weight:normal;
	font-size:80%;
	letter-spacing:0.01em;
	position:absolute;
	right:6px;
	top:5px;
	border-width:1px;
	border-style:solid;
	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.

Configuration

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:

• Skip code example

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

Dependencies

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.

• ← More extensions

Search