アクセシビリティ テストAccessibility testing

ユニバーサル Windows プラットフォーム (UWP) アプリをアクセシビリティ対応にするためのテスト手順です。Testing procedures to follow to ensure that your Universal Windows Platform (UWP) app is accessible.

アクセシビリティ テスト ツールを実行するRun accessibility testing tools

Windows ソフトウェア開発キット (Windows SDK) には、AccScopeInspectUI Accessibility Checker などアクセシビリティのテスト ツールが複数用意されています。The Windows Software Development Kit (SDK) includes several accessibility testing tools such as AccScope, Inspect and UI Accessibility Checker. これらのツールは、アプリのアクセシビリティを確認するのに役立ちます。These tools can help you verify the accessibility of your app. アプリのすべてのシナリオと UI 要素を確認してください。Be sure to verify all app scenarios and UI elements.

アクセシビリティ テスト ツールは、Microsoft Visual Studio のコマンド プロンプト、または Windows SDK のツール フォルダー (開発コンピューター上の Windows SDK のインストール ディレクトリの bin サブディレクトリ) から起動できます。You can launch the accessibility testing tools either from a Microsoft Visual Studio command prompt or from the Windows SDK tools folder (the bin subdirectory of where the Windows SDK is installed on your development machine).

AccScopeAccScope

開発者やテスト担当者は、AccScope ツールを使って、アプリ開発サイクルの遅い段階のテスト フェーズではなく、アプリの開発フェーズ、設計フェーズ、場合によってはより早い段階のプロトタイプ フェーズで、アプリのアクセシビリティを評価できます。The AccScope tool enables developers and testers to evaluate the accessibility of their app during the app's development and design, potentially in earlier prototype phases, rather than in the late testing phases of an app's development cycle. このツールは、特にアプリのナレーター アクセシビリティ シナリオのテストを意図しています。It's particularly intended for testing Narrator accessibility scenarios with your app.

InspectInspect

検査任意の UI 要素を選択し、そのアクセシビリティ データを表示することができます。Inspect enables you to select any UI element and view its accessibility data. Microsoft UI オートメーションのプロパティと制御パターンを表示し、UI オートメーション ツリー内のオートメーション要素のナビゲーション構造をテストできます。You can view Microsoft UI Automation properties and control patterns and test the navigational structure of the automation elements in the UI Automation tree. UI の開発時に Inspect を使って、アクセシビリティ属性が UI オートメーションでどのように現れるか確認します。Use Inspect as you develop the UI to verify how accessibility attributes are exposed in UI Automation. 属性は、既定の XAML コントロールに既に実装されている UI オートメーション サポートのものである場合や、In some cases the attributes come from the UI Automation support that is already implemented for default XAML controls. AutomationProperties 添付プロパティとして、XAML マークアップで設定した特定の値のものである場合があります。In other cases the attributes come from specific values that you have set in your XAML markup, as AutomationProperties attached properties.

次の図は、メモ帳の [編集] メニュー要素の UI オートメーション プロパティを照会する Inspect ツールを示しています。The following image shows the Inspect tool querying the UI Automation properties of the Edit menu element in Notepad.

Inspect ツールのスクリーン ショット。

UI Accessibility CheckerUI Accessibility Checker

UI Accessibility Checker (AccChecker) は、実行時にアクセシビリティの問題を検出するのに役立ちます。UI Accessibility Checker (AccChecker) helps you discover accessibility problems at run time. UI が完成したら、AccChecker を使って、さまざまなシナリオをテストし、実行時のアクセシビリティ情報が正しいことを確認して、実行時の問題を検出します。When your UI is complete and functional, use AccChecker to test different scenarios, verify the correctness of runtime accessibility information, and discover runtime issues. AccChecker は UI モードまたはコマンド ライン モードで実行できます。You can run AccChecker in UI or command line mode. UI モード ツールを実行するには、Windows ソフトウェア開発キット (Windows SDK) の bin ディレクトリの AccChecker ディレクトリを開き、acccheckui.exe を実行し、 [ヘルプ] メニューをクリックしてください。To run the UI mode tool, open the AccChecker directory in the Windows SDK bin directory, run acccheckui.exe, and click the Help menu.

UI Automation VerifyUI Automation Verify

