접근성 개요Accessibility overview

이 문서는 Windows 앱에 대 한 내게 필요한 옵션 시나리오와 관련 된 개념과 기술에 대 한 개요입니다.This article is an overview of the concepts and technologies related to accessibility scenarios for Windows apps.

내게 필요한 옵션 및 앱Accessibility and your app

이동성, 시각, 색 인식, 청각, 음성, cognition 및 literacy에 대 한 제한 사항을 포함 하 여 다양 한 장애가 나 장애가 발생할 수 있습니다.There are many possible disabilities or impairments, including limitations in mobility, vision, color perception, hearing, speech, cognition, and literacy. 그러나 여기에 제공 된 지침에 따라 대부분의 요구 사항을 해결할 수 있습니다.However, you can address most requirements by following the guidelines offered here. 즉, 다음을 제공 합니다.This means providing:

  • 키보드 상호 작용 및 화면 판독기 지원.Support for keyboard interactions and screen readers.
  • 글꼴, 확대/축소 설정 (확대), 색 및 고대비 설정과 같은 사용자 지정을 지원 합니다.Support for user customization, such as font, zoom setting (magnification), color, and high-contrast settings.
  • UI의 부분에 대 한 대안 또는 보완.Alternatives or supplements for parts of your UI.

XAML 용 컨트롤은 이미 UWP 앱, HTML 및 기타 UI 기술을 지원 하는 내게 필요한 옵션 프레임 워크를 활용 하는 화면 판독기와 같은 보조 기술에 대 한 지원을 제공 합니다.Controls for XAML provide built-in keyboard support and support for assistive technologies such as screen readers, which take advantage of accessibility frameworks that already support UWP apps, HTML, and other UI technologies. 이 기본 제공 지원을 사용 하면 몇 가지 속성만 설정 하 여 매우 적은 작업으로 사용자 지정할 수 있는 기본 수준의 액세스 가능성을 사용할 수 있습니다.This built-in support enables a basic level of accessibility that you can customize with very little work, by setting just a handful of properties. 사용자 지정 XAML 구성 요소 및 컨트롤을 만드는 경우 자동화 피어의개념을 사용 하 여 해당 컨트롤에 비슷한 지원을 추가할 수도 있습니다.If you are creating your own custom XAML components and controls, you can also add similar support to those controls by using the concept of an automation peer.

또한 데이터 바인딩, 스타일 및 템플릿 기능을 사용 하면 대체 Ui에 대 한 설정 및 텍스트를 표시 하는 동적 변경에 대 한 지원을 쉽게 구현할 수 있습니다.In addition, data binding, style, and template features make it easy to implement support for dynamic changes to display settings and text for alternative UIs.

UI 자동화UI Automation

내게 필요한 옵션 지원은 주로 Microsoft UI 자동화 프레임 워크에 대 한 통합 지원에서 제공 됩니다.Accessibility support comes primarily from the integrated support for the Microsoft UI Automation framework. 이 지원은 기본 클래스를 통해 제공 되며, 컨트롤 형식에 대 한 클래스 구현의 기본 제공 동작 및 UI 자동화 공급자 API의 인터페이스 표현으로 제공 됩니다.That support is provided through base classes and the built-in behavior of the class implementation for control types, and an interface representation of the UI Automation provider API. 각 컨트롤 클래스는 UI 자동화 클라이언트에 컨트롤의 역할 및 콘텐츠를 보고 하는 자동화의 UI 자동화 개념과 자동화 피어의 개념을 사용 합니다.Each control class uses the UI Automation concepts of automation peers and automation patterns that report the control's role and content to UI Automation clients. 앱은 UI 자동화를 통해 최상위 창으로 처리 되 고, UI 자동화 프레임 워크를 통해 해당 앱 창 내의 접근성 관련 콘텐츠를 모두 UI 자동화 클라이언트에서 사용할 수 있습니다.The app is treated as a top-level window by UI Automation, and through the UI Automation framework all the accessibility-relevant content within that app window is available to a UI Automation client. UI 자동화에 대 한 자세한 내용은 Ui Automation 개요를 참조 하세요.For more info about UI Automation, see UI Automation Overview.

보조 기술Assistive technology

