Autor publikacji
Virtual Patriot - Administrator

tabindex

Data publikacji
Ostatnio edytowano

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:

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.

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.

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

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

Interpretacja atrybutu tabindex

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Zobacz więcej informacji o interpretacji atrybutu .