Skip to content

Commit

Permalink
updates for keytip spelling (MicrosoftDocs#3697)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Karl-Bridge-Microsoft
Karl-Bridge-Microsoft authored Jul 28, 2023
1 parent d5d03e1 commit 787ba62
Showing 1 changed file with 39 additions and 39 deletions.
78 changes: 39 additions & 39 deletions hub/apps/design/input/access-keys.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
description: Learn how to improve both the usability and the accessibility of your Windows app by providing an intuitive way for users to quickly navigate and interact with an app's visible UI through a keyboard instead of a pointer device (such as touch or mouse).
title: Access keys design guidelines
label: Access keys design guidelines
keywords: keyboard, access key, keytip, key tip, accessibility, navigation, focus, text, input, user interaction
keywords: keyboard, access key, keytip, keytip, accessibility, navigation, focus, text, input, user interaction
template: detail.hbs
ms.date: 07/09/2021
ms.topic: article
Expand All @@ -16,7 +16,7 @@ ms.localizationpriority: medium

Access keys are keyboard shortcuts that improve the usability and the accessibility of your Windows applications by providing an intuitive way for users to quickly navigate and interact with an app's visible UI through a keyboard instead of a pointer device (such as touch or mouse).

The Windows app provides built-in support across platform controls for both keyboard-based access keys and associated UI feedback through visual cues called Key Tips.
The Windows app provides built-in support across platform controls for both keyboard-based access keys and associated UI feedback through visual cues called keytips.

> [!NOTE]
> A keyboard is indispensable for users with certain disabilities (see [Keyboard accessibility](../accessibility/keyboard-accessibility.md)), and is also an important tool for users who prefer it as a more efficient way to interact with an app.
Expand All @@ -29,20 +29,20 @@ To create your own custom keyboard shortcuts, see the [Keyboard events](keyboard

An access key is a combination of the Alt key and one or more alphanumeric keys—sometimes called a *mnemonic*—typically pressed sequentially, rather than simultaneously.

Key tips are badges displayed next to controls that support access keys when the user presses the Alt key. Each Key Tip contains the alphanumeric keys that activate the associated control.
Keytips are badges displayed next to controls that support access keys when the user presses the Alt key. Each keytip contains the alphanumeric keys that activate the associated control.

> [!NOTE]
> Keyboard shortcuts are automatically supported for access keys with a single alphanumeric character. For example, simultaneously pressing Alt+F in Word opens the File menu without displaying Key Tips.
> Keyboard shortcuts are automatically supported for access keys with a single alphanumeric character. For example, simultaneously pressing Alt+F in Word opens the File menu without displaying keytips.
Pressing the Alt key initializes access key functionality and displays all currently available key combinations in Key Tips. Subsequent keystrokes are handled by the access key framework, which rejects invalid keys until either a valid access key is pressed, or the Enter, Esc, Tab, or Arrow keys are pressed to deactivate access keys and return keystroke handling to the app.
Pressing the Alt key initializes access key functionality and displays all currently available key combinations in keytips. Subsequent keystrokes are handled by the access key framework, which rejects invalid keys until either a valid access key is pressed, or the Enter, Esc, Tab, or Arrow keys are pressed to deactivate access keys and return keystroke handling to the app.

Microsoft Office apps provide extensive support for access keys. The following image shows the Home tab of Word with access keys activated (note the support for both numbers and multiple keystrokes).

![Key Tip badges for access keys in Microsoft Word](images/accesskeys/keytip-badges-word.png)
![Keytip badges for access keys in Microsoft Word](images/accesskeys/keytip-badges-word.png)

_KeyTip badges for access keys in Microsoft Word_

To add an access key to a control, use the **AccessKey property**. The value of this property specifies the access key sequence, the shortcut (if a single alphanumeric), and the Key Tip.
To add an access key to a control, use the **AccessKey property**. The value of this property specifies the access key sequence, the shortcut (if a single alphanumeric), and the keytip.

``` xaml
<Button Content="Accept" AccessKey="A" Click="AcceptButtonClick" />
Expand Down Expand Up @@ -240,46 +240,46 @@ _Specify the AccessKey property specified in the resources.resw file_

For more info, see [Translating UI resources ](/previous-versions/windows/apps/hh965329(v=win.10))

## Key Tip positioning
## Keytip positioning

Key tips are displayed as floating badges relative to their corresponding UI element, taking into account the presence of other UI elements, other Key Tips, and the screen edge.
Keytips are displayed as floating badges relative to their corresponding UI element, taking into account the presence of other UI elements, other keytips, and the screen edge.

Typically, the default Key Tip location is sufficient and provides built-in support for adaptive UI.
Typically, the default keytip location is sufficient and provides built-in support for adaptive UI.

![Example of automatic Key Tip placement](images/accesskeys/auto-keytip-position.png)
![Example of automatic keytip placement](images/accesskeys/auto-keytip-position.png)

_Example of automatic Key Tip placement_
_Example of automatic keytip placement_

However, should you need more control over Key Tip positioning, we recommend the following:
However, should you need more control over keytip positioning, we recommend the following:

1. **Obvious association principle**: The user can associate the control with the Key Tip easily.
1. **Obvious association principle**: The user can associate the control with the keytip easily.

a. The Key Tip should be **close** to the element who have the access key (the owner).
b. The Key Tip should **avoid covering enabled elements** that have access keys.
c. If a Key Tip can't be placed close to its owner, it should overlap the owner. 
a. The keytip should be **close** to the element who have the access key (the owner).
b. The keytip should **avoid covering enabled elements** that have access keys.
c. If a keytip can't be placed close to its owner, it should overlap the owner. 

2. **Discoverability**: The user can discover the control with the Key Tip quickly.
2. **Discoverability**: The user can discover the control with the keytip quickly.

a. The Key Tip never **overlaps** other Key Tips.  
a. The keytip never **overlaps** other keytips.  

3. **Easy scanning:** The user can skim the Key Tips easily.
3. **Easy scanning:** The user can skim the keytips easily.

a. Key Tips should be **aligned** with each other and with the UI Element.
b. Key Tips should be **grouped** as much as possible. 
a. keytips should be **aligned** with each other and with the UI Element.
b. keytips should be **grouped** as much as possible. 

### Relative position

Use the **KeyTipPlacementMode** property to customize the placement of the Key Tip on a per element or per group basis.
Use the **KeyTipPlacementMode** property to customize the placement of the keytip on a per element or per group basis.

The placement modes are: Top, Bottom, Right, Left, Hidden, Center, and Auto.

![Screenshot showing the relative positions of the Key tip placement modes](images/accesskeys/keytip-postion-modes.png)
![Screenshot showing the relative positions of the keytip placement modes](images/accesskeys/keytip-postion-modes.png)

_Key tip placement modes_
_keytip placement modes_

The center line of the control is used to calculate the vertical and horizontal alignment of the Key Tip.
The center line of the control is used to calculate the vertical and horizontal alignment of the keytip.

They following example shows how to set the Key Tip placement of a group of controls using the KeyTipPlacementMode property of a StackPanel container.
They following example shows how to set the keytip placement of a group of controls using the KeyTipPlacementMode property of a StackPanel container.

``` xaml
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" KeyTipPlacementMode="Top">
Expand All @@ -291,16 +291,16 @@ They following example shows how to set the Key Tip placement of a group of cont

### Offsets

Use the KeyTipHorizontalOffset and KeyTipVerticalOffset properties of an element for even more granular control of the Key Tip location.
Use the KeyTipHorizontalOffset and KeyTipVerticalOffset properties of an element for even more granular control of the keytip location.

> [!NOTE]
> Offsets cannot be set when KeyTipPlacementMode is set to Auto.
The KeyTipHorizontalOffset property indicates how far to move the Key Tip left or right.
The KeyTipHorizontalOffset property indicates how far to move the keytip left or right.

![Screenshot of vertical and horizontal Key Tip offsets for a button](images/accesskeys/keytip-offsets.png)
![Screenshot of vertical and horizontal keytip offsets for a button](images/accesskeys/keytip-offsets.png)

_Set vertical and horizontal Key Tip offsets for a button_
_Set vertical and horizontal keytip offsets for a button_

``` xaml
<Button
Expand All @@ -313,21 +313,21 @@ _Set vertical and horizontal Key Tip offsets for a button_

### Screen edge alignment {#screen-edge-alignment .ListParagraph}

The location of a Key Tip is automatically adjusted based on the screen edge to ensure the Key Tip is fully visible. When this occurs, the distance between the control and Key Tip alignment point might differ from the values specified for the horizontal and vertical offsets .
The location of a keytip is automatically adjusted based on the screen edge to ensure the keytip is fully visible. When this occurs, the distance between the control and keytip alignment point might differ from the values specified for the horizontal and vertical offsets .

![Screenshot of Key Tip screen edge alignment](images/accesskeys/keytips-screen-edge.png)
![Screenshot of keytip screen edge alignment](images/accesskeys/keytips-screen-edge.png)

_Key Tips are automatically positioned based on the screen edge_
_keytips are automatically positioned based on the screen edge_

## Key Tip style
## Keytip style

We recommend using the built-in Key Tip support for platform themes, including high contrast.
We recommend using the built-in keytip support for platform themes, including high contrast.

If you need to specify your own Key Tip styles, use application resources such as KeyTipFontSize (font size), KeyTipFontFamily (font family), KeyTipBackground (background), KeyTipForeground (foreground), KeyTipPadding (padding), KeyTipBorderBrush(Border color), and KeyTipBorderThemeThickness (border thickness).
If you need to specify your own keytip styles, use application resources such as KeyTipFontSize (font size), KeyTipFontFamily (font family), KeyTipBackground (background), KeyTipForeground (foreground), KeyTipPadding (padding), KeyTipBorderBrush(Border color), and KeyTipBorderThemeThickness (border thickness).

![Screenshot of Key tip customization options, including font, order, and color](images/accesskeys/keytip-customization.png)
![Screenshot of keytip customization options, including font, order, and color](images/accesskeys/keytip-customization.png)

_Key tip customization options_
_keytip customization options_

This example demonstrates how to change these application resources:

Expand Down

0 comments on commit 787ba62

Please sign in to comment.