アクセス キー

アクセス キーは、ユーザーがポインター デバイス (タッチやマウスなど) ではなく、キーボードを使用してアプリの表示 UI をすばやく操作し、操作する直感的な方法を提供することで、Windows アプリケーションの使いやすさとアクセシビリティを向上させるキーボード ショートカットです。

Windows アプリは、キーボード ベースのアクセス キーと、キーヒントと呼ばれる視覚的な手掛かりを通じて関連する UI フィードバックの両方に対して、プラットフォーム コントロール間で組み込みのサポートを提供します。

キーボード ショートカットを使用した Windows アプリケーションでの一般的なアクションの呼び出しの詳細については、アクセラレータ キーの トピックを参照してください。

独自のカスタム キーボード ショートカットを作成するには、キーボード イベント トピックを参照してください。

概要

アクセス キーは、Alt キーと 1 つ以上の英数字キー (ニーモニックと呼ばれることもあります) を組み合わせたものであり、通常は同時ではなく順番に押されます。

キーヒントは、ユーザーが Alt キーを押したときにアクセス キーをサポートするコントロールの横に表示されるバッジです。 各キーヒントには、関連付けられたコントロールをアクティブにする英数字キーが含まれています。

Alt キーを押すと、アクセス キー機能が初期化され、現在使用可能なすべてのキーの組み合わせがキーヒントに表示されます。 以降のキー入力はアクセス キー フレームワークによって処理され、有効なアクセス キーが押されるか、Enter キー、Esc キー、Tab キー、または方向キーが押されてアクセス キーが非アクティブ化され、キーストローク処理がアプリに返されるまで無効なキーが拒否されます。

Microsoft Office アプリは、アクセス キーの広範なサポートを提供します。 次の図は、アクセス キーがアクティブになっている Word の [ホーム] タブを示しています (数字と複数のキーストロークの両方のサポートに注意してください)。

Microsoft Word のアクセスキーのキーヒントバッジ

コントロールにアクセス キーを追加するには、AccessKey プロパティを使用します。 このプロパティの値は、アクセス キー シーケンス、ショートカット (1 つの英数字の場合)、およびキーヒントを指定します。

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

アクセス キーを使用するタイミング

UI で適切な場所にアクセス キーを指定し、すべてのカスタム コントロールでアクセス キーをサポートすることをお勧めします。

1. アクセス キーを使用すると、一度に 1 つのキーのみを押したり、マウスを使用するのが困難なユーザーを含む、運動障碍のあるユーザーのアプリのアクセシビリティが高まる を実現できます。

   適切に設計されたキーボード UI は、ソフトウェア アクセシビリティの重要な側面です。 視覚障碍のあるユーザーや、特定の運動障碍を持つユーザーがアプリをナビゲートし、その機能と対話できるようにします。 このようなユーザーはマウスを操作できず、代わりにキーボード拡張ツール、スクリーン キーボード、スクリーン 拡大、スクリーン リーダー、音声入力ユーティリティなどのさまざまな支援技術に依存している可能性があります。 これらのユーザーにとって、包括的なコマンド カバレッジが重要です。

2. アクセス キーを使用すると、キーボードを介して操作することを好むパワー ユーザーにとって、アプリの が使いやすくなっています。

   経験豊富なユーザーは、キーボードベースのコマンドをより迅速に入力でき、キーボードから手を取り除く必要がないため、キーボードの使用を強く好むことがよくあります。 これらのユーザーにとって、効率性と一貫性が重要であり、包括性は最も頻繁に使用されるコマンドに対してのみ重要です。

アクセス キースコープを設定する

アクセス キーをサポートする要素が画面上に多数ある場合は、アクセス キーのスコープを設定して、コグニティブ負荷を軽減することをお勧めします。 これにより、画面上のアクセス キーの数が最小限に抑えられます。これにより、検索が容易になり、効率と生産性が向上します。

たとえば、Microsoft Word には、リボン タブのプライマリ スコープと、選択したタブのコマンドのセカンダリ スコープという 2 つのアクセス キー スコープが用意されています。

