Access keys

訪問鍵是鍵盤快捷方式,可讓使用者透過鍵盤快速流覽和與應用程式的可見UI互動,而不是指標裝置(例如觸控或滑鼠),藉此改善Windows 應用程式的可用性和輔助功能。

Windows 應用程式透過稱為按鍵提示的視覺提示,針對鍵盤型訪問鍵和相關聯的 UI 意見反應,跨平臺控制項提供內建支援。

注意

鍵盤對於某些殘障使用者而言不可或缺(請參閱 鍵盤輔助功能),也是使用者偏好鍵盤與應用程式互動更有效率的重要工具。

如需使用鍵盤快捷方式叫用 Windows 應用程式中常見動作的詳細資訊,請參閱快捷鍵主題。

若要建立您自己的自定義鍵盤快捷方式,請參閱 鍵盤事件 主題。

概觀

訪問鍵是Alt鍵和一或多個英數位元按鍵的組合,有時稱為 助記鍵,通常是循序按下,而不是同時按下。

按鍵提示是當使用者按下 Alt 鍵時,支援存取鍵的控件旁邊顯示的徽章。 每個按鍵提示都包含啟用相關聯控件的英數位元索引鍵。

注意

單一英數位元的訪問鍵會自動支援鍵盤快捷方式。 例如,同時在 Word 中按 Alt+F 會開啟 [檔案] 選單,而不顯示按鍵提示。

按下 Alt 鍵會初始化存取鍵功能,並以按鍵提示顯示所有目前可用的按鍵組合。 後續按鍵是由訪問鍵架構處理,在按下有效的訪問鍵之前,會拒絕無效的按鍵,或按下 Enter、Esc、Tab 或 Arrow 鍵以停用存取鍵,並將按鍵處理傳回給應用程式。

Microsoft Office 應用程式 提供存取金鑰的廣泛支援。 下圖顯示 Word 的 [常用] 索引標籤,其中已啟用訪問鍵(請注意數位和多個擊鍵的支援)。

Keytip badges for access keys in Microsoft Word

Microsoft Word 中存取金鑰的 KeyTip 徽章

若要將存取金鑰新增至控件,請使用 AccessKey 屬性。 這個屬性的值會指定訪問鍵序列、快捷方式(如果單一英數位元),以及按鍵提示。

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

使用存取金鑰的時機

建議您在 UI 中適當地指定存取金鑰,並支援所有自定義控件中的存取金鑰。

  1. 訪問鍵可讓運動障礙的使用者更容易存取 您的應用程式,包括一次只能按一個按鍵或難以使用滑鼠的使用者。

    設計完善的鍵盤 UI 是軟體輔助功能的重要層面。 它可讓視力障礙或有特定運動障礙的用戶瀏覽應用程式並與其功能互動。 這類使用者可能無法操作滑鼠,而是依賴各種輔助技術,例如鍵盤增強工具、螢幕放大器、螢幕助讀程式及語音輸入公用程式。 對於這些使用者,完整的命令涵蓋範圍至關重要。

  2. 存取鍵可讓您的應用程式更適用於 想要透過鍵盤互動的進階使用者。

    有經驗的使用者通常會對使用鍵盤有很強的偏好,因為鍵盤型命令可以更快速地輸入,而且不需要他們從鍵盤移除手部。 對於這些使用者而言,效率與一致性至關重要;完整性對於最常使用的命令而言很重要。

設定存取金鑰範圍

當畫面上有許多支援存取密鑰的專案時,我們建議界定存取密鑰的範圍,以減少 認知負載。 這可將畫面上的訪問鍵數目降到最低,使其更容易找到,並提升效率和生產力。

例如,Microsoft Word 提供兩個存取鍵範圍:功能區索引標籤的主要範圍,以及所選索引標籤上命令的次要範圍。

下列影像示範 Word 中的兩個訪問鍵範圍。 第一個顯示主要存取密鑰,讓使用者選取索引標籤和其他最上層命令,第二個則顯示 [常用] 索引標籤的次要存取金鑰。

