包括的な Windows アプリの開発

  • [アーティクル]

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

まだお読みでない場合にはまず、「包括性を備えたソフトウェアの設計」をご覧ください。

アプリをアクセシビリティに対応させるには、次の 3 つの手順を実行する必要があります。

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

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

プログラムによるアクセスは、アプリにアクセシビリティを実装させるうえで非常に重要です。 これを行うには、アプリのコンテンツや対話型の UI 要素にアクセシビリティ対応の名前 (必須) と説明 (省略可能) を設定します。 これにより、スクリーン リーダー (ナレーターなど) または代替出力デバイス (点字ディスプレイなど) などの支援技術 (AT) で、UI コントロールを認識できるようになります。 プログラムによるアクセスがないと、支援技術の API は情報を正しく解釈することができません。このため、ユーザーは製品を十分に利用できないか、支援技術が文書化されていないプログラミング インターフェイスや、アクセシビリティ インターフェイスとして使用することを目的としていない技術を使用することになります。 支援技術で UI コントロールを認識できるようになると、ユーザーに利用可能な操作およびオプションを支援技術が判断できるようになります。

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

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

視覚障碍または運動障碍のあるユーザーにとって、キーボードを使用して UI を移動できることは非常に重要です。 ただし、機能するためにユーザーの操作が必要となる UI コントロールだけにキーボード フォーカスを移動させる必要があります。 静止画像など、操作を必要としないコンポーネントについては、キーボード フォーカスは必要ありません。

マウスまたはタッチ スクリーンによるナビゲーションとは異なり、キーボード ナビゲーションは直線的であることを覚えておくことは大切です。 キーボード ナビゲーションを検討するときには、ユーザーが製品を操作する方法や論理的なナビゲーションについて考えます。 西洋文化では、ユーザーは、左から右へ、上から下へ読みます。 このため、キーボード ナビゲーションについても、このパターンに従うことが通例となっています。

キーボード ナビゲーションを設計するときには、UI を調査し、次の質問について考慮します。

  • UI にコントロールがどのようにレイアウトされ、まとめられているか?
  • 重要なコントロール グループが存在するか?
    • 存在する場合は、それらのグループに別のレベルのグループが含まれているか?
  • コントロール間を移動する場合、Tab キーまたは特別なナビゲーション (矢印キー)、あるいはその両方を使用する必要があるか?

目的は、ユーザーがどのように UI がレイアウトされているかを理解し、操作できるコントロールがどれかを識別できるように支援することです。 ユーザーがナビゲーションを 1 周するのに押す必要がある Tab キーの回数が多すぎる場合、関連するコントロールを 1 つにまとめられないか検討します。 ハイブリッド コントロールなど、関連するいくつかのコントロールは、調査段階の早い段階で対応する必要がある場合があります。 製品の開発を開始した後でキーボード ナビゲーションをやり直すことは難しいため、早い段階で慎重に計画するようにします。

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

また、アクセシビリティ ソフトウェアのエンジニアリングに関する eBook の論理的な階層の設計のチャプターにも、これらのことがわかりやすく説明されています。

色とコントラスト

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 でアプリがアクセシビリティ対応であることを宣言します。 (「ストア内のアクセシビリティ」をご覧ください。)

詳しくは、完全版の「アクセシビリティ チェックリスト」をご覧ください。