Mulai Chrome 130, 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", tempat Anda harus men-scroll ke bawah untuk mengklik tombol kirim. Atau, Anda mungkin melihat panel menu vertikal yang penuh dengan ikon yang dapat dipilih.
Dalam kasus tersebut, banyak pengguna web menggunakan gerakan atas bawah dari mouse atau touchpad untuk men-scroll di seluruh elemen. Namun, perangkat pointer, 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 lainnya yang menyulitkan pengoperasian mouse, mereka yang mengalami kesulitan menemukan kursor mouse secara visual, dan pengguna 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 yang mendasarinya memerlukan input yang bergantung pada jalur gerakan pengguna, bukan hanya endpoint. (Level A)
Sebelum perubahan ini untuk berfokus pada scroller
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 lakukan tab 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>
Menggunakan tabindex negatif seperti pada 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 menyetel nilai tabindex, pengguna akan kesulitan menggunakan navigasi fokus berurutan untuk mengakses scroller. 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. 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 130 dengan scroller 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 sebesar 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.