tabindex
Atrybut 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ść 0
wskazuje, ż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 -1
moż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.
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:
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.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.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.źródło