키보드 조작에 응답(HTML)

키보드 입력은 앱의 전체 사용자 조작 환경에서 중요한 부분을 차지합니다. 키보드가 앱을 조작하는 보다 효율적인 방법이라고 생각하는 사용자나 특정 장애를 가진 사람들에게는 키보드가 필수 도구입니다. 예를 들어 사용자가 Tab 및 화살표 키를 사용하여 앱을 탐색하고, 스페이스바 및 Enter 키를 사용하여 UI 요소를 활성화하고, 바로 가기 키를 사용하여 명령에 액세스할 수 있어야 합니다.

잘 디자인된 키보드 UI는 소프트웨어 접근성의 중요한 측면입니다. 시각 장애나 특정 거동 장애가 있는 사용자는 키보드 UI를 사용하여 앱을 탐색하고 기능을 조작할 수 있습니다. 이러한 사용자는 마우스를 작동할 수 없으며 다양한 보조 기술(예: 키보드 향상 도구, 화상 키보드, 화면 확대기, 화면 낭독 프로그램 및 음성 입력 유틸리티)을 대신 사용할 수 있습니다.

가장 일반적인 키보드 유형은 실제로 장치에 연결된 외부 하드웨어 키보드입니다. 하드웨어 키보드 외에 Windows 8에서는 다음 두 가상 키보드를 제공합니다.

화상 키보드는 Windows에서 실제 키보드 대신 터치, 마우스, 펜/스타일러스 또는 기타 포인팅 장치로 데이터를 입력하는 데 사용할 수 있는 가상 키보드입니다(터치 스크린이 필요하지 않음). 실제 키보드가 없는 시스템이나 움직일 수 없어서 일반적인 입력 장치를 사용할 수 없는 사용자는 화상 키보드를 사용할 수 있습니다. 화상 키보드는 하드웨어 키보드의 기능을 전부는 아니라도 대부분 에뮬레이트합니다.
터치 키보드는 터치식 입력과 함께 텍스트 입력에 사용되는 시각적 가상 키보드입니다. 터치 키보드는 텍스트 입력에만 사용되고(하드웨어 키보드를 에뮬레이트하지 않음) 텍스트 필드나 다른 편집 가능한 텍스트 컨트롤에 포커스가 있을 때만 표시되므로 Windows에서 화상 키보드를 대체하지 않습니다.

참고 화상 키보드는 터치 키보드보다 우선하며, 현재 화상 키보드가 사용 중이면 터치 키보드는 나타나지 않습니다.

다음은 터치 키보드의 예입니다.

Windows - 기본 레이아웃:

![기본 레이아웃의 터치 키보드](images/Hh700405.touch_keyboard_standard(ko-kr,WIN.10).png "기본 레이아웃의 터치 키보드")

Windows - 미리 보기 레이아웃(일부 언어에서 사용하지 못할 수 있음):

![미리 보기 레이아웃의 터치 키보드](images/Hh700405.touch_keyboard_thumb(ko-kr,WIN.10).png "미리 보기 레이아웃의 터치 키보드")

Windows Phone - 기본 레이아웃:

![Windows Phone 터치 키보드](images/Hh700405.touch_keyboard_phone_standard(ko-kr,WIN.10).png "Windows Phone 터치 키보드")

키보드 이벤트

다음 키보드 이벤트는 하드웨어 및 터치 키보드 둘 다에서 발생할 수 있습니다.

이벤트	설명
keydown	키를 누를 때 발생합니다.
keyup	키를 놓을 때 발생합니다.
keypress	영숫자 키를 누를 때 발생합니다.

키보드 이벤트 및 포커스

UI의 컨트롤은 입력 포커스가 있는 경우에만 키보드 이벤트를 생성합니다. 개별 컨트롤은 사용자가 레이아웃에서 해당 컨트롤을 직접 클릭 또는 탭하거나 Tab 키를 사용하여 콘텐츠 영역 내에서 탭 시퀀스를 단계별로 이동할 때 포커스를 얻습니다.

focus 메서드를 호출하여 포커스를 강제 적용할 수도 있습니다. 이 작업은 사용자의 UI가 로드될 때 기본적으로 키보드 포커스가 설정되지 않으므로 바로 가기 키를 구현하는 경우에 필요합니다. 자세한 내용은 이 항목의 뒷부분에 있는 바로 가기 키 예제를 참조하세요.