UI Automation Verify (UIA Verify) は、UI オートメーション実装のテストと検証を自動で行うフレームワークです。UI Automation Verify (UIA Verify) is an automated testing and verification framework for UI Automation implementations. UIA Verify は、テスト コードに統合することができ、UI オートメーション シナリオの定期的な自動テストやスポット チェックを行うことができます。UIA Verify can integrate into the test code and conduct regular, automated testing or spot checks of UI Automation scenarios. UIA Verify を実行するには、UIAVerify サブディレクトリから VisualUIAVerifyNative.exe を実行します。To run UIA Verify, run VisualUIAVerifyNative.exe from the UIAVerify subdirectory.

Accessible Event WatcherAccessible Event Watcher

アクセス可能なイベントの監視 (AccEvent) アプリの UI 要素イベントを発生させる適切な UI オートメーションと Microsoft Active Accessibility UI の変更が行われるかどうかをテストします。Accessible Event Watcher (AccEvent) tests whether an app's UI elements fire proper UI Automation and Microsoft Active Accessibility events when UI changes occur. UI の変更は、フォーカスが移動したときや、UI 要素の呼び出しまたは選択が行われたとき、状態またはプロパティが変更された場合に発生することがあります。Changes in the UI can occur when the focus changes, or when a UI element is invoked, selected, or has a state or property change.

注意

ドキュメントで説明したほとんどのアクセシビリティ テスト ツールは、PC で動作し、電話では動作しません。Most accessibility testing tools mentioned in the documentation run on a PC, not on a phone. 一部のツールは開発中にエミュレーターを使って実行できますが、それらのツールのほとんどはエミュレーターで UI オートメーション ツリーを表示できません。You can run some of the tools while developing and using an emulator, but most of these tools can't expose the UI Automation tree within the emulator.

キーボード アクセシビリティをテストするTest keyboard accessibility

キーボード アクセシビリティをテストするには、マウスを取り外す (タブレット デバイスを使っている場合は、スクリーン キーボードを使う) ことが最も良い方法です。The best way to test your keyboard accessibility is to unplug your mouse or use the On-Screen Keyboard if you are using a tablet device. キーボード アクセシビリティのナビゲーションをテストするには、Tab キーを使います。Test keyboard accessibility navigation by using the Tab key. すべての対話型 UI 要素に Tab キーで移動できる必要があります。You should be able to cycle through all interactive UI elements by using Tab key. コンポジット UI 要素については、方向キーを使って要素の部分間を移動できることを確認します。For composite UI elements, verify that you can navigate among the parts of elements by using the arrow keys. たとえば、キーボードのキーを使って項目の一覧間を移動できる必要があります。For example, you should be able to navigate lists of items using keyboard keys. さらに、すべての対話型 UI 要素を、フォーカスがあるときにキーボードで実行できる (通常は Enter キーまたは Space キーを使う) ことを確認します。Finally, make sure that you can invoke all interactive UI elements with the keyboard once those elements have focus, typically by using the Enter or Spacebar key.

表示テキストのコントラスト比を確認するVerify the contrast ratio of visible text

色コントラスト ツールを使って、表示テキストのコントラスト比が適切であることを検証します。Use color contrast tools to verify that the visible text contrast ratio is acceptable. ただし、非アクティブな UI 要素や、何も情報を伝えず、意味を変えることなく再配置できるロゴまたは装飾テキストは、例外です。The exceptions include inactive UI elements, and logos or decorative text that doesn’t convey any information and can be rearranged without changing the meaning. コントラスト比と例外について詳しくは、「アクセシビリティに対応したテキストの要件」をご覧ください。See Accessible text requirements for more information on contrast ratio and exceptions. コントラスト比をテストできるツールについては、Techniques for WCAG 2.0 の G18 (リソース セクション) をご覧ください。See Techniques for WCAG 2.0 G18 (Resources section) for tools that can test contrast ratios.

注意

Techniques for WCAG 2.0 の G18 にリストされたツールのいくつかは、UWP アプリで対話的に使うことができません。Some of the tools listed by Techniques for WCAG 2.0 G18 can't be used interactively with a UWP app. 場合によっては、前景と背景の色の値を手動でツールに入力する必要があります。またアプリ UI の画面をキャプチャした後、そのキャプチャ画像に対してコントラスト比ツールを実行することが必要になる場合もあります。また、画像編集プログラムでソース ビットマップ ファイルを開いている間 (その画像がアプリによって読み込まれているときではなく) にツールを実行することが必要になる場合もあります。You may need to enter foreground and background color values manually in the tool, make screen captures of app UI and then run the contrast ratio tool over the screen capture image, or run the tool while opening source bitmap files in an image editing program rather than while that image is loaded by the app.

