Scroller keyboard yang dapat difokuskan

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 "Persyaratan dan Ketentuan" kotak, di mana Anda perlu menggulir ke bawah untuk mengeklik tombol {i>submit<i}. Atau, Anda mungkin melihat panel menu vertikal yang berisi 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, {i>trackpad<i}, atau bukanlah cara optimal bagi setiap pengguna untuk menavigasi laman. 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-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 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 scroller yang dapat difokuskan

Fitur ini memungkinkan scroller tanpa set nilai tabindex yang ditetapkan dan tanpa anak yang dapat difokuskan agar keyboard dapat difokuskan. 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 {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 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.