Interaksi keyboard

Pelajari cara merancang dan mengoptimalkan aplikasi Windows Anda sehingga mereka memberikan pengalaman terbaik bagi pengguna daya keyboard dan penyandang disabilitas dan persyaratan aksesibilitas lainnya.

Di seluruh perangkat, input keyboard adalah bagian penting dari keseluruhan pengalaman interaksi aplikasi Windows. Pengalaman keyboard yang dirancang dengan baik memungkinkan pengguna menavigasi UI aplikasi Anda secara efisien dan mengakses fungsionalitas penuhnya tanpa pernah mengangkat tangan mereka dari keyboard.

Pola interaksi umum dibagikan antara keyboard dan gamepad

Dalam topik ini, kami berfokus khusus pada desain aplikasi Windows untuk input keyboard pada PC. Namun, pengalaman keyboard yang dirancang dengan baik penting untuk mendukung alat aksesibilitas seperti Windows Narrator, menggunakan keyboard perangkat lunak seperti keyboard sentuh dan Keyboard Layar (OSK), dan untuk menangani jenis perangkat input lainnya, seperti pad permainan atau kontrol jarak jauh.

Banyak panduan dan rekomendasi yang dibahas di sini, termasuk visual fokus, kunci akses, dan navigasi UI, juga berlaku untuk skenario lain ini.

CATATAN Sementara keyboard perangkat keras dan perangkat lunak digunakan untuk input teks, fokus topik ini adalah navigasi dan interaksi.

Dukungan bawaan

Seiring dengan mouse, keyboard adalah periferal yang paling banyak digunakan pada PC dan, dengan demikian, adalah bagian mendasar dari pengalaman PC. Pengguna PC mengharapkan pengalaman yang komprehensif dan konsisten dari sistem dan aplikasi individual sebagai respons terhadap input keyboard.

Semua kontrol UWP mencakup dukungan bawaan untuk pengalaman keyboard yang kaya dan interaksi pengguna, sementara platform itu sendiri menyediakan fondasi yang luas untuk menciptakan pengalaman keyboard yang Anda rasa paling cocok untuk kontrol dan aplikasi kustom Anda.

UWP mendukung keyboard dengan perangkat apa pun

Pengalaman dasar

Seperti disebutkan sebelumnya, perangkat input seperti pad game dan remote control, dan alat aksesibilitas seperti Narator, berbagi banyak pengalaman input keyboard untuk navigasi dan perintah. Pengalaman umum di seluruh jenis input dan alat ini meminimalkan pekerjaan tambahan dari Anda dan berkontribusi pada tujuan "bangun sekali, jalankan di mana saja" dari Platform Windows Universal.

Jika perlu, kami akan mengidentifikasi perbedaan utama yang harus Anda ketahui dan menjelaskan mitigasi apa pun yang harus Anda pertimbangkan.

Berikut adalah perangkat dan alat yang dibahas dalam topik ini:

Perangkat/alat	Deskripsi
Keyboard (perangkat keras dan perangkat lunak)	Selain keyboard perangkat keras standar, aplikasi Windows mendukung dua keyboard perangkat lunak: keyboard sentuhan (atau perangkat lunak) dan Keyboard Layar.
Game pad dan remote control	Pad game dan remote control adalah perangkat input mendasar dalam pengalaman 10 kaki. Untuk detail spesifik tentang dukungan Windows untuk game pad dan remote control, lihat Game pad dan interaksi kontrol jarak jauh.
Pembaca layar (Narator)	Narator adalah pembaca layar bawaan untuk Windows yang menyediakan pengalaman dan fungsionalitas interaksi unik, tetapi masih bergantung pada navigasi dan input keyboard dasar. Untuk detail Narator, lihat Mulai menggunakan Narator.

Pengalaman kustom dan keyboarding yang efisien

Seperti disebutkan, dukungan keyboard adalah integral untuk memastikan aplikasi Anda bekerja dengan baik untuk pengguna dengan keterampilan, kemampuan, dan harapan yang berbeda. Kami menyarankan agar Anda memprioritaskan hal berikut.

• Mendukung navigasi dan interaksi keyboard
  • Pastikan item yang dapat ditindaklanjuti diidentifikasi sebagai perhentian tab (dan item yang tidak dapat ditindaklanjuti tidak), dan urutan navigasi logis dan dapat diprediksi (lihat Perhentian tab)
  • Atur fokus awal pada elemen paling logis (lihat Fokus awal)
  • Menyediakan navigasi tombol panah untuk "navigasi dalam" (lihat Navigasi)
• Mendukung pintasan keyboard
  • Menyediakan kunci akselerator untuk tindakan cepat (lihat Akselerator)
  • Berikan kunci akses untuk menavigasi UI aplikasi Anda (lihat Kunci akses)

Visual fokus

UWP mendukung desain visual fokus tunggal yang berfungsi dengan baik untuk semua jenis dan pengalaman input.

