tombol akses

kunci Access adalah pintasan keyboard yang meningkatkan kegunaan dan aksesibilitas aplikasi Windows Anda dengan menyediakan cara intuitif bagi pengguna untuk dengan cepat menavigasi dan berinteraksi dengan UI aplikasi yang terlihat melalui keyboard alih-alih perangkat penunjuk (seperti sentuhan atau mouse).

Aplikasi Windows menyediakan dukungan bawaan di seluruh kontrol platform untuk kunci akses berbasis keyboard dan umpan balik UI terkait melalui petunjuk visual yang disebut tip kunci.

Nota

Keyboard sangat diperlukan bagi pengguna dengan disabilitas tertentu (lihat Aksesibilitas keyboard), dan juga merupakan alat penting bagi pengguna yang lebih menyukainya sebagai cara yang lebih efisien untuk berinteraksi dengan aplikasi.

Lihat topik Tombol akselerator untuk detail tentang memanggil tindakan umum di aplikasi Windows dengan pintasan keyboard.

Untuk membuat pintasan keyboard kustom Anda sendiri, lihat topik Peristiwa keyboard .

Gambaran Umum

Kunci access adalah kombinasi tombol Alt dan satu atau beberapa tombol alfanumerik—terkadang disebut mnemonic—biasanya ditekan secara berurutan, bukan secara bersamaan.

Tips tombol adalah lencana yang ditampilkan di samping kontrol yang mendukung tombol access saat pengguna menekan tombol Alt. Setiap keytip berisi kunci alfanumerik yang mengaktifkan kontrol terkait.

Nota

Pintasan papan ketik secara otomatis didukung untuk tombol akses yang memiliki satu karakter alfanumerik. Misalnya, ketika menekan Alt+F secara bersamaan di Word, menu File terbuka tanpa menampilkan petunjuk tombol.

Menekan tombol Alt menginisialisasi fungsi kunci akses dan menampilkan semua kombinasi kunci yang saat ini tersedia dalam petunjuk tombol. Penekanan tombol berikutnya ditangani oleh kerangka kerja kunci access, yang menolak tombol yang tidak valid hingga tombol access yang valid ditekan, atau tombol Enter, Esc, Tab, atau Arrow ditekan untuk menonaktifkan tombol access dan mengembalikan penanganan penekanan tombol ke aplikasi.

aplikasi-aplikasi Microsoft Office menyediakan dukungan ekstensif untuk tombol akses. Gambar berikut ini memperlihatkan tab Beranda Word dengan tombol pintasan diaktifkan (perhatikan dukungan untuk angka dan beberapa penekanan tombol).

Lencana KeyTip untuk tombol akses di Microsoft Word

Untuk menambahkan kunci access ke kontrol, gunakan properti AccessKey. Nilai properti ini menentukan urutan kunci access, pintasan (jika satu alfanumerik), dan tipsalat.

<Button Content="Accept" AccessKey="A" Click="AcceptButtonClick" />

Kapan menggunakan kunci akses

Kami menyarankan agar Anda menentukan kunci access di mana pun yang sesuai di UI Anda, dan mendukung kunci access di semua kontrol kustom.

1. Tombol akses membuat aplikasi Anda lebih mudah diakses oleh pengguna penyandang disabilitas motorik, termasuk pengguna yang hanya dapat menekan satu tombol dalam satu waktu atau memiliki kesulitan menggunakan mouse.

   UI keyboard yang dirancang dengan baik adalah aspek penting dari aksesibilitas perangkat lunak. Ini memungkinkan pengguna dengan gangguan penglihatan atau yang memiliki disabilitas motorik tertentu untuk menavigasi aplikasi dan berinteraksi dengan fitur-fiturnya. Pengguna tersebut mungkin tidak dapat mengoperasikan mouse dan sebaliknya mengandalkan berbagai teknologi bantuan seperti alat peningkatan keyboard, keyboard di layar, pembenar layar, pembaca layar, dan utilitas input suara. Untuk pengguna ini, cakupan perintah komprehensif sangat penting.

