Quick keys for links

Using the accesskey attribute, keyboard shortcuts can be defined to access the links directly by pressing ALT and a key that we indicate in the attribute.

Hotkeys are keyboard shortcuts to perform various actions in a more direct way. They are implemented in all programs in general and serve to improve user comfort and speed of software use, as well as increase the accessibility of programs, since it is not necessary to use the mouse to execute various actions.

On a web page we can also use quick keys to access certain links or form fields. There is an attribute called accesskey that is used to indicate the fast key or keyboard shortcut that we will associate with the element.

For example, in a link we can define a hotkey like this:

Estiloymoda.com

As you can see, we have simply indicated “e” as the hot key for the link that would take us to the estiloymoda.com page. To launch a hotkey we have to combine its pressing with the ALT (alternative) key.

In practice, the hotkey will simply take the focus of the application to the link, so it doesn’t execute it. For the browser to change the page and move towards the link, we should then press the ENTER key.

Browser support is increasing for hotkeys. It is now possible to use them in all the most common ones, such as Firefox, Internet Explorer or Opera. (It is available from Internet Explorer 4.0, with certain restrictions and from Netscape 6). However, the W3C recommends the use of accesskey, so it is normal for all browsers to incorporate them.

See also  Word-wrap and overflow-wrap in CSS 3

As a recommendation, we should somehow signal that a hotkey exists for a link, possibly by bolding the letter that implements the hotkey in the link, or by underlining it. This last case (the underline) is more intuitive in my opinion, but since the links are already underlined, we should do something to remove it so that the hotkey underline is visible. Let’s see how this can be done with an example:





Hotkeys for links




Let’s make hotkey links

Estiloymoda.com

Desarrolloweb.com

Guiarte.com




As we can see, use has been made of the style sheets to remove the underlining from the links. Then we use the tag to underline the letter that has the hotkey or keyboard shortcut. It doesn’t have any complications.

Can

Loading Facebook Comments ...
Loading Disqus Comments ...