访问密钥
访问键是键盘快捷方式,它通过为用户提供直观的方式来快速导航应用并通过键盘而不是指针设备(如触摸或鼠标)与应用的可见 UI 进行交互,从而提高 Windows 应用程序的可用性和可访问性。
Windows 应用通过称为键提示的视觉提示为基于键盘的访问键和关联的 UI 反馈提供跨平台控件的内置支持。
注意
对于具有某些残疾的用户来说,键盘不可缺少(请参阅 键盘辅助功能),对于喜欢键盘的用户来说,键盘也是一种更高效的方式来与应用交互的重要工具。
有关使用键盘快捷方式调用 Windows 应用程序中的常见操作的详细信息,请参阅加速器键主题。
若要创建你自己的自定义键盘快捷方式,请参阅键盘事件主题。
概述
访问键是 Alt 键和一个或多个字母数字键(有时称为 助记键)的组合,通常按顺序而不是同时按下。
键提示是当用户按下 Alt 键时支持访问键的控件旁边显示的锁屏提醒。 每个键提示都包含激活关联控件的字母数字键。
注意
对于具有单个字母数字字符的访问键,会自动支持键盘快捷方式。 例如,在 Word 中同时按 Alt+F 将打开“文件”菜单,而不显示键提示。
按 Alt 键可初始化访问键功能,并在键提示中显示所有当前可用的键组合。 后续击键由访问键框架处理,该框架拒绝无效键,直到按下有效的访问键,或者按 Enter、Esc、Tab 或箭头键以停用访问键并返回对应用的击键处理。
Microsoft 办公室应用为访问密钥提供广泛的支持。 下图显示了激活访问键的 Word 的“开始”选项卡(请注意对数字和多个击键的支持)。
Microsoft Word 中访问密钥的密钥提示锁屏提醒
若要向控件添加访问密钥,请使用 AccessKey 属性。 此属性的值指定访问键序列、快捷方式(如果为单个字母数字)和键提示。
<Button Content="Accept" AccessKey="A" Click="AcceptButtonClick" />
何时使用访问密钥
建议在 UI 中指定访问密钥,并支持所有自定义控件中的访问密钥。
访问键使你的应用更易于 使用运动障碍的用户,包括那些一次只能按一个键或难以使用鼠标的用户。
设计良好的键盘 UI 是软件辅助功能的重要方面。 它使视力障碍或具有某些运动障碍的用户能够导航应用并与其功能交互。 此类用户可能无法操作鼠标,而是依赖于各种辅助技术,例如键盘增强工具、屏幕键盘、屏幕放大器、屏幕阅读器和语音输入实用工具。 对于这些用户,全面的命令覆盖率至关重要。
访问键使你的应用更适用于 希望通过键盘交互的 Power 用户。
经验丰富的用户通常倾向于使用键盘,因为基于键盘的命令可以更快地输入,并且不需要他们从键盘中删除手。 对于这些用户,效率和一致性至关重要;仅对最常用的命令而言,全面性非常重要。
设置访问密钥范围
当屏幕上有许多支持访问密钥的元素时,我们建议确定访问密钥的范围以减少 认知负载。 这样可最大程度地减少屏幕上的访问密钥数,从而使访问键更易于定位,并提高效率和工作效率。
例如,Microsoft Word 提供了两个访问键范围:功能区选项卡的主要范围,以及所选选项卡上命令的辅助范围。
下图演示 Word 中的两个访问密钥范围。 第一个显示主要访问键,允许用户选择选项卡和其他顶级命令,第二个显示“开始”选项卡的辅助访问键。
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 辅助范围和支持的访问密钥
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”for View)中独特的共鸣
- 使用命令名称中的元音。
本地化访问密钥
如果你的应用将采用多种语言进行本地化,则还 应考虑本地化访问密钥。 例如,对于 en-US 中的“Home”,对于 es-ES 中的“Incio”,则为“I”。
在标记中使用 x:Uid 扩展应用本地化资源,如下所示:
<Button Content="Home" AccessKey="H" x:Uid="HomeButton" />
将每个语言的资源添加到项目中的相应字符串文件夹:
英语和西班牙语资源字符串文件夹
本地化访问密钥在项目 resources.resw 文件中指定:
指定 resources.resw 文件中指定的 AccessKey 属性
有关详细信息,请参阅 翻译 UI 资源
键提示定位
键提示显示为相对于其相应 UI 元素的浮动锁屏提醒,同时考虑到存在其他 UI 元素、其他键提示和屏幕边缘。
通常,默认键提示位置已足够,并且为自适应 UI 提供内置支持。
自动键提示放置示例
但是,如果需要更好地控制键提示定位,我们建议执行以下操作:
明显的关联原则:用户可以轻松地将控件与键提示相关联。
a. 键提示应 靠近 具有访问键(所有者)的元素。
b. 键提示应 避免覆盖具有访问密钥的已启用元素 。
c. 如果无法将键提示放置在其所有者附近,则它应与所有者重叠。可发现性:用户可以使用键提示快速发现控件。
a. 键提示永远不会 与其他键提示重叠 。
轻松扫描: 用户可以轻松浏览关键提示。
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(边框粗细)。
键提示自定义选项
此示例演示如何更改这些应用程序资源:
<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 属性获取此值。 每次元素获得焦点时,辅助功能客户端(如讲述人)都会读取此属性的值。
相关文章
示例