Hilangkan sakit kepala dari pengelolaan fokus

Fitur 'titik awal navigasi fokus berurutan' menentukan tempat kita mulai menelusuri elemen yang dapat difokuskan untuk navigasi fokus berurutan ([Tab] atau [Shift-Tab]) saat tidak ada area yang difokuskan. Ini sangat membantu untuk fitur aksesibilitas seperti "lewati link" dan mengelola fokus dalam dokumen.

HTML memberi kita banyak dukungan bawaan untuk berurusan dengan interaksi keyboard, yang berarti cukup mudah untuk menulis halaman yang dapat digunakan melalui keyboard - apakah gangguan motorik mencegah kita menggunakan mouse, atau kita hanya terlalu efisien melepaskan tangan dari keyboard yang sangat berharga dalam hitungan milidetik.

Penanganan keyboard berkisar pada fokus, yang menentukan ke mana peristiwa keyboard akan berada di halaman. Ada beberapa situasi yang membuat kita masih perlu melakukan upaya tambahan agar semuanya berfungsi dengan baik bagi pengguna keyboard. Metode focus() memungkinkan kita mengelola fokus dengan memilih elemen yang akan difokuskan secara selektif sebagai respons terhadap tindakan pengguna. Namun, praktik terbaik ini mengalami banyak kesalahan dan membutuhkan sedikit peretas JavaScript untuk memberikan pengalaman dasar.

Meskipun teknik ini tidak akan benar-benar hilang dalam waktu dekat, di Chrome 50, teknik ini akan diperlukan dalam kasus yang lebih sedikit berkat Titik Mulai Navigasi Fokus Sekuensial. Dengan perubahan ini, halaman yang ditulis dengan baik akan otomatis menjadi lebih mudah diakses tanpa memerlukan pengelolaan fokus manual tambahan. Mari kita lihat sebuah contoh.

Situs yang penuh teks sering kali saling tertaut di dalam halaman yang sama untuk membantu pengguna beralih ke bagian penting dengan cepat.

<!-- 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 pengguna {i>keyboard<i} (dan suka makan makanan Australia), rangkaian tindakan saya berikutnya adalah seperti ini:

  • Tekan Tab dua kali untuk memfokuskan link Resep
  • Tekan Enter untuk langsung ke bagian Resep
  • Tekan Tab lagi untuk memfokuskan link Baca Selengkapnya

Mari kita lihat itu beraksi menggunakan Chrome 49.

Oh. Tidak berjalan sesuai rencana, bukan?

Bukannya memfokuskan link Baca Selengkapnya, menekan Tab untuk terakhir kali akan memindahkan fokus ke item berikutnya dalam daftar isi. Hal ini karena developer tidak menetapkan tabindex="-1" pada header untuk membuatnya dapat difokuskan. Jadi, mengklik anchor bernama #recipes tidak akan memindahkan fokus. Ini adalah kesalahan kecil, dan bukan masalah besar jika Anda adalah pengguna {i>mouse<i}. Tetapi ini berpotensi menjadi masalah yang sangat besar jika Anda adalah pengguna {i>keyboard<i} atau pengguna perangkat {i>switch<i}. Pertimbangkan jumlah penautan pada halaman Wikipedia biasa? Sungguh frustrasi jika Anda harus terus-menerus berpindah-pindah di antara semua anchor tersebut.

Mari kita lihat pengalaman yang sama saat menggunakan Chrome 50.

Wow, itulah yang kami inginkan, dan yang terpenting, kami tidak perlu mengubah kode kami. Browser baru tahu ke mana fokus harus diarahkan berdasarkan posisi kami di dokumen.

Bagaimana caranya?

Sebelum penerapan titik awal fokus, fokus akan selalu berpindah dari elemen terfokus sebelumnya, atau bagian atas halaman. Ini berarti bahwa memilih apa yang menjadi fokus berikutnya dapat melibatkan pemindahan fokus ke sesuatu yang seharusnya tidak benar-benar dapat difokuskan, seperti elemen kontainer atau judul. Hal ini menyebabkan segala macam keanehan, termasuk menampilkan lingkaran fokus jika Anda kebetulan mengklik elemen tersebut dengan iseng.

Titik awal fokus, seperti namanya, menyediakan mekanisme untuk menyarankan tempat untuk mulai mencari elemen yang dapat difokuskan berikutnya saat kita menekan Tab atau Shift-Tab.

Ini dapat disetel dengan beberapa cara: Jika sesuatu memiliki fokus, itu juga merupakan titik awal navigasi fokus, seperti sebelumnya. Selain itu, seperti sebelumnya, jika tidak ada lagi yang menetapkan titik awal navigasi fokus, maka titik awal navigasi fokus akan menjadi document saat ini atau, jika tersedia dan didukung, dialog yang saat ini aktif. Jika kita membuka fragmen halaman seperti dalam contoh di atas, tindakan tersebut sekarang akan menetapkan titik awal fokus. Selain itu, jika kita mengklik elemen apa pun pada halaman, terlepas dari apakah elemen tersebut dapat difokuskan, hal 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 perlu fokus lagi!

Kasus penggunaan lainnya

Selain contoh di atas, ada banyak skenario lain di mana fitur ini bisa berguna.

Menyembunyikan elemen

Ada saatnya pengguna akan fokus pada item yang perlu disetel ke visibility: hidden atau display: none. Contohnya adalah item yang dapat diklik dalam korsel. Pada versi Chrome sebelumnya, menyembunyikan item yang saat ini difokuskan dengan cara ini akan mereset fokus kembali ke titik awal default, yang mengubah carousel tersebut menjadi jebakan yang menjengkelkan bagi pengguna dengan gangguan motorik. Dengan titik awal fokus berurutan, hal ini tidak lagi berlaku. Jika elemen disembunyikan melalui salah satu metode di atas, menekan tombol Tab hanya akan berpindah ke item berikutnya yang dapat difokuskan.

Link lewati adalah anchor tak terlihat yang hanya dapat dijangkau melalui keyboard. Mereka memungkinkan pengguna untuk "melewati" elemen navigasi untuk langsung melompat ke konten halaman dan mereka bisa sangat bermanfaat bagi keyboard dan beralih perangkat pengguna. Seperti yang dijelaskan di situs WebAIM

Banyak situs web populer menerapkan link lewati, meskipun Anda mungkin tidak pernah menyadarinya.

Link lewati di GitHub.com

Karena diberi nama anchor, link lewati berfungsi dengan cara yang sama seperti contoh daftar isi asli.

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 harus menambahkan tabindex="-1" (dan menghapus garis fokus) ke target anchor bernama.

Demo

Titik awal navigasi fokus berurutan merupakan tambahan yang bagus untuk rangkaian primitif aksesibilitas browser. Sangat mudah untuk melakukan grok dan sebenarnya memungkinkan kita menghapus kode dari aplikasi sekaligus meningkatkan pengalaman bagi pengguna. Kemenangan ganda! Lihat demo untuk mempelajari fitur ini lebih mendalam.