Visual fokus:

• Ditampilkan saat elemen UI menerima fokus dari keyboard dan/atau gamepad/remote control
• Dirender sebagai batas yang disorot di sekitar elemen UI untuk menunjukkan tindakan dapat diambil
• Membantu pengguna menavigasi UI aplikasi tanpa tersesat
• Dapat disesuaikan untuk aplikasi Anda (Lihat Visual fokus visibilitas tinggi)

CATATAN Visual fokus UWP tidak sama dengan persegi panjang fokus Narator.

Perhentian tab

Untuk menggunakan kontrol (termasuk elemen navigasi) dengan keyboard, kontrol harus memiliki fokus. Salah satu cara agar kontrol menerima fokus keyboard adalah dengan membuatnya dapat diakses melalui navigasi tab dengan mengidentifikasinya sebagai perhentian tab dalam urutan tab aplikasi Anda.

Agar kontrol disertakan dalam urutan tab, properti IsEnabled harus diatur ke true dan properti IsTabStop harus diatur ke true.

Untuk secara khusus mengecualikan kontrol dari urutan tab, atur properti IsTabStop ke false.

Secara default, urutan tab mencerminkan urutan di mana elemen UI dibuat. Misalnya, jika berisi StackPanelButton, , Checkboxdan TextBox, urutan tab adalah Button, Checkbox, dan TextBox.

Anda dapat mengambil alih urutan tab default dengan mengatur properti TabIndex .

Urutan tab harus logis dan dapat diprediksi

Model navigasi keyboard yang dirancang dengan baik, menggunakan urutan tab logis dan dapat diprediksi, membuat aplikasi Anda lebih intuitif dan membantu pengguna menjelajahi, menemukan, dan mengakses fungsionalitas dengan lebih efisien dan efektif.

Semua kontrol interaktif harus memiliki penghentian tab (kecuali jika berada dalam grup), sementara kontrol non-interaktif, seperti label, tidak boleh.

Hindari urutan tab kustom yang membuat fokus melompat-lompat di aplikasi Anda. Misalnya, daftar kontrol dalam formulir harus memiliki urutan tab yang mengalir dari atas ke bawah dan kiri ke kanan (tergantung lokal).

Lihat Aksesibilitas keyboard untuk detail selengkapnya tentang menyesuaikan perhentian tab.

Coba koordinasikan urutan tab dan urutan visual

Urutan tab koordinasi dan urutan visual (juga disebut sebagai urutan baca atau urutan tampilan) membantu mengurangi kebingungan bagi pengguna saat mereka menavigasi melalui UI aplikasi Anda.

Cobalah untuk memberi peringkat dan menyajikan perintah, kontrol, dan konten terpenting terlebih dahulu dalam urutan tab dan urutan visual. Namun, posisi tampilan aktual dapat bergantung pada kontainer tata letak induk dan properti tertentu dari elemen anak yang memengaruhi tata letak. Secara khusus, tata letak yang menggunakan metafora kisi atau metafora tabel dapat memiliki urutan visual yang sangat berbeda dari urutan tab.

CATATAN Urutan visual juga bergantung pada lokal dan bahasa.

Fokus awal

Fokus awal menentukan elemen UI yang menerima fokus saat aplikasi atau halaman pertama kali diluncurkan atau diaktifkan. Saat menggunakan keyboard, dari elemen inilah pengguna mulai berinteraksi dengan UI aplikasi Anda.

Untuk aplikasi UWP, fokus awal diatur ke elemen dengan TabIndex tertinggi yang dapat menerima fokus. Elemen turunan kontrol kontainer diabaikan. Dalam dasi, elemen pertama di pohon visual menerima fokus.

Atur fokus awal pada elemen paling logis

Atur fokus awal pada elemen UI untuk tindakan pertama, atau utama, yang kemungkinan besar akan diambil pengguna saat meluncurkan aplikasi Anda atau menavigasi ke halaman. Beberapa contoh termasuk:

• Aplikasi foto tempat fokus diatur ke item pertama di galeri
• Aplikasi musik tempat fokus diatur ke tombol putar

Jangan menetapkan fokus awal pada elemen yang mengekspos potensi negatif, atau bahkan bencana, hasil

Tingkat fungsionalitas ini harus menjadi pilihan pengguna. Mengatur fokus awal ke elemen dengan hasil yang signifikan dapat mengakibatkan kehilangan data atau akses sistem yang tidak diinginkan. Misalnya, jangan atur fokus ke tombol hapus saat menavigasi ke email.

Lihat Navigasi fokus untuk detail selengkapnya tentang urutan tab penggantian.

Navigasi

Navigasi keyboard biasanya didukung melalui tombol Tab dan tombol Panah.

Secara default, kontrol UWP mengikuti perilaku keyboard dasar ini:

