Musings

More on Accesskeys

In my previous post, I argued that accesskey keyboard shortcuts, to be usable, need to be

1. discoverable
2. modifiable

and I suggested some techniques for achieving that. To make them discoverable, I suggested including on each page, in some artful way, a definition-list of the form

<dl id="AccessKeyList">
<dt>0</dt><dd><a href="/~distler/blog/accessibility.html" accesskey="0">Accessibility Statement</a></dd>
<dt>1</dt><dd>Main Page</dd>
<dt>2</dt><dd>Skip to Content</dd>
<dt>3</dt><dd>List of Posts</dd>
<dt>4</dt><dd>Search</dd>
<dt>p</dt><dd>Previous (individual/monthly archive page)</dd>
<dt>n</dt><dd>Next (individual/monthly archive page)</dd>
</dl>

with the accesskeys for your site. To make them modifiable, I proposed a Javascript, which turns that definition-list into a template for editing the keybindings, and stores your modified keybindings for future visits.

But what about all those millions of sites, with accesskeys defined, which haven’t gone to this trouble? Since Gez Lemon inspired me to write the above Javascript, it was my turn to inspire Gez. Firefox users can install this Greasemonkey script which provides an (admittedly slightly crude) approximation to the same functionality on any site with accesskeys.

Without an author-supplied definition-list, Gez’s script needs to guess at the meaning of each accesskey. Usually, that works passably well. But, on some sites, the result can be downright comical. Obviously, it would be better if website authors went to the trouble of providing the aforementioned definition list. And with the aforementioned Javascript, all their users (not just those with Firefox and Greasemonkey installed) could customize those keybindings.

But still, it’s remarkable that, with a little clever scripting, Firefox users can now customize the keybindings for the accesskeys on any website. I’d call that progress.

(Update: The latest version of my Javascript restores compatibility with Gez’s Greasemonkey script.)

Looking into the (distant) future, XHTML 2 will offer a self-documenting reformulation of accesskeys. Instead of

<a accesskey="0" href="/accessibility.html" />

XHTML 2 authors will use the self-documenting <access> element. They’ll write

<access key="0"
  title="Accessibility Statement"
  targetrole="foo:accessibility" />

followed by

<a role="foo:accessibility" href="/accessibility.html" />

The WAI offer their own set of 8 predefined roles. Other roles need to be defined in their own namespace

xmlns:foo="http://mysite.com/roles/foo"

which points to an RDF Schema defining the role(s). Alternatively, there’s a

<access key="c"
  title="Post a Comment"
  targetid="comment" />

for those instances when a custom-defined role seems like overkill.

The definition-list we’ve been talking about here is a crude stand-in for the collection of <access> elements in an XHTML 2 document. With that substitution, the same techniques for customizing keybindings will work in XHTML 2. Hopefully, that capability will be built into XHTML 2 User Agents, rather than being an afterthought, as with today’s accesskey attribute.

1. You can toggle the Accesskey menu by hitting Shift -Esc (to reclaim some screen real-estate, and avoid obscuring the bottom of the page).
2. The CSS styling is now rolled into the script, rather than loaded from Gez’s site.

For obvious reasons, if you’ve installed the previous version, you want to update. My Javascript has also been updated to detect the presence of Gez’s script and ensure that they play nicely together.