访问密钥

访问键是键盘快捷方式,它通过为用户提供直观的方式来快速导航应用并通过键盘而不是指针设备(如触摸或鼠标)与应用的可见 UI 进行交互,从而提高 Windows 应用程序的可用性和可访问性。

Windows 应用通过称为键提示的视觉提示为基于键盘的访问键和关联的 UI 反馈提供跨平台控件的内置支持。

注释

对于具有某些残疾的用户来说,键盘不可缺少(请参阅 键盘辅助功能),对于喜欢键盘的用户来说,键盘也是一种更高效的方式来与应用交互的重要工具。

有关使用键盘快捷方式调用 Windows 应用程序中的常见作的详细信息,请参阅 加速器键 主题。

若要创建自定义键盘快捷方式,请参阅 键盘事件 主题。

概述

访问键是 Alt 键和一个或多个字母数字键(有时称为 助记键)的组合,通常按顺序而不是同时按下。

键提示是在用户按下 Alt 键时显示在支持访问键的控件旁边的标记。 每个按键提示中都包含用于激活相关控件的字母或数字键。

注释

对于具有单个字母数字字符的访问键,会自动支持键盘快捷方式。 例如,在 Word 中同时按 Alt+F 将打开“文件”菜单,而不显示键提示。

按 Alt 键可初始化访问键功能,并在键提示中显示所有当前可用的键组合。 后续击键由访问键框架处理,该框架会拒绝无效的键,直到按下有效的访问键,或者按下 Enter、Esc、Tab 或箭头键以停用访问键,使击键处理返回给应用。

Microsoft Office 应用为访问密钥提供广泛的支持。 下图中显示了在 Word 中“开始”选项卡,其中访问键已激活(请注意对数字和多个击键的支持)。

Microsoft Word 中的 访问键提示徽章

Microsoft Word 中访问键的 键提示标记

若要向控件添加访问密钥,请使用 AccessKey 属性。 此属性的值指定访问键序列、快捷方式(如果为单个字母数字)和键提示。

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

何时使用访问密钥

建议在 UI 中指定访问密钥,并支持所有自定义控件中的访问密钥。

  1. 访问键提高你的应用程序的可访问性, 对于有运动障碍的用户,包括一次只能按一个键或难以使用鼠标的用户。

    设计良好的键盘 UI 是软件可访问性的重要方面。 它使视力障碍或具有某些运动障碍的用户能够导航应用并与其功能交互。 此类用户可能无法操作鼠标,而是依赖于各种辅助技术,例如键盘增强工具、屏幕键盘、屏幕放大器、屏幕阅读器和语音输入实用工具。 对于这些用户,全面的命令覆盖率至关重要。

  2. 快捷键能够使你的应用对那些 喜欢通过键盘交互的资深用户更为易用。

    经验丰富的用户通常倾向于使用键盘,因为基于键盘的命令可以更快地输入,并且不需要他们从键盘中删除手。 对于这些用户,效率和一致性至关重要;仅对最常用的命令而言,全面性非常重要。

设置访问密钥范围

当屏幕上有许多支持访问密钥的元素时,我们建议确定访问密钥的范围以减少 认知负载。 这样可最大程度地减少屏幕上的访问密钥数,从而使访问键更易于定位,并提高效率和工作效率。

例如,Microsoft Word 提供了两个访问键范围:功能区选项卡的主范围,以及所选选项卡上命令的次级范围。

下图演示 Word 中的两个访问密钥范围。 第一个显示主要访问键,允许用户选择选项卡和其他顶级命令,第二个显示“开始”选项卡的辅助访问键。

Microsoft WordMicrosoft Word Microsoft 中的主访问键 主访问键

在 Microsoft Word 中的辅助访问密钥 在 Microsoft 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>

CommandBar 的主要访问键

CommandBar 的主要范围和支持的访问键

CommandBar 的辅助访问密钥

命令栏的辅助范围和可用访问键

Windows 10 创意者更新和更早期版本