• Tombol tab menavigasi antara kontrol yang dapat ditindakkan/aktif dalam urutan tab.
• Shift + Tab menavigasi kontrol dalam urutan tab terbalik. Jika pengguna telah menavigasi di dalam kontrol menggunakan tombol panah, fokus diatur ke nilai terakhir yang diketahui di dalam kontrol.
• Tombol panah mengekspos "navigasi dalam" khusus kontrol Saat pengguna memasukkan tombol panah "navigasi dalam"" tidak menavigasi keluar dari kontrol. Beberapa contohnya meliputi:
  • Tombol panah Atas/Bawah memindahkan fokus ke dalam ListView dan MenuFlyout
  • Ubah nilai yang saat ini dipilih untuk Slider dan RatingsControl
  • Pindahkan caret ke dalam TextBox
  • Perluas/ciutkan item di dalam TreeView

Gunakan perilaku default ini untuk mengoptimalkan navigasi keyboard aplikasi Anda.

Gunakan "navigasi dalam" dengan sekumpulan kontrol terkait

Menyediakan navigasi tombol panah ke dalam sekumpulan kontrol terkait memperkuat hubungan mereka dalam organisasi keseluruhan UI aplikasi Anda.

Misalnya, kontrol yang ContentDialog diperlihatkan di sini menyediakan navigasi dalam secara default untuk baris tombol horizontal (untuk kontrol kustom, lihat bagian Grup Kontrol).

Interaksi dengan kumpulan tombol terkait menjadi lebih mudah dengan navigasi tombol panah

Jika item ditampilkan dalam satu kolom, tombol panah Atas/Bawah akan menavigasi item. Jika item ditampilkan dalam satu baris, tombol panah Kanan/Kiri menavigasi item. Jika item adalah beberapa kolom, semua 4 tombol panah menavigasi.

Tentukan satu perhentian tab untuk kumpulan kontrol terkait

Dengan menentukan satu perhentian tab untuk kumpulan kontrol terkait, atau pelengkap, Anda dapat meminimalkan jumlah perhentian tab keseluruhan di aplikasi Anda.

Misalnya, gambar berikut menunjukkan dua kontrol bertumpuk ListView . Gambar di sebelah kiri memperlihatkan navigasi tombol panah yang digunakan dengan perhentian tab untuk menavigasi antar ListView kontrol, sementara gambar di sebelah kanan menunjukkan bagaimana navigasi antar elemen anak dapat dibuat lebih mudah dan lebih efisien dengan menghilangkan kebutuhan untuk melintasi kontrol induk dengan tombol tab.

Interaksi dengan dua kontrol ListView bertumpuk dapat dibuat lebih mudah dan lebih efisien dengan menghilangkan perhentian tab dan menavigasi hanya dengan tombol panah.

Kunjungi bagian Grup Kontrol untuk mempelajari cara menerapkan contoh pengoptimalan ke antarmuka pengguna aplikasi Anda.

Interaksi dan perintah

Setelah kontrol memiliki fokus, pengguna dapat berinteraksi dengannya dan memanggil fungsionalitas terkait menggunakan input keyboard tertentu.

Entri teks

Untuk kontrol tersebut yang dirancang khusus untuk input teks seperti TextBox dan RichEditBox, semua input keyboard digunakan untuk memasukkan atau menavigasi teks, yang lebih diprioritaskan daripada perintah keyboard lainnya. Misalnya, menu drop-down untuk AutoSuggestBox kontrol tidak mengenali tombol Spasi sebagai perintah pilihan.

Tombol spasi

Saat tidak dalam mode entri teks, tombol Spasi memanggil tindakan atau perintah yang terkait dengan kontrol yang difokuskan (sama seperti ketukan dengan sentuhan atau klik dengan mouse).

Masukkan kunci

Tombol Enter dapat melakukan berbagai interaksi pengguna umum, tergantung pada kontrol dengan fokus:

• Mengaktifkan kontrol perintah seperti Button atau Hyperlink. Untuk menghindari kebingungan pengguna akhir, tombol Enter juga mengaktifkan kontrol yang terlihat seperti kontrol perintah seperti ToggleButton atau AppBarToggleButton.
• Menampilkan UI pemilih untuk kontrol seperti ComboBox dan DatePicker. Tombol Enter juga menerapkan dan menutup UI pemilih.
• Mengaktifkan kontrol daftar seperti ListView, , GridViewdan ComboBox.
  • Tombol Enter melakukan tindakan pemilihan sebagai kunci Spasi untuk item daftar dan kisi, kecuali ada tindakan tambahan yang terkait dengan item ini (membuka jendela baru).
  • Jika tindakan tambahan dikaitkan dengan kontrol, tombol Enter melakukan tindakan tambahan dan tombol Spasi melakukan tindakan pemilihan.

PERHATIKAN Tombol Enter dan Tombol spasi tidak selalu melakukan tindakan yang sama, tetapi sering dilakukan.

Kunci esc

Kunci Esc memungkinkan pengguna membatalkan UI sementara (bersama dengan tindakan yang sedang berlangsung di UI tersebut).

