Do czego służy tabindex = „- 1” w programie bootstrap

101

Jaki jest tabindexatrybut w Bootstrap 3?

Jego dokumentacja nic o nich nie mówi, chociaż używają ich praktycznie we wszystkich modach.

Znalazłem to tylko w odniesieniu do jego zastosowania, co tak naprawdę niewiele mówi

Dostępne podpowiedzi dla użytkowników klawiatury i technologii wspomagających

W przypadku użytkowników korzystających z klawiatury, aw szczególności użytkowników technologii wspomagających, należy dodawać podpowiedzi tylko do elementów, na które można ustawić fokus z klawiatury, takich jak łącza, kontrolki formularzy lub dowolny dowolny element z atrybutem tabindex = „0”.

I dowiedziałem się, że nie mogę nacisnąć, escaby ukryć modal, jeśli tabindexatrybut nie jest-1 .

Alvaro
źródło

Odpowiedzi:

163

tabindexAtrybut jednoznacznie określa kolejność nawigacyjnego elementów aktywowana (zazwyczaj łączy i elementów postać) w stronę. Można go również użyć do określenia, czy elementy powinny być fokusowane, czy nie.

[Obie] tabindex="0"i tabindex="-1"mają specjalne znaczenie i zapewniają odrębną funkcjonalność w HTML. Wartość 0wskazuje, że element powinien zostać umieszczony w domyślnej kolejności nawigacji. Pozwala to elementy, które nie są natywnie aktywowana (takich jak <div>, <span>i <p>) przyjmowanie klawiaturę. Oczywiście należy generalnie używać linków i kontrolek formularzy dla wszystkich elementów interaktywnych, ale pozwala to na skupienie się na innych elementach i wywołanie interakcji.

tabindex="-1"Wartość usuwa element z domyślnego przepływu nawigacji (czyli użytkownik nie może Zakładka do niego), ale pozwala na odbieranie programowy ostrości , czyli ostrość można ustawić na nim z linkiem lub skryptów. ** To może być bardzo przydatne w przypadku elementów, które nie powinny być umieszczane na kartach, ale mogą wymagać ustawienia na nich fokusu .

Dobrym przykładem jest modalne okno dialogowe - po otwarciu należy ustawić fokus na okno dialogowe, aby program udźwiękawiający zaczął czytać, a klawiatura poruszać się po oknie. Ponieważ okno dialogowe (prawdopodobnie tylko <div>element) nie jest domyślnie aktywne, przypisanie go tabindex="-1"umożliwia ustawienie fokusu za pomocą skryptów, gdy jest prezentowane.

Wartość of -1może być również przydatna w złożonych widżetach i menu, które wykorzystują klawisze strzałek lub inne klawisze skrótów, aby zapewnić, że tylko po jednym elemencie widżetu można poruszać się za pomocą klawisza Tab, ale nadal umożliwia ustawienie fokusu na innych składnikach widżetu.

Źródło: http://webaim.org/techniques/keyboard/tabindex

Dlatego potrzebujesz tabindex="-1"modalu <div>, aby użytkownicy mogli uzyskać dostęp do popularnych skrótów myszy i klawiatury. Mam nadzieję, że to pomoże.

Kyle Anderson
źródło
1
Atrybut jest częścią HTML, nie ma nic wspólnego z Bootstrapem.
Lutz Prechelt
8
Tak, dokładnie to jest tutaj powiedziane, że jest to „odrębna funkcjonalność w HTML”, a nie coś, co ma związek z Bootstrapem.
Kyle Anderson
1
Aby móc skupić się na <div> z JavaScript, atrybut tabindex MUSI być zdefiniowany w tym elemencie (dowolne wartości, takie jak tabindex = -1). Jeśli tabindex nie jest obecny w div, fokus nie zadziała. Dlatego BS dodaje tabindex = -1 do modalnego div. Zobacz developer.mozilla.org/en-US/docs/Web/Accessibility/… : jeśli nie ma tabindex, element, na który można ustawić fokus z JS, będzie zgodny z konwencją platformy elementu (tak dla kontrolek formularzy, linków itp.). Oznacza to, że <div> nie jest focuable, jeśli nie ma tabindex.
Canada Wan
Warto dodać, że elementy z tabindex = "- 1" również można aktywować klikając na nie.
Black Mantha
14

Tabindex atrybut jest związana z HTML , to nie jest specyficzne dla startowej.

Ta właściwość jest odpowiedzialna za wskazanie, czy element jest osiągalny za pomocą nawigacji klawiaturowej.

Musisz zwrócić uwagę na trzy różne scenariusze:

  1. Przy dodawaniu tabindex = "0"do elementu oznacza to, że jest on osiągalny przez nawigację klawiaturową, ale kolejność jest określona przez kolejność źródeł dokumentów.

  2. Podczas dodawania wartość dodatnią atrybutowi tabindex (na przykład tabindex = "1", tabindex = "2"), elementy te są osiągalne nawigacji klawiatury, a kolejność jest określona przez wartość atrybutu.

  3. Po dodaniu ujemną wartość do TabIndex (zazwyczaj tabindex="-1") oznacza, że element jest nieosiągalny przez nawigacji klawiatury, ale może być skupiona ostrość za pomocą funkcji w JS.

Nesha Zoric
źródło