사용자가 설치한 보조 기술 제품이 나 운영 체제에서 제공 하는 도구 및 설정에 의해 많은 사용자의 접근성 요구 사항이 충족 됩니다.Many user accessibility needs are met by assistive technology products installed by the user or by tools and settings provided by the operating system. 여기에는 화면 판독기, 화면 확대 및 고대비 설정과 같은 기능이 포함 됩니다.This includes functionality such as screen readers, screen magnification, and high-contrast settings.

보조 기술 제품에는 다양 한 소프트웨어와 하드웨어가 포함 되어 있습니다.Assistive technology products include a wide variety of software and hardware. 이러한 제품은 표준 키보드 인터페이스 및 화면 판독기와 기타 보조 기술에 대 한 UI의 내용 및 구조에 대 한 정보를 보고 하는 내게 필요한 옵션 프레임 워크를 통해 작동 합니다.These products work through the standard keyboard interface and accessibility frameworks that report information about the content and structure of a UI to screen readers and other assistive technologies. 보조 기술 제품의 예는 다음과 같습니다.Examples of assistive technology products include:

  • 사용자가 키보드 대신 포인터를 사용 하 여 텍스트를 입력할 수 있는 화상 키보드The On-Screen Keyboard, which enables people to use a pointer in place of a keyboard to type text.
  • 음성 인식 소프트웨어로, 음성 단어를 입력 된 텍스트로 변환 합니다.Voice-recognition software, which converts spoken words into typed text.
  • 텍스트를 음성 또는 브라유 점자와 같은 다른 형식으로 변환 하는 화면 판독기입니다.Screen readers, which convert text into spoken words or other forms such as Braille.
  • Windows의 특정 부분인 내레이터 화면 판독기입니다.The Narrator screen reader, which is specifically part of Windows. 내레이터에는 터치 제스처를 사용 하 여 키보드를 사용할 수 없는 경우 터치 제스처를 처리 하 여 화면 읽기 작업을 수행할 수 있는 터치 모드가 있습니다.Narrator has a touch mode, which can perform screen reading tasks by processing touch gestures, for when there is no keyboard available.
  • 화면 표시를 조정 하는 프로그램 또는 설정 (예: 고대비 테마, dpi (인치당 도트 수) 설정 또는 돋보기 도구)Programs or settings that adjust the display or areas of it, for example high contrast themes, dots per inch (dpi) settings of the display, or the Magnifier tool.

적절 한 키보드 및 화면 판독기를 지 원하는 앱은 일반적으로 다양 한 보조 기술 제품에서 잘 작동 합니다.Apps that have good keyboard and screen reader support usually work well with various assistive technology products. 대부분의 경우 UWP 앱은 정보나 구조를 추가로 수정 하지 않고도 이러한 제품과 함께 작동 합니다.In many cases, a UWP app works with these products without additional modification of information or structure. 그러나 최적의 액세스 가능성 경험을 위해 일부 설정을 수정 하거나 추가 지원을 구현 하는 것이 좋습니다.However, you may want to modify some settings for optimal accessibility experience or to implement additional support.

보조 기술을 사용 하 여 기본적인 접근성 시나리오를 테스트 하는 데 사용할 수 있는 옵션 중 일부는 접근성 테스트에 나와 있습니다.Some of the options that you can use for testing basic accessibility scenarios with assistive technologies are listed in Accessibility testing.

화면 읽기 프로그램 지원 및 기본 접근성 정보Screen reader support and basic accessibility information

화면 판독기는 음성 언어 또는 브라유 점자 출력과 같은 다른 형식으로 렌더링 하 여 앱의 텍스트에 대 한 액세스를 제공 합니다.Screen readers provide access to the text in an app by rendering it in some other format, such as spoken language or Braille output. 화면 판독기의 정확한 동작은 소프트웨어 및 사용자의 구성에 따라 달라 집니다.The exact behavior of a screen reader depends on the software and on the user's configuration of it.

