포괄 Windows 앱 개발

이 문서에서는 액세스할 수 있는 Windows 앱을 개발하는 방법을 설명합니다. 특히 앱에 대한 논리 계층 구조 디자인 방법에 대해 이해하고 있다고 가정합니다. 키보드 탐색, 색 및 대비 설정, 그리고 보조 기술에 대한 지원 기능을 포함하는 액세스 가능한 Windows 앱 개발 방법을 알아봅니다.

아직 이해하지 못했으면 포괄 소프트웨어 디자인을 먼저 읽고 시작하세요.

앱에 접근성이 있도록 하려면 다음 세 가지를 수행해야 합니다.

  1. 프로그래밍 방식 액세스에 UI 요소를 표시합니다.
  2. 앱이 마우스 또는 터치 스크린을 사용할 수 없는 사용자를 위해 키보드 탐색을 지원하는지 확인합니다.
  3. 앱이 접근성 있는 색 및 대비 설정을 지원하는지 확인합니다.

프로그래밍 방식 액세스

프로그래밍 방식 액세스는 앱의 접근성을 만드는 데 중요합니다. 이렇게 하려면 앱에 있는 콘텐츠 및 대화형 UI 요소의 접근성 있는 이름(필수) 및 설명(선택)을 설정합니다. 이렇게 하면 UI 컨트롤이 화면 읽기 프로그램(예: 내레이터) 또는 대체 출력 디바이스(예: 점자 표시)와 같은 AT(보조 기술)에 표시됩니다. 프로그래밍 방식으로 액세스하지 않고는 보조 기술에 대한 API가 정보를 정확하게 해석할 수 없어 제품을 충분히 사용할 수 없습니다. 또는 AT가 문서화되지 않은 프로그래밍 인터페이스나 접근성 인터페이스로 사용하지 않는 기술을 강제로 사용하도록 합니다. UI 컨트롤이 보조 기술에 표시되면 AT가 사용자에게 어떤 작업 및 옵션이 사용 가능한지 확인할 수 있습니다.

앱 UI 요소를 AT(보조 기술)에 사용할 수 있도록 하는 방법에 대한 자세한 내용은 기본적인 접근성 정보 표시를 참조하세요.

키보드 탐색

시각 장애가 있거나 움직임이 자유롭지 않은 사용자의 경우 키보드를 이용하여 UI를 탐색하는 것이 매우 중요합니다. 그러나 작동에 사용자 조작이 필요한 UI 컨트롤만 키보드 포커스로 지정되어야 합니다. 정적 이미지와 같이 작업이 필요하지 않은 구성 요소는 키보드 포커스가 필요하지 않습니다.

마우스 또는 터치를 사용하여 탐색하는 것과는 다르게 키보드 탐색은 선형이라는 점에 주의해야 합니다. 키보드 탐색을 고려할 때는 사용자의 제품 조작 방법 및 적용되는 논리적 탐색에 대해 생각합니다. 서양 문화권 사용자는 왼쪽에서 오른쪽, 위에서 아래로 읽습니다. 따라서 키보드 탐색에 이 패턴을 따르도록 하는 것이 일반적입니다.

키보드 탐색을 디자인할 때 UI를 검사하고 다음 질문에 대해 생각해봅니다.

  • UI에서 컨트롤이 어떻게 배치되거나 그룹화되나요?
  • 중요한 컨트롤 그룹이 있나요?
    • 그렇다면 해당 그룹에 다른 차원의 그룹이 포함되어 있나요?
  • 피어 컨트롤 간을 탐색하는 데 탭 이동, 특수 탐색(예: 화살표 키), 아니면 둘 다 사용해야 하나요?

목표는 사용자가 UI의 레이아웃 방식을 이해하고 실행 가능한 컨트롤을 식별할 수 있도록 도움을 주는 것입니다. 사용자가 탐색 루프를 완료하기 전에 탭 중단이 너무 자주 발생한다면 관련 컨트롤을 함께 그룹화하는 것이 좋습니다. 하이브리드 컨트롤과 같은 관련된 일부 컨트롤은 초기 탐색 단계에서 다뤄져야 할 수 있습니다. 제품 개발을 시작한 후에는 키보드 탐색 재작업이 어려우므로 신중하게 일찍 계획해야 합니다.