在 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”表示“文件”、“H”表示“主页”等)
  • 使用命令名称的第一个字符,或与帮助召回的命令有密切关联的字符
    • 如果已分配第一个字母,请使用尽可能接近命令名称的第一个字母(“N”for Insert)
    • 使用命令名称中独特的辅音(“W”表示查看的)
    • 使用命令名称中的元音。

本地化访问密钥

如果你的应用将采用多种语言进行本地化,则还应考虑 本地化访问密钥。 例如,en-US 中的“H”代表“Home”,es-ES中的“I”代表“Inicio”。

在标记中使用 x:Uid 扩展应用本地化资源,如下所示:

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

将每个语言的资源添加到项目中的相应字符串文件夹:

英语和西班牙语资源字符串文件夹

英语和西班牙语资源字符串文件夹

本地化访问密钥在项目 resources.resw 文件中指定:

指定在 resources.resw 文件中定义的 AccessKey 属性

指定 resources.resw 文件中指定的 AccessKey 属性

有关详细信息,请参阅 翻译 UI 资源

键提示定位

键提示显示为浮动标签,相对于其相应的 UI 元素,同时会考虑其他 UI 元素、其他键提示的存在以及屏幕边缘。

通常,默认的按键提示位置已经足够,并为自适应 UI 提供了内置支持。

自动键提示放置 示例

自动键提示放置示例

但是,如果需要更好地控制键提示定位,我们建议执行以下操作:

  1. 明显的关联原则:用户可以轻松地将控件与键提示相关联。

    a。 键提示应 靠近拥有访问键(即所有者)的元素
    b. 键提示应 避免覆盖具有访问密钥 启用的元素。
    选项c. 如果无法将键提示放置在其所有者附近,则它应与所有者重叠。 

  2. 可发现性:用户可以使用键提示快速发现控件。

    a。 键提示永远不会 与其他键提示重叠。  

  3. 轻松扫描: 用户可以轻松略读关键提示。

    a。 键提示应 彼此和 UI 元素 对齐。 b. 键提示应尽可能多地 分组。 

相对位置

使用 KeyTipPlacementMode 属性设置键提示的位置,可以针对单个元素或整个组进行设置。

放置模式包括:上、下、右、左、隐藏、居中和自动。

键提示放置模式相对位置的屏幕截图

键提示放置模式

控件的中心线用于计算键提示的垂直和水平对齐方式。

以下示例演示如何使用 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 属性可以更精细地控制键提示位置。

注释

当 KeyTipPlacementMode 设置为“自动”时,无法设置偏移量。

KeyTipHorizontalOffset 属性指示向左或向右移动键提示的距离。

键提示偏移的垂直和水平按钮的屏幕截图

为按钮 设置垂直和水平键提示偏移

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

屏幕边缘对齐 {#screen-edge-alignment .ListParagraph}

键提示的位置会根据屏幕边缘自动调整,以确保键提示完全可见。 发生这种情况时,控件与键提示对齐点之间的距离可能与水平偏移量和垂直偏移量指定的值不同。

键提示屏幕边缘对齐的截图

键盘快捷提示根据屏幕边缘自动调整位置

键提示样式

建议对平台主题(包括高对比度)使用内置键提示支持。

如果需要指定自己的键提示样式,请使用应用程序资源,例如 KeyTipFontSize(字号)、KeyTipFontFamily(字体系列)、KeyTipBackground(背景)、KeyTipForeground(前台)、KeyTipPadding(填充)、KeyTipBorderBrush(边框颜色)和 KeyTipBorderThemeThickness(边框粗细)。

键提示自定义选项的屏幕截图,包括字体、顺序和颜色

键提示(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 框架公开自动化属性,使 UI 自动化客户端能够发现有关用户界面中的元素的信息。

如果在 UIElement 或 TextElement 控件上指定 AccessKey 属性,则可以使用 AutomationProperties.AccessKey 属性获取此值。 辅助功能客户端(如“讲述人”)每当一个元素获得焦点时都会读取其属性值。

示例