예를 들어 일부 화면 판독기는 사용자가를 시작 하거나 보려는 앱으로 전환할 때 전체 앱 UI를 읽고 사용자가 탐색을 시도 하기 전에 사용 가능한 정보 콘텐츠를 모두 받을 수 있도록 합니다.For example, some screen readers read the entire app UI when the user starts or switches to the app being viewed, which enables the user to receive all of the available informational content before attempting to navigate it. 또한 일부 화면 판독기는 탭 탐색 중에 포커스를 받을 때 개별 컨트롤과 연결 된 텍스트를 읽습니다.Some screen readers also read the text associated with an individual control when it receives focus during tab navigation. 이렇게 하면 사용자가 응용 프로그램의 입력 컨트롤 사이에서 이동할 때 스스로 방향을 지정할 수 있습니다.This enables users to orient themselves as they navigate among the input controls of an application. 내레이터는 사용자의 선택에 따라 두 동작을 모두 제공 하는 화면 판독기의 한 예입니다.Narrator is an example of a screen reader that provides both behaviors, depending on user choice.

사용자가 앱을 이해 하거나 탐색 하는 데 도움이 되도록 화면 판독기나 기타 보조 기술에 필요한 가장 중요 한 정보는 앱의 요소 부분에 대 한 액세스 가능한 이름 입니다.The most important information that a screen reader or any other assistive technology needs in order to help users understand or navigate an app is an accessible name for the element parts of the app. 대부분의 경우 컨트롤이 나 요소에는 다른 방법으로 제공 된 다른 속성 값에서 계산 되는 액세스 가능 이름이 이미 있습니다.In many cases, a control or element already has an accessible name that is calculated from other property values that you have otherwise provided. 이미 계산 된 이름을 사용할 수 있는 가장 일반적인 경우는를 지원 하 고 내부 텍스트를 표시 하는 요소를 사용 하는 것입니다.The most common case in which you can use an already-calculated name is with an element that supports and displays inner text. 다른 요소의 경우 요소 구조에 대 한 모범 사례를 따라 액세스 가능한 이름을 제공 하는 다른 방법을 고려해 야 합니다.For other elements, you sometimes need to account for other ways to provide an accessible name by following best practices for element structure. 경우에 따라 앱 접근성을 위한 접근성 있는 이름으로 명시적으로 사용되는 이름을 제공해야 합니다.And sometimes you need to provide a name that is explicitly intended as the accessible name for app accessibility. 일반적인 UI 요소에서 작업 하는 계산 된 값의 수와 일반적인 액세스 가능한 이름에 대 한 자세한 내용은 기본 접근성 정보를 참조 하세요.For a listing of how many of these calculated values work in common UI elements, and for more info about accessible names in general, see Basic accessibility information.

사용할 수 있는 다른 여러 가지 자동화 속성 (다음 섹션에서 설명 하는 키보드 속성 포함)이 있습니다.There are several other automation properties available (including the keyboard properties described in the next section). 그러나 모든 화면 판독기에서 모든 automation 속성을 지 원하는 것은 아닙니다.However, not all screen readers support all automation properties. 일반적으로 적절 한 모든 자동화 속성을 설정 하 고 테스트 하 여 화면 판독기에 대 한 최대한 광범위 한 지원을 제공 해야 합니다.In general, you should set all appropriate automation properties and test to provide the widest possible support for screen readers.

키보드 지원Keyboard support

좋은 키보드 지원을 제공 하려면 응용 프로그램의 모든 부분을 키보드와 함께 사용할 수 있는지 확인 해야 합니다.To provide good keyboard support, you must ensure that every part of your application can be used with a keyboard. 앱에서 대부분 표준 컨트롤을 사용하고 사용자 지정 컨트롤을 사용하지 않는 경우 이미 최적의 접근성 환경을 구현하고 있는 것입니다.If your app uses mostly the standard controls and doesn't use any custom controls, you are most of the way there already. 기본 XAML 제어 모델은 탭 탐색, 텍스트 입력 및 컨트롤별 지원을 포함 하 여 기본 제공 키보드 지원 기능을 제공 합니다.The basic XAML control model provides built-in keyboard support including tab navigation, text input, and control-specific support. 레이아웃 컨테이너 역할을 하는 요소 (예: 패널)는 레이아웃 순서를 사용 하 여 기본 탭 순서를 설정 합니다.The elements that serve as layout containers (such as panels) use the layout order to establish a default tab order. 이러한 순서는 액세스 가능한 UI 표현에 사용할 수 있는 올바른 탭 순서입니다.That order is often the correct tab order to use for an accessible representation of the UI. ListBoxGridView 컨트롤을 사용 하 여 데이터를 표시 하는 경우 기본 제공 화살표 키 탐색을 제공 합니다.If you use ListBox and GridView controls to display data, they provide built-in arrow-key navigation. 또는 단추 컨트롤을 사용 하는 경우 단추 활성화를 위해 이미 스페이스바 또는 Enter 키를 처리 합니다.Or if you use a Button control, it already handles the Spacebar or Enter keys for button activation.

