By using the accesskey attribute, we can specify a shortcut key for the user to activate or focus on an element. The value of the attribute has to be a single character.
It's worth noting that each browser provides a different combination of keys to access the shortcut.
| Browser | macOS | Windows | Linux |
|---|---|---|---|
| Chrome | alt + ctrl + key | alt + key | alt + key |
| Firefox | alt + ctrl + key | alt + shift + key | alt + shift + key |
| Safari | alt + ctrl + key | n/a | n/a |
In the following sample code, pressing the combination alt + ctrl + e on Chrome macOS will trigger the button's click event.
<button accesskey="e" onclick="alert('Edit')">Edit</button>