存取鍵是鍵盤捷徑,透過直覺方式讓使用者能透過鍵盤快速瀏覽並互動應用程式的可見介面,而非透過觸控或滑鼠等指標,提升 Windows 應用程式的可用性與無障礙性。
Windows 應用程式內建支援跨平台控制項,適用於鍵盤存取鍵,並透過稱為按鍵提示的視覺提示提供使用者介面回饋。
備註
鍵盤對於某些身心障礙的使用者來說是不可或缺的(參見 鍵盤無障礙),同時也是偏好以更有效率方式與應用程式互動的使用者的重要工具。
有關在 Windows 應用程式中使用鍵盤快捷鍵呼叫常用動作的詳細內容,請參見熱鍵主題。
若想建立自訂鍵盤快捷鍵,請參閱 鍵盤事件 主題。
概觀
存取鍵是Alt鍵與一個或多個字母數字鍵(有時稱為 助記鍵)的組合,通常依序按下,而非同時按下。
Keytips 是當使用者按下 Alt 鍵時,在支援快捷鍵的控制項旁顯示的徽章。 每個鍵盤提示符都包含用來啟動相關控制的字母數字鍵。
備註
鍵盤快捷鍵自動支援單一字母數字的存取鍵。 例如,同時按下 Word 中的 Alt+F 會開啟檔案選單,但不會顯示按鍵提示。
按下 Alt 鍵可初始化存取鍵功能,並在鍵尖中顯示所有目前可用的按鍵組合。 後續的按鍵由存取鍵框架處理,該框架會拒絕無效鍵,直到按下有效的存取鍵,或按下 Enter、Esc、Tab 或箭頭鍵以停用存取鍵並將按鍵處理權還給應用程式。
Microsoft Office 應用程式對存取金鑰提供廣泛支援。 下圖顯示 Word 的「首頁」標籤,已經啟用存取鍵(請注意其支援數字及多次按鍵的功能)。
Microsoft Word 存取鍵的 KeyTip 徽章
若要在控制項中新增存取金鑰,請使用 AccessKey 屬性。 此屬性的值指定了存取鍵序列、捷徑(若為單一字母數字)及鍵尖。
<Button Content="Accept" AccessKey="A" Click="AcceptButtonClick" />
何時使用存取鑰匙
我們建議您在 UI 中適當指定存取鍵,並在所有自訂控制項中支援存取鍵。
存取鍵讓應用程式對 有運動障礙的使用者更易於使用,包括只能一次按下一個鍵或滑鼠操作困難的使用者。
設計良好的鍵盤介面是軟體無障礙的重要面向。 它讓視障或特定運動障礙的使用者能操作應用程式並互動其功能。 這類使用者可能無法操作滑鼠,只能依賴各種輔助技術,如鍵盤增強工具、螢幕鍵盤、螢幕放大器、螢幕閱讀器及語音輸入工具。 對這些使用者來說,全面的指揮覆蓋至關重要。
存取鍵讓偏好透過鍵盤互動的高階使用者更易使用。
有經驗的使用者通常偏好使用鍵盤,因為鍵盤指令輸入更快,且不必將手從鍵盤移開。 對這些使用者來說,效率與一致性至關重要;完整性僅對最常用的指令重要。
設定存取鑰匙範圍
當螢幕上有許多支援存取鍵的元素時,我們建議設定存取鍵的範圍以減輕 認知負擔。 這減少了螢幕上的存取鍵數量,使它們更容易被找到,並提升效率與生產力。
例如,Microsoft Word 提供兩個存取鍵範圍:一個用於排區分頁的主要作用域,以及一個用於所選分頁上的次要指令範圍。
以下圖片展示了 Word 中的兩個存取鍵範圍。 第一個顯示主要存取鍵,讓使用者能選擇分頁及其他頂層指令,第二個則是 Home 分頁的次要存取鍵。
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 秋季創作者更新之前,某些控制項如 CommandBar 不支援內建的存取鍵範圍。
以下範例展示了如何以存取鍵支援 CommandBar SecondaryCommands,這些存取鍵在呼叫父指令後即可使用(類似 Word 中的 Ribbon)。
<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」代表「Home」等等)
- 使用指令名稱的第一個字元,或是與指令有密切關聯且有助於回憶的字元
- 如果第一個字母已經被指派,請使用一個盡可能接近指令名稱首字母的字母(「N」代表插入)
- 使用指令名稱中獨特的子音(「W」代表視圖)
- 使用指令名稱中的母音。
在地化存取金鑰
如果你的應用程式將支援多種語言,也應該 考慮在地化存取鍵。 例如,en-US 中的「H」代表「Home」,es-ES中的「Incio」代表「I」。
在標記中使用 x:Uid 擴充功能來套用本地化資源,如圖所示:
<Button Content="Home" AccessKey="H" x:Uid="HomeButton" />
每種語言的資源會被加入專案中對應的字串資料夾:
英文與西班牙文資源字串資料夾
在地化的存取金鑰會在你的專案 resources.resw 檔案中指定:
請指定 resources.resw 檔案中指定的 AccessKey 屬性
更多資訊請參見 翻譯 UI 資源
按鍵尖端定位
按鍵指針會以相對於對應的 UI 元素浮動徽章顯示,並考慮其他 UI 元素、其他按鍵鍵及螢幕邊緣的存在。
通常,預設的按鍵提示位置已足夠,並內建對自適應使用者介面的支援。
自動按鍵輸入範例
不過,如果你需要更多控制鍵尖位置,我們建議以下方法:
明顯的關聯原則:使用者可以輕鬆將控制鍵與按鍵指尖連結起來。
一。 鑰匙尖應該 靠近 擁有存取鑰匙的元件(擁有者)。
b。 鍵盤提示應避免覆蓋具有存取鍵的啟用元素。
c. 如果鑰匙尖無法靠近擁有者,應該要重疊在擁有者身上。可發現性:使用者能快速用鍵尖找到控制鍵。
一。 按鍵指尖不會與其他按鍵 指尖重疊 。
輕鬆掃描: 使用者可以輕鬆瀏覽按鍵指尖。
一。 鍵尖應該彼此對 齊 ,並與 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 屬性會顯示該將 Keytip 向左或向右移動多少。
為按鈕設定垂直與水平鍵尖偏移
<Button
Content="File"
AccessKey="F"
KeyTipPlacementMode="Bottom"
KeyTipHorizontalOffset="20"
KeyTipVerticalOffset="-8" />
螢幕邊緣對齊 {#screen-edge-alignment .清單段落}
鍵盤尖端的位置會根據螢幕邊緣自動調整,確保鍵盤完全可見。 此時,控制點與鍵尖對齊點之間的距離可能與水平及垂直偏移量所設定的值不同。
按鍵指尖會根據螢幕邊緣自動定位
Keytip 風格
我們建議使用內建的鍵尖支援來處理平台主題,包括高對比度。
如果你需要指定自己的關鍵提示樣式,可以使用應用程式資源,例如 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 屬性來取得這個值。 無障礙客戶端,如 Narrator,會在每次元素被聚焦時讀取該屬性的價值。
相關文章
範例