アプリをハイ コントラストで確認するVerify your app in high contrast

ハイ コントラスト テーマがアクティブになっている状態でアプリを使って、すべての UI 要素が適切に表示されることを確認します。Use your app while a high-contrast theme is active to verify that all the UI elements display correctly. すべてのテキストを読み取ることができ、すべての画像がクリアに表示されている必要があります。All text should be readable, and all images should be clear. XAML テーマ ディクショナリのリソースまたはコントロール テンプレートを調整し、コントロールが原因であるテーマの問題があれば修正します。Adjust the XAML theme-dictionary resources or control templates to correct any theme issues that come from controls. ハイ コントラストの重大な問題の原因がテーマまたはコントロール (イメージ ファイルなど) でない場合は、ハイ コントラスト テーマがアクティブになっているときに使う別のバージョンを用意します。In cases where prominent high-contrast issues are not coming from themes or controls (such as from image files), provide separate versions to use when a high-contrast theme is active.

アプリの表示設定を確認するVerify your app with display settings

ディスプレイの 1 インチあたりのドット数 (dpi) の値を調整するシステム ディスプレイ オプションを使い、DPI の値の変更に合わせてアプリの UI が正常に拡大縮小されることを確認しますUse the system display options that adjust the display's dots per inch (dpi) value, and ensure that your app UI scales correctly when the dpi value changes. (一部のユーザーは、dpi 値を変更から入手できますが、ユーザー補助のオプションとしてコンピューターの簡単操作プロパティを表示と同様です)。次の問題を発見した場合、レイアウトのスケーリングのガイドラインとは異なるスケーリング要因の他のリソースを提供します。(Some users change dpi values as an accessibility option, it's available from Ease of Access as well as display properties.) If you find any issues, follow the Guidelines for layout scaling and provide additional resources for different scaling factors.

ナレーターでアプリの主要なシナリオを確認するVerify main app scenarios by using Narrator

ナレーターを使ってアプリの画面の読み上げをテストします。Use Narrator to test the screen reading experience for your app.

マウス/キーボードとナレーターを使用して、アプリをテストするのにには、次の手順を使用します。Use these steps to test your app using Narrator with a mouse and keyboard:

  1. _Windows ロゴ キー、Ctrl キー、Enter キー_を同時に押して、ナレーターを起動します。Start Narrator by pressing Windows logo key + Ctrl + Enter. Windows 10 Version 1607 より前のバージョンでは、_Windows ロゴ キーと Enter キー_を同時に押して、ナレーターを起動します。In versions prior to Windows 10 version 1607, use Windows logo key + Enter to start Narrator.

  2. キーボードを使ってアプリ内を移動するには、Tab キーと方向キーを使うか、_CapsLock キーを押しながら方向キー_を使います。Navigate your app with the keyboard by using the Tab key, the arrow keys, and the Caps Lock + arrow keys.

  3. アプリ内を移動しながら、ナレーターが UI 要素を読み上げるのを聞き取り、次の点を確かめます。As you navigate your app, listen as Narrator reads the elements of your UI and verify the following:

    • コントロールごとに、すべての表示コンテンツがナレーターによって読み上げられるのを確かめます。For each control, ensure that Narrator reads all visible content. また、各コントロールの名前、該当する状態 (オン、選択済みなど)、種類 (ボタン、チェック ボックス、一覧項目など) がナレーターによって読み上げられるのを確かめます。Also ensure that Narrator reads each control's name, any applicable state (checked, selected, and so on), and the control type (button, check box, list item, and so on).
    • 要素が対話型である場合は、_CapsLock キーを押しながら Enter キー_を押すことにより、操作を起動するためにナレーターを使用できることを確認します。If the element is interactive, verify that you can use Narrator to invoke its action by pressing Caps Lock + Enter.
    • 表ごとに、表の名前、説明 (存在する場合)、行見出しと列見出しがナレーターによって正しく読み上げられるのを確かめます。For each table, ensure that Narrator correctly reads the table name, the table description (if available), and the row and column headings.
  4. _CapsLock キー、Shift キー、Enter キー_を同時に押すことでアプリを検索し、すべてのコントロールが検索一覧に表示されることとコントロール名がローカライズされて読み取り可能であることを確かめます。Press Caps Lock + Shift + Enter to search your app and verify that all of your controls appear in the search list, and that the control names are localized and readable.

  5. モニターをオフにし、キーボードとナレーターのみを使ってアプリの主要なシナリオを実行できることを確かめます。Turn off your monitor and try to accomplish main app scenarios by using only the keyboard and Narrator. ナレーターのすべてのコマンドとショートカットの一覧を表示するには、_CapsLock キーを押しながら F1 キー_を押します。To get the full list of Narrator commands and shortcuts, press Caps Lock + F1.