Primary access keys in Microsoft WordMicrosoft Word 中的主要存取金鑰

Secondary access keys in Microsoft WordMicrosoft Word 中的次要存取金鑰

不同範圍中的元素可以複製訪問鍵。 在上述範例中,「2」 是主要範圍中復原的存取密鑰,也是次要範圍中的「斜體」。

在這裡,我們會示範如何定義存取密鑰範圍。

<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>

Primary access keys for CommandBar

CommandBar 主要範圍和支援的存取金鑰

Secondary access keys for CommandBar

CommandBar 次要範圍和支援的存取金鑰

Windows 10 Creators Update 和較舊版本

在 Windows 10 Fall Creators Update 之前,某些控件,例如 CommandBar,不支援內建存取密鑰範圍。

下列範例示範如何支援具有存取鍵的 CommandBar SecondaryCommands,一旦叫用父命令即可使用 (類似於 Word 中的功能區)。

<local:CommandBarHack 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>
</local:CommandBarHack>
public class CommandBarHack : CommandBar
{
    CommandBarOverflowPresenter secondaryItemsControl;
    Popup overflowPopup;

    public CommandBarHack()
    {
        this.ExitDisplayModeOnAccessKeyInvoked = false;
        AccessKeyInvoked += OnAccessKeyInvoked;
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        Button moreButton = GetTemplateChild("MoreButton") as Button;
        moreButton.SetValue(Control.IsTemplateKeyTipTargetProperty, true);
        moreButton.IsAccessKeyScope = true;

        // SecondaryItemsControl changes
        secondaryItemsControl = GetTemplateChild("SecondaryItemsControl") as CommandBarOverflowPresenter;
        secondaryItemsControl.AccessKeyScopeOwner = moreButton;

        overflowPopup = GetTemplateChild("OverflowPopup") as Popup;
    }

    private void OnAccessKeyInvoked(UIElement sender, AccessKeyInvokedEventArgs args)
    {
        if (overflowPopup != null)
        {
            overflowPopup.Opened += SecondaryMenuOpened;
        }
    }

    private void SecondaryMenuOpened(object sender, object e)
    {
        //This is not necessary given we are automatically pushing the scope.
        var item = secondaryItemsControl.Items.First();
        if (item != null && item is Control)
        {
            (item as Control).Focus(FocusState.Keyboard);
        }
        overflowPopup.Opened -= SecondaryMenuOpened;
    }
}

避免存取金鑰衝突

當相同範圍中的兩個或多個元素具有重複的訪問鍵,或以相同的英數位元開頭時,就會發生訪問鍵衝突。

系統會處理新增至可視化樹狀結構之第一個專案的存取索引鍵,以解析重複的存取密鑰,並忽略所有其他專案。

當多個存取鍵以相同的字元開頭時(例如,“A”、“A1”和 “AB”),系統會處理單一字元存取密鑰並忽略所有其他字元。

使用唯一訪問鍵或範圍命令來避免衝突。

選擇存取金鑰

選擇存取金鑰時,請考慮下列事項:

  • 使用單一字元將按鍵降到最低,並默認支援快捷鍵 (Alt+AccessKey)
  • 避免使用兩個以上的字元
  • 避免存取金鑰衝突
  • 避免難以區別於其他字元的字元,例如字母 “I” 和數位 “1” 或字母 “O” 和數位 “0”
  • 使用其他熱門應用程式的已知先例,例如 Word (“F” for “File”、“H” for “Home” 等等)
  • 使用命令名稱的第一個字元,或與命令有密切關聯的字元,以協助重新叫用
    • 如果已指派第一個字母,請使用盡可能接近命令名稱第一個字母的字母 (“N” for Insert)
    • 使用指令名稱中獨特的同音 (“W” for View)
    • 使用命令名稱中的 Vowel。

本地化存取金鑰

如果您的應用程式會以多種語言當地語系化,您也應該 考慮當地語系化存取密鑰。 例如,針對 en-US 中的 “Home” 為 “H”,而 es-ES 中的 “Incio” 則為 “I”。