2. Tombol akses membuat aplikasi Anda lebih mudah digunakan untuk pengguna tingkat lanjut yang lebih suka berinteraksi melalui keyboard.

   Pengguna berpengalaman sering memiliki preferensi yang kuat untuk menggunakan keyboard karena perintah berbasis keyboard dapat dimasukkan lebih cepat dan tidak mengharuskan mereka untuk melepas tangan mereka dari keyboard. Untuk pengguna ini, efisiensi dan konsistensi sangat penting; komprehensif hanya penting untuk perintah yang paling sering digunakan.

Mengatur cakupan kunci akses

Ketika ada banyak elemen di layar yang mendukung kunci akses, sebaiknya membatasi kunci akses untuk mengurangi beban kognitif. Ini meminimalkan jumlah kunci akses di layar, sehingga membuatnya lebih mudah ditemukan, serta meningkatkan efisiensi dan produktivitas.

Misalnya, Microsoft Word menyediakan dua cakupan tombol akses: cakupan utama untuk tab Ribbon dan cakupan sekunder untuk perintah pada tab yang dipilih.

Gambar-gambar berikut menunjukkan dua cakupan akses kunci di Word. Yang pertama menunjukkan kunci access utama yang memungkinkan pengguna memilih tab dan perintah tingkat atas lainnya, dan yang kedua menunjukkan kunci access sekunder untuk tab Beranda.

Kunci akses utama di Microsoft Word Kunci akses utama di Microsoft Word

Kunci akses sekunder di Microsoft Word

Kunci akses dapat diduplikasi untuk elemen dalam cakupan yang berbeda. Dalam contoh sebelumnya, "2" adalah kunci akses untuk Batalkan dalam cakupan utama, dan juga untuk "Miring" dalam cakupan sekunder.

Di sini, kami menunjukkan cara menentukan cakupan kunci access.

<CommandBar x:Name="MainCommandBar" AccessKey="M" >
    <AppBarButton AccessKey="G" Icon="Globe" Label="Go"/>
    <AppBarButton AccessKey="S" Icon="Stop" Label="Stop"/>
    <AppBarSeparator/>
    <AppBarButton AccessKey="R" Icon="Refresh" Label="Refresh" IsAccessKeyScope="True">
        <AppBarButton.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem AccessKey="A" Icon="Globe" Text="Refresh A" />
                <MenuFlyoutItem AccessKey="B" Icon="Globe" Text="Refresh B" />
                <MenuFlyoutItem AccessKey="C" Icon="Globe" Text="Refresh C" />
                <MenuFlyoutItem AccessKey="D" Icon="Globe" Text="Refresh D" />
            </MenuFlyout>
        </AppBarButton.Flyout>
    </AppBarButton>
    <AppBarButton AccessKey="B" Icon="Back" Label="Back"/>
    <AppBarButton AccessKey="F" Icon="Forward" Label="Forward"/>
    <AppBarSeparator/>
    <AppBarToggleButton AccessKey="T" Icon="Favorite" Label="Favorite"/>
    <CommandBar.SecondaryCommands>
        <AppBarToggleButton Icon="Like" AccessKey="L" Label="Like"/>
        <AppBarButton Icon="Setting" AccessKey="S" Label="Settings" />
    </CommandBar.SecondaryCommands>
</CommandBar>

kunci akses utama untuk

Lingkup utama CommandBar dan tombol akses yang didukung

kunci akses sekunder

KomandoBar cakupan sekunder dan tombol akses yang didukung

Hindari konflik kunci akses

Tabrakan kunci akses terjadi ketika dua atau lebih elemen dalam cakupan yang sama memiliki kunci akses duplikat atau dimulai dengan karakter alfanumerik yang sama.

Sistem menyelesaikan kunci access duplikat dengan memproses kunci access elemen pertama yang ditambahkan ke pohon visual, mengabaikan semua yang lain.

