Fitur 'titik awal navigasi fokus berurutan' menentukan tempat kita mulai menelusuri elemen yang dapat difokuskan untuk navigasi fokus berurutan ([Tab] atau [Shift-Tab]) jika tidak ada area yang difokuskan. Hal ini sangat berguna untuk fitur aksesibilitas seperti "link lewati" dan mengelola fokus dalam dokumen.
HTML menyediakan banyak dukungan bawaan untuk menangani interaksi keyboard, yang berarti cukup mudah untuk menulis halaman yang dapat digunakan melalui keyboard - baik karena gangguan motorik yang mencegah kita menggunakan mouse, atau karena kita sangat efisien sehingga melepas tangan dari keyboard akan membuang-buang waktu yang berharga.
Penanganan keyboard berfokus pada fokus, yang menentukan tempat peristiwa keyboard akan berada di halaman. Ada beberapa situasi yang, hingga saat ini, mengharuskan kami melakukan beberapa pekerjaan tambahan agar semuanya berfungsi dengan baik bagi pengguna keyboard. Metode focus() memungkinkan kita mengelola fokus dengan memilih elemen secara selektif untuk difokuskan sebagai respons terhadap tindakan pengguna. Namun, praktik terbaik ini memiliki banyak masalah dan memerlukan beberapa peretasan JavaScript yang rumit untuk memberikan pengalaman dasar.
Meskipun teknik ini tidak akan sepenuhnya dihapus dalam waktu dekat, di Chrome 50, teknik ini akan diperlukan dalam lebih sedikit kasus berkat Titik Awal Navigasi Fokus Terurut. Dengan perubahan ini, halaman yang ditulis dengan baik akan otomatis menjadi lebih mudah diakses tanpa perlu pengelolaan fokus manual tambahan. Mari kita lihat contohnya.
Link dalam halaman
Situs yang banyak teks sering kali saling ditautkan dalam halaman yang sama untuk membantu pengguna dengan cepat membuka bagian penting.
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
Jika saya adalah pengguna keyboard (dan penggemar berat makanan Australia), rangkaian tindakan saya berikutnya akan terlihat seperti ini:
- Tekan
Tabdua kali untuk memfokuskan link Resep - Tekan
Enteruntuk langsung ke bagian Resep - Tekan
Tablagi untuk memfokuskan link Baca Selengkapnya
Mari kita lihat cara kerjanya menggunakan Chrome 49.
Oh. Yah, itu tidak berjalan sesuai rencana, bukan?
Alih-alih memfokuskan link Baca Selengkapnya, menekan Tab untuk terakhir kalinya akan memindahkan fokus ke item berikutnya dalam daftar isi. Hal ini karena developer tidak menetapkan tabindex="-1" pada header agar dapat difokuskan. Jadi, mengklik anchor bernama #recipes tidak akan memindahkan fokus. Ini adalah kesalahan kecil, dan tidak masalah jika Anda adalah pengguna mouse. Namun, hal ini berpotensi menjadi masalah besar jika Anda adalah pengguna perangkat keyboard atau tombol akses. Pertimbangkan jumlah penautan silang di halaman Wikipedia biasa? Akan sangat menjengkelkan jika Anda harus terus-menerus menekan tombol tab untuk berpindah ke semua anchor tersebut.
Mari kita lihat pengalaman yang sama sekarang menggunakan Chrome 50.
Wow, itulah yang kita inginkan, dan yang terbaik, kita tidak perlu mengubah kode. Browser baru saja mengetahui tempat fokus harus berada berdasarkan posisi kita dalam dokumen.
Bagaimana cara kerjanya?
Sebelum penerapan titik awal fokus, fokus akan selalu berpindah dari elemen yang difokuskan sebelumnya, atau bagian atas halaman. Artinya, memilih apa yang akan difokuskan berikutnya dapat melibatkan pemindahan fokus ke sesuatu yang seharusnya tidak dapat difokuskan, seperti elemen penampung atau judul. Hal ini menyebabkan berbagai hal aneh, termasuk menampilkan cincin fokus jika Anda kebetulan mengklik elemen tersebut dengan santai.
Titik awal fokus, seperti namanya, menyediakan mekanisme untuk menyarankan tempat untuk mulai mencari elemen berikutnya yang dapat difokuskan saat kita menekan Tab atau Shift-Tab.
Titik ini dapat ditetapkan dengan beberapa cara:
Jika sesuatu memiliki fokus, titik ini juga merupakan titik awal navigasi fokus, seperti sebelumnya.
Selain itu, seperti sebelumnya, jika tidak ada yang menetapkan titik awal navigasi fokus, titik awal tersebut akan menjadi document saat ini atau, jika tersedia dan didukung, dialog yang saat ini aktif.
Jika kita membuka fragmen halaman seperti pada contoh di atas, tindakan ini akan menetapkan titik awal fokus.
Selain itu, jika kita mengklik elemen apa pun di halaman, terlepas dari apakah elemen tersebut dapat difokuskan atau tidak, elemen tersebut sekarang akan menetapkan titik awal navigasi fokus.
Terakhir, jika elemen yang merupakan titik awal fokus dihapus dari DOM, induknya akan menjadi titik awal fokus. Tidak ada lagi fokus yang berpindah-pindah!
Kasus penggunaan lainnya
Selain contoh di atas, ada banyak skenario lain yang dapat memanfaatkan fitur ini.
Menyembunyikan elemen
Terkadang, pengguna akan berfokus pada item yang perlu ditetapkan ke visibility: hidden atau display: none. Contohnya adalah item yang dapat diklik dalam carousel. Di Chrome versi sebelumnya, menyembunyikan item yang saat ini difokuskan dengan cara ini akan mereset fokus kembali ke titik awal default, sehingga mengubah carousel yang disebutkan di atas menjadi jebakan yang tidak menyenangkan bagi pengguna yang mengalami gangguan motorik. Dengan titik awal fokus berurutan, hal ini tidak lagi berlaku. Jika elemen disembunyikan melalui salah satu metode di atas, menekan tombol Tab akan langsung berpindah ke item berikutnya yang dapat difokuskan.
Lewati link
Link lewati adalah anchor yang tidak terlihat yang hanya dapat dijangkau melalui keyboard. Fitur ini memungkinkan pengguna “melewati" elemen navigasi untuk langsung membuka konten halaman dan dapat sangat bermanfaat bagi pengguna perangkat keyboard dan tombol akses. Seperti yang dijelaskan di situs WebAIM
Banyak situs populer menerapkan link lewati, meskipun Anda mungkin tidak pernah melihatnya.
Karena link lewati diberi nama anchor, link tersebut berfungsi dengan cara yang sama seperti contoh daftar isi asli kita.
Peringatan dan dukungan
Titik awal navigasi fokus berurutan saat ini hanya didukung di Chrome 50, Firefox, dan Opera. Hingga didukung di semua browser, Anda masih perlu menambahkan tabindex="-1" (dan menghapus garis batas fokus) ke target anchor bernama.
Demo
Titik awal navigasi fokus berurutan adalah tambahan yang bagus untuk kumpulan primitif aksesibilitas browser. Ini mudah dipahami dan benar-benar memungkinkan kita menghapus kode dari aplikasi sekaligus meningkatkan pengalaman bagi pengguna. Keuntungan ganda! Lihat demo untuk menjelajahi fitur ini lebih dalam.