Keyboard Shortcuts and Tab Order - HTML

In the modern world of computers it is easy to make assumptions about users, their hardware, and capabilities. Several years ago, no one would have dreamt of delivering rich, multimedia content over the Web. Today, however, it is easy to assume that everyone is using the latest browser, on a high-end computer, across a broadband connection. However, that isn’t always the case. In fact, some users who visit your site may not even have a mouse to aid in browsing. The reason could be a physical handicap, a text-only browser, or just a fondness for using the keyboard. It is important to accommodate these users by adding additional methods to access links on your page.

Keyboard shortcuts

Each link can be assigned a shortcut key for easy keyboard-only access using the accesskey attribute with the anchor tab. The accesskey attribute takes one letter as its value, the letter that can be used to access the link. For example, the following link defines “C” as the access key:

Note that different browsers and different operating systems handle access keys differently. Some browser and operating system combinations require special keys to be pressed with the defined access key. For example, Windows users on Internet Explorer need to hold the Alt key while they press the access key. Note, also, that different browsers handle the actual access of the link differently—some browsers will activate the link as soon as the access key is pressed, while others only select the link, requiring another key to be pressed to actually activate the link.

Tip: Keyboard shortcuts won’t help your users if you don’t give them a clue as to what the shortcut is. In the example earlier in this section, the defined shortcut key (“C”) was used in the link text and highlighted using the bold font attribute.

Tab order

It will also help your users if you define a tab order for the links in your document. As with most graphical operating systems, the tab key can be used to move through elements of the interface, including links. Typically, the default tab order is the same as the order that the links appear in the document. However, upon occasion, you might wish to change the order using the tabindex attribute. The tabindex attribute takes an integer as its value; that integer is used to define the tab sequence in the document. For example, the following document switches the tab order of the second and third links:

Note:As with most interface elements in HTML, the browser defines how tabindex is implemented and how tabbed elements are accessed.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics