jahed.dev

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.

Thanks for reading.