htmlnavigation

Skipping links in a form with keyboard navigation


Basically I have a form with a LOT of links to other pages in it, mostly to explain some questions or show information on said questions. The problem is the form is now a complete mess to navigate with the keyboard if you just want to fill it because of all these links, which most people will either not, or very rarely click.

I'm limited in modifying the layout as it is a current Excel form I have to adapt to a web app while keeping the same layout.

Is there any easy way to make TAB navigation skip the links? Via an attribute I'm not aware of maybe?

Quick example, being focused on Input A and pressing tab would bring me directly to input B, skipping links 1 and 2:

<form>
  <input A />
  <a 1></a>
  <a 2></a>
  <input B />
</form>

Solution

  • A tabindex="-1" value removes the element from the default navigation flow (i.e., a user cannot tab to it).

    <input type="text">
    <a href="#" tabindex="-1"></a>
    <a href="#" tabindex="-1"></a>
    <input type="text">
    

    or

    <input type="text" tabindex="1">
    <a href="#">1</a>
    <a href="#">1</a>
    <input type="text" tabindex="2">
    

    See: MDN documentation for tabindex