Hack 68. Add an Access Bar with Keyboard Shortcuts

Display shortcut keys defined by a page.

An increasing number of sites define keyboard shortcuts, called access keys, for commonly used features. This is an accessibility aid for people who have difficulty using a mouse. For example, a site could define a shortcut to jump to the site's accessibility statement and another one to set focus to the site's search box (or jump to a separate search page). Unfortunately, there is no easy way to know which shortcuts the site has defined! This hack makes the keyboard shortcuts visible.

Learn more about defining keyboard shortcuts at http://diveintoaccessibility.org/15.

8.3.1. The Code

This user script runs on all pages. The code is divided into three parts:

1. Find all elements that define a keyboard shortcut with the accesskey attribute.

2. Loop through each of these elements and find the most logical label for the shortcut.

3. Add CSS styles to the page so the list of keyboard shortcuts appears in a fixed bar along the bottom of the browser window.

Step 2 is the hard part, because different HTML elements can define an accesskey attribute. Form elements like input, textarea, and select can each define an accesskey. The form element might or might not have an associated label that contains a text description of the form field. If so, the label might contain a title attribute that gives even more detailed information about the input field. If not, the label might simply contain text. Or the form field might have no associated label at all, in which case the value attribute of the input element is the best we can do.

On the other hand, the label itself can define the accesskey, instead of the input element the label describes. Again, we'll look for a description in the title attribute of the label element, but fall back to the text of the label if no title attribute is present.

A link can also define an accesskey attribute. If so, the link text is the obvious choice. But if the link has no text (for example, if it contains only an image), then the link's title attribute is the next place to look. If the link contains no text and no title, we fall back to the link's name attribute, and, failing that, the link's id attribute.

Save the following user script as accessbar.user.js:

 // ==UserScript== // @name Access Bar // @namespace http://diveintomark.org/projects/greasemonkey/ // @description show accesskeys defined on page // @include * // ==/UserScript== function addGlobalStyle(css) { var elmHead, elmStyle; elmHead = document.getElementsByTagName('head')[0]; if (!elmHead) { return; } elmStyle = document.createElement('style'); elmStyle.type = 'text/css'; elmStyle.innerHTML = css; elmHead.appendChild(elmStyle); } var snapAccesskeys = document.evaluate( "//*[@accesskey]", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); if (!snapAccesskeys.snapshotLength) { return; } var arDescriptions = new Array( ); for (var i = snapAccesskeys.snapshotLength - 1; i >= 0; i--) { var elm = snapAccesskeys.snapshotItem(i); var sDescription = ''; var elmLabel = document.evaluate("//label[@for='" + elm.id+ "']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; if (elmLabel) { sDescription = label.title; if (!sDescription) { sDescription = label.textContent; } } if (!sDescription) { sDescription = elm.textContent; } if (!sDescription) { sDescription = elm.title; } if (!sDescription) { sDescription = elm.name; } if (!sDescription) { sDescription = elm.id; } if (!sDescription) { sDescription = elm.href; } if (!sDescription) { sDescription = elm.value; } var htmlDescription = '<strong>[' + elm.getAttribute('accesskey').toUpperCase( ) + ']</strong> '; if (elm.href) { htmlDescription += '<a href="' + elm.href + '">' + sDescription + '</a>'; } else { htmlDescription += sDescription; } arDescriptions.push(htmlDescription); } arDescriptions.sort( ); var elmWrapper = document.createElement('div'); elmWrapper.id = 'accessbar-div-0'; var html = '<div><ul><li >' + arDescriptions[0] + '</li>'; for (var i = 1; i < arDescriptions.length; i++) { html += '<li>' + arDescriptions[i] + '</li>'; } html += '</ul></div>'; elmWrapper.innerHTML = html; document.body.style.paddingBottom = "4em"; window.addEventListener( "load", function( ) { document.body.appendChild(elmWrapper); }, true); addGlobalStyle( '#accessbar-div-0 {'+ ' position: fixed;' + ' left: 0;' + ' right: 0;' + ' bottom: 0;' + ' top: auto;' + ' border-top: 1px solid silver;' + ' background: black;' + ' color: white;' + ' margin: 1em 0 0 0;' + ' padding: 5px 0 0.4em 0;' + ' width: 100%;' + ' font-family: Verdana, sans-serif;' + ' font-size: small;' + ' line-height: 160%;' + '}' + '#accessbar-div-0 a,' + '#accessbar-div-0 li,' + '#accessbar-div-0 span,' + '#accessbar-div-0 strong {' + ' background-color: transparent;' + ' color: white;' + '}' + '#accessbar-div-0 div {' + ' margin: 0 1em 0 1em;' + '}' + '#accessbar-div-0 div ul {' + ' margin-left: 0;' + ' margin-bottom: 5px;' + ' padding-left: 0;' + ' display: inline;' + '}' + '#accessbar-div-0 div ul li {' + ' margin-left: 0;' + ' padding: 3px 15px;' + ' border-left: 1px solid silver;' + ' list-style: none;' + ' display: inline;' + '}' + '#accessbar-div-0 div ul li.first {' + ' border-left: none;' + ' padding-left: 0;' + '}'); 

8.3.2. Running the Hack

After installing the user script (Tools Install This User Script), go to http://diveintomark.org. At the bottom of the browser window, you will see a black bar displaying the keyboard shortcuts defined on the page, as shown in Figure 8-2.

Figure 8-2. Keyboard shortcuts defined on diveintomark.org

How you actually use the defined keyboard shortcuts varies by platform. On Windows and Linux, you press Alt along with the defined key. On Mac OS X, you press Command and the key. On http://www.diveintomark.org, you can press Alt-0 to jump to the site's accessibility statement, as shown in Figure 8-3.

Figure 8-3. The accessibility statement for http://www.diveintomark.org

Pressing Alt-1 jumps back to the home page, and Alt-4 sets focus to the search box on the right side of the page.