JavaScript 및 HTML로 작성한 Windows 스토어 앱의 접근성

이 항목에서는 JavaScript를 사용하는 Windows 스토어 앱을 개발할 때 Windows 런타임에 포함된 접근성 지원 및 이러한 지원을 활용하여 JavaScript로 접근성 있는 Windows 스토어 앱을 만드는 방법에 대해 설명합니다.

이 항목의 C#/VB/C++ 버전을 찾고 계세요?C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱의 접근성을 참조하세요.

이 섹션의 각 항목은 HTML, CSS 스타일시트 및 JavaScript를 능숙하게 다루는 개발자를 대상으로 작성되었습니다.

접근성 지원은 Windows 런타임에서 기본적으로 제공되며, 특히 JavaScript를 사용하는 Windows 스토어 앱의 개발 프로세스 및 런타임 환경에서 기본적으로 제공됩니다. JavaScript 호스트를 사용하는 Windows 스토어 앱이 앱 UI를 렌더링하므로 앱 마크업 및 지원 코드에 정의된 접근성 정보는 Microsoft UI 자동화—Microsoft 접근성 API—를 통해 표시되고 화면 읽기 프로그램 같은 보조 기술 도구에서 사용할 수 있게 됩니다. 여기에는 Windows 자체의 일부로 사용할 수 있는 보조 기술 도구가 포함됩니다.

JavaScript를 사용하는 Windows 스토어 앱에 대한 접근성 정보 표시

JavaScript로 작성된 Windows 스토어 앱에 접근성을 구현하는 과정은 간단합니다. 마크업 언어는 HTML이며, 특히 Windows 스토어 앱에서 HTML이 사용되는 방식에 관계없이 HTML 콘텐츠를 접근성이 있도록 하는 데 기여한 많은 표준, 방법 및 기술이 있습니다. JavaScript로 작성된 Windows 스토어 앱에 대한 접근성 지원은 이를 토대를 기반으로 하여 고유한 접근성 기능 및 방법을 추가합니다. 모든 HTML 태그 및 JavaScript 컨트롤을 사용하는 Microsoft Windows 스토어 앱은 이미 접근성이 있으므로 JavaScript를 사용하는 Windows 스토어 앱에 접근성을 구현하려면 일반적으로 몇 가지 HTML 특성만 설정하면 됩니다.

이 설명서에서는 개발자가 주요 접근성 시나리오를 지원하도록 구현하는 데 필요한 태그와 코드에 대해 알아봅니다.

  • 화면 판독—시각에 장애가 있는 사용자는 앱 UI를 해석하고 조작하기 위해 화면 읽기 프로그램을 활용합니다. 해석에는 UI 요소 이름, 역할, 값 등을 읽는 것이 포함되고 UI 조작에는 요소 간에 포커스를 이동하고 앱 기능을 호출하는 것이 포함됩니다.
  • 키보드 접근성—대부분의 접근성 사용자는 다음과 같이 키보드를 사용하여 UI를 탐색하고 작동합니다.
    • Tab 키를 사용하여 요소 간에 포커스 이동
    • 화살표 키를 사용하여 목록, 그리드 및 트리 보기와 같은 컨테이너 요소 탐색
    • Enter 또는 Space 키를 사용하여 기능 활성화(동작 활성화)
    • 바로 가기 키를 사용하여 다른 앱 기능에 효율적으로 액세스
  • 접근성 있는 시각적 환경—시각에 장애가 있는 사용자는 텍스트 콘텐츠에 대한 충분한 텍스트 명함비와 전체적으로 고대비 테마를 사용하는 적절한 시각적 환경이 필요합니다. 색맹 사용자는 색을 통해서가 아니라 다른 방법으로 정보를 전달받아야 합니다.

Windows 스토어에 앱을 제출할 때 접근성 있는 앱으로 등록할 수 있습니다. 접근성 있는 앱으로 등록할 경우 시각 장애인 같이 접근성 있는 앱에 관심이 있는 사용자가 앱을 더 쉽게 찾을 수 있습니다. 이 섹션의 각 항목은 접근성 지침에 따라 앱을 접근성 있는 앱으로 선언할 수 있도록 도와줍니다.

이 섹션의 내용

추가 리소스

  • ARIA 샘플(영문) — 이 샘플 앱에서는 ARIA(Accessible Rich Internet Applications) 태그를 사용하여 접근성이 뛰어난 Windows 스토어 앱을 만드는 방법을 보여 줍니다.
  • WAI-ARIA 참조(영문) — 공식 W3C(World Wide Web 컨소시엄) WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 사양 페이지로, ARIA(Accessible Rich Internet Applications) 모든 역할, 상태 및 속성의 참조 정보에 대한 링크가 나와 있습니다.
  • WAI-ARIA 제작 사례(영문) — 이 페이지에서는 키보드 조작에 대해 설명하고 위젯 및 구조 집합의 관련 WAI-ARIA 역할, 상태 및 속성에 대해 알아봅니다.
  • HTML5 사양(영문) — 공식 W3C HTML5 사양 페이지로, 이제 HTML5 표준의 일부인 WAI-ARIA가 포함되어 있습니다.
  • OpenAjax 접근성 예제(영문) — 이 사이트는 WAI-ARIA 및 HTML5의 규칙을 확인하는 데 유용한 리소스입니다. 여기에는 다양한 WAI-ARIA 구현 예제도 포함되어 있습니다.

관련 항목

C#/VB/C++ 및 XAML로 작성된 Windows 스토어 앱의 접근성
Windows 스토어 앱의 접근성

 

 

표시:
© 2014 Microsoft. All rights reserved.