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:
- 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.
- 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
-
tak
-
tak
-
tak
-
tak
-
tak
-
tak
Zobacz więcej informacji o interpretacji atrybutu tabindex.