키보드 접근성 구현

키보드 접근성 구현(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

이 항목의 C#/VB/C++/XAML 버전을 찾고 계세요?키보드 접근성 구현(HTML)을 참조하세요.

시각 장애가 있거나 움직임이 자유롭지 않은 대부분의 사용자들은 앱 UI를 탐색하고 기능에 액세스하는 유일한 수단으로 키보드에 의존합니다. 따라서 앱의 키보드 접근성이 좋지 않을 경우 사용자가 앱을 사용하는 데 어려움을 겪거나 아예 사용하지 못할 수 있습니다.

이 항목에서는 JavaScript로 작성한 Windows 스토어 앱을 키보드 사용자가 사용할 수 있도록 구현하는 데 필요한 태그 및 코드에 대해 설명합니다.

앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.:  사용자 조작: 터치식 입력... 등

초기 키보드 포커스

앱이 시작되면 사용자가 맨 처음 조작할 가능성이 높은 요소에 초기 키보드 포커스를 설정합니다. 일반적으로 가장 적절한 위치는 사용자가 화살표 키를 사용하여 콘텐츠를 바로 스크롤할 수 있는 앱의 기본 콘텐츠 보기입니다. 포커스를 특정 컨트롤에 설정하는 방법에 대한 자세한 내용은 focus를 참조하세요.

UI 요소 간 키보드 탐색

기본적으로 탭 순서대로가 모든 대화형 UI 요소에 대해 0 이상인 값에 tabIndex 특성을 설정해야 합니다. 화면 읽기 프로그램 사용자는 <Tab> 키를 사용하여 대화형 UI 요소 간을 이동하므로 tabIndex 특성을 설정하는 것이 중요합니다.

다음 예제에는 최상위 트리 요소가 탭 순서대로 포함되어 있습니다. 현재 트리 항목에 대한 정보는 aria-activedescendant 특성을 사용하여 표시됩니다.


<!-- The top tree item must be added to the tab order. -->
<div id="folders" role="tree" aria-label="Folders" tabindex="0"
    aria-activedescendant="n-0" >
...
    <div id="n-0" class="selected" role="treeitem" aria-expanded="true" 
            onclick="...">
...
</div>

포커스 가능 HTML 태그(a href="…", input, select 등)는 기본적으로 탭 순서와 같습니다.

다음은 tabIndex 특성에 적용되는 규칙입니다.

  • tabIndex가 0인 UI 요소는 문서 순서를 기준으로 탭 순서에 추가됩니다.
  • tabIndex가 0보다 큰 UI 요소는 tabIndex 값을 기준으로 탭 순서에 추가됩니다.
  • tabIndex가 0보다 작은 UI 요소는 탭 순서에 추가되지 않지만 키보드 포커스를 받을 수 있습니다.
참고  텍스트 요소(예제: p 태그)에 0보다 크거나 같은 tabIndex를 지정하지 않습니다. 텍스트는 일반적으로 대화형이 아니며 포커스를 설정하면 가능한 일부 동작을 사용하도록 설정하는 의미가 없어야 합니다. 텍스트 요소는 보조 기술에 의해 검색되고 화면 프로그램에서 소리 내어 읽지만 특정 탭 순서에서 해당 요소를 찾는 것과는 다른 기술을 사용합니다.
 

UI 요소 내 키보드 탐색

복합 요소의 경우 포함된 요소 간에 적절한 내부 탐색이 보장되어야 합니다. 복합 요소의 내부 탐색을 구현할 수 있는 방법은 여러 가지입니다.

복합 요소는 현재 활성 자식 요소를 관리하여 모든 자식 요소를 포커스 가능 상태가 되게 하는 오버헤드를 줄일 수 있습니다. 그러한 복합 요소는 탭 순서대로 포함되며 키보드 탐색 이벤트를 처리합니다. 복합 요소는 aria-activedescendant 특성을 사용하여 현재 활성 자식 요소에 대한 정보를 표시합니다.


<!-- Custom tree view element. -->
<div id="folders" class="tree" role="tree" aria-label="Folders" tabindex="0"
        aria-activedescendant="n-0" >
    <div id="n-0" class="selected" role="treeitem" aria-expanded="true" 
            onclick="...">
        Libraries</div>
    <div role="group" >
        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="…">Docs</div>
        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="…">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="…">Pics</div>
    </div>
</div>

<script>
    var folders = document.getElementById('folders');
    // Ensure keyboard navigation/operation with arrow keys.
    folders.addEventListener('keydown', function(e) {
        var itm = e.srcElement;
        if (e.keyCode === Win.Utilities.Key.upArrow) {
            // Update aria-activedescendant with the previous node id.
            // Update the class attribute to mark the selected node.
        } else if (e.keyCode === Win.Utilities.Key.downArrow) {
            // Update aria-activedescendant with the next node id.
            // Update the class attribute to mark the selected node.
        }
    });
</script>

또 다른 접근 방식은 노드에 대한 tabIndex 특성을 동적으로 관리하는 것입니다. 이 방법은 "이동 인덱스"를 제공하는 것으로 알려져 있습니다.


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" >
    <div id="n-0" role="treeitem" aria-expanded="true" tabindex="0">Libraries</div>
    <div role="group" >
        <!-- Child tree items: Documents, Music, Pictures ... -->
        <div id="n-0-1" role="treeitem" aria-expanded="false" tabindex="-1">Docs</div>
        <div id="n-0-2" role="treeitem" aria-expanded="false" tabindex="-1">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" tabindex="-1">Pics</div>
    </div>
</div>

<script>
    var folders = document.getElementById('folders');
    // Ensure keyboard navigation/operation with arrow keys.
    folders.addEventListener('keydown', function(e) {
        var itm = e.srcElement;
        if (e.keyCode === Win.Utilities.Key.upArrow) {
            // Update tabindex attributes.
        } else if (e.keyCode === Win.Utilities.Key.downArrow) {
            // Update tabindex attributes.
        }
    });
</script>

앞의 두 예제에서 본 것처럼 자식 요소의 탐색을 위해 화살표 키를 바로 가기 키로 사용하는 것이 권장됩니다. 트리 뷰 노드에 확장–축소 처리와 노드 활성화에 대해 별도의 하위 요소가 있는 경우 왼쪽 및 오른쪽 화살표 키를 사용하여 키보드 확장–축소 기능을 제공해야 합니다.

키보드 활성화

클릭할 수 있는 UI 요소는 키보드를 사용해서 호출할 수도 있어야 합니다.

호출할 수 있는 UI 요소의 경우 스페이스바 및 Enter 키에 대한 키보드 이벤트 처리기를 구현합니다. 이렇게 하면 기본 키보드 접근성 지원이 완벽해지고 사용자가 키보드만 사용하여 기본 앱 시나리오를 수행할 수 있습니다. 즉, 사용자는 모든 대화형 UI 요소에 액세스하고 기본 기능을 활성화할 수 있습니다.


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" aria-activedescendant="n-0" 
        tabindex="0" >
    <div id="n-0" role="treeitem" aria-expanded="true" onclick="..." >Libraries</div>

    <div role="group" >
        <!—Child tree items: Documents, Music, Pictures ... -->
        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="...">Docs</div>   
        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="...">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="...">Pics</div>
    </div>
</div>

<script>
    // Ensure keyboard activation
    folders.addEventListener('keydown', function(e) {
        if (e.srcElement && (e.keyCode === Win.Utilities.Key.enter ||
                e.keycode === Win.Utilities.Key.space)) {
            e.srcElement.click(e);
        }
    });
</script>


바로 가기 키(선택)

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

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

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

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


<!-- Alt+F sets focus to firstName and is exposed by the -->
<!-- AccessKey UIA property.                             -->
<label for="firstName">First Name</label>
<input id="firstName" type="text" accesskey="F" /> 

<!-- Alt+S invokes the Save button and is exposed by the -->
<!-- AccessKey UIA property.                             -->
<button accesskey="S">Save</button>

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


이 프레임워크에서 포커스 설정 또는 요소 호출을 위한 바로 가기 키 기능을 지원하기는 하지만, 키보드 이벤트 처리기를 사용하여 JavaScript에서 바로 가기 키를 구현해야 합니다.


<script>
    var sendButton = document.getElementById('sendButton');
    sendButton.addEventListener('keyup', function(e) {
        var itm = e.srcElement;
        if (e.ctrlKey && e.keyCode === 83 ) {
            // Invoke send functionality.
        }
    });
</script>

또한 지역화할 때도 바로 가기 키를 고려해야 합니다. 바로 가기 키는 주로 요소의 레이블을 따라 선택하므로 바로 가기 키의 지역화는 특히 중요합니다.


<script>
    var sendButton = document.getElementById('saveButton');
    sendButton.innerHTML = res.getString('saveButton');
    sendButton.setAttribute('accesskey',res.getString('saveButtonAccessKey');
</script>

<!-- resources.resw -->
    <data name="saveButton" xml:space="preserve"><value>Save</value></data> 
    <data name="saveButtonAccessKey" xml:space="preserve"><value>S</value></data>

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

키보드 접근성 및 Windows Phone

Windows Phone 장치에는 일반적으로 전용 하드웨어 키보드가 없습니다. 그러나 SIP(Soft Input Panel)가 여러 가지 키보드 접근성 시나리오를 지원할 수 있습니다. 화면 읽기 프로그램은 텍스트 SIP에서 삭제 알림을 포함한 텍스트 입력을 읽을 수 있습니다. 화면 읽기 프로그램은 사용자가 키를 검색하고 있음을 감지하고 검색한 키 이름을 소리 내어 읽을 수 있으므로 사용자가 손가락의 위치를 검색할 수 있습니다. 또한 키보드 지향 접근성 개념 일부를 키보드를 전혀 사용하지 않는 관련 보조 기술 동작에 매핑할 수 있습니다. 예를 들어 SIP에 Tab 키가 포함되지 않은 경우에도 내레이터는 Tab 키를 누르는 것과 동일한 터치 제스처를 지원하므로 UI의 컨트롤을 통과하는 유용한 탭 순서가 있는 것도 중요한 접근성 원칙입니다. 복잡한 컨트롤 내 일부를 탐색하는 데 사용되는 화살표 키도 내레이터 터치 제스처를 통해 지원됩니다. 포커스가 텍스트 입력용이 아닌 컨트롤에 도달하면 내레이터는 해당 컨트롤의 동작을 호출하는 제스처를 지원합니다.

바로 가기 키는 일반적으로 Windows Phone 앱에 적합하지 않습니다. SIP에 Control 키나 Alt 키가 없기 때문입니다.

관련 항목

기본 접근성 요구 사항 충족

 

 

표시:
© 2017 Microsoft