Tajemnice atrybutu tabindex. Jak to poprawnie używać w kodzie HTML?
Bootstrap jest bardzo popularnym frameworkiem CSS do budowania interfejsu stron i aplikacji internetowych. Dostarcza bardzo wiele użytecznych komponentów. W tym tekście skupię się na komponencie Modal i jego kodzie HTML.
Komponent Modal jest odpowiedzialny za wyświetlanie okienka typu pop-up. To co jednak nas naprawdę będzie interesowało to zastosowanie atrybutu tabindex
z wartością -1
. Czy nie zastanawiało Ciebie dlaczego ten atrybut przyjmuje wartość -1
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Tytuł popupu</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij popup"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Treść popupu</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Zapisz zmiany</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Zamknij</button> </div> </div> </div> </div> |
Czym jest atrybut tabindex
?
Najpierw wytłumaczę czym jest atrybut tabindex
. Mianowicie, służy on do określenia kolejności w nawigowaniu po elementach, które mogą złapać focus, czyli mogą stać się aktywne/gotowe do interakcji na danej stronie. Co więcej, za pomocą tego atrybutu można określić czy dany element może wykluczony z nawigacji. Nawigować można za pomocą przycisku Tab na klawiaturze.
Dlaczego atrybut tabindex
w Bootstrap Modal przyjmuje wartość -1
?
Przejdźmy więc do wytłumaczenia, dlaczego kontenter (<div/>
zawierający kod komponentu) posiada atrybut z wartością -1
.
Gdy dany element HTML otrzymuje atrybut tabindex="-1"
oznacza to, że zostanie on wykluczony z domyślnej kolejności nawigacji, czyli nie będzie można aktywować go za pomocą klawisza Tab na klawiaturze. Za to jednak w dalszym ciągu będzie można ustawić focus na tym elemencie za pomocą kodu JavaScript lub przy pomocy odpowiedniego linka na stronie.
Jaki to ma wpływ na komponent Modal z biblioteki Bootstrap? Dzięki temu, w momencie gdy będzie ustawiony focus na tym elemencie, czytniki ekranu będą w stanie przeczytać tekst zawarty w nim oraz będzie można nawigować po elementach focusowalnych wewnątrz popupu. Co więcej, taki element można tak oskryptować aby potrafił złapać event związany z wciśnięciem klawisza Esc na klawiaturze i tym samym zamknąć popup. To bardzo ułatwia korzystanie z aplikacji czy strony, bez potrzeby korzystania z myszki i szukania przycisku do zamknięcia okienka.
Warto wiedzieć, że domyślnie <div>
nie jest w stanie otrzymać focusa bez zdefiniowania atrybutu tabindex
z niezerową wartością.
Które elementy łapią focus domyślnie?
Przypomnę jeszcze listę elementów HTML, które domyślnie są w stanie obsłużyć zdarzenie focus na sobie:
<input />
,<select></select>
,<textarea></textarea>
,<a></a>
,<button></button>
,<area />
- więcej informacji na temat tego rzadko używanego elementu znajdziesz tutaj
Podsumowanie
Mam nadzieję, że udało mi się zaspokoić Twoją ciekawość i dzięki informacjom przedstawionym w tym wpisie będziesz w stanie w świadomy sposób implementować interaktywne rozwiązania w swoich projektach.
Bardzo ważne, aby pamiętać o tym, że manipulowanie domyślną kolejnością elementów focusowalnych jest niezalecane. Bo może to powodować zły user experience (UX) użytkownika Twojego projektu. Jednakże, ustawienie tabindex="-1"
na wyskakujących okienkach jest akceptowalne, bo wspomaga użyteczność strony czy też aplikacji internetowej, przy założeniu że można szybko zamknąć takie okno za pomocą klawisza Esc.