Fokus

Elemen interaktif, termasuk kontrol formulir, link, dan tombol, secara default dapat difokuskan dan dapat di-tab. Elemen yang dapat di-tab adalah bagian dari urutan navigasi fokus berurutan dokumen. Elemen lainnya tidak aktif, yang berarti tidak interaktif. Dengan atribut HTML, elemen interaktif dapat dibuat tidak aktif dan elemen tidak aktif dapat dibuat interaktif.

Secara default, urutan fokus navigasi sama dengan urutan visual, yang merupakan urutan kode sumber. Ada atribut HTML yang dapat mengubah urutan ini dan properti CSS yang dapat mengubah urutan visual konten. Mengubah urutan tab dengan HTML atau urutan rendering visual dengan CSS dapat merusak pengalaman pengguna.

Jangan ubah urutan tab yang dirasakan dan sebenarnya dengan CSS dan HTML. Seperti yang ditunjukkan oleh dua contoh berikut, urutan tab yang berbeda dari urutan yang diharapkan secara visual membingungkan pengguna dan buruk untuk pengalaman pengguna.

Pada contoh berikut, nilai atribut tabindex telah membuat urutan tab menjadi kacau:

Dalam contoh ini, CSS telah membuat perbedaan antara urutan tab dan urutan visual konten:

Deklarasi flex-flow: row-reverse; telah membalikkan urutan visual. Selain itu, properti urutan CSS order diterapkan ke kata keenam, "This", yang secara visual memindahkan satu kata tersebut. Urutan tab adalah urutan kode, yang tidak lagi cocok dengan urutan visual. Hal ini membuat pengguna keyboard terputus.

Beberapa fitur CSS, termasuk flexbox, grid, positioning, transforms, dan multi-column, dapat mengubah urutan visual konten. Uji konten Anda dengan menekan tab melalui konten menggunakan keyboard: dengan shift + tab untuk bergerak mundur melalui konten. Gunakan CSS untuk menunjukkan elemen mana yang memiliki fokus. Jangan urutkan ulang elemen yang dapat difokuskan dengan CSS.

Anda harus mempertahankan urutan tab yang logis pada semua ukuran area pandang.

Membuat elemen tidak aktif menjadi interaktif

Atribut contenteditable dan tabindex, yang merupakan atribut global, dapat ditambahkan ke elemen mana pun, sehingga dapat difokuskan dalam prosesnya. Elemen yang dapat difokuskan juga dapat difokuskan dengan mouse atau pointer, dengan menetapkan autofocus atribut, atau dengan 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 Tab, sehingga namanya.

Atribut tabindex mengambil bilangan bulat sebagai nilainya. Nilai negatif membuat elemen dapat difokuskan, tetapi tidak dapat di-tab. Nilai tabindex sebesar 0 membuat elemen dapat difokuskan dan dapat di-tab, menambahkan elemen tempatnya diterapkan ke urutan navigasi fokus berurutan dalam urutan kode sumber. Nilai 1 atau lebih besar membuat elemen dapat difokuskan dan dapat di-tab, tetapi menambahkannya ke urutan tab yang diprioritaskan dan harus dihindari.

Di halaman ini, tombol bagikan, <share-action>, adalah e lemen kustom. tabindex="0" menambahkan ini elemen 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>

Selain itu, 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 di-tab. Elemen dapat menerima fokus, seperti menggunakan HTMLElement.focus(), tetapi bukan bagian dari urutan navigasi fokus berurutan. Konvensi untuk elemen yang tidak dapat di-tab dan dapat difokuskan adalah menggunakan tabindex="-1". Jika Anda menambahkan tabindex="-1" ke elemen interaktif, elemen tersebut tidak akan dapat di-tab lagi.

Metode element.focus() dapat digunakan untuk menetapkan fokus ke elemen yang dapat difokuskan. Browser men-scroll elemen yang difokuskan ke dalam tampilan. Karena alasan ini, hindari penggunaan element.focus({preventScroll:true}), karena berfokus pada elemen yang tidak terlihat adalah pengalaman pengguna yang buruk.

Jika Anda ingin membuat kueri dokumen untuk mengetahui elemen mana yang memiliki fokus, gunakan properti hanya baca Document.activeElement.

Elemen dengan tabindex sebesar 1 atau lebih besar disertakan dalam urutan tab terpisah. Seperti dalam Codepen berikut, tab dimulai dalam urutan terpisah, dalam urutan nilai terendah hingga nilai tertinggi, sebelum melalui 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. Urutan tab yang diubah dapat menciptakan pengalaman pengguna yang buruk dan sulit dipertahankan.

Atribut contenteditable

Atribut contenteditable telah dibahas sebelumnya. Menetapkan contenteditable="true" pada elemen mana pun akan membuatnya dapat diedit, dapat difokuskan, dan menjadi bagian dari urutan tab. Perilaku fokus mirip dengan menetapkan tabindex="0", tetapi tidak sama. Elemen contenteditable bertingkat dapat difokuskan, tetapi tidak dapat di-tab. Untuk membuat elemen contenteditable bertingkat dapat di-tab, tambahkan tabindex="0", yang akan menambahkannya ke urutan navigasi fokus berurutan.

Memberikan autofocus ke elemen interaktif

