June 26, 2018

While working on improving accessibility features of an application I learned about an HTML feature that I was not aware of before: the accesskey attribute.

The attribute allows you to add keyboard shortcuts to an element.

In order to assign a keyboard shortcut you add the accesskey attribute to an element and assign it a letter. For instance the letter “a”, like this:

<div accesskey="a"> ... </div>

This automatically binds a shortcut to the element that either focuses it or triggers a click event.

The actual shortcut varies between browsers and platforms but in general in modern browsers it is alt + a for Windows and Linux and alt + ctrl + a on the Mac and alt + shift + a on Windows and Linux on Firefox.