탭 순서 및 키 기반 활성화 나 탐색을 포함 하 여 키보드 지원의 모든 측면에 대 한 자세한 내용은 키보드 접근성을 참조 하세요.For more info about all the aspects of keyboard support, including tab order and key-based activation or navigation, see Keyboard accessibility.

미디어 및 캡션Media and captioning

일반적으로 MediaElement 개체를 통해 오디오 시각적 미디어를 표시 합니다.You typically display audiovisual media through a MediaElement object. MediaElement api를 사용 하 여 미디어 재생을 제어할 수 있습니다.You can use MediaElement APIs to control the media playback. 내게 필요한 옵션을 위해 사용자가 필요에 따라 미디어를 재생, 일시 중지 및 중지할 수 있는 컨트롤을 제공 합니다.For accessibility purposes, provide controls that enable users to play, pause, and stop the media as needed. 경우에 따라 미디어에는 설명 설명이 포함 된 캡션 또는 대체 오디오 트랙과 같이 접근성을 위한 추가 구성 요소가 포함 됩니다.Sometimes, media includes additional components that are intended for accessibility, such as captioning or alternative audio tracks that include narrative descriptions.

액세스 가능한 텍스트Accessible text

텍스트의 세 가지 주요 측면은 접근성과 관련이 있습니다.Three main aspects of text are relevant to accessibility:

  • 도구는 탭 시퀀스 순회의 일부로 또는 전체 문서 표현의 일부로만 텍스트를 읽을 지 여부를 결정 해야 합니다.Tools must determine whether the text is to be read as part of a tab-sequence traversal or only as part of an overall document representation. 텍스트를 표시 하는 데 적절 한 요소를 선택 하거나 해당 텍스트 요소의 속성을 조정 하 여 이러한 결정을 제어할 수 있습니다.You can help control this determination by choosing the appropriate element for displaying the text or by adjusting properties of those text elements. 각 텍스트 요소에는 특정 목적이 있으며 해당 용도에는 해당 하는 UI 자동화 역할이 있습니다.Each text element has a specific purpose, and that purpose often has a corresponding UI Automation role. 잘못 된 요소를 사용 하면 UI 자동화에 잘못 된 역할을 보고 하 고 보조 기술 사용자에 게 혼란 스러운 환경을 만들 수 있습니다.Using the wrong element can result in reporting the wrong role to UI Automation and creating a confusing experience for an assistive technology user.
  • 대부분의 사용자는 배경에 적절 한 대비를 사용 하지 않는 한 텍스트를 읽기 어려울 수 있는 시각 제한 사항을가지고 있습니다.Many users have sight limitations that make it difficult for them to read text unless it has adequate contrast against the background. 이러한 제한 사항이 없는 앱 디자이너에 게는이에 영향을 미치는 방법이 직관적이 지 않습니다.How this impacts the user is not intuitive for app designers who do not have that sight limitation. 예를 들어 색 블라인드 사용자의 경우 디자인에서 색이 잘못 선택 되 면 일부 사용자가 텍스트를 읽을 수 없게 됩니다.For example, for color-blind users, poor color choices in the design can prevent some users from being able to read the text. 웹 콘텐츠에 대해 원래 제공 된 내게 필요한 옵션 권장 사항은 응용 프로그램 에서도 이러한 문제를 방지할 수 있는 대비 표준을 정의 합니다.Accessibility recommendations that were originally made for web content define standards for contrast that can avoid these problems in apps as well. 자세한 내용은 액세스 가능한 텍스트 요구 사항을 참조 하세요.For more info, see Accessible text requirements.
  • 대부분의 사용자는 단순히 너무 작은 텍스트를 읽는 데 어려움이 있습니다.Many users have difficulty reading text that is simply too small. 앱의 UI에 있는 텍스트를 처음부터 크게 크게 설정 하 여이 문제를 방지할 수 있습니다.You can prevent this issue by making the text in your app's UI reasonably large in the first place. 그러나 많은 양의 텍스트를 표시 하는 앱 또는 다른 시각적 요소와 함께 표시 되는 텍스트입니다.However, that's challenging for apps that display large quantities of text, or text interspersed with other visual elements. 이러한 경우 앱의 모든 텍스트가 확장 되도록 앱이 디스플레이를 확장할 수 있는 시스템 기능과 올바르게 상호 작용 하는지 확인 합니다.In such cases, make sure that the app correctly interacts with the system features that can scale up the display, so that any text in apps scales up along with it. 일부 사용자는 dpi 값을 내게 필요한 옵션으로 변경 합니다.(Some users change dpi values as an accessibility option. 이 옵션은 쉽게 액세스할수 있는 화면에 표시 하는 데 사용할 수 있으며, 모양 및 개인 설정표시를 위해 컨트롤 패널 UI로 리디렉션됩니다 / Display.That option is available from Make things on the screen larger in Ease of Access, which redirects to a Control Panel UI for Appearance and Personalization / Display.)