컨트롤에 입력 포커스를 적용하려면 컨트롤을 사용하도록 설정하고 표시해야 합니다. 대부분의 컨트롤은 이것이 기본 상태입니다. 컨트롤에 입력 포커스가 있으면 이 항목의 뒷부분에 설명된 대로 키보드 입력 이벤트를 발생시키고 응답할 수 있습니다. focus, focusin, blur 및 focusout 이벤트를 처리하여 포커스를 받거나 잃는 컨트롤에 응답할 수도 있습니다.

기본적으로 컨트롤의 탭 시퀀스는 HTML에 표시되는 순서입니다. 그러나 이 순서는 tabIndex 속성을 사용하여 수정할 수 있습니다. 자세한 내용은 키보드 접근성 구현(HTML)을 참조하세요.

키보드 이벤트 처리기

HTML에서 선언적으로 추가하는 대신 프로그래밍 방식으로 이벤트 처리기를 추가하는 것이 좋습니다(태그에서 이벤트 처리기를 설정하지 않아야 하는 이유 참조).

키보드 조작과 직접 연결된 세 가지 입력 이벤트 keydown, keyup 및 keypress가 있습니다.

대부분의 이벤트 처리기는 이벤트에 대한 정보가 포함된 Event object를 단일 인수로 사용합니다. 유용한 키보드 이벤트 속성에는 target, keyCode 및 이벤트 버블링이 허용되는 경우 currentTarget이 포함됩니다.

키

일반적으로 특정 키 값을 처리하기 위해 키보드 이벤트를 수신 대기합니다. 어떤 키를 누르거나 놓았는지 알아보려면 이벤트 데이터에서 keyCode 값을 확인하세요. keyCode는 Key 값을 반환합니다. Key 열거형에는 지원되는 모든 키가 포함됩니다.

바로 가기 키

앱의 키보드 탐색 및 활성화 구현뿐 아니라 앱 기능에 대한 바로 가기를 구현하는 것이 좋습니다. 바로 가기는 사용자가 앱 기능에 효율적으로 액세스할 수 있도록 하여 생산성을 향상시키는 키보드 조합(일반적으로 문자 키와 보조 키가 결합됨)입니다.

선택키는 앱의 UI에 대한 바로 가기입니다. 선택키는 Alt 키와 문자 키로 구성됩니다.

바로 가기 키는 앱 명령에 대한 바로 가기입니다. 명령과 정확히 일치하는 UI가 앱에 없을 수도 있습니다. 바로 가기 키는 Ctrl 및/또는 Shift 키와 문자 키로 구성됩니다.

x-ms-acceleratorKey 특성을 사용하면 바로 가기 키가 있음을 화면 읽기 프로그램과 기타 보조 기술에 알릴 수 있습니다. 이 특성은 바로 가기 키 동작을 제공하지 않습니다. 앱에서 바로 가기 키를 처리하려면 keydown, keyup, keypress 등의 키보드 이벤트 처리기를 제공해야 합니다.

키보드 이벤트 수신 대기 및 처리

여기서는 keydown 이벤트의 처리기를 지정하고 정의하는 방법을 보여 줍니다.

참고 이러한 예제는 사용자 조작 사용자 지정 전체 프로세스(HTML) 항목을 지원하는 사용자 지정 사용자 조작 샘플에서 가져온 것입니다.

이 이벤트 처리기는 모든 키 입력을 필터링하고 왼쪽 화살표 및 오른쪽 화살표 키만 처리합니다.

// Key down handler. 
// Take input from only the left and right arrow keys.
// Left: counter-clockwise rotation.
// Right: clockwise rotation.
this._element.addEventListener("keydown", function onKeyDownE(eventInfo) {
    // Process keystroke only if color selected.
    if (!that.selectedColor) {
        return;
    }
    if (eventInfo.target === msGesture_ColorMixer.target) {
        if (that._focus === false) {
            return;
        }
        // Set increment or decrement value based on key pressed.
        var increment;
        if (eventInfo.keyCode === WinJS.Utilities.Key.leftArrow) {
            increment = -1;
        }
        else if (eventInfo.keyCode === WinJS.Utilities.Key.rightArrow) {
            increment = 1;
        }
        else return;

        // Attach first contact and track input device type.
        if (!that._pointerType) {
            that._pointerType = "keyboard";
        }
        // Rotate the color mixer.
        _Rotate(increment);
        // Event tracking.
        //document.getElementById("status").innerHTML += "keydown :: " + eventInfo.keyCode;
    }
}, false);

accesskey 및 x-ms-acceleratorkey 특성을 사용하여 HTML 태그에서 바로 가기 키를 선언합니다.

