Elemen interaktif, termasuk kontrol formulir, link, dan tombol, ditempatkan dapat difokuskan dan menekan tab secara default. Elemen yang dapat diklik adalah bagian dari urutan navigasi fokus berurutan dokumen. Elemen lainnya inert, artinya mereka tidak interaktif. Dengan atribut HTML, elemen interaktif dapat dibuat menjadi inert dan membuat elemen inert menjadi interaktif.
Secara default, urutan fokus navigasi sama dengan urutan visual, yang merupakan urutan kode sumber. Ada HTML yang dapat mengubah urutan ini dan properti CSS yang dapat mengubah urutan visual konten. Mengubah tab dengan HTML atau urutan rendering visual dengan CSS dapat membahayakan pengalaman pengguna.
Jangan mengubah urutan tabbing yang dirasakan dan sebenarnya dengan CSS dan HTML. Seperti yang ditunjukkan dua contoh berikut, urutan tab yang berbeda dari urutan yang diharapkan secara visual membingungkan pengguna dan buruk bagi pengalaman pengguna.
Dalam contoh ini, nilai atribut tabindex
telah membuat urutan tab kekacauan:
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. Urutan {i>tabbing <i}adalah urutan kode, yang tidak lagi sesuai dengan urutan visual, menciptakan sebuah pemutusan
untuk pengguna {i>keyboard<i}.
Membuat elemen inert menjadi interaktif
Atribut contenteditable dan tabindex, yang merupakan atribut global, dapat ditambahkan ke elemen apa pun, sehingga dapat difokuskan
dalam prosesnya. Elemen yang dapat difokuskan juga dapat difokuskan menggunakan mouse atau pointer, dengan memiliki autofocus
kumpulan atribut, atau menurut skrip, seperti pada element.focus().
Atribut tabindex
Atribut tabindex global, diperkenalkan di
atribut, memungkinkan elemen yang tidak akan dapat menerima fokus untuk mendapatkan
fokus, biasanya dengan tombol {i>Tab<i}, itulah namanya.
Atribut tabindex menganggap nilainya sebagai bilangan bulat. Nilai negatif membuat elemen dapat difokuskan, tetapi tidak dapat menekan tombol tab. J
Nilai tabindex dari 0 membuat elemen dapat difokuskan dan dapat diberi tab, sehingga menambahkan elemen tempat elemen tersebut diterapkan ke urutan
fokus urutan navigasi dalam urutan kode sumber. Nilai 1 atau lebih besar membuat elemen
dapat difokuskan dan {i>tabbable<i},
tetapi menambahkannya ke urutan {i>tabbing <i}yang diprioritaskan, dan, seperti yang kita lihat di atas, harus dihindari.
Di halaman ini, tombol berbagi, <share-action>, adalah elemen khusus. tabindex="0" menambahkan objek yang biasanya tidak dapat difokuskan
ke dalam urutan {i>tabbing <i}default {i>keyboard<i}:
<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
dengan nilai tabindex negatif:
<web-navigation-drawer type="standard" tabindex="-1">
Atribut tabindex dengan nilai negatif membuat elemen dapat difokuskan, tetapi tidak dapat menekan tombol tab. Elemen tersebut mampu menerima
fokus, seperti melalui HTMLElement.focus(), tetapi ini bukan bagian
dari urutan navigasi fokus berurutan. Konvensi untuk elemen yang tidak dapat tab dan dapat difokuskan adalah menggunakan tabindex="-1". Perlu diketahui bahwa
jika Anda menambahkan tabindex="-1" ke elemen interaktif, tabindex="-1" tidak akan lagi dapat diakses dengan menekan tab.
Metode element.focus() dapat digunakan untuk menetapkan fokus ke
yang dapat difokuskan. Perhatikan bahwa browser men-scroll elemen yang difokuskan ke tampilan. Untuk alasan ini, 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 yang lebih tinggi disertakan dalam urutan tab terpisah. Seperti yang akan Anda
lihat di Codepen,
tab dimulai dalam urutan terpisah, dari nilai terendah ke nilai tertinggi, sebelum dilanjutkan dengan urutan biasa
(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 membuat pengguna jahat
situs web, sulit untuk dikelola dan dipelihara oleh pengembang.
Atribut contenteditable
Atribut contenteditable telah dibahas sebelumnya. Menetapkan contenteditable="true" pada elemen apa pun akan membuatnya dapat diedit,
dapat difokuskan, dan merupakan
bagian dari urutan tab. Perilaku fokus mirip dengan setelan tabindex="0", tetapi tidak sama. Bertingkat
Elemen contenteditable dapat difokuskan, tetapi tidak dapat menekan tombol tab. Untuk membuat elemen contenteditable bertingkat dapat diberi 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 bisa diatur pada elemen apa pun, ini tidak membuat elemen inert menjadi interaktif. Saat halaman dimuat, elemen pertama yang dapat difokuskan
dengan kumpulan atribut autofocus akan menerima fokus, selama elemen tersebut ditampilkan dan tidak disusun bertingkat di <dialog>.
Mengatur fokus pada konten secara otomatis dapat membingungkan. Menetapkan autofocus pada kontrol formulir berarti bahwa kontrol formulir
akan masuk ke tampilan saat halaman dimuat. Semua pengguna Anda, termasuk pengguna pembaca layar dan pengguna dengan area pandang kecil, mungkin tidak
"lihat" petunjuk untuk formulir, bahkan mungkin dengan men-scroll melewati label kontrol formulir yang biasanya terlihat. autofocus
tidak mengubah urutan navigasi fokus berurutan dokumen. Elemen dalam urutan berada sebelum
elemen yang difokuskan otomatis akan dilewati. Karena alasan ini, tidak disarankan untuk menyertakan atribut autofocus.
Pengecualian untuk "jangan gunakan autofocus" rekomendasi 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 bahwa 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, aplikasi itu akan menerima fokus dalam situasi apa pun. Secara {i>default<i}, saat dialog dibuka, elemen pertama yang dapat difokuskan dalam
dialog akan menerima fokus kecuali elemen lain dalam dialog memiliki atribut autofocus yang disetel.
Membuat elemen interaktif tidak aktif
Ada juga atribut HTML yang dapat menghapus elemen interaktif dari urutan {i>tabbing<i}. Menyertakan tabindex negatif
ke elemen yang dapat difokuskan, menambahkan atribut disabled ke kontrol formulir pendukung, dan menambahkan atribut inert global
ke container, semuanya
membuat elemen menjadi tidak dapat diakses tab. Ketiga atribut ini TIDAK dapat dipertukarkan.
Nilai tabindex negatif
Seperti yang telah dipelajari di atas, atribut tabindex dengan nilai negatif membuat elemen dapat difokuskan, tetapi tidak dapat tab. Saat menambahkan
tabindex="0" ke elemen yang dapat difokuskan secara default, termasuk link, tombol, kontrol formulir, dan elemen yang merupakan contenteditable
tidak diperlukan; menyertakan tabindex dengan nilai negatif akan menghapus elemen yang biasanya dapat diakses dengan tab dari fokus berurutan
urutan navigasi.
Nilai tabindex negatif mencegah pengguna keyboard berfokus pada elemen interaktif, tetapi tidak menonaktifkan elemen tersebut. Pointer
pengguna masih dapat
fokus pada elemen tersebut. Untuk menonaktifkan elemen, gunakan atribut disabled.
Nonaktif
Atribut boolean dinonaktifkan membuat kontrol formulir aktif
data mana yang diterapkan dan turunannya, jika ada, tidak dapat difokuskan. Kontrol formulir yang dinonaktifkan tidak dapat difokuskan, tidak mendapatkan peristiwa klik,
dan tidak dikirimkan setelah pengiriman formulir. Perhatikan bahwa disabled bukan atribut global. Kebijakan ini 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 :disabled
dan pseudoclass :enabled. Elemen yang dinonaktifkan dengan
Atribut disabled umumnya diberi gaya sebagai abu-abu muda melalui stylesheet agen pengguna, meskipun accent-color
sudah diatur.
Sebagai atribut boolean, keberadaan atribut ini akan menonaktifkan elemen yang diaktifkan sebaliknya; 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
jika input dinonaktifkan. Karena disabled bukan atribut global, atribut tersebut tidak diwarisi dari HTMLElement, tetapi setiap elemen
antarmuka elemen, 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.
Ini juga tidak berlaku untuk elemen <form> itu sendiri. Untuk menonaktifkannya, atribut inert global dapat digunakan.
Atribut inert
Saat atribut boolean global inert ditambahkan ke elemen, elemen tersebut dan semua konten bertingkat akan dinonaktifkan—bukan
dapat diklik atau menekan tab—dan dihapus dari hierarki aksesibilitas. Meskipun inert dapat diterapkan ke elemen apa pun, umumnya
digunakan untuk bagian konten, seperti konten di balik layar atau konten tersembunyi.
Saat menerapkan disabled ke kontrol formulir, browser memberikan gaya default dan dapat ditata menggunakan :disabled
pseudo-class. 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 inersia dapat menyebabkan pengalaman pengguna yang buruk. Sebagai konten inert
tidak tersedia bagi pengguna pembaca layar, hal ini dapat menyebabkan kebingungan saat pengguna pembaca layar yang penglihatannya melihat konten di layar
yang tidak tersedia untuk
alat aksesibilitas. Membuat inertensi sangat jelas melalui CSS.
Pastikan fokus tidak pernah berpindah ke konten yang tidak terlihat. Apa pun yang dirender di luar layar yang tidak otomatis ditampilkan terlihat saat difokuskan harus dibuat inert. Jika konten disembunyikan, tetapi muncul saat difokuskan, seperti link lewati ke konten di halaman ini. tidak perlu dibuat inert.
Menguji pemahaman Anda
Menguji pemahaman Anda
Uji pengetahuan Anda tentang fokus.
Jika suatu elemen tidak dapat difokuskan, hal itu disebut sebagai apakah?
Apa yang akan benar jika elemen memiliki atribut disabled?