고대비 테마 지원Supporting high-contrast themes

UI 컨트롤은 테마의 XAML 리소스 사전에 포함 된 시각적 표현을 사용 합니다.UI controls use a visual representation that is defined as part of a XAML resource dictionary of themes. 이러한 테마 중 하나 이상이 시스템에 고대비를 설정 하는 경우에만 사용 됩니다.One or more of these themes is specifically used when the system is set for high contrast. 사용자가 리소스 사전에서 적절 한 테마를 동적으로 조회 하 여 고대비로 전환 하는 경우 모든 UI 컨트롤은 적절 한 고대비 테마를 사용 합니다.When the user switches to high contrast, by looking up the appropriate theme from a resource dictionary dynamically, all your UI controls will use an appropriate high-contrast theme too. 명시적 스타일을 지정 하거나 고대비 테마에서 스타일 변경 내용을 로드 및 재정의 하지 못하도록 하는 다른 스타일 지정 기술을 사용 하 여 테마를 사용 하지 않도록 설정 했는지 확인 합니다.Just make sure that you haven't disabled the themes by specifying an explicit style or using another styling technique that prevents the high-contrast themes from loading and overriding your style changes. 자세한 내용은 고대비 테마를 참조 하세요.For more info, see High-contrast themes.

대체 UI 디자인Design for alternative UI

앱을 디자인 하는 경우 모바일, 시각 및 청각 기능이 제한 된 사용자가 앱을 사용할 수 있는 방법을 고려 합니다.When you design your apps, consider how they may be used by people with limited mobility, vision, and hearing. 보조 기술 제품은 표준 UI를 광범위 하 게 사용 하므로 접근성에 대 한 다른 조정 작업을 수행할 필요가 없는 경우에도 적절 한 키보드 및 화면 판독기 지원을 제공 하는 것이 특히 중요 합니다.Because assistive technology products make extensive use of standard UI, it is particularly important to provide good keyboard and screen-reader support even if you make no other adjustments for accessibility.

대부분의 경우에는 여러 기술을 사용 하 여 대상 그룹을 확장 함으로써 중요 한 정보를 전달할 수 있습니다.In many cases, you can convey essential information by using multiple techniques to widen your audience. 예를 들어 아이콘 및 색 정보를 모두 사용 하 여 정보를 강조 표시 하 여 색맹인 사용자를 도울 수 있으며, 소리 효과와 함께 시각적 경고를 표시 하 여 청각 장애가 있는 사용자에 게 도움을 줍니다.For example, you can highlight information using both icon and color information to help users who are color blind, and you can display visual alerts along with sound effects to help users who are hearing impaired.

