액세스 키

액세스 키는 사용자가 포인터 장치(예: 터치 또는 마우스) 대신 키보드를 통해 앱의 표시되는 UI를 빠르게 탐색하고 상호 작용할 수 있는 직관적인 방법을 제공하여 Windows 애플리케이션의 유용성과 접근성을 향상시키는 바로 가기 키입니다.

Windows 앱은 키트립이라는 시각적 신호를 통해 키보드 기반 액세스 키와 관련 UI 피드백을 포함하여 플랫폼 제어 전반에 걸쳐 기본 제공 지원을 제공합니다.

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

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

개요

액세스 키는 Alt 키와 하나 이상의 영숫자 키(니모닉라고도 함)의 조합으로, 일반적으로 동시에 누르는 대신 순차적으로 누름입니다.

키팁은 사용자가 Alt 키를 누를 때 액세스 키를 지원하는 컨트롤 옆에 표시되는 배지입니다. 각 키팁에는 관련 컨트롤을 활성화하는 영숫자 키가 포함됩니다.

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의 보조 액세스 키 의 보조 액세스 키

다른 범위의 요소에 대해 액세스 키를 복제할 수 있습니다. 앞의 예제에서 "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 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")로 시작하는 경우 시스템은 단일 문자 액세스 키를 처리하고 다른 모든 키는 무시합니다.

고유한 액세스 키를 사용하거나 명령 범위를 지정하여 충돌을 방지합니다.

접근 키 선택

선택키를 선택할 때 다음 사항을 고려합니다.

• 단일 문자를 사용하여 키 입력을 최소화하고 기본적으로 가속기 키를 지원합니다(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" />

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

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

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

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

지정된 AccessKey 속성을 지정합니다.

resources.resw 파일 지정된 AccessKey 속성을 지정합니다.

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

키팁 위치 설정

키팁은 다른 UI 요소, 다른 키팁, 화면 가장자리의 존재를 고려하여 해당 UI 요소에 상대적으로 떠 있는 배지로 표시됩니다.

일반적으로 기본 키팁 위치는 충분하며 적응형 UI에 대한 기본 제공됩니다.

키팁 자동 배치 예제

그러나 키팁 위치 조절이 더 필요하신 경우, 다음을 따르시길 권장합니다.

1. 명백한 연관성 원칙: 사용자가 제어 요소를 단축키 설명과 쉽게 연관 지을 수 있습니다.

   a. 키 설명은 액세스 키(소유자)가 있는 요소에 닫아야 합니다.
   b. 키팁은 액세스 키가 있는 활성화된 요소을 덮지 않도록 해야 합니다.
   다. 키 설명을 소유자 가까이에 배치할 수 없는 경우, 소유자와 겹치도록 해야 합니다. 

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 속성을 사용합니다.

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 자동화 클라이언트가 사용자 인터페이스의 요소에 대한 정보를 검색할 수 있도록 하는 Automation 속성을 노출합니다.

UIElement 또는 TextElement 컨트롤에서 AccessKey 속성을 지정하는 경우 AutomationProperties.AccessKey 속성을 사용하여 이 값을 가져올 수 있습니다. 내레이터와 같은 접근성 클라이언트는 요소가 포커스를 받을 때마다 이 속성의 값을 읽습니다.

관련 문서

• 키보드 조작
• 키보드 가속기

견본

• WinUI 갤러리