`Atributul tabindex` în HTML

Controlează dacă un element poate primi focus din tastatură și dacă intră în ordinea de navigare cu tasta Tab.

Sintaxă tag

<div tabindex="0">Poate primi focus</div>
<div tabindex="-1">Focus doar din JavaScript</div>

Ce face `Atributul tabindex`

Linkurile, butoanele și câmpurile de formular primesc focus în mod natural când apeși Tab. Atributul tabindex schimbă acest comportament pentru orice element.

tabindex="0" adaugă elementul în ordinea normală de Tab, în poziția lui din cod. tabindex="-1" îl face focusabil doar prin JavaScript (element.focus()), fără să apară în parcurgerea cu Tab; e util pentru titluri sau mesaje de eroare la care muți focusul. Valorile pozitive (1, 2, 3…) forțează o ordine proprie, care trece înaintea tuturor celorlalte elemente.

Un <div> cu tabindex="0" primește focus, dar nu devine buton: nu reacționează la Enter sau Spațiu și nu este anunțat ca buton. Pentru acțiuni folosește direct <button>.

Atribute

Atribut	Descriere
`0`	Elementul intră în ordinea de Tab, după poziția din cod.
`-1`	Elementul poate primi focus doar prin script sau clic, nu prin Tab.
`1, 2, 3...`	Ordine explicită, înaintea elementelor cu 0. Nerecomandată.

Exemple

Exemplul 1: Mutarea focusului pe sumarul erorilor

Sumarul are tabindex="-1": nu încurcă navigarea cu Tab, dar scriptul poate muta focusul pe el ca să fie citit imediat.

<div id="erori" tabindex="-1" hidden>
  <h2>Formularul are 2 erori</h2>
  <p>Completează telefonul și localitatea.</p>
</div>

<script>
  const erori = document.getElementById("erori");
  erori.hidden = false;
  erori.focus();
</script>

Ce afișează browserul

Formularul are 2 erori
Completează telefonul și localitatea.
(blocul primește focus, iar cititorul de ecran îl citește imediat)

Exemplul 2: Zonă derulabilă accesibilă din tastatură

Un container cu bară de derulare primește tabindex="0", ca utilizatorii de tastatură să-l poată derula cu săgețile.

<div tabindex="0" style="height: 80px; overflow: auto; border: 1px solid #ccc;"
     role="region" aria-label="Termeni și condiții">
  <p>1. Comanda se confirmă prin e-mail.</p>
  <p>2. Livrarea în Iași durează 1–2 zile.</p>
  <p>3. Returul este gratuit în 14 zile.</p>
</div>