アクセシビリティの概要Accessibility overview

この記事では、ユニバーサル Windows プラットフォーム (UWP) アプリのアクセシビリティ シナリオに関連する概念とテクノロジの概要を示します。This article is an overview of the concepts and technologies related to accessibility scenarios for Universal Windows Platform (UWP) apps.

アクセシビリティとアプリAccessibility and your app

障碍には、運動障碍、視覚障碍、色覚障碍、聴覚障碍、言語障碍、認知障碍、学習障碍など、さまざまな種類がありますが、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 オートメーションの概要」をご覧ください。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 (1 インチあたりのドット数) の設定、拡大鏡ツール。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). ただし、すべてのスクリーン リーダーですべてのオートメーションのプロパティがサポートされるわけではありません。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. データの表示に使う ListBox コントロールと GridView コントロールには、方向キーのナビゲーションが組み込まれています。If you use ListBox and GridView controls to display data, they provide built-in arrow-key navigation. また、Button コントロールを使う場合は、Space キーまたは 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

テキストの次の 3 つの主な側面がアクセシビリティに関連しています。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. 当初は Web コンテンツ用に作成された、アクセシビリティに関する推奨事項には、これらの問題をアプリで回避するためのコントラストの基準も定義されています。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 の [デスクトップのカスタマイズ] / [ディスプレイ] にリダイレクトされます)。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. これらのテーマのうちの 1 つ以上は、システムがハイ コントラストに設定されている場合に使われます。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. 次のコード例は、1 つの 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

カスタム コントロールを作るときは、1 つ以上の 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 の相互運用機能をサポートするアプリでの支援技術のサポート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. ホストされた DirectX コンテンツの UI オートメーション ピアを作成する方法は、XAML SwapChainPanel DirectX 相互運用性のサンプル で確認できます。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.