How do I attach an access key to a HTML element

Solution 1:

You can do that with the help of Javascript but you really shouldn't as the accesskeys natively available require a modifier for very good reasons.

Please note that this effectively disallows to use the keys assigned to accesskeys to be used for anything other than accessing those elements (e.g. you can no longer type those letters in an input), which is why this is not an acceptable solution.

I'm just showing it to demonstrate the general technical approach.

document.addEventListener('keypress', function(event) {
  const target = document.querySelector(`[data-accesskey=${event.key.toLowerCase()}]`);
  if (target) {
    target.focus();
    event.preventDefault();
  }
})

<input type="text" data-accesskey="n" placeholder="Press n to focus this field" />
<button type="button" data-accesskey="p">Press p to focus this button</button>

How do I attach an access key to a HTML element

Solution 1:

Related

Recent Posts