<div class="ColorSelector" id="colorSelector">
    <!-- 
        The aria-label attribute can be used when:
            - the name of an element cannot be determined 
              programmatically from the content of the element.
            - providing a visible label and/or tooltip is not 
              the desired user experience.
        However, if the label text is visible on screen, you should 
        use aria-labelledby instead of aria-label. 
    -->
    <div class="Color" 
         id="red" 
         aria-labelledby="redLabel redValue" 
         tabindex="0" 
         accesskey="R">
        <span class="ColorLabel" 
              id="redLabel" 
              data-win-res="{textContent: 'colorpicker_red'}" />
        <span class="ColorValue" id="redValue" />
    </div>
    <div class="Color" 
         id="green" 
         aria-labelledby="greenLabel greenValue" 
         tabindex="0" 
         accesskey="G">
        <span class="ColorLabel" 
              id="greenLabel" 
              data-win-res="{textContent: 'colorpicker_green'}" />
        <span class="ColorValue" id="greenValue" />
    </div>
    <div class="Color" 
         id="blue" 
         aria-labelledby="blueLabel blueValue" 
         tabindex="0" 
         accesskey="B">
        <span class="ColorLabel" 
              id="blueLabel" 
              data-win-res="{textContent: 'colorpicker_blue'}" />
        <span class="ColorValue" id="blueValue" />
    </div>

<!-- 
Ctrl+S invokes the Save button and is exposed by a tooltip. 
-->
<button 
  id="sendButton" 
  value="Send" 
  title="Send (Ctrl+S)" 
  x-ms-acceleratorkey="S">Send</button>

프레임워크에서 포커스를 설정하거나 요소를 호출하기 위한 키보드 기능을 지원하지만, 앱에서 바로 가기 키를 처리하려면 keydown, keyup, keypress 등의 키보드 이벤트 처리기를 구현해야 합니다.

var sendButton = document.getElementById('sendButton');
sendButton.addEventListener('keyup', function(e) {
  var itm = e.srcElement;
  if (e.ctrlKey && e.keyCode === WinJS.Utilities.Key.s ) {
    // Invoke send functionality.
  }
});

이벤트 한정자

preventDefault는 DOM(문서 개체 모델)을 통해 전파를 중지하지 않고 기본 이벤트 동작을 취소합니다. 취소할 수 없는 이벤트에 대해서는 preventDefault를 호출해도 아무 효과가 없으므로 cancelable을 사용하여 이벤트를 취소할 수 있는지 확인합니다.

stopPropagation은 이벤트 캡처 또는 버블링 단계에서 이벤트 전파를 취소합니다. 그러나 이벤트 흐름이 중지되기 전에 캡처 또는 버블링에 관계없이 현재 대상의 모든 이벤트 수신기에 이벤트가 디스패치됩니다. 나머지 처리기가 완전히 실행되지 않도록 하려면 stopImmediatePropagation 메서드를 대신 사용합니다.

터치 키보드

텍스트 입력 컨트롤은 터치 키보드를 자동으로 지원합니다. 사용자가 터치식 입력을 사용하여 텍스트 컨트롤에 입력 포커스를 설정하면 터치 키보드가 자동으로 나타납니다. 텍스트 컨트롤에 입력 포커스가 없으면 터치 키보드가 숨겨집니다.

터치 키보드가 나타나면 포커스가 있는 요소가 표시되도록 UI 위치가 자동으로 조정됩니다. 이로 인해 UI의 다른 중요한 영역이 화면 바깥쪽으로 이동할 수 있습니다. 그러나 기본 동작을 사용하지 않도록 설정하고 터치 키보드가 나타날 때 직접 UI를 조정할 수 있습니다. 자세한 내용은 화상 키보드의 모양에 응답 샘플을 참조하세요.

텍스트 입력이 필요하지만 표준 텍스트 입력 컨트롤에서 파생되지 않는 사용자 지정 컨트롤을 만드는 경우 올바른 UI 자동화 제어 패턴을 구현하여 터치 키보드 지원을 추가할 수 있습니다. 자세한 내용은 터치 키보드 샘플을 참조하세요.

터치 키보드의 키를 누르면 하드웨어 키보드의 키를 누른 것처럼 keydown 및 onkeyup 이벤트가 발생합니다. 그러나 터치 키보드는 입력 컨트롤에서 텍스트 조작에 예약된 Ctrl+A, Ctrl+Z, Ctrl+X, Ctrl+C 및 Ctrl+V에 대해 입력 이벤트를 발생시키지 않습니다.

키보드 상호 작용 지원을 위한 사용자 환경 지침

키보드 조작 지원을 위한 몇 가지 지침은 다음과 같습니다.