UI 요소 간 키보드 탐색에 대한 자세한 내용은 키보드 접근성을 참조하세요.

또한 Engineering Software for Accessibility(접근성을 위해 소프트웨어 엔지니어링) 전자책의 Designing the Logical Hierarchy(논리 계층 디자인) 장에 이 주제에 대해 자세히 설명되어 있습니다.

색과 대비

Windows에서 기본 제공되는 접근성 기능 중 하나는 컴퓨터 화면에서 텍스트와 이미지의 색상 대비를 강조하는 고대비 모드입니다. 사용자에 따라 색 대비를 높이면 눈의 피로감이 줄고 더 편하게 읽을 수 있습니다. 고대비로 UI를 확인할 때 컨트롤이 일관되고 시스템 색(하드 코드된 색이 아님)으로 코딩되었는지 확인하여 고대비를 사용하지 않는 사용자가 보는 화면에서 모든 컨트롤을 볼 수 있도록 합니다.

XAML

<Button Background="{ThemeResource ButtonBackgroundThemeBrush}">OK</Button>

시스템 색 및 리소스 사용에 대한 자세한 내용은 XAML 테마 리소스를 참조하세요.

시스템 색을 재정의하지 않는 한 UWP 앱은 기본적으로 고대비 테마를 지원합니다. 사용자가 시스템에서 시스템 설정 또는 접근성 도구의 고대비 테마를 사용하도록 선택한 경우 이 프레임워크에서는 UI의 컨트롤 및 구성 요소에 대해 고대비 레이아웃 및 렌더링을 생성하는 색상 및 스타일 설정을 자동으로 사용합니다.

자세한 내용은 고대비 테마를 참조하세요.

시스템 색 대신 사용자 고유의 색 테마를 사용하고자 하는 경우 다음 지침을 고려합니다.

색상 대비 비율 – 다른 입법뿐만 아니라 미국 장애인 복지법의 업데이트된 섹션 508에서 요구하는 텍스트와 배경 간 기본 색상 대비는 5:1입니다. 큰 텍스트(18포인트 글꼴 크기 또는 14포인트 및 굵은 글씨)의 경우 필요한 기본 대비는 3:1입니다.

색 조합 – 약 7%의 남성(및 1% 미만의 여성)에게 일종의 색각 장애가 있습니다. 색맹 사용자는 특정 색을 구분하는 데 어려움이 있으므로 애플리케이션에서의 상태 또는 의미를 전달할 때 색상만을 사용하지 않는 것이 중요합니다. 장식 이미지(예: 아이콘 또는 배경)에 대해서는 색맹 사용자가 이미지를 최대한 인식할 수 있도록 색 조합을 선택해야 합니다.

접근성 검사 목록

다음은 접근성 검사 목록의 간략화된 버전입니다.

  1. 앱에 있는 콘텐츠 및 대화형 UI 요소의 접근성 있는 이름(필수) 및 설명(선택)을 설정합니다.
  2. 키보드 접근성을 구현합니다.
  3. UI를 시각적으로 확인하여 텍스트 대비가 적절하고, 요소가 고대비 테마에서 정확하게 렌더링되고, 색이 바르게 사용되었는지 확인합니다.
  4. 접근성 도구를 실행하고, 보고된 문제를 해결하며, 화면 읽기 환경을 확인합니다. (접근성 테스트 항목을 참조하세요.)
  5. 앱 매니페스트 설정이 접근성 지침을 따르는지 확인합니다.
  6. Microsoft Store에 액세스 가능한 앱을 선언합니다. (스토어의 접근성 항목을 참조하세요.)

자세한 내용은 접근성 검사 목록 항목 전체를 참조하세요.