tabindex

Za pomocą atrybutu tabindex możemy określić kolejność, jaką powinien posiadać interesujący nas element HTML podczas procesu nawigacji za pośrednictwem klawisza TAB.

Domyślnie w procesie nawigacji za pośrednictwem klawisza TAB biorą udział wyłącznie następujące elementy HTML:

• element a posiadający atrybut href
• element area posiadający atrybut href
• element audio posiadający atrybut controls
• element button
• element iframe
• element input, który nie posiada atrybutu type o wartości hidden
• element object, lecz tylko wtedy gdy dany element object jest zagnieżdżonym kontekstem przeglądarki internetowej
• element select
• element textarea
• element video posiadający atrybut controls
• element HTML, którego wartością atrybutu contenteditable jest wartość true, lecz tylko wtedy gdy dany element HTML reaguje na atrybut contenteditable

Wartość domyślna

brak wartości domyślnej

liczba dodatnia

Wartość w postaci dodatniej liczby całkowitej oznacza kolejność, jaką powinien posiadać dany element HTML podczas procesu nawigacji za pośrednictwem klawisza TAB.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <style>input:focus { background-color:orange; }</style>
  </head>
  <body>

    <p>
      Pierwszy element "input": <input tabindex="1">
    </p>

    <p>
      Drugi element "input": <input tabindex="3">
    </p>

    <p>
      Trzeci element "input": <input tabindex="5">
    </p>

    <p>
      Czwarty element "input": <input tabindex="4">
    </p>

    <p>
      Piąty element "input": <input tabindex="2">
    </p>

  </body>
</html>

Rezultat

Pierwszy element "input":

Drugi element "input":

Trzeci element "input":

Czwarty element "input":

Piąty element "input":

Trzeci przykładowy element "input" jest piątym w kolejności elementem "input" biorącym udział w procesie nawigacji za pośrednictwem klawisza TAB, ponieważ do wspomnianego elementu "input" został dodany atrybut "tabindex" wraz z wartością "5".

Docelowa wartość przeznaczona jest wyłącznie dla elementów HTML, które domyślnie mogą brać udział w procesie nawigacji za pośrednictwem klawisza TAB.

0

Wartość 0 oznacza, że dany element HTML może brać udział w procesie nawigacji za pośrednictwem klawisza TAB, natomiast docelowa kolejność zostanie ustalona automatycznie przez przeglądarkę internetową na podstawie miejsca zajmowanego w kodzie HTML przez dany element HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <style>p:focus { background-color:orange; }</style>
  </head>
  <body>

    <p tabindex="0">
      Ten element "p" może brać udział w procesie nawigacji za pośrednictwem klawisza TAB.
    </p>

    <p tabindex="0">
      Ten element "p" może brać udział w procesie nawigacji za pośrednictwem klawisza TAB.
    </p>

    <p tabindex="0">
      Ten element "p" może brać udział w procesie nawigacji za pośrednictwem klawisza TAB.
    </p>

    <p tabindex="0">
      Ten element "p" może brać udział w procesie nawigacji za pośrednictwem klawisza TAB.
    </p>

  </body>
</html>

Rezultat

Ten element "p" może brać udział w procesie nawigacji za pośrednictwem klawisza TAB.

Ten element "p" może brać udział w procesie nawigacji za pośrednictwem klawisza TAB.

Ten element "p" może brać udział w procesie nawigacji za pośrednictwem klawisza TAB.

Ten element "p" może brać udział w procesie nawigacji za pośrednictwem klawisza TAB.

Każdy z przykładowych elementów "p" może brać udział w procesie nawigacji za pośrednictwem klawisza TAB, ponieważ do każdego ze wspomnianych elementów "p" został dodany atrybut "tabindex" wraz z wartością "0".

liczba ujemna

Wartość w postaci ujemnej liczby całkowitej oznacza, że dany element HTML nie może brać udziału w procesie nawigacji za pośrednictwem klawisza TAB.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <style>input:focus { background-color:orange; }</style>
  </head>
  <body>

    <p>
      Pierwszy element "input": <input>
    </p>

    <p>
      Drugi element "input": <input>
    </p>

    <p>
      Trzeci element "input": <input tabindex="-1">
    </p>

    <p>
      Czwarty element "input": <input>
    </p>

    <p>
      Piąty element "input": <input>
    </p>

  </body>
</html>

Rezultat

Pierwszy element "input":

Drugi element "input":

Trzeci element "input":

Czwarty element "input":

Piąty element "input":

Trzeci przykładowy element "input" nie może brać udziału w procesie nawigacji za pośrednictwem klawisza TAB, ponieważ do wspomnianego elementu "input" został dodany atrybut "tabindex" wraz z wartością "-1".

Docelowa wartość przeznaczona jest wyłącznie dla elementów HTML, które domyślnie mogą brać udział w procesie nawigacji za pośrednictwem klawisza TAB.

*[tabindex="0"]:focus {
  outline-width:1px;
  outline-style:dotted;
}

tak

tak

tak

tak

tak

tak

Zobacz więcej informacji o interpretacji atrybutu tabindex.