일반

사용자가 하드웨어 키보드 또는 화상 키보드만 사용하여 앱이 지원하는 모든 작업을 수행할 수 있어야 합니다.참고 터치 키보드는 앱이나 시스템 명령이 아닌 텍스트 입력에만 사용됩니다.
앱이 시작되면 사용자가 처음에 직관적으로 상호 작용하거나 가장 먼저 상호 작용하게 되는 요소에 초기 키보드 포커스를 설정합니다. 일반적으로 가장 적절한 위치는 사용자가 화살표 키를 사용하여 콘텐츠를 바로 스크롤할 수 있는 앱의 기본 콘텐츠 보기입니다. 포커스를 특정 컨트롤에 설정하는 방법에 대한 자세한 내용은 focus를 참조하세요.
Tab과 화살표 키가 왼쪽에서 오른쪽으로 콘텐츠를 이동하는지 확인합니다.
기본적으로 탭 순서대로가 아닌 모든 대화형 UI 요소에 대해 0 이상인 값에 tabIndex 특성을 설정합니다. 화면 읽기 프로그램 사용자는 <Tab> 키를 사용하여 대화형 UI 요소 간을 이동하므로 tabIndex 특성을 설정하는 것이 중요합니다.
복합 요소의 하위 요소 간의 적절한 내부 탐색을 위해 화살표 키를 바로 가기 키로 사용합니다. 트리 뷰 노드에 확장/축소 처리와 노드 활성화에 대한 별도의 하위 요소가 있는 경우 왼쪽 및 오른쪽 화살표 키를 사용하여 키보드 확장/축소 기능을 제공합니다.
클릭할 수 있는 각 UI 요소를 키보드로도 호출할 수 있는지 확인합니다.
주요 앱 기능에 대한 바로 가기 키를 구현합니다. 바로 가기는 사용자가 앱 기능에 액세스하는 효율적인 방법을 제공하여 생산성을 향상시키는 키 조합입니다.

선택키는 앱의 UI 요소에 대한 바로 가기입니다. Alt 키와 문자 키로 구성됩니다.

바로 가기 키는 앱 명령에 대한 바로 가기입니다. 앱은 명령에 정확히 일치하는 UI를 포함할 수 있습니다. 바로 가기 키는 Ctrl 키와 문자 키로 구성됩니다.

따라서 화면 읽기 프로그램 및 다른 보조 기술을 사용하는 사용자에게 앱의 바로 가기 키를 찾을 수 있는 손쉬운 방법을 제공할 필요가 있습니다. accessKey 및 -ms-AcceleratorKey 특성을 사용하여 앱의 HTML 태그에 바로 가기를 선언하고 도구 설명, 접근성 있는 이름, 접근성 있는 설명 또는 기타 화상 통신 형식을 사용하여 바로 가기와 통신합니다. 바로 가기 키에 대한 설명이 앱의 도움말 콘텐츠에 잘 나타나 있어야 합니다.

바로 가기 키 구현에 대한 자세한 내용은 Windows 사용자 환경 지침에서 바로 가기 키를 참조하세요.

사용자가 모든 Windows 스토어 앱 내에서 예상하는 기본 바로 가기 키를 다시 정의하지 마세요. 전체 목록은 바로 가기 키를 참조하세요.

하드웨어

키보드 장치 기능(KeyboardCapabilities)을 쿼리하여 키보드가 연결되어 있는지 확인하고 키보드 하드웨어에서 직접 액세스할 수 있는 앱 UI 측면을 식별합니다. 장치 기능 쿼리에 대한 자세한 내용은 빠른 시작: 포인터 장치 식별을 참조하세요.

키보드 단추를 앱의 적절한 UI(뒤로 및 앞으로 단추)에 연결합니다.

시각적 피드백

키보드 조작 시에만 포커스 사각형을 사용합니다. 사용자가 터치 조작을 시작하는 경우 키보드 UI가 점점 사라지도록 합니다. 이렇게 하면 UI가 깔끔하고 간결하게 유지됩니다.
요소가 조작을 지원하지 않는 경우(예: 정적 테스트) 시각적 피드백을 표시하지 마세요.
동일한 입력 대상을 나타내는 모든 요소에 대해 동시에 시각적 피드백을 표시합니다.
이동, 회전, 확대/축소 등의 터치 기반 조작을 에뮬레이트하기 위한 힌트로 화상 단추(예: + 및 -)를 제공합니다.

시각적 피드백에 대한 일반적인 내용은 시각적 피드백에 대한 지침을 참조하세요.