필요한 경우 불필요 한 요소와 애니메이션을 완전히 제거 하는 액세스 가능한 대체 사용자 인터페이스 요소를 제공 하 고, 다른 단순화를 제공 하 여 사용자 환경을 간소화할 수 있습니다.If necessary, you can provide alternative, accessible user interface elements that completely remove nonessential elements and animations, and provide other simplifications to streamline the user experience. 다음 코드 예제에서는 사용자 설정에 따라 다른 UserControl 인스턴스를 표시 하는 방법을 보여 줍니다.The following code example demonstrates how to display one UserControl instance in place of another depending on a user setting.

XAMLXAML

<StackPanel x:Name="LayoutRoot" Background="White">

  <CheckBox x:Name="ShowAccessibleUICheckBox" Click="ShowAccessibleUICheckBox_Click">
    Show Accessible UI
  </CheckBox>

  <UserControl x:Name="ContentBlock">
    <local:ContentPage/>
  </UserControl>

</StackPanel>

Visual BasicVisual Basic

Private Sub ShowAccessibleUICheckBox_Click(ByVal sender As Object,
    ByVal e As RoutedEventArgs)

    If (ShowAccessibleUICheckBox.IsChecked.Value) Then
        ContentBlock.Content = New AccessibleContentPage()
    Else
        ContentBlock.Content = New ContentPage()
    End If
End Sub

C#C#

private void ShowAccessibleUICheckBox_Click(object sender, RoutedEventArgs e)
{
    if ((sender as CheckBox).IsChecked.Value)
    {
        ContentBlock.Content = new AccessibleContentPage();
    }
    else
    {
        ContentBlock.Content = new ContentPage();
    }
}

확인 및 게시Verification and publishing

액세스 가능성 선언 및 앱 게시에 대 한 자세한 내용은 스토어의 접근성을 참조 하세요.For more info about accessibility declarations and publishing your app, see Accessibility in the Store.

참고

응용 프로그램을 액세스할 수 있는 것으로 선언 하는 것은 Microsoft Store에만 해당 됩니다.Declaring the app as accessible is only relevant to the Microsoft Store.

사용자 지정 컨트롤의 보조 기술 지원Assistive technology support in custom controls

사용자 지정 컨트롤을 만들 때 내게 필요한 옵션 지원 기능을 제공 하기 위해 하나 이상의 Automationpeer 서브 클래스도 구현 하거나 확장 하는 것이 좋습니다.When you create a custom control, we recommend that you also implement or extend one or more AutomationPeer subclasses to provide accessibility support. 기본 컨트롤 클래스에서 사용 된 것과 동일한 피어 클래스를 사용 하는 경우에는 기본 수준에서 파생 클래스에 대 한 자동화 지원이 적합 합니다.In some cases, so long as you use the same peer class as was used by the base control class, the automation support for your derived class is adequate at a basic level. 그러나이를 테스트 해야 하며, 피어가 새 컨트롤 클래스의 클래스 이름을 올바르게 보고할 수 있도록 피어를 구현 하는 것이 모범 사례로 권장 됩니다.However, you should test this, and implementing a peer is still recommended as a best practice so that the peer can correctly report the class name of your new control class. 사용자 지정 자동화 피어를 구현 하려면 몇 가지 단계를 거쳐야 합니다.Implementing a custom automation peer has a few steps involved. 자세한 내용은 사용자 지정 자동화 피어를 참조하세요.For more info, see Custom automation peers.

XAML/Microsoft DirectX interop를 지 원하는 앱의 보조 기술 지원Assistive technology support in apps that support XAML / Microsoft DirectX interop

SwapChainPanel 또는 SurfaceImageSource를 사용 하 여 XAML UI에서 호스트 되는 Microsoft DirectX 콘텐츠는 기본적으로 액세스할 수 없습니다.Microsoft DirectX content that's hosted in a XAML UI (using SwapChainPanel or SurfaceImageSource) is not accessible by default. XAML SwapChainPanel directx interop 샘플 은 호스트 된 directx 콘텐츠에 대 한 UI 자동화 피어를 만드는 방법을 보여 줍니다.The XAML SwapChainPanel DirectX interop sample shows how to create UI Automation peers for the hosted DirectX content. 이 방법을 사용 하면 UI 자동화를 통해 호스트 된 콘텐츠를 액세스할 수 있습니다.This technique makes the hosted content accessible through UI Automation.