次の方法で共有


包括的な Windows アプリの開発

この記事では、アクセシビリティの高い Windows アプリを開発する方法について説明します。 具体的には、アプリの論理階層を設計する方法を理解していることを前提としています。 キーボード ナビゲーション、色とコントラストの設定、支援技術のサポートを含むアクセシビリティ対応の Windows アプリを開発する方法について説明します。

まだお読みでない場合は、まず包括的なソフトウェアの設計に関する内容をお読みください。

アプリがアクセス可能であることを確認するには、次の 3 つの操作を行う必要があります。

  1. UI 要素をプログラムによるアクセスのために 公開します。
  2. マウスまたはタッチスクリーンを使用できないユーザーの キーボード ナビゲーション がアプリでサポートされていることを確認します。
  3. アプリでアクセス可能な 色とコントラスト の設定がサポートされていることを確認します。

プログラムによるアクセス

プログラムによるアクセスは、アプリでアクセシビリティを作成するために重要です。 これは、アプリ内のコンテンツおよび対話型 UI 要素に対してアクセス可能な名前 (必須) と説明 (省略可能) を設定することで実現されます。 これにより、UI コントロールがスクリーン リーダー (ナレーターなど) や代替出力デバイス (点字ディスプレイなど) などの支援技術 (AT) に公開されるようになります。 プログラムによるアクセスがないと、支援技術の API は情報を正しく解釈できず、ユーザーが製品を十分に使用できなくなったり、ドキュメントに記載されていないプログラミング インターフェイスや、アクセシビリティ インターフェイスとして使用されることを意図していない手法を AT に強制的に使用させたりすることはできません。 UI コントロールが支援技術に公開されている場合、AT はユーザーが使用できるアクションとオプションを決定できます。

支援技術 (AT) でアプリの UI 要素を使用できるようにする方法の詳細については、「アクセシビリティに関する 基本的な情報を公開する」を参照してください。

キーボード ナビゲーション

視覚障碍のあるユーザーやモビリティの問題があるユーザーにとって、キーボードを使用して UI を操作できることが非常に重要です。 ただし、ユーザーの操作を機能させる必要がある UI コントロールにのみ、キーボード フォーカスを設定する必要があります。 静的イメージなどのアクションを必要としないコンポーネントには、キーボード フォーカスは必要ありません。

マウスやタッチによるナビゲーションとは異なり、キーボード ナビゲーションは直線的であることを覚えておく必要があります。 キーボード ナビゲーションを検討するときは、ユーザーが製品を操作する方法と、論理ナビゲーションがどうなるかを考えてください。 西洋の文化では、人々は左から右、上から下に読みます。 そのため、キーボード ナビゲーションでは、このパターンに従うのが一般的です。

キーボード ナビゲーションを設計するときは、UI を調べて、次の質問について考えてください。

  • UI にコントロールがどのようにレイアウトされ、まとめられているか?
  • 重要なコントロール グループが存在するか?
    • 存在する場合は、それらのグループに別のレベルのグループが含まれているか?
  • ピアコントロールにおいて、ナビゲーションはタブ移動や方向キーのような特別なナビゲーション、またはその両方を使用して行うべきでしょうか。

目標は、UI がどのようにレイアウトされているかをユーザーが理解し、操作可能なコントロールを識別できるようにすることです。 ユーザーがナビゲーション ループを完了する前にタブ位置が多すぎることが分かった場合は、関連するコントロールをグループ化することを検討してください。 ハイブリッド コントロールなど、関連する一部のコントロールは、この初期の探索段階で対処する必要がある場合があります。 製品の開発を始めた後は、キーボードナビゲーションを作り直すのが難しいので、慎重に計画し、早めに計画してください!

UI 要素間のキーボード ナビゲーションの詳細については、「 キーボードのアクセシビリティ」を参照してください。

また、アクセシビリティ 電子ブックのための エンジニアリングソフトウェアは、「論理階層の設計」というタイトルのこのテーマ 優れた章を持っています。

色とコントラスト

Windows の組み込みのアクセシビリティ機能の 1 つはハイ コントラスト モードであり、コンピューター画面上のテキストと画像の色のコントラストが高まります。 色のコントラストを上げると、目の疲れも減り、読みやすくなっています。 ハイ コントラストで 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 でアプリをアクセシビリティ対応として宣言します。 (ストアの アクセシビリティに関するトピックを 参照してください)。

詳細については、 アクセシビリティ チェックリスト のトピック全体を参照してください。