Windows 10 バージョン 1607 以降では、ナレーターで新しい開発者モードが導入されました。Starting with Windows 10 version 1607, we introduced a new developer mode in Narrator. ナレーターがオンになっている場合、_CapsLock キー、Shift キー、F12 キー_を同時に押して、開発者モードをオンにします。Turn on developer mode when Narrator is already running by pressing Caps Lock + Shift + F12. 開発者モードを有効にすると、画面がマスクされ、アクセス可能なオブジェクトとナレーターにプログラムで公開されている関連のテキストのみが強調表示されます。When developer mode is enabled, the screen will be masked and will highlight only the accessible objects and the associated text that is exposed programmatically to Narrator. これにより、ナレーターに公開されている情報が適切な方法で視覚的に表示されます。This gives a you a good visual representation of the information that is exposed to Narrator.

ナレーターのタッチ モードを使用してアプリをテストするのにには、次の手順を使用します。Use these steps to test your app using Narrator's touch mode:

注意

4 つ以上のコンタクトをサポートするデバイスの場合、ナレーターは自動的にタッチ モードに移行します。Narrator automatically enters touch mode on devices that support 4+ contacts. ナレーターは、マルチモニターや主要画面でのマルチタッチ デジタイザーをサポートしません。Narrator doesn't support multi-monitor scenarios or multi-touch digitizers on the primary screen.

  1. UI を操作し、レイアウトを確かめます。Get familiar with the UI and explore the layout.

    • 1 本指のスワイプ ジェスチャを使用して、ui に移動します。Navigate through the UI by using single-finger swipe gestures. 項目間を移動するには左右のスワイプを使い、項目のカテゴリを変更するには上下のスワイプを使います。Use left or right swipes to move between items, and up or down swipes to change the category of items being navigated. カテゴリには、すべての項目、リンク、表、見出しなどがあります。Categories include all items, links, tables, headers, and so on. 指 1 本のスワイプ ジェスチャによるナビゲーションは、_CapsLock キーを押しながら方向キー_を押すことによるナビゲーションとほぼ同じです。Navigating with single-finger swipe gestures is similar to navigating with Caps Lock + Arrow.
    • タブのジェスチャを使用して、フォーカスを設定できる要素を移動します。Use tab gestures to navigate through focusable elements. 指 3 本を使った左右のスワイプは、キーボードで Tab キーを押したり、Shift キーを押しながら Tab キー を押したりするのと同じです。A three-finger swipe to the right or left is the same as navigating with Tab and Shift + Tab on a keyboard.
    • 1 本の指で UI が空間的に調査します。Spatially investigate the UI with a single finger. 1 本の指を上下左右にドラッグして、ナレーターに指の下の項目を読み上げさせます。Drag a single finger up and down, or left and right, to have Narrator read the items under your finger. 代わりにマウスを使うこともできます。マウスでも 1 本指でのドラッグと同じヒット テスト ロジックを使っているためです。You can use the mouse as an alternative because it uses the same hit-testing logic as dragging a single finger.
    • 3 本指で上方向へスワイプすることで、ウィンドウ全体とウィンドウの全内容を読み上げますRead the entire window and all its contents with a three finger swipe up. これは、_CapsLock キーを押しながら W キー_を押すのと同じです。This is equivalent to using Caps Lock + W.

    重要な UI にアクセスできない場合、アクセシビリティに問題が存在する可能性があります。If there is important UI that you cannot reach, you may have an accessibility issue.

  2. コントロールを操作して、プライマリ操作、セカンダリ操作、スクロール動作をテストします。Interact with a control to test its primary and secondary actions, and its scrolling behavior.

    プライマリ操作には、ボタンのアクティブ化、テキスト キャレットの配置、コントロールへのフォーカスの設定などが含まれます。Primary actions include things like activating a button, placing a text caret, and setting focus to the control. セカンダリ操作には、一覧項目の選択、オプションが複数あるボタンの展開などの操作が含まれます。Secondary actions include actions such as selecting a list item or expanding a button that offers multiple options.

    • プライマリ アクションをテストします。倍精度浮動小数点、または 1 本の指でキーを押して順にタップします別です。To test a primary action: Double tap, or press with one finger and tap with another.
    • セカンダリのアクションをテストします。タップして、3 倍または 1 本の指ダブルタップ別とキーを押します。To test a secondary action: Triple tap, or press with one finger and double tap with another.
    • スクロール動作をテストするには。2 本の指のカードを使用して、目的の方向にスクロールします。To test scrolling behavior: Use two-finger swipes to scroll in the desired direction.

    一部のコントロールには、その他の操作も用意されています。Some controls provide additional actions. すべての一覧を表示するには、4 本指で 1 回タップします。To display the full list, enter a single four-finger tap.

    マウスまたはキーボードに応答し、プライマリ タッチ操作またはセカンダリ タッチ操作に応答しないコントロールの場合、新しい UI オートメーション コントロール パターンを実装する必要があります。If a control responds to the mouse or keyboard but does not respond to a primary or secondary touch interaction, the control might need to implement additional UI Automation control patterns.