Ketika beberapa kunci access dimulai dengan karakter yang sama (misalnya, "A", "A1", dan "AB"), sistem memproses karakter tunggal access kunci dan mengabaikan semua yang lain.

Hindari tabrakan dengan menggunakan tombol akses unik atau dengan membatasi lingkup perintah.

Pilih kunci access

Pertimbangkan hal berikut saat memilih kunci access:

• Gunakan satu karakter untuk meminimalkan penekanan tombol dan mendukung kunci akselerator secara default (Alt+AccessKey)
• Hindari menggunakan lebih dari dua karakter
• Hindari konflik tombol akses
• Hindari karakter yang sulit dibedakan dari karakter lain, seperti huruf "I" dan angka "1" atau huruf "O" dan angka "0"
• Gunakan preseden terkenal dari aplikasi populer lainnya seperti Word ("F" untuk "File", "H" untuk "Beranda", dan sebagainya)
• Gunakan karakter pertama nama perintah, atau karakter dengan asosiasi dekat dengan perintah yang membantu pengenalan
  • Jika huruf pertama sudah ditetapkan, gunakan huruf yang sedekat mungkin dengan huruf pertama nama perintah ("N" untuk Sisipkan)
  • Gunakan konsonan khas dari nama perintah ("W" untuk Tampilan)
  • Gunakan vokal dari nama perintah.

Lokalisasi kunci akses

Jika aplikasi Anda akan dilokalkan dalam beberapa bahasa, Anda juga harus mempertimbangkan melokalisasi kunci akses. Misalnya, untuk "H" untuk "Home" di en-US dan "I" untuk "Incio" di es-ES.

Gunakan ekstensi x:Uid dalam markup untuk menerapkan sumber daya yang dilokalkan seperti yang ditunjukkan di sini:

<Button Content="Home" AccessKey="H" x:Uid="HomeButton" />

Sumber daya untuk setiap bahasa ditambahkan ke folder String yang sesuai di project:

Folder sumber daya string Bahasa Inggris dan Spanyol

Kunci access yang dilokalkan ditentukan dalam file resources.resw proyek Anda:

Tentukan properti AccessKey yang ditentukan dalam file resources.resw

Untuk informasi selengkapnya, lihat Menerjemahkan sumber daya UI

Penempatan tip kunci

Tips kunci ditampilkan sebagai lencana mengambang relatif terhadap elemen UI yang sesuai, dengan mempertimbangkan keberadaan elemen UI lainnya, tips tombol lainnya, dan tepi layar.

Biasanya, lokasi keytip default cukup dan menyediakan dukungan bawaan untuk antarmuka pengguna adaptif.

Contoh penempatan keytip otomatis

Namun, jika Anda memerlukan kendali lebih atas posisi keytip, kami sarankan langkah-langkah berikut:

1. Prinsip asosiasi yang jelas: Pengguna dapat mengaitkan kontrol dengan keytip dengan mudah.

   a. Keytip harus dekat ke elemen yang memiliki kunci akses (pemilik).
   b. Keytip harus menghindari menutupi elemen yang diaktifkan yang memiliki tombol akses.
   c. Jika tip kunci tidak dapat ditempatkan dekat dengan pemiliknya, tip kunci harus berimpitan dengan pemiliknya. 

2. Kemampuan penemuan: Pengguna dapat menemukan kontrol dengan penunjuk tombol dengan cepat.

   a. Tipsalat kunci tidak pernah tumpang tindih dengan tips kunci lainnya.  

3. Pemindaian mudah: Pengguna dapat mengamati sekilas tips kunci dengan mudah.

   a. keytips harus diselaraskan satu sama lain serta dengan elemen UI. b. keytips harus dikelompokkan sebanyak mungkin. 

Posisi relatif

Gunakan properti KeyTipPlacementMode untuk mengkustomisasi penempatan tips kunci berdasarkan per elemen atau per grup.

