Elemen interaktif, seperti kontrol formulir, link, dan tombol, secara default dapat difokuskan dan dapat diputar tab. Elemen tabbable adalah bagian dari urutan navigasi fokus berurutan dokumen. Elemen lain bersifat inert, artinya tidak interaktif. Dengan atribut HTML, elemen interaktif dapat dibuat inert dan membuat elemen inert menjadi interaktif.
Secara default, urutan fokus navigasi sama dengan urutan visual, yaitu urutan kode sumber. Ada atribut HTML yang dapat mengubah urutan ini dan properti CSS yang dapat mengubah urutan visual konten. Mengubah urutan tab dengan urutan rendering HTML atau visual dengan CSS dapat membahayakan pengalaman pengguna.
Jangan mengubah urutan tab yang dirasakan dan sebenarnya dengan CSS dan HTML. Seperti yang ditunjukkan dalam dua contoh berikut, urutan tab yang berbeda dari urutan yang diharapkan secara visual akan membingungkan pengguna dan buruk bagi pengalaman pengguna.
Dalam contoh ini, nilai atribut tabindex
telah membuat urutan tab berantakan:
Dalam contoh ini, CSS telah membuat divergensi antara urutan tab dan urutan visual konten:
Deklarasi flex-flow: row-reverse; telah membalik urutan visual.
Selain itu, properti order CSS diterapkan ke kata keenam, "This", yang secara visual memindahkan satu kata tersebut. Urutan tab adalah urutan kode, yang tidak lagi cocok dengan urutan visual, sehingga membuat pemutusan
pemutusan koneksi bagi pengguna keyboard.
Membuat elemen inert menjadi interaktif
Atribut contenteditable dan tabindex, yang menjadi atribut global, dapat ditambahkan ke elemen apa pun, sehingga dapat difokuskan
dalam prosesnya. Elemen yang dapat difokuskan juga dapat difokuskan dengan mouse atau pointer, dengan menetapkan atribut
autofocus, atau berdasarkan skrip, seperti dengan element.focus().
Atribut tabindex
Atribut tabindex global, yang diperkenalkan dalam
atribut, memungkinkan elemen yang tidak dapat menerima fokus untuk mendapatkan
fokus, biasanya dengan tombol Tab, oleh karena itu disebut namanya.
Atribut tabindex menggunakan bilangan bulat sebagai nilainya. Nilai negatif membuat elemen dapat difokuskan tetapi tidak dapat difokuskan (tabbable). Nilai
tabindex dari 0 membuat elemen dapat difokuskan dan dapat diberi tab, dengan menambahkan elemen tempat elemen tersebut diterapkan ke urutan navigasi
fokus berurutan dalam urutan kode sumber. Nilai 1 atau lebih besar membuat elemen menjadi dapat difokuskan dan dapat diberi tab,
tetapi menambahkannya ke urutan tab yang diprioritaskan, dan, seperti yang kita lihat di atas, harus dihindari.
Di halaman ini, tombol bagikan, <share-action>, merupakan elemen khusus. tabindex="0" menambahkan elemen yang biasanya tidak dapat difokuskan
ini ke urutan tab default keyboard:
<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
Ada elemen kustom lain di halaman ini: navigasi lokal memiliki elemen
kustom dengan nilai tabindex negatif:
<web-navigation-drawer type="standard" tabindex="-1">
Atribut tabindex dengan nilai negatif membuat elemen dapat difokuskan, tetapi tidak dapat difokuskan. Elemen ini dapat menerima
fokus, seperti melalui HTMLElement.focus(), tetapi bukan
bagian dari urutan navigasi fokus berurutan. Konvensi untuk elemen yang tidak dapat difokuskan dan tidak dapat difokuskan adalah menggunakan tabindex="-1". Perhatikan bahwa
jika Anda menambahkan tabindex="-1" ke elemen interaktif, elemen tersebut tidak akan lagi dapat diakses melalui tab.
Metode element.focus() dapat digunakan untuk menetapkan fokus ke
elemen yang dapat difokuskan. Perhatikan, browser menggulir elemen yang difokuskan ke tampilan. Oleh karena itu, hindari penggunaan
element.focus({preventScroll:true}), karena berfokus pada elemen yang tidak terlihat akan memberikan pengalaman pengguna yang buruk.
Jika Anda ingin membuat kueri dokumen untuk mengetahui elemen mana yang saat ini memiliki fokus, gunakan properti Document.activeElement hanya baca.
Elemen dengan tabindex sebesar 1 atau lebih akan disertakan dalam urutan tab terpisah. Seperti yang akan Anda lihat di Codepen, tab dimulai dalam urutan terpisah, dari nilai terendah ke nilai tertinggi, sebelum melewatinya dalam urutan reguler (tidak ada tabindex yang ditetapkan, atau tabindex="0") dalam urutan sumber:
tabindex dengan nilai positif menempatkan elemen ke dalam urutan fokus yang diprioritaskan, yang dapat menyebabkan kekacauan urutan fokus.
Hindari mengubah urutan DOM dengan tabindex. Pesanan tab yang diubah tidak hanya dapat menciptakan pengalaman pengguna yang buruk, tetapi juga sulit bagi developer untuk mengelola dan memelihara.
Atribut contenteditable
Atribut contenteditable telah dibahas sebelumnya. Menetapkan contenteditable="true" pada elemen apa pun akan menjadikannya dapat diedit,
difokus, dan menjadi bagian dari urutan tab. Perilaku fokus mirip dengan setelan tabindex="0", tetapi tidak sama. Elemen
contenteditable bertingkat dapat difokuskan, tetapi tidak dapat difokuskan. Untuk membuat elemen contenteditable bertingkat dapat diakses tab, tambahkan tabindex="0",
yang akan menambahkannya ke urutan navigasi fokus berurutan.
Memberikan fokus pada elemen interaktif
Atribut autofocus
Meskipun boolean autofocus adalah atribut global
yang dapat ditetapkan pada elemen apa pun, boolean tersebut tidak membuat elemen inert menjadi interaktif. Saat halaman dimuat, elemen pertama yang dapat difokuskan
dengan atribut autofocus yang ditetapkan akan menerima fokus, selama elemen tersebut ditampilkan dan tidak disarangkan di <dialog>.
Menetapkan fokus pada konten secara otomatis dapat membingungkan. Menetapkan autofocus pada kontrol formulir berarti kontrol formulir akan men-scroll ke tampilan saat pemuatan halaman. Semua pengguna Anda, termasuk pengguna pembaca layar dan pengguna dengan area pandang yang kecil, mungkin tidak
"melihat" petunjuk untuk formulir tersebut, bahkan mungkin men-scroll melewati label yang biasanya terlihat pada kontrol formulir. Atribut autofocus
tidak mengubah urutan navigasi fokus berurutan dokumen. Elemen dalam urutan yang muncul sebelum
elemen yang difokuskan otomatis dilewati. Karena alasan ini, tidak disarankan untuk menyertakan atribut autofocus.
Pengecualian untuk rekomendasi "jangan gunakan autofocus" menyertakan atribut autofocus dalam elemen <dialog>.
Saat dialog dibuka, browser akan otomatis berfokus pada elemen interaktif pertama yang dapat difokuskan dalam <dialog>,
yang berarti autofocus ke elemen tidak diperlukan. Jika Anda ingin memastikan elemen interaktif tertentu dalam dialog menerima
fokus saat dialog terbuka, tambahkan atribut autofocus ke elemen tersebut.
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Atribut autofocus yang disetel pada <button> tutup memastikannya menerima fokus saat dialog dibuka. Sebagai elemen pertama
dalam dialog, elemen ini akan menerima fokus dalam kasus apa pun. Secara default, saat dialog dibuka, elemen pertama yang dapat difokuskan dalam
dialog akan menerima fokus, kecuali jika elemen lain dalam dialog memiliki atribut autofocus yang disetel.
Membuat elemen interaktif menjadi tidak aktif
Ada juga atribut HTML yang dapat menghapus elemen interaktif dari urutan tab. Menyertakan tabindex negatif
ke elemen yang dapat difokuskan, menambahkan atribut disabled ke kontrol formulir pendukung, dan menambahkan atribut inert global
ke penampung semuanya membuat elemen tidak dapat tabb. Ketiga atribut ini TIDAK dapat dipertukarkan.
Nilai tabindex negatif
Seperti yang telah kita pelajari di atas, atribut tabindex dengan nilai negatif membuat elemen dapat difokuskan, tetapi tidak dapat difokuskan. Meskipun menambahkan
tabindex="0" ke elemen default yang dapat difokuskan, termasuk link, tombol, kontrol formulir, dan elemen yang contenteditable,
tidak diperlukan; menyertakan tabindex dengan nilai negatif akan menghapus elemen yang biasanya dapat diberi tab dari urutan navigasi
fokus berurutan.
Nilai tabindex negatif mencegah pengguna keyboard berfokus pada elemen interaktif, tetapi tidak menonaktifkan elemen tersebut. Pengguna pointer masih dapat berfokus pada elemen. Untuk menonaktifkan elemen, gunakan atribut disabled.
Nonaktif
Atribut boolean dinonaktifkan membuat kontrol formulir tempat atribut tersebut diterapkan dan turunannya, jika ada, tidak dapat difokuskan. Kontrol formulir yang dinonaktifkan tidak dapat difokuskan, tidak mendapatkan peristiwa klik,
dan tidak dikirim setelah pengiriman formulir. Perlu diperhatikan bahwa disabled bukan atribut global. Berlaku untuk <button>, <input>,
<optgroup>, <option>, <select>, <textarea>, elemen kustom terkait formulir, dan <fieldset>.
Jika ditetapkan pada <optgroup> atau <fieldset>, semua kontrol formulir turunan akan dinonaktifkan, kecuali untuk konten <legend> pertama <fieldset>.
Elemen yang sama yang mendukung disabled juga dapat ditargetkan dengan pseudoclass
:disabled
dan :enabled. Elemen yang dinonaktifkan dengan atribut
disabled biasanya diberi gaya warna abu-abu muda melalui stylesheet agen pengguna, meskipun accent-color
telah disetel.
Sebagai atribut boolean, keberadaan atribut akan menonaktifkan elemen yang diaktifkan; Anda tidak dapat menyetelnya ke false.
Untuk mengaktifkan kembali elemen yang dinonaktifkan, atribut harus dihapus, biasanya melalui Element.removeAttribute('disabled').
Properti HTMLInputElement.disabled memungkinkan Anda memeriksa
apakah input dinonaktifkan. Karena disabled bukan atribut global, atribut ini tidak diwarisi dari HTMLElement, tetapi setiap antarmuka
elemen pendukung, seperti HTMLSelectElement,
HTMLTextareaElement, memiliki properti hanya baca yang sama.
Atribut disabled tidak berlaku untuk elemen inert biasanya yang dibuat dapat difokuskan melalui tabindex atau contenteditable.
Hal ini juga tidak berlaku untuk elemen <form> itu sendiri. Untuk menonaktifkannya, Anda dapat menggunakan atribut inert global.
Atribut inert
Saat atribut boolean global inert ditambahkan ke elemen, elemen tersebut dan semua konten bertingkat akan dinonaktifkan—tidak dapat
diklik maupun diberi tab—dan dihapus dari hierarki aksesibilitas. Meskipun dapat diterapkan ke elemen apa pun, inert umumnya
digunakan untuk bagian konten, seperti konten di balik layar atau konten tersembunyi.
Saat menerapkan disabled ke kontrol formulir, browser menyediakan gaya default dan dapat diberi gaya menggunakan pseudo class
:disabled. Atribut inert tidak menyediakan indikator visual dan tidak memiliki pseudoclass yang cocok (meskipun pemilih atribut [inert] cocok).
Menggunakan inert pada konten yang terlihat tanpa gaya yang menunjukkan inertness dapat menyebabkan pengalaman pengguna yang buruk. Karena konten inert
tidak tersedia bagi pengguna pembaca layar, hal ini dapat menyebabkan kebingungan saat pengguna pembaca layar yang melihat melihat konten di layar
yang tidak tersedia untuk alat aksesibilitas. Buat inertensi sangat jelas melalui CSS.
Pastikan fokus tidak berpindah ke konten yang tidak terlihat. Apa pun yang dirender di luar layar dan tidak otomatis muncul saat difokuskan harus dibuat inert. Jika konten disembunyikan, tetapi muncul saat difokuskan, seperti link lewati ke konten di halaman ini, konten tidak perlu dibuat inert.
Menguji pemahaman Anda
Menguji pemahaman Anda
Uji pengetahuan Anda tentang fokus.
Jika suatu elemen tidak dapat difokuskan, hal itu dijelaskan sebagai apa?
Apa yang akan bernilai benar jika elemen memiliki atribut disabled?