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">&amp;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>

Section 1Czym 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.

Section 2Dlaczego 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ą.

Section 3Któ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

Section 4Podsumowanie

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.