アクセス キー

  • [アーティクル]

アクセス キーは、ポインター デバイス (タッチやマウスなど) の代わりにキーボードを使ってアプリの表示される UI をすばやく移動して操作する直感的な方法をユーザーに用意することにより、Windows アプリケーションの使いやすさとアクセシビリティの両方を高めることができるキーボード ショートカットです。

Windows アプリには、キーボードベースのアクセス キーと、キーのヒントと呼ばれる視覚的な合図を利用した関連する UI フィードバックの両方について、さまざまなプラットフォーム コントロールに対応した組み込みのサポートが用意されています。

注意

キーボードは、特定の障碍を持つユーザーにとっては不可欠であり (キーボードのアクセシビリティをご覧ください)、アプリをより効率的に操作することを望むユーザーにとって重要なツールでもあります。

キーボード ショートカットを使って Windows アプリケーションの一般的な操作を呼び出す方法について詳しくは、「アクセラレータ キー」のトピックをご覧ください。

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

概要

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

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

注意

1 文字の英数字を使ったアクセス キーでは、キーボード ショートカットが自動的にサポートされます。 たとえば、Word で Alt キーを押しながら F キーを押すと、キーのヒントが表示されずに [ファイル] メニューが開きます。

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

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

Key Tip badges for access keys in Microsoft Word

Microsoft Word におけるアクセス キーの KeyTip バッジ

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

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

アクセス キーを使う場合

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

  1. 一度に 1 つのキーのみ押すことができるユーザーや、マウスを使うのが困難なユーザーなど、運動障碍を持つユーザーにとっては、アクセス キーによりアプリのアクセシビリティが高まります。

    適切に設計されたキーボード UI はソフトウェアのアクセシビリティの重要な要素であり、 視覚に障碍のあるユーザーや特定の運動障碍のあるユーザーによるアプリ内の移動や、その機能の操作を実現します。 このようなユーザーはマウスを操作できない場合があるため、代わりにさまざまな支援技術 (キーボード強化ツール、スクリーン キーボード、スクリーン拡大機能、スクリーン リーダー、音声入力ユーティリティなど) が不可欠になる可能性があります。 このようなユーザーにとっては、コマンドを包括的にカバーすることが重要です。

  2. キーボードを使った操作を好むパワー ユーザーにとっては、アクセス キーによりアプリが使いやすくなります。

    多くの経験豊富なユーザーには、キーボードの使用の方がはるかに好まれます。キーボード ベースのコマンドであれば、すばやく入力することができ、キーボードから手を離す必要がないためです。 このようなユーザーにとっては、効率性と一貫性が重要です。包括性が重要になるのは、特に頻繁に使用するコマンドに対してのみです。

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

アクセス キーをサポートする要素が画面上に多くある場合、認知的負荷を軽減するためにアクセス キーのスコープを設定することをお勧めします。 これにより、画面上のアクセス キーの数が最小限に抑えられるため、見つけやすくなり、効率性と生産性が向上します。

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

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

Primary access keys in Microsoft WordMicrosoft Word におけるプライマリ アクセス キー

Secondary access keys in Microsoft WordMicrosoft 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>

Primary access keys for CommandBar

CommandBar のプライマリ スコープとサポートされているアクセス キー

Secondary access keys for CommandBar

CommandBar のセカンダリ スコープとサポートされているアクセス キー

Windows 10 Creators Update 以降

Windows 10 Fall Creators Update以前は、CommandBar などの一部のコントロールでは、組み込みのアクセス キー スコープがサポートされていませんでした。

次の例は、親コマンド (Word のリボンに似ています) が呼び出されると使用できるアクセス キー持つ CommandBar の SecondaryCommands をサポートする方法を示しています。

<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 neccesay 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 文字のアクセス キーを処理し、それ以外はすべて無視します。

競合を避けるには、一意のアクセス キーを使ったり、コマンドのスコープを設定したりします。

アクセス キーを選ぶ

アクセス キーを選ぶときは、以下の点を考慮してください。

  • 単一の文字を使ってキー入力を最小限に抑え、ショートカット キーを既定でサポートする (Alt + アクセス キー)
  • 複数文字を使わない
  • アクセス キーの競合を避ける
  • 文字 "I" や数字 "1" や文字 "O" や数字 "0" など、他の文字との区別が難しい文字は避けてください。
  • Word ("ファイル" の場合は "F"、"ホーム" には "H" など) など、他の一般的なアプリのよく知られている優先順位を使用します。
  • コマンド名の先頭の文字を使ったり、思い出しやすいようにコマンドとの関連性が高い文字を使ったりする
    • 最初の文字が既に割り当てられている場合は、コマンド名の最初の文字にできるだけ近い文字を使用します (挿入の場合は "N"
    • コマンド名から固有の子音を使用する ("W" for View)
    • コマンド名の母音を使う

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

アプリが複数の言語にローカライズされる場合、アクセス キーのローカライズも検討してください。 たとえば、en-US の "Home" の場合は "H"、es-ES では "Incio" の場合は "I" です。

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

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

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

English and Spanish resource string folders

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

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

Specify the AccessKey property specified in the resources.resw file

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

詳しくは、「UI リソースの翻訳」をご覧ください。

キーのヒントを配置する

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

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

Example of automatic Key Tip placement

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

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

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

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

  2. 見つけやすさ: ユーザーが、キーのヒントによってコントロールをすばやく見つけることができるようにします。

    a. キーのヒントが他のキーのヒントと重なるのを回避してください。  

  3. 読み取りやすい: ユーザーがキーのヒントを簡単に読み取ることができるようにします。

    a. キーのヒントは、ヒント相互および UI 要素に揃えて配置する必要があります。 b. キーのヒントはできる限りグループ分けする必要があります。 

相対的な配置

要素またはグループごとにキーのヒントの配置をカスタマイズするには、KeyTipPlacementMode プロパティを使います。

配置モードは、Top、Bottom、Right、Left、Hidden、Center、Auto です。

Screenshot showing the relative positions of the Key tip placement modes

キーのヒントの配置モード

コントロールの中心線は、キーのヒントの垂直方向および水平方向の配置の計算に使われます。

次の例は、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 が Auto に設定されているときは、オフセットを設定できません。

KeyTipHorizontalOffset プロパティは、キーのヒントを左または右に移動する距離を指定します。

Screenshot of vertical and horizontal Key Tip offsets for a button

ボタンのキーのヒントの垂直オフセットと水平オフセットを設定する

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

画面の端の配置 {#screen-edge-alignment .ListParagraph}

キーのヒントの場所は、キーのヒントが完全に表示されるように画面の端を基準にして自動的に調整されます。 この場合、コントロールとキーのヒントの配置ポイントとの間にある距離が、水平オフセットと垂直オフセットに指定した値と異なることがあります。

Screenshot of Key Tip screen edge alignment

キーのヒントは画面の端を基準にして自動的に配置される

キーのヒントのスタイル

プラットフォームのテーマ用に組み込まれているキーのヒントのサポート (ハイ コントラストなど) を使うことをお勧めします。

独自のキーのヒントのスタイルを指定する必要がある場合、KeyTipFontSize (フォント サイズ)、KeyTipFontFamily (フォント ファミリ)、KeyTipBackground (背景)、KeyTipForeground (前景)、KeyTipPadding (パディング)、KeyTipBorderBrush (境界線の色)、KeyTipBorderThemeThickness (境界線の太さ) などのアプリケーション リソースを使います。

Screenshot of Key tip customization options, including font, order, and color

キーのヒントのカスタマイズ オプション

この例は、これらのアプリケーション リソースを変更する方法を示しています。

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

サンプル