Mode penempatannya adalah: Atas, Bawah, Kanan, Kiri, Tersembunyi, Tengah, dan Otomatis.

mode penempatan keytip

Garis tengah kontrol digunakan untuk menghitung perataan vertikal dan horizontal dari keytip.

Contoh berikut menunjukkan cara mengatur penempatan keytip sekelompok kontrol menggunakan properti KeyTipPlacementMode dari kontainer StackPanel.

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" KeyTipPlacementMode="Top">
  <Button Content="File" AccessKey="F" />
  <Button Content="Home" AccessKey="H" />
  <Button Content="Insert" AccessKey="N" />
</StackPanel>

Offset

Gunakan properti KeyTipHorizontalOffset dan KeyTipVerticalOffset dari elemen untuk kontrol lokasi keytip yang lebih terperinci.

Nota

Offset tidak dapat diatur ketika KeyTipPlacementMode diatur ke Otomatis.

Properti KeyTipHorizontalOffset menunjukkan seberapa jauh untuk memindahkan keytip ke kiri atau kanan.

Mengatur offset vertikal dan horizontal keytip untuk sebuah tombol

<Button
  Content="File"
  AccessKey="F"
  KeyTipPlacementMode="Bottom"
  KeyTipHorizontalOffset="20"
  KeyTipVerticalOffset="-8" />

Perataan tepi layar {#screen-edge-alignment . ListParagraph}

Lokasi keytip secara otomatis disesuaikan berdasarkan tepi layar untuk memastikan tip kunci terlihat sepenuhnya. Ketika ini terjadi, jarak antara kontrol dan titik perataan keytip mungkin berbeda dari nilai yang ditentukan untuk offset horizontal dan vertikal .

keytips secara otomatis diposisikan berdasarkan tepi layar

Gaya penunjuk tombol

Sebaiknya gunakan dukungan keytip bawaan untuk tema platform, termasuk kontras tinggi.

Jika Anda perlu menentukan gaya tip kunci Anda sendiri, gunakan sumber daya aplikasi seperti KeyTipFontSize (ukuran font), KeyTipFontFamily (keluarga font), KeyTipBackground (latar belakang), KeyTipForeground (latar depan), KeyTipPadding (padding), KeyTipBorderBrush(Warna batas), dan KeyTipBorderThemeThickness (ketebalan batas).

opsi kustomisasi keytip

Contoh ini menunjukkan cara mengubah sumber daya aplikasi ini:

<Application.Resources>
 <SolidColorBrush Color="DarkGray" x:Key="MyBackgroundColor" />
 <SolidColorBrush Color="White" x:Key="MyForegroundColor" />
 <SolidColorBrush Color="Black" x:Key="MyBorderColor" />
 <StaticResource x:Key="KeyTipBackground" ResourceKey="MyBackgroundColor" />
 <StaticResource x:Key="KeyTipForeground" ResourceKey="MyForegroundColor" />
 <StaticResource x:Key="KeyTipBorderBrush" ResourceKey="MyBorderColor"/>
 <FontFamily x:Key="KeyTipFontFamily">Consolas</FontFamily>
 <x:Double x:Key="KeyTipContentThemeFontSize">18</x:Double>
 <Thickness x:Key="KeyTipBorderThemeThickness">2</Thickness>
 <Thickness x:Key="KeyTipThemePadding">4,4,4,4</Thickness>
</Application.Resources>

kunci akses dan narator

Kerangka kerja XAML mengekspos Automation Properties yang memungkinkan klien UI Automation menemukan informasi tentang elemen-elemen di dalam antarmuka pengguna.

Jika Anda menentukan properti AccessKey pada kontrol UIElement atau TextElement, Anda bisa menggunakan properti AutomationProperties.AccessKey untuk mendapatkan nilai ini. Klien aksesibilitas, seperti Narator, membaca nilai properti ini setiap kali elemen mendapatkan fokus.

Artikel terkait

• Interaksi keyboard
• Akselerator keyboard

Sampel

• Galeri WinUI 3