Autor publikacji: Virtual Patriot - Administrator

tabindex

Data publikacji: Kwiecień 09 2016
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the tabindex attribute (HTML5.2)

Przeznaczenie atrybutu `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

Wartości atrybutu `tabindex`

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.

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.

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.

Przypuszczalnie domyślne reguły CSS związane z atrybutem `tabindex`

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

Interpretacja atrybutu `tabindex`

: tak
: tak
: tak
: tak
: tak
: tak

Zobacz więcej informacji o interpretacji atrybutu tabindex.