Contoh pengalaman ini meliputi:

• Pengguna membuka ComboBox dengan nilai yang dipilih dan menggunakan tombol panah untuk memindahkan pilihan fokus ke nilai baru. Menekan tombol Esc menutup ComboBox dan mengatur ulang nilai yang dipilih kembali ke nilai asli.
• Pengguna memanggil tindakan penghapusan permanen untuk email dan diminta dengan ContentDialog untuk mengonfirmasi tindakan. Pengguna memutuskan ini bukan tindakan yang dimaksudkan dan menekan tombol Esc untuk menutup dialog. Karena kunci Esc dikaitkan dengan tombol Batalkan , dialog ditutup dan tindakan dibatalkan. Kunci Esc hanya memengaruhi UI sementara, tidak menutup, atau kembali menavigasi melalui UI aplikasi.

Tombol Home dan End

Kunci Beranda dan Akhir memungkinkan pengguna menggulir ke awal atau akhir wilayah UI.

Contoh pengalaman ini meliputi:

• Untuk ListView kontrol dan GridView , tombol Beranda memindahkan fokus ke elemen pertama dan menggulirnya ke tampilan, sedangkan tombol Akhir memindahkan fokus ke elemen terakhir dan menggulirnya ke tampilan.
• ScrollView Untuk kontrol, tombol Beranda menggulir ke bagian atas wilayah, sedangkan tombol Akhir menggulir ke bagian bawah wilayah (fokus tidak diubah).

Tombol Halaman atas dan Halaman bawah

Kunci Halaman memungkinkan pengguna menggulir wilayah UI dengan kenaikan diskrit.

Misalnya, untuk ListView kontrol dan GridView , tombol Halaman ke atas menggulir wilayah ke atas menurut "halaman" (biasanya tinggi viewport) dan memindahkan fokus ke bagian atas wilayah. Secara bergantian, tombol Halaman bawah menggulir wilayah ke bawah menurut halaman dan memindahkan fokus ke bagian bawah wilayah.

Pintasan keyboard

Pintasan keyboard dapat membuat aplikasi Anda lebih mudah digunakan dengan memberikan dukungan yang ditingkatkan untuk aksesibilitas dan peningkatan efisiensi bagi pengguna keyboard.

Selain mendukung navigasi dan aktivasi keyboard di aplikasi Anda, ada baiknya juga menyediakan pintasan untuk fungsionalitas aplikasi Anda. Navigasi tab menyediakan tingkat dukungan keyboard dasar yang baik, tetapi dengan antarmuka pengguna yang lebih kompleks Anda mungkin juga ingin menambahkan dukungan untuk tombol pintasan.

Pintasan adalah kombinasi keyboard yang meningkatkan produktivitas dengan menyediakan cara yang efisien bagi pengguna untuk mengakses fungsionalitas aplikasi. Ada dua jenis pintasan:

• Akselerator adalah pintasan yang memanggil perintah aplikasi. Aplikasi Anda mungkin atau mungkin tidak menyediakan UI tertentu yang sesuai dengan perintah. Akselerator biasanya terdiri dari tombol Ctrl ditambah kunci huruf.
• Kunci akses adalah pintasan yang mengatur fokus ke UI tertentu di aplikasi Anda. Kunci akses yang khas terdiri dari kunci Alt ditambah kunci huruf.

Menyediakan pintasan keyboard yang konsisten yang mendukung tugas serupa di seluruh aplikasi membuatnya jauh lebih berguna dan kuat dan membantu pengguna mengingatnya.

Akselerator

Akselerator membantu pengguna melakukan tindakan umum dalam aplikasi jauh lebih cepat dan efisien.

Contoh Akselerator:

• Menekan tombol Ctrl + N di mana saja di aplikasi Email meluncurkan item email baru.
• Menekan tombol Ctrl + E di mana saja di Microsoft Edge (dan banyak aplikasi Microsoft Store) meluncurkan pencarian.

Akselerator memiliki karakteristik berikut:

• Mereka terutama menggunakan urutan kunci Ctrl dan Function (tombol pintasan sistem Windows juga menggunakan tombol Alt + non-alfanumerik dan kunci logo Windows).
• Mereka hanya ditetapkan ke perintah yang paling umum digunakan.
• Mereka dimaksudkan untuk dihafal, dan hanya didokumenkan dalam menu, tipsalat, dan Bantuan.
• Mereka memiliki efek di seluruh aplikasi, ketika didukung.
• Mereka harus ditetapkan secara konsisten karena dihafal dan tidak didokumenkan secara langsung.

Kunci akses

Lihat Halaman kunci akses untuk informasi lebih mendalam untuk mendukung kunci akses dengan UWP.

