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.
This user script runs on all pages. The code is divided into three parts:
Find all elements that define a keyboard shortcut with the
Loop through each of these elements and find the most logical label for the shortcut.
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 ...