Area Pengguliran Khusus Keyboard — Adrian Roselli

Saya telah menghabiskan beberapa tahun untuk memastikan area gulir pada halaman dapat diakses oleh pengguna keyboard saja. Ini sebagian karena istilah “keyboard” memetakan ke jenis input lain yang kami saring ke “keyboard” untuk kemudahan referensi (input ucapan, sip-and-puff, keyboard di layar, perangkat lunak pemindaian, dll.). Ketika sesuatu tidak dapat dioperasikan dengan keyboard, sejumlah besar pengguna diblokir.

Teknik paling umum untuk membuat area pengguliran berfungsi untuk keyboard adalah dengan memberinya tabindex. Setelah memiliki fokus, tombol panah dapat menggulir ke atas dan ke bawah, ke kiri dan ke kanan. Ini memperhitungkan area pengguliran tanpa kontrol interaktif untuk mengambil fokus dari a tabatau saat mengarahkan panah melalui kontrol tersebut juga menetapkan nilainya (tombol radio, menu pilih) atau memicu tindakan (tombol radio rusak atau menu pilih).

Namun, setelah area umum ini dapat menerima fokus, kita harus membahas bagaimana hal itu memengaruhi pengguna pembaca layar. Itu harus memiliki nama yang dapat diakses sehingga pembaca layar dapat mengumumkannya. Untuk memiliki nama yang dapat diakses, itu juga harus memiliki peran yang sesuai, yang juga membawa instruksi interaksi apa pun (saya menggunakan region karena ini adalah tengara umum).

Ingat banyak area yang tidak di-scroll sampai sesuatu terjadi. Perubahan viewport, konten dinamis, atau tindakan lain dapat menyebabkan area konten berubah ukuran dengan cepat dan kemudian menghasilkan scrollbar.

Ini semua berarti pengguna pembaca layar mendapatkan antarmuka verbose saat kami bekerja untuk mendukung pengguna hanya keyboard, bahkan ketika area itu belum bergulir.

Solusi untuk Pengguna

Sebagai pengguna keyboard, kabar baiknya adalah Anda bisa manfaatkan area gulir tanpa tabindex, peran, dan nama yang dapat diakses diikat ke setiap instance. Berikut adalah tiga metode.

Beralih ke Firefox

Firefox memperlakukan area pengguliran sebagai tab-stop secara default. Ini berarti Anda dapat tab ke sana dan kemudian menggunakan tombol panah untuk menggulir.

Fitur ini diminta dan seharusnya ditambahkan di Chromium pada 2018, tetapi dinonaktifkan seminggu kemudian, dan terus menjadi masalah terbuka. Dengan kata lain, itu tidak akan segera datang. Saya tidak dapat menemukan fitur dalam pengembangan atau bug terkait untuk Safari.

Video ini menunjukkan bagaimana Firefox mengalami area gulir halaman:

Aktifkan Penjelajahan Caret di Chrome, Edge, atau Firefox

Masing-masing Chrome, Edge, dan Firefox memungkinkan Anda menavigasi halaman web dengan kursor teks (tanda sisipan). Anda dapat mengarahkan panah melalui halaman, ke area gulir, dan kemudian menggunakan tombol panah untuk membuatnya menggulir.

Untuk melihat area pengguliran yang lebih baik di Windows 10, buka Awal → Pengaturan → Akses mudah → Menampilkan → Sembunyikan bilah gulir secara otomatis di Windows dan atur ke “Off”. Di Windows 11, gunakan Awal → Pengaturan → Aksesibilitas → Efek visual → Selalu tampilkan bilah gulir dan atur ke “Aktif”.

Untuk mencoba penjelajahan tanda sisipan, tekan F7 di browser Anda dan mulai panah.

Ada beberapa hal yang perlu diperhatikan:

• Gaya fokus dan fokus-dalam tidak akan dipicu.
• Menempatkan tanda sisipan ke dalam area bergulir tidak berarti area tersebut memiliki fokus.
• Area hanya bergulir ketika kursor teks Anda akan pindah ke bagian konten yang tersembunyi, yang masih bisa banyak menekan tombol hanya untuk melihat konten.
• Jika fokus sudah pada input teks, Anda tidak bisa hanya melewatinya; Anda harus keluar darinya dan kemudian panah dari mana pun Anda mendarat.
• Jika Anda mengatur indikator kursor teks atau ketebalan kursor teks di pengaturan aksesibilitas Windows, indikator tersebut tidak diterapkan di sini.

Video ini menunjukkan Edge di Windows menggunakan kursor teks dengan pengaturan aksesibilitas kursor teks yang digunakan:

Untuk beberapa konteks, berikut adalah kursor teks di Windows 11 dengan indikator yang lebih jelas dan garis yang lebih tebal. Perhatikan bagaimana kursor penjelajahan caret tidak terlihat seperti itu, sebagai gantinya mempertahankan garis setebal satu piksel.

