We all love to use Keyboard Shortcuts. There is a proverb that “The more Keyboard Shorcuts you use, the more technical guy You are”. To give users the freedom to use Shortcuts there is an HTML Global Attribute Named “accesskey”. Let’s Explore it.

What is the Accesskey attribute?

It is used for creating keyboard shortcuts mostly used by web designers and software designers to increase a better user experience. Also, we can focus on and target HTML elements with the “accesskey” attribute.

With Which HTML elements we can use this attribute?

We can use it with “Input, area, button, legend, a label, textarea” these elements.

How to use it?

First, we need to create an element like this:

<a href="https://www.w3schools.com/html/default.asp"> Click to read about HTML</a>

Then add accesskey attribute in this anchor tag like this:

<a href="https://www.w3schools.com/html/default.asp" accesskey="m"> Click to read about HTML</a>

Now run this code in your browser. If you click in the link text, you will redirect to the webpage. But you can do this By clicking (Alt+m) in your keyboard and the page will redirect to the desired webpage. We used “m” for this shortcut. You can use any letter for creating your shortcut.

Let’s use access to other HTML elements and see how it works. We begin with the input tag. First, we create a form and add accesskey with an input tag.

<form>
<label>First Name</label> <br />
<input type="text" accesskey="u" /><br />
<label>Last Name</label> <br />
<input type="text" accesskey="l" />
</form>

Now we get two input fields for writing first and last name. We can write by clicking in those fields. But we can click (ALt+u) for navigating to first name input died and (ALt+l) for navigating to last name input field because we used (accesskey=”u”) for the first name and (accesskey=”l”) for the last name.

We can use the same principle for other HTML tags. I showed you the anchor tag and input tag. You need to play with other tags such as textarea, button, and other tags.

Shortcuts for using the Accesskey attribute?

Should we always need to press (Alt+letter) to navigate? NO. It depends on which browser and which operating system you are using. There is a table on which shortcuts to use on which browser. Go to this link to see the Table.

Cons of accesskey

Overlapping shortcuts: Some shortcuts created by you will overlap with browse shortcuts and operating system shortcuts. This can sometimes cause problems.
No defined Convention: Most of the time users don’t know which keystroke combination to use(Alt, Ctrl, Shift, etc..)This creates confusion among users.

Pros of accesskey

Easy to use: It helps “Power Users” to navigate swiftly.
Special users: It is mostly used for people with disabilities, blind, motor disabilities, and people who use screen readers.

Conclusion

You should use this attribute when a task is to be done repetitively. Also, if your webpage has special users you should use this attribute.
Thanks a lot. Keep following me for more articles on web design.

WRITTEN BY
Md Shahab Uddin
Front-End Developer & Tech Writer