The tabindexatribut secara eksplisit mendefinisikan urutan navigasi untuk elemen focusable (biasanya link dan bentuk kontrol) dalam suatu halaman. Ini juga dapat digunakan untuk menentukan apakah elemen harus dapat difokuskan atau tidak.
[Keduanya] tabindex="0"dan tabindex="-1"memiliki arti khusus serta menyediakan fungsionalitas yang berbeda dalam HTML. Nilai dari 0menunjukkan bahwa elemen harus ditempatkan dalam urutan navigasi default. Hal ini memungkinkan elemen yang tidak native focusable (seperti <div>, <span>, dan <p>) untuk menerima fokus keyboard. Tentu saja seseorang secara umum harus menggunakan tautan dan kontrol formulir untuk semua elemen interaktif, tetapi hal ini memungkinkan elemen lain menjadi dapat difokuskan dan memicu interaksi.
Sebuah tabindex="-1"nilai menghapus elemen dari aliran navigasi standar (yaitu, pengguna tidak bisa tab untuk itu), tetapi memungkinkan untuk menerima fokus program , yang berarti fokus dapat diatur untuk itu dari link atau dengan scripting. ** ini bisa sangat berguna untuk elemen yang tidak boleh menjadi tab, tetapi mungkin perlu memiliki fokus yang ditetapkan ke mereka .
Contoh yang baik adalah jendela dialog modal - saat dibuka, fokus harus disetel ke dialog sehingga pembaca layar akan mulai membaca dan keyboard akan mulai menavigasi di dalam dialog. Karena dialog (mungkin hanya sebuah <div>elemen) tidak dapat difokuskan secara default, menetapkannya tabindex="-1"memungkinkan fokus untuk diatur dengan skrip saat disajikan.
Nilai dari -1juga dapat berguna dalam widget dan menu kompleks yang menggunakan tombol panah atau tombol pintasan lainnya untuk memastikan bahwa hanya satu elemen dalam widget yang dapat dinavigasi dengan tombol tab, tetapi tetap memungkinkan fokus untuk ditetapkan pada komponen lain dalam widget.
Sumber: http://webaim.org/techniques/keyboard/tabindex
Inilah mengapa Anda membutuhkan tabindex="-1"modal <div>, sehingga pengguna dapat mengakses pintasan mouse dan keyboard yang umum. Semoga membantu.