Keyboard Shortcuts in HTML
While going through my blog the other day, I realised how tedious it was to navigate post-by-post. I had to scroll down to the bottom and click the "Previous Post" link. Wouldn't it be better if I could just press a keyboard button?
HTML has a global attribute called accesskey
which can be applied to any element to interact with it. The value must be a letter and the modifiers are OS and browser specific. So accesskey="p"
on Firefox on Linux will trigger on ALT+SHIFT+P
. This is to avoid any other keyboard shortcuts that might be in play.
The downside to keyboard shortcuts is that it might conflict with other user-level keyboard shortcuts. That's common and usually applications allow you to modify shortcuts to avoid this. However, accesskey
doesn't have a built in way of doing so as it's a mix of page-level and application-level choices, and most browsers don't have a visible way to just disable accesskey
entirely. The only real solution right now is to use JavaScript, which I want to avoid. For now, I'm leaving them enabled as it benefits me. If I get any valid complaints I'll look into it again.
I've set accesskeys for my main navigation and page navigation.
- Home:
h
- Blog:
b
- Projects:
i
(I couldn't think of a neat one sincep
is taken) - Search:
s
- Donate:
d
- About:
a
- Next:
n
- Previous:
p
Thanks for reading.