Focusable elements in HTML

In HTML, elements like <input> are focusable because they’re part of the tab index. The user can press the TAB key to cycle focus over the elements.

Anchors are also focusable. This example has a link (marked link), which focusses on an anchor (marked focusable anchor]) when clicked:

<a href="#focusable-1">link</a>
<a href="#" id="focusable-1">focusable anchor</a>

If the link is clicked, the focusable anchor is focussed on, showing a bounding box in most browsers.¹

However, anchors are not part of the tab index, so pressing the TAB key does not cycle over them. That’s convenient for pages where anchors are linked to from within the page, like for footnotes.

To make any element focusable, add it to the tab index:

<a href="#focusable-2">link</a>
<span id="focusable-2" tabindex="2">focusable span</span>

The example above produces a link that focusses on the focusable span:

To make any element focusable, but without adding it to the tab list, use a negative tabindex:

<a href="#focusable-3">link</a>
<span id="focusable-3" tabindex="-1">another focusable span</span>

This example produces the same result as above, but pressing the TAB key doesn’t cycle over the focusable span element:

1. In Firefox (113.0.1), clicking the link does not render a blue bounding box. It does when the page is reloaded, however.

   ↩︎