Kunci akses membantu pengguna dengan disabilitas fungsi motorik kemampuan untuk menekan satu tombol pada satu waktu untuk bertindak pada item tertentu di UI. Selain itu, kunci akses dapat digunakan untuk mengomunikasikan kunci pintasan tambahan untuk membantu pengguna tingkat lanjut melakukan tindakan dengan cepat.

Kunci akses memiliki karakteristik berikut:

• Mereka menggunakan kunci Alt ditambah kunci alfanumerik.
• Mereka terutama untuk aksesibilitas.
• Mereka didokumenkan langsung di UI, berdekatan dengan kontrol, melalui Tips Kunci.
• Mereka hanya berpengaruh di jendela saat ini, dan menavigasi ke item atau kontrol menu yang sesuai.
• Kunci akses harus ditetapkan secara konsisten ke perintah yang umum digunakan (terutama tombol penerapan), jika memungkinkan.
• Mereka dilokalkan.

Pintasan keyboard umum

Tabel berikut adalah sampel kecil pintasan keyboard yang sering digunakan.

Tindakan	Perintah kunci
Pilih semua	Ctrl+A
Terus pilih	Shift+Tombol panah
Simpan	Ctrl+S
Find	Ctrl+F
Print	Ctrl+P
Menyalin	Ctrl+C
Cut	Ctrl+X
Tempel	Ctrl+V
Batalkan	Ctrl+Z
Tab Berikutnya	Ctrl+Tab
Tutup tab	Ctrl+F4 atau Ctrl+W
Zoom semantik	Ctrl++ atau Ctrl+-

Untuk daftar pintasan sistem Windows yang komprehensif, lihat pintasan keyboard untuk Windows. Untuk pintasan aplikasi umum, lihat pintasan keyboard untuk aplikasi Microsoft.

Pengalaman tingkat lanjut

Di bagian ini, kami membahas beberapa pengalaman interaksi keyboard yang lebih kompleks yang didukung oleh aplikasi UWP, bersama dengan beberapa perilaku yang harus Anda ketahui saat aplikasi Anda digunakan di perangkat yang berbeda dan dengan alat yang berbeda.

Grup kontrol

Anda dapat mengelompokkan sekumpulan kontrol terkait, atau pelengkap, dalam "grup kontrol" (atau area arah), yang memungkinkan "navigasi dalam" menggunakan tombol panah. Grup kontrol bisa menjadi perhentian tab tunggal, atau Anda dapat menentukan beberapa perhentian tab dalam grup kontrol.

Navigasi tombol panah

Pengguna mengharapkan dukungan untuk navigasi kunci panah ketika ada sekelompok kontrol terkait yang serupa di wilayah UI:

• AppBarButtons dalam CommandBar
• ListItems atau GridItems di dalam ListView atau GridView
• Buttons Dalam ContentDialog

Kontrol UWP mendukung navigasi kunci panah secara default. Untuk tata letak kustom dan grup kontrol, gunakan XYFocusKeyboardNavigation="Enabled" untuk memberikan perilaku serupa.

Pertimbangkan untuk menambahkan dukungan untuk navigasi tombol panah saat menggunakan kontrol berikut:

Tombol dialog RadioButtons

AppBarButtons ListItems dan GridItems

Perhentian tab

Bergantung pada fungsionalitas dan tata letak aplikasi Anda, opsi navigasi terbaik untuk grup kontrol mungkin merupakan perhentian tab tunggal dengan navigasi panah ke elemen anak, beberapa perhentian tab, atau beberapa kombinasi.

Menggunakan beberapa perhentian tab dan tombol panah untuk tombol

Pengguna aksesibilitas mengandalkan aturan navigasi keyboard yang mapan, yang biasanya tidak menggunakan tombol panah untuk menavigasi kumpulan tombol. Namun, pengguna tanpa gangguan visual mungkin merasa bahwa perilaku tersebut alami.

Contoh perilaku UWP default dalam hal ini adalah ContentDialog. Meskipun tombol panah dapat digunakan untuk menavigasi antar tombol, setiap tombol juga merupakan perhentian tab.

Menetapkan perhentian tab tunggal ke pola UI yang sudah tidak asing lagi

Dalam kasus di mana tata letak Anda mengikuti pola UI terkenal untuk grup kontrol, menetapkan satu perhentian tab ke grup dapat meningkatkan efisiensi navigasi bagi pengguna.

Contoh meliputi:

• RadioButtons
• Beberapa ListViews yang terlihat seperti dan berulah seperti tunggal ListView
• UI apa pun yang dibuat untuk terlihat dan berulah seperti kisi petak peta (seperti petak peta menu Mulai)

Menentukan perilaku grup kontrol

Gunakan API berikut untuk mendukung perilaku grup kontrol kustom (semua dibahas secara lebih rinci nanti dalam topik ini):

• XYFocusKeyboardNavigation memungkinkan navigasi tombol panah antar kontrol
• TabFocusNavigation menunjukkan apakah ada beberapa perhentian tab atau perhentian tab tunggal
• Set FindFirstFocusableElement dan FindLastFocusableElement berfokus pada item pertama dengan kunci Beranda dan item terakhir dengan Kunci akhir