Safari: Gunakan Tombol Mouse

Jika Anda menggunakan macOS dan menggunakan Firefox, Anda masih dapat membuka tab ke area gulir. Jika Anda menggunakan Chrome, Edge, atau Firefox, Anda dapat menggunakan penjelajahan caret. Tetapi jika Anda menggunakan Safari, Anda harus mengandalkan macOS itu sendiri untuk meniru mouse (Akses Keyboard Penuh tidak digunakan di sini).

Pertama, Anda harus mengaktifkan Tombol Mouse. Kemudian Anda dapat menggunakan keyboard atau papan angka untuk menggerakkan penunjuk tetikus ke posisinya di atas area pengguliran. Kemudian gunakan keyboard atau papan angka untuk mensimulasikan klik mouse, yang pada dasarnya memberikan fokus virtual pada area pengguliran. Dari sana Anda dapat menggunakan tombol panah untuk menggulir area itu sendiri.

Untuk menemukan area pengguliran yang lebih baik di macOS, Anda mungkin ingin masuk ke System Preferences → General → Show Scroll Bars dan atur ke “Always”.

Jika Anda adalah pengguna dengan gangguan mobilitas, ada cara lain untuk menggulir area yang mungkin jauh lebih mudah daripada memalu keyboard, tetapi semuanya didasarkan pada juga meniru mouse. Joystick, sakelar, suara, ekspresi wajah, dan sebagainya.

Video ini menunjukkan pengaturan Tombol Mouse fokus virtual untuk memungkinkan pengguliran:

Jika Anda tidak memiliki papan angka, Anda mungkin perlu menonaktifkan Tombol Mouse segera setelah menggunakannya (tekan lima kali). Jika tidak, lain kali Anda mulai mengetik di kotak teks, Anda mungkin akan terkejut ketika beberapa huruf dan angka tidak muncul (7, 8, 9, kamu, HAI, J, K, L, Saya, Mdan .).

Solusi untuk Pengembang

Mengingat semua informasi di atas, sebagai pengembang kita perlu mempertimbangkan hal ini dengan apa yang kita ketahui dan dapat temukan. Ini melibatkan pemahaman tujuan area pengguliran, titik halaman, alasan keseluruhan situs, pola yang ada di layar dalam situs, dan seterusnya.

Ini juga melibatkan pemahaman profil teknologi pengguna kami, suasana hati, tingkat stres, kenyamanan dengan teknologi, keterampilan dengan yang sama, kemauan untuk bereksperimen, toleransi terhadap kesalahan, dan sebagainya.

anekdata

Secara anekdot, saya menemukan sebagian besar pengguna tidak menyadari adanya penjelajahan caret. Berapa banyak pengguna dengan gangguan mobilitas yang tahu keberadaannya tidak diketahui oleh saya, setidaknya tanpa upaya penelitian yang lebih formal.

Jajak pendapat Twitter, yang jelas sangat ilmiah:

Apakah Anda menggunakan penjelajahan caret di browser Anda?

Dari 672 responden, 79,2% atau 532 responden tidak mengetahui apa itu caret browsing. Hanya 25, atau 3,7%, yang menggunakan penjelajahan caret. Persentase tersebut tetap konsisten selama 24 jam jajak pendapat berjalan.

Cobalah

Gunakan contoh ini untuk menguji teknik penelusuran tanda sisipan atau emulasi mouse Anda sendiri. Ini adalah apa yang saya gunakan untuk video di atas. Perhatikan wadah gulir memiliki keduanya :focus dan :focus-within gaya. Kunjungi versi debug bebas dari pembungkus cruft untuk mencobanya.

Lihat Tabel Pen Caret oleh Adrian Roselli (@aardrian) di CodePen.

Dakwaan

Jika saya membuat layar untuk sekelompok kecil pengguna dalam organisasi yang distandarisasi pada Microsoft Windows dan saya berada dalam posisi untuk melatih pengguna tersebut, maka saya akan mempertimbangkan untuk membatalkan tabindex / peran / accName pendekatan.

Jika saya sedang membangun situs yang menghadap publik di mana informasi penting dapat berada di area gulir yang dapat digunakan oleh siapa saja yang menggunakan browser apa pun di platform apa pun, dan saya tidak akan pernah mengenal mereka dan mereka mungkin tidak akan pernah kembali, maka saya masih bersandar pada tabindex / peran / nama acc.

Sampai Apple mengimplementasikan penjelajahan caret untuk Safari dan kami memiliki beberapa kenyamanan audiens kami menggunakan penjelajahan caret (atau semuanya menggunakan Firefox), pengguna pembaca layar akan terjebak dengan antarmuka pengguliran yang terlalu bertele-tele. Dengan ironi tambahan bahwa pengguna pembaca layar buta bahkan tidak akan tahu itu bergulir.