Mulai Chrome 130, scroller dapat difokuskan keyboard secara default jika tidak memiliki anak yang dapat difokuskan keyboard.
Latar belakang
Scroller ada di mana-mana. Anda mungkin menemukannya di "Persyaratan dan Ketentuan" kotak, di mana Anda perlu menggulir ke bawah untuk mengeklik tombol {i>submit<i}. Atau, Anda mungkin menemui bilah menu vertikal yang penuh dengan ikon untuk dipilih.
Dalam kasus tersebut, banyak pengguna web menggunakan gerakan naik ke bawah dari {i>mouse<i} mereka atau touchpad untuk men-scroll elemen. Namun, perangkat penunjuk, {i>trackpad<i}, atau bukanlah cara optimal bagi setiap pengguna untuk menavigasi laman. Beberapa orang memilih untuk menavigasi melintasi laman HTML dengan mengakses setiap elemen yang dapat difokuskan menggunakan hanya menggunakan {i>keyboard<i}. Hal ini dapat terjadi karena berbagai alasan. Dari orang-orang yang memiliki tremor atau masalah lain yang menyulitkan pengoperasian {i>mouse<i}, mereka yang mengalami kesulitan menemukan kursor {i>mouse<i} secara visual, dan orang lain yang menggunakan satu tombol akses atau kontrol suara.
Praktik terbaik aksesibilitas merekomendasikan agar semua fitur harus tersedia menggunakan {i>keyboard<i}. Dengan cara ini, semua orang dapat menggunakan web dengan cara yang paling sesuai kepada mereka.
2.1.1 Keyboard: Semua fungsi konten dapat dioperasikan melalui antarmuka keyboard tanpa memerlukan pengaturan waktu khusus untuk penekanan tombol individual, kecuali bila fungsi yang mendasarinya memerlukan input yang bergantung pada jalur bergerak dan bukan hanya titik akhir. (Tingkat A)
Sebelum perubahan ini untuk berfokus pada scroller
Sebelum perubahan ini, elemen scroller hanya dapat difokuskan tab jika tabindex secara eksplisit ditetapkan 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 dalam HTML berikut, scroller akan menjadi 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 mungkin akan kesulitan menggunakannya navigasi fokus berurutan untuk mengakses scroller. Hal ini bisa sangat menjengkelkan bagi 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 pengguliran ketika anak-anak yang dapat fokus. 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 set nilai tabindex yang disetel dan tanpa anak yang dapat difokuskan agar keyboard dapat difokuskan. Hal ini memungkinkan pengguna yang tidak dapat atau memilih untuk tidak menggunakan mouse untuk memfokuskan konten menggunakan tab dan panah keyboard tombol.
<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 {i>scroller<i} sudah berisi sebuah tombol, maka fokus tab akan lewati scroller dan fokus pada tombol secara langsung. Dalam hal ini, scroller konten sudah dapat diakses menggunakan tombol panah, setelah tombol tetap fokus. Karena aturan ini, perilaku default mungkin tidak selalu memiliki optimal jika terdapat anak-anak tersebut. Jika Anda ingin elemen scroller itu sendiri agar keyboard dapat difokuskan dalam situasi ini, sebaiknya setel tabindex bernilai 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 scroller untuk bisa diakses dari keyboard secara default dalam semua kasus, yang akan membantu pengguna web memiliki pengalaman yang lebih lancar sebuah halaman.