다음을 통해 공유

액세스 키

  • 아티클

선택키는 사용자가 터치 또는 마우스 같은 포인터 디바이스 대신 키보드를 통해 앱의 시각적 UI를 신속하게 탐색하고 상호 작용할 수 있는 직관적인 방법을 제공하여 Windows 애플리케이션의 사용 편의성과 접근성을 개선하는 바로 가기 키입니다.

Windows 앱은 키보드 기반 액세스 키와 키 설명이라는 시각적 신호를 통해 연결된 UI 피드백 모두에 대한 플랫폼 컨트롤 전반에서 기본 제공 지원을 제공합니다.

참고 항목

키보드는 특정 장애(키보드 접근성 참조)가 있는 사용자에게 필수이며, 앱과 좀 더 효과적으로 상호 작용하는 수단으로 키보드를 선호하는 사용자에게도 중요한 도구입니다.

바로 가기 키를 사용하여 Windows 애플리케이션에서 일반적인 작업을 호출하는 방법에 대한 자세한 내용은 바로 가기 키 항목을 참조하세요.

사용자 고유의 사용자 지정 바로 가기 키를 만들려면 키보드 이벤트 항목을 참조하세요.

개요

선택키는 Alt 키와 하나 이상의 영숫자 키 조합(니모닉이라고도 함)으로 구성되며 일반적으로 동시에 누르지 않고 순차적으로 누릅니다.

키 설명은 사용자가 Alt 키를 누를 때 액세스 키를 지원하는 컨트롤 옆에 표시되는 배지입니다. 각 키 설명에는 연결된 컨트롤을 활성화하는 영숫자 키가 있습니다.

참고 항목

바로 가기 키는 단일 영숫자 문자를 사용하는 선택키에 대해 자동으로 지원됩니다. 예를 들어, Word에서 Alt+F를 동시에 누르면 키 설명이 표시되지 않고 파일 메뉴가 열립니다.

Alt 키를 누르면 액세스 키 기능이 초기화되고 현재 사용 가능한 모든 키 조합이 키 설명에 표시됩니다. 이후의 키 입력은 선택키 프레임워크를 통해 처리됩니다. 유효한 선택키를 누르거나 Enter, Esc, Tab 또는 화살표 키를 눌러 선택키를 비활성화하고 키 입력 처리를 앱에 반환할 때까지 잘못된 키가 거부됩니다.

Microsoft Office 앱은 선택키에 대한 다양한 지원을 제공합니다. 다음 이미지는 선택키가 활성화된 Word의 홈 탭을 보여 줍니다(숫자 및 여러 키 입력을 지원).

Microsoft Word의 액세스 키에 대한 키 설명 배지

Microsoft Word의 선택키에 대한 키 팁 배지

컨트롤에 선택키를 추가하려면 AccessKey 속성을 사용합니다. 이 속성의 값은 액세스 키 시퀀스, 바로 가기(단일 영숫자인 경우) 및 키 설명을 지정합니다.

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

선택키를 사용해야 하는 경우

적합한 경우 UI 어디서나 선택키를 지정하고 모든 사용자 지정 컨트롤에서 선택키를 지원하는 것이 좋습니다.

  1. 키를 한 번에 하나만 누를 수 있거나 마우스 사용에 어려움이 있는 사용자를 포함하여 거동 장애가 있는 사용자를 위해 선택키로 앱의 접근성을 향상합니다.

    잘 디자인된 키보드 UI는 소프트웨어 접근성의 중요한 측면입니다. 시각 장애가 있거나 특정 운동 장애가 있는 사용자가 앱을 탐색하고 해당 기능과 상호 작용할 수 있습니다. 이러한 사용자는 마우스를 조작할 수 없으며 대신 키보드 개선 도구, 화상 키보드, 화면 확대기, 화면 읽기 프로그램 및 음성 입력 유틸리티와 같은 다양한 보조 기술에 의존할 수 있습니다. 이러한 사용자에게는 포괄적인 명령 범위가 매우 중요합니다.

  2. 키보드로 조작하는 것을 선호하는 고급 사용자를 위해 선택키로 앱의 사용 편의성을 향상합니다.

    숙련된 사용자는 키보드 기반 명령을 더 빠르게 입력할 수 있고 키보드에서 손을 떼지 않아도 되기 때문에 키보드를 선호하는 경향이 강합니다. 이러한 사용자의 경우 효율성과 일관성이 중요합니다. 포괄성은 가장 자주 사용되는 명령에만 중요합니다.

