Fokus

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.