접근성을 위한 디자인(Windows 스토어 앱)
앱을 디자인할 때는 항상 사용자가 갖는 능력, 장애, 선호도를 고려해야 합니다. 처음부터 액세스 가능한 디자인 원칙을 따르면 장애가 있는 대상 사용자도 앱에 액세스할 수 있으며 Windows 스토어에서 더 많은 고객을 앱으로 이끄는 데 도움이 됩니다.
접근성 시나리오
접근성을 고려해서 앱을 디자인하면 다음과 같은 접근성 시나리오에서도 적합한 앱을 만들 수 있습니다.
- 화면 판독: 시각에 장애가 있는 사용자는 앱 UI의 멘탈 모델을 만들고 유지 관리하기 위해 화면 낭독 프로그램을 활용합니다. UI 요소의 이름을 비롯한 UI에 대한 청각 정보는 사용자가 UI 콘텐츠를 이해하고 사용 가능한 기능을 호출하는 데 도움을 줍니다.
화면 판독을 지원하려면 앱은 이름, 역할, 설명, 상태, 위치 등을 비롯하여 해당 UI 요소에 대한 충분하고 정확한 정보를 제공해야 합니다. UI 요소에 대한 정보 제공에 대해 자세히 알아보세요.
-
키보드 접근성: 키보드는 화면 판독기와 함께 사용되며 앱을 조작하기 위한 좀 더 효율적인 방법으로 키보드를 선호하는 사용자에게 매우 중요합니다. 액세스 가능한 앱을 통해 사용자는 키보드만으로 모든 대화형 UI에 액세스할 수 있으며 다음을 수행할 수 있습니다.
- 탭 및 화살표 키를 사용하여 앱 탐색
- 스페이스바 및 Enter 키를 사용하여 UI 요소 활성화
- 바로 가기 키를 사용하여 명령 및 컨트롤에 액세스
실제 키보드가 없는 시스템에서나 움직일 수 없어서 일반적인 입력 장치를 사용할 수 없는 사용자는 화상 키보드를 사용할 수 있습니다.
키보드 접근성 구현에 대해 자세히 알아보세요.
-
액세스 가능한 시각적 효과: 시각에 장애가 있는 사용자를 위해서는 텍스트가 고대비 비율로 표시되어야 합니다. 또한 고대비 모드에서 잘 보이고 접근성 제어판에서 화면의 모든 항목을 더 크게 설정을 선택한 후에도 적절히 크기가 조정되는 UI가 필요합니다. 색을 구분해서 정보를 전달할 경우 색맹 사용자에게는 텍스트, 모양, 아이콘과 같이 색 차이를 대신하는 장치가 필요합니다. 고대비 지원 및 액세스 가능한 텍스트에 대한 요구 사항 충족에 대해 자세히 알아보세요.
개발 플랫폼의 접근성 지원
Windows 8 개발 플랫폼은 개발 주기의 모든 단계에서 접근성을 지원합니다.
- 만들기: Windows 8용 Microsoft Visual Studio Express 2012 앱 템플릿에서 생성된 코드에는 접근성 정보가 포함되어 있습니다.
- 코딩:
개발 플랫폼은 코딩 단계 중에 다음의 접근성 지원을 제공합니다.
- Windows 8용 Visual Studio Express 2012의 Microsoft IntelliSense에는 접근성 정보가 포함되어 있습니다.
- Windows 8 플랫폼에 포함된 컨트롤은 접근성을 기본적으로 지원합니다.
- Windows 개발자 센터 설명서에는 접근성 지침 및 샘플 앱이 포함되어 있습니다.
- 테스트: Windows 8용 Windows SDK(소프트웨어 개발 키트)에는 접근성 테스트 도구가 포함되어 있습니다. 앱의 접근성 테스트에 대해 자세히 알아보세요.
- 판매: 사용자가 스토어를 탐색하는 동안 접근성 필터를 사용하여 앱을 검색할 수 있도록 Windows 스토어에 앱을 게시할 때 앱에 접근성 기능이 포함되었음을 표시할 수 있습니다. Windows 스토어에 액세스할 수 있는 앱으로 선언에 대해 자세히 알아보세요.
플랫폼 컨트롤 사용
Windows 8 플랫폼에 포함되어 있는 표준 HTML 태그, JavaScript 컨트롤 및 XAML 컨트롤은 기본적으로 접근성을 지원합니다. 플랫폼 HTML 및 컨트롤을 사용하면 대부분의 접근성 지원을 "무료로" 제공받을 수 있습니다. 예를 들어 등급 컨트롤은 추가 작업 없이도 완전히 액세스 가능하지만 ListView 컨트롤에는 기본 목록 요소에 대한 액세스 가능한 이름만 있으면 됩니다. —다른 모든 접근성은 기본적으로 제공됩니다. 플랫폼 컨트롤 목록은 컨트롤 목록을 참조하세요.
기본적인 접근성 정보 제공
대부분의 접근성 지원을 "무료로" 제공받을 수 있지만 대부분의 컨트롤과 이미지, 차트 및 그리기 영역과 같은 그래픽 콘텐츠에 대해서는 액세스 가능한 이름을 설정해야 합니다. 액세스 가능한 이름은 화면 낭독 프로그램이 사용자가 컨트롤 및 콘텐츠를 이해하도록 도와주기 위해 읽어줍니다. 정적 텍스트, 단추 및 링크와 같은 암시적 텍스트가 있는 요소의 경우 시스템에서 자동으로 해당 암시적 텍스트를 액세스 가능한 이름으로 사용합니다. 액세스 가능한 이름에 대해 자세히 알아보세요.
HTML과 함께 JavaScript를 사용하는 Windows 스토어 앱의 라이브 영역처럼 동적 콘텐츠를 포함하는 UI 요소에 대해서는 추가 접근성 정보를 제공해야 합니다. 추가 접근성 정보가 제공되면 화면 낭독 프로그램에서 콘텐츠에 발생한 변경 내용을 읽어줍니다. 라이브 영역에 대한 접근성 정보를 제공하려면 동적 콘텐츠를 포함하는 요소에 대해 aria-live 특성을 설정합니다. 라이브 영역을 액세스 가능하게 만들기에 대해 자세히 알아보세요.
앱을 시각적으로 액세스 가능하게 하려면 대비 및 색맹 요구를 충족하는 고대비 이미지와 수동으로 설정한 색을 제공합니다. 고대비 지원에 대해 자세히 알아보세요.
사용자 지정 컨트롤을 액세스 가능하게 만들기
사용자 지정 컨트롤을 사용하는 경우 해당 컨트롤에 대해 액세스 가능 이름, 역할, 상태, 값 등을 비롯한 기본적인 모든 접근성 정보를 제공해야 합니다. 또한 이 컨트롤을 키보드를 통해 완전히 액세스할 수 있고 UI가 시각적 접근성 요구를 충족하도록 해야 합니다.
예를 들어 사용자 지정 대화형 요소를 나타내는 div 요소(onclick 이벤트 처리)를 포함할 경우 다음과 같이 해야 합니다.
- div 요소에 대해 접근 가능한 이름을 설정합니다.
- 해당되는 대화형 ARIA(Accessible Rich Internet Applications) 역할(예: "button")에 대해 role 특성을 설정합니다.
- 탭 순서에 이 요소를 포함하려면 tabindex 특성을 설정합니다.
- 키보드 활성화를 지원하려면 키보드 이벤트 처리기를 추가합니다(즉, onclick 이벤트 처리기에 해당하는 키보드 동작).
접근성을 위한 사용자 지정 UI 요소 표시에 대한 자세한 내용은 ARIA(Accessible Rich Internet Applications)를 참조하세요.
캔버스 사용 금지
HTML5 canvas 요소는 접근성을 지원하지 않습니다. 콘텐츠에 대해 접근성 정보를 노출할 수 있는 방법을 제공하지 않으므로 반드시 필요한 경우가 아니면 canvas는 사용하지 않도록 합니다. canvas를 사용하는 경우 사용자 지정 UI 요소로 간주하세요.
관련 항목