また、AccScope ツールを使ってアプリのナレーター アクセシビリティ シナリオをテストすることも検討してください。You should also consider using the AccScope tool to test Narrator accessibility scenarios with your app. AccScope ツール トピック」では、ナレーター シナリオをテストするための AccScope の構成方法について説明しています。The AccScope tool topic describes how to configure AccScope to test Narrator scenarios.

アプリの UI オートメーションの表現を確認するExamine the UI Automation representation for your app

前述したいくつかの UI オートメーション テスト ツールでは、アプリがどのように見えるかを緩慢に考慮するのではなく、UI オートメーション要素の構造としてアプリを表現する方法についてアプリを確認する手段を提供しています。Several of the UI Automation testing tools mentioned previously provide a way to view your app in a way that deliberately does not consider what the app looks like, and instead represents the app as a structure of UI Automation elements. この方法によって、UI オートメーション クライアント (主に支援技術) がアクセシビリティのシナリオでアプリを操作します。This is how UI Automation clients, mainly assistive technologies, will be interacting with your app in accessibility scenarios.

AccScope ツールでは、視覚的な表現またはリストのいずれかとして UI オートメーション要素を表示できるので、アプリについて特に興味深いビューが得られます。The AccScope tool provides a particularly interesting view of your app because you can see the UI Automation elements either as a visual representation or as a list. 視覚エフェクトを使うと、アプリの UI の視覚的な外観に関連するように各部にドリルダウンできます。If you use the visualization, you can drill down into the parts in a way that you'll be able to correlate with the visual appearance of your app's UI. すべてのロジックを UI に割り当てる前に、最初期の UI プロトタイプのアクセシビリティをテストすることさえ可能であり、アプリの視覚的な対話操作とアクセシビリティ シナリオのナビゲーションについて双方のバランスを確認できます。You can even test the accessibility of your earliest UI prototypes before you've assigned all the logic to the UI, making sure that both the visual interaction and accessibility-scenario navigation for your app is in balance.

テスト可能な側面の 1 つとして、表示したくない要素が UI オートメーション要素ビューに表示されるかどうかがあります。One aspect that you can test is whether there are elements appearing in the UI Automation element view that you don't want to appear there. ビューから除外したい要素、または反対に欠落する要素が見つかった場合に、アクセシビリティ ビューで XAML コントロールの表示を調整するために AutomationProperties.AccessibilityView XAML 添付プロパティを使用できます。If you find elements you want to omit from the view, or conversely if there are elements missing, you can use the AutomationProperties.AccessibilityView XAML attached property to adjust how XAML controls appear in accessibility views. 基本的なアクセシビリティ ビューを確認した後、コントロール ビューに公開される対話型の各部分にユーザーがアクセスできるかどうかについて、方向キーによって使用可能なタブ シーケンスまたは空間的なナビゲーションを再確認することもお勧めします。After you've looked at the basic accessibility views, this is also a good opportunity to recheck your tab sequences or spatial navigation as enabled by arrow keys to make sure users can reach each of the parts that are interactive and exposed in the control view.