Annoying access keys on web pages

Reading Time: 2 minutes

5463604427_8e7998ddcc_b
HTML access keys were introduced to improve web accessibility and
they still seem to serve that purpose. Wikipedia defines them
as “In a web browser, an access key or accesskey allows a computer user to
immediately jump to a specific part of a web page via the keyboard.”
If you
view hover over the link, it should show up in tooltip; for a wikipedia page,
for instance, the ‘view history’ is mapped to ‘alt-shift-h’ by default. In HTML
source, you can see them as accesskey attribute.

Having said that, they can be really annoying many a time. This is true
primarily when you have bound that access key to a mapping in the browser or in
a plugin or even to a global binding (say, with xbindkeys). What makes it even
more worse is that on almost every site it is impossible to disable them.

I use Pentadactyl and have a couple of key bindings for
various purposes. On pages like wordpress edit page, Jira issues page or a
wikipedia page, these access keys make my life hard.

One specific key to note, from recent experience is Ctrl-i. I use it to invoke
external editor on forms. It is bound to italic function in wordpress text editor,
so Ctrl-i fails.

Now, I didn’t want to change my dactyl bindings for this. To fix this, I reused
another method I normally use to remove annoying junk from web pages (or many
a time to remove content I don’t want to see normally). Pentadactyl allows
one to specify custom stylesheets with "style -name..." command. More on that
here.

Following is an example I use for imdb:

What makes this solution good is that I can easily toggle styles without
reloading with something akin to "styletoggle -group style -name custom" where
custom is the name I gave for style. I have mapped that command to A-s
(Alt-s) key.

So, I think you can guess the solution probably now. I use similar CSS to hide
the elements which have the accesskey attribute. If and when I want them I can
easily toggle them back.

For my wordpress blog I have:

@-moz-document domain(blog.wnohang.net) {
   #ed_toolbar input { display: none !important; }
}

This allows me to write blog posts by invoking external editor without being
interrupted by the access key. Note that, there may be an easier way to do this
(I am not a CSS/HTML person!), but this is what I use since I tend to use custom
stylesheeets for many sites.

There is another solution for this, it is to use a greasemonkey script. You can
check out an example here. But I don’t use greasemonkey
and I don’t want to install another addon just for this (Firefox doesn’t scale
with addons!).

Photo Credit