Setting tab order for links

To help users who cannot use mouse, the tabindex attribute can be added to the anchor tag to use specific tab order of links. When you customize the order of links, browsers generally highlight each link, from top to bottom of the web page, each time the tab key is pressed. Once a link is selected and highlighted, the user can press ENTER or RETURN key to visit the selected page. The following shows a link selected with a TAB key:

Rectangle indicating the link selected using the TAB key

The following code shows how to customize the tab order with tabindex:

Customizing the tab order with tabindex

In the top example, we set tab order for our three links as follows:

- First, Yahoo! because it has the tabindex value set to 1
- Second, Google because it has the tabindex value set to 2
- By assigning a negative value to tabindex, we are excluding MSN link from the tab order

The following shows the output of the code; notice if you use the tab key, the link Yahoo! will be highlighted first, Google second, and MSN link is highlighted after all other links above this link, from top to bottom of this page, are highlighted: