Fokus

Elemen interaktif, termasuk kontrol formulir, link, dan tombol, dapat difokuskan dan ditab secara default. Elemen yang dapat difokuskan adalah bagian dari urutan navigasi fokus berurutan dokumen. Elemen lain 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, 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 HTML atau urutan rendering visual dengan CSS dapat merusak pengalaman pengguna.

Jangan mengubah 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 berdampak buruk bagi pengalaman pengguna.

Dalam contoh ini, nilai atribut tabindex telah membuat urutan tab menjadi tidak teratur:

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

Deklarasi flex-flow: row-reverse; telah membalikkan 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 menciptakan ketidakcocokan bagi pengguna keyboard.

Membuat elemen inert menjadi interaktif

Atribut contenteditable dan tabindex, sebagai atribut global, dapat ditambahkan ke elemen apa pun, sehingga elemen tersebut dapat difokuskan dalam prosesnya. Elemen yang dapat difokuskan juga dapat difokuskan dengan mouse atau penunjuk, dengan menetapkan atribut autofocus, atau dengan skrip, seperti dengan element.focus().

Atribut tabindex

Atribut tabindex global, yang diperkenalkan di atribut, memungkinkan elemen yang seharusnya tidak dapat menerima fokus untuk mendapatkan fokus, biasanya dengan Tab, sehingga dinamakan demikian.

Atribut tabindex mengambil bilangan bulat sebagai nilainya. Nilai negatif membuat elemen dapat difokuskan, tetapi tidak dapat di-tab. Nilai tabindex 0 membuat elemen dapat difokuskan dan dapat ditab, menambahkan elemen yang 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 elemen kustom. tabindex="0" menambahkan elemen yang biasanya tidak dapat difokuskan ini ke dalam 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 di-tab. Elemen dapat menerima fokus, seperti menggunakan HTMLElement.focus(), tetapi bukan bagian dari urutan navigasi fokus berurutan. Konvensi untuk elemen yang dapat difokuskan dan tidak dapat di-tab adalah menggunakan tabindex="-1". Jika Anda menambahkan tabindex="-1" ke elemen interaktif, elemen tersebut tidak akan lagi dapat difokuskan dengan keyboard.

Metode element.focus() dapat digunakan untuk menyetel fokus ke elemen yang dapat difokuskan. Browser men-scroll elemen yang difokuskan agar terlihat. Oleh karena itu, 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 khusus baca Document.activeElement.

Elemen dengan tabindex 1 atau lebih besar disertakan dalam urutan tab terpisah. Seperti yang akan Anda lihat di Codepen, penabiran 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 tidak hanya dapat menciptakan pengalaman pengguna yang buruk, tetapi juga sulit dikelola dan dipertahankan oleh developer.

Atribut contenteditable

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

Memberikan autofocus ke elemen interaktif

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

Menyetel fokus pada konten secara otomatis dapat membingungkan. Menetapkan autofocus pada kontrol formulir berarti kontrol formulir di-scroll agar terlihat saat halaman dimuat. Semua pengguna Anda, termasuk pengguna pembaca layar dan pengguna dengan area tampilan kecil, mungkin tidak "melihat" petunjuk untuk formulir, bahkan mungkin men-scroll melewati label kontrol formulir yang biasanya terlihat. Atribut autofocus tidak mengubah urutan navigasi fokus berurutan dokumen. Elemen dalam urutan yang muncul sebelum elemen yang difokuskan otomatis dilewati. Karena alasan tersebut, sebaiknya jangan sertakan atribut autofocus.

Pengecualian untuk rekomendasi "jangan gunakan autofocus" adalah menyertakan atribut autofocus dalam elemen <dialog>. Saat dialog dibuka, browser akan otomatis memfokuskan 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 terbuka, tambahkan atribut autofocus ke elemen tersebut.

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

Atribut autofocus yang ditetapkan pada penutupan <button> memungkinkan dialog menerima fokus saat dibuka. Sebagai elemen pertama dalam dialog, elemen tersebut akan menerima fokus dalam kasus apa pun. Secara default, saat dialog dibuka, elemen yang dapat difokuskan pertama dalam dialog menerima fokus kecuali jika elemen lain dalam dialog memiliki setelan atribut autofocus.

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 membuat elemen tidak dapat di-tab. Ketiga atribut ini TIDAK dapat dipertukarkan.

Nilai tabindex negatif

Atribut tabindex dengan nilai negatif membuat elemen dapat difokuskan, tetapi tidak dapat ditab. Saat 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 memfokuskan elemen interaktif, tetapi tidak menonaktifkan elemen. Pengguna penunjuk masih dapat memfokuskan elemen. Untuk menonaktifkan elemen, gunakan atribut disabled.

Nonaktif

Atribut boolean disabled membuat kontrol formulir yang 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. Aturan 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 <legend> pertama <fieldset>.

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

Sebagai atribut boolean, keberadaan atribut ini menonaktifkan elemen yang seharusnya diaktifkan; Anda tidak dapat menyetelnya ke false. Untuk mengaktifkan kembali elemen yang dinonaktifkan, atribut harus dihapus, biasanya 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 yang mendukung, seperti HTMLSelectElement, HTMLTextareaElement, memiliki properti hanya baca yang sama.

Atribut disabled tidak berlaku untuk elemen inert yang biasanya dapat difokuskan dengan tabindex atau contenteditable, dan juga tidak berlaku untuk elemen <form>. Untuk menonaktifkan elemen ini, atribut inert global dapat digunakan.

Atribut inert

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

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

Penggunaan inert pada konten yang terlihat tanpa gaya yang menunjukkan keinertan 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 memiliki penglihatan melihat konten di layar yang tidak tersedia untuk alat aksesibilitas. Buat ketidakaktifan sangat terlihat dengan CSS.

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

Periksa pemahaman Anda

Uji pengetahuan Anda tentang fokus.