Mulai Chrome 124, scroller dapat difokuskan keyboard secara default jika tidak memiliki turunan yang dapat difokuskan keyboard.
Latar belakang
Scroller ada di mana-mana. Anda mungkin menemukannya di kotak "Persyaratan dan Ketentuan", yang mengharuskan Anda men-scroll ke bawah untuk mengklik tombol kirim. Atau, Anda mungkin menemukan panel menu vertikal penuh dengan ikon untuk dipilih.
Dalam kasus seperti itu, banyak pengguna web menggunakan gerakan naik turun dari mouse atau touchpad untuk men-scroll seluruh elemen. Namun, perangkat pointer, trackpad, atau layar sentuh bukanlah cara optimal untuk menavigasi halaman bagi setiap pengguna. Beberapa orang lebih suka bernavigasi di halaman HTML dengan mengakses setiap elemen yang dapat difokuskan hanya dengan menggunakan keyboard mereka. Hal ini bisa terjadi karena berbagai alasan. Mulai dari orang yang mengalami tremor atau masalah lain yang menyulitkan pengoperasian mouse, mereka yang kesulitan menemukan kursor mouse secara visual, dan orang lain yang menggunakan satu tombol akses atau kontrol suara.
Praktik terbaik aksesibilitas merekomendasikan agar semua fitur harus tersedia menggunakan keyboard. Dengan cara ini, semua orang dapat menggunakan web dengan cara yang paling sesuai bagi mereka.
2.1.1 Keyboard: Semua fungsi konten dapat dioperasikan melalui antarmuka keyboard tanpa memerlukan pengaturan waktu tertentu untuk setiap penekanan tombol, kecuali jika fungsi yang mendasarinya memerlukan input yang bergantung pada jalur gerakan pengguna, bukan hanya endpoint. (Tingkat A)
Sebelum perubahan ini untuk berfokus pada scroller
Sebelum perubahan ini, elemen scroller hanya dapat difokuskan tab jika tabindex secara eksplisit disetel ke 0 atau lebih tinggi. Misalnya, gunakan CSS dan HTML berikut. Kemudian, coba untuk beralih dari tombol pertama ke elemen scroller.
div.scroll, button {
border: 1px solid lightgray;
margin-top: 1em;
border-radius: 0.5em;
}
div.scroll {
overflow: auto;
width: 20em;
height: 5em;
display: block;
}
div.long {
width: 10em;
height: 10em;
}
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>
Dengan menggunakan tabindex negatif seperti dalam HTML berikut, scroller akan dilewati.
<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
Jika Anda tidak menetapkan nilai tabindex, pengguna akan kesulitan menggunakan navigasi fokus berurutan untuk mengakses scroller. Ini bisa sangat menyulitkan pengguna yang tidak memiliki akses ke {i>mouse<i}.
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
Perhatikan bahwa scroller yang berisi turunan yang dapat difokuskan, seperti dalam HTML berikut, sudah dapat diakses, karena tombol panah akan memungkinkan scroll saat turunan yang dapat difokuskan difokuskan. Tidak ada perilaku yang diubah dalam kasus ini.
<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Dari Chrome 124 dengan scroller yang dapat difokuskan
Fitur ini memungkinkan scroller tanpa nilai tabindex yang ditetapkan dan tanpa turunan yang dapat difokuskan agar dapat difokuskan keyboard. Hal ini memungkinkan pengguna yang tidak dapat atau memilih untuk tidak menggunakan mouse untuk memfokuskan konten menggunakan tab dan tombol panah pada keyboard.
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>
Perlu diperhatikan bahwa perilaku ini hanya terjadi jika scroller tidak memiliki turunan yang dapat difokuskan. Misalnya, jika scroller sudah berisi tombol, fokus tab akan melewati scroller dan berfokus langsung pada tombol. Dalam hal ini, konten scroller sudah dapat diakses menggunakan tombol panah, setelah tombol difokus. Karena aturan ini, default-nya mungkin tidak selalu berperilaku secara optimal jika ada turunan seperti itu. Jika Anda ingin elemen scroller itu sendiri dapat difokuskan ke keyboard dalam situasi ini, sebaiknya tetapkan nilai tabindex ke 0 atau yang lebih tinggi.
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Fitur ini memungkinkan scroller menjadi dapat diakses keyboard secara default dalam semua kasus, sehingga pengguna web akan mendapatkan pengalaman yang lebih lancar saat tab menavigasi di halaman.