You are here:
- Manual
- Development
- Links and navigation
- Tabbing between links
Links and navigation: Tabbing between links
Some web visitors with a mobility impairment have great difficulty using a mouse. Therefore they must rely on the use of a keyboard or another device that enables them to ‘skip’ from one link to another. In many modern browsers the tab key can be used for this. That is why this may be called ‘tabbing’.
In principle, web developers do not have to do anything special to enable tabbing; as a rule all links in a web document, from the first to the last, can be accessed using the tab button. However, web developers often do not consider putting these links in a logical order. Sometimes web developers even try to proactively stop people from tabbing between links, in view of unwanted visual effects.
When someone activates a link by mean of a mouse click or the tab key, this link is focused. In graphic browsers, this is often indicated by a coloured or dotted rectangle around the link (‘focus rectangle’). Some web developers are not aware of the benefit of this visual hint, which is of vital importance to some visitors. They find it annoying and want to remove it by means of client-side scripts or CSS.
“Create a logical tab order through links, form controls, and objects.”
Provide a logical order for the links on the page. Use the tabindex attribute to deviate from the standard tab order of links if this order is inadequate for correct use of the page by keyboard users.
Guideline R-pd.8.9
Do not make it impossible to tab to links. Do not remove the focus rectangle surrounding a link or the possibility of focusing on a link.
Guideline R-pd.8.10
Using the tabindex attribute.
The tabindex attribute offers web developers the option of suggesting a different order for visitors using the keyboard. In a standard way, links that occur towards the top of the source code of the web document will occur first in the order of links. Links further down in the document, such as main navigation, can be made to occur earlier by means of the tabindex attribute.
Example of use of the tabindex attribute (HTML)
<a tabindex="10" ...>
The tabindex attribute can be assigned a value between 1 and 32768, but this value may not be negative. If this attribute is used, it is practical to do this in increasing decades (10, 20, 30, 40); the web developer can then insert new links at any time without having to change all the tabindex attributes on the page.
Please note: not every link on the page needs to have a tabindex attribute. Try to minimise the use of this attribute. Instead, rely on the natural order of the links as much as possible.
