앱의 접근성 테스트

앱의 접근성 테스트(HTML)

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

이 항목의 C#/VB/C++/XAML 버전을 찾고 계세요?앱의 접근성 테스트(HTML)를 참조하세요.

이 항목의 Windows Phone 버전을 찾고 계세요?앱의 접근성 테스트(Windows Phone)를 참조하세요.

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

접근성 테스트 도구 실행

Windows SDK(소프트웨어 개발 키트)에는 앱의 접근성을 검증하는 데 도움을 주는 InspectUI Accessibility Checker (AccChecker)와 같은 접근성 테스트 도구가 포함되어 있습니다. JavaScript로 작성한 Windows 런타임 앱 개발자인 경우 태그에 설정한 접근성 속성(이름, 역할, 값, 상태, Microsoft UI 자동화를 위한 AriaRole, UI 자동화용 AriaProperties)을 검증하고 UI 자동화 트리의 구조를 검증하는 데 Inspect가 유용합니다. AccChecker는 HTML 태그의 ARIA(Accessible Rich Internet Applications) 구현을 검증하는 데 도움이 됩니다.

Windows 스토어에서 접근성 있는 앱으로 등록하려면 ARIA 웹 검증을 사용하도록 설정한 상태로 AccChecker에서 보고한 우선 순위 1인 오류를 모두 해결해야 합니다. 접근성 문제를 해결한다는 것은 코드에서 해당 기능을 코드에서 수정하는 것을 의미하며, 드물게는 앱에 적용하지 않음으로써 사용하지 않도록 하는 것도 포함합니다.

접근성 테스트 도구는 Microsoft Visual Studio 명령 프롬프트나 Windows SDK 도구 폴더(<install_dir>\Program Files\Windows Kits\<version>\bin\<architecture>)에서 시작할 수 있습니다.

키보드 접근성 테스트

키보드 접근성을 테스트하는 가장 좋은 방법은 마우스를 사용하지 않거나, 태블릿 장치를 사용하는 경우 터치 키보드를 사용하는 것입니다. Tab 키를 사용하여 키보드 접근성 탐색을 테스트합니다. Tab 키로 모든 대화형 UI를 순환할 수 있어야 합니다. 복합 UI 요소의 경우 화살표 키로 하위 요소 간을 탐색할 수 있는지 확인합니다. 마지막으로, 키보드(주로 <Enter> 키 또는 스페이스바)로 모든 대화형 UI 요소를 호출할 수 있는지 확인합니다.

표시되는 텍스트의 대비 확인

W3C(World Wide Web 컨소시엄)에서 권장되는 도구 및 메서드를 사용하여 표시되는 텍스트 대비율이 4.5:1 이상인지 확인합니다. 여기서 비활성 UI 요소 및 로고, 또는 정보를 전달하지 않으며 그 의미를 변경하지 않고 다시 정렬할 수 있는 장식 텍스트는 예외입니다.

고대비에서 앱 확인

고대비 테마가 활성 상태인 동안 앱의 모든 UI 요소가 올바르게 표시되는지 확인합니다. 모든 텍스트는 읽을 수 있어야 하고 모든 이미지는 또렷해야 합니다. 필요한 경우 고대비 테마가 활성 상태일 때 사용할 여러 버전을 제공하세요.

디스플레이 설정으로 앱 확인

디스플레이의 dpi(인치당 도트 수) 값을 조정하는 시스템 디스플레이 옵션을 사용하고 dpi 값이 변경되면 앱 UI 크기가 올바르게 조정되도록 합니다. 일부 사용자는 dpi 값을 접근성 옵션으로 변경하며 이 옵션은 접근성컴퓨터를 보기 쉽게 설정에서 사용할 수 있습니다. 별다른 문제가 없으면 레이아웃 크기 조정 지침에 따라 다른 크기 조정 인수에 대한 추가 리소스를 제공합니다. 자세한 내용은 레이아웃 및 크기 조정에 대한 UX 지침 및 앱의 접근성 테스트를 참조하세요.

내레이터를 사용하여 메인 앱 시나리오 확인

내레이터를 사용하여 앱의 화면 판독 환경을 테스트합니다.