使用標記中的 x:Uid 延伸來套用本地化的資源,如下所示:

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

每個語言的資源都會新增至項目中對應的 String 資料夾:

English and Spanish resource string folders

英文和西班牙文資源字串資料夾

本地化存取金鑰是在專案 resources.resw 檔案中指定:

Specify the AccessKey property specified in the resources.resw file

指定 resources.resw 檔案中指定的 AccessKey 屬性

如需詳細資訊,請參閱 翻譯 UI 資源

按鍵提示定位

按鍵提示會顯示為相對於其對應UI元素的浮動徽章,並考慮到其他UI元素、其他按鍵提示和螢幕邊緣的存在。

一般而言,預設索引鍵提示位置就已足夠,並提供調適型 UI 的內建支援。

Example of automatic keytip placement

自動按鍵提示放置的範例

不過,如果您需要對按鍵提示定位進行更多控制,我們建議使用下列專案:

  1. 明顯的關聯原則:使用者可以輕鬆地將控件與按鍵提示產生關聯。

    a. 索引鍵提示應該 接近 具有存取密鑰的項目(擁有者)。
    b. 索引鍵提示應該 避免涵蓋具有存取金鑰的已啟用元素
    c. 如果無法將按鍵提示放在其擁有者附近,它應該與擁有者重疊。 

  2. 可探索性:使用者可以使用按鍵提示快速探索控制件。

    a. 按鍵提示永遠不會 疊其他按鍵提示。  

  3. 容易掃描: 用戶可以輕鬆地略過按鍵提示。

    a. 索引鍵提示應該 彼此對齊,並與UI元素對齊 。 b. 索引鍵提示應該 盡可能分組 。 

相對位置

使用 KeyTipPlacementMode 屬性,自定義每個元素或每個群組的索引鍵提示位置。

放置模式包括:Top、Bottom、Right、Left、Hidden、Center 和 Auto。

Screenshot showing the relative positions of the keytip placement modes

索引鍵提示放置模式

控件的中心線是用來計算按鍵提示的垂直和水準對齊方式。

下列範例示範如何使用 StackPanel 容器的 KeyTipPlacementMode 屬性,設定控件群組的按鍵提示位置。

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

位移

使用元素的 KeyTipHorizontalOffset 和 KeyTipVerticalOffset 屬性,以更細微地控制 keytip 位置。

注意

當 KeyTipPlacementMode 設定為 Auto 時,無法設定位移。

KeyTipHorizontalOffset 屬性會指出向左或向右移動按鍵提示的距離。

Screenshot of vertical and horizontal keytip offsets for a button

設定按鈕的垂直和水準按鍵提示位移

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

螢幕邊緣對齊 {#screen-edge-alignment 。ListParagraph}

按鍵提示的位置會根據螢幕邊緣自動調整,以確保按鍵提示完全可見。 發生這種情況時,控件與按鍵提示對齊點之間的距離可能會與水準和垂直位移指定的值不同。

Screenshot of keytip screen edge alignment

按鍵提示會根據螢幕邊緣自動定位

按鍵提示樣式

我們建議針對平臺主題使用內建的按鍵提示支援,包括高對比度。

如果您需要指定自己的按鍵提示樣式,請使用應用程式資源,例如 KeyTipFontSize (字型大小)、KeyTipFontFamily (字型系列)、KeyTipBackground (背景)、KeyTipForeground (前景)、KeyTipPadding (填補)、KeyTipBorderBrush(框線色彩),以及 KeyTipBorderThemeThickness (框線粗細)。

Screenshot of keytip customization options, including font, order, and color

keytip 自定義選項

這個範例示範如何變更這些應用程式資源:

<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>

訪問鍵和朗讀程式

XAML 架構會公開自動化屬性,讓 使用者介面自動化 用戶端探索使用者介面中專案的相關信息。

如果您在 UIElement 或 TextElement 控件上指定 AccessKey 屬性,您可以使用 AutomationProperties.AccessKey 屬性來取得此值。 輔助功能用戶端,例如朗讀程式,每次元素取得焦點時,都會讀取這個屬性的值。

範例