次の図は、Word の 2 つのアクセス キー スコープを示しています。 1 つ目には、ユーザーがタブやその他の最上位レベルのコマンドを選択できるプライマリ アクセス キーが表示され、2 つ目には [ホーム] タブのセカンダリ アクセス キーが表示されます。

を使用したプライマリ アクセス キー

Microsoft Wordのセカンダリアクセスキー を使用して、Microsoft Word にアクセスする

アクセス キーは、異なるスコープ内の要素に対して複製できます。 前の例では、"2" はプライマリ スコープの Undo のアクセス キーであり、セカンダリ スコープでは "斜体" です。

ここでは、アクセス キースコープを定義する方法を示します。

<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のセカンダリアクセスキー

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" など) で始まる場合、システムは 1 文字のアクセス キーを処理し、他のすべてのアクセス キーを無視します。

一意のアクセス キーを使用するか、コマンドの範囲を限定することで、競合を回避します。

アクセス キーの選択

アクセス キーを選択するときは、次の点を考慮してください。

• 1 文字を使用してキーストロークを最小限に抑え、アクセラレータ キーを既定でサポートする (Alt + AccessKey)
• 2 文字を超える文字を使用しないようにする
• アクセス キーの競合を回避する
• 文字 "I" や数字 "1" や文字 "O" や数字 "0" など、他の文字との区別が難しい文字は避けてください。
• 他の人気アプリ、例えば Word のようなものでよく知られている事例を利用する（"ファイル" の "F"、"ホーム" の "H" など）。
• コマンド名の最初の文字、または呼び戻しに役立つコマンドと密接に関連付ける文字を使用します
  • 最初の文字が既に割り当てられている場合は、コマンド名の最初の文字にできるだけ近い文字を使用します (挿入の場合は "N"
  • コマンド名から固有の子音を使用する (View の場合は "W" )
  • コマンド名の母音を使用します。

アクセス キーをローカライズする

アプリを複数の言語でローカライズする場合は、アクセス キーローカライズすることも検討 必要があります。 たとえば、en-US の "Home" の場合は "H"、es-ESでは "Incio" の場合は "I" です。

次に示すように、マークアップで x:Uid 拡張機能を使用して、ローカライズされたリソースを適用します。

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

各言語のリソースは、プロジェクト内の対応する文字列フォルダーに追加されます。

英語とスペイン語のリソース文字列フォルダーを

英語とスペイン語のリソース文字列フォルダー

ローカライズされたアクセス キーは、プロジェクト resources.resw ファイルで指定されます。

resources.resw ファイルで指定された AccessKey プロパティを指定

詳細については、「UI リソース の翻訳 」を参照してください。

キーヒントの配置

キーヒントは、他の UI 要素、他のキーヒント、および画面の端の存在を考慮して、対応する UI 要素を基準にしてフローティング バッジとして表示されます。

通常、既定のキーヒントの場所で十分であり、アダプティブ UI の組み込みサポートを提供します。

キーヒントの自動配置 の例

ただし、キーヒントの配置をより詳細に制御する必要がある場合は、次のことをお勧めします。

1. 明らかな関連付けの原則: ユーザーは、コントロールをキーヒントに簡単に関連付けることができます。

   ある。 キーヒントは、アクセス キー 持つ要素 (所有者) に 近い値にする必要があります。
   b。 キーヒント 、アクセス キーを持つ有効な要素 をカバーしないようにする必要があります。
   c. キーヒントを対象の近くに配置できない場合は、対象と重なる必要があります。 

2. 検出可能性: ユーザーはキーヒントを使用してコントロールをすばやく検出できます。

   ある。 キーヒントが他のキーヒントと重複 ことはありません。  

3. 簡単なスキャン: ユーザーは簡単にキーヒントをスキミングすることができます。

   ある。 キーヒントは、互いに、および 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 プロパティを使用します。

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 プロパティを使用してこの値を取得できます。 ナレーターなどのアクセシビリティ クライアントは、要素がフォーカスを取得するたびに、このプロパティの値を読み取ります。

関連資料

• キーボード操作のインタラクション
• キーボード アクセラレータの

サンプル

• WinUI ギャラリー