Mulai Chrome 130, scroller secara default dapat difokuskan dengan keyboard jika tidak memiliki turunan yang dapat difokuskan dengan keyboard.
Latar belakang
Scroller ada di mana-mana. Anda mungkin menemukannya di kotak "Persyaratan dan Ketentuan", tempat Anda perlu men-scroll ke bawah untuk mengklik tombol kirim. Atau, Anda mungkin melihat panel menu vertikal yang berisi banyak ikon untuk dipilih.
Dalam kasus tersebut, banyak pengguna web menggunakan gerakan atas bawah dari mouse atau touchpad untuk men-scroll di seluruh elemen. Namun, perangkat penunjuk, trackpad, atau layar sentuh bukanlah cara optimal bagi setiap pengguna untuk membuka halaman. Beberapa orang lebih memilih untuk menavigasi halaman HTML yang mengakses setiap elemen yang dapat difokuskan hanya menggunakan keyboard. Hal ini dapat terjadi karena berbagai alasan. Dari orang yang mengalami tremor atau masalah lain yang menyulitkan pengoperasian mouse, orang yang kesulitan menemukan kursor mouse secara visual, dan orang lain yang menggunakan satu tombol atau kontrol suara.
Praktik terbaik aksesibilitas merekomendasikan bahwa semua fitur harus tersedia menggunakan keyboard. Dengan begitu, semua orang dapat menggunakan web dengan cara yang paling sesuai untuk 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 pokok memerlukan input yang bergantung pada jalur gerakan pengguna, bukan hanya endpoint. (Level A)
Sebelum perubahan ini untuk berfokus pada penggeser
Sebelum perubahan ini, elemen penggeser hanya dapat difokuskan tab jika tabindex ditetapkan secara eksplisit ke 0 atau lebih tinggi. Misalnya, gunakan CSS dan HTML berikut. Kemudian, coba tekan tombol tab dari tombol pertama ke elemen penggeser.
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, penggeser akan dilewatkan.
<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 mungkin akan kesulitan menggunakan navigasi fokus berurutan untuk mengakses penggeser. Hal ini dapat sangat menjengkelkan bagi pengguna yang tidak memiliki akses ke mouse.
<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. Dalam hal ini, tidak ada perilaku yang diubah.
<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 130 dengan penggeser yang dapat difokuskan
Fitur ini memungkinkan scroller tanpa nilai tabindex yang ditetapkan dan tanpa turunan yang dapat difokuskan untuk dapat difokuskan keyboard. Hal ini memungkinkan pengguna yang tidak dapat atau memilih untuk tidak menggunakan mouse memfokuskan konten menggunakan tombol tab dan panah 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>
Perhatikan bahwa perilaku ini hanya terjadi jika scroller tidak memiliki turunan yang dapat difokuskan. Misalnya, jika scroller sudah berisi tombol, fokus tab akan mengabaikan scroller dan langsung berfokus pada tombol. Dalam hal ini, konten scroll sudah dapat diakses menggunakan tombol panah, setelah tombol difokuskan. Karena aturan ini, default mungkin tidak selalu berperilaku dengan cara yang paling optimal jika turunan tersebut ada. Jika Anda ingin elemen scroller itu sendiri dapat difokuskan dengan keyboard dalam situasi ini, sebaiknya tetapkan nilai tabindex ke 0 atau 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 penggeser dapat diakses dengan keyboard secara default dalam semua kasus, yang akan membantu pengguna web mendapatkan pengalaman yang lebih lancar saat tab menavigasi di seluruh halaman.