Area Pengguliran Khusus Keyboard — Adrian Roselli
totosgp

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:



Pada 0:03 saya menempatkan fokus pada area gulir dengan tab ke sana, kemudian saya menggunakan tombol panah untuk menggulir ke kiri dan kanan.





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 AwalPengaturanAkses mudahMenampilkanSembunyikan bilah gulir secara otomatis di Windows dan atur ke “Off”. Di Windows 11, gunakan AwalPengaturanAksesibilitasEfek visualSelalu 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:



Saya menghabiskan dua detik pertama mencoba tab ke area gulir tanpa hasil. Pada 0:04 saya mengetik di kotak teks sehingga Anda dapat melihat indikator kursor teks dengan ujung ungu besar. Pada 0:09 saya tekan F7 untuk mengaktifkan penjelajahan tanda sisipan dan menghabiskan sisa video menggunakan tombol panah untuk memindahkan kursor teks. Perhatikan bagaimana panah bawah bergerak di dalam dan kemudian di antara sel, dan perhatikan bagaimana seluruh sel tidak bergulir ke tampilan hanya karena kursor teks ada di dalamnya (jelas pada 0:32).


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.



Area Pengguliran Khusus Keyboard — Adrian Roselli





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:



Saya menghabiskan 13 detik pertama mencoba tab ke area gulir atau menggulirnya menggunakan panah tanpa hasil. Pada 0:13 saya menekan F7 untuk mengkonfirmasi tidak ada navigasi tanda sisipan. Pada 0:21 saya mengaktifkan Mouse Keys dengan menekan lima kali. Lalu saya tahan K untuk memindahkan penunjuk tetikus ke dalam tabel dan tekan Saya di 0:32. Kemudian saya menggunakan tombol panah untuk menggulir ke kiri dan kanan.


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.




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



Sebuah keyboard melengkung dengan sepasang wortel, sayuran masih menempel, bertumpu di atasnya, dan bukannya layar komputer adalah gulungan papirus kosong yang belum dibuka.
Apa yang Anda dapatkan jika Anda meminta AI untuk menunjukkan cara menggulir di komputer dengan tanda sisipan.


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.




Tag

aksesibilitas, browser, Edge, Firefox, Safari, kegunaan, UX

Postingan Lainnya

Postingan sebelumnya: A11yship Performatif dari #GAAD

Karena cuma mampu tergantung kepada pihak yang sedia kan information togel sedney saja yang dapat memperoleh knowledge sgp lengkap. Lantas bersama dengan sukar nya membuka website togel singapore pools terhadap negara +62. Maka alangkah baiknya berlangganan pada halaman ini untuk mendapatkan knowledge keluaran sgp hari ini live tercepat hanya disini.