마우스와 키보드로 내레이터를 사용하여 앱을 테스트하려면 다음 단계를 따르세요.

  1. Windows 로고 키 + Enter를 눌러 내레이터를 시작합니다.
  2. 키보드의 Tab 키, 화살표 키 및 Caps Lock + 화살표 키를 사용하여 앱을 탐색합니다.
  3. 앱을 탐색할 때 내레이터가 UI의 요소를 읽는 내용을 듣고 다음을 확인합니다.
    • 각 컨트롤에 대해 내레이터가 표시되는 모든 콘텐츠를 읽는지 확인합니다. 또한 내레이터가 각 컨트롤의 이름, 해당 상태(확인됨, 선택됨 등) 및 컨트롤 형식(단추, 확인란, 목록 항목 등)을 읽는지 확인합니다.
    • 각 테이블에 대해 내레이터가 테이블 이름, 테이블 설명(있는 경우), 행 및 열 제목을 올바로 읽는지 확인합니다.
    • 각 라이브 영역에 대해 내레이터가 aria-live 특성, aria-atomic 특성 등을 통해 HTML 태그에 지정된 대로 라이브 영역의 변경 사항을 알려 주는지 확인합니다.
    • 요소가 대화형인 경우 내레이터를 사용하여 Caps Lock + 스페이스바를 누르면 해당 작업을 호출할 수 있는지 확인합니다.
  4. Caps Lock + Enter를 눌러 앱을 검색하고 모든 컨트롤이 검색 목록에 표시되고 컨트롤 이름이 지역화되어 읽을 수 있는 상태인지 확인합니다.
  5. 모니터를 끄고 키보드와 내레이터만 사용하여 메인 앱 시나리오를 수행해 봅니다. 내레이터 명령과 바로 가기의 전체 목록을 표시하려면 Caps Lock + F1을 누릅니다.

다음 단계에 따라 내레이터의 터치 모드를 사용하여 앱 테스트

참고  4개 이상의 접점을 지원하는 장치에서는 내레이터가 터치 모드를 자동으로 시작합니다. 내레이터는 주 화면에서 다중 모니터 시나리오나 멀티 터치 디지타이저를 지원하지 않습니다.
 
  1. UI에 익숙해지고 레이아웃을 탐색합니다.
    • 한 손가락으로 살짝 밀기 제스처를 사용하여 UI 탐색. 왼쪽 또는 오른쪽 살짝 밀기를 사용하여 항목 간을 이동하고 위쪽 또는 아래쪽 살짝 밀기를 사용하여 탐색하는 항목의 범주를 변경합니다. 범주에는 모든 항목, 링크, 테이블, 머리글 등이 포함됩니다. 한 손가락으로 살짝 밀기 제스처를 사용한 탐색은 Caps Lock + 화살표를 사용한 탐색과 유사합니다.
    • 탭 제스처를 사용하여 포커스 가능 요소 탐색. 오른쪽 또는 왼쪽으로 세 손가락 살짝 밀기는 키보드의 Tab 키 및 Shift + Tab을 사용한 탭 시퀀스 탐색과 같습니다.
    • 한 손가락으로 UI 공간 탐색. 한 손가락을 위쪽과 아래쪽 또는 왼쪽과 오른쪽으로 끌어 내레이터가 손가락 아래의 항목을 읽게 합니다. 마우스도 한 손가락 끌기와 동일한 적중 테스트 논리를 사용하므로 마우스를 대신 사용할 수 있습니다.
    • 세 손가락 위로 살짝 밀기로 전체 창과 모든 콘텐츠 읽기. 이 동작은 Caps Lock + W를 사용하는 것과 동일합니다.

    중요 UI에 연결할 수 없는 경우 접근성 문제가 발생할 수 있습니다.

  2. 컨트롤을 조작하여 컨트롤의 주 및 보조 작업과 스크롤 동작을 테스트합니다.

    주 작업에는 단추 활성화, 텍스트 캐럿 배치, 컨트롤에 포커스 설정 등과 같은 작업이 포함되고, 보조 작업에는 목록 항목 선택, 여러 옵션을 제공하는 단추 확장 등과 같은 작업이 포함됩니다.

    • 주 작업 테스트: 두 번 탭하거나 한 손가락으로 누른 상태에서 다른 손가락으로 탭합니다.
    • 보조 작업 테스트: 세 번 탭하거나 한 손가락으로 누른 상태에서 다른 손가락으로 두 번 탭합니다.
    • 스크롤 동작 테스트: 두 손가락 살짝 밀기를 사용하여 원하는 방향으로 스크롤합니다.

    일부 컨트롤은 추가 작업을 제공합니다. 전체 목록을 표시하려면 네 손가락으로 한 번 탭합니다.

    컨트롤이 마우스 또는 키보드에는 응답하지만 주 또는 보조 터치 조작에는 응답하지 않는 경우에는 컨트롤에서 추가 UI 자동화 컨트롤 패턴을 구현해야 합니다.

내레이터를 사용하는 방법에 대한 자세한 내용은 Windows 8의 접근성을 참조하세요.

관련 항목

JavaScript 및 HTML로 작성한 Windows 런타임 앱의 접근성

 

 

표시:
© 2017 Microsoft