Meskipun boolean autofocus adalah atribut global yang dapat ditetapkan pada elemen mana pun, atribut ini tidak membuat elemen tidak aktif menjadi interaktif. Saat halaman dimuat, elemen interaktif pertama dengan atribut autofocus akan menerima fokus, selama elemen tersebut ditampilkan dan tidak bertingkat dalam <dialog>.

Menetapkan fokus secara otomatis pada konten dapat membingungkan pengguna. Saat Anda menetapkan autofocus pada kontrol formulir, kontrol formulir tersebut akan di-scroll ke dalam tampilan saat pemuatan halaman. Pengguna Anda, termasuk pengguna pembaca layar dan pengguna dengan area pandang kecil, mungkin tidak melihat petunjuk formulir atau bahkan label kontrol formulir. Selain itu, atribut autofocus tidak mengubah urutan navigasi fokus berurutan dokumen. Elemen dalam urutan yang muncul sebelum elemen yang difokuskan otomatis akan dilewati. Karena alasan ini, Anda harus menghindari penggunaan atribut autofocus.

Pengecualian untuk rekomendasi "jangan gunakan autofocus" adalah menyertakan atribut autofocus dalam elemen <dialog>. Saat dialog dibuka, browser akan otomatis berfokus pada elemen interaktif pertama yang dapat difokuskan dalam <dialog>, yang berarti tidak perlu menambahkan autofocus ke elemen. Jika Anda ingin memastikan elemen interaktif tertentu dalam dialog menerima fokus saat dialog dibuka, tambahkan atribut autofocus ke elemen tersebut.

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

Atribut autofocus yang ditetapkan pada <button> tutup memungkinkannya menerima fokus saat dialog dibuka. Sebagai elemen pertama dalam dialog, elemen tersebut 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 ditetapkan.

Membuat elemen interaktif 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 akan membuat elemen tidak dapat di-tab. Ketiga atribut ini sepenuhnya terpisah dan tidak dapat dipertukarkan.

Nilai tabindex negatif

Atribut tabindex dengan nilai negatif membuat elemen dapat difokuskan, tetapi tidak dapat di-tab. Meskipun menambahkan tabindex="0" ke elemen yang dapat difokuskan secara default, termasuk link, tombol, kontrol formulir, dan elemen yang contenteditable tidak diperlukan; menyertakan tabindex dengan nilai negatif akan menghapus elemen yang biasanya dapat di-tab dari urutan navigasi fokus berurutan.

Nilai tabindex negatif mencegah pengguna keyboard berfokus pada elemen interaktif, tetapi tidak menonaktifkan elemen. Pengguna pointer masih dapat berfokus pada elemen. Untuk menonaktifkan elemen, gunakan atribut disabled.

Nonaktif

Atribut boolean disabled membuat kontrol formulir tempatnya diterapkan dan turunannya, jika ada, tidak dapat difokuskan. Kontrol formulir yang dinonaktifkan tidak dapat difokuskan, tidak mendapatkan peristiwa klik, dan tidak dikirim saat pengiriman formulir.

disabled bukan atribut global. Atribut 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 konten <fieldset>'s pertama <legend>.

Elemen yang sama yang mendukung disabled juga dapat ditargetkan dengan :disabled dan :enabled pseudo-class. Elemen yang dinonaktifkan dengan atribut disabled umumnya diberi gaya sebagai abu-abu muda dengan stylesheet agen pengguna, meskipun accent-color ditetapkan.

Karena merupakan atribut boolean, keberadaan atribut akan menonaktifkan elemen yang diaktifkan; Anda tidak dapat menetapkannya ke false. Untuk mengaktifkan kembali elemen yang dinonaktifkan, atribut harus dihapus, umumnya dengan 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 yang dibuat dapat difokuskan dengan tabindex atau contenteditable, dan tidak berlaku untuk elemen <form>. Untuk menonaktifkan elemen ini, atribut inert global dapat digunakan.

Atribut inert

Saat atribut boolean global inert ditambahkan ke elemen, elemen tersebut dan semua konten bertingkat akan dinonaktifkan, yang berarti tidak dapat diklik atau di-tab. Elemen tersebut juga dihapus dari hierarki aksesibilitas. Meskipun inert dapat diterapkan ke elemen mana pun, elemen ini umumnya digunakan untuk bagian konten, seperti konten di luar layar atau konten tersembunyi.

Saat menerapkan disabled ke kontrol formulir, browser akan menyediakan gaya default dan dapat diberi gaya menggunakan :disabled pseudo-class. Atribut inert tidak memberikan indikator visual dan tidak memiliki pseudo-class yang cocok (meskipun pemilih atribut [inert] cocok).

Menggunakan inert pada konten yang terlihat tanpa gaya yang menunjukkan ketidakaktifan dapat menyebabkan pengalaman pengguna yang buruk. Karena konten tidak aktif tidak tersedia untuk pengguna pembaca layar, hal ini dapat menyebabkan kebingungan saat pengguna pembaca layar yang melihat konten di layar yang tidak tersedia untuk alat aksesibilitas. Buat ketidakaktifan sangat jelas dengan CSS.

Pastikan fokus tidak pernah berpindah ke konten yang tidak terlihat. Apa pun yang dirender di luar layar yang tidak otomatis terlihat saat difokuskan harus dibuat tidak aktif. Jika konten disembunyikan tetapi terlihat saat difokuskan, seperti link lewati ke konten, konten tersebut tidak perlu dibuat tidak aktif.

Uji pemahaman Anda

Uji pengetahuan Anda tentang fokus.