The tabindex Attribute — HTML Technical Interview Questions & Answers

Controlling keyboard focus order.

The tabindex Attribute

  • Controlling keyboard focus order.
  • The tabindex Attribute is an HTML attribute — extra info on the opening tag. Example: class, id, href, src, alt, for, type. <p class="fail">Fail</p>
  • id is unique on the page. class can repeat. Don’t use the same id twice. Prefer class for CSS.
  • Trap: styling with id for everything. Trap: inline style when a class would do.

Technical Interview Tip: The tabindex Attribute: show it on a tag. id vs class if relevant.

Code Examples for The tabindex Attribute

The tabindex Attribute — working example

<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/prep">Prep</a>
</nav>

<button type="button" aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/html">HTML</a></li>
</ul>

<label for="q">Search</label>
<input id="q" name="q" type="search" aria-describedby="q-hint" />
<p id="q-hint">Press Enter to search topics.</p>

The tabindex Attribute — name landmarks, associate labels, and expose state with ARIA only when native HTML is not enough.

How to Explain The tabindex Attribute to an Interviewer

What is The tabindex Attribute?

An HTML attribute Goes on the opening tag