선택키 범위 설정

화면에 선택키를 지원하는 요소가 많이 있는 경우 선택키 범위를 조정하여 인지적 부하를 줄이는 것이 좋습니다. 이렇게 하면 화면의 선택키 수가 최소화되어 쉽게 찾을 수 있으며, 효율성과 생산성이 향상됩니다.

예를 들어 Microsoft Word는 두 가지 선택키 범위를 제공합니다. 하나는 리본 탭의 주 범위이고 다른 하나는 선택한 탭의 명령에 대한 보조 범위입니다.

다음 이미지는 Word의 두 개의 선택키 범위를 보여 줍니다. 첫 번째는 사용자가 탭 및 다른 최상위 수준 명령을 선택할 수 있는 주 선택키를 보여 주고, 두 번째는 홈 탭의 선택키를 보여 줍니다.

Microsoft Word의 기본 액세스 키Microsoft 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 주 범위 및 지원되는 선택키

CommandBar에 대한 보조 액세스 키

CommandBar 보조 범위 및 지원되는 선택키

Windows 10 크리에이터스 업데이트 이상

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 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")
    • 명령 이름의 고유한 자음 사용(보기는 "W")
    • 명령 이름의 모음을 사용합니다.

선택키 지역화

또한 앱이 여러 언어로 지역화되는 경우 선택키 지역화를 고려해야 합니다. 예를 들어 en-US에서는 "Home"에 "H"를 사용하고 es-ES에서는 "Incio"에 "I"를 사용합니다.

다음과 같이 태그에 x:Uid 확장을 사용하여 지역화된 리소스를 적용합니다.

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

각 언어에 대한 리소스는 프로젝트의 해당 문자열 폴더에 추가됩니다.

영어 및 스페인어 리소스 문자열 폴더

영어 및 스페인어 리소스 문자열 폴더

지역화된 선택키는 프로젝트 resources.resw 파일에 지정됩니다.

resources.resw 파일에 지정된 AccessKey 속성 지정

resources.resw 파일에 지정된 AccessKey 속성 지정

자세한 내용은 UI 리소스 번역을 참조하세요.

키 설명 위치 지정

키 설명은 다른 UI 요소, 다른 키 설명 및 화면 가장자리의 존재를 고려하여 해당 UI 요소를 기준으로 부동 배지로 표시됩니다.

일반적으로 기본 키 설명 위치로 충분하며 적응형 UI에 대한 기본 제공 지원을 제공합니다.

자동 키 설명 배치의 예

자동 키 설명 배치의 예

그러나 키 설명 위치를 더 제어해야 하는 경우 다음을 수행하는 것이 좋습니다.

  1. 명백한 연결 원칙: 사용자가 컨트롤을 키 설명과 쉽게 연결할 수 있습니다.

    a. 키 설명은 액세스 키가 있는 요소(소유자)에 가까워야 합니다.
    b. 키 설명은 액세스 키가 있는 활성화된 요소를 가리지 않아야 합니다.
    c. 키 설명을 소유자 가까이에 배치할 수 없는 경우에는 소유자와 겹쳐야 합니다. 

  2. 검색 가능성: 사용자가 키 설명으로 컨트롤을 빠르게 검색할 수 있습니다.

    a. 키 설명은 절대로 다른 키 설명과 겹치지 않습니다.  

  3. 쉬운 스캔: 사용자가 키 설명을 대충 쉽게 훑어볼 수 있습니다.

    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 속성을 사용하여 이 값을 가져올 수 있습니다. 내레이터 같은 접근성 클라이언트의 경우 요소가 포커스를 받을 때마다 이 속성 값을 읽습니다.

샘플