Gambar berikut menunjukkan perilaku navigasi keyboard intuitif untuk grup kontrol tombol radio terkait. Dalam hal ini, kami merekomendasikan pemberhentian tab tunggal untuk grup kontrol, navigasi dalam antara tombol radio menggunakan tombol panah, Tombol beranda terikat ke tombol radio pertama, dan Tombol akhir terikat ke tombol radio terakhir.

Keyboard dan Narator

Narator adalah alat aksesibilitas UI yang ditujukan untuk pengguna keyboard (jenis input lainnya juga didukung). Namun, fungsionalitas Narator melampaui interaksi keyboard yang didukung oleh aplikasi UWP dan diperlukan perawatan ekstra saat merancang aplikasi UWP Anda untuk Narator. (Halaman dasar narator memandu Anda melalui pengalaman pengguna Narator.)

Beberapa perbedaan antara perilaku keyboard UWP dan yang didukung oleh Narator meliputi:

• Kombinasi tombol tambahan untuk navigasi ke elemen UI yang tidak diekspos melalui navigasi keyboard standar, seperti kunci Caps + tombol panah untuk membaca label kontrol.
• Navigasi ke item yang dinonaktifkan. Secara default, item yang dinonaktifkan tidak diekspos melalui navigasi keyboard standar.
• Kontrol "tampilan" untuk navigasi yang lebih cepat berdasarkan granularitas UI. Pengguna dapat menavigasi ke item, karakter, kata, baris, paragraf, tautan, judul, tabel, landmark, dan saran. Navigasi keyboard standar mengekspos objek ini sebagai daftar datar, yang mungkin membuat navigasi rumit kecuali Anda menyediakan tombol pintasan.

Studi Kasus – Kontrol AutoSuggestBox

Tombol pencarian untuk AutoSuggestBox tidak dapat diakses oleh navigasi keyboard standar menggunakan tab dan tombol panah karena pengguna dapat menekan tombol Enter untuk mengirimkan kueri pencarian. Namun, ini dapat diakses melalui Narator ketika pengguna menekan Caps Lock + tombol panah.

Dengan keyboard, pengguna menekan tombolEnteruntuk mengirimkan kueri pencarian

Dengan Narator, pengguna menekan tombol Enter untuk mengirimkan kueri pencarian

Dengan Narator, pengguna juga dapat mengakses tombol pencarian menggunakan tombol Caps Lock + Panah kanan, lalu menekan tombol Spasi

Keyboard, game pad, dan remote control

Pad game dan kontrol jarak jauh mendukung banyak perilaku dan pengalaman keyboard UWP. Namun, karena kurangnya berbagai opsi kunci yang tersedia pada keyboard, game pad dan remote control tidak memiliki banyak pengoptimalan keyboard (remote control bahkan lebih terbatas daripada game pad).

Lihat Game pad dan interaksi kontrol jarak jauh untuk detail selengkapnya tentang dukungan UWP untuk game pad dan input kontrol jarak jauh.

Berikut ini menunjukkan beberapa pemetaan kunci antara keyboard, game pad, dan remote control.

Keyboard	Pad permainan	Kontrol jarak jauh
Spasi	Tombol	Tombol Pilih
Enter	Tombol	Tombol Pilih
Escape	Tombol B	Tombol Kembali
Beranda/Akhir	T/A	T/A
Halaman Atas/Bawah	Tombol pemicu untuk gulir vertikal, tombol Bumper untuk gulir horizontal	T/A

Beberapa perbedaan utama yang harus Anda ketahui saat merancang aplikasi UWP anda untuk digunakan dengan game pad dan penggunaan remote control meliputi:

• Entri teks mengharuskan pengguna menekan A untuk mengaktifkan kontrol teks.

• Navigasi fokus tidak terbatas pada grup kontrol, pengguna dapat menavigasi secara bebas ke elemen UI yang dapat difokuskan di aplikasi.

  FOKUS CATATAN dapat berpindah ke elemen UI yang dapat difokuskan ke arah penekanan tombol kecuali dalam antarmuka pengguna overlay atau keterlibatan fokus ditentukan, yang mencegah fokus memasuki/keluar dari wilayah hingga terlibat/dilepaskan dengan tombol A. Untuk informasi selengkapnya, lihat bagian navigasi arah.

• Tombol D-pad dan stick kiri digunakan untuk memindahkan fokus antara kontrol dan untuk navigasi dalam.

  CATATAN Gamepad dan remote control hanya menavigasi ke item yang berada dalam urutan visual yang sama dengan tombol arah yang ditekan. Navigasi dinonaktifkan ke arah itu ketika tidak ada elemen berikutnya yang dapat menerima fokus. Tergantung pada situasinya, pengguna keyboard tidak selalu memiliki batasan tersebut. Lihat bagian Pengoptimalan keyboard bawaan untuk informasi selengkapnya.

Navigasi arah

Navigasi arah dikelola oleh kelas pembantu UWP Focus Manager , yang mengambil tombol arah yang ditekan (tombol panah, D-pad) dan mencoba memindahkan fokus ke arah visual yang sesuai.

Tidak seperti keyboard, ketika aplikasi memilih keluar dari Mode Mouse, navigasi arah diterapkan di seluruh aplikasi untuk gamepad dan kontrol jarak jauh. Lihat Gamepad dan interaksi kontrol jarak jauh untuk detail selengkapnya tentang pengoptimalan navigasi arah.

NAVIGASI CATATAN menggunakan tombol Tab keyboard tidak dianggap sebagai navigasi arah. Untuk informasi selengkapnya, lihat bagian Perhentian tab.

Navigasi arah yang didukung Menggunakan tombol arah (panah keyboard, gamepad, dan D-pad kontrol jarak jauh), pengguna dapat menavigasi di antara kontrol yang berbeda.

Navigasi arah tidak didukung Pengguna tidak dapat menavigasi antara kontrol yang berbeda menggunakan tombol arah. Metode lain untuk menavigasi antar kontrol (tombol tab) tidak terpengaruh.

Pengoptimalan keyboard bawaan

Bergantung pada tata letak dan kontrol yang digunakan, aplikasi UWP dapat dioptimalkan khusus untuk input keyboard.

Contoh berikut menunjukkan sekelompok item daftar, item kisi, dan item menu yang telah ditetapkan ke satu perhentian tab (lihat bagian Perhentian tab). Saat grup memiliki fokus, navigasi dalam dilakukan dengan tombol panah arah dalam urutan visual yang sesuai (lihat bagian Navigasi ).

Navigasi Tombol Panah Kolom Tunggal

Navigasi Tombol Panah Baris Tunggal

Navigasi Tombol Panah Beberapa Kolom/Baris

Membungkus Daftar homogen dan Item Tampilan Kisi

Navigasi arah tidak selalu merupakan cara paling efisien untuk menavigasi beberapa baris dan kolom item Daftar dan GridView.

Item Menu CATATAN biasanya merupakan daftar kolom tunggal, tetapi aturan fokus khusus mungkin berlaku dalam beberapa kasus (lihat Antarmuka Pengguna Popup).

Objek Daftar dan Kisi dapat dibuat dengan beberapa baris dan kolom. Ini biasanya dalam baris-utama (di mana item mengisi seluruh baris terlebih dahulu sebelum mengisi baris berikutnya) atau kolom-utama (di mana item mengisi seluruh kolom terlebih dahulu sebelum mengisi kolom berikutnya) urutan. Urutan utama baris atau kolom bergantung pada arah gulir dan Anda harus memastikan bahwa urutan item tidak bertentang dengan arah ini.

Dalam urutan besar baris (di mana item mengisi kiri ke kanan, atas ke bawah), saat fokusnya adalah pada item terakhir dalam baris dan tombol Panah kanan ditekan, fokus dipindahkan ke item pertama di baris berikutnya. Perilaku yang sama ini terjadi secara terbalik: Saat fokus diatur ke item pertama dalam baris dan tombol Panah kiri ditekan, fokus dipindahkan ke item terakhir di baris sebelumnya.

Dalam urutan utama kolom (di mana item mengisi atas ke bawah, kiri ke kanan), saat fokusnya adalah pada item terakhir dalam kolom dan pengguna menekan tombol Panah bawah, fokus dipindahkan ke item pertama di kolom berikutnya. Perilaku yang sama ini terjadi secara terbalik: Saat fokus diatur ke item pertama dalam kolom dan tombol Panah atas ditekan, fokus dipindahkan ke item terakhir di kolom sebelumnya.

Navigasi keyboard utama baris

Navigasi keyboard utama kolom

Antarmuka pengguna popup

Seperti disebutkan, Anda harus mencoba memastikan navigasi terarah sesuai dengan urutan visual kontrol di UI aplikasi Anda.

Beberapa kontrol (seperti menu konteks, menu luapan CommandBar, dan menu AutoSuggest) menampilkan popup menu di lokasi dan arah (ke bawah secara default) relatif terhadap kontrol utama dan ruang layar yang tersedia. Perhatikan bahwa arah pembukaan dapat dipengaruhi oleh berbagai faktor pada waktu proses.

Untuk kontrol ini, saat menu pertama kali dibuka (dan tidak ada item yang dipilih oleh pengguna), tombol Panah bawah selalu mengatur fokus ke item pertama sementara tombol Panah atas selalu mengatur fokus ke item terakhir pada menu.

Jika item terakhir memiliki fokus dan tombol Panah bawah ditekan, fokus berpindah ke item pertama pada menu. Demikian pula, jika item pertama memiliki fokus dan tombol Panah atas ditekan, fokus berpindah ke item terakhir pada menu. Perilaku ini disebut sebagai bersepeda dan berguna untuk menavigasi menu popup yang dapat terbuka dalam arah yang tidak dapat diprediksi.

Catatan

Bersepeda harus dihindari di UI non-popup di mana pengguna mungkin merasa terjebak dalam perulangan tanpa akhir.

Sebaiknya Anda meniru perilaku yang sama ini dalam kontrol kustom Anda. Sampel kode tentang cara mengimplementasikan perilaku ini dapat ditemukan dalam dokumentasi navigasi fokus terprogram.

Menguji aplikasi Anda

Uji aplikasi Anda dengan semua perangkat input yang didukung untuk memastikan elemen UI dapat dinavigasi dengan cara yang koheren dan intuitif dan tidak ada elemen tak terduga yang mengganggu urutan tab yang diinginkan.

Artikel terkait

• Peristiwa keyboard
• Mengidentifikasi perangkat input
• Merespons kehadiran keyboard sentuh
• Sampel visual fokus
• Spesifikasi keyboard kontrol NavigationView
• Aksesibilitas keyboard

Lampiran

Keyboard perangkat lunak

Keyboard perangkat lunak ditampilkan di layar dan digunakan alih-alih keyboard fisik untuk mengetik dan memasukkan data menggunakan sentuhan, mouse, pena/stylus atau perangkat penunjuk lainnya. Pada perangkat game, masing-masing kunci perlu dipilih dengan memindahkan fokus visual atau menggunakan tombol pintasan pada pad game atau remote control.

Papan tombol sentuh

Keyboard Sentuh Windows 11

Bergantung pada perangkat, keyboard sentuh muncul saat bidang teks atau kontrol teks lain yang dapat diedit mendapatkan fokus, atau ketika pengguna mengaktifkannya secara manual melalui Pusat Pemberitahuan:

Jika aplikasi Anda mengatur fokus secara terprogram ke kontrol input teks, keyboard sentuh tidak dipanggil. Ini menghilangkan perilaku tak terduga yang tidak dihasut langsung oleh pengguna. Namun, keyboard secara otomatis bersembunyi ketika fokus dipindahkan secara terprogram ke kontrol input non-teks.

Keyboard sentuh biasanya tetap terlihat saat pengguna menavigasi antar kontrol dalam formulir. Perilaku ini dapat bervariasi berdasarkan jenis kontrol lain dalam formulir.

Berikut ini adalah daftar kontrol non-edit yang dapat menerima fokus selama sesi entri teks menggunakan keyboard sentuh tanpa menutup keyboard. Alih-alih tidak perlu membuat UI dan berpotensi memusingkan pengguna, keyboard sentuh tetap terlihat karena pengguna cenderung bolak-balik antara kontrol ini dan entri teks dengan keyboard sentuh.

• Kotak centang
• Kotak kombo
• Tombol radio
• Bilah gulir
• Pohon
• Item pohon
• Menu
• Bilah menu
• Item menu
• Toolbar
• Daftar
• Item daftar

Berikut adalah contoh mode yang berbeda untuk keyboard sentuh. Gambar pertama adalah tata letak default, yang kedua adalah tata letak yang diperluas (yang mungkin tidak tersedia dalam semua bahasa).

Keyboard sentuh dalam mode tata letak default

Keyboard sentuh dalam mode tata letak yang diperluas

Interaksi keyboard yang berhasil memungkinkan pengguna untuk menyelesaikan skenario aplikasi dasar hanya menggunakan keyboard; artinya, pengguna dapat menjangkau semua elemen interaktif dan mengaktifkan fungsionalitas default. Sejumlah faktor dapat memengaruhi tingkat keberhasilan, termasuk navigasi keyboard, tombol akses untuk aksesibilitas, dan tombol akselerator (atau pintasan) untuk pengguna tingkat lanjut.

Keyboard Di Layar

Seperti keyboard sentuh, Keyboard Layar (OSK) adalah visual, keyboard perangkat lunak yang digunakan alih-alih keyboard fisik untuk mengetik dan memasukkan data menggunakan sentuhan, mouse, pena/stylus atau perangkat penunjuk lainnya (layar sentuh tidak diperlukan). OSK disediakan untuk sistem yang tidak memiliki keyboard fisik, atau untuk pengguna yang gangguan mobilitasnya mencegah mereka menggunakan perangkat input fisik tradisional. OSK mengemulasi sebagian besar, jika tidak semua, fungsionalitas keyboard perangkat keras.

OSK dapat diaktifkan dari halaman Keyboard di Pengaturan > Kemudahan akses.

PERHATIKAN OSK memiliki prioritas atas keyboard sentuh, yang tidak akan ditampilkan jika OSK ada.

Keyboard Di Layar

Keyboard Layar Xbox One

Untuk detail selengkapnya, lihat Menggunakan